/*
 * Chat visual recovery from the verified 20260821-aurora backup.
 * Every rule is scoped to the active chat view so the life simulator keeps
 * its existing visual system and motion rules.
 */

body:has(#view-chat.view.active) {
    --chat-shell-pink: #ff2fa6;
    --chat-shell-pink-soft: #ff86d2;
    --chat-shell-violet: #9b4dff;
    --chat-shell-indigo: #6257ff;
    --chat-accent-cyan: #49eaff;
    --chat-accent-cyan-soft: #a9f7ff;
}

body:has(#view-chat.view.active) .session-panel {
    border-right-color: transparent !important;
    background:
        linear-gradient(180deg, rgba(6, 20, 40, .99), rgba(2, 8, 19, .99)) padding-box,
        linear-gradient(180deg, rgba(255, 68, 211, .72), rgba(46, 238, 255, .7) 43%, rgba(255, 68, 211, .54)) border-box !important;
    box-shadow:
        inset -1px 0 rgba(255, 47, 166, .18),
        6px 0 24px rgba(155, 77, 255, .14),
        18px 0 42px rgba(0, 0, 0, .42) !important;
}

body:has(#view-chat.view.active) .session-panel-header {
    border-bottom-color: rgba(46, 238, 255, .34) !important;
    background-image:
        linear-gradient(90deg, rgba(44, 244, 255, .12), transparent 44%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(79, 222, 255, .14) 22px 24px, transparent 24px 45px) !important;
}

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

body:has(#view-chat.view.active) .session-panel-close,
body:has(#view-chat.view.active) .session-panel-new {
    color: var(--chat-shell-pink-soft) !important;
    border-color: rgba(155, 77, 255, .48) !important;
    background:
        linear-gradient(100deg, rgba(40, 8, 62, .96), rgba(13, 7, 40, .97)) padding-box,
        linear-gradient(104deg, rgba(255, 47, 166, .82), rgba(155, 77, 255, .74), rgba(98, 87, 255, .62)) border-box !important;
}

body:has(#view-chat.view.active) .session-item {
    border-color: rgba(72, 140, 210, .28) !important;
    color: rgba(224, 239, 249, .78) !important;
    background:
        linear-gradient(180deg, rgba(11, 25, 49, .82), rgba(5, 11, 28, .88)) padding-box,
        linear-gradient(100deg, rgba(255, 65, 207, .35), rgba(43, 244, 255, .28)) border-box !important;
    filter: drop-shadow(0 0 5px rgba(50, 246, 255, .08)) !important;
}

body:has(#view-chat.view.active) .session-item:hover,
body:has(#view-chat.view.active) .session-item.active {
    color: #fff !important;
    border-color: transparent !important;
    background:
        linear-gradient(96deg, rgba(73, 9, 83, .98), rgba(29, 10, 70, .97)) padding-box,
        linear-gradient(104deg, var(--chat-shell-pink), var(--chat-shell-violet) 54%, var(--chat-shell-indigo)) border-box !important;
    box-shadow: inset 3px 0 var(--chat-shell-pink), 0 0 13px rgba(255, 47, 166, .18) !important;
    filter: drop-shadow(0 0 8px rgba(255, 47, 166, .24)) drop-shadow(0 0 12px rgba(155, 77, 255, .16)) !important;
}

body:has(#view-chat.view.active) .session-item .session-icon {
    color: rgba(124, 213, 242, .72) !important;
}

body:has(#view-chat.view.active) .session-item.active .session-icon {
    color: #ffc0ea !important;
    text-shadow: 0 0 10px rgba(255, 47, 166, .74) !important;
}

body:has(#view-chat.view.active) #sidebar .sidebar-item.active,
body:has(#view-chat.view.active) #sidebar .menu-group-items .sidebar-item.active {
    border-color: transparent !important;
    background:
        linear-gradient(95deg, rgba(32, 12, 65, .96), rgba(4, 42, 57, .94)) padding-box,
        linear-gradient(102deg, var(--chat-shell-pink), var(--chat-accent-cyan) 51%, var(--chat-shell-violet)) border-box !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 6px rgba(50, 246, 255, .28)) drop-shadow(0 0 11px rgba(255, 58, 200, .18)) !important;
}

body:has(#view-chat.view.active) #sidebar .menu-group-items .sidebar-item {
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background:
        linear-gradient(96deg, rgba(5, 22, 40, .9), rgba(8, 11, 31, .92)) padding-box,
        linear-gradient(105deg, rgba(255, 79, 216, .34), rgba(50, 246, 255, .26) 56%, rgba(141, 107, 255, .3)) border-box !important;
    box-shadow: none !important;
}

body:has(#view-chat.view.active) #main-content > header {
    border-bottom-color: transparent !important;
    background:
        linear-gradient(96deg, rgba(14, 5, 35, .99), rgba(6, 5, 25, .98) 58%, rgba(28, 6, 45, .96)) padding-box,
        linear-gradient(96deg, rgba(255, 47, 166, .82), rgba(155, 77, 255, .76) 52%, rgba(98, 87, 255, .62), rgba(255, 47, 166, .78)) border-box !important;
    box-shadow:
        inset 0 -1px rgba(255, 47, 166, .2),
        inset 0 0 24px rgba(155, 77, 255, .065),
        0 6px 26px rgba(10, 1, 30, .34) !important;
}

body:has(#view-chat.view.active) #main-content > header::before,
body:has(#view-chat.view.active) #main-content > header::after {
    content: "" !important;
    position: absolute !important;
    border: 0 !important;
    pointer-events: none !important;
}

body:has(#view-chat.view.active) #main-content > header::before {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 4px !important;
    background: linear-gradient(90deg, rgba(255, 47, 166, .42), rgba(155, 77, 255, .62) 42%, rgba(98, 87, 255, .48) 72%, rgba(255, 47, 166, .42)) !important;
    opacity: .66 !important;
}

body:has(#view-chat.view.active) #main-content > header button {
    color: rgba(201, 171, 246, .76) !important;
    border-color: rgba(155, 77, 255, .18) !important;
}

body:has(#view-chat.view.active) :is(#breadcrumb-group, .active-life-summary-label) {
    color: rgba(217, 184, 255, .68) !important;
}

body:has(#view-chat.view.active) :is(#breadcrumb-page, #account-username) {
    color: #fff2fb !important;
}

body:has(#view-chat.view.active) #account-role {
    color: var(--chat-shell-pink) !important;
    text-shadow: 0 0 8px rgba(255, 47, 166, .4);
}

body:has(#view-chat.view.active) .active-life-summary {
    border-color: transparent !important;
    background:
        linear-gradient(102deg, rgba(29, 7, 49, .97), rgba(9, 7, 32, .98)) padding-box,
        linear-gradient(104deg, var(--chat-shell-pink), var(--chat-shell-violet) 55%, var(--chat-shell-indigo)) border-box !important;
    box-shadow:
        inset 0 0 16px rgba(155, 77, 255, .1),
        0 0 12px rgba(255, 47, 166, .2),
        0 0 20px rgba(155, 77, 255, .12) !important;
}

body:has(#view-chat.view.active) #chat-messages {
    border: 1px solid rgba(50, 246, 255, .72) !important;
    border-image: linear-gradient(106deg, #ff3ccf 0%, #762fa9 14%, #263c8e 34%, #2cf4ff 51%, #336cff 68%, #ff45cf 100%) 1 !important;
    clip-path: polygon(15px 0, calc(100% - 22px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 15px) 100%, 11px 100%, 0 calc(100% - 11px), 0 15px) !important;
    background: rgba(1, 6, 17, .34) !important;
    box-shadow:
        inset 0 0 0 1px rgba(114, 236, 255, .1),
        inset 0 0 0 7px rgba(1, 6, 19, .23),
        inset 0 0 46px rgba(52, 56, 142, .08),
        0 0 19px rgba(50, 246, 255, .12),
        0 0 28px rgba(255, 58, 200, .12) !important;
}

body:has(#view-chat.view.active) .hud-message-frame {
    border-radius: 0 !important;
    clip-path: polygon(15px 0, calc(100% - 22px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 15px) 100%, 11px 100%, 0 calc(100% - 11px), 0 15px) !important;
}

body:has(#view-chat.view.active) .hud-assistant-frame {
    background:
        linear-gradient(130deg, rgba(7, 31, 53, .98), rgba(4, 10, 28, .98)) padding-box,
        linear-gradient(112deg, var(--chat-accent-cyan), rgba(53, 148, 255, .35) 48%, var(--chat-shell-violet)) border-box !important;
}

body:has(#view-chat.view.active) .hud-user-frame {
    background:
        linear-gradient(130deg, rgba(39, 13, 74, .98), rgba(9, 16, 38, .98)) padding-box,
        linear-gradient(112deg, var(--chat-shell-pink), var(--chat-shell-violet) 52%, var(--chat-accent-cyan)) border-box !important;
}

body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
    margin: 10px 14px 14px !important;
    padding: 7px 13px max(9px, env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(20, 5, 37, .98), rgba(6, 4, 20, .99)) padding-box,
        linear-gradient(102deg, var(--chat-shell-pink), var(--chat-shell-violet) 42%, rgba(73, 234, 255, .68) 76%, var(--chat-shell-indigo)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(169, 247, 255, .12),
        inset 0 0 18px rgba(73, 234, 255, .045),
        inset 0 -15px 24px rgba(113, 30, 168, .1),
        0 0 11px rgba(73, 234, 255, .14),
        0 0 20px rgba(255, 47, 166, .2),
        0 16px 32px rgba(0, 0, 0, .44) !important;
}

body:has(#view-chat.view.active) #chat-input-shell {
    align-items: center !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 13px !important;
    row-gap: 8px !important;
    min-height: 62px !important;
    padding: 7px 14px !important;
    border: 1px solid rgba(0, 240, 255, .22) !important;
    border-radius: 9999px !important;
    background:
        linear-gradient(110deg, rgba(4, 23, 43, .97), rgba(9, 11, 35, .98) 66%, rgba(36, 8, 56, .93)) padding-box,
        linear-gradient(106deg, #ff3ccf 0%, #762fa9 14%, #263c8e 34%, #2cf4ff 51%, #336cff 68%, #ff45cf 100%) border-box !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .16),
        inset 0 0 22px rgba(54, 221, 255, .06),
        0 0 17px rgba(255, 58, 200, .12),
        0 15px 33px rgba(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 {
    content: "" !important;
    position: absolute !important;
    width: 95px !important;
    height: 2px !important;
    pointer-events: none !important;
    filter: none !important;
    animation: none !important;
}

body:has(#view-chat.view.active) #chat-input-shell::before {
    left: 30px !important;
    top: -1px !important;
    background: linear-gradient(90deg, var(--chat-shell-pink), rgba(255, 79, 216, .1), transparent) !important;
    box-shadow: 0 0 12px rgba(255, 72, 211, .85) !important;
}

body:has(#view-chat.view.active) #chat-input-shell::after {
    right: 30px !important;
    bottom: -1px !important;
    background: linear-gradient(90deg, transparent, rgba(35, 236, 255, .12), #2deeff) !important;
    box-shadow: 0 0 12px rgba(45, 238, 255, .86) !important;
}

body:has(#view-chat.view.active) #chat-input-actions {
    align-self: center !important;
    gap: 11px !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !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 {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border: 1px solid rgba(0, 240, 255, .35) !important;
    border-radius: 50% !important;
    clip-path: none !important;
    background:
        linear-gradient(135deg, rgba(29, 6, 44, .98), rgba(8, 7, 29, .98)) padding-box,
        linear-gradient(135deg, var(--chat-shell-pink), var(--chat-shell-violet) 48%, var(--chat-accent-cyan)) border-box !important;
    color: #b8f5ff !important;
    box-shadow:
        inset 0 0 10px rgba(73, 234, 255, .055),
        inset 0 0 12px rgba(155, 77, 255, .08),
        0 0 8px rgba(73, 234, 255, .1),
        0 0 8px rgba(255, 47, 166, .12) !important;
}

body:has(#view-chat.view.active) #new-chat-btn {
    color: #b8f5ff !important;
}

body:has(#view-chat.view.active) #clear-context-btn {
    color: #ff9ae7 !important;
}

body:has(#view-chat.view.active) #mic-btn {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    transform: translateY(-50%) !important;
}

body:has(#view-chat.view.active) #chat-input-shell > .chat-input-stack,
body:has(#view-chat.view.active) #chat-input-shell > .flex-1 {
    align-self: center !important;
    min-height: 48px !important;
    min-width: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(5, 7, 21, .98), rgba(9, 7, 27, .98)) padding-box,
        linear-gradient(90deg, rgba(255, 72, 214, .7), rgba(95, 45, 148, .32) 18%, rgba(39, 221, 255, .38) 80%, rgba(255, 72, 214, .58)) border-box !important;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, .44), inset 0 0 0 1px rgba(116, 56, 190, .16) !important;
}

body:has(#view-chat.view.active) #chat-input {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 61px 12px 19px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #e9f7ff !important;
    box-shadow: none !important;
}

body:has(#view-chat.view.active) #send-btn {
    color: #eaffff !important;
    background:
        linear-gradient(117deg, rgba(12, 67, 86, .98), rgba(50, 21, 94, .98)) padding-box,
        linear-gradient(112deg, var(--chat-accent-cyan), #7b9cff 42%, var(--chat-shell-pink)) border-box !important;
    filter: drop-shadow(0 0 8px rgba(50, 246, 255, .4)) drop-shadow(0 0 13px rgba(255, 58, 200, .24)) !important;
}

body:has(#view-chat.view.active) #send-btn:disabled {
    color: rgba(50, 246, 255, .46) !important;
    background: rgba(4, 24, 40, .76) !important;
    filter: none !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
        margin: 8px 8px 10px !important;
        padding: 6px 8px max(8px, env(safe-area-inset-bottom)) !important;
    }

    body:has(#view-chat.view.active) #chat-input-shell {
        min-height: 0 !important;
        border-radius: 26px !important;
        padding: 7px 10px !important;
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, .12),
            inset 0 0 14px rgba(54, 221, 255, .05),
            0 0 10px rgba(255, 58, 200, .08) !important;
    }

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

    body:has(#view-chat.view.active) #chat-input-actions button,
    body:has(#view-chat.view.active) #send-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    body:has(#view-chat.view.active) #mic-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        right: 6px !important;
    }
}

@media (max-width: 640px) {
    body:has(#view-chat.view.active) #chat-input-shell {
        grid-template-areas:
            "input input"
            "actions send" !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        row-gap: 7px !important;
    }

    body:has(#view-chat.view.active) #chat-input-shell > .chat-input-stack,
    body:has(#view-chat.view.active) #chat-input-shell > .flex-1 {
        grid-area: input !important;
    }

    body:has(#view-chat.view.active) #chat-input-actions {
        grid-area: actions !important;
        gap: 5px !important;
    }

    body:has(#view-chat.view.active) #send-btn {
        grid-area: send !important;
    }
}

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