/* Chat view: cyan-led cyberpunk chrome. */
body:has(#view-chat.view.active) {
    --chat-cyan: #00cbd8;
    --chat-cyan-soft: #aeeef2;
    --chat-ice: #d7f7f8;
    --chat-bg-deep: #020813;
    --chat-bg-panel: #061827;
    --chat-violet-accent: rgba(143, 61, 255, 0.14);
}

body:has(#view-chat.view.active) #content-area {
    background:
        linear-gradient(rgba(0, 203, 216, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 203, 216, 0.022) 1px, transparent 1px),
        radial-gradient(circle at 76% 12%, rgba(0, 203, 216, 0.06), transparent 34%),
        var(--chat-bg-deep) !important;
}

body:has(#view-chat.view.active) #view-chat {
    background: var(--chat-bg-deep) !important;
}

body:has(#view-chat.view.active) #view-chat::before {
    opacity: 0.78 !important;
}

body:has(#view-chat.view.active) #view-chat::after {
    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 18, 0.78) 0%,
            rgba(2, 8, 18, 0.46) 52%,
            rgba(2, 12, 25, 0.68) 100%
        ),
        linear-gradient(
            180deg,
            rgba(2, 8, 18, 0.08) 0%,
            rgba(2, 8, 18, 0.64) 90%
        ) !important;
}

/* Shared navigation and session drawer. */
body:has(#view-chat.view.active) #sidebar {
    background: #030c18 !important;
    border-right-color: rgba(0, 203, 216, 0.22) !important;
}

body:has(#view-chat.view.active) #sidebar .menu-group > button {
    color: rgba(143, 211, 218, 0.72) !important;
}

body:has(#view-chat.view.active) #sidebar .menu-group > button:hover {
    color: var(--chat-cyan-soft) !important;
}

body:has(#view-chat.view.active) #sidebar .menu-group-items .sidebar-item,
body:has(#view-chat.view.active) #sidebar .sidebar-item {
    color: rgba(207, 232, 237, 0.78) !important;
    background:
        linear-gradient(96deg, rgba(5, 22, 40, 0.92), rgba(5, 13, 28, 0.94)) padding-box,
        linear-gradient(105deg, rgba(0, 203, 216, 0.28), var(--chat-violet-accent)) border-box !important;
    border-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

body:has(#view-chat.view.active) #sidebar .menu-group-items .sidebar-item:hover,
body:has(#view-chat.view.active) #sidebar .sidebar-item:hover {
    color: var(--chat-cyan-soft) !important;
    background:
        linear-gradient(90deg, rgba(0, 203, 216, 0.11), rgba(0, 203, 216, 0.035)) padding-box,
        linear-gradient(105deg, rgba(0, 203, 216, 0.62), var(--chat-violet-accent)) border-box !important;
    border-color: rgba(0, 203, 216, 0.3) !important;
    box-shadow: inset 2px 0 0 var(--chat-cyan) !important;
    filter: drop-shadow(0 0 7px rgba(0, 203, 216, 0.15)) !important;
}

body:has(#view-chat.view.active) #sidebar .menu-group-items .sidebar-item.active,
body:has(#view-chat.view.active) #sidebar .sidebar-item.active {
    color: var(--chat-ice) !important;
    background:
        linear-gradient(96deg, rgba(0, 54, 66, 0.78), rgba(5, 19, 38, 0.96)) padding-box,
        linear-gradient(102deg, var(--chat-cyan), var(--chat-violet-accent), rgba(0, 203, 216, 0.62)) border-box !important;
    border-color: transparent !important;
    box-shadow: inset 3px 0 0 var(--chat-cyan) !important;
    filter: drop-shadow(0 0 8px rgba(0, 203, 216, 0.18)) !important;
}

body:has(#view-chat.view.active) #sidebar .sidebar-item.active::before {
    background: var(--chat-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 203, 216, 0.62) !important;
}

body:has(#view-chat.view.active) #sidebar .sidebar-item.active::after {
    background: linear-gradient(90deg, transparent, var(--chat-cyan), rgba(143, 61, 255, 0.18)) !important;
    box-shadow: 0 0 10px rgba(0, 203, 216, 0.42) !important;
}

body:has(#view-chat.view.active) #sidebar .sidebar-item .item-icon,
body:has(#view-chat.view.active) #sidebar .sidebar-item .text-cyan-300,
body:has(#view-chat.view.active) #sidebar .sidebar-item .text-emerald-400,
body:has(#view-chat.view.active) #sidebar .sidebar-item .text-primary-400 {
    color: rgba(124, 213, 226, 0.82) !important;
    text-shadow: 0 0 8px rgba(0, 203, 216, 0.18) !important;
}

body:has(#view-chat.view.active) #sidebar > div:last-child {
    border-top-color: rgba(0, 203, 216, 0.2) !important;
}

body:has(#view-chat.view.active) .session-panel {
    background:
        linear-gradient(180deg, rgba(5, 22, 40, 0.99), rgba(2, 8, 19, 0.99)) padding-box,
        linear-gradient(180deg, rgba(0, 203, 216, 0.58), rgba(0, 203, 216, 0.24) 52%, var(--chat-violet-accent)) border-box !important;
    box-shadow:
        inset -1px 0 rgba(0, 203, 216, 0.18),
        6px 0 24px rgba(0, 203, 216, 0.08),
        18px 0 42px rgba(0, 0, 0, 0.42) !important;
}

body:has(#view-chat.view.active) .session-panel-header {
    border-bottom-color: rgba(0, 203, 216, 0.3) !important;
    background:
        linear-gradient(90deg, rgba(0, 203, 216, 0.1), transparent 58%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(0, 203, 216, 0.1) 22px 24px, transparent 24px 45px) !important;
}

body:has(#view-chat.view.active) .session-panel-title {
    color: var(--chat-ice) !important;
}

body:has(#view-chat.view.active) .session-panel-close,
body:has(#view-chat.view.active) .session-panel-new {
    color: var(--chat-cyan-soft) !important;
    border-color: rgba(0, 203, 216, 0.42) !important;
    background:
        linear-gradient(100deg, rgba(4, 28, 44, 0.98), rgba(5, 12, 31, 0.98)) padding-box,
        linear-gradient(104deg, rgba(0, 203, 216, 0.68), var(--chat-violet-accent), rgba(0, 203, 216, 0.36)) border-box !important;
}

body:has(#view-chat.view.active) .session-list {
    background: linear-gradient(90deg, rgba(0, 203, 216, 0.018), transparent 54%, rgba(0, 203, 216, 0.025)) !important;
}

body:has(#view-chat.view.active) .session-item {
    color: rgba(207, 232, 237, 0.8) !important;
    border-color: rgba(0, 203, 216, 0.25) !important;
    background:
        linear-gradient(96deg, rgba(7, 23, 43, 0.92), rgba(4, 11, 27, 0.95)) padding-box,
        linear-gradient(108deg, rgba(0, 203, 216, 0.24), var(--chat-violet-accent)) border-box !important;
    filter: none !important;
}

body:has(#view-chat.view.active) .session-item:hover,
body:has(#view-chat.view.active) .session-item.active {
    color: var(--chat-ice) !important;
    background:
        linear-gradient(96deg, rgba(0, 54, 66, 0.78), rgba(6, 15, 38, 0.96)) padding-box,
        linear-gradient(104deg, var(--chat-cyan), var(--chat-violet-accent), rgba(0, 203, 216, 0.52)) border-box !important;
    box-shadow:
        inset 3px 0 var(--chat-cyan),
        0 0 13px rgba(0, 203, 216, 0.14) !important;
    filter: none !important;
}

body:has(#view-chat.view.active) .session-item .session-icon,
body:has(#view-chat.view.active) .session-item.active .session-icon {
    color: var(--chat-cyan-soft) !important;
    text-shadow: 0 0 9px rgba(0, 203, 216, 0.32) !important;
}

/* Top header and active-life summary. */
body:has(#view-chat.view.active) #main-content > header {
    border-bottom-color: rgba(0, 203, 216, 0.42) !important;
    background:
        linear-gradient(96deg, rgba(3, 18, 34, 0.99), rgba(3, 11, 25, 0.99) 62%, rgba(4, 17, 32, 0.99)) padding-box,
        linear-gradient(96deg, rgba(0, 203, 216, 0.64), rgba(0, 203, 216, 0.24) 54%, var(--chat-violet-accent)) border-box !important;
    box-shadow:
        inset 0 -1px rgba(0, 203, 216, 0.15),
        0 6px 24px rgba(0, 203, 216, 0.07) !important;
}

body:has(#view-chat.view.active) #main-content > header
    :is(#breadcrumb-group, .active-life-summary-label) {
    color: rgba(127, 192, 201, 0.86) !important;
    text-shadow: 0 0 7px rgba(0, 203, 216, 0.12) !important;
}

body:has(#view-chat.view.active) #main-content > header
    :is(#breadcrumb-page, #account-username, #active-life-name) {
    color: var(--chat-ice) !important;
    text-shadow: 0 0 8px rgba(0, 203, 216, 0.14) !important;
}

body:has(#view-chat.view.active) #main-content > header #breadcrumb-separator {
    color: rgba(0, 203, 216, 0.74) !important;
}

body:has(#view-chat.view.active) #main-content > header
    :is(#session-toggle-btn, #account-summary button, #lang-toggle) {
    color: rgba(145, 216, 222, 0.84) !important;
    border-color: rgba(0, 203, 216, 0.16) !important;
    background: transparent !important;
}

body:has(#view-chat.view.active) #main-content > header
    :is(#session-toggle-btn, #account-summary button, #lang-toggle):hover {
    color: var(--chat-ice) !important;
    border-color: rgba(0, 203, 216, 0.48) !important;
    background: rgba(0, 203, 216, 0.08) !important;
    box-shadow: 0 0 10px rgba(0, 203, 216, 0.12) !important;
}

body:has(#view-chat.view.active) .active-life-summary {
    border-color: rgba(0, 203, 216, 0.5) !important;
    background:
        linear-gradient(135deg, rgba(5, 29, 46, 0.98), rgba(3, 12, 27, 0.98)) padding-box,
        linear-gradient(105deg, rgba(0, 203, 216, 0.72), rgba(0, 203, 216, 0.28) 76%, var(--chat-violet-accent)) border-box !important;
    box-shadow: inset 0 0 16px rgba(0, 203, 216, 0.06), 0 0 12px rgba(0, 203, 216, 0.1) !important;
}

body:has(#view-chat.view.active) .active-life-summary::before {
    border-top-color: rgba(0, 203, 216, 0.78) !important;
    box-shadow: 0 0 8px rgba(0, 203, 216, 0.42) !important;
}

body:has(#view-chat.view.active) .active-life-summary::after {
    border-bottom-color: rgba(0, 203, 216, 0.58) !important;
    box-shadow: 0 0 8px rgba(0, 203, 216, 0.28) !important;
}

body:has(#view-chat.view.active) .active-life-summary-signal {
    background: var(--chat-cyan) !important;
    box-shadow: 0 0 9px rgba(0, 203, 216, 0.58) !important;
}

/* Message stage and welcome surface. */
body:has(#view-chat.view.active) #chat-messages {
    background: transparent !important;
    border: 0 !important;
    border-image: none !important;
    clip-path: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body:has(#view-chat.view.active) #chat-messages::before,
body:has(#view-chat.view.active) .chat-messages-viewport::after {
    display: none !important;
    content: none !important;
}

body:has(#view-chat.view.active) #welcome-screen {
    background:
        linear-gradient(145deg, rgba(5, 23, 42, 0.95), rgba(4, 10, 26, 0.96) 62%, rgba(5, 20, 35, 0.94)) padding-box,
        linear-gradient(118deg, rgba(0, 203, 216, 0.72), rgba(0, 203, 216, 0.28) 58%, var(--chat-violet-accent)) border-box !important;
    box-shadow:
        inset 0 0 24px rgba(0, 203, 216, 0.05),
        0 0 14px rgba(0, 203, 216, 0.1),
        0 20px 50px rgba(0, 0, 0, 0.38) !important;
}

body:has(#view-chat.view.active) #welcome-screen::before {
    border-top-color: rgba(174, 238, 242, 0.62) !important;
    border-left-color: rgba(0, 203, 216, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(174, 238, 242, 0.06) !important;
}

body:has(#view-chat.view.active) .welcome-avatar {
    box-shadow:
        0 0 0 2px rgba(0, 203, 216, 0.76),
        0 0 10px rgba(0, 203, 216, 0.22),
        0 0 22px rgba(143, 61, 255, 0.1) !important;
}

body:has(#view-chat.view.active) #welcome-title {
    color: var(--chat-ice) !important;
    text-shadow: 0 0 16px rgba(0, 203, 216, 0.26) !important;
}

body:has(#view-chat.view.active) #welcome-subtitle,
body:has(#view-chat.view.active) .example-card .text-slate-500,
body:has(#view-chat.view.active) .example-card .dark\:text-slate-400 {
    color: rgba(177, 208, 215, 0.84) !important;
}

body:has(#view-chat.view.active) .example-card {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(0, 203, 216, 0.022) 27px 28px),
        linear-gradient(140deg, rgba(5, 29, 47, 0.97), rgba(4, 11, 27, 0.98)) padding-box,
        linear-gradient(108deg, rgba(0, 203, 216, 0.68), rgba(0, 203, 216, 0.22) 58%, var(--chat-violet-accent)) border-box !important;
    box-shadow:
        inset 0 0 20px rgba(0, 203, 216, 0.04),
        0 0 10px rgba(0, 203, 216, 0.08),
        0 14px 30px rgba(0, 0, 0, 0.3) !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2) {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(0, 203, 216, 0.018) 27px 28px),
        linear-gradient(140deg, rgba(5, 24, 43, 0.97), rgba(4, 11, 28, 0.98)) padding-box,
        linear-gradient(108deg, rgba(0, 203, 216, 0.58), var(--chat-violet-accent) 58%, rgba(0, 203, 216, 0.34)) border-box !important;
}

body:has(#view-chat.view.active) .example-card::before {
    background: linear-gradient(90deg, var(--chat-cyan), rgba(0, 203, 216, 0.38), transparent) !important;
    box-shadow: 0 0 9px rgba(0, 203, 216, 0.34) !important;
}

body:has(#view-chat.view.active) .example-card::after {
    border-right-color: var(--chat-cyan) !important;
    border-bottom-color: rgba(143, 61, 255, 0.34) !important;
    filter: drop-shadow(0 0 5px rgba(0, 203, 216, 0.34)) !important;
}

body:has(#view-chat.view.active) .example-card .rounded-2xl {
    border-color: rgba(0, 203, 216, 0.42) !important;
    background: linear-gradient(135deg, rgba(0, 203, 216, 0.16), rgba(17, 71, 105, 0.2)) !important;
    box-shadow: inset 0 0 13px rgba(0, 203, 216, 0.07), 0 0 9px rgba(0, 203, 216, 0.08) !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2) .rounded-2xl {
    border-color: rgba(143, 61, 255, 0.3) !important;
    background: linear-gradient(135deg, rgba(0, 203, 216, 0.12), rgba(52, 64, 137, 0.18)) !important;
}

body:has(#view-chat.view.active) .example-card .text-slate-800,
body:has(#view-chat.view.active) .example-card .dark\:text-slate-100,
body:has(#view-chat.view.active) .example-card .text-blue-500,
body:has(#view-chat.view.active) .example-card .text-indigo-500 {
    color: var(--chat-ice) !important;
}

/* Message bubbles and composer. */
body:has(#view-chat.view.active) .hud-assistant-frame {
    background:
        linear-gradient(130deg, rgba(6, 34, 50, 0.96), rgba(4, 14, 29, 0.98)) padding-box,
        linear-gradient(135deg, var(--chat-cyan), rgba(0, 203, 216, 0.24) 70%, var(--chat-violet-accent)) border-box !important;
}

body:has(#view-chat.view.active) .hud-user-frame {
    background:
        linear-gradient(130deg, rgba(6, 34, 50, 0.94), rgba(5, 15, 32, 0.98)) padding-box,
        linear-gradient(135deg, rgba(0, 203, 216, 0.42), var(--chat-violet-accent) 64%, var(--chat-cyan)) border-box !important;
}

body:has(#view-chat.view.active) .hud-user-frame::before {
    border-right-color: var(--chat-cyan) !important;
    border-bottom-color: var(--chat-cyan) !important;
    box-shadow: 3px 3px 10px rgba(0, 203, 216, 0.2) !important;
}

body:has(#view-chat.view.active) .hud-user-frame::after {
    background: linear-gradient(90deg, transparent, var(--chat-cyan)) !important;
    box-shadow: 0 0 12px var(--chat-cyan) !important;
}

body:has(#view-chat.view.active) .hud-user-node {
    border-color: var(--chat-cyan) !important;
    color: var(--chat-cyan-soft) !important;
    box-shadow: 0 0 10px rgba(0, 203, 216, 0.22) !important;
}

body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
    background:
        linear-gradient(180deg, rgba(4, 20, 35, 0.98), rgba(2, 9, 20, 0.99)) padding-box,
        linear-gradient(102deg, rgba(0, 203, 216, 0.7), rgba(0, 203, 216, 0.24) 74%, var(--chat-violet-accent)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(174, 238, 242, 0.1),
        inset 0 0 18px rgba(0, 203, 216, 0.04),
        0 0 14px rgba(0, 203, 216, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.44) !important;
}

body:has(#view-chat.view.active) #chat-input-shell {
    border-color: rgba(0, 203, 216, 0.48) !important;
    background:
        linear-gradient(110deg, rgba(4, 24, 42, 0.98), rgba(4, 13, 29, 0.98) 66%, rgba(5, 21, 38, 0.98)) padding-box,
        linear-gradient(106deg, rgba(0, 203, 216, 0.72), rgba(0, 203, 216, 0.2) 72%, var(--chat-violet-accent)) border-box !important;
    box-shadow:
        inset 0 1px 1px rgba(215, 247, 248, 0.1),
        inset 0 0 22px rgba(0, 203, 216, 0.045),
        0 0 13px rgba(0, 203, 216, 0.1),
        0 15px 33px rgba(0, 0, 0, 0.33) !important;
}

body:has(#view-chat.view.active) #chat-input-shell::before,
body:has(#view-chat.view.active) #chat-input-shell::after {
    animation: none !important;
}

body:has(#view-chat.view.active) #chat-input-shell::before {
    background: linear-gradient(90deg, var(--chat-cyan), rgba(0, 203, 216, 0.08), transparent) !important;
    box-shadow: 0 0 9px rgba(0, 203, 216, 0.42) !important;
}

body:has(#view-chat.view.active) #chat-input-shell::after {
    background: linear-gradient(90deg, transparent, rgba(0, 203, 216, 0.1), var(--chat-cyan)) !important;
    box-shadow: 0 0 9px rgba(0, 203, 216, 0.4) !important;
}

body:has(#view-chat.view.active) #chat-input-shell > .chat-input-stack,
body:has(#view-chat.view.active) #chat-input-shell > .flex-1 {
    background:
        linear-gradient(90deg, rgba(3, 10, 23, 0.98), rgba(4, 12, 26, 0.98)) padding-box,
        linear-gradient(90deg, rgba(0, 203, 216, 0.42), rgba(0, 203, 216, 0.12) 76%, rgba(143, 61, 255, 0.12)) border-box !important;
    box-shadow: inset 0 0 16px rgba(0, 203, 216, 0.025) !important;
}

body:has(#view-chat.view.active) #chat-input {
    color: var(--chat-ice) !important;
    caret-color: var(--chat-cyan) !important;
}

body:has(#view-chat.view.active) #chat-input::placeholder {
    color: rgba(157, 199, 207, 0.66) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button,
body:has(#view-chat.view.active) #mic-btn,
body:has(#view-chat.view.active) #send-btn {
    border-color: rgba(0, 203, 216, 0.48) !important;
    background:
        linear-gradient(135deg, rgba(5, 31, 47, 0.98), rgba(4, 12, 28, 0.98)) padding-box,
        linear-gradient(135deg, rgba(0, 203, 216, 0.72), var(--chat-violet-accent), rgba(0, 203, 216, 0.42)) border-box !important;
    color: var(--chat-cyan-soft) !important;
    box-shadow:
        inset 0 0 10px rgba(0, 203, 216, 0.045),
        0 0 8px rgba(0, 203, 216, 0.1) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button:hover,
body:has(#view-chat.view.active) #mic-btn:hover,
body:has(#view-chat.view.active) #send-btn:hover:not(:disabled) {
    border-color: rgba(0, 203, 216, 0.72) !important;
    background:
        linear-gradient(135deg, rgba(0, 55, 70, 0.96), rgba(5, 21, 43, 0.99)) padding-box,
        linear-gradient(135deg, var(--chat-cyan), rgba(0, 203, 216, 0.36), var(--chat-violet-accent)) border-box !important;
    color: var(--chat-ice) !important;
    box-shadow:
        inset 0 0 14px rgba(0, 203, 216, 0.08),
        0 0 12px rgba(0, 203, 216, 0.2) !important;
}

body:has(#view-chat.view.active) #send-btn:disabled {
    color: rgba(174, 238, 242, 0.42) !important;
    background: rgba(4, 24, 40, 0.76) !important;
    filter: none !important;
}

body:has(#view-chat.view.active) #new-chat-btn,
body:has(#view-chat.view.active) #clear-context-btn {
    color: var(--chat-cyan-soft) !important;
}

body:has(#view-chat.view.active) #attachment-preview,
body:has(#view-chat.view.active) .chat-skill-chip-list {
    border-color: rgba(0, 203, 216, 0.28) !important;
    background: rgba(3, 20, 35, 0.88) !important;
}

body:has(#view-chat.view.active) .slash-menu {
    border-color: rgba(0, 203, 216, 0.46) !important;
    background: rgba(3, 17, 31, 0.98) !important;
    box-shadow: 0 0 18px rgba(0, 203, 216, 0.12) !important;
}

body:has(#view-chat.view.active) .slash-menu-item:hover,
body:has(#view-chat.view.active) .slash-menu-item.active {
    background: rgba(0, 203, 216, 0.12) !important;
    color: var(--chat-ice) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
        box-shadow:
            inset 0 0 14px rgba(0, 203, 216, 0.035),
            0 0 10px rgba(0, 203, 216, 0.07),
            0 16px 28px rgba(0, 0, 0, 0.34) !important;
    }

    body:has(#view-chat.view.active) #chat-input-shell {
        box-shadow:
            inset 0 0 14px rgba(0, 203, 216, 0.045),
            0 0 8px rgba(0, 203, 216, 0.07),
            0 11px 24px rgba(0, 0, 0, 0.28) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-chat.view.active) #welcome-screen::before,
    body:has(#view-chat.view.active) #chat-input-shell::before,
    body:has(#view-chat.view.active) #chat-input-shell::after,
    body:has(#view-chat.view.active) #main-content > header::before,
    body:has(#view-chat.view.active) #main-content > header::after {
        animation: none !important;
    }
}