/*
 * Maima shared layout stylesheet.
 *
 * Layout, Markdown, code rendering, thinking panels, mode switches
 * and responsive behaviour are defined here.
 *
 * Skin-specific colours remain in css/skins/default.css.
 */


* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}


body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--page-background);
    color: var(--text-primary);
}


button,
textarea {
    font: inherit;
}


form {
    margin: 0;
}


.app-shell {
    width: 100%;
    min-height: 100dvh;
    margin: 0;

    display: flex;
    flex-direction: column;


    background: var(--app-background);
}


.app-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 24px;

    background: var(--header-background);
    border-bottom: 1px solid var(--border-colour);
}


.app-title {
    margin: 0;
    font-size: 1.5rem;
}


.app-subtitle {
    margin: 3px 0 0;

    color: var(--text-secondary);
    font-size: 0.85rem;
}


.app-main {
    flex: 1 1 auto;

    display: flex;

    min-width: 0;
    min-height: 0;

    overflow: visible;
}


/*
 * Chat history layout.
 */


.chat-layout {
    position: relative;

    flex: 1 1 auto;

    display: flex;

    width: 100%;
    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


.history-drawer {
    position: relative;
    z-index: 20;

    flex: 0 0 280px;

    width: 280px;
    min-width: 280px;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--input-area-background);
    border-right: 1px solid var(--border-colour);

    transition:
        margin-left 180ms ease,
        transform 180ms ease;
}


.chat-layout.history-drawer-collapsed .history-drawer {
    margin-left: -280px;
}


.history-drawer-header {
    flex: 0 0 auto;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    padding: 18px 16px 12px;

    border-bottom: 1px solid var(--border-colour);
}


.history-heading {
    margin: 0;

    font-size: 1rem;
}


.history-subheading {
    margin: 4px 0 0;

    color: var(--text-secondary);
    font-size: 0.72rem;
}


.history-close-button {
    display: none;

    padding: 7px 9px;

    color: var(--text-primary);
    background: transparent;

    border: 1px solid var(--border-colour);
    border-radius: var(--control-radius);

    cursor: pointer;
}


.history-new-chat-form {
    flex: 0 0 auto;

    padding: 12px;
}


.history-new-chat-button {
    width: 100%;
    padding: 10px 12px;

    color: var(--button-text);
    background: var(--accent-colour);

    border: 0;
    border-radius: var(--control-radius);

    font-weight: 700;

    cursor: pointer;
}


.history-new-chat-button:hover {
    background: var(--accent-hover-colour);
}


.history-list {
    flex: 1 1 auto;

    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 0 10px 12px;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


.history-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
    padding: 10px 11px;

    color: var(--text-primary);
    text-decoration: none;

    background: transparent;

    border: 1px solid transparent;
    border-radius: var(--control-radius);

    transition:
        background 140ms ease,
        border-color 140ms ease,
        opacity 140ms ease;
}


.history-item:hover {
    background: var(--assistant-message-background);
    border-color: var(--border-colour);
}


.history-item-active {
    background: var(--assistant-message-background);
    border-color: var(--accent-colour);
}


.history-item-disabled {
    pointer-events: none;
    opacity: 0.55;
}


.history-item-title {
    overflow: hidden;

    font-size: 0.82rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.history-item-meta {
    overflow: hidden;

    color: var(--text-secondary);
    font-size: 0.68rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.history-help {
    flex: 0 0 auto;

    padding: 10px 14px 14px;

    color: var(--text-secondary);
    font-size: 0.66rem;
    line-height: 1.4;

    border-top: 1px solid var(--border-colour);
}


.history-overlay {
    display: none;
}


.history-toggle-button {
    padding: 10px 14px;

    color: var(--text-primary);
    background: transparent;

    border: 1px solid var(--border-colour);
    border-radius: var(--control-radius);

    cursor: pointer;
}


.history-toggle-button:hover,
.history-close-button:hover {
    background: var(--assistant-message-background);
}


.chat-context-bar {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 9px 24px;

    background: var(--input-area-background);
    border-bottom: 1px solid var(--border-colour);
}


.chat-context-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.chat-context-label {
    color: var(--text-secondary);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}


.chat-context-title {
    max-width: 620px;

    overflow: hidden;

    font-size: 0.82rem;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.chat-context-status {
    flex: 0 0 auto;

    color: var(--text-secondary);
    font-size: 0.68rem;
}


.chat-panel {
    flex: 1 1 auto;

    width: 100%;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


.notification-list {
    flex: 0 0 auto;

    padding: 16px 24px 0;
}


.notification {
    padding: 12px 14px;

    line-height: 1.4;

    border: 1px solid;
    border-radius: var(--control-radius);
}


.notification-error {
    color: var(--error-text);
    background: var(--error-background);
    border-color: var(--error-border);
}


.message-list {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    padding: 24px;
}


.message {
    width: fit-content;
    max-width: min(760px, 86%);

    margin-bottom: 18px;
}


.message-assistant {
    margin-right: auto;
}


.message-user {
    margin-left: auto;
}


.message-label {
    margin-bottom: 6px;

    color: var(--accent-colour);

    font-size: 0.8rem;
    font-weight: 700;
}


.message-user .message-label {
    text-align: right;
}


.message-content {
    max-width: 100%;
    padding: 14px 16px;

    line-height: 1.55;
    overflow: hidden;
    overflow-wrap: anywhere;

    background: var(--assistant-message-background);

    border: 1px solid var(--border-colour);
    border-radius: var(--message-radius);
}


.message-user .message-content {
    background: var(--user-message-background);
}


/*
 * Markdown content.
 */


.markdown-body {
    min-width: 0;
}


.markdown-body > :first-child {
    margin-top: 0;
}


.markdown-body > :last-child {
    margin-bottom: 0;
}


.markdown-body p {
    margin: 0 0 0.85em;
}


.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 1.1em 0 0.55em;
    line-height: 1.25;
}


.markdown-body h1 {
    font-size: 1.45rem;
}


.markdown-body h2 {
    font-size: 1.3rem;
}


.markdown-body h3 {
    font-size: 1.15rem;
}


.markdown-body ul,
.markdown-body ol {
    margin: 0.6em 0 0.9em;
    padding-left: 1.6em;
}


.markdown-body li {
    margin: 0.25em 0;
}


.markdown-body blockquote {
    margin: 0.8em 0;
    padding: 0.2em 0 0.2em 0.9em;

    color: var(--text-secondary);

    border-left: 3px solid var(--accent-colour);
}


.markdown-body hr {
    margin: 1em 0;

    border: 0;
    border-top: 1px solid var(--border-colour);
}


.markdown-body a {
    color: var(--link-colour);
    text-decoration: underline;
    text-underline-offset: 2px;
}


.markdown-body :not(pre) > code {
    padding: 0.14em 0.38em;

    color: var(--inline-code-text);
    background: var(--inline-code-background);

    border-radius: 5px;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.9em;
}


/*
 * KaTeX mathematics.
 *
 * Inline expressions inherit the surrounding theme colour. Standalone
 * display expressions may be wider than a phone screen, so their paragraph
 * becomes horizontally scrollable instead of forcing the message bubble or
 * the entire page to overflow.
 */


.markdown-body .katex {
    color: inherit;
}


.markdown-body .maima-math-display {
    display: block;

    max-width: 100%;
    margin: 0.9em 0;
    padding: 0.2em 0;

    overflow-x: auto;
    overflow-y: hidden;

    text-align: center;
    overscroll-behavior-inline: contain;
}


.markdown-body .maima-math-display > .katex-display {
    margin: 0;
}


/*
 * Code blocks.
 */


.markdown-body pre,
.codehilite {
    max-width: 100%;
    margin: 0.9em 0;

    overflow: hidden;

    background: var(--code-background);

    border: 1px solid var(--code-border);
    border-radius: 10px;
}


.markdown-body pre {
    padding: 14px;
    overflow-x: auto;
}


.codehilite pre {
    margin: 0;
    padding: 14px;

    overflow-x: auto;

    background: transparent;
    border: 0;
    border-radius: 0;
}


.markdown-body pre code,
.codehilite code {
    padding: 0;

    color: inherit;
    background: transparent;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 0.88rem;
    line-height: 1.5;

    white-space: pre;
}


/*
 * Markdown tables.
 */


.markdown-body table {
    display: block;

    width: max-content;
    max-width: 100%;

    margin: 0.9em 0;

    overflow-x: auto;

    border-collapse: collapse;
}


.markdown-body th,
.markdown-body td {
    padding: 8px 10px;

    text-align: left;

    border: 1px solid var(--border-colour);
}


.markdown-body th {
    background: var(--table-header-background);
}


/*
 * Thinking panel.
 */


.thinking-panel {
    margin-bottom: 12px;

    background: var(--thinking-background);

    border: 1px solid var(--thinking-border);
    border-radius: 9px;
}


.thinking-summary {
    padding: 9px 11px;

    color: var(--thinking-label);

    font-size: 0.82rem;
    font-weight: 700;

    cursor: pointer;
    user-select: none;
}


.thinking-content {
    padding: 11px;

    color: var(--thinking-text);

    border-top: 1px solid var(--thinking-border);
}


/*
 * Live streaming presentation.
 *
 * Generated text is displayed as safe plain text while tokens arrive.
 * Flask replaces it with sanitised Markdown when the response completes.
 */


.streaming-plain-text {
    white-space: pre-wrap;
}


.message-streaming .message-content {
    min-width: min(520px, 72vw);
}


.stream-status {
    margin-top: 8px;

    color: var(--text-secondary);

    font-size: 0.75rem;
    font-style: italic;
}


.stream-error {
    margin-top: 10px;
    padding: 9px 11px;

    color: var(--error-text);
    background: var(--error-background);

    border: 1px solid var(--error-border);
    border-radius: 8px;
}


/*
 * A small blinking marker identifies the section currently receiving text.
 * JavaScript moves this class from Thinking to the answer as generation
 * progresses.
 */
.streaming-target::after {
    display: inline-block;

    width: 0.55em;
    height: 1em;
    margin-left: 0.18em;

    vertical-align: -0.12em;

    background: currentColor;

    content: "";

    animation: maima-stream-cursor 850ms steps(1, end) infinite;
}


@keyframes maima-stream-cursor {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }

}


/*
 * Chat composer and mode controls.
 */


.chat-form {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 14px 24px 18px;

    background: var(--input-area-background);
    border-top: 1px solid var(--border-colour);
}


.chat-options {
    display: flex;
    align-items: stretch;
    gap: 10px;

    width: 100%;
}


.mode-control {
    position: relative;

    flex: 1 1 0;

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    padding: 9px 11px;

    background: var(--mode-control-background);

    border: 1px solid var(--mode-control-border);
    border-radius: var(--control-radius);

    cursor: pointer;
    user-select: none;
}


/*
 * Keep the native checkbox available to keyboards and screen readers
 * while replacing its visible appearance with a switch.
 */
.mode-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


.mode-switch-track {
    position: relative;

    flex: 0 0 auto;

    width: 38px;
    height: 22px;

    background: var(--switch-off-background);

    border: 1px solid var(--switch-border);
    border-radius: 999px;

    transition:
        background 160ms ease,
        border-color 160ms ease;
}


.mode-switch-knob {
    position: absolute;

    top: 2px;
    left: 2px;

    width: 16px;
    height: 16px;

    background: var(--switch-knob-background);

    border-radius: 50%;

    transition: transform 160ms ease;
}


.mode-checkbox:checked + .mode-switch-track {
    background: var(--switch-on-background);
    border-color: var(--switch-on-background);
}


.mode-checkbox:checked
+ .mode-switch-track
.mode-switch-knob {
    transform: translateX(16px);
}


.mode-checkbox:focus-visible
+ .mode-switch-track {
    outline: 2px solid var(--accent-colour);
    outline-offset: 3px;
}


.mode-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.mode-title {
    color: var(--text-primary);

    font-size: 0.82rem;
    font-weight: 700;
}


.mode-state {
    margin-top: 1px;

    color: var(--text-secondary);

    font-size: 0.7rem;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.chat-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;

    width: 100%;
}


.chat-input-container {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}


.chat-input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    max-height: 140px;

    padding: 12px 14px;

    resize: none;
    overflow-y: hidden;

    color: var(--text-primary);
    background: var(--input-background);

    border: 1px solid var(--border-colour);
    border-radius: var(--control-radius);

    outline: none;
}


.chat-input:focus {
    border-color: var(--accent-colour);
}


.input-hint {
    color: var(--text-secondary);
    font-size: 0.72rem;
}


.send-button,
.new-chat-button {
    padding: 10px 18px;

    color: var(--button-text);
    background: var(--accent-colour);

    border: 0;
    border-radius: var(--control-radius);

    cursor: pointer;
}


.send-button {
    flex: 0 0 auto;

    min-width: 82px;
    min-height: 46px;
}


.send-button:hover,
.new-chat-button:hover {
    background: var(--accent-hover-colour);
}


button:disabled,
textarea:disabled,
textarea[readonly] {
    cursor: not-allowed;
    opacity: 0.65;
}


@media (max-width: 760px) {

    .history-drawer {
        position: absolute;
        inset: 0 auto 0 0;

        width: min(86vw, 320px);
        min-width: min(86vw, 320px);

        margin-left: 0;

        transform: translateX(-105%);

        box-shadow: 10px 0 28px rgb(0 0 0 / 28%);
    }


    .chat-layout.history-drawer-collapsed .history-drawer {
        margin-left: 0;
    }


    .chat-layout.history-drawer-open .history-drawer {
        transform: translateX(0);
    }


    .history-overlay {
        position: absolute;
        z-index: 15;
        inset: 0;

        display: block;

        padding: 0;

        opacity: 0;
        pointer-events: none;

        background: rgb(0 0 0 / 48%);

        border: 0;

        transition: opacity 180ms ease;
    }


    .chat-layout.history-drawer-open .history-overlay {
        opacity: 1;
        pointer-events: auto;
    }


    .history-close-button {
        display: inline-flex;
    }


    .history-help {
        display: block;
    }


    .chat-context-status {
        display: none;
    }

}


@media (max-width: 600px) {

    .app-header {
        padding: 12px 14px;
    }


    .chat-context-bar {
        padding: 8px 14px;
    }


    .chat-context-title {
        max-width: 78vw;
    }


    .message-list {
        padding: 16px 14px;
    }


    .notification-list {
        padding: 12px 14px 0;
    }


    .chat-form {
        gap: 10px;

        padding: 10px 14px;

        padding-bottom: max(
            10px,
            env(safe-area-inset-bottom)
        );
    }


    .chat-options {
        gap: 7px;
    }


    .mode-control {
        padding: 7px 8px;
        gap: 7px;
    }


    .mode-switch-track {
        width: 34px;
        height: 20px;
    }


    .mode-switch-knob {
        width: 14px;
        height: 14px;
    }


    .mode-checkbox:checked
    + .mode-switch-track
    .mode-switch-knob {
        transform: translateX(14px);
    }


    .mode-state {
        display: none;
    }


    .app-subtitle {
        display: none;
    }


    .history-toggle-button,
    .new-chat-button {
        padding-left: 12px;
        padding-right: 12px;
    }


    .message {
        max-width: 94%;
    }


    .chat-input {
        max-height: 110px;
    }


    .input-hint {
        display: none;
    }


    .send-button {
        min-width: 70px;

        padding-left: 12px;
        padding-right: 12px;
    }

}

/* Message actions and private attachments. */
.message-actions { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin-top: 3px; min-height: 30px; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.copy-button:hover, .copy-button:focus-visible { background: var(--input-background); color: var(--accent-colour); }
.copy-button:focus-visible, .attach-button:focus-visible { outline: 2px solid var(--accent-colour); outline-offset: 2px; }
.copy-status { font-size: .72rem; color: var(--text-secondary); }
.clipboard-fallback { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.composer-input-shell { position: relative; display:flex; align-items:center; }
.composer-input-shell.has-attachments .chat-input { padding-left: 56px; }
.attach-button { position:absolute; left:5px; bottom:1px; width:44px; height:44px; padding:0; border:0; border-radius:50%; color:var(--accent-colour); background:var(--assistant-message-background); display:inline-flex; align-items:center; justify-content:center; line-height:1; cursor:pointer; }
.attach-button svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; pointer-events:none; }
.attach-button:disabled { opacity: .45; cursor: wait; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 230px; overflow-y: auto; }
.attachment-list:empty { display: none; }
.attachment-card { max-width: 230px; min-width: 160px; padding: 8px; border: 1px solid var(--border-colour); border-radius: 8px; color: var(--text-secondary); font-size: .75rem; overflow-wrap: anywhere; }
.attachment-remove { margin-left: 8px; padding: 3px 6px; border: 1px solid var(--border-colour); border-radius: 4px; background: transparent; color: var(--text-primary); cursor: pointer; }
.media-attachment { margin: 0 0 8px; min-width: 0; }
.media-attachment img, .media-attachment video { display: block; max-width: 100%; max-height: 320px; width: auto; border-radius: 6px; }
.attachment-card img, .attachment-card video { max-height: 100px; }
.media-attachment figcaption { margin-top: 4px; font-size: .75rem; overflow-wrap: anywhere; }
.media-attachment a { color: var(--accent-colour); }
.composer-error { color: var(--text-primary); border-left: 3px solid var(--accent-colour); padding: 5px 8px; font-size: .8rem; }

/* Persisted message telemetry, saved context, and native camera choices. */
.message-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: -2px 0 6px; color: var(--text-secondary); font-size: .68rem; font-variant-numeric: tabular-nums; }
.message-user .message-metadata { justify-content: flex-end; }
.chat-context-bar { flex-wrap: wrap; }
.chat-context-status[data-context-indicator] { display: flex; flex-direction: column; gap: 3px; max-width: 100%; min-width: 220px; font-variant-numeric: tabular-nums; }
[data-context-progress] { width: 100%; height: 5px; accent-color: var(--accent-colour); }
.context-detail { font-size: .64rem; }
.context-near-limit { color: var(--error-text); }
.attachment-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: 180px; padding: 5px; border: 1px solid var(--border-colour); border-radius: 8px; background: var(--input-background); box-shadow: 0 3px 16px #0003; }
.attachment-menu button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.attachment-menu button:hover, .attachment-menu button:focus-visible { background: var(--assistant-message-background); outline: 2px solid var(--accent-colour); outline-offset: -2px; }
@media (max-width: 600px) {
    .chat-context-status[data-context-indicator] { width: 100%; min-width: 0; }
    .message-metadata { font-size: .63rem; }
}

/* Account-scoped desktop history width; mobile keeps its existing drawer. */
@media (min-width: 761px) {
    .history-drawer { flex-basis: var(--history-width, 280px); width: var(--history-width, 280px); min-width: var(--history-width, 280px); }
    .chat-layout.history-drawer-collapsed .history-drawer { margin-left: calc(-1 * var(--history-width, 280px)); }
}
.history-resize-handle { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; touch-action: none; z-index: 30; border-right: 2px solid var(--border-colour); }
.history-resize-handle:hover, .history-resize-handle:focus-visible { background: var(--accent-colour); outline: none; }
.history-resizing, .history-resizing * { user-select: none !important; cursor: col-resize !important; }
.history-row { position: relative; flex-shrink: 0; }
.history-row .history-item { padding-right: 35px; }
.history-menu-button { position: absolute; top: 9px; right: 8px; border: 0; border-radius: 5px; background: var(--input-area-background); color: var(--text-primary); cursor: pointer; font-size: 1.3rem; line-height: 24px; }
.history-menu { position: relative; margin: 0 8px 6px; padding: 5px; border: 1px solid var(--border-colour); border-radius: var(--control-radius); background: var(--input-area-background); }
.history-menu button { display: block; width: 100%; padding: 8px; border: 0; border-radius: 4px; text-align: left; background: transparent; color: var(--text-primary); cursor: pointer; }
.history-menu button:hover, .history-menu button:focus-visible { background: var(--assistant-message-background); outline: 2px solid var(--accent-colour); }
.history-pin { color: var(--text-secondary); font-size: .65rem; font-weight: 700; }
.history-view-link { padding: 8px 16px; color: var(--text-primary); font-size: .8rem; }
.history-error, .deleted-notice { padding: 12px; color: var(--text-primary); font-size: .85rem; }
.history-menu[hidden], .chat-form[hidden], .chat-context-status[hidden] { display: none; }
@media (max-width: 760px) { .history-resize-handle { display: none; } }

/* Ordinary pages use the document; only chat messages/history own scroll regions. */
.control-page { width: 100%; min-height: 0; padding: 24px; color: var(--text-primary); }
.control-page form { display: grid; gap: 12px; margin: 16px 0; max-width: 960px; }
.control-page label { display: grid; gap: 5px; }
.control-page input:not([type=checkbox]):not([type=radio]), .control-page select, .control-page textarea, .control-page button, .profile-menu select, .profile-menu button { padding: 10px; border: 1px solid var(--border-colour); border-radius: var(--control-radius); background: var(--assistant-message-background); color: var(--text-primary); font: inherit; min-width: 0; }
.control-page input[type=checkbox], .control-page input[type=radio] { width: auto; }
.control-page textarea { width: 100%; min-height: 100px; }
.control-page pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.control-page a { color: var(--accent-colour); }
.control-page h2 { margin-top: 28px; }
.control-page article, .control-page details { padding: 12px; border: 1px solid var(--border-colour); margin: 10px 0; }
.contact-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; margin: 6px; }
.section-links { display:flex; gap:12px; flex-wrap:wrap; }
.profile-menu-shell { position:relative; }
.profile-button { display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:44px; border:1px solid var(--border-colour); border-radius:var(--control-radius); background:var(--input-area-background); color:var(--text-primary); cursor:pointer; }
.profile-button img { width:32px; height:32px; flex:none; border-radius:50%; object-fit:cover; object-position:center; }
.profile-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:100; width:250px; max-width:90vw; padding:12px; border:1px solid var(--border-colour); border-radius:var(--control-radius); background:var(--input-area-background); box-shadow:0 8px 30px #0005; }
.profile-menu[hidden] { display:none; }
.profile-menu { display:grid; gap:8px; }
.profile-menu label { display:grid; gap:6px; padding:4px 0; }
.profile-menu form { display:contents; }
.profile-menu :is(a,button) { width:100%; margin:0; text-align:left; }
.profile-menu p:empty { display:none; }
.profile-menu p { margin:0; overflow-wrap:anywhere; }
.profile-menu :focus-visible { outline:2px solid var(--accent-colour); outline-offset:2px; }
.profile-menu select { width:100%; }
.app-header { position:sticky; top:0; z-index:60; padding-top:max(12px,env(safe-area-inset-top)); }
.profile-avatar, .review-media { max-width:100%; max-height:320px; }
.household-graph { width:100%; max-width:800px; color:var(--text-primary); border:1px solid var(--border-colour); }
.chat-options { flex-wrap:wrap; }
@media(max-width:600px) { .control-page { padding:12px; } .contact-row { grid-template-columns:1fr; } .profile-button span:last-child { max-width:90px; overflow:hidden; text-overflow:ellipsis; } }

/* Administration: named relationships and predictable navigation in every skin. */
.admin-navigation { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.control-page [data-cancel] { display:inline-block; padding:10px; justify-self:start; }
.control-page [data-person-select] { width:100%; min-height:130px; }
.control-page [hidden] { display:none !important; }
.control-page .form-error { color:var(--error-text); border-left:3px solid var(--error-border); padding:10px; }
.control-page [aria-invalid=true] { border:2px solid var(--error-border); }
.control-page [aria-busy=true] button { opacity:.65; cursor:wait; }
.control-page p, .control-page summary, .control-page code { overflow-wrap:anywhere; }
.control-page .visibility-help { padding-left:22px; line-height:1.5; }
.relationship-diagram { border:1px solid var(--border-colour); padding:16px; color:var(--text-primary); background:var(--assistant-message-background); }
.relationship-diagram ul { margin-left:16px; padding-left:16px; border-left:2px solid var(--accent-colour); }
.relationship-diagram li { padding:10px 0; overflow-wrap:anywhere; }
.control-page :focus-visible { outline:2px solid var(--accent-colour); outline-offset:3px; }

.maima-brand { display:flex; gap:10px; align-items:center; min-width:0; }
.maima-brand-image { width:44px; height:44px; object-fit:contain; border-radius:8px; flex:none; }
.avatar-editor-preview { width:100%; height:100%; object-fit:cover; object-position:center; border-radius:50%; display:block; }
.avatar-fallback { font-size:2rem; }
.message-area { flex:1 1 auto; min-height:0; min-width:0; position:relative; isolation:isolate; overflow:hidden; }
.message-area .message-list { height:100%; position:relative; }
.chat-wallpaper { position:absolute; inset:0; pointer-events:none; z-index:-1; background-position:center; }
.message-list > .message { position:relative; }
.message-list .message-label, .message-list .message-metadata { background:var(--app-background); width:fit-content; border-radius:4px; padding:2px 5px; }
.appearance-preview { height:130px; border:1px solid var(--border-colour); border-radius:8px; background-color:var(--app-background); background-position:center; }
.appearance-preview span { display:inline-block; margin:16px; padding:10px; color:var(--text-primary); background:var(--assistant-message-background); }
@media(max-width:600px) { .maima-brand-image { width:34px; height:34px; } .maima-brand { gap:6px; } .app-subtitle { max-width:145px; } }
@media(max-width:380px) { .app-subtitle { display:none; } .header-actions { gap:4px; } }

/* Copy feedback must remain legible even on a bright/custom wallpaper. */
.message-area .copy-button, .message-area .copy-status { color:var(--text-primary); background:var(--app-background); border-radius:6px; }

/* Durable image cards stay within the existing chat column at mobile widths/zoom. */
.image-job { max-width:100%; padding:.8rem; border:1px solid var(--border-color, #8886); border-radius:12px; overflow-wrap:anywhere; }
.image-job img { display:block; width:auto; max-width:100%; max-height:70vh; border-radius:8px; }
.image-job p { margin:.5rem 0; }
.image-job button, .image-action { margin:.35rem; }
.image-job details { margin-top:.65rem; }
[data-ai-services] label { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
[data-ai-services] input, [data-ai-services] select { max-width:100%; min-width:0; }
[data-ai-services] .simple-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:.75rem; }
[data-ai-services] fieldset { margin:.7rem 0; padding:.8rem; min-width:0; }
.image-job button, .image-action, a.image-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; color:var(--text-primary); background:var(--assistant-message-background); border:1px solid var(--border-colour); border-radius:8px; padding:.45rem .7rem; font:inherit; line-height:1.35; text-decoration:none; vertical-align:middle; cursor:pointer; }
.image-action:hover { border-color:var(--accent-colour); }
.image-action:focus-visible { outline:2px solid var(--accent-colour); outline-offset:2px; }
[data-ai-services] label:has(input[type=checkbox]) { flex-direction:row; align-items:center; gap:.6rem; }
[data-ai-services] input[type=checkbox] { width:1.1rem; height:1.1rem; flex:none; margin:0; }
[data-ai-roles] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
@media(max-width:700px) { [data-ai-roles] { grid-template-columns:1fr; } }
.image-job progress[data-step-progress]{display:block;width:min(100%,360px);height:12px;margin:8px 0}.image-job progress[hidden]{display:none}