/* Preview-only transcript skin. Keep layout/state selectors in the original
   stylesheets: switching the flag changes presentation, never visibility or
   control behavior. Status colors remain reserved for actual outcomes. */
html[data-ui="apple"] .session-view-messages {
    /* Size the reading column from this pane, not the viewport: a split
       surface must keep its own usable width. The scroller stays full-width. */
    padding: 1.5rem max(1rem, calc((100% - 920px) / 2)) 0.5rem;
    background: var(--bg-dark);
}

html[data-ui="apple"] .claude-message {
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--refresh-radius-lg);
    background: var(--refresh-glass-thin);
    box-shadow: var(--refresh-glass-edge);
}

html[data-ui="apple"] .claude-message .message-header {
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border-bottom-color: var(--border);
}

html[data-ui="apple"] .claude-message .message-body {
    padding: 0.875rem 1rem 1rem;
}

/* Prose stays on a light glass layer. Do not blur every streamed message:
   long transcripts should not create hundreds of composited backdrop layers. */
html[data-ui="apple"] .assistant-message,
html[data-ui="apple"] .codex-group,
html[data-ui="apple"] .muse-message,
html[data-ui="apple"] .antigravity-message {
    background: var(--refresh-glass-thin);
    border-color: var(--border);
}

html[data-ui="apple"] .user-message,
html[data-ui="apple"] .user-group {
    background: var(--refresh-glass);
    border: 1px solid var(--border);
    box-shadow: var(--refresh-glass-edge), var(--refresh-shadow-1);
    -webkit-backdrop-filter: var(--refresh-glass-blur);
    backdrop-filter: var(--refresh-glass-blur);
}

/* A grouped turn owns its glass. Nested messages must not stack blur, frames,
   or spacing; this also preserves the original grouping of streamed chunks. */
html[data-ui="apple"] .user-group-body .user-message,
html[data-ui="apple"] .codex-group-body .claude-message,
html[data-ui="apple"] .portal-group-body .portal-message {
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-ui="apple"] .message-type-badge,
html[data-ui="apple"] .tool-badge,
html[data-ui="apple"] .init-badge,
html[data-ui="apple"] .question-badge {
    background: var(--refresh-glass-thin);
    color: var(--text-secondary);
    padding: 0.2rem 0.55rem;
    border-radius: var(--refresh-radius-pill);
    font-size: var(--refresh-text-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

html[data-ui="apple"] .system-message.compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border-color: transparent;
}

html[data-ui="apple"] .message-count,
html[data-ui="apple"] .task-type-badge {
    background: var(--refresh-surface-2);
    color: var(--text-secondary);
    border-radius: var(--refresh-radius-sm);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

html[data-ui="apple"] .message-type-badge.user,
html[data-ui="apple"] .message-type-badge.assistant {
    color: var(--text-primary);
}

html[data-ui="apple"] .message-type-badge.result.error,
html[data-ui="apple"] .tool-badge.mcp.error {
    color: var(--error);
}

html[data-ui="apple"] .message-type-badge:is(.error, .anthropic-error, .failed) {
    color: var(--error);
}

html[data-ui="apple"] .message-type-badge:is(.overload, .rate-limit) {
    color: var(--warning);
}

html[data-ui="apple"] :is(.error-message-display, .anthropic-error-message, .result-message.error) {
    border-left: 2px solid var(--error);
    background: var(--refresh-danger-soft);
}

html[data-ui="apple"] .codex-cmd-status.running { color: var(--warning); }
html[data-ui="apple"] .codex-cmd-status.ok { color: var(--success); }
html[data-ui="apple"] .codex-cmd-status.err { color: var(--error); }

html[data-ui="apple"] .assistant-text,
html[data-ui="apple"] .user-message .user-text,
html[data-ui="apple"] .antigravity-text {
    font-size: var(--refresh-text-md);
    line-height: 1.75;
    color: var(--text-primary);
}

html[data-ui="apple"] .claude-message :is(.assistant-text, .user-text) {
    max-width: 80ch;
}

html[data-ui="apple"] .md-paragraph {
    margin-block: 0.75rem;
    line-height: 1.75;
}

html[data-ui="apple"] .md-paragraph:first-child { margin-top: 0; }
html[data-ui="apple"] .md-paragraph:last-child { margin-bottom: 0; }

html[data-ui="apple"] .md-heading {
    margin-block: 1.5rem 0.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    border-bottom: 0;
}

html[data-ui="apple"] .md-h1 { font-size: var(--refresh-text-xl); }
html[data-ui="apple"] .md-h2 { font-size: var(--refresh-text-lg); }
html[data-ui="apple"] .md-h3 { font-size: var(--refresh-text-md); }

html[data-ui="apple"] .md-link {
    color: var(--accent);
    text-decoration-style: solid;
    text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
    text-underline-offset: 0.2em;
}

html[data-ui="apple"] .md-inline-code {
    color: var(--text-primary);
    background: var(--refresh-surface-2);
    border-radius: var(--refresh-radius-sm);
    padding: 0.125rem 0.3rem;
    font-size: 0.85em;
}

html[data-ui="apple"] .md-code-block {
    margin-block: 1rem;
    border-radius: var(--refresh-radius-lg);
    background: rgba(0, 0, 0, 0.35);
}

html[data-ui="apple"] .md-code-block .md-code {
    padding: 1rem 1.125rem;
    line-height: 1.65;
    font-size: var(--refresh-text-sm);
}

html[data-ui="apple"] .md-blockquote {
    background: transparent;
    border-left: 2px solid var(--border);
    padding: 0.25rem 1rem;
    margin-block: 1rem;
}

html[data-ui="apple"] .code-copy-button {
    background: var(--refresh-surface-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

html[data-ui="apple"] .code-copy-button:focus-visible,
html[data-ui="apple"] .md-code-block:focus-within .code-copy-button {
    opacity: 1;
}

/* Tool types share one frame. Diffs, error results and running states retain
   their semantic cues instead of relying on a different frame per tool. */
html[data-ui="apple"] .tool-use,
html[data-ui="apple"] .tool-result,
html[data-ui="apple"] .diff-card,
html[data-ui="apple"] .command-result,
html[data-ui="apple"] .question-card {
    background: var(--refresh-surface-1);
    border: 1px solid var(--border);
    border-radius: var(--refresh-radius-lg);
    box-shadow: none;
}

html[data-ui="apple"] .tool-use-header,
html[data-ui="apple"] .diff-card-header {
    background: transparent;
    padding: 0.625rem 0.875rem;
    gap: 0.5rem;
}

html[data-ui="apple"] .tool-use .tool-icon,
html[data-ui="apple"] .tool-use .tool-name {
    color: var(--text-secondary);
}

html[data-ui="apple"] .tool-input-content,
html[data-ui="apple"] .tool-result-content,
html[data-ui="apple"] .command-result-output,
html[data-ui="apple"] .diff-view {
    font-family: var(--font-mono);
    font-size: var(--refresh-text-sm);
    line-height: 1.6;
}

html[data-ui="apple"] .bash-command-inline,
html[data-ui="apple"] .glob-pattern-inline,
html[data-ui="apple"] .grep-pattern-inline {
    background: transparent;
    color: var(--text-primary);
    padding-inline: 0;
}

html[data-ui="apple"] .thinking-block {
    background: transparent;
    border-left: 1px solid var(--border);
    border-radius: 0;
}

html[data-ui="apple"] .thinking-label,
html[data-ui="apple"] .thinking-content {
    color: var(--text-secondary);
}

html[data-ui="apple"] .diff-line.added {
    background: color-mix(in srgb, var(--success) 10%, transparent);
    color: var(--success);
}

html[data-ui="apple"] .diff-line.removed {
    background: color-mix(in srgb, var(--error) 10%, transparent);
    color: var(--error);
}

html[data-ui="apple"] .diff-line.added .diff-marker { color: var(--success); }
html[data-ui="apple"] .diff-line.removed .diff-marker { color: var(--error); }

html[data-ui="apple"] .tool-result.error,
html[data-ui="apple"] .command-result.failed {
    border-color: color-mix(in srgb, var(--error) 50%, var(--border));
}

html[data-ui="apple"] .turn-metrics-footer,
html[data-ui="apple"] .result-message .result-stats-bar {
    background: transparent;
    color: var(--text-muted);
    font-size: var(--refresh-text-xs);
}

/* Composer keeps its existing textarea measurement and attachment layout. */
html[data-ui="apple"] .session-view-input {
    width: calc(100% - 2rem);
    max-width: 920px;
    margin: 0.75rem auto max(0.75rem, env(safe-area-inset-bottom));
    padding: 0.625rem 0.75rem;
    gap: 0.625rem;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: var(--refresh-glass-strong);
    box-shadow: var(--refresh-glass-edge), var(--refresh-shadow-2);
    -webkit-backdrop-filter: var(--refresh-glass-blur);
    backdrop-filter: var(--refresh-glass-blur);
}

html[data-ui="apple"] .session-view-input .input-prompt {
    color: var(--text-muted);
    font-weight: 400;
}

html[data-ui="apple"] .session-view-input .message-input {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--refresh-radius-md);
    padding: 0.75rem 0.875rem;
    font-size: var(--refresh-text-md);
    line-height: 1.5;
    color: var(--text-primary);
}

html[data-ui="apple"] .session-view-input .message-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

html[data-ui="apple"] .session-view-input .message-input::placeholder {
    color: var(--text-muted);
}

html[data-ui="apple"] .session-view .send-button,
html[data-ui="apple"] .session-view .send-mode-toggle {
    background: var(--accent);
    color: var(--refresh-on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-radius: var(--refresh-radius-pill);
    font-weight: 600;
}

/* Preserve the joined hit targets of the split Send control. */
html[data-ui="apple"] .session-view .send-button-container .send-button {
    border-radius: 999px 0 0 999px;
}

html[data-ui="apple"] .session-view .send-button-container .send-mode-toggle {
    border-radius: 0 999px 999px 0;
}

html[data-ui="apple"] .session-view .send-mode-dropdown,
html[data-ui="apple"] .session-view .reasoning-effort-select {
    background: var(--refresh-glass-strong);
    border-color: var(--border);
    border-radius: var(--refresh-radius-md);
    color: var(--text-primary);
}

html[data-ui="apple"] .overload-message,
html[data-ui="apple"] .rate-limit-message {
    border-left-color: var(--warning);
    background: var(--refresh-warning-soft);
}

html[data-ui="apple"] .overload-title,
html[data-ui="apple"] .rate-limit-status {
    color: var(--warning);
}

html[data-ui="apple"] .compaction-message,
html[data-ui="apple"] .task-message {
    background: var(--refresh-surface-1);
    border-left-color: var(--border);
}

html[data-ui="apple"] .task-message.failed {
    border-left-color: var(--error);
    background: var(--refresh-danger-soft);
}

html[data-ui="apple"] .task-code {
    background: rgba(0, 0, 0, 0.35);
    border-color: var(--border);
    color: var(--text-primary);
}

html[data-ui="apple"] .task-agent-type,
html[data-ui="apple"] .plugin-card-badge,
html[data-ui="apple"] .plugin-skill-pill,
html[data-ui="apple"] .plugin-command-pill {
    color: var(--text-secondary);
    background: var(--refresh-surface-2);
    border-color: var(--border);
    border-radius: var(--refresh-radius-sm);
    font-weight: 500;
}

/* Prompts are actionable, not failures. Preserve the selected/allow/deny
   states, and use the warning edge to distinguish an authorization request. */
html[data-ui="apple"] .permission-prompt {
    background: var(--refresh-glass-strong);
    border: 1px solid var(--border);
    border-left: 2px solid var(--warning);
    border-radius: var(--refresh-radius-lg);
    padding: 1rem 1.125rem;
    margin: 0.5rem max(1rem, calc((100% - 920px) / 2));
    box-shadow: var(--refresh-glass-edge), var(--refresh-shadow-2);
    -webkit-backdrop-filter: var(--refresh-glass-blur);
    backdrop-filter: var(--refresh-glass-blur);
    animation: none;
}

html[data-ui="apple"] .permission-prompt.ask-user-question {
    background: var(--refresh-glass-strong);
    border-color: var(--border);
    border-left-color: var(--accent);
}

html[data-ui="apple"] .permission-title {
    color: var(--text-primary);
    font-size: var(--refresh-text-base);
}

html[data-ui="apple"] .permission-input {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: var(--refresh-radius-sm);
}

html[data-ui="apple"] .permission-option {
    padding: 0.5rem 0.625rem;
    border-radius: var(--refresh-radius-sm);
}

html[data-ui="apple"] .permission-option.selected,
html[data-ui="apple"] .option-item.selected {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

html[data-ui="apple"] .plugin-context-card,
html[data-ui="apple"] .plugin-card,
html[data-ui="apple"] .fork-lineage-card,
html[data-ui="apple"] .portal-reminder {
    background: var(--refresh-surface-1);
    border: 1px solid var(--border);
    border-radius: var(--refresh-radius-lg);
}

html[data-ui="apple"] .plugin-context-summary,
html[data-ui="apple"] .portal-reminder-header {
    background: transparent;
    color: var(--text-secondary);
    padding: 0.625rem 0.875rem;
}

html[data-ui="apple"] .plugin-context-summary:hover,
html[data-ui="apple"] .portal-reminder-header:hover {
    background: var(--refresh-surface-2);
}

html[data-ui="apple"] .session-view :is(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    html[data-ui="apple"] .session-view-messages {
        padding: 0.875rem 0.5rem 0;
    }

    html[data-ui="apple"] .claude-message .message-header {
        padding: 0.5rem 0.625rem;
    }

    html[data-ui="apple"] .claude-message .message-body {
        padding: 0.625rem;
    }

    html[data-ui="apple"] .session-view-input {
        width: calc(100% - 1rem);
        padding: 0.5rem;
        gap: 0.5rem;
        border-radius: var(--refresh-radius-lg);
    }

    html[data-ui="apple"] .permission-prompt {
        margin: 0.5rem;
        padding: 0.75rem;
    }
}

/* Keep text-bearing islands opaque when transparency is unavailable or the
   user asks to reduce it. Only the surfaces change; controls stay in place. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-ui="apple"] :is(.user-message, .user-group, .permission-prompt, .session-view-input) {
        background: rgba(18, 20, 28, 0.96);
    }
}

@media (prefers-reduced-transparency: reduce) {
    html[data-ui="apple"] :is(.claude-message, .tool-use, .tool-result, .diff-card, .command-result, .permission-prompt, .session-view-input) {
        background: #171921;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}