/* Shared mobile chat surfaces. The desktop layout and confirmed composer
 * icons retain their original rules; only mobile surfaces/actions change. */
@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body.fuuvo-mobile-prototype[data-mode="chat"] {
        --mobile-chat-paper: #fff;
        --mobile-chat-border: #e5e2e9;
        --mobile-chat-soft: #f6f6f8;
        --mobile-chat-canvas: radial-gradient(ellipse 73% 53% at 50% -3%, #ff82a9 0%, #ffb9d2 45%, #f9e2ee55 83%, transparent 100%),
            radial-gradient(ellipse 100% 55% at 0 0, #dcc9fc 0%, #eadffa88 60%, transparent 100%), #fff;
        background: var(--mobile-chat-canvas) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100dvh !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"]:is([data-ui-theme="dark"], [data-theme="dark"]),
    html:is([data-ui-theme="dark"], [data-theme="dark"]) body.fuuvo-mobile-prototype[data-mode="chat"] {
        --mobile-chat-paper: #252630;
        --mobile-chat-border: #3a3b46;
        --mobile-chat-soft: #2d2e39;
        --mobile-chat-canvas: radial-gradient(ellipse 90% 45% at 50% -8%, #73334888, transparent 100%),
            radial-gradient(ellipse 90% 45% at 0 0, #45386388, transparent 100%), var(--mobile-paper);
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] :is(.app[data-fuuvo-app-shell], .workspace[data-fuuvo-app-workspace], .stage, .result-card, .result-content, #chat-area, .chat-thread-card) {
        background: transparent !important;
        background-image: none !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] [data-fuuvo-shared-topbar] {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .workspace::after {
        display: none !important;
    }
    /* The legacy fixed footer overlaps the phone composer's touch targets. */
    html body.fuuvo-mobile-prototype[data-mode="chat"] .fuuvo-ai-disclaimer {
        display: none !important;
    }
    html body.fuuvo-mobile-prototype:not(.fuuvo-mobile-prototype-home)[data-mode="chat"] .stage {
        position: fixed !important;
        inset: 58px 10px var(--mobile-chat-composer-reserve, 190px) !important;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        /* The desktop centering transform otherwise shifts this inset-based
         * phone viewport half a screen to the left. */
        transform: none !important;
        overflow: hidden !important;
    }
    html body.fuuvo-mobile-prototype:not(.fuuvo-mobile-prototype-home)[data-mode="chat"] :is(.result-card, .result-content) {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    html body.fuuvo-mobile-prototype:not(.fuuvo-mobile-prototype-home)[data-mode="chat"] #chat-area {
        flex: 1 1 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 10px 12px 20px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scroll-padding-bottom: 20px !important;
    }
    /* Let the message scroll area contain the full thread instead of shrinking
     * its flex item and clipping long answers at the legacy card boundary. */
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-thread-card {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble {
        box-sizing: border-box !important;
        color: var(--mobile-ink) !important;
        background: var(--mobile-chat-paper) !important;
        background-image: none !important;
        box-shadow: none !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble.user {
        max-width: calc(100% - 42px) !important;
        border: 1px solid var(--mobile-chat-border) !important;
        border-radius: 18px 18px 4px 18px !important;
        padding: 14px 16px !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble:is(.assistant, .system) {
        align-self: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        border: 1px solid var(--mobile-chat-border) !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble :is(.chat-plain, .chat-markdown),
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .chat-markdown :is(h1, h2, h3, h4, h5, h6, strong, b, em, i),
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .chat-markdown li::marker {
        color: var(--mobile-ink) !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble.user .chat-markdown a {
        color: var(--mobile-ink) !important;
        text-decoration-color: currentColor !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble.user .chat-markdown :is(blockquote, pre, code, mark) {
        color: var(--mobile-ink) !important;
        background: var(--mobile-chat-soft) !important;
        border-color: var(--mobile-chat-border) !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble.user :is(.chat-file-name, .chat-attachment-label) {
        color: var(--mobile-ink) !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble.user :is(.chat-media-note, .chat-attachment-meta, .chat-file-desc) {
        color: var(--mobile-muted) !important;
    }
    /* Actions follow the complete answer rather than floating over it. */
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .bubble-actions:not(:empty) {
        position: static !important;
        inset: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .bubble-actions :is(.quote-btn, .copy-btn, .edit-btn) {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        height: 44px !important;
        flex: 0 0 auto !important;
        padding: 10px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 10px !important;
        color: var(--mobile-muted) !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        touch-action: manipulation !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .bubble-actions :is(.copy-btn, .edit-btn) {
        width: 44px !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble.user > .bubble-actions {
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: auto !important;
        gap: 8px !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .bubble-actions :is(.copy-btn, .edit-btn) svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .bubble-actions :is(.quote-btn, .copy-btn, .edit-btn):is(:active, :focus-visible) {
        color: var(--mobile-ink) !important;
        background: var(--mobile-chat-soft) !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-bubble .bubble-actions :is(.quote-btn, .copy-btn, .edit-btn):focus-visible {
        outline: 2px solid var(--mobile-muted) !important;
        outline-offset: 2px !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] .chat-copy-feedback {
        font-size: 12px !important;
        line-height: 20px !important;
        color: var(--mobile-muted) !important;
    }
    /* The confirmed icon colours remain independent from the input surface. */
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-compose-field > .chat-input-wrap,
    html body.fuuvo-mobile-prototype.chat-landing[data-mode="chat"] #chat-compose-field > .chat-input-wrap:not(.has-attachments),
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-input {
        background: var(--mobile-chat-paper) !important;
        background-image: none !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-quote-bar:not(.hidden) {
        position: static !important;
        order: 0 !important;
        flex: 0 0 auto !important;
        display: block !important;
        max-height: none !important;
        margin: 10px 10px 0 !important;
        width: calc(100% - 20px) !important;
        padding: 6px 8px 6px 12px !important;
        box-sizing: border-box !important;
        border: 1px solid var(--mobile-chat-border) !important;
        border-radius: 14px !important;
        background: var(--mobile-chat-paper) !important;
        color: var(--mobile-ink) !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-quote-bar .chat-quote-summary {
        min-height: 44px !important;
        gap: 8px !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-quote-text {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        max-height: 40px !important;
        overflow: hidden !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        font-size: 12px !important;
        line-height: 20px !important;
        color: var(--mobile-muted) !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-quote-clear {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
        padding: 10px !important;
        background: transparent !important;
        color: var(--mobile-muted) !important;
        font-size: 20px !important;
        touch-action: manipulation !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-quote-bar .chat-followup-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-top: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain !important;
        touch-action: pan-x !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"] #chat-quote-bar .chat-followup-chip {
        flex: 0 0 auto !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        color: var(--mobile-ink) !important;
        background: var(--mobile-chat-soft) !important;
        border-color: var(--mobile-chat-border) !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    html body.fuuvo-mobile-prototype[data-mode="chat"].fuuvo-mobile-composer-keyboard-open::after {
        background: var(--mobile-chat-canvas) !important;
    }
}
}
.chat-bubble .bubble-actions {
  width: max-content;
  max-width: 100%;
  margin-inline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.chat-bubble .bubble-actions [data-action="quote"],
.chat-bubble .bubble-actions [data-chat-action="quote"],
.chat-bubble .bubble-actions .quote-action,
.chat-bubble .bubble-actions .quote-btn,
.chat-bubble .bubble-actions .quote-button,
.chat-bubble .bubble-actions button[title="引用"],
.chat-bubble .bubble-actions button[aria-label="引用"] {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
}

.chat-bubble .bubble-actions [data-action="quote"]::before,
.chat-bubble .bubble-actions [data-chat-action="quote"]::before,
.chat-bubble .bubble-actions .quote-action::before,
.chat-bubble .bubble-actions .quote-btn::before,
.chat-bubble .bubble-actions .quote-button::before,
.chat-bubble .bubble-actions button[title="引用"]::before,
.chat-bubble .bubble-actions button[aria-label="引用"]::before {
  content: "\275D";
  font-size: 20px;
  line-height: 1;
}