/* Keep message tools outside the painted user bubble without changing the
 * message container used by editing, attachment, and scroll handlers.
 * Conversation history also remains visible while the composer switches to
 * image/video/agent tasks, so its layout must not depend on body data-mode.
 * Existing phone overrides use !important inside this layer. */
@layer fuuvo-mobile-design {
html body #chat-area .chat-thread-card .chat-thread > .chat-bubble.user:not(.is-editing) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    box-sizing: border-box !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(720px, 82%) !important;
    min-height: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #202733 !important;
    overflow: visible !important;
}

html body #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    padding: 10px 16px;
    border: 0;
    border-radius: 22px;
    background: #edf3ff;
    color: #202733;
    line-height: inherit;
    overflow-wrap: anywhere;
}

html body #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content :is(.chat-plain, .chat-markdown, .chat-file-name, .chat-attachment-label) {
    color: inherit !important;
}

html body #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content :is(.chat-media-note, .chat-attachment-meta, .chat-file-desc) {
    color: #657085 !important;
}

html body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions:not(:empty) {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-self: flex-end !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 36px !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    gap: 4px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

html body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 9px !important;
    color: #737d8d !important;
    background: transparent !important;
    box-shadow: none !important;
    touch-action: manipulation;
}

html body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn):is(:hover, :focus-visible) {
    color: #334155 !important;
    background: #eaf0f8 !important;
}

html body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn) svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
}

html:is([data-ui-theme="dark"], [data-theme="dark"]) body #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content,
html body:is([data-ui-theme="dark"], [data-theme="dark"]) #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content {
    background: #293548;
    color: #edf2fa;
}

html:is([data-ui-theme="dark"], [data-theme="dark"]) body #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content :is(.chat-media-note, .chat-attachment-meta, .chat-file-desc),
html body:is([data-ui-theme="dark"], [data-theme="dark"]) #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content :is(.chat-media-note, .chat-attachment-meta, .chat-file-desc) {
    color: #b8c3d3 !important;
}

html:is([data-ui-theme="dark"], [data-theme="dark"]) body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn),
html body:is([data-ui-theme="dark"], [data-theme="dark"]) #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn) {
    color: #aeb9cb !important;
}

html:is([data-ui-theme="dark"], [data-theme="dark"]) body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn):is(:hover, :focus-visible),
html body:is([data-ui-theme="dark"], [data-theme="dark"]) #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn):is(:hover, :focus-visible) {
    background: #303d52 !important;
    color: #f0f5ff !important;
}

@media (max-width: 920px) {
    html body #chat-area .chat-thread-card .chat-thread > .chat-bubble.user:not(.is-editing) {
        max-width: calc(100% - 18px) !important;
    }

    html body #chat-area .chat-thread-card .chat-bubble.user > .chat-user-content {
        padding: 9px 14px;
        border-radius: 20px;
    }

    html body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions:not(:empty) {
        min-height: 44px !important;
        margin-top: 4px !important;
    }

    html body #chat-area .chat-thread-card .chat-bubble.user > .bubble-actions :is(.copy-btn, .edit-btn) {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 12px !important;
    }
}
}