/* ==========================================================================
    PREMIUM DESIGN SYSTEM (AiChat Pro)
   ========================================================================== */

/* 1. Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* === GPTun settings spacing + task cards === */
.aichat-modal-card:has(.ichat-settings-shell) .aichat-modal-body {
    padding: 0;
}

.aichat-modal-close {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

.aichat-modal-close svg { width: 16px; height: 16px; }

.aichat-modal-header { position: relative; }
.aichat-modal-header > .aichat-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

@media (min-width: 640px) {
    .aichat-modal-header > .aichat-modal-close {
        top: 16px;
        right: 16px;
    }
}

.ichat-settings-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 20px 16px;
}

.ichat-settings-shell > * { margin-top: 0 !important; }

.ichat-settings-card--appearance { padding: 10px 12px; }
.ichat-settings-card--appearance .ichat-theme-segment { gap: 2px; padding: 2px; }
.ichat-settings-card--appearance .ichat-theme-option { min-height: 28px; padding-inline: 8px; }

.ichat-settings-toggle-card { min-height: 68px; }

.ichat-admin-only-section {
    border: 1px solid rgb(253 230 138);
    border-radius: 14px;
    background: rgb(255 251 235 / 0.58);
    padding: 10px;
}

.dark .ichat-admin-only-section {
    border-color: rgb(133 77 14 / 0.7);
    background: rgb(69 26 3 / 0.18);
}

.ichat-admin-only-label {
    margin: 0 0 8px;
    color: rgb(180 83 9);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.dark .ichat-admin-only-label { color: rgb(253 186 116); }

.ichat-admin-only-section > .ichat-self-card {
    background: rgb(255 255 255 / 0.78);
}

.dark .ichat-admin-only-section > .ichat-self-card {
    background: rgb(17 24 39 / 0.56);
}

.ichat-consciousness-model-card {
    min-width: 0;
    border: 1px solid rgb(226 232 240);
    border-radius: 12px;
    background: rgb(255 255 255 / 0.84);
    padding: 12px;
}

.dark .ichat-consciousness-model-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.58);
}

.ichat-consciousness-control {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgb(209 250 229);
    border-radius: 14px;
    background: rgb(240 253 244 / 0.72);
    padding: 12px 14px;
}

.ichat-consciousness-control:not(.is-enabled) {
    border-color: rgb(226 232 240);
    background: rgb(248 250 252 / 0.82);
}

.dark .ichat-consciousness-control {
    border-color: rgb(20 83 45 / 0.72);
    background: rgb(20 83 45 / 0.2);
}

.dark .ichat-consciousness-control:not(.is-enabled) {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.52);
}

.ichat-consciousness-enable { min-width: 0; }

.ichat-consciousness-toggle {
    position: relative;
    width: 40px;
    height: 22px;
    flex: 0 0 40px;
    border-radius: 999px;
    background: rgb(203 213 225);
    transition: background-color 140ms ease;
}

.ichat-consciousness-toggle.is-on { background: rgb(34 197 94); }

.ichat-consciousness-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.22);
    transition: transform 140ms ease;
}

.ichat-consciousness-toggle.is-on .ichat-consciousness-toggle__thumb { transform: translateX(18px); }

.ichat-consciousness-live-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    border: 1px solid rgb(221 214 254);
    border-radius: 999px;
    background: rgb(245 243 255);
    padding: 5px 9px;
    color: rgb(124 58 237);
    font-size: 11px;
    font-weight: 700;
}

.dark .ichat-consciousness-live-status {
    border-color: rgb(91 33 182 / 0.6);
    background: rgb(76 29 149 / 0.24);
    color: rgb(196 181 253);
}

.ichat-consciousness-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 0 4px;
    color: rgb(100 116 139);
    font-size: 10px;
    line-height: 1.4;
}

.ichat-consciousness-status-row b { color: rgb(51 65 85); font-weight: 700; }
.dark .ichat-consciousness-status-row b { color: rgb(203 213 225); }

.ichat-consciousness-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.ichat-consciousness-summary-card {
    min-width: 0;
    min-height: 68px;
    border: 1px solid;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.ichat-consciousness-summary-main {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.ichat-consciousness-summary-value {
    color: rgb(15 23 42);
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dark .ichat-consciousness-summary-value { color: rgb(248 250 252); }

.ichat-consciousness-summary-label {
    min-width: 0;
    overflow: hidden;
    color: rgb(71 85 105);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.ichat-consciousness-summary-hint {
    margin-top: 7px;
    overflow: hidden;
    color: rgb(100 116 139);
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ichat-toggle-control {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 22px;
    flex: 0 0 40px;
    cursor: pointer;
}

.ichat-toggle-control__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgb(209 213 219);
    transition: background-color 140ms ease;
}

.dark .ichat-toggle-control__track { background: rgb(55 65 81); }
.ichat-toggle-control__track.is-on { background: rgb(79 70 229); }

.ichat-toggle-control__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.22);
    transition: transform 140ms ease;
}

.ichat-toggle-control__track.is-on .ichat-toggle-control__thumb { transform: translateX(18px); }

.ichat-toggle-control input:focus-visible + .ichat-toggle-control__track {
    outline: 2px solid rgb(99 102 241);
    outline-offset: 3px;
}

/* Open Design run 237bd0a3: active tasks beside the balance, outside the scroll flow. */
.aichat-task-control { position: static; flex: 0 0 auto; }
.aichat-shell-header .aichat-task-pill {
    display: inline-flex; position: relative; align-items: center; justify-content: center;
    gap: 7px; min-height: 30px; padding: 0 11px; color: #475569;
    font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
    transition: none;
}
.aichat-task-pill::before { content: ''; position: absolute; inset: -7px 0; }
.aichat-task-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #6b977b; }
.aichat-task-pill:focus-visible, .aichat-task-row:focus-visible { outline: 2px solid #547aa6; outline-offset: 2px; }
.aichat-task-popover {
    position: absolute; top: calc(100% - 1px); right: 12px; z-index: 50;
    width: 320px; max-width: calc(100% - 24px); padding: 6px;
    border: 1px solid #e8ebef; border-radius: 14px; background: #fff;
    box-shadow: 0 8px 28px #00000012;
}
.aichat-task-list { list-style: none; padding: 0; margin: 0; max-height: min(300px, 50dvh); overflow-y: auto; overscroll-behavior: contain; }
.aichat-task-list > li + li { border-top: 1px solid #e8ebef; }
.aichat-task-row { display: block; padding: 11px 12px; border-radius: 8px; color: #293340; transition: none; }
.aichat-task-row:hover { background: #f2f4f6; }
.aichat-task-name { display: block; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.aichat-task-status { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.dark .aichat-shell-header .aichat-task-pill { color: #cbd5e1; }
.dark .aichat-task-dot { background: #7da88c; }
.dark .aichat-task-popover { background: #222b36; border-color: #323b47; }
.dark .aichat-task-list > li + li { border-color: #323b47; }
.dark .aichat-task-row { color: #dee4ec; }
.dark .aichat-task-row:hover { background: #262e39; }
.dark .aichat-task-status { color: #a5b0bf; }
@media (max-width: 639px) {
    .aichat-task-pill__label { display: none; }
    .aichat-shell-header .aichat-task-pill { min-width: 36px; padding-inline: 8px; }
    .aichat-shell-header .aichat-header-action { width: 36px; flex-basis: 36px; }
}

.aichat-task-item { position: relative; }
.aichat-task-item .aichat-task-row { width: 100%; text-align: left; padding-right: 78px; }
.aichat-task-actions { position: absolute; top: 8px; right: 4px; display: flex; opacity: 0; pointer-events: none; }
.aichat-task-item:hover .aichat-task-actions,
.aichat-task-item:focus-within .aichat-task-actions { opacity: 1; pointer-events: auto; }
.aichat-task-actions button { width: 32px; height: 36px; border-radius: 8px; font-size: 12px; color: #64748b; }
.aichat-task-actions button:hover, .aichat-task-actions button:focus-visible { background: #e8ebef; color: #293340; }
.aichat-task-actions button:disabled { opacity: .4; cursor: wait; }
.aichat-task-error { padding: 6px 12px; color: #b45309; font-size: 12px; }
.dark .aichat-task-actions button { color: #a5b0bf; }
.dark .aichat-task-actions button:hover, .dark .aichat-task-actions button:focus-visible { background: #323b47; color: #dee4ec; }
.dark .aichat-task-error { color: #fbbf24; }
@media (hover: none) {
    .aichat-task-actions { opacity: 1; pointer-events: auto; }
    .aichat-task-actions button { width: 36px; height: 44px; }
    .aichat-task-item .aichat-task-row { min-height: 60px; padding-right: 82px; }
}

/* AI-chat coding task card: Bot Admin style (light, indigo accent) with dark-theme parity. */
.ichat-code-agent-execution-card {
    --agent-surface: #ffffff; --agent-panel: #fbfbff; --agent-text: #1f2540; --agent-muted: #8d93af;
    --agent-border: #e4e8f8; --agent-border-soft: #eef1fb; --agent-subtle: #f5f6fb;
    --agent-accent: #5757f3; --agent-accent-soft: #eeefff;
    --agent-ok: #2f9e6b; --agent-ok-soft: #e9f6ef;
    --agent-warn: #c2871f; --agent-warn-soft: #fdf3e1;
    --agent-danger: #d4534a; --agent-danger-soft: #fdecea;
    display: block; margin: 16px 0; overflow: hidden; border: 1px solid var(--agent-border); border-radius: 20px;
    background: var(--agent-surface); color: var(--agent-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px; line-height: 1.55;
    box-shadow: 0 14px 32px rgb(104 114 170 / 8%), 0 1px 3px rgb(104 114 170 / 5%);
    overflow-wrap: anywhere;
}
.dark .ichat-code-agent-execution-card {
    --agent-surface: #1d2330; --agent-panel: #222a38; --agent-text: #e7ebf0; --agent-muted: #a3adc2;
    --agent-border: #333c4d; --agent-border-soft: #2b3342; --agent-subtle: #232a37;
    --agent-accent: #8b8bff; --agent-accent-soft: #262a45;
    --agent-ok: #7fd2a6; --agent-ok-soft: #23372e;
    --agent-warn: #e0b061; --agent-warn-soft: #3a3020;
    --agent-danger: #f09b90; --agent-danger-soft: #3f2c2b;
    box-shadow: 0 14px 32px rgb(0 0 0 / 25%);
}
.ichat-code-agent-execution-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 18px 0; }
.ichat-code-agent-execution-card__header strong,
.ichat-code-agent-execution-card__title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; min-width: 0; }
.ichat-code-agent-execution-card__status {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 650;
    background: var(--agent-subtle); color: var(--agent-muted);
}
.ichat-code-agent-execution-card__status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ichat-code-agent-execution-card[data-status="RUNNING"] .ichat-code-agent-execution-card__status,
.ichat-code-agent-execution-card[data-status="EXECUTING"] .ichat-code-agent-execution-card__status { background: var(--agent-accent-soft); color: var(--agent-accent); }
.ichat-code-agent-execution-card[data-status="COMPLETED"] .ichat-code-agent-execution-card__status,
.ichat-code-agent-execution-card[data-status="DONE"] .ichat-code-agent-execution-card__status,
.ichat-code-agent-execution-card[data-status="SUCCESS"] .ichat-code-agent-execution-card__status { background: var(--agent-ok-soft); color: var(--agent-ok); }
.ichat-code-agent-execution-card[data-status="FAILED"] .ichat-code-agent-execution-card__status,
.ichat-code-agent-execution-card[data-status="ERROR"] .ichat-code-agent-execution-card__status { background: var(--agent-danger-soft); color: var(--agent-danger); }
.ichat-code-agent-execution-card[data-status="BLOCKED"] .ichat-code-agent-execution-card__status,
.ichat-code-agent-execution-card[data-status="HUMAN_BLOCKED"] .ichat-code-agent-execution-card__status { background: var(--agent-warn-soft); color: var(--agent-warn); }
.ichat-code-agent-execution-card[data-status="CANCELLED"] .ichat-code-agent-execution-card__status,
.ichat-code-agent-execution-card[data-status="CANCEL_REQUESTED"] .ichat-code-agent-execution-card__status,
.ichat-code-agent-execution-card[data-status="CANCELLING"] .ichat-code-agent-execution-card__status { background: var(--agent-border-soft); color: var(--agent-muted); }
.ichat-code-agent-execution-card__meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 18px 0; }
.ichat-code-agent-execution-card__chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border: 1px solid var(--agent-border-soft); border-radius: 999px;
    background: var(--agent-panel); color: var(--agent-muted); font-size: 12px; white-space: nowrap;
}
.ichat-code-agent-execution-card__chip[title] { cursor: help; }
.ichat-code-agent-execution-card__chip b { color: var(--agent-text); font-weight: 600; }
.ichat-code-agent-execution-card__body { padding: 12px 18px 16px; }
.ichat-code-agent-execution-card p { margin: 0 0 8px; }
.ichat-code-agent-execution-card__stage { font-size: 12px; color: var(--agent-muted); }
.ichat-code-agent-execution-card__work { font-size: 13.5px; }
.ichat-code-agent-execution-card__progress { height: 6px; margin: 0 0 12px; border-radius: 999px; background: var(--agent-border-soft); overflow: hidden; }
.ichat-code-agent-execution-card__progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6d6dfb, var(--agent-accent)); }
.ichat-code-agent-execution-card__recent { list-style: none; padding: 0; margin: 12px 0 0; font-size: 12.5px; color: var(--agent-muted); }
.ichat-code-agent-execution-card__recent li, .ichat-code-agent-execution-card__activity li { display: flex; gap: 10px; padding: 4px 0; }
.ichat-code-agent-execution-card time { flex-shrink: 0; font: 11.5px/1.7 ui-monospace, Consolas, monospace; color: var(--agent-muted); }
.ichat-code-agent-execution-card__recent li > span { min-width: 0; white-space: pre-line; }
.ichat-code-agent-execution-card__empty { font-size: 12px; color: var(--agent-muted); }
.ichat-code-agent-execution-card__report { margin-top: 14px; border-top: 1px solid var(--agent-border-soft); }
.ichat-code-agent-execution-card__summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 12px 18px; font-size: 13px; color: var(--agent-muted); }
.ichat-code-agent-execution-card__summary::-webkit-details-marker { display: none; }
.ichat-code-agent-execution-card__summary-label { flex: 1; }
.ichat-code-agent-execution-card__tally { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 650; }
.ichat-code-agent-execution-card__tally--done { background: var(--agent-ok-soft); color: var(--agent-ok); }
.ichat-code-agent-execution-card__tally--pending { background: var(--agent-warn-soft); color: var(--agent-warn); }
.ichat-code-agent-execution-card__report-body { display: grid; gap: 16px; padding: 2px 18px 18px; }
.ichat-code-agent-execution-card__sec h4 { margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--agent-muted); }
.ichat-code-agent-execution-card__important { border: 1px solid var(--agent-border); border-radius: 14px; padding: 12px 13px; background: var(--agent-panel); }
.ichat-code-agent-execution-card__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ichat-code-agent-execution-card__item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.ichat-code-agent-execution-card__mark { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.ichat-code-agent-execution-card__item--done .ichat-code-agent-execution-card__mark { background: var(--agent-ok-soft); color: var(--agent-ok); }
.ichat-code-agent-execution-card__item--pending .ichat-code-agent-execution-card__mark { background: var(--agent-warn-soft); color: var(--agent-warn); }
.ichat-code-agent-execution-card__item--note .ichat-code-agent-execution-card__mark { background: var(--agent-subtle); color: var(--agent-muted); }
.ichat-code-agent-execution-card__item-body { min-width: 0; }
.ichat-code-agent-execution-card__evidence { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 8px; vertical-align: middle; }
.ichat-code-agent-execution-card__ev { font: 11px/1.4 ui-monospace, Consolas, monospace; padding: 3px 6px; border: 1px solid var(--agent-border-soft); border-radius: 6px; background: var(--agent-panel); color: var(--agent-muted); }
.ichat-code-agent-execution-card__badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--agent-danger-soft); color: var(--agent-danger); font-size: 11px; font-weight: 650; }
.ichat-code-agent-execution-card__continue { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ichat-code-agent-execution-card__checks { display: flex; flex-wrap: wrap; gap: 8px; }
.ichat-code-agent-execution-card__check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--agent-muted); }
.ichat-code-agent-execution-card__check-ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.ichat-code-agent-execution-card__check--ok .ichat-code-agent-execution-card__check-ic { background: var(--agent-ok-soft); color: var(--agent-ok); }
.ichat-code-agent-execution-card__check--wait .ichat-code-agent-execution-card__check-ic { background: var(--agent-warn-soft); color: var(--agent-warn); }
.ichat-code-agent-execution-card__result { padding: 13px 15px; margin: 4px 0 16px; background: var(--agent-subtle); border: 1px solid var(--agent-border); border-radius: 10px; }
.ichat-code-agent-execution-card__result h4 { margin: 0 0 7px; font-size: 11px; color: var(--agent-muted); font-weight: 600; }
.ichat-code-agent-execution-card__result > div { white-space: pre-wrap; font: 13px/1.65 ui-monospace, Consolas, monospace; }
.ichat-code-agent-execution-card__plan { margin: 4px 0 12px; }
.ichat-code-agent-execution-card__plan h4 { margin: 0 0 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--agent-muted); }
.ichat-code-agent-execution-card__plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ichat-code-agent-execution-card__plan li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.ichat-code-agent-execution-card__plan em { color: var(--agent-muted); font-style: normal; font-size: 11.5px; }
.ichat-code-agent-execution-card__activity { border-top: 1px solid var(--agent-border-soft); }
.ichat-code-agent-execution-card__activity summary { cursor: pointer; padding: 12px 18px; font-size: 12px; }
.ichat-code-agent-execution-card__activity summary > span { float: right; margin-left: 10px; font-size: 11px; color: var(--agent-muted); }
.ichat-code-agent-execution-card__activity ol { list-style: none; margin: 0; padding: 0 18px 14px; max-height: 260px; overflow-y: auto; font: 12px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.ichat-code-agent-execution-card__activity > p { padding: 0 18px 12px; font-size: 12px; color: var(--agent-muted); }
.ichat-code-agent-execution-card__notice, .ichat-code-agent-execution-card__error { padding: 10px 12px; border-radius: 10px; background: var(--agent-subtle); font-size: 12px; }
.ichat-code-agent-execution-card__notice { border-left: 3px solid var(--agent-warn); }
.ichat-code-agent-execution-card__error { border-left: 3px solid var(--agent-danger); }
.ichat-code-agent-execution-card__footer { padding: 12px 18px; border-top: 1px solid var(--agent-border-soft); }
.ichat-code-agent-execution-card__actions, .ichat-code-agent-execution-card__artifact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ichat-code-agent-execution-card .media-action-btn { min-height: 36px; border: 1px solid var(--agent-border); border-radius: 10px; background: var(--agent-surface); color: var(--agent-text); box-shadow: none; font-size: 12px; }
.ichat-code-agent-execution-card .media-action-btn:hover { background: var(--agent-subtle); }
.ichat-code-agent-execution-card__artifact { padding: 10px 12px; border: 1px solid var(--agent-border); border-radius: 10px; }
.ichat-code-agent-execution-card__artifact > span { flex: 1; min-width: 120px; }
.ichat-code-agent-execution-card__artifacts { display: grid; gap: 8px; margin-top: 12px; }
.ichat-code-agent-execution-card__follow-up { display: flex; gap: 8px; margin-top: 10px; }
.ichat-code-agent-execution-card__follow-up input { min-width: 0; flex: 1; padding: 7px 10px; border: 1px solid var(--agent-border); border-radius: 10px; background: var(--agent-surface); color: var(--agent-text); font-size: 12px; }
.ichat-code-agent-execution-card__model { padding: 0 18px 12px; font-size: 11px; color: var(--agent-muted); }
.ichat-code-agent-execution-card :is(button, a, summary, input):focus-visible { outline: 2px solid var(--agent-accent); outline-offset: 3px; }
@media (max-width: 480px) {
    .ichat-code-agent-execution-card__header { gap: 8px; padding: 14px 14px 0; flex-wrap: wrap; }
    .ichat-code-agent-execution-card__meta { padding: 11px 14px 0; }
    .ichat-code-agent-execution-card__body { padding: 12px 14px 14px; }
    .ichat-code-agent-execution-card__summary, .ichat-code-agent-execution-card__report-body { padding-left: 14px; padding-right: 14px; }
    .ichat-code-agent-execution-card__activity summary, .ichat-code-agent-execution-card__footer { padding: 12px 14px; }
    .ichat-code-agent-execution-card__activity ol { padding: 0 14px 14px; }
    .ichat-code-agent-execution-card__follow-up { flex-direction: column; }
    .ichat-code-agent-execution-card .media-action-btn { min-height: 40px; }
}

.ichat-settings-card,
.ichat-self-card {
    border: 1px solid rgb(229 231 235);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.82);
    padding: 16px;
}

.dark .ichat-settings-card,
.dark .ichat-self-card {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.58);
}

.ichat-theme-segment,
.ichat-policy-segment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgb(243 244 246);
}

.ichat-policy-segment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: min(100%, 330px);
}

.dark .ichat-theme-segment,
.dark .ichat-policy-segment {
    background: rgb(31 41 55);
}

.ichat-theme-option,
.ichat-policy-option,
.ichat-consciousness-tab {
    min-height: 44px;
    border-radius: 11px;
    border: 0;
    background: transparent;
    padding: 0 12px;
    color: rgb(75 85 99);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
    transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.dark .ichat-theme-option,
.dark .ichat-policy-option,
.dark .ichat-consciousness-tab {
    color: rgb(209 213 219);
}

.ichat-theme-option.is-active,
.ichat-policy-option.is-active {
    color: rgb(67 56 202);
    background: white;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.12);
}

.dark .ichat-theme-option.is-active,
.dark .ichat-policy-option.is-active {
    color: rgb(199 210 254);
    background: rgb(55 65 81);
}

.ichat-theme-option:focus-visible,
.ichat-policy-option:focus-visible,
.ichat-consciousness-tab:focus-visible {
    outline: 2px solid rgb(99 102 241);
    outline-offset: 2px;
}

.ichat-consciousness-layout {
    background: rgb(249 250 251);
}

.dark .ichat-consciousness-layout {
    background: rgb(3 7 18);
}

.ichat-consciousness-nav {
    display: flex;
    width: 172px;
    flex: 0 0 172px;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    border-right: 1px solid rgb(229 231 235);
    padding: 12px;
    background: rgb(255 255 255 / 0.72);
}

.dark .ichat-consciousness-nav {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.72);
}

.ichat-consciousness-tab {
    width: 100%;
    text-align: left;
}

.ichat-consciousness-tab:hover {
    background: rgb(238 242 255);
    color: rgb(67 56 202);
}

.ichat-consciousness-tab.is-active {
    color: white;
    background: linear-gradient(135deg, rgb(79 70 229), rgb(124 58 237));
    box-shadow: 0 8px 20px rgb(79 70 229 / 0.18);
}

.ichat-neural-map-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ichat-neural-map-heading {
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(229 231 235);
    padding: 0 0 10px;
    color: rgb(17 24 39);
    background: transparent;
}

.ichat-neural-map-heading h3 { font-size: 14px; font-weight: 650; }
.ichat-neural-map-heading p { margin-top: 2px; color: rgb(156 163 175); font-size: 11px; }

.dark .ichat-neural-map-heading {
    border-bottom-color: rgb(55 65 81);
    color: rgb(243 244 246);
}

.ichat-neural-map-canvas {
    width: 100%;
    height: clamp(360px, 58vh, 640px);
    margin-top: 12px;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
}

@media (max-width: 767px) {
    .aichat-modal-card:has(.ichat-settings-shell) {
        align-self: end;
        max-height: min(92dvh, 760px);
        border-radius: 20px 20px 0 0;
    }
    .ichat-settings-shell { padding: 5px 14px 14px; }


    .ichat-consciousness-layout {
        flex-direction: column;
    }

    .ichat-consciousness-nav {
        width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid rgb(229 231 235);
        padding: 8px 10px;
        scrollbar-width: none;
    }

    .dark .ichat-consciousness-nav { border-bottom-color: rgb(55 65 81); }
    .ichat-consciousness-nav::-webkit-scrollbar { display: none; }
    .ichat-consciousness-tab { width: auto; min-width: max-content; text-align: center; }
    .ichat-neural-map-canvas { height: clamp(340px, 52dvh, 520px); }
}

@media (max-width: 1023px) {
    .ichat-consciousness-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .ichat-consciousness-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ichat-theme-option,
    .ichat-policy-option,
    .ichat-consciousness-tab {
        transition: none;
    }
}

.dark .glass-panel {
    background: rgba(31, 41, 55, 0.7); /* gray-800 with opacity */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.glass-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    z-index: 40;
}

.dark .glass-header {
    background: rgba(17, 24, 39, 0.85);
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

/* 2.1 GPTun Generation Inputs — works in both standalone pages and inline mode */
.AiChat-field {
    padding: 0.75rem 1rem;
    outline: none !important;
    box-shadow: none !important;
}

.AiChat-field:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Legacy selector for standalone pages */
.librechat-form-page .AiChat-field {
    padding: 0.75rem 1rem;
    outline: none;
}

.librechat-form-page .AiChat-field:focus {
    outline: none !important;
}

/* 2. Premium Inputs */
.input-premium {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(209, 213, 219, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .input-premium {
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.8);
    color: #f3f4f6;
}

.input-premium:focus {
    background: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .input-premium:focus {
    background: #1f2937;
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 3. Gradient Text */
.text-gradient-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #c026d3 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-blue {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .text-gradient-primary {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
}

.dark .text-gradient-blue {
    background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
}

/* 4. Animated Background Helpers */
.bg-animated-gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 5. Better Scrollbars (Refined) */
.scrollbar-premium::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-premium::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-premium::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s;
}

.scrollbar-premium::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.6);
}

.dark .scrollbar-premium::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

/* 6. Card Hover Effects */
.hover-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .hover-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Utility Animations */
@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.animate-pulse-subtle {
    animation: pulse-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* ==================== Enhanced Formatting Styles ==================== */

/* Prose enhancements for formatted output */
.prose h1, .prose h2, .prose h3 {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.3;
}

.prose h2 {
    border-bottom: 1px solid rgba(156, 163, 175, 0.3);
    padding-bottom: 0.3em;
}

.prose blockquote {
    border-left: 4px solid #6366f1;
    background: rgba(99, 102, 241, 0.05);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

.dark .prose blockquote {
    background: rgba(99, 102, 241, 0.1);
    border-left-color: #818cf8;
}

.prose hr {
    border-color: rgba(156, 163, 175, 0.3);
    margin: 1.5rem 0;
}

/* Chart container
   Владелец (A/B eval 2026-10-11, кейс ICHAT-T400-023): график был центрирован, а
   таблица под ним — по левому краю, из-за чего в одном ответе два блока «разъезжались».
   Таблицы прижимаются к левому краю (.chat-table: width: fit-content), поэтому и график
   выравниваем по той же левой линии, а не по центру сообщения. */
.chart-container {
    max-width: 600px;
    margin: 1rem 0;
}

/* Generated image container */
.generated-image-container {
    max-width: 512px;
}

.generated-image-container img {
    max-height: 512px;
    object-fit: contain;
}

/* Mermaid diagrams */
.mermaid {
    background: transparent !important;
    text-align: center;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(156, 163, 175, 0.2);
}

.dark .mermaid {
    background: rgba(17, 24, 39, 0.5) !important;
}

/* KaTeX formulas */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0;
}

/* Enhanced table styles */
.table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
    border-radius: 0.5rem;
    border: 1px solid rgba(156, 163, 175, 0.3);
    background: transparent;
}

.dark .table-scroll-wrapper {
    background: transparent;
}

.table-export-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease;
}

/* Export actions stay fixed above the scroll area and appear on hover/focus.
   While hidden the bar must not reserve height: a collapsed 0-height strip keeps
   the heading-to-table gap at the table margin instead of a blank toolbar row. */
.chat-table {
    position: relative;
    margin: 0.7rem 0 1rem;
    width: fit-content;
    max-width: 100%;
}

.chat-table .table-scroll-wrapper {
    margin: 0;
    width: auto;
    max-width: 100%;
    border-radius: 0.65rem;
}

.chat-table:hover .table-export-bar,
.chat-table:focus-within .table-export-bar {
    max-height: 3rem;
    padding: 0.15rem 0.35rem;
    opacity: 1;
    visibility: visible;
}

@media (hover: none) {
    .table-export-bar {
        max-height: none;
        padding: 0.15rem 0.35rem;
        opacity: 1;
        visibility: visible;
    }
}

.chat-table .table-scroll-wrapper table {
    margin: 0;
}

.chat-table thead th:first-child {
    border-top-left-radius: 0.6rem;
}

.chat-table thead th:last-child {
    border-top-right-radius: 0.6rem;
}

.table-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
    padding: 0;
    border-radius: 0.25rem;
    color: #6366f1;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.ui-block-artifact-preview {
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 0.5rem;
    background: transparent;
    color: #64748b;
    font-size: 0.75rem;
}

.ui-block-artifact-preview__ready { color: #4f46e5; font-weight: 600; }
.dark .ui-block-artifact-preview { background: transparent; color: #94a3b8; }
.dark .ui-block-artifact-preview__ready { color: #a5b4fc; }

/* ===== Streaming artifacts (Claude-style inline cards) ===== */
.ichat-artifact-card {
    --artifact-border: rgba(99, 102, 241, 0.22);
    --artifact-surface: rgba(248, 250, 252, 0.96);
    margin: 1rem 0;
    overflow: hidden;
    border: 1px solid var(--artifact-border);
    border-radius: 1rem;
    background: var(--artifact-surface);
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.07);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.ichat-artifact-card[aria-busy="true"] {
    border-color: rgba(99, 102, 241, 0.42);
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.11);
}

.ichat-artifact-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.62);
}

.ichat-artifact-card__identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.ichat-artifact-card__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 0.65rem;
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.1);
    font-size: 1rem;
    font-weight: 700;
}

.ichat-artifact-card__titles { min-width: 0; }
.ichat-artifact-card__title {
    overflow: hidden;
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ichat-artifact-card__meta {
    margin-top: 0.18rem;
    overflow: hidden;
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ichat-artifact-card__status { flex: 0 0 auto; }
.ichat-artifact-card__body { padding: 0.75rem; }

.ichat-artifact-card__preview {
    display: block;
    width: 100%;
    height: 15rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.7rem;
    background: #fff;
}

.ichat-artifact-card__code {
    max-height: 15rem;
    margin: 0;
    overflow: auto;
    padding: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    font: 0.72rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.ichat-artifact-card__empty,
.ichat-artifact-card__hint {
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.45;
}
.ichat-artifact-card__empty {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 0.7rem;
}
.ichat-artifact-card__hint { margin-top: 0.55rem; color: #b45309; }
.ichat-artifact-card__actions {
    display: flex;
    gap: 0.45rem;
    padding: 0 0.75rem 0.75rem;
}
.ichat-artifact-card__action {
    display: inline-flex;
    min-height: 1.9rem;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.55rem;
    color: #475569;
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ichat-artifact-card__action:hover,
.ichat-artifact-card__action:focus-visible {
    border-color: rgba(99, 102, 241, 0.5);
    color: #4338ca;
    background: rgba(238, 242, 255, 0.9);
    outline: none;
}

.dark .ichat-artifact-card {
    --artifact-border: rgba(129, 140, 248, 0.35);
    --artifact-surface: rgba(15, 23, 42, 0.78);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.24);
}
.dark .ichat-artifact-card__header { background: rgba(30, 41, 59, 0.48); }
.dark .ichat-artifact-card__icon { color: #a5b4fc; background: rgba(99, 102, 241, 0.18); }
.dark .ichat-artifact-card__title { color: #f1f5f9; }
.dark .ichat-artifact-card__meta,
.dark .ichat-artifact-card__empty { color: #94a3b8; }
.dark .ichat-artifact-card__preview { background: #0f172a; }
.dark .ichat-artifact-card__action { color: #cbd5e1; background: rgba(30, 41, 59, 0.72); }
.dark .ichat-artifact-card__action:hover,
.dark .ichat-artifact-card__action:focus-visible { color: #c7d2fe; background: rgba(49, 46, 129, 0.45); }

@media (max-width: 640px) {
    .ichat-artifact-card { margin: 0.75rem 0; border-radius: 0.85rem; }
    .ichat-artifact-card__preview { height: 12rem; }
    .ichat-artifact-card__code { max-height: 12rem; }
}

/* ===== Inline artifacts: rendered directly, no wrapper card ===== */
.ichat-artifact-inline {
    position: relative;
    margin: 0.85rem 0;
    /* Inline artifacts are cards: transparent body + a soft shadow so the card
       floats on the chat surface instead of sitting on an opaque slab. */
    border-radius: 1rem;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.08);
}
.dark .ichat-artifact-inline {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
}

/* A site/landing artifact is not embedded live: a transparent card shows a real
   rendered preview of the page plus always-visible open/download actions, so it
   blends into the chat instead of sitting on an opaque slab. */
.ichat-artifact-inline--page {
    border: none;
    background: transparent;
    padding: 0;
}

.dark .ichat-artifact-inline--page {
    background: transparent;
    border-color: transparent;
}

/* Rendered preview of a full page (landing). It keeps the page's own background
   and layout but is a non-interactive thumbnail so it cannot steal chat scroll. */
.ichat-artifact-inline__preview {
    position: relative;
    width: 100%;
    height: 22rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 0.9rem;
    background: #0b0b0f;
}

.ichat-artifact-inline__preview-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.ichat-artifact-inline__site-title {
    margin-top: 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.ichat-artifact-inline__site-note {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Inline 3D model card (model-viewer rendered directly on the chat surface).
   The owner wants the model itself in the chat: no card frame, no panel
   background, no title/hint — just the rotatable model and its colour swatches. */
.wnx-3d__stage {
    background: transparent;
}

.wnx-3d__actions {
    margin-top: 0.6rem;
}

/* A real, pretty download button (the owner asked for a button, not a text link). */
.wnx-3d__download {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(99, 102, 241, 0.6);
    border-radius: 0.7rem;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.6);
    transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.wnx-3d__download:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -8px rgba(79, 70, 229, 0.7);
    color: #fff;
}

.wnx-3d__download:active {
    transform: translateY(0);
}

.wnx-3d__download svg {
    flex: 0 0 auto;
}

.wnx-3d__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.wnx-3d__swatch {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    padding: 0;
    border: 2px solid rgba(148, 163, 184, 0.35);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wnx-3d__swatch[aria-pressed="true"] {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.28);
}

/* Inline read-only workflow graph — rendered by the shared wnx-workflow-cards
   renderer with the canonical Bot Admin node cards. It is drawn bare on the
   chat surface: no card frame, no panel background and no title/actions —
   just the nodes, their fields and their connections. The Drawflow-specific
   rules below are kept only for the legacy scoped instance; the DOM renderer
   styles live in the "Shared card renderer" section further down. */
.wnx-wf {
    position: relative;
    height: 900px;
    margin-top: 0.25rem;
    overflow: hidden;
    background: transparent;
}

@media (max-width: 640px) {
    .wnx-wf {
        height: 560px;
    }
}

.wnx-wf .parent-drawflow,
.wnx-wf .drawflow {
    height: 100%;
    background: transparent;
}

.wnx-wf__canvas {
    width: 100%;
    height: 100%;
}

.wnx-wf__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    font-size: 13px;
}

/* The chat graph must look EXACTLY like the WorkflowEditor inside Bot Admin —
   the same card, the same paddings, the same fields — the only difference being a
   30% smaller scale. Drawflow's stock stylesheet ships `.drawflow .drawflow-node`
   (cyan #0ff fill, black 2px border, yellow ports); adding `.drawflow`
   (specificity 0,3,0) wins and resets it to the canonical transparent wrapper the
   editor uses. `zoom: .7` scales the whole node, layout and edge anchors included. */
.wnx-wf .drawflow .drawflow-node {
    min-width: 340px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    zoom: 0.7;
}

.wnx-wf .drawflow .drawflow-node.selected {
    border: none;
    background: transparent;
}

/* Ports exactly as workflow-editor.css: a 24px hit area with a 12px dot. */
.wnx-wf .drawflow .drawflow-node .input,
.wnx-wf .drawflow .drawflow-node .output {
    position: relative;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.wnx-wf .drawflow .drawflow-node .input::after,
.wnx-wf .drawflow .drawflow-node .output::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent, #3b82f6);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
    border-radius: 50%;
    pointer-events: none;
}

.dark .wnx-wf .drawflow .drawflow-node .input::after,
.dark .wnx-wf .drawflow .drawflow-node .output::after {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px #1f2937;
}

.wnx-wf .drawflow .drawflow-node .inputs {
    left: 15px;
    align-items: flex-start;
    z-index: 10;
}

.wnx-wf .drawflow .drawflow-node .outputs {
    right: -7px;
    align-items: flex-end;
}

/* Verbatim copy of the editor's `.wf-card` rules (workflow-editor.css), scoped to
   the chat canvas so the card is identical to Bot Admin. */
.wnx-wf .drawflow .wf-card {
    pointer-events: auto;
    position: relative;
    overflow: visible;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    color: #111827;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .12), 0 4px 6px -4px rgba(15, 23, 42, .12);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.wnx-wf .drawflow .wf-card:hover {
    box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
    transform: translateY(-2px);
}

.dark .wnx-wf .drawflow .wf-card {
    border-color: #374151;
    background: #1f2937;
    color: #f9fafb;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .32);
}

.wnx-wf .drawflow .wf-card .title-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #f3f4f6;
}

.dark .wnx-wf .drawflow .wf-card .title-box {
    border-bottom-color: #374151;
}

.wnx-wf .drawflow .wf-card .config-panel {
    padding: 8px 0;
}

/* ---- Shared card renderer (wnx-workflow-cards.js) -------------------------
   One renderer draws the workflow graph, the decision card and the automation
   blueprint. The workflow graph itself is the canonical editor embedded in an
   isolated same-origin frame, so nodes, fields and connections are the editor's
   own; the decision card and the blueprint keep their DOM markup below. */
.wnx-wf__viewport {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The graph itself is the canonical editor, embedded as an isolated same-origin
   frame: real Drawflow nodes, fields, palette and zoom. No ids, no writes. */
.wnx-wf__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    background: #fff;
}

.wnx-wf__preview-note {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 12px;
    color: #94a3b8;
    font-size: 13px;
}

.wnx-wf__preview-note[hidden] {
    display: none;
}

.wnx-wf .wf-card {
    position: relative;
    overflow: visible;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    color: #111827;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .12), 0 4px 6px -4px rgba(15, 23, 42, .12);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.wnx-wf .wf-card:hover {
    box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
    transform: translateY(-2px);
}

.dark .wnx-wf .wf-card {
    border-color: #374151;
    background: #1f2937;
    color: #f9fafb;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .32);
}

.wnx-wf .wf-card .title-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #f3f4f6;
}

.dark .wnx-wf .wf-card .title-box {
    border-bottom-color: #374151;
}

.wnx-wf .wf-card .box {
    min-width: 0;
}

.wnx-wf .wf-node-subtitle {
    margin: 2px 0 0;
}

.wnx-wf .wf-node-desc {
    margin: 6px 0 2px;
    font-size: 12px;
    line-height: 1.4;
    color: #4b5563;
}

.dark .wnx-wf .wf-node-desc {
    color: #9ca3af;
}

.wnx-wf .wf-node-empty {
    margin: 8px 0 2px;
    font-size: 12px;
    font-style: italic;
    color: #9ca3af;
}

.wnx-wf .config-panel {
    padding: 8px 0 2px;
}

.wnx-wf .wf-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}

.wnx-wf .wf-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
}

.dark .wnx-wf .wf-label {
    color: #9ca3af;
}

.wnx-wf .wf-readonly {
    font-size: 12.5px;
    line-height: 1.35;
    color: #111827;
    word-break: break-word;
}

.dark .wnx-wf .wf-readonly {
    color: #f3f4f6;
}

.wnx-wf .wf-validation {
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 11.5px;
    line-height: 1.3;
}

.dark .wnx-wf .wf-validation {
    background: rgba(185, 28, 28, .18);
    color: #fca5a5;
}

.wnx-wf .wf-category-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #ffffff;
    background: #64748b;
    white-space: nowrap;
}

.wnx-wf .wf-chip--trigger { background: #16a34a; }
.wnx-wf .wf-chip--message { background: #4f46e5; }
.wnx-wf .wf-chip--input { background: #db2777; }
.wnx-wf .wf-chip--action { background: #0ea5e9; }
.wnx-wf .wf-chip--condition { background: #ca8a04; }

.wnx-wf .wf-status-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
}

.wnx-wf .wf-status-dot--error {
    background: #ef4444;
}

.wnx-wf .wf-ports {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wnx-wf .wf-ports--in { left: -7px; }
.wnx-wf .wf-ports--out { right: -7px; }

.wnx-wf .wf-port {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #ffffff;
}

.dark .wnx-wf .wf-port {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px #1f2937;
}

.wnx-wf .wf-copy {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease;
}

.wnx-wf .wf-card:hover .wf-copy {
    opacity: 1;
}

.wnx-wf__validation {
    position: relative;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
}

.wnx-wf__validation--ok {
    color: #15803d;
    background: #f0fdf4;
}

.dark .wnx-wf__validation--ok {
    color: #86efac;
    background: rgba(21, 128, 61, .16);
}

.wnx-wf__validation--error {
    color: #b91c1c;
    background: #fef2f2;
}

.dark .wnx-wf__validation--error {
    color: #fca5a5;
    background: rgba(185, 28, 28, .16);
}

.wnx-wf__validation-group + .wnx-wf__validation-group {
    margin-top: 6px;
}

.wnx-wf__validation ul {
    margin: 2px 0 0;
    padding-left: 16px;
}

/* Decision card ---------------------------------------------------------- */
.wnx-dc,
.wnx-bp {
    margin-top: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, .1);
    overflow: hidden;
}

.dark .wnx-dc,
.dark .wnx-bp {
    border-color: #334155;
    background: #1f2937;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .3);
}

.wnx-dc__head,
.wnx-bp__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
}

.dark .wnx-dc__head,
.dark .wnx-bp__head {
    border-bottom-color: #334155;
}

.wnx-dc__icon,
.wnx-bp__head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.wnx-dc__eyebrow,
.wnx-bp__eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8b5cf6;
}

.wnx-dc__title,
.wnx-bp__head-title {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.dark .wnx-dc__title,
.dark .wnx-bp__head-title {
    color: #f9fafb;
}

.wnx-dc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}

.wnx-dc__section h4 {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.dark .wnx-dc__section h4 {
    color: #9ca3af;
}

.wnx-dc__options,
.wnx-dc__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wnx-dc__option {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 6px;
}

.wnx-dc__option.is-chosen {
    border-color: #6366f1;
    background: rgba(99, 102, 241, .08);
}

.wnx-dc__option-label {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.dark .wnx-dc__option-label {
    color: #f3f4f6;
}

.wnx-dc__option-detail {
    font-size: 12px;
    color: #6b7280;
}

.wnx-dc__list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #374151;
}

.dark .wnx-dc__list li {
    color: #d1d5db;
}

.wnx-dc__list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #94a3b8;
}

.wnx-dc__list--risks li::before { background: #ef4444; }
.wnx-dc__list--actions li::before { background: #22c55e; }

.wnx-dc__chosen {
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(99, 102, 241, .1);
    font-size: 13px;
    font-weight: 600;
    color: #4338ca;
}

.dark .wnx-dc__chosen {
    color: #c7d2fe;
}

.wnx-dc__decision {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 600;
    color: #111827;
}

.dark .wnx-dc__decision {
    color: #f3f4f6;
}

/* Automation blueprint --------------------------------------------------- */
.wnx-bp__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}

/* Blueprint entries are flat list items: the outer .wnx-bp section is the only
   card surface in this block. The owner forbids a card inside the same kind of
   card, so .wnx-bp__card entries must not carry their own border, background
   or box-shadow — the grid gap and typography separate them. */

.wnx-bp__card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wnx-bp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

.wnx-bp__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
}

.dark .wnx-bp__title {
    color: #f9fafb;
}

.wnx-bp__schedule {
    font-size: 11px;
    color: #6b7280;
}

.wnx-bp__desc {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #4b5563;
}

.dark .wnx-bp__desc {
    color: #9ca3af;
}

.wnx-bp__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.wnx-bp__chip {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    color: #4338ca;
    background: rgba(99, 102, 241, .12);
}

.wnx-bp__empty {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
}

@media (max-width: 640px) {
    .wnx-wf {
        height: 520px;
    }

    .wnx-dc__grid,
    .wnx-bp__grid {
        grid-template-columns: 1fr;
    }
}

.ichat-artifact-inline__frame {
    display: block;
    width: 100%;
    height: auto;
    min-height: 4rem;
    /* No height limit and no inner scroll rail: the card is exactly as tall as its
       content (the resize bridge sets the height), so nothing is clipped. Keeping the
       card compact is the model's job — it gets this window's pixel budget in the prompt. */
    max-height: none;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

/* Owner case ICHAT-T400-033 (root review of 34a222059f, 2026-11-03): the
   open/copy/download strip lives in a dedicated RESERVED ROW ABOVE the card
   content — a normal in-flow flex row, so it can never overlay the chart,
   filters or any interactive widget and never gets clipped by bubble overflow.
   Owner case ICHAT-T400-480 (evidence review-visual-rest.json): the actions are
   hover/focus chrome in EVERY viewport. The old narrow-viewport exception
   (<=640px) painted three buttons permanently over an otherwise transparent
   banner, so the answer read as "banner + chrome" on a phone-width card. */
.ichat-artifact-inline__row {
    display: flex;
    justify-content: flex-end;
}

.ichat-artifact-inline__toolbar {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    opacity: 0;
    /* Hidden from the pointer but still in the tab order: hiding through the
       `visibility` property would drop the buttons out of keyboard reach, and a
       permanently hidden strip is how the toolbar became unreachable before.
       `:focus-within` on the card reveals it the moment a button (or the frame)
       takes focus, and a tap inside the frame focuses the card the same way. */
    pointer-events: none;
    transition: opacity 160ms ease;
}

.ichat-artifact-inline:hover .ichat-artifact-inline__toolbar,
.ichat-artifact-inline:focus-within .ichat-artifact-inline__toolbar {
    opacity: 1;
    pointer-events: auto;
}

.ichat-artifact-inline__action {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.6rem;
    color: #475569;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.12);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ichat-artifact-inline__action:hover,
.ichat-artifact-inline__action:focus-visible {
    border-color: rgba(99, 102, 241, 0.5);
    color: #4338ca;
    background: rgba(238, 242, 255, 0.95);
    outline: none;
}

.ichat-artifact-inline__action [data-artifact-action-label]:empty {
    display: none;
}

.ichat-artifact-inline__action [data-artifact-action-label] {
    margin-left: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Always-visible duplicate actions for a visual artifact (open as page / download).
   Transparent ghost style so they read as secondary buttons, not another toolbar. */
.ichat-artifact-inline__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* Explicit host-gesture fallback: the sandboxed frame cannot write the clipboard,
   so a trusted click in the host is the only place the browser may allow it. */
.ichat-artifact-inline__copy-host {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(99, 102, 241, 0.55);
    border-radius: 0.6rem;
    background: rgba(238, 242, 255, 0.95);
    color: #4338ca;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ichat-artifact-inline__copy-host:hover,
.ichat-artifact-inline__copy-host:focus-visible {
    border-color: rgba(99, 102, 241, 0.85);
    background: rgba(224, 231, 255, 0.95);
    outline: none;
}

.dark .ichat-artifact-inline__copy-host {
    border-color: rgba(129, 140, 248, 0.55);
    background: rgba(49, 46, 129, 0.5);
    color: #c7d2fe;
}

.ichat-artifact-inline__ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 0.6rem;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.ichat-artifact-inline__ghost:hover,
.ichat-artifact-inline__ghost:focus-visible {
    border-color: rgba(99, 102, 241, 0.6);
    color: #4338ca;
    outline: none;
}

.ichat-artifact-inline__code {
    max-height: 15rem;
    margin: 0;
    overflow: auto;
    padding: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    font: 0.72rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.ichat-artifact-inline__code--plain {
    background: rgba(248, 250, 252, 0.92);
    color: #334155;
    border-color: rgba(148, 163, 184, 0.28);
}

.ichat-artifact-inline__empty,
.ichat-artifact-inline__hint {
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.45;
}

.ichat-artifact-inline__empty {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 0.9rem;
}

.ichat-artifact-inline__hint {
    margin-top: 0.55rem;
    color: #b45309;
}

.dark .ichat-artifact-inline__action {
    color: #cbd5e1;
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(148, 163, 184, 0.25);
}

.dark .ichat-artifact-inline__action:hover,
.dark .ichat-artifact-inline__action:focus-visible {
    color: #c7d2fe;
    background: rgba(49, 46, 129, 0.5);
}

.dark .ichat-artifact-inline__code--plain {
    background: rgba(15, 23, 42, 0.7);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.2);
}

.dark .ichat-artifact-inline__empty {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .ichat-artifact-inline__code {
        max-height: 12rem;
    }
}

.table-export-btn:hover {
    background: rgba(99, 102, 241, 0.1);
}

.dark .table-export-btn {
    color: #a5b4fc;
}

.dark .table-export-btn:hover {
    background: rgba(99, 102, 241, 0.2);
}

/* GPTun media result cards */
.media-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.dark .media-action-btn {
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.9);
}

.media-action-btn:hover { border-color: rgba(59, 130, 246, 0.72); }
.media-action-btn--blue:hover { border-color: rgba(37, 99, 235, 0.78); }
.media-action-btn--emerald { background: #059669; color: #fff; border-color: #047857; }
.media-action-btn--emerald:hover { background: #047857; border-color: #065f46; }
.media-action-btn--amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.media-action-btn--rose:hover { border-color: rgba(225, 29, 72, 0.72); }
.media-action-btn--violet:hover { border-color: rgba(124, 58, 237, 0.72); }

/* Owner case 437 follow-up (2026-11-08): the GPTun YouTube connect action is a
   compact, left-aligned YouTube-brand pill, not the full-width file action.
   The dark rules repeat the brand colours because `.dark .media-action-btn`
   is more specific than a single tone modifier. */
.media-action-btn--youtube,
.dark .media-action-btn--youtube { background: #ff0000; color: #fff; border-color: #cc0000; }
.media-action-btn--youtube:hover,
.dark .media-action-btn--youtube:hover { background: #cc0000; border-color: #990000; }
.media-result-youtube-connect .media-action-btn--youtube {
    justify-content: flex-start;
    min-height: 1.75rem;
    padding: 0.25rem 0.625rem;
}

/* Владелец (A/B eval ICHAT-T400-015): скачивание — главное действие карточки файла,
   поэтому кнопка «Скачать» тянется на всю ширину карточки отдельной строкой. */
.media-actions-fullwidth { display: flex; width: 100%; }
.media-actions-fullwidth .media-action-btn {
    flex: 1 1 auto;
    width: 100%;
    min-height: 2.5rem;
}

/* Карточка файла: отступ между шапкой и кнопкой «Скачать» вдвое меньше прежнего
   (нижний padding шапки 20 px → 10 px). */
.aichat-media-card .aichat-file-card__head.aichat-file-card__head { padding-bottom: 0.625rem; }

/* Inline SVG-иконка файла в стиле проводника Windows (замена эмодзи). */
.ichat-file-icon { display: block; filter: drop-shadow(0 1px 2px rgb(15 23 42 / 18%)); }
.dark .ichat-file-icon { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 45%)); }

/* Кнопка-глаз «Предпросмотр» рядом с именем PDF-файла (WNX-EVAL-ARTIFACT-UI-FINAL-20261031).
   Каркас — утилиты Tailwind (h-7 w-7 rounded-lg …), здесь только визуальный отклик и вертикальное выравнивание. */
.ichat-file-preview-btn { align-self: center; }
.ichat-file-preview-btn:hover,
.ichat-file-preview-btn:focus-visible { color: #0f172a; border-color: rgba(100, 116, 139, 0.75); background: #f1f5f9; }
.ichat-file-preview-btn:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.55); outline-offset: 1px; }
.dark .ichat-file-preview-btn:hover,
.dark .ichat-file-preview-btn:focus-visible { color: #f1f5f9; border-color: rgba(148, 163, 184, 0.8); background: rgb(51 65 85 / 0.85); }

.media-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.media-icon-btn:hover {
    border-color: rgba(37, 99, 235, 0.72);
    transform: translateY(-1px);
}

.media-icon-btn--amber {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.aichat-media-card {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    /* Cards float transparent on the chat surface (owner requirement). */
    background: transparent;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.dark .aichat-media-card {
    border-color: rgba(71, 85, 105, 0.72);
    background: transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

/* A full HTML site/landing is a self-contained document: unlike the transparent
   inline widget cards it keeps an opaque surface. */
.aichat-media-card--site {
    background: rgba(255, 255, 255, 0.94);
}

.dark .aichat-media-card--site {
    background: rgba(15, 23, 42, 0.9);
}


.aichat-media-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.45rem;
}

.aichat-media-card__title {
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .aichat-media-card__title {
    color: #f8fafc;
}

.aichat-media-card__meta {
    color: #64748b;
    font-size: 0.75rem;
}

.dark .aichat-media-card__meta {
    color: #94a3b8;
}

.aichat-media-card__body {
    background: transparent;
}

.dark .aichat-media-card__body {
    background: transparent;
}

.aichat-media-card__actions,
.aichat-media-card__action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.aichat-media-card__status {
    border-color: rgba(148, 163, 184, 0.24);
}

.aichat-media-card--pending {
    border-style: dashed;
}

.aichat-media-card--error {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(254, 242, 242, 0.92);
}

.dark .aichat-media-card--error {
    border-color: rgba(248, 113, 113, 0.46);
    background: rgba(127, 29, 29, 0.24);
}

.media-result-shell {
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: transparent;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.dark .media-result-shell {
    background: transparent;
    border-color: rgba(71, 85, 105, 0.7);
}

.media-result-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.45rem;
}

.media-result-shell__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .media-result-shell__title {
    color: #f8fafc;
}

.media-result-shell__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #64748b;
}

.media-result-shell__dot--amber { background: #d97706; }
.media-result-shell__dot--emerald { background: #059669; }
.media-result-shell__dot--rose { background: #e11d48; }
.media-result-shell__dot--violet { background: #7c3aed; }

.media-result-shell__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.media-result-shell__meta {
    padding: 0 1rem 0.75rem;
    color: #64748b;
    font-size: 0.75rem;
}

.dark .media-result-shell__meta {
    color: #94a3b8;
}

.media-result-shell--amber,
.media-result-shell--emerald,
.media-result-shell--rose,
.media-result-shell--violet {
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(248, 250, 252, 0.92);
}

.dark .media-result-shell--amber,
.dark .media-result-shell--emerald,
.dark .media-result-shell--rose,
.dark .media-result-shell--violet {
    border-color: rgba(71, 85, 105, 0.7);
    background: rgba(15, 23, 42, 0.72);
}

.media-image-stage {
    position: relative;
    /* Owner (case 480): a transparent cutout is shown as-is; the stage must not
       paint a slab behind it or the transparency reads as a light background. */
    background: transparent;
}

.media-image-stage .image-card-result {
    cursor: zoom-in;
}

/* Open Design screenshot card: bounded capture, visible actions, no generation panel. */
.media-result-image--light {
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgb(140 152 164 / 20%);
}
/* Owner (case 029, 2026-11-10): a delivered picture opened taller than the screen.
   A generated or edited result was capped at a fixed 24rem and a plain result had
   the picture grow to its natural height, so a portrait photo (1280×1699 in the
   case) was clipped in one card and scrolled inside a 70vh box in the other. Both
   cards carry the same stage now, so the picture is bounded by the viewport
   wherever it lands: at most ~80% of the visible height, always under the 90vh
   ceiling, with its own aspect ratio kept (width auto, max-width 100%,
   object-fit contain). The stage hugs the picture and is centred, so a portrait
   frame is not wrapped in a blank slab and the hover buttons keep their corner.
   Only the on-card copy is scaled: the download link and the fullscreen
   «Увеличить» preview keep the source resolution and the whole viewport box. */
.media-result-image .media-image-stage {
    max-height: 80vh;
    max-height: 80dvh;
}

/* Only a stage that actually holds the picture hugs it — an empty pending stage
   keeps its full width so the progress line stays visible. */
.media-result-image .media-image-stage:has(> .image-card-result) {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.media-result-image .media-image-stage > .image-card-result {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    max-height: 80dvh;
    height: auto;
    object-fit: contain;
}
.media-result-image--light :is(.media-hover-actions) {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.media-image-overlay {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: flex;
    gap: 0.35rem;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.media-image-stage:hover .media-image-overlay,
.media-image-stage:focus-within .media-image-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Owner (2026-10-19): the image card opens with the picture itself. The top
   corners are rounded on the picture, the bottom corners on the card — one
   continuous silhouette, no double rounding. The footer is one compact row:
   a wide «Генерировать» button on the left, the Premium checkbox and the
   real price on the right. */
.media-result-image .image-card-result {
    border-radius: 0.75rem 0.75rem 0 0;
}

.media-result-image {
    border-radius: 0.75rem;
}

/* Owner (A/B eval 2026-11-01): several images generated in one answer used to
   stack in a column; they form one horizontal row instead. The row scrolls
   sideways when it cannot fit, each card keeps its own footer controls. */
.media-image-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;
}

.media-image-row > .media-result-image {
    flex: 0 0 clamp(13rem, 42%, 22rem);
    min-width: 13rem;
    margin-top: 0 !important;
    scroll-snap-align: start;
}

@media (max-width: 640px) {
    .media-image-row > .media-result-image {
        flex-basis: 78%;
        min-width: 78%;
    }
}

/* Owner (A/B eval 2026-11-01, verdict id 34): a clip rendered by the HyperFrames
   worker has no parameter panel under the frame, so the frame owns both the top
   and the bottom corners and gets a slightly wider viewing area. */
.media-result-video--worker {
    width: min(100%, 46rem);
    border-radius: 0.9rem;
}

.media-result-video--worker .media-image-stage {
    border-radius: 0.9rem;
    overflow: hidden;
}

.media-result-video--worker .media-video-frame {
    max-height: 32rem;
    border-radius: 0.9rem;
}

.media-result-video,
.media-result-3d {
    border-radius: 0.75rem;
    overflow: hidden;
}

.media-result-video .media-image-stage:not(:last-child),
.media-result-3d .media-image-stage:not(:last-child) {
    border-radius: 0.75rem 0.75rem 0 0;
}

.aichat-media-card--video .image-card-price,
.aichat-media-card--3d .image-card-price {
    min-width: max-content;
    text-align: right;
}

.image-card-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.image-card-params {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.image-card-params__price {
    margin-left: auto;
    text-align: right;
    line-height: 1.25;
}

.image-card-params__price-formula {
    display: block;
    font-size: 0.625rem;
    color: #64748b;
    white-space: nowrap;
}

.image-card-params__price-value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.dark .image-card-params__price-formula {
    color: #94a3b8;
}

.dark .image-card-params__price-value {
    color: #e5e7eb;
}

.image-card-param {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
    padding: 0 0.5rem 0 0.625rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.image-card-param__label {
    font-size: 0.6875rem;
    color: #64748b;
    white-space: nowrap;
}

.image-card-param__select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1d4ed8;
    cursor: pointer;
    padding-right: 0.875rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0l4 6 4-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}

.image-card-param__select:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
    border-radius: 999px;
}

.dark .image-card-param {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(71, 85, 105, 0.85);
}

.dark .image-card-param__label {
    color: #94a3b8;
}

.dark .image-card-param__select {
    color: #93c5fd;
}

/* Владелец (2026-11-03): «Генерировать» is a fixed-width button; the price sits
   flush right. One flex row for image, video and 3d cards alike. */
.image-card-actions .media-action-btn {
    flex: 0 0 auto;
    width: 10.5rem;
    min-width: 0;
    justify-content: center;
    min-height: 2.375rem;
}

.image-tier-premium-label {
    cursor: pointer;
    white-space: nowrap;
}

.image-params-panel {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));
}

.dark .image-params-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82));
}

.aichat-media-card--image,
.aichat-media-card--video,
.aichat-media-card--3d {
    --media-accent: #1f5fd0;
    --media-accent-soft: rgba(31, 95, 208, 0.12);
    --media-track: #eaeef3;
    --media-border: rgba(148, 163, 184, 0.4);
    --media-scrim: rgba(5, 8, 12, 0.58);
    --media-gap: 12px;
    border-radius: 0.75rem;
}

.dark .aichat-media-card--image,
.dark .aichat-media-card--video,
.dark .aichat-media-card--3d {
    --media-accent: #4d86e6;
    --media-accent-soft: rgba(77, 134, 230, 0.18);
    --media-track: #1f262e;
    --media-border: rgba(71, 85, 105, 0.85);
}

.aichat-media-card--image .image-params-panel,
.aichat-media-card--video .image-params-panel,
.aichat-media-card--3d .image-params-panel {
    display: flex;
    flex-direction: column;
    gap: var(--media-gap);
    padding: var(--media-gap) 0.875rem 0.875rem;
    border-top: 1px solid var(--media-border);
}

.media-hover-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.625rem;
    background: linear-gradient(to bottom, var(--media-scrim), transparent 60%);
    opacity: 0;
    visibility: hidden;
    /* Owner 2026-11-02: the overlay is a full-bleed scrim over the media stage.
       It must never swallow pointer events — otherwise it covers the native
       <video controls> play button and the image lightbox click. The action
       buttons keep pointer-events: auto on themselves (see .media-hover-btn). */
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

.media-image-stage:hover .media-hover-actions,
.media-image-stage:focus-within .media-hover-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.media-hover-btn {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.5625rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(10, 14, 20, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.media-hover-btn svg { width: 1.0625rem; height: 1.0625rem; display: block; }

.media-hover-btn:hover,
.media-hover-btn:focus-visible {
    background: var(--media-accent);
    border-color: rgba(255, 255, 255, 0.45);
}

.media-hover-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Владелец (2026-11-06, кейс 485): у видео действия живут под плеером, а не поверх него,
   поэтому кнопки «Скачать»/«Открыть» не закрывают кнопку play и полосу перемотки. */
.media-video-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.625rem;
}

.media-video-actions .media-hover-btn {
    width: auto;
    height: 2rem;
    gap: 0.375rem;
    padding: 0 0.625rem;
    border: 1px solid var(--media-border);
    background: var(--ic-surface-alt, #f5f6fb);
    color: var(--ic-text, #1f2540);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.media-video-actions .media-hover-btn svg { width: 0.9375rem; height: 0.9375rem; }

.media-video-actions .media-hover-btn:hover,
.media-video-actions .media-hover-btn:focus-visible {
    background: var(--ic-surface, #fff);
    border-color: var(--media-border-strong, #cfd5ea);
    color: var(--ic-text, #1f2540);
}

/* Owner (case 446): the delivered screenshot card carries the Open Design action row —
   a ghost «Открыть» over the same safe preview and an accent «Скачать». Scoped to
   [data-screenshot-card] so video/3D rows and the generation panel keep their own
   controls; both buttons stay 44px touch targets. */
[data-screenshot-card] .aichat-screenshot-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.625rem;
}

[data-screenshot-card] .aichat-screenshot-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    -webkit-user-select: none;
    user-select: none;
}

[data-screenshot-card] .aichat-screenshot-card__btn svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}

[data-screenshot-card] .aichat-screenshot-card__btn-label {
    white-space: nowrap;
}

[data-screenshot-card] .aichat-screenshot-card__btn:focus-visible {
    outline: 2px solid #0969da;
    outline-offset: 2px;
}

[data-screenshot-card] .aichat-screenshot-card__btn--primary {
    background: var(--media-accent, #1f5fd0);
    border-color: var(--media-accent, #1f5fd0);
    color: #fff;
}

[data-screenshot-card] .aichat-screenshot-card__btn--primary:hover,
[data-screenshot-card] .aichat-screenshot-card__btn--primary:focus-visible {
    background: #1a52b8;
    border-color: #1a52b8;
}

[data-screenshot-card] .aichat-screenshot-card__btn--ghost {
    background: transparent;
    border-color: var(--media-border, rgba(148, 163, 184, 0.4));
    color: #1f2328;
}

[data-screenshot-card] .aichat-screenshot-card__btn--ghost:hover,
[data-screenshot-card] .aichat-screenshot-card__btn--ghost:focus-visible {
    background: rgba(140, 152, 164, 0.16);
}

.dark [data-screenshot-card] .aichat-screenshot-card__btn--primary:hover,
.dark [data-screenshot-card] .aichat-screenshot-card__btn--primary:focus-visible {
    background: #6b9df2;
    border-color: #6b9df2;
}

.dark [data-screenshot-card] .aichat-screenshot-card__btn--ghost {
    color: #e6edf3;
    border-color: rgba(240, 246, 252, 0.12);
}

.dark [data-screenshot-card] .aichat-screenshot-card__btn--ghost:hover,
.dark [data-screenshot-card] .aichat-screenshot-card__btn--ghost:focus-visible {
    background: rgba(110, 118, 129, 0.3);
}

.dark [data-screenshot-card] .aichat-screenshot-card__btn:focus-visible {
    outline-color: #2f81f7;
}

/* Narrow card: the primary download takes the row, the ghost keeps a square 44px target. */
@media (max-width: 640px) {
    [data-screenshot-card] .aichat-screenshot-card__btn--primary {
        flex: 1;
    }

    [data-screenshot-card] .aichat-screenshot-card__btn--ghost {
        width: 2.75rem;
        padding: 0;
    }

    [data-screenshot-card] .aichat-screenshot-card__btn--ghost .aichat-screenshot-card__btn-label {
        display: none;
    }
}

/* Touch devices have no hover: keep the download/open actions reachable.
   The scrim still ignores pointer events, so the native video controls and the
   image lightbox stay tappable. */
@media (hover: none) {
    .media-image-stage .media-hover-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: none;
    }
}

.media-card-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.media-card-progress i {
    display: block;
    height: 100%;
    width: var(--media-progress, 0%);
    border-radius: 0 0.25rem 0.25rem 0;
    background: linear-gradient(to right, var(--media-accent), #6ea8ff);
    transition: width 0.3s ease;
}

.aichat-media-card.is-generating .media-card-progress { opacity: 1; }

.media-card-progress--indeterminate i { animation: mediaCardIndeterminate 1.2s ease-in-out infinite; }

@keyframes mediaCardIndeterminate {
    0% { width: 8%; }
    50% { width: 18%; }
    100% { width: 8%; }
}

@media (prefers-reduced-motion: reduce) {
    .media-card-progress--indeterminate i { animation: none; }
}

.image-card-tier {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.media-tier-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 1.625rem;
    background: transparent;
    cursor: pointer;
}

/* Owner 2026-11-03: vertical only — Chrome's UA `input[type=range]` margin
   would be symmetric and re-break the endpoint alignment below. */
input[type="range"].media-tier-slider {
    margin: 0;
}

.media-tier-slider::-webkit-slider-runnable-track {
    height: 0.375rem;
    border-radius: 999px;
    border: 1px solid var(--media-border);
    background: linear-gradient(to right,
        var(--media-accent) 0%,
        var(--media-accent) calc(var(--media-tier-pos, 0) * 100%),
        var(--media-track) calc(var(--media-tier-pos, 0) * 100%));
}

.media-tier-slider::-moz-range-track {
    height: 0.375rem;
    border-radius: 999px;
    border: 1px solid var(--media-border);
    background: linear-gradient(to right,
        var(--media-accent) 0%,
        var(--media-accent) calc(var(--media-tier-pos, 0) * 100%),
        var(--media-track) calc(var(--media-tier-pos, 0) * 100%));
}

.media-tier-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    margin-top: -0.375rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--media-accent);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}

.media-tier-slider::-moz-range-thumb {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--media-accent);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}

.media-tier-slider:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 2px; }

/* Владелец 2026-10-31: у картинок и видео два тира - тумблер «Стандарт <-> Про». */
.media-tier--pro {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.media-tier--pro .media-tier-slider--pro {
    flex: 1 1 auto;
}

/* Owner (case 184): the two published image variants are one real checkbox
   «Стандарт ⇄ Про». The range keeps the numeric tier value the price,
   reference limit and request builder read, but it is never shown. */
.media-tier-slider--hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.media-tier-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
}

.media-tier-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.media-tier-toggle__track {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 2.125rem;
    height: 1.125rem;
    border-radius: 999px;
    border: 1px solid var(--media-border);
    background: var(--media-track);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.media-tier-toggle__knob {
    position: absolute;
    left: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.15s ease;
}

.media-tier-toggle__input:checked + .media-tier-toggle__track {
    background: #7c3aed;
    border-color: #7c3aed;
}

.media-tier-toggle__input:checked + .media-tier-toggle__track .media-tier-toggle__knob {
    transform: translateX(1rem);
}

.media-tier-toggle__input:focus-visible + .media-tier-toggle__track {
    outline: 2px solid var(--media-accent);
    outline-offset: 2px;
}

.media-tier__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.media-tier__label.is-active { color: #475569; }

.media-tier__label--pro {
    display: inline-flex;
    align-items: center;
    color: #a78bfa;
}

.media-tier__label--pro.is-active {
    color: #7c3aed;
    text-shadow: 0 0 12px rgba(124, 58, 237, 0.25);
}

.media-tier--pro .media-tier-slider--pro::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
        #cbd5e1 0%,
        #cbd5e1 calc(var(--media-tier-pos, 0) * 100%),
        #ede9fe calc(var(--media-tier-pos, 0) * 100%),
        #ede9fe 100%);
}

.media-tier--pro.is-pro .media-tier-slider--pro::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
        var(--media-accent) 0%,
        var(--media-accent) calc(var(--media-tier-pos, 0) * 100%),
        #ede9fe calc(var(--media-tier-pos, 0) * 100%),
        #ede9fe 100%);
}

.media-tier--pro .media-tier-slider--pro::-moz-range-track {
    background: linear-gradient(to right,
        #cbd5e1 0%,
        #cbd5e1 calc(var(--media-tier-pos, 0) * 100%),
        #ede9fe calc(var(--media-tier-pos, 0) * 100%),
        #ede9fe 100%);
}

.dark .media-tier__label { color: #64748b; }
.dark .media-tier__label.is-active { color: #e2e8f0; }
.dark .media-tier--pro .media-tier-slider--pro::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
        #475569 0%,
        #475569 calc(var(--media-tier-pos, 0) * 100%),
        #2e1065 calc(var(--media-tier-pos, 0) * 100%),
        #2e1065 100%);
}

.media-tier__scale,
.media-tier-scale,
.image-card-tier__scale {
    display: grid;
    grid-auto-flow: column;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: #64748b;
}

.media-tier__scale span,
.image-card-tier__scale span { text-align: center; }

.dark .media-tier__scale,
.dark .image-card-tier__scale { color: #94a3b8; }

.image-card-tier__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: #475569;
}

.dark .image-card-tier__meta { color: #cbd5e1; }

.image-card-tier__mute { display: inline-flex; color: #64748b; }
.image-card-tier__mute svg { width: 0.875rem; height: 0.875rem; display: block; }
.image-card-tier__mute[hidden] { display: none; }

.media-format-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.media-format-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 3.5rem;
    cursor: pointer;
}

.media-format-tile__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.media-format-tile__box {
    width: 100%;
    aspect-ratio: var(--media-tile-ar, 16 / 9);
    max-height: 2.5rem;
    border-radius: 0.5625rem;
    border: 1px solid var(--media-border);
    background: rgba(148, 163, 184, 0.12);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.media-format-tile__cap {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.media-format-tile__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.25rem);
    transform: translateX(-50%);
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    background: rgba(15, 23, 42, 0.92);
    color: #e2e8f0;
    font-size: 0.625rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.media-format-tile:hover .media-format-tile__tip,
.media-format-tile__input:focus-visible ~ .media-format-tile__tip {
    opacity: 1;
}

.media-format-tile__input:checked + .media-format-tile__box {
    border-color: var(--media-accent);
    background: var(--media-accent-soft);
    box-shadow: inset 0 0 0 1px var(--media-accent);
}

.media-format-tile__input:checked ~ .media-format-tile__cap { color: var(--media-accent); }

.media-format-tile__input:focus-visible + .media-format-tile__box {
    outline: 2px solid var(--media-accent);
    outline-offset: 2px;
}

.dark .media-format-tile__cap { color: #cbd5e1; }

.media-duration {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.media-duration__ticks {
    display: grid;
    grid-auto-flow: column;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.media-duration__ticks span { text-align: center; }
.media-duration__ticks span.is-active { color: var(--media-accent); font-weight: 600; }
.dark .media-duration__ticks { color: #94a3b8; }

.image-card-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--media-border);
    border-radius: 0.625rem;
    background: var(--media-accent-soft);
    font-size: 0.75rem;
}

.image-card-confirm.hidden { display: none; }

.image-card-confirm__text { flex: 1 1 100%; color: #334155; }
.dark .image-card-confirm__text { color: #cbd5e1; }

.image-card-price {
    margin-left: auto;
    text-align: right;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Delivered-file facts (measured size + format), directly under the result image. */
.image-card-facts {
    margin: 0;
    padding: 0.25rem 0.75rem 0;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.dark .image-card-facts { color: #94a3b8; }

.dark .image-card-price__label { color: #94a3b8; }

.image-card-price__formula {
    display: block;
    font-size: 0.625rem;
    color: #64748b;
    white-space: nowrap;
}

.image-card-price__value {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.image-card-price__formula:empty,
.image-card-price__value:empty { display: none; }

.dark .image-card-price__formula { color: #94a3b8; }
.dark .image-card-price__value { color: #e5e7eb; }

.media-tier-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%);
    cursor: pointer;
}

.media-tier-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #334155;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.media-tier-range::-moz-range-thumb {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #334155;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.media-resolution-chip {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(148, 163, 184, 0.4);
    color: #475569;
    cursor: pointer;
}

.media-resolution-chip--active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.38);
    color: #1d4ed8;
}

.dark .media-resolution-chip {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(71, 85, 105, 0.85);
    color: #cbd5e1;
}

.dark .media-resolution-chip--active {
    background: rgba(59, 130, 246, 0.24);
    border-color: rgba(96, 165, 250, 0.55);
    color: #bfdbfe;
}

.media-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.24);
}

.media-card-warning {
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 0.75rem;
    background: rgba(255, 251, 235, 0.85);
    color: #92400e;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
}

.dark .media-card-warning {
    background: rgba(120, 53, 15, 0.18);
    color: #fcd34d;
}

.media-audio-player {
    display: block;
    min-width: min(100%, 16rem);
    min-height: 2.5rem;
}

.ichat-audio-player {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    /* The card wrapper (.aichat-media-card) owns the border/surface; the player
       itself stays transparent so there is no card inside a card
       (owner, A/B eval 2026-10-26). On the light chat surface that surface is
       white, per the owner's "фон карточки белый" note. */
    background: transparent;
    border: none;
}

.ichat-audio-player__cover {
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.6rem;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark .ichat-audio-player__cover {
    background: rgba(15, 23, 42, 0.5);
}

.ichat-audio-player__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ichat-audio-player__play {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ichat-audio-player__play:hover {
    transform: scale(1.05);
}

.ichat-audio-player__play:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

.ichat-audio-player__icon {
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: -0.1em;
}

.ichat-audio-player__meta {
    flex: 1 1 auto;
    min-width: 0;
}

.ichat-audio-player__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .ichat-audio-player__title {
    color: #f8fafc;
}

.ichat-audio-player__times {
    display: flex;
    /* Elapsed on the left end, total on the right end of the rail — not both
       centred under it (owner wish on eval case ICHAT-T400-486, 2026-11-04). */
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.6875rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.dark .ichat-audio-player__times {
    color: #94a3b8;
}

.ichat-audio-player__track {
    margin-top: 0.35rem;
    height: 0.3rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.32);
    cursor: pointer;
    overflow: hidden;
}

.dark .ichat-audio-player__track {
    background: rgba(71, 85, 105, 0.6);
}

.ichat-audio-player__track:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
}

.ichat-audio-player__fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    transition: width 0.1s linear;
}

.ichat-audio-player__el {
    display: none;
}

.ichat-audio-player.is-error .ichat-audio-player__play {
    background: rgba(148, 163, 184, 0.6);
    box-shadow: none;
    cursor: not-allowed;
}

.ichat-audio-player__error {
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    color: #dc2626;
}

.dark .ichat-audio-player__error {
    color: #f87171;
}

/* Hover-revealed download button, same visual language as the video card's
   .media-hover-btn (owner, A/B eval 2026-10-26). */
.ichat-audio-player__download {
    flex: 0 0 2.125rem;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.5625rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.9);
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, visibility 0.16s ease, background-color 0.15s ease;
}

.ichat-audio-player:hover .ichat-audio-player__download,
.ichat-audio-player:focus-within .ichat-audio-player__download {
    opacity: 1;
    visibility: visible;
}

.ichat-audio-player__download:hover {
    background: #1f5fd0;
    border-color: #1f5fd0;
    color: #fff;
}

.ichat-audio-player__download svg {
    width: 1.0625rem;
    height: 1.0625rem;
    display: block;
}

/* ── Vocal split card ──────────────────────────────────── */
.vocal-track {
    border-radius: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(139,92,246,0.2);
}
.dark .vocal-track {
    background: rgba(0,0,0,0.25);
    border-color: rgba(139,92,246,0.3);
}
.vocal-track--empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.55;
    padding: 0.5rem 0.75rem;
}
.vocal-track__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.vocal-track__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.vocal-track__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5b21b6;
}
.dark .vocal-track__label {
    color: #c4b5fd;
}
.vocal-track__unavail {
    font-size: 0.75rem;
    color: #9ca3af;
}

.media-video-frame {
    width: 100%;
    aspect-ratio: var(--media-aspect-ratio, 16 / 9);
    min-height: 11rem;
    max-height: 26rem;
    border-radius: 0.75rem 0.75rem 0 0;
    overflow: hidden;
    background: #020617;
}

.media-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Owner case 487 (2026-11-07): a GIF media result is a picture, not a player.
   It fills the same frame with the file's own proportions and is never cropped. */
.media-video-frame--gif img,
.media-video-gif {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-prompt-editor,
.media-input,
.media-select {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.dark .image-prompt-editor,
.dark .media-input,
.dark .media-select {
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    border-color: rgba(71, 85, 105, 0.9);
}

/* Owner (native eval 2026-11-08, case 435): a card prompt grows with its wrapped text up
   to 20 lines, then scrolls instead of hiding the rest. The exact height is measured in
   chat-app-lifecycle.js from the computed line-height; this rule is the pre-hydration
   ceiling so the very first paint never overflows the card. */
.image-prompt-editor {
    max-height: calc(20 * 1.4em + 1.0625rem);
    overflow-y: auto;
}

.media-field-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: min(100%, 12rem);
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
}

.dark .media-field-label { color: #cbd5e1; }

/* -- Reference chips: attach/remove media references on generation cards -- */
.media-ref-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.media-ref-row__hint {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
}

.dark .media-ref-row__hint { color: #94a3b8; }

.media-ref-row__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.media-ref-chip {
    position: relative;
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
}

.media-ref-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
}

.media-ref-chip__remove {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 9999px;
    border: none;
    background: rgba(15, 23, 42, 0.78);
    color: #e2e8f0;
    font-size: 0.625rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.media-ref-chip__remove:hover { background: rgba(190, 24, 93, 0.9); }

/* Kept beyond the active tier's limit: visible as a dimmed pick, not sent. */
.media-ref-chip.is-over-limit { opacity: 0.35; }

.media-ref-add {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px dashed rgba(148, 163, 184, 0.6);
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.media-ref-add:hover,
.media-ref-add:focus-visible {
    border-color: var(--media-accent, #8b5cf6);
    color: var(--media-accent, #8b5cf6);
}

.media-ref-add.hidden,
.media-ref-add[hidden] { display: none; }

.dark .media-ref-add { color: #cbd5e1; }

/* -- Prompt composer (owner 2026-11-03, variant A): the prompt editor block
   owns the reference strip and the format silhouettes on one bottom line.
   Refs sit left (40px thumbs, quiet ×, "+" tile as the only add affordance —
   no label text), formats sit right as aspect-ratio silhouettes with the
   resolution revealed only in a hover/focus tooltip. Light theme only. -- */
.prompt-composer {
    min-width: 0;
    border-radius: 0.625rem;
    background: #f8fafc;
}

.prompt-composer:focus-within { background: #f1f5f9; }

.prompt-composer .image-prompt-editor {
    display: block;
    min-height: 3rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    /* Height is owned by the autosize pass, so a manual drag would be overwritten on the
       next keystroke; the 20-line cap lives in the shared rule above. */
    resize: none;
}

.prompt-composer .image-prompt-editor:focus { outline: none; }

.prompt-composer .image-prompt-editor:focus-visible {
    outline: 2px solid var(--media-accent);
    outline-offset: -2px;
}

.composer-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* Owner (case 184): the format tiles sit at the right edge of the strip even
       when no reference chips are attached; refs take the free space on the left. */
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0 0.5rem 0.5rem;
    min-width: 0;
}

.composer-strip .composer-refs {
    margin-right: auto;
}

.composer-refs {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    flex: 0 1 auto;
}

.composer-refs .media-ref-row__chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    overflow-x: auto;
    padding: 0.125rem;
    scrollbar-width: thin;
}

.composer-refs .media-ref-chip {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
}

.composer-refs .media-ref-chip img {
    border: 0;
    border-radius: 0.4375rem;
}

.composer-refs .media-ref-chip__remove {
    top: -0.1875rem;
    right: -0.1875rem;
    width: 1rem;
    height: 1rem;
    background: #fff;
    color: #475569;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.composer-refs .media-ref-chip__remove:hover {
    background: rgba(190, 24, 93, 0.9);
    border-color: transparent;
    color: #fff;
}

.composer-refs .media-ref-add {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border: 0;
    border-radius: 0.4375rem;
    background: var(--media-track);
    color: #64748b;
    font-size: 1.25rem;
}

.composer-refs .media-ref-add:hover,
.composer-refs .media-ref-add:focus-visible {
    background: var(--media-accent-soft);
    color: var(--media-accent);
}

/* Read-only source thumbs (payloads whose catalog has no reference control):
   same 40px thumb treatment inside the composer strip. */
.composer-strip .image-reference-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
}

.composer-strip .image-reference-thumb {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0.4375rem;
    overflow: hidden;
}

.composer-strip .image-reference-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.composer-strip .image-reference-thumb span { display: none; }

.composer-formats {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1875rem;
    margin-left: auto;
    flex: 0 0 auto;
}

.composer-formats .media-format-tile {
    width: 1.75rem;
    height: 2.5rem;
    justify-content: center;
}

.composer-formats .media-format-tile__box {
    width: 1.5rem;
    max-height: none;
    border-radius: 0.1875rem;
}

.composer-formats .ratio-9-16 .media-format-tile__box { width: 1rem; }
.composer-formats .ratio-3-4 .media-format-tile__box { width: 1.25rem; }

.composer-formats .media-format-tile__tip {
    left: auto;
    right: 0;
    transform: none;
    z-index: 5;
    visibility: hidden;
}

.composer-formats .media-format-tile:hover .media-format-tile__tip,
.composer-formats .media-format-tile__input:focus-visible ~ .media-format-tile__tip {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 520px) {
    .composer-formats { gap: 0.0625rem; }
    .composer-formats .media-format-tile { width: 1.625rem; }
    .composer-refs .media-ref-row__chips { max-width: 9rem; }
}

/* -- Review-only media card (owner case ICHAT-T400-184, 2026-11-06): a public
   share page keeps the approved card geometry, but the affordances it cannot
   perform stay honestly disabled instead of looking armed. -- */
.composer-refs .media-ref-add:disabled,
.composer-refs .media-ref-add[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    border-color: rgba(148, 163, 184, 0.6);
    background: var(--media-track);
    color: #64748b;
}

.composer-refs .media-ref-add:disabled:hover,
.composer-refs .media-ref-add:disabled:focus-visible {
    border-color: rgba(148, 163, 184, 0.6);
    color: #64748b;
}

.media-tier.is-readonly,
.media-tier--toggle.is-readonly { cursor: not-allowed; }

.media-tier--toggle.is-readonly .media-tier-toggle__track { opacity: 0.55; }

.image-card-actions .media-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.image-card-actions .media-action-btn:disabled:hover {
    border-color: var(--media-border);
}

/* -- Compact controls block: tier slider shares one row with the video
   duration; tier scale and duration ticks are absolutely positioned so the
   first/last labels line up exactly under the slider thumb endpoints. -- */
.media-controls-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.media-tier__scale,
.media-duration__ticks {
    position: relative;
    display: block;
    height: 1.0625rem;
    margin: 0 0.5rem;
}

.media-tier__scale span,
.media-duration__ticks span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.media-tier__scale span:first-child,
.media-duration__ticks span:first-child {
    left: 0;
    transform: none;
}

.media-tier__scale span:last-child,
.media-duration__ticks span:last-child {
    left: 100%;
    transform: translateX(-100%);
}

.media-duration__ticks span:only-child {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 520px) {
    .media-controls-row {
        grid-template-columns: calc(60% - 0.5rem) minmax(0, 1fr);
        gap: 0.625rem;
    }
}

@media (max-width: 400px) {
    .media-controls-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
}

/* -- Compact format tiles: mini AR box only; details on hover/focus -- */
.media-format-tile {
    width: 2.5rem;
}

.media-format-tile__box {
    max-height: 1.75rem;
}

.media-format-tile__cap {
    display: none;
}

.media-format-tile:hover .media-format-tile__box,
.media-format-tile__input:checked + .media-format-tile__box {
    box-shadow: 0 0 0 1px var(--media-accent, #8b5cf6);
}

.media-format-tile__tip {
    display: grid;
    place-items: center;
    font-weight: 600;
}

.image-reference-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
}

.image-reference-thumb,
.image-history-item {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 0.625rem;
    overflow: hidden;
    background: rgba(248, 250, 252, 0.92);
}

.dark .image-reference-thumb,
.dark .image-history-item { background: rgba(15, 23, 42, 0.72); }

.image-reference-thumb img,
.image-history-item img,
.image-history-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.image-reference-thumb span,
.image-history-item span {
    display: block;
    padding: 0.25rem 0.375rem;
    color: #64748b;
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-history-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    gap: 0.5rem;
}

.image-history-placeholder { background: linear-gradient(135deg, #e2e8f0, #f8fafc); }
.dark .image-history-placeholder { background: linear-gradient(135deg, #1e293b, #0f172a); }

.html-page-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 14rem;
    background: #eff6ff;
    overflow: hidden;
}

.html-page-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.html-page-thumb--fallback span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-weight: 800;
    letter-spacing: 0;
}

.dark .html-page-thumb { background: #0f172a; }
.dark .html-page-thumb--fallback span { background: rgba(96, 165, 250, 0.12); color: #93c5fd; }

.media-3d-viewer {
    position: relative;
    min-height: 20rem;
    border-radius: 0.75rem 0.75rem 0 0;
    overflow: hidden;
    background: #f3f0ff;
}

.dark .media-3d-viewer { background: #1e1b4b; }

.media-3d-viewer model-viewer {
    display: block;
    width: 100%;
    height: 20rem;
}

.media-3d-viewer model-viewer:not(:defined) { display: none; }

.media-3d-viewer model-viewer:defined + .model-viewer-fallback { display: none; }

.model-viewer-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 20rem;
    padding: 1rem;
    text-align: center;
    color: #5b21b6;
    background: rgba(245, 243, 255, 0.92);
}

.dark .model-viewer-fallback {
    color: #ddd6fe;
    background: rgba(46, 16, 101, 0.3);
}

.prose table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.875rem;
    overflow: hidden;
    margin: 0;
}

.prose thead th {
    background: rgba(99, 102, 241, 0.08);
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
    /* WNX-ICHAT-EVAL-TOOLS-20261005: the base stylesheet sets overflow-wrap:anywhere /
       word-break:break-word on cells, which let a numeric column collapse to zero width and
       break numbers per character. Restore normal wrapping so tables stay readable. */
    overflow-wrap: normal;
    word-break: normal;
}

.dark .prose thead th {
    background: rgba(99, 102, 241, 0.15);
}

.prose tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(156, 163, 175, 0.15);
    overflow-wrap: normal;
    word-break: normal;
}

.prose tbody tr:hover {
    background: rgba(99, 102, 241, 0.03);
}

.dark .prose tbody tr:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* Code block enhancement */
.code-block-wrapper {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 1.25rem;
}

.code-block-wrapper pre,
.prose pre {
    max-height: 15rem;
    overflow: auto;
}

/* Кликабельные чекбоксы в планах/чеклистах. */
.prose input[type="checkbox"],
.chat-markdown input[type="checkbox"],
.message-bubble input[type="checkbox"] {
    cursor: pointer;
}

/* Lists enhancement */
.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.25rem;
}

/* Inline code */
.prose code:not([class]) {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-weight: 500;
}

.dark .prose code:not([class]) {
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
}

/* ====================================================================
   WATCH / SMARTWATCH LAYOUT (≤280px)
   OLED-optimized: pure black backgrounds, compact layout, voice-first
   ==================================================================== */
@media (max-width: 280px) {
    /* -- OLED Black Theme Override (saves battery on OLED) -- */
    body, body.dark,
    .bg-white, .dark\:bg-gray-800,
    .bg-gray-100, .dark\:bg-\[\#212121\] {
        background-color: #000000 !important;
    }
    .dark\:bg-gray-800, .bg-white {
        background-color: #000000 !important;
    }
    /* Cards / panels */
    .dark\:bg-gray-700, .bg-gray-50,
    .dark\:bg-\[\#212121\] {
        background-color: #111111 !important;
    }
    /* Borders dimmed */
    .border-gray-200, .dark\:border-white\/10,
    .border-gray-300, .dark\:border-gray-700,
    .dark\:border-gray-600 {
        border-color: #1a1a1a !important;
    }

    /* -- Hide sidebars completely -- */
    .md\:hidden { display: none !important; }

    /* -- Top toolbar: ultra-compact -- */
    .flex.items-center.justify-between.px-4.py-2 {
        padding: 2px 6px !important;
        gap: 2px !important;
        min-height: 24px !important;
        border-bottom: none !important;
        background: transparent !important;
    }
    /* Hide model selector details, keep only icon */
    .model-selector button span.text-sm { display: none !important; }
    .model-selector button svg.h-4 { display: none !important; }
    .model-selector button span[x-show="attachedAgent"] { display: none !important; }
    .model-selector { min-width: unset !important; }
    .model-selector button { padding: 2px 4px !important; gap: 2px !important; }
    /* Hide share button & settings */
    button[title="Поделиться"],
    button[title="Настройки"] { display: none !important; }

    /* -- Chat scroll area -- */
    #scroll-container {
        padding: 4px 12px 100px !important;
    }

    /* -- Messages: compact, no avatars -- */
    .message-bubble {
        padding: 5px 8px !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        border-radius: 10px !important;
        max-height: 80px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* User bubble: right-aligned feel */
    .message-bubble:has(+ .flex-shrink-0) {
        margin-left: 10% !important;
    }
    /* Avatar icons: hide on watch */
    .flex-shrink-0 .w-8.h-8,
    .flex-shrink-0 .w-10.h-10 {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
    }
    /* Message row gap */
    .flex.gap-4, .flex.gap-3 {
        gap: 3px !important;
    }

    /* -- Greeting: compact -- */
    .text-2xl, .md\:text-3xl {
        font-size: 12px !important;
    }
    .mb-8 { margin-bottom: 8px !important; }

    /* -- Input area: compact, transparent, voice-first -- */
    #chat-input-area {
        padding: 3px 6px !important;
        padding-bottom: max(3px, env(safe-area-inset-bottom)) !important;
        background: transparent !important;
        border-top: none !important;
    }
    /* Input container */
    .chat-input-container {
        padding: 4px !important;
        gap: 3px !important;
        border-radius: 16px !important;
        background: #111111 !important;
    }
    /* Textarea */
    .chat-input {
        font-size: 11px !important;
        min-height: 20px !important;
        line-height: 20px !important;
    }
    /* Attach button: smaller */
    .chat-input-container .flex-shrink-0 button.w-8 {
        width: 24px !important;
        height: 24px !important;
    }
    .chat-input-container .flex-shrink-0 button.w-8 svg {
        width: 14px !important;
        height: 14px !important;
    }
    /* Voice button: hero size — primary input on watch */
    button[title="Голосовой ввод"],
    button[title="Остановить запись"] {
        width: 36px !important;
        height: 36px !important;
        background: #f85149 !important;
        color: #fff !important;
        box-shadow: 0 2px 12px rgba(248, 81, 73, 0.4) !important;
        order: -1; /* Move mic to the left */
    }
    button[title="Голосовой ввод"] svg,
    button[title="Остановить запись"] svg {
        width: 18px !important;
        height: 18px !important;
    }
    /* Send button: compact */
    .chat-input-container button.bg-black,
    .chat-input-container button.dark\:bg-white {
        width: 24px !important;
        height: 24px !important;
    }
    .chat-input-container button.bg-black svg,
    .chat-input-container button.dark\:bg-white svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* -- Attached files: smaller -- */
    .mb-3.flex.flex-wrap { gap: 3px !important; }
    .mb-3 .h-20 { height: 36px !important; width: 36px !important; }

    /* -- Voice mode settings: hide on watch -- */
    .bg-blue-50.dark\:bg-blue-900\/20.rounded-lg { display: none !important; }

    /* -- Agent preview: compact -- */
    .inline-flex.items-center.gap-3.px-4 {
        gap: 3px !important;
        padding: 4px 6px !important;
        font-size: 9px !important;
    }
    .inline-flex .w-10.h-10 { width: 20px !important; height: 20px !important; font-size: 12px !important; }

    /* -- Model dropdown: compact -- */
    .model-selector .absolute {
        width: 160px !important;
        max-height: 180px !important;
        font-size: 10px !important;
    }
    .model-selector .absolute .px-4.py-3 {
        padding: 4px 8px !important;
    }
    .model-selector .absolute .w-8.h-8 {
        width: 16px !important;
        height: 16px !important;
    }

    /* -- Hide premium indicator, reasoning panels on watch -- */
    .input-premium { display: none !important; }

    /* -- Scrollbar hide -- */
    #scroll-container::-webkit-scrollbar,
    .message-bubble::-webkit-scrollbar {
        display: none;
    }
    #scroll-container,
    .message-bubble {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* -- Ambient circular glow (decorative) -- */
    body::after {
        content: '';
        position: fixed;
        top: 2px; left: 2px; right: 2px; bottom: 2px;
        border-radius: 50%;
        border: 1px solid rgba(88, 166, 255, 0.06);
        pointer-events: none;
        z-index: 9998;
    }
}

/* ===== Watch: Round screen enhancements (GPTun) ===== */
body.watch-round-ichat {
    border-radius: 50%;
    overflow: hidden;
}
body.watch-round-ichat .flex.items-center.justify-between.px-4.py-2 {
    padding-top: 18px !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    justify-content: center !important;
}
body.watch-round-ichat #scroll-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
body.watch-round-ichat #chat-input-area {
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
body.watch-round-ichat .message-bubble {
    max-height: 56px;
}

/* ===== Ultra-tiny watch (≤200px, GPTun) ===== */
@media (max-width: 200px) {
    /* Hide toolbar completely */
    .flex.items-center.justify-between.px-4.py-2 {
        display: none !important;
    }
    #scroll-container {
        padding: 2px 18px 80px !important;
    }
    .message-bubble {
        font-size: 8px !important;
        padding: 3px 5px !important;
        max-height: 48px;
    }
    .text-2xl { font-size: 10px !important; }
    /* Voice-only: hide textarea */
    .chat-input { display: none !important; }
    /* Hide attach + send, keep only mic */
    .chat-input-container .flex-shrink-0:not(:has(button[title="Голосовой ввод"]):not(:has(button[title="Остановить запись"]))) {
        display: none !important;
    }
    .chat-input-container {
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
    }
}

/* ========================= Source Link Tooltips ========================= */
.prose .source-link {
    text-decoration: none !important;
    border-bottom: 1.5px dotted rgba(59, 130, 246, 0.5);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.prose .source-link:hover {
    border-bottom-color: rgba(59, 130, 246, 0.9);
}
.dark .prose .source-link {
    border-bottom-color: rgba(96, 165, 250, 0.4);
}
.dark .prose .source-link:hover {
    border-bottom-color: rgba(96, 165, 250, 0.8);
}
.source-tooltip {
    background: #1f2937;
    color: #f3f4f6;
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 8px;
    max-width: 280px;
    word-break: break-word;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.source-tooltip.visible {
    opacity: 1;
}
.source-tooltip .source-tooltip-domain {
    font-weight: 600;
    color: #93c5fd;
}
.source-tooltip .source-tooltip-hint {
    color: #9ca3af;
    font-size: 10px;
    margin-top: 2px;
}
.source-tooltip .source-tooltip-arrow,
.source-tooltip .source-tooltip-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}
.source-tooltip .source-tooltip-arrow {
    visibility: hidden;
}
.source-tooltip .source-tooltip-arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}
.source-tooltip[data-popper-placement^='top'] > .source-tooltip-arrow {
    bottom: -4px;
}
.source-tooltip[data-popper-placement^='bottom'] > .source-tooltip-arrow {
    top: -4px;
}
.source-tooltip[data-popper-placement^='left'] > .source-tooltip-arrow {
    right: -4px;
}
.source-tooltip[data-popper-placement^='right'] > .source-tooltip-arrow {
    left: -4px;
}

/* === Mobile Sidebar Improvements === */
/* Ensure sidebar is properly hidden/shown on mobile */
@media (max-width: 768px) {
    /* Sidebar container should be position fixed to overlay content */
    aside[x-cloak] {
        display: none !important;
    }

    /* Hide overlay when sidebar is closed */
    aside:not(.open-sidebar) ~ .fixed {
        display: none;
    }
    
    /* Mobile hamburger menu button - ensure visibility */
    .md\:hidden[class*="hamburger"],
    button[class*="md:hidden"] {
        z-index: 50;
        position: relative;
    }
    
    /* Sidebar should be accessible when opened */
    aside.translate-x-0 {
        display: block;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
    }
    
    /* Ensure sidebar scroll doesn't affect main scroll */
    aside .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    #chat-input-area {
        max-width: 100%;
    }
}

/* ====================================================================
   iChat RESULT CARDS (task WNX-ICHAT-RESULT-CARDS-20260929)

   The assistant bubble is full-width, but every result card inside it is ONE
   transparent surface with a hairline border and a soft shadow. Small archives,
   tables, code blocks and previews shrink-wrap their content (fit-content) so
   they never stretch to the whole screen, and controls live on the card itself.
   ==================================================================== */
.message-bubble--assistant .aichat-media-card,
.message-bubble--assistant .media-result-shell,
.message-bubble--assistant .ichat-artifact-inline,
.message-bubble--assistant .ichat-artifact-card,
.message-bubble--assistant .chat-table,
.message-bubble--assistant .code-block-wrapper,
.message-bubble--assistant .ichat-copyable,
.message-bubble--assistant .ichat-checklist {
    width: fit-content;
    max-width: 100%;
    border-radius: 0.9rem;
}

/* Owner (owned eval image, case 045, 2026-11-10): a delivered 1500×500 picture
   filled the whole message column — 1378px of a 1440 viewport (95.7%). A picture
   result card takes ~80% of the viewport on desktop with the 90vw hard ceiling
   kept (80vw never exceeds it), and the phone keeps the column width. The card is
   a fit-content surface, so the bound lands on the picture itself, not on the text
   around it. The light owned-file card used to carry an inline `max-width: 100%`,
   which is why a card-width cap never reached it — that inline cap is gone and
   this rule owns the width for both card kinds. */
.message-bubble--assistant .media-result-image {
    max-width: min(100%, 80vw);
}

@media (max-width: 640px) {
    .message-bubble--assistant .media-result-image {
        max-width: 100%;
    }
}

/* A visual artifact renders inside a live iframe; `width: fit-content` collapses that
   iframe to its intrinsic square (~300px), so dashboards/pages looked like tiny
   postage stamps. An iframe-backed artifact and the page/landing preview therefore
   take the bubble width by default — `min(100%, 100%)` is exactly `100%` while the
   custom property is unset. The width bridge in chat-artifacts.js sets
   `--ichat-artifact-content-width` only when the rendered document paints something
   measurably narrower than its frame (owner cases 113/191/435/456), so a narrow table
   or game gets a content-tight, left-aligned card while a responsive dashboard keeps
   the full width (owner case 033). Text/code artifacts keep `fit-content` so short
   snippets stay compact. */
.message-bubble--assistant .ichat-artifact-inline:has(.ichat-artifact-inline__frame),
.message-bubble--assistant .ichat-artifact-inline[data-artifact-kind="html"],
.message-bubble--assistant .ichat-artifact-inline[data-artifact-kind="svg"],
.message-bubble--assistant .ichat-artifact-inline[data-artifact-kind="mermaid"],
.message-bubble--assistant .ichat-artifact-inline[data-artifact-kind="react"],
.message-bubble--assistant .ichat-artifact-inline[data-artifact-kind="html-page"],
.message-bubble--assistant .ichat-artifact-inline--page {
    width: min(100%, var(--ichat-artifact-content-width, 100%));
}

/* Audio cards (music / TTS) need real width: a seek bar that shrink-wraps to
   `fit-content` collapses to the play button and cannot be scrubbed. The
   compact single-card look caps them at about half of the bubble (owner,
   A/B eval 2026-10-26: "ширину этой карточки раза в 2 меньше"). */
.message-bubble--assistant .aichat-media-card--audio {
    width: min(100%, 26rem);
}

/* One visual card: the card itself owns the border/shadow, everything else in
   the result tree is transparent so no opaque white slab is nested inside. */
.message-bubble--assistant > .message-markdown + .aichat-media-card,
.message-bubble--assistant .aichat-media-card,
.message-bubble--assistant .media-result-shell,
.message-bubble--assistant .ichat-artifact-inline,
.message-bubble--assistant .ichat-artifact-card {
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
    background-color: transparent !important;
}

.dark .message-bubble--assistant .aichat-media-card,
.dark .message-bubble--assistant .media-result-shell,
.dark .message-bubble--assistant .ichat-artifact-inline,
.dark .message-bubble--assistant .ichat-artifact-card {
    border-color: rgba(71, 85, 105, 0.6);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

/* A2 (owner): the inline artifact card is not a card inside the message — it has
   no frame, no shadow and a fully transparent background, so only the rendered
   preview and its 3 hover actions (open / copy / download) stay visible. */
.message-bubble--assistant .ichat-artifact-inline,
.dark .message-bubble--assistant .ichat-artifact-inline {
    border: none;
    box-shadow: none;
    background-color: transparent !important;
}

/* Nested slabs that used to paint white/grey squares inside the card. */
.message-bubble--assistant .aichat-media-card--site,
.dark .message-bubble--assistant .aichat-media-card--site,
.message-bubble--assistant .media-image-stage,
.dark .message-bubble--assistant .media-image-stage,
.message-bubble--assistant .image-params-panel,
.dark .message-bubble--assistant .image-params-panel,
.message-bubble--assistant .image-card-status,
.dark .message-bubble--assistant .image-card-status,
.message-bubble--assistant .html-page-thumb,
.dark .message-bubble--assistant .html-page-thumb,
.message-bubble--assistant .media-3d-viewer,
.dark .message-bubble--assistant .media-3d-viewer,
.message-bubble--assistant .ichat-artifact-card,
.message-bubble--assistant .ichat-artifact-card__header,
.dark .message-bubble--assistant .ichat-artifact-card__header,
.message-bubble--assistant .ichat-artifact-card__preview,
.dark .message-bubble--assistant .ichat-artifact-card__preview,
.message-bubble--assistant .ichat-artifact-inline__preview,
.dark .message-bubble--assistant .ichat-artifact-inline__preview {
    background: transparent !important;
}

/* The card body itself is transparent for every result kind. */
.message-bubble--assistant .media-result {
    background-color: transparent !important;
}

/* Inline utility slabs nested inside a result card are neutralised too, but the
   dark code/output surfaces (text-slate-100 on bg-slate-950/900) stay legible. */
.message-bubble--assistant .aichat-media-card [class*="bg-white"]:not([class*="text-slate-100"]):not([class*="text-gray-100"]),
.message-bubble--assistant .aichat-media-card [class*="bg-slate-50"]:not([class*="text-slate-100"]),
.message-bubble--assistant .aichat-media-card [class*="bg-gray-50"]:not([class*="text-gray-100"]):not([class*="text-slate-100"]),
.message-bubble--assistant .media-result [class*="bg-white"]:not([class*="text-slate-100"]):not([class*="text-gray-100"]),
.message-bubble--assistant .media-result [class*="bg-slate-50"]:not([class*="text-slate-100"]),
.message-bubble--assistant .media-result [class*="bg-gray-50"]:not([class*="text-gray-100"]):not([class*="text-slate-100"]) {
    background-color: transparent !important;
}

/* A card's own overlay controls appear when that card is hovered/focused, never
   because the whole message is hovered, and stay visible on touch devices.
   Explicit Open/Copy/Download action rows stay visible — only the lightweight
   icon overlays are hover-revealed. */
.message-bubble--assistant .aichat-media-card .media-image-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.message-bubble--assistant .aichat-media-card:hover .media-image-overlay,
.message-bubble--assistant .aichat-media-card:focus-within .media-image-overlay {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .message-bubble--assistant .aichat-media-card .media-image-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Interactive checklist (GFM task list). */
.message-bubble--assistant .contains-task-list,
.message-bubble--assistant ul:has(> li > input[type="checkbox"]),
.message-bubble--assistant .ichat-checklist {
    list-style: none;
    padding-left: 0.25rem;
}

.message-bubble--assistant ul:has(> li > input[type="checkbox"]) > li,
.message-bubble--assistant .ichat-checklist > li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.message-bubble--assistant input[type="checkbox"][data-ichat-todo] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    accent-color: #4f46e5;
    cursor: pointer;
}

.message-bubble--assistant input[type="checkbox"][data-ichat-todo]:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Copyable plain-text block (```copy fenced block). */
.message-bubble--assistant .ichat-copyable {
    position: relative;
    margin: 0.75rem 0;
    border-radius: 0.75rem;
}

.message-bubble--assistant .ichat-copyable__btn {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    cursor: pointer;
    font-size: 0.8rem;
}

.message-bubble--assistant .ichat-copyable__btn:hover,
.message-bubble--assistant .ichat-copyable__btn:focus-visible {
    border-color: rgba(99, 102, 241, 0.55);
    color: #4338ca;
    outline: none;
}

.message-bubble--assistant .ichat-copyable__pre {
    margin: 0;
    padding: 0.85rem 3rem 0.85rem 0.9rem;
    overflow: auto;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.05);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Owner (A/B eval ICHAT-T400-419, 2026-11-06): внутри одной подложки текст не несёт
   своего фона и синего цвета. Prose-стили кода давали <code> фиолетовую заливку и
   indigo-цвет — блок ```copy это обычный текст для копирования, а не код. Второй
   селектор повторяет специфичность `.dark .prose code:not([class])`, иначе тёмная
   тема возвращала ту же заливку. */
.message-bubble--assistant .ichat-copyable__pre code,
.message-bubble--assistant .ichat-copyable__pre code:not([class]) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.message-bubble--assistant .ichat-copyable__btn svg {
    display: block;
    width: 1rem;
    height: 1rem;
}

.dark .message-bubble--assistant .ichat-copyable__pre {
    background: rgba(148, 163, 184, 0.08);
}

/* WNX-EVALAB-SHARED-MODERN-20261027: the shared/A-B artifactHtml card reuses the exact
   modern .ichat-artifact-inline renderer of the live chat — transparent, no own
   backing, frame grows to content. Width is bounded to ~90vw (fits the share page
   without a horizontal scroll), height follows the resize bridge. */
.ichat-artifact-html-card {
    width: min(90vw, 100%);
}

/* A projected artifactHtml that declares a page/landing keeps a white document
   surface inside the sandboxed frame (the html preview frames already do). */
.message-bubble--assistant .ichat-artifact-html-card .ichat-artifact-inline__frame {
    background: transparent;
}

/* Sandboxed inline preview for a published HTML page. */
.message-bubble--assistant .ichat-html-preview {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 0.7rem;
    background: transparent;
}

.message-bubble--assistant .ichat-html-preview__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    color: #64748b;
    font-size: 0.75rem;
}

/* WNX-ICHAT-EVALAB-FIX-20261024: the hydrator hides the placeholder with the [hidden]
 * attribute and the --ready class, but the display:flex rule above overrode both, so the
 * «Загружаю предпросмотр…» label stayed painted on top of the loaded page forever —
 * the owner read it as "HTML-код засунут в поле предпросмотра, а скриншота нет".
 * Both states must win over the base rule regardless of attribute order. */
.message-bubble--assistant .ichat-html-preview__placeholder[hidden] {
    display: none;
}

.message-bubble--assistant .ichat-html-preview--ready .ichat-html-preview__placeholder {
    display: none;
}

/* Height follows the frame content: the resize bridge (chat-artifacts.js, same
 * mechanism as .ichat-artifact-inline__frame) grows the frame, so a landing page
 * is never clipped behind a max-height cap and never scrolls inside itself.
 * WNX-ICHAT-CARD-CLIP-20261107: the old `height: 12rem` was a hard cap — a taller
 * card was cut and the remainder of the box stayed empty. The frame is
 * content-sized with a 12rem loading floor; the pixel budget is a prompt hint.
 * Owner (2026-11-07): host-side height limiting is forbidden. */
.message-bubble--assistant .ichat-html-preview__frame {
    display: block;
    width: 100%;
    height: auto;
    min-height: 12rem;
    max-height: none;
    border: 0;
    background: transparent;
}

/* Owner (A/B eval 2026-11-01, repeated 2026-11-07): a card embedded in the light
   chat must not be painted on an opaque white slab either. The frame stays
   transparent in both themes; the document's own background decides what is shown. */
.dark .message-bubble--assistant .ichat-html-preview__frame {
    background: transparent;
}

.message-bubble--assistant .ichat-html-preview--failed .ichat-html-preview__placeholder {
    color: #b45309;
}

/* Narrow/mobile viewport: cards fill the bubble width, controls stay reachable. */
@media (max-width: 640px) {
    .message-bubble--assistant .aichat-media-card,
    .message-bubble--assistant .ichat-artifact-inline,
    .message-bubble--assistant .ichat-artifact-card,
    .message-bubble--assistant .ichat-html-preview {
        max-width: 100%;
        border-radius: 0.8rem;
    }
}

/* Owner (review 2026-11-02, cases 191/333/434): an inline HTML card is a wide
   responsive surface, not a ~300px postage stamp. The card owns the full bubble
   width; no inner height/width cap may produce scroll rails. It narrows only to the
   measured painted width of its own document (`--ichat-artifact-content-width`,
   set by the width bridge in chat-artifacts.js) — same contract as the
   iframe-backed artifact card above. */
.message-bubble--assistant .aichat-media-card--site,
.message-bubble--assistant .aichat-media-card--html,
.message-bubble--assistant .aichat-media-card:has(.ichat-html-preview),
.message-bubble--assistant .ichat-artifact-inline[data-artifact-kind="html"],
.message-bubble--assistant .ichat-artifact-inline[data-artifact-kind="html-page"] {
    width: min(100%, var(--ichat-artifact-content-width, 100%));
    max-width: 100%;
}

.message-bubble--assistant .ichat-html-preview,
.message-bubble--assistant .ichat-artifact-inline__frame {
    min-width: 0;
    max-width: 100%;
}

.message-bubble--assistant .aichat-media-card--site,
.message-bubble--assistant .aichat-media-card--html,
.message-bubble--assistant .ichat-html-inline-card,
.message-bubble--assistant .ichat-html-page-card__toolbar,
.message-bubble--assistant .ichat-artifact-inline {
    position: relative;
}

.message-bubble--assistant .ichat-html-inline-card,
.message-bubble--assistant .aichat-media-card--html {
    border: none;
    box-shadow: none;
    background: transparent !important;
    padding: 0;
}

/* Owner (2026-11-08, case 031): a generated landing preview is half the desktop
   bubble width and left-aligned, while the phone keeps the full width. The
   screenshot is scaled to fit the card (contain, natural aspect) instead of the
   legacy 16:9 cover crop with a 14rem height cap. Scope stays on the published
   thumbnail card: owner-private dashboard previews keep the full bubble width. */
.message-bubble--assistant .media-result-html-page:has(.html-page-thumb) {
    width: 50%;
    max-width: 50%;
}

.message-bubble--assistant .media-result-html-page:has(.html-page-thumb) .html-page-thumb {
    aspect-ratio: auto;
    max-height: none;
    background: transparent;
}

.message-bubble--assistant .media-result-html-page:has(.html-page-thumb) .html-page-thumb img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 640px) {
    .message-bubble--assistant .media-result-html-page:has(.html-page-thumb) {
        width: 100%;
        max-width: 100%;
    }
}

/* The open/copy/download strip on a generated HTML card appears on hover or
   keyboard focus only (owner cases 191/333/434). Touch keeps it visible. */
.message-bubble--assistant .ichat-html-page-card__toolbar,
.message-bubble--assistant .ichat-html-inline-card__toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease;
    z-index: 3;
}

.message-bubble--assistant .ichat-html-page-card__toolbar .aichat-media-card__actions,
.message-bubble--assistant .ichat-html-inline-card__toolbar .aichat-media-card__actions {
    margin: 0;
    padding: 0.35rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

.dark .message-bubble--assistant .ichat-html-page-card__toolbar .aichat-media-card__actions,
.dark .message-bubble--assistant .ichat-html-inline-card__toolbar .aichat-media-card__actions {
    background: rgba(15, 23, 42, 0.94);
}

.message-bubble--assistant .aichat-media-card--html:hover .ichat-html-page-card__toolbar,
.message-bubble--assistant .aichat-media-card--html:focus-within .ichat-html-page-card__toolbar,
.message-bubble--assistant .ichat-html-inline-card:hover .ichat-html-inline-card__toolbar,
.message-bubble--assistant .ichat-html-inline-card:focus-within .ichat-html-inline-card__toolbar {
    opacity: 1;
    visibility: visible;
}

/* Restoring visibility must also enable the page card's toolbar actions. */
.message-bubble--assistant .aichat-media-card--html:hover .ichat-html-page-card__toolbar,
.message-bubble--assistant .aichat-media-card--html:focus-within .ichat-html-page-card__toolbar {
    pointer-events: auto;
}

@media (hover: none) {
    .message-bubble--assistant .ichat-html-page-card__toolbar,
    .message-bubble--assistant .ichat-html-inline-card__toolbar {
        opacity: 1;
        visibility: visible;
        /* Touch has no hover to trigger the reveal rule above, so the strip is
           painted permanently — and it must also take the pointer there, or the
           inherited `pointer-events: none` from the base artifact strip lets the
           first tap fall through to the thumbnail behind the buttons (owner case
           031, evidence touch-rest.json: opacity/visibility visible,
           pointer-events none; the second tap only worked because the first one
           left a sticky :hover on the card). */
        pointer-events: auto;
    }
}

/* Compact skill data: a short inline list instead of a template card. */
.ichat-skill-lines {
    font-size: 0.8125rem;
    color: #475569;
}

.dark .ichat-skill-lines {
    color: #cbd5e1;
}

.ichat-skill-lines__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ichat-skill-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}

.ichat-skill-line__name {
    font-weight: 600;
}

.ichat-skill-line__meta {
    color: #64748b;
    font-size: 0.75rem;
}

.ichat-skill-line__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ichat-skill-line__actions .media-action-btn {
    padding: 0.1rem 0.45rem;
    font-size: 0.6875rem;
    line-height: 1.3;
}

/* ===== GPTun widget panel (chat-widgets.js) ===== */
.ichat-widget-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(79, 70, 229, .12);
    color: #4f46e5;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dark .ichat-widget-badge { color: #a5b4fc; background: rgba(96, 165, 250, .18); }

.ichat-widget-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 46vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ichat-widget-empty {
    padding: 14px 12px;
    border: 1px dashed rgba(148, 163, 184, .45);
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    text-align: center;
}

.ichat-widget-card {
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e4e8f8;
    box-shadow: 0 8px 24px rgba(104, 114, 170, .07), 0 1px 3px rgba(104, 114, 170, .05);
    overflow: hidden;
    animation: ichat-widget-in .35s cubic-bezier(.22, 1, .36, 1) backwards;
}
.dark .ichat-widget-card { background: #172033; border-color: rgba(96, 165, 250, .18); }

@keyframes ichat-widget-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.ichat-widget-card--flash {
    animation: ichat-widget-flash 1.1s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ichat-widget-flash {
    0%, 100% { box-shadow: 0 8px 24px rgba(104, 114, 170, .07); }
    25%, 60% { box-shadow: 0 0 0 4px rgba(79, 70, 229, .2), 0 16px 48px rgba(104, 114, 170, .2); border-color: rgba(79, 70, 229, .7); }
}

.ichat-widget-card--dragging { opacity: .9; border-color: rgba(79, 70, 229, .7); }
.ichat-widget-card--dropzone { border: 1px dashed rgba(79, 70, 229, .55); box-shadow: none; background: transparent; min-height: 64px; }

.ichat-widget-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ichat-widget-card__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ichat-widget-card__name { font-size: 13.5px; font-weight: 600; color: #1f2850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .ichat-widget-card__name { color: #f1f5f9; }
.ichat-widget-card__sub { font-size: 11.5px; color: #8d94b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ichat-widget-card__actions { flex: 0 0 auto; display: flex; gap: 2px; }

.ichat-widget-card__icon {
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    color: #8d94b3; background: none; border: 0; cursor: pointer; transition: color .15s, background .15s;
}
.ichat-widget-card__icon:hover { color: #1f2850; background: rgba(148, 163, 184, .12); }
.dark .ichat-widget-card__icon:hover { color: #f1f5f9; }
.ichat-widget-card__icon--danger, .ichat-widget-card__icon--danger:hover { color: #dc2626; background: rgba(220, 38, 38, .1); }

.ichat-widget-card__body { padding: 0 12px; }
.ichat-widget-card__frame {
    display: block; width: 100%; height: 200px; border: 0; border-radius: 12px;
    background: #fff; overflow: hidden; transition: height .25s cubic-bezier(.22, 1, .36, 1);
}

.ichat-widget-card__foot { display: flex; gap: 8px; padding: 10px 12px 12px; }
.ichat-widget-card__btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.ichat-widget-card__btn--primary { background: #4f46e5; color: #fff; border: 0; }
.ichat-widget-card__btn--primary:hover { background: #4338ca; }
.ichat-widget-card__btn--ghost { border: 1px solid #d5dbef; color: #4d58d9; background: none; }
.ichat-widget-card__btn--ghost:hover { background: rgba(79, 70, 229, .08); }
.dark .ichat-widget-card__btn--ghost { border-color: rgba(96, 165, 250, .35); color: #a5b4fc; }

.ichat-widget-card__grip {
    height: 14px; display: flex; align-items: center; justify-content: center;
    cursor: grab; touch-action: none;
}
.ichat-widget-card__grip:active { cursor: grabbing; }
.ichat-widget-card__grip span { width: 36px; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, .3); transition: background .15s; }
.ichat-widget-card__grip:hover span { background: rgba(148, 163, 184, .55); }

/* WNX-EVALAB-HTML-CARD-FLAT-20261026 (owner, verdicts id 2/22/25): a published-page
   card in chat must NOT be a boxed widget - no border, no backing, no fake
   HTML-badge placeholder slab. The card is just the title row, the live preview
   (which grows to the page's own height via the resize bridge) and the actions. */
.message-bubble--assistant .media-result-html-page,
.dark .message-bubble--assistant .media-result-html-page {
    border: none;
    box-shadow: none;
    background: transparent !important;
}

.message-bubble--assistant .media-result-html-page .ichat-html-preview,
.dark .message-bubble--assistant .media-result-html-page .ichat-html-preview {
    border: none;
    border-radius: 0.7rem;
    min-height: 6rem;
    overflow: hidden;
}

/* Without a screenshot the retired HTML-badge slab must never come back from
   cached markup or another renderer path. */
.message-bubble--assistant .html-page-thumb--fallback,
.dark .message-bubble--assistant .html-page-thumb--fallback {
    display: none !important;
}

/* A real screenshot thumbnail keeps its rounded top edge, but is not a height cap:
   the preview below already shows the whole page. */
.message-bubble--assistant .html-page-thumb {
    border-radius: 0.7rem 0.7rem 0 0;
}