/*
 * PORTAL — HOLOGRAPHX HARDWARE skin (v1)
 * The 3D portal scene and the pulsing orb (animation "pulse") are untouched.
 * The terminal, config panel and buttons become hardware.
 * Remove the <link> and body class "hx-hw" to undo.
 */
body.hx-hw {
    --hx-acc: #1fe3ff;
    --hx-acc-rgb: 31, 227, 255;
}

/* Title: engraved wordmark with a soft backlight */
body.hx-hw.hx-hw .portal-title {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    letter-spacing: .32em !important;
}

/* Terminal: machined console with a backlit screen */
body.hx-hw.hx-hw #chat-interface {
    border: 0 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.07), transparent 60%),
        linear-gradient(180deg, #18181b, #0c0c0e) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px #1f1f23, 0 -10px 30px rgba(0,0,0,.6) !important;
}
body.hx-hw.hx-hw #welcome-message {
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    box-shadow: var(--hx-lcd-shadow) !important;
    font-family: var(--hx-font) !important;
}

/* Config panel: hardware popover */
body.hx-hw.hx-hw #api-config-panel {
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #1a1a1d, #0e0e10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px #26262a, 0 30px 60px rgba(0,0,0,.75) !important;
}

/* Buttons: keys. Platform buttons keep their own brand colours, gain depth. */
body.hx-hw.hx-hw :is(.main-config-btn, #config-button, #load-custom, #cancel-config) {
    font-family: var(--hx-font) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}
body.hx-hw.hx-hw #cancel-config {
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    box-shadow: var(--hx-key-shadow) !important;
}
body.hx-hw.hx-hw .platform-btn {
    font-family: var(--hx-font) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.35), 0 3px 0 #000, 0 6px 12px rgba(0,0,0,.5) !important;
}
body.hx-hw.hx-hw .platform-btn:active { transform: translateY(1px); }
body.hx-hw.hx-hw .custom-url-input input,
body.hx-hw.hx-hw #custom-url {
    font-family: var(--hx-font) !important;
    color: var(--hx-ink) !important;
    background: #0d0d0f !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024 !important;
}
body.hx-hw.hx-hw .connection-status { font-family: var(--hx-mono) !important; }