/* ============================================================
   Chat polish overlay — last-loaded visual layer.
   Layout, sizes, and structure stay as-is. Adds depth, glass,
   and quiet motion so the thread feels worth opening again.
   Never transform .chat-container / .chat-header / .messages-container
   (iOS treats those as the keyboard/viewport scaffold).
   ============================================================ */

/* --- Ambient field: richer orbs, slow drift on desktop only --- */
.messages-container {
    background:
        radial-gradient(ellipse 70% 42% at 14% 6%, rgba(88, 101, 242, 0.16), transparent 58%),
        radial-gradient(ellipse 64% 40% at 92% 88%, rgba(34, 193, 220, 0.12), transparent 54%),
        radial-gradient(ellipse 42% 28% at 78% 18%, rgba(167, 139, 250, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 240px),
        var(--app-bg, #f5f7fb) !important;
}

html.dark-mode .messages-container {
    background:
        radial-gradient(ellipse 70% 42% at 14% 6%, rgba(102, 116, 217, 0.16), transparent 58%),
        radial-gradient(ellipse 64% 40% at 92% 88%, rgba(36, 198, 220, 0.10), transparent 54%),
        radial-gradient(ellipse 42% 28% at 78% 18%, rgba(124, 140, 255, 0.07), transparent 52%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 240px),
        var(--app-bg, #050506) !important;
}

html.true-dark .messages-container {
    background:
        radial-gradient(ellipse 60% 36% at 12% 4%, rgba(102, 116, 217, 0.10), transparent 52%),
        radial-gradient(ellipse 50% 32% at 94% 90%, rgba(36, 198, 220, 0.06), transparent 50%),
        var(--app-bg, #000000) !important;
}

.chat-container ::selection {
    background: rgba(88, 101, 242, 0.28);
    color: inherit;
}

html.dark-mode .chat-container ::selection {
    background: rgba(124, 140, 255, 0.32);
}

/* --- Header: slightly clearer glass, living presence --- */
.chat-header {
    background: rgba(255, 255, 255, 0.62);
    border-bottom-color: rgba(18, 25, 38, 0.08);
}

html.dark-mode .chat-header {
    background: rgba(10, 12, 18, 0.62);
}

.other-user-presence:not(.offline) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(236, 253, 245, 0.78));
    border-color: rgba(24, 168, 117, 0.28);
}

html.dark-mode .other-user-presence:not(.offline) {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.14), rgba(52, 211, 153, 0.06));
}

.other-user-presence:not(.offline) .presence-dot {
    box-shadow: 0 0 0 4px rgba(24, 168, 117, 0.16), 0 0 10px rgba(24, 168, 117, 0.55);
}

.header-countdown {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

html.dark-mode .header-countdown {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* --- Rail mark: a quiet shine so PX feels like a living mark --- */
.rail-brand {
    position: relative;
    overflow: hidden;
}

.rail-brand::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -80%;
    width: 46%;
    height: 180%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    pointer-events: none;
}

/* --- Bubbles: depth + inner light, no layout change --- */
.message.own .message-content {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 12px 26px rgba(31, 69, 184, 0.20) !important;
}

.message.other .message-content,
.message.ai .message-content {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 22px rgba(15, 23, 42, 0.07) !important;
}

html.dark-mode .message.own .message-content {
    box-shadow:
        inset 0 1px 0 rgba(140, 160, 255, 0.16),
        0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

html.dark-mode .message.other .message-content,
html.dark-mode .message.ai .message-content {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

html.dark-mode .message.important .message-content,
html.true-dark .message.important .message-content {
    box-shadow:
        inset 3px 0 0 rgba(248, 113, 113, 0.72),
        inset 0 1px 0 rgba(255, 180, 180, 0.12),
        0 0 28px rgba(127, 29, 29, 0.16) !important;
}

.date-label-text,
.unread-divider span {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

html.dark-mode .date-label-text,
html.dark-mode .unread-divider span {
    background: rgba(18, 20, 28, 0.78);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

/* --- Composer: glass pill that lights up when you type --- */
.input-container-fixed .input-row {
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html.dark-mode .input-container-fixed .input-row {
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.input-container-fixed .input-row:focus-within {
    border-color: rgba(88, 101, 242, 0.58);
    box-shadow:
        0 18px 44px rgba(88, 101, 242, 0.16),
        0 0 0 4px rgba(88, 101, 242, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html.dark-mode .input-container-fixed .input-row:focus-within {
    border-color: rgba(124, 140, 255, 0.58);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.52),
        0 0 0 4px rgba(88, 101, 242, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.input-container-fixed .send-btn:not(:disabled):hover,
html.dark-mode .input-container-fixed .send-btn:not(:disabled):hover,
.lc-send-btn:not(:disabled):hover {
    filter: drop-shadow(0 8px 14px rgba(88, 101, 242, 0.42));
}

.input-container-fixed .icon-btn:hover {
    background: rgba(88, 101, 242, 0.10);
    border-color: rgba(88, 101, 242, 0.22);
    color: #31408a;
}

html.dark-mode .input-container-fixed .icon-btn:hover {
    background: rgba(124, 140, 255, 0.12);
    border-color: rgba(124, 140, 255, 0.28);
    color: #ffffff;
}

/* --- Scrollbar: thin accent instead of grey chrome --- */
.messages-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(88, 101, 242, 0.38) transparent;
}

.messages-container::-webkit-scrollbar {
    width: 7px;
}

.messages-container::-webkit-scrollbar-track {
    background: transparent;
}

.messages-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(88, 101, 242, 0.45), rgba(34, 193, 220, 0.38));
    border-radius: 999px;
}

.messages-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(88, 101, 242, 0.72), rgba(34, 193, 220, 0.6));
}

html.dark-mode .messages-container {
    scrollbar-color: rgba(124, 140, 255, 0.34) transparent;
}

html.dark-mode .messages-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(124, 140, 255, 0.42), rgba(36, 198, 220, 0.32));
}

/* --- New-messages pill: a reason to jump back in --- */
.new-messages-pill {
    background: linear-gradient(135deg, #5865f2, #22c1dc);
    box-shadow: 0 12px 28px rgba(88, 101, 242, 0.36);
}

html.dark-mode .new-messages-pill,
.dark-mode .new-messages-pill {
    background: linear-gradient(135deg, #6674d9, #24c6dc);
    color: #07111f;
}

/* --- Pending send: a soft pulse instead of a flat fade --- */
.message.pending-send .message-content {
    opacity: 1;
}

/* --- Low-data chat: same language, same restraint --- */
.lc-container {
    background:
        radial-gradient(ellipse 70% 42% at 14% 0%, rgba(88, 101, 242, 0.14), transparent 58%),
        radial-gradient(ellipse 60% 38% at 90% 100%, rgba(34, 193, 220, 0.10), transparent 54%),
        var(--lc-bg, var(--app-bg, #f5f6f8)) !important;
}

html.dark-mode .lc-container {
    background:
        radial-gradient(ellipse 70% 42% at 14% 0%, rgba(102, 116, 217, 0.14), transparent 58%),
        radial-gradient(ellipse 60% 38% at 90% 100%, rgba(36, 198, 220, 0.10), transparent 54%),
        var(--lc-bg, var(--app-bg, #050506)) !important;
}

.lc-header,
.lc-status-bar,
.lc-input-area {
    background: rgba(255, 255, 255, 0.78);
}

html.dark-mode .lc-header,
html.dark-mode .lc-status-bar,
html.dark-mode .lc-input-area {
    background: rgba(10, 12, 18, 0.78);
}

.lc-mine .lc-msg-bubble {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 12px 26px rgba(31, 69, 184, 0.20) !important;
}

.lc-theirs .lc-msg-bubble {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 18px rgba(15, 23, 42, 0.06);
}

html.dark-mode .lc-mine .lc-msg-bubble {
    box-shadow:
        inset 0 1px 0 rgba(140, 160, 255, 0.16),
        0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

html.dark-mode .lc-theirs .lc-msg-bubble {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 18px rgba(0, 0, 0, 0.22);
}

.lc-textarea:focus {
    border-color: rgba(88, 101, 242, 0.55);
    box-shadow: 0 0 0 4px rgba(88, 101, 242, 0.14);
}

.lc-send-btn {
    background: linear-gradient(135deg, #5865f2, #22c1dc) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(88, 101, 242, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html.dark-mode .lc-send-btn {
    background: linear-gradient(135deg, #6674d9, #24c6dc) !important;
    color: #07111f !important;
}

.lc-fullchat-btn {
    transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.lc-messages {
    scrollbar-width: thin;
    scrollbar-color: rgba(88, 101, 242, 0.38) transparent;
}

.typing-dots span {
    background-color: #5865f2;
}

html.dark-mode .typing-dots span {
    background-color: #7c8cff;
}

/* --- Motion: desktop + hover only, always honor reduced-motion --- */
@media (prefers-reduced-motion: no-preference) {
    .other-user-presence:not(.offline) .presence-dot {
        animation: polishPresenceRing 2.4s ease-out infinite;
    }

    .rail-brand::after {
        animation: polishBrandShine 5.2s ease-in-out infinite;
    }

    .input-container-fixed .input-row:focus-within .send-btn:not(:disabled),
    .lc-input-area:focus-within .lc-send-btn:not(:disabled) {
        animation: polishSendGlow 3.2s ease-in-out infinite;
    }

    .message.pending-send .message-content {
        animation: polishPending 1.4s ease-in-out infinite;
    }

    .new-messages-pill {
        animation: polishPill 2.6s ease-in-out infinite;
    }

    .lc-fetching-dot {
        box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.45);
        animation: polishPresenceRing 1.8s ease-out infinite;
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    html:not(.ios-device):not(.ios-safari) .messages-container,
    html.dark-mode:not(.ios-device):not(.ios-safari) .messages-container {
        background-size: 140% 140%, 150% 150%, 120% 120%, 100% 100%, auto;
        animation: polishAurora 26s ease-in-out infinite alternate;
    }

    html.true-dark:not(.ios-device):not(.ios-safari) .messages-container {
        background-size: 140% 140%, 150% 150%, auto;
        animation: polishAuroraTrueDark 28s ease-in-out infinite alternate;
    }

    html:not(.ios-device):not(.ios-safari) .lc-container,
    html.dark-mode:not(.ios-device):not(.ios-safari) .lc-container {
        background-size: 140% 140%, 150% 150%, auto;
        animation: polishAuroraLow 26s ease-in-out infinite alternate;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .message:hover .message-content {
        transform: translateY(-1px);
    }

    .input-container-fixed .send-btn:not(:disabled):hover,
    .lc-send-btn:not(:disabled):hover {
        transform: translateY(-1px) scale(1.03);
        animation: none;
    }

    .lc-fullchat-btn:hover {
        transform: translateY(-1px);
        opacity: 1;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    }

    .header-actions > button:hover,
    .header-actions .reminder-bell-btn:hover,
    .desktop-actions > button:hover {
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rail-brand::after,
    .other-user-presence:not(.offline) .presence-dot,
    .input-container-fixed .send-btn,
    .lc-send-btn,
    .message.pending-send .message-content,
    .new-messages-pill,
    .messages-container,
    .lc-container {
        animation: none !important;
    }

    .message:hover .message-content {
        transform: none;
        filter: none;
    }
}

@keyframes polishAurora {
    from { background-position: 0% 0%, 100% 100%, 70% 10%, 0 0, 0 0; }
    to   { background-position: 28% 18%, 72% 64%, 40% 36%, 0 0, 0 0; }
}

@keyframes polishAuroraTrueDark {
    from { background-position: 0% 0%, 100% 100%, 0 0; }
    to   { background-position: 24% 16%, 70% 60%, 0 0; }
}

@keyframes polishAuroraLow {
    from { background-position: 0% 0%, 100% 100%, 0 0; }
    to   { background-position: 26% 16%, 74% 62%, 0 0; }
}

@keyframes polishPresenceRing {
    0%   { box-shadow: 0 0 0 0 rgba(24, 168, 117, 0.42), 0 0 8px rgba(24, 168, 117, 0.4); }
    70%  { box-shadow: 0 0 0 9px rgba(24, 168, 117, 0), 0 0 8px rgba(24, 168, 117, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(24, 168, 117, 0), 0 0 8px rgba(24, 168, 117, 0.4); }
}

@keyframes polishBrandShine {
    0%, 58% { transform: translateX(0); opacity: 0; }
    68%     { opacity: 1; }
    82%     { transform: translateX(280%); opacity: 0.15; }
    100%    { transform: translateX(280%); opacity: 0; }
}

@keyframes polishSendGlow {
    0%, 100% { filter: drop-shadow(0 6px 10px rgba(88, 101, 242, 0.28)); }
    50%      { filter: drop-shadow(0 10px 16px rgba(34, 193, 220, 0.48)); }
}

@keyframes polishPending {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

@keyframes polishPill {
    0%, 100% { box-shadow: 0 12px 28px rgba(88, 101, 242, 0.32); }
    50%      { box-shadow: 0 14px 32px rgba(34, 193, 220, 0.42), 0 0 0 5px rgba(88, 101, 242, 0.12); }
}