/* Attachment previews inside the chat composer. Keep previews in their own
 * top row so pasted images never sit underneath typed text. */
body[data-mode="chat"] .chat-input-wrap.has-attachments .chat-attachment-bar:not(.hidden) {
    position: absolute;
    top: 9px;
    left: 14px;
    right: 14px;
    z-index: 6;
    display: block;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-list {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 7px 4px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 4px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    cursor: grab;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-list.is-pointer-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-list::-webkit-scrollbar {
    display: none;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-meta,
body[data-mode="chat"] .chat-input-wrap .chat-attachment-copy {
    display: none !important;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-chip {
    position: relative;
    display: block;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    min-height: 52px;
    height: 52px;
    flex: 0 0 52px;
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 12px;
    background: #eef2f7;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .08);
    scroll-snap-align: start;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-thumb {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 11px;
    background: #e9eef7;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-chip img,
body[data-mode="chat"] .chat-input-wrap .chat-attachment-chip video {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 11px;
    object-fit: cover;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-chip > .chat-file-icon {
    width: 50px;
    height: 50px;
    border-radius: 11px;
    font-size: 9px;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-state {
    inset: 1px;
    padding: 3px;
    border-radius: 11px;
    font-size: 8px;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    transform: none;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .18);
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-remove svg {
    width: 10px;
    height: 10px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

body[data-mode="chat"] .chat-input-wrap .chat-attachment-remove:is(:hover, :focus-visible) {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
    transform: scale(1.06);
}

body[data-mode="chat"] .chat-input-wrap.has-attachments {
    min-height: 176px !important;
    height: auto !important;
}

html body[data-mode="chat"] .chat-input-wrap.has-attachments #chat-input {
    min-height: 176px !important;
    padding-top: 78px !important;
}

html body[data-mode="chat"] .chat-input-wrap.has-attachments .chat-input-hint {
    top: 78px !important;
}

/* Push-to-talk is shared by the home composer and conversation detail. This
 * stylesheet loads after the global responsive/workstation layers, so these
 * rules deliberately override their generic square icon-button constraints. */
html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    color: #475569 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk *,
html body.voice-hold-open,
html body.voice-hold-open * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk > * {
    pointer-events: none !important;
}

html body.voice-hold-open {
    overscroll-behavior: none !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk .chat-voice-label {
    display: none !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk:hover {
    border-color: rgba(37, 99, 235, 0.28) !important;
    background: rgba(37, 99, 235, 0.13) !important;
    color: #1d4ed8 !important;
    transform: none !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-hold-active,
html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-listening {
    border-color: rgba(37, 99, 235, 0.42) !important;
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
    transform: scale(0.98) !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-processing {
    border-color: rgba(37, 99, 235, 0.22) !important;
    background: rgba(37, 99, 235, 0.1) !important;
    color: #1d4ed8 !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
}

/* The composer actions sit on their own bottom row. Reserving their width on
 * every textarea line caused both the landing and conversation composers to
 * wrap around the middle of the field. Keep the text area full-width and
 * reserve vertical space for the action row instead. */
@media (min-width: 921px) {
    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk {
        width: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) textarea {
        min-height: 104px !important;
        padding-right: 18px !important;
        padding-bottom: 72px !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) .chat-input-hint {
        right: 18px !important;
    }

    /* The normal landing composer uses the same separated action row as the
     * attachment state. Keeping the buttons in document flow prevents long,
     * scrolled text from ever moving underneath them. */
    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 12px 10px !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) #chat-input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px 16px 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 46px !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) .chat-input-hint {
        top: 22px !important;
        right: 28px !important;
        left: 28px !important;
    }

    /* Conversation detail follows the landing composer: text and actions are
     * separate flex rows. The legacy absolute action row could sit over long
     * or scrolled text, making the upload, voice and send controls cover it. */
    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) {
        display: flex !important;
        flex-direction: column !important;
        min-height: 154px !important;
        height: 154px !important;
        padding: 8px 12px 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) #chat-input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 14px 16px 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 46px !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-wrap:not(.has-attachments) .chat-input-hint {
        top: 22px !important;
        right: 28px !important;
        left: 28px !important;
    }

    /* Landing composer with attachments has three visual rows: previews,
     * editable text and actions. Do not reserve the action buttons' width on
     * every text line, and leave enough vertical room so the upload button
     * can never cover typed content. */
    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments {
        display: flex !important;
        flex-direction: column !important;
        min-height: 224px !important;
        height: 224px !important;
        padding: 8px 12px 10px !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments .chat-attachment-bar:not(.hidden) {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 61px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 61px !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments #chat-input {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 6px 16px 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments .chat-input-tools {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 46px !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body.chat-landing[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments .chat-input-hint {
        top: 75px !important;
        right: 28px !important;
        left: 28px !important;
    }
}

/* The rounded composer shell owns the dark surface. Its text, attachment and
 * action rows remain transparent so the input never appears split into two
 * different dark colors. */
html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-input-wrap {
    background: var(--fuuvo-dark-input, #161e29) !important;
    background-image: none !important;
}

html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-input-wrap > :is(#chat-input, .chat-input-tools, .chat-attachment-bar) {
    background: transparent !important;
    background-image: none !important;
}

html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk {
    border-color: var(--fuuvo-dark-line-strong) !important;
    background: #18212d !important;
    color: var(--fuuvo-dark-text-soft, #d7e2f3) !important;
}

html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-hold-active,
html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-listening {
    border-color: rgba(147, 197, 253, 0.58) !important;
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
}

html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-processing {
    border-color: rgba(125, 181, 255, 0.34) !important;
    background: rgba(59, 130, 246, 0.18) !important;
    color: #bfdbfe !important;
}

@media (max-width: 920px) {
    html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk {
        background: var(--fuuvo-dark-input, #161e29) !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
        font-size: 12px !important;
        font-weight: 650 !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk svg {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-input-wrap textarea {
        /* The action buttons only occupy the bottom row. Reserving their full
         * width on every text line made the mobile composer wrap after just a
         * few characters. Keep the normal horizontal text area and rely on
         * the existing bottom padding to clear the tool row. */
        padding-right: 16px !important;
        padding-bottom: 58px !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-input-wrap .chat-input-hint {
        right: 16px !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-voice-status {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-cancelling {
        border-color: rgba(239, 68, 68, 0.72) !important;
        background: #dc2626 !important;
        color: #fff !important;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18) !important;
    }

    html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-cancelling {
        border-color: rgba(252, 165, 165, 0.76) !important;
        background: #dc2626 !important;
        color: #fff !important;
        box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.2) !important;
    }

    /* Conversation detail uses one compact action row. Keep the editable area
     * short for one line, allow it to grow for wrapped content, and pin every
     * action to the same baseline without changing the landing composer. */
    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-wrap {
        min-height: 80px !important;
        height: auto !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field #chat-input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 80px !important;
        max-height: 148px !important;
        padding: 12px 14px 54px !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-tools {
        position: absolute !important;
        inset: auto 10px 8px 10px !important;
        width: auto !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field #chat-upload-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 50% !important;
        flex: 0 0 38px !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-action-group {
        height: 38px !important;
        align-items: center !important;
        gap: 10px !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .send-btn {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        flex: 0 0 38px !important;
        box-sizing: border-box !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .send-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field .chat-input-wrap > .mobile-chat-toolbar {
        position: absolute !important;
        right: auto !important;
        bottom: 8px !important;
        left: 58px !important;
        width: auto !important;
        min-height: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field #mobile-chat-more-btn {
        width: auto !important;
        min-width: 68px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        border-radius: 19px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-compose-field #mobile-chat-more-btn .mobile-chat-toolbar-icon,
    html body.chat-detail-open[data-mode="chat"] #chat-compose-field #mobile-chat-more-btn .mobile-chat-toolbar-icon svg {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
    }
}

/* Keep the chat shell anchored while the software keyboard is open. Safari
 * and embedded iOS WebViews already position fixed content against the visual
 * viewport; applying visualViewport.offsetTop here moves the shell twice and
 * can leave only a blank page above the keyboard. */
@media (max-width: 920px) {
    html.mobile-chat-input-focused {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        scroll-behavior: auto !important;
    }

    html body.chat-detail-open[data-mode="chat"].mobile-chat-input-focused.mobile-keyboard-open {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--mobile-viewport-height, 100dvh) !important;
        min-height: var(--mobile-viewport-height, 100dvh) !important;
        max-height: var(--mobile-viewport-height, 100dvh) !important;
        box-sizing: border-box !important;
        overscroll-behavior: none !important;
    }

    html body.chat-detail-open[data-mode="chat"] .result-content,
    html body.chat-detail-open[data-mode="chat"] .chat-area,
    html body.chat-detail-open[data-mode="chat"] .composer,
    html body.chat-detail-open[data-mode="chat"] #chat-input {
        overflow-anchor: none;
    }

    html body.chat-detail-open[data-mode="chat"] #chat-input {
        scroll-margin: 0 !important;
    }

    html body.chat-detail-open[data-mode="chat"].mobile-keyboard-open .result-content {
        overscroll-behavior: none !important;
    }
}

/* Shared hold-to-talk gesture surface. It stays pointer-transparent so the
 * active touch or pointer remains owned by the composer gesture listeners. */
.voice-hold-overlay {
    display: none;
}

@keyframes voice-hold-wave {
    from { transform: scaleY(.55); opacity: .62; }
    to { transform: scaleY(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .voice-hold-wave i { animation: none !important; }
    .voice-hold-panel,
    .voice-hold-cancel-zone { transition: none !important; }
}

@media (min-width: 921px) {
    html body[data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-cancelling,
    html body[data-ui-theme="dark"][data-mode="chat"] #chat-compose-field .chat-voice-btn.is-hold-to-talk.is-cancelling {
        border-color: rgba(239, 68, 68, 0.72) !important;
        background: #dc2626 !important;
        color: #fff !important;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18) !important;
    }

    .voice-hold-overlay:not(.hidden) {
        position: fixed;
        inset: 0;
        z-index: 2200;
        padding: 0 24px 118px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        pointer-events: none;
        background: linear-gradient(180deg, transparent 56%, rgba(15, 23, 42, 0.07) 100%);
    }

    .voice-hold-panel {
        width: 280px;
        min-height: 148px;
        padding: 20px 20px 17px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 26px;
        background: rgba(15, 23, 42, 0.9);
        color: #fff;
        box-shadow: 0 20px 54px rgba(15, 23, 42, 0.25);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    .voice-hold-mic {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(96, 165, 250, 0.2);
        color: #bfdbfe;
    }

    .voice-hold-mic svg { width: 24px; height: 24px; }

    .voice-hold-wave {
        height: 16px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .voice-hold-wave i {
        width: 3px;
        height: 6px;
        border-radius: 999px;
        background: #93c5fd;
        animation: voice-hold-wave .8s ease-in-out infinite alternate;
    }

    .voice-hold-wave i:nth-child(2),
    .voice-hold-wave i:nth-child(4) { animation-delay: -.28s; height: 11px; }
    .voice-hold-wave i:nth-child(3) { animation-delay: -.52s; height: 15px; }

    .voice-hold-panel strong {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
    }

    .voice-hold-hint {
        color: rgba(255, 255, 255, 0.72);
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }

    .voice-hold-cancel-zone {
        position: absolute;
        left: 50%;
        bottom: 288px;
        min-width: 132px;
        min-height: 40px;
        padding: 7px 14px 7px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid rgba(100, 116, 139, 0.2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.94);
        color: #475569;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
        font-size: 12px;
        font-weight: 650;
        transform: translate(-50%, 10px);
        transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
    }

    .voice-hold-cancel-icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #eef2f7;
    }

    .voice-hold-cancel-icon svg { width: 15px; height: 15px; }

    .voice-hold-overlay.is-cancelling .voice-hold-panel {
        background: rgba(153, 27, 27, 0.94);
        box-shadow: 0 20px 54px rgba(127, 29, 29, 0.32);
        transform: scale(1.015);
    }

    .voice-hold-overlay.is-cancelling .voice-hold-mic {
        background: rgba(254, 202, 202, 0.2);
        color: #fee2e2;
    }

    .voice-hold-overlay.is-cancelling .voice-hold-wave i {
        background: #fecaca;
        animation-play-state: paused;
    }

    .voice-hold-overlay.is-cancelling .voice-hold-cancel-zone {
        border-color: rgba(239, 68, 68, 0.45);
        background: #dc2626;
        color: #fff;
        transform: translate(-50%, 0) scale(1.04);
    }

    .voice-hold-overlay.is-cancelling .voice-hold-cancel-icon {
        background: rgba(255, 255, 255, 0.18);
    }

    body[data-ui-theme="dark"] .voice-hold-cancel-zone {
        border-color: rgba(148, 163, 184, 0.28);
        background: rgba(30, 41, 59, 0.96);
        color: #e2e8f0;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
    }

    body[data-ui-theme="dark"] .voice-hold-cancel-icon {
        background: rgba(148, 163, 184, 0.16);
    }

    body[data-ui-theme="dark"] .voice-hold-overlay.is-cancelling .voice-hold-cancel-zone {
        border-color: rgba(252, 165, 165, 0.52);
        background: #dc2626;
        color: #fff;
    }
}

@media (max-width: 920px) {
    .voice-hold-overlay:not(.hidden) {
        position: fixed;
        inset: 0;
        z-index: 2200;
        padding: 0 18px calc(124px + env(safe-area-inset-bottom, 0px));
        display: flex;
        align-items: flex-end;
        justify-content: center;
        pointer-events: none;
        background: linear-gradient(180deg, transparent 47%, rgba(15, 23, 42, 0.08) 100%);
    }

    .voice-hold-panel {
        width: min(248px, calc(100vw - 48px));
        min-height: 142px;
        padding: 20px 18px 17px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 26px;
        background: rgba(15, 23, 42, 0.9);
        color: #fff;
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    .voice-hold-mic {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(96, 165, 250, 0.2);
        color: #bfdbfe;
    }

    .voice-hold-mic svg {
        width: 24px;
        height: 24px;
    }

    .voice-hold-wave {
        height: 16px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .voice-hold-wave i {
        width: 3px;
        height: 6px;
        border-radius: 999px;
        background: #93c5fd;
        animation: voice-hold-wave .8s ease-in-out infinite alternate;
    }

    .voice-hold-wave i:nth-child(2),
    .voice-hold-wave i:nth-child(4) { animation-delay: -.28s; height: 11px; }
    .voice-hold-wave i:nth-child(3) { animation-delay: -.52s; height: 15px; }

    .voice-hold-panel strong {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.3;
    }

    .voice-hold-hint {
        color: rgba(255, 255, 255, 0.72);
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }

    .voice-hold-cancel-zone {
        position: absolute;
        left: 50%;
        bottom: calc(284px + env(safe-area-inset-bottom, 0px));
        min-width: 116px;
        min-height: 38px;
        padding: 7px 13px 7px 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid rgba(100, 116, 139, 0.2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #475569;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
        font-size: 12px;
        font-weight: 650;
        transform: translate(-50%, 10px);
        transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
    }

    .voice-hold-cancel-icon {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #eef2f7;
    }

    .voice-hold-cancel-icon svg {
        width: 15px;
        height: 15px;
    }

    .voice-hold-overlay.is-cancelling .voice-hold-panel {
        background: rgba(153, 27, 27, 0.94);
        box-shadow: 0 18px 48px rgba(127, 29, 29, 0.34);
        transform: scale(1.015);
    }

    .voice-hold-overlay.is-cancelling .voice-hold-mic {
        background: rgba(254, 202, 202, 0.2);
        color: #fee2e2;
    }

    .voice-hold-overlay.is-cancelling .voice-hold-wave i {
        background: #fecaca;
        animation-play-state: paused;
    }

    .voice-hold-overlay.is-cancelling .voice-hold-cancel-zone {
        border-color: rgba(239, 68, 68, 0.45);
        background: #dc2626;
        color: #fff;
        transform: translate(-50%, 0) scale(1.04);
    }

    .voice-hold-overlay.is-cancelling .voice-hold-cancel-icon {
        background: rgba(255, 255, 255, 0.18);
    }

    body[data-ui-theme="dark"] .voice-hold-cancel-zone {
        border-color: rgba(148, 163, 184, 0.28);
        background: rgba(30, 41, 59, 0.96);
        color: #e2e8f0;
        box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
    }

    body[data-ui-theme="dark"] .voice-hold-cancel-icon {
        background: rgba(148, 163, 184, 0.16);
    }

    body[data-ui-theme="dark"] .voice-hold-overlay.is-cancelling .voice-hold-cancel-zone {
        border-color: rgba(252, 165, 165, 0.52);
        background: #dc2626;
        color: #fff;
    }

}

/* Conversation-detail dark surfaces. This layer loads after the legacy chat
 * styles, so light response and follow-up cards cannot leak into dark mode. */
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.assistant,
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.system {
    border-color: var(--fuuvo-dark-line) !important;
    background: var(--fuuvo-dark-surface) !important;
    background-image: none !important;
    color: var(--fuuvo-dark-text-soft) !important;
    box-shadow: none !important;
    filter: none !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.assistant :is(.chat-plain, .chat-markdown),
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.system :is(.chat-plain, .chat-markdown) {
    color: var(--fuuvo-dark-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Preserve markdown hierarchy inside dark conversation bubbles. A single
 * inherited light color made bold, italic and other semantic text look almost
 * identical to body copy, especially on phone displays. */
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown :is(h1, h2) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown :is(h3, h4, h5, h6) {
    color: #dce9fb !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown :is(strong, b) {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 800 !important;
    letter-spacing: .008em;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown :is(em, i) {
    color: #c6dcfb !important;
    -webkit-text-fill-color: currentColor !important;
    font-style: italic !important;
    font-weight: 500;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown a {
    color: #8fc1ff !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration-line: underline !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 3px !important;
    text-decoration-color: rgba(143, 193, 255, .72) !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown a:is(:hover, :focus-visible) {
    color: #b9d8ff !important;
    text-decoration-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown mark {
    padding: 0 .2em;
    border-radius: 4px;
    background: rgba(245, 158, 11, .24) !important;
    color: #fff4cf !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown :is(del, s) {
    color: #93a4ba !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration-color: #b8c5d8 !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown li::marker {
    color: #82b7ff !important;
    font-weight: 700;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 3px solid #6da8f7;
    border-radius: 0 10px 10px 0;
    background: rgba(59, 130, 246, .09) !important;
    color: #cbd9ec !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown hr {
    border-top-color: rgba(148, 163, 184, .32) !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown code {
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(8, 15, 28, .58) !important;
    color: #eaf2ff !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown pre {
    max-width: 100%;
    margin: 14px 0;
    padding: 12px 14px;
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    background: #0b1220 !important;
    color: #e2eaf7 !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown pre code {
    padding: 0;
    border: 0;
    background: transparent !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown kbd {
    border-color: rgba(148, 163, 184, .34) !important;
    background: #1b2637 !important;
    color: #edf3fc !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown small {
    color: #9eafc5 !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown details {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(8, 15, 28, .3) !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown summary {
    color: #e7effb !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown th {
    color: #f5f8fd !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 800 !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .chat-markdown td {
    color: #d4deec !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.assistant .bubble-actions :is(.quote-btn, .copy-btn),
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.system .bubble-actions :is(.quote-btn, .copy-btn) {
    border: 1px solid rgba(111, 162, 229, .58) !important;
    background: rgba(43, 94, 164, .38) !important;
    background-image: none !important;
    color: #f3f8ff !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 4px 12px rgba(2, 8, 23, .22) !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .bubble-actions :is(.quote-btn, .copy-btn):is(:hover, :focus-visible, :active) {
    border-color: #7eb6ff !important;
    background: rgba(50, 119, 216, .58) !important;
    color: #ffffff !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant, .chat-bubble.system) .bubble-actions .copy-btn svg {
    color: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-quote-bar,
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .clarification-banner {
    border-color: var(--fuuvo-dark-line-strong) !important;
    background: var(--fuuvo-dark-surface-raised) !important;
    background-image: none !important;
    color: var(--fuuvo-dark-text-soft) !important;
    box-shadow: 0 14px 34px rgba(2, 6, 23, .26) !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-quote-text,
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .clarification-banner :is(strong, span, p) {
    color: var(--fuuvo-dark-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Keep completed and failed assistant messages dark even while the chat shell
 * is switching from its optimistic loading state to the persisted message. */
html body[data-ui-theme="dark"] .chat-bubble.assistant,
html body[data-ui-theme="dark"] .chat-bubble.system {
    border-color: var(--fuuvo-dark-line) !important;
    background: var(--fuuvo-dark-surface) !important;
    background-image: none !important;
    color: var(--fuuvo-dark-text-soft) !important;
    box-shadow: none !important;
    filter: none !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.assistant.is-failed,
html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-bubble.system.is-failed,
html body[data-ui-theme="dark"] .chat-bubble.assistant.is-failed,
html body[data-ui-theme="dark"] .chat-bubble.system.is-failed {
    border-color: rgba(255, 141, 152, 0.34) !important;
    background: var(--fuuvo-dark-danger-bg) !important;
    background-image: none !important;
    color: var(--fuuvo-dark-danger) !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-bubble.assistant.is-failed, .chat-bubble.system.is-failed) :is(.chat-plain, .chat-markdown),
html body[data-ui-theme="dark"] :is(.chat-bubble.assistant, .chat-bubble.system) :is(.chat-plain, .chat-markdown) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-quote-marker {
    background: var(--fuuvo-dark-blue) !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-quote-clear, .clarification-banner-close) {
    border: 1px solid var(--fuuvo-dark-line) !important;
    background: var(--fuuvo-dark-input) !important;
    background-image: none !important;
    color: var(--fuuvo-dark-muted) !important;
    box-shadow: none !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] :is(.chat-quote-clear, .clarification-banner-close):is(:hover, :focus-visible, :active) {
    border-color: var(--fuuvo-dark-blue-line) !important;
    background: var(--fuuvo-dark-blue-soft) !important;
    color: var(--fuuvo-dark-blue) !important;
}

html body[data-ui-theme="dark"].chat-detail-open[data-mode="chat"] .chat-followup-chip {
    border-color: var(--fuuvo-dark-line-strong) !important;
    background: var(--fuuvo-dark-input) !important;
    background-image: none !important;
    color: var(--fuuvo-dark-text-soft) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

body[data-mode="chat"] .chat-input-wrap.has-attachments .chat-input-tools {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

body[data-ui-theme="dark"][data-mode="chat"] .chat-input-wrap .chat-attachment-chip,
body[data-ui-theme="dark"][data-mode="chat"] .chat-input-wrap .chat-attachment-thumb {
    border-color: rgba(148, 163, 184, .22);
    background: #172033;
    box-shadow: 0 3px 12px rgba(2, 6, 23, .3);
}

body[data-ui-theme="dark"][data-mode="chat"] .chat-input-wrap .chat-attachment-remove {
    border-color: rgba(148, 163, 184, .28);
    background: #263247;
    color: #e2e8f0;
}

body[data-ui-theme="dark"][data-mode="chat"] .chat-input-wrap .chat-attachment-remove:is(:hover, :focus-visible) {
    border-color: #ef6a76;
    background: #b4232f;
    color: #fff;
}

@media (max-width: 920px) {
    /* This file is loaded after the shared responsive contract. Preserve the
     * 44px touch targets when attachment/composer rules win the cascade. */
    html body[data-mode] .mobile-nav-trigger,
    html body[data-mode] .ui-language-switch-btn,
    html body[data-mode] .chat-tool-btn,
    html body[data-mode] .mobile-chat-toolbar-btn,
    html body.chat-landing[data-mode] .mobile-nav-trigger,
    html body.chat-landing[data-mode] .ui-language-switch-btn,
    html body.chat-landing[data-mode] .chat-tool-btn,
    html body.chat-landing[data-mode] .mobile-chat-toolbar-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    html body[data-mode] .mobile-nav-trigger,
    html body[data-mode] .ui-language-switch-btn,
    html body[data-mode] .chat-tool-btn,
    html body.chat-landing[data-mode] .mobile-nav-trigger,
    html body.chat-landing[data-mode] .ui-language-switch-btn,
    html body.chat-landing[data-mode] .chat-tool-btn {
        width: 44px !important;
        height: 44px !important;
    }

    body[data-mode="chat"] .chat-input-wrap .chat-attachment-remove::before {
        position: absolute;
        inset: -12px;
        content: "";
    }

    /* Conversation detail header: center the safety link against the full
     * viewport, independently from the left navigation and language controls. */
    html body.chat-detail-open[data-mode="chat"] .mobile-chat-topbar {
        position: relative !important;
    }

    html body.chat-detail-open[data-mode="chat"] .mobile-chat-actions {
        position: static !important;
    }

    html body.chat-detail-open[data-mode="chat"] .mobile-chat-link[data-safety-center-link] {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        z-index: 33;
        width: min(42vw, 170px) !important;
        max-width: min(42vw, 170px) !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        line-height: 34px !important;
        text-align: left !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        transform: translate(-50%, -50%) !important;
    }

    html body.chat-detail-open[data-mode="chat"] .mobile-chat-actions .ui-language-switch {
        position: relative;
        z-index: 34;
    }
}


/* Phone landing should honor dark mode; this file is loaded last, so keep the final overrides here. */
@media (max-width: 920px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"],
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .app[data-fuuvo-app-shell="1"],
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"],
    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer {
        background: var(--fuuvo-dark-bg) !important;
        color: #edf2ff !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .mobile-chat-topbar {
        background: rgba(8, 15, 28, .96) !important;
        border-bottom-color: rgba(148, 163, 184, .12) !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] :is(.mobile-nav-bars, .composer-title, .chat-tool-btn, .mobile-chat-toolbar-btn, .core-feature-btn) {
        color: #edf2ff !important;
        -webkit-text-fill-color: #edf2ff !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] :is(.chat-input-hint, .workspace-disclaimer, .ui-language-switch-btn:not(.active)) {
        color: #8fa0bc !important;
        -webkit-text-fill-color: #8fa0bc !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] :is(.chat-input-wrap, .chat-tool-btn, .mobile-chat-toolbar-btn, .core-feature-btn) {
        border-color: rgba(148, 163, 184, .22) !important;
        background: #0f172a !important;
        box-shadow: none !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .chat-input-wrap {
        background: var(--fuuvo-dark-input) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .chat-input-wrap textarea {
        color: #edf2ff !important;
        -webkit-text-fill-color: #edf2ff !important;
        caret-color: #7db5ff !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .send-btn {
        border-color: #0d72f5 !important;
        background: #0d72f5 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        box-shadow: 0 8px 17px rgba(13, 114, 245, .24) !important;
    }
}

/* The workstation stylesheet is loaded after the shared dark theme and sets
 * these landing controls back to white. Keep the home feature cards,
 * capability rail and its navigation controls on the same dark surface. */
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .core-feature-btn,
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-btn,
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-nav {
    border-color: rgba(148, 163, 184, .22) !important;
    background: #0f172a !important;
    color: #dce6f5 !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .core-feature-btn:hover,
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .core-feature-btn:focus-visible,
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-btn:hover,
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-btn.active,
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-nav:hover {
    border-color: rgba(107, 168, 255, .42) !important;
    background: #182438 !important;
    color: #9cc5ff !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-nav {
    color: #aebcd0 !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .24) !important;
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-nav:focus-visible {
    outline: 2px solid rgba(107, 168, 255, .5) !important;
    outline-offset: 2px;
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-nav svg {
    color: inherit !important;
    stroke: currentColor;
}

/* Chat detail keeps the same capability rail but does not carry the
 * `chat-landing` class. Override the workstation's white circular arrows for
 * both landing and detail states. */
html body[data-ui-theme="dark"][data-mode="chat"] .composer-capability-nav {
    border-color: rgba(148, 163, 184, .24) !important;
    background: #111a2b !important;
    color: #b8c5d9 !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}

html body[data-ui-theme="dark"][data-mode="chat"] .composer-capability-nav:hover,
html body[data-ui-theme="dark"][data-mode="chat"] .composer-capability-nav:focus-visible {
    border-color: rgba(107, 168, 255, .42) !important;
    background: #182438 !important;
    color: #a9ccff !important;
    -webkit-text-fill-color: currentColor !important;
}

html body[data-ui-theme="dark"][data-mode="chat"] .composer-capability-nav svg,
html body[data-ui-theme="dark"][data-mode="chat"] .composer-capability-nav svg path {
    color: inherit !important;
    stroke: currentColor !important;
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .core-feature-btn-icon :is(svg, .fuuvo-icon) {
    color: #8fbdff !important;
}

html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .core-feature-btn-icon .home-core-feature-icon,
html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .composer-capability-btn .home-capability-icon {
    filter: brightness(1.12) saturate(1.04) drop-shadow(0 2px 5px rgba(0, 0, 0, .28)) !important;
}

@media (max-width: 600px) {
    html:has(body.chat-landing[data-mode="chat"]),
    body.chat-landing[data-mode="chat"] {
        width: var(--mobile-viewport-width, 100%) !important;
        max-width: var(--mobile-viewport-width, 100%) !important;
        height: var(--mobile-viewport-height, 100dvh) !important;
        min-height: var(--mobile-viewport-height, 100dvh) !important;
        max-height: var(--mobile-viewport-height, 100dvh) !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html body.chat-landing[data-mode="chat"] .app[data-fuuvo-app-shell="1"],
    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
        height: var(--mobile-viewport-height, 100dvh) !important;
        min-height: 0 !important;
        max-height: var(--mobile-viewport-height, 100dvh) !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .app[data-fuuvo-app-shell="1"] {
        display: flex !important;
        flex-direction: column !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace[data-fuuvo-app-workspace="1"] {
        display: flex !important;
        flex-direction: column !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-chat-topbar {
        flex: 0 0 auto !important;
        min-height: 62px !important;
    }

    html body.chat-landing[data-mode="chat"] .composer {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: clamp(44px, 11vh, 78px) 18px 12px !important;
        overflow: hidden !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-top {
        margin-bottom: 12px !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-title,
    html body.chat-landing[data-mode="chat"] .composer-title.has-wenzhi-slogan {
        font-size: 16px !important;
        line-height: 1.34 !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-title.has-wenzhi-slogan {
        gap: 5px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-title-logo-link {
        min-width: 0 !important;
        min-height: 0 !important;
        height: 18px !important;
        line-height: 0 !important;
    }

    html body.chat-landing[data-mode="chat"] .composer-title-logo {
        width: auto !important;
        height: 18px !important;
        max-height: 18px !important;
    }

    html body.chat-landing[data-mode="chat"] .chat-input-wrap,
    html body.chat-landing[data-mode="chat"] .chat-input-wrap textarea {
        min-height: 132px !important;
        height: 132px !important;
    }

    html body.chat-landing[data-mode="chat"] .chat-input-wrap textarea {
        padding: 15px 16px 56px !important;
        overflow-y: auto !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    html body.chat-landing[data-mode="chat"] .chat-input-hint {
        top: 16px !important;
        right: 16px !important;
        left: 16px !important;
        font-size: 14px !important;
    }

    html body.chat-landing[data-mode="chat"] .chat-input-tools {
        right: 12px !important;
        bottom: 10px !important;
        left: 12px !important;
    }

    html body.chat-landing[data-mode="chat"] .chat-tool-btn,
    html body.chat-landing[data-mode="chat"] .send-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    html body.chat-landing[data-mode="chat"] .chat-tool-btn svg,
    html body.chat-landing[data-mode="chat"] .send-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-chat-toolbar {
        left: 58px !important;
        bottom: 12px !important;
    }

    html body.chat-landing[data-mode="chat"] .mobile-chat-toolbar-btn {
        min-width: 0 !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    html body.chat-landing[data-mode="chat"] #core-feature-slot {
        margin-top: 8px !important;
    }

    html body.chat-landing[data-mode="chat"] .core-feature-actions {
        gap: 7px !important;
    }

    html body.chat-landing[data-mode="chat"] .core-feature-btn {
        min-height: 64px !important;
        padding: 5px 4px !important;
        gap: 4px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    html body.chat-landing[data-mode="chat"] .core-feature-btn-icon,
    html body.chat-landing[data-mode="chat"] .core-feature-btn-icon .fuuvo-icon,
    html body.chat-landing[data-mode="chat"] .core-feature-btn-icon .home-core-feature-icon,
    html body.chat-landing[data-mode="chat"] .core-feature-btn-icon .home-capability-icon {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
    }

    html body.chat-landing[data-mode="chat"] .workspace > .fuuvo-ai-disclaimer {
        flex: 0 0 auto !important;
        padding: 4px 8px max(5px, env(safe-area-inset-bottom)) !important;
        font-size: 9px !important;
        line-height: 1.28 !important;
    }

    html body[data-ui-theme="dark"].chat-landing[data-mode="chat"] .workspace > .fuuvo-ai-disclaimer {
        background: #080f1c !important;
        color: #9fb0c8 !important;
    }
}

/* Attachment layout must win over the fixed landing/mobile composer heights
 * declared later in the responsive layers. Files stay on row one and editable
 * text always starts on the next row. */
html body[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments {
    min-height: 176px !important;
    height: auto !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments #chat-input {
    min-height: 176px !important;
    max-height: 232px !important;
    padding-top: 78px !important;
}

html body[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments .chat-input-hint {
    top: 78px !important;
}

/* Desktop attachment composers use three real rows: previews, editable text
 * and actions. This final rule intentionally comes after the legacy absolute
 * attachment/action overrides above, so neither previews nor controls can
 * float over the message text on the landing or conversation-detail page. */
@media (min-width: 921px) {
    html body:is(.chat-landing, .chat-detail-open)[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments {
        display: flex !important;
        flex-direction: column !important;
        min-height: 224px !important;
        height: 224px !important;
        padding: 8px 12px 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-open)[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments .chat-attachment-bar:not(.hidden) {
        position: relative !important;
        inset: auto !important;
        order: 1 !important;
        flex: 0 0 61px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 61px !important;
        height: 61px !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-open)[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments #chat-input {
        position: relative !important;
        order: 2 !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        padding: 6px 16px 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-open)[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments .chat-input-tools {
        position: relative !important;
        inset: auto !important;
        order: 3 !important;
        flex: 0 0 46px !important;
        width: 100% !important;
        min-height: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    html body:is(.chat-landing, .chat-detail-open)[data-mode="chat"] #chat-compose-field .chat-input-wrap.has-attachments .chat-input-hint {
        top: 75px !important;
        right: 28px !important;
        left: 28px !important;
    }
}

/* Office landing needs two full template rows and a usable composer in the
 * first desktop viewport. Keep the office controls compact without changing
 * normal chat or conversation-detail sizing. */
@media (min-width: 921px) {
    html body[data-mode="chat"][data-chat-entry-mode="work"] .chat-capability-active {
        display: none !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .composer {
        padding-bottom: 8px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] #chat-compose-field .chat-input-wrap:not(.has-attachments) {
        min-height: 102px !important;
        height: auto !important;
        border-radius: 18px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] #chat-compose-field .chat-input-wrap:not(.has-attachments) #chat-input {
        flex: 0 0 auto !important;
        min-height: 58px !important;
        height: 58px !important;
        max-height: 118px !important;
        padding: 12px 16px 8px !important;
        border-radius: 18px 18px 0 0 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] #chat-compose-field .chat-input-wrap:not(.has-attachments) .chat-input-hint {
        top: 13px !important;
        right: 16px !important;
        left: 16px !important;
        font-size: 14px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] #chat-compose-field .chat-input-wrap:not(.has-attachments) .chat-input-tools {
        min-height: 44px !important;
        height: 44px !important;
        padding: 0 10px 6px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] #chat-compose-field .chat-tool-btn,
    html body[data-mode="chat"][data-chat-entry-mode="work"] #chat-compose-field .chat-voice-btn.is-hold-to-talk,
    html body[data-mode="chat"][data-chat-entry-mode="work"] #chat-compose-field .send-btn {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .work-skill-bar {
        min-height: 30px !important;
        height: 30px !important;
        margin-top: 6px !important;
        padding: 0 2px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .empty-state {
        padding-top: 14px !important;
        padding-bottom: 16px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .chat-empty {
        width: min(960px, 100%) !important;
        gap: 8px !important;
        padding-bottom: 0 !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .chat-empty-copy {
        margin-bottom: 4px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .chat-empty-title {
        font-size: 36px !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-grid {
        width: min(960px, 100%) !important;
        gap: 10px 12px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card {
        gap: 8px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        align-content: start;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card-head {
        gap: 8px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card-format {
        min-width: 50px !important;
        min-height: 24px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        letter-spacing: 0 !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card-arrow {
        font-size: 16px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card-copy {
        gap: 4px !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card-title {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card-desc {
        display: -webkit-box;
        overflow: hidden;
        font-size: 12px !important;
        line-height: 1.45 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    html body[data-mode="chat"][data-chat-entry-mode="work"] .office-task-card-foot {
        font-size: 11px !important;
    }
}