/* ==========================================================================
    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;
}

/* Owner (cases ICHAT-NOV09-024/029/034, 2026-11-12): a picture that no image model
   generated wears the generation card's outer template and nothing else — the same
   bounds, the same 16px corners and the same hover-only download/fullscreen pair, with
   no prompt editor, no tier/format row and no generation history below it. Its rules
   live next to the card-width rules it mirrors, further down this file. */
/* 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-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;
}

/* Owner case 482 (2026-11-12): when the frame takes its shape from the loaded
   file, the viewer card follows the same shape — a portrait picture keeps its
   full capped height without the side letterbox of a 16:9 stage. */
.media-result-video--worker[data-media-aspect-source="intrinsic"] {
    width: min(100%, var(--media-card-max-width, 46rem));
}

.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;
}

/* Owner case 482 (2026-11-12): a frame whose proportions come from the loaded
   file is never wider than that shape allows at the capped height — otherwise
   the portrait picture is letterboxed inside a full-width 16:9 stage. */
.media-video-frame[data-media-aspect-source="intrinsic"] {
    width: min(100%, var(--media-frame-max-width, 100%));
}

.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;
    }

    /* The sidebar backdrop is owned by Alpine (`x-show="sidebarOpen && ..."`) and is rendered
       before the <aside>, so `aside:not(.open-sidebar) ~ .fixed` could never reach it —
       `.open-sidebar` is applied nowhere. That selector only hid unrelated `.fixed` siblings
       on mobile (the media lightbox, modals, toasts). Do not bring it back. */

    /* 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%;
    }
}

/* Owner (cases ICHAT-NOV09-024/029/034, 2026-11-12): the picture-only card IS the
   generation card's picture and nothing else. It takes the same bounds the generator
   frame already uses in librechat-media-card.css — a 40vh/dvh picture ceiling, a 240px
   floor so a small file is not a postage stamp, and 16px corners that the picture owns
   on all four sides because no prompt/editor/history sits below it. The download and
   fullscreen buttons keep the generator's hover-only appearance: a transparent layer
   with the two round icon buttons in the top-right corner, download left of fullscreen.
   Nothing here invents a lane: the renderer already made the decision from the payload's
   own markers, this only stops the two cards from looking like different components.
   The card's own 16px corners and missing drop shadow live with the other shared
   card-frame overrides below. */
.media-result-image--light .media-image-stage {
    max-height: 40vh;
    max-height: 40dvh;
    border-radius: 16px;
    overflow: hidden;
}

.media-result-image--light .media-image-stage > .image-card-result {
    max-height: 40vh;
    max-height: 40dvh;
    border-radius: 16px;
}

/* A single delivered picture is upscaled into the same usable size the generator card
   gives it. The cutout pair keeps its two-column layout, so the floor would overflow a
   phone width there and stays out. */
.media-result-image--light:not([data-media-cutout-pair]) .media-image-stage > .image-card-result {
    min-width: 240px;
}

@media (max-width: 640px) {
    .media-result-image--light:not([data-media-cutout-pair]) .media-image-stage > .image-card-result {
        min-width: 0;
    }
}

.media-result-image--light .media-cutout-pair__before,
.media-result-image--light .media-cutout-pair__after {
    max-height: 40vh;
    max-height: 40dvh;
}

.media-result-image--light .media-hover-actions {
    background: transparent;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px;
}

.media-result-image--light .media-hover-actions .media-hover-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}

.media-result-image--light .media-hover-actions .media-hover-btn svg {
    width: 14px;
    height: 14px;
}

/* Owner (case ICHAT-NOV09-022, 2026-11-12): the fullscreen image viewer showed two
   opaque white circles with text glyphs next to a dark picture, while the image card
   carries the translucent 30px icon pair for Download/Enlarge. The viewer reuses the
   same .media-hover-btn component and the same circle geometry, so its Download and
   Close read as one family with the card controls; Close keeps its own X icon. */
.media-lightbox-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
}

.media-lightbox-actions .media-hover-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}

.media-lightbox-actions .media-hover-btn:hover,
.media-lightbox-actions .media-hover-btn:focus-visible {
    background: rgba(15, 23, 42, 0.78);
}

.media-lightbox-actions .media-hover-btn svg {
    width: 14px;
    height: 14px;
}

/* 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);
}

/* Owner (cases ICHAT-NOV09-024/029/034, 2026-11-12): the picture-only card is the
   generation frame — a 1px outline with 16px corners and no drop shadow, exactly like
   `.wnx-media__card`. Declared after the shared «one visual card» block so it wins by
   order and by specificity, and once more for the dark theme. */
.message-bubble--assistant .aichat-media-card.media-result-image--light {
    border-radius: 16px;
    box-shadow: none;
}

.dark .message-bubble--assistant .aichat-media-card.media-result-image--light {
    box-shadow: none;
}

/* 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;
}