/* ============================================================
   Chat — Chat bubbles, markdown rendering, tool cards
   ============================================================ */

/* ── Chat Messages (History View) ──────────────────────────── */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.chat-bubble {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-xl);
    font-size: var(--fs-lg);
    line-height: 1.5;
    max-width: 85%;
    position: relative;
    border: 1px solid var(--border);
}

.chat-bubble.human {
    background: var(--chat-human-bg, color-mix(in srgb, var(--accent) 15%, var(--bg-tertiary)));
    color: var(--text-primary);
    margin-left: auto;
    border-radius: 18px;
    padding: 8px 16px;
    max-width: 85%;
    width: fit-content;
}

.chat-bubble.human .role-label {
    text-align: right;
    color: var(--text-muted);
}

.chat-attachments {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
    min-width: 0;
}

.chat-attachment-chip {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9em;
}

.chat-attachment-file {
    color: var(--text-muted);
}

.chat-bubble.assistant {
    background: var(--chat-assistant-bg, var(--bg-tertiary));
    color: var(--text-primary);
    border-top-left-radius: 2px;
}

.chat-bubble .role-label {
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.chat-bubble .message-text {
    word-break: break-word;
    line-height: 1.55;
}

.chat-bubble .message-text p {
    margin: 4px 0;
}

.chat-bubble .message-text p:first-child { margin-top: 0; }
.chat-bubble .message-text p:last-child  { margin-bottom: 0; }

.chat-bubble .message-text code {
    background: var(--code-inline-bg);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.chat-bubble .message-text pre {
    background: var(--bg-primary);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 8px 0;
    border: 1px solid var(--border);
}

.chat-bubble .message-text pre code {
    background: none;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.45;
}

.chat-bubble .message-text ul,
.chat-bubble .message-text ol {
    margin: 6px 0;
    padding-left: 20px;
}

.chat-bubble .message-text li {
    margin: 2px 0;
}

.chat-bubble .message-text h1,
.chat-bubble .message-text h2,
.chat-bubble .message-text h3 {
    margin: 10px 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.chat-bubble .message-text blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 10px;
    margin: 6px 0;
    color: var(--text-secondary);
}

.chat-bubble .message-text table {
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.75rem;
}

.chat-bubble .message-text th,
.chat-bubble .message-text td {
    border: 1px solid var(--border);
    padding: 4px 8px;
}

.chat-bubble .message-text th {
    background: var(--bg-secondary);
    font-weight: 600;
}

/* ── Markdown Body (rich rendering) ────────────────────────── */

/* ── Edit Button ───────────────────────────────────────────── */

.chat-bubble .edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-hover);
    border: 1px solid var(--control-border);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.chat-bubble:hover .edit-btn,
.chat-bubble:focus-within .edit-btn {
    opacity: 1;
}

.chat-bubble .edit-btn:hover {
    background: var(--accent-dim);
    color: var(--text-primary);
}

/* ── Live History Panel (right sidebar) ────────────────────── */

.live-history-panel {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
}

.live-history-panel .chat-bubble {
    font-size: var(--fs-lg);
    padding: 8px 12px;
    margin-bottom: 10px;
}

.live-history-panel .chat-bubble.assistant {
    max-width: 100%;
}

.live-history-panel .chat-bubble.human {
    max-width: 88%;
    margin-top: 14px;
}

.live-history-panel .chat-bubble .role-label {
    font-size: var(--fs-base);
}

.live-history-panel .chat-bubble .message-text {
    font-size: var(--fs-lg);
    line-height: 1.6;
}

/* ── Work Groups (steps between a user message and the final reply) ── */

.work-group {
    margin: 0 0 10px;
}

.work-group-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: var(--fs-base);
    color: var(--text-muted);
    min-width: 0;
    min-height: var(--control-compact-height);
}

.work-group-summary::-webkit-details-marker { display: none; }
.work-rollup { margin: 0 0 10px; }
.work-rollup > .work-group-summary { border-style: solid; }
.work-rollup[open] > .work-group-summary::before { transform: rotate(90deg); }
.work-group[hidden] { display: none; }

.work-group-summary::before {
    content: "\25B8";
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.1s;
}

.work-group[open] > .work-group-summary::before { transform: rotate(90deg); }

.work-group-summary:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.work-group-count {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-secondary);
}

.work-group-latest {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-group-body {
    margin: 6px 0 0 6px;
    padding-left: 8px;
    border-left: 2px solid var(--border);
}

.work-group-body > .chat-bubble {
    margin: 4px 0 6px;
    opacity: 0.85;
}

/* A Coral notice inside a group is one of its steps (#4171): tighter than the pill on its own. */
.work-group-body > .chat-system {
    margin: 4px 0 8px;
}

/* ── Tool Calls (collapsed one-line rows) ──────────────────── */

.tool-call {
    margin: 0 0 3px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
}

.tool-call + .chat-bubble {
    margin-top: 10px;
}

.tool-call-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--text-secondary);
    min-width: 0;
    min-height: var(--control-compact-height);
}

.tool-call-summary::-webkit-details-marker { display: none; }

.tool-call-summary::before {
    content: "\25B8";
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.1s;
}

.tool-call[open] > .tool-call-summary::before { transform: rotate(90deg); }

.tool-call-summary:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.tool-call-icon { flex-shrink: 0; font-size: var(--icon-inline-size); }

.tool-call-name {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-secondary);
}

.tool-call-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-call-error .tool-call-name { color: var(--error); }

.tool-call-body {
    margin: 2px 0 8px 14px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.tool-call-body > :first-child,
.tool-call-body > .tool-card-output:first-child {
    margin-top: 0;
}

.tool-call-body .tool-card-output:first-child {
    border-top: none;
    padding-top: 0;
}

/* ── Tool Cards ────────────────────────────────────────────── */

.tool-card {
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    font-size: 0.75rem;
}

.tool-card-summary {
    margin-top: 3px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tool-card-description {
    color: var(--text-primary);
    font-size: 0.75rem;
    margin-bottom: 4px;
}

/* AskUserQuestion prompt */
.tool-question {
    margin-top: 4px;
}

.tool-question-text {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.tool-question-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tool-question-option {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
}

.tool-question-option-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
}

.tool-question-option-desc {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin-top: 2px;
}

.tool-card-command {
    margin: 3px 0 0;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

/* ── Diffs ─────────────────────────────────────────────────── */

.diff-content {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    font-family: var(--font-mono);
}

.diff-line {
    padding: 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.4;
}

.diff-line.diff-del {
    background: var(--diff-del-bg);
    color: var(--diff-del-color);
}

.diff-line.diff-add {
    background: var(--diff-add-bg);
    color: var(--diff-add-color);
}

/* ── Tool Result Output Blocks ─────────────────────────────── */

.tool-result-content {
    margin: 0;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.tool-card-output {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 4px;
}

.tool-output-inline {
    margin: 0;
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
}

.tool-output-inline.tool-result-error {
    color: var(--error);
    opacity: 0.85;
}

/* ── Load More Button ─────────────────────────────────────── */

.load-more-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    margin-bottom: 12px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.75rem; /* rem, not 12px: it grows with the text size (#4327) */
    text-align: center;
    transition: background 0.15s, color 0.15s;
}
.load-more-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
/* A phone or a touch screen: the step bars (a group's and a roll-up's) and "Load older messages" are 44 px targets, not 32 (#4327, from the #4276
   audit: the most numerous taps in a long chat). A mouse layout keeps the compact height. */
@media (pointer: coarse), (max-width: 767px) {
    .work-group-summary { min-height: var(--control-touch-height, 44px); }
    .load-more-btn { min-height: var(--control-touch-height, 44px); }
}

/* ── Center Chat View (Terminal/Chat toggle) ───────────────── */

.live-view-toggle[hidden] {
    display: none; /* plain terminals: no transcript, no toggle */
}

.live-view-toggle {
    display: flex;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-right: 4px;
}

.live-view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    cursor: pointer;
}

.live-view-toggle-btn + .live-view-toggle-btn {
    border-left: 1px solid var(--border);
}

.live-view-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.live-view-toggle-btn.active {
    color: var(--text-on-accent);   /* the dim accent is dark blue in the light theme: the icon was dark on it, 2.1:1 (#4023) */
    background: var(--accent-dim);
}

/* The terminal views keep their inline display (set by sessions.js); chat
   mode overrides it so the terminal stays alive but hidden. */
.live-history-center {
    display: none;
}

.capture-wrapper.chat-mode #pane-capture,
.capture-wrapper.chat-mode #xterm-container,
.capture-wrapper.chat-mode .terminal-statusbar {
    display: none !important;
}

.capture-wrapper.chat-mode .live-history-center {
    display: block;
    min-height: 0;
    padding: 12px 20px;
}

/* Jump to latest (#4511): a quiet round button at the bottom centre of the chat, above the input, while you read higher up (the
   operator's restyle: it blends in). A black circle with a white down arrow, a thin light edge and a soft shadow so it reads on
   the black chat, its arrow a little faded until hovered or focused; a dark grey circle in the light theme. 34 px on a desktop; on a touch
   screen the button is a 44 px target and the 36 px circle is drawn inside it. New messages show as a small dot; the count is in
   its name and the live region. */
.chat-jump-latest {
    position: absolute;
    /* Centred just above the input (the Orchestrator's call on UX's #4511 NIT): at the right edge it covered a reply's Copy
       (and Save) buttons; here it covers a little of the bottom line's text, never a control, and needs no gutter. */
    left: 50%;
    transform: translateX(-50%);
    bottom: 12px;
    z-index: 5;
    pointer-events: none;
    --jump-bg: #000;
    --jump-edge: rgba(255, 255, 255, 0.22);
}
[data-theme="light"] .chat-jump-latest { --jump-bg: #3a3a3a; --jump-edge: rgba(var(--black-rgb), 0.18); }
.capture-wrapper:not(.chat-mode) .chat-jump-latest { display: none; }
.chat-jump-latest-btn {
    pointer-events: auto;
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--jump-edge);
    border-radius: 50%;
    background: var(--jump-bg);
    color: rgba(var(--white-rgb), 0.78); /* the arrow faded at rest; the circle stays opaque, so the text under it does not show through */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(var(--black-rgb), 0.3);
    transition: color 0.15s ease;
}
.chat-jump-latest-btn:hover, .chat-jump-latest-btn:focus-visible { color: var(--text-on-accent); }
.chat-jump-latest-btn[hidden] { display: none; }
.chat-jump-latest-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.chat-jump-latest-btn svg { position: relative; width: 18px; height: 18px; }
/* A small dot when messages came in while you read higher up. */
.chat-jump-latest-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--jump-bg);
}
.chat-jump-latest-dot[hidden] { display: none; }
/* Touch: the button is the 44 px target, transparent; the circle is its ::before, 36 px. */
@media (pointer: coarse) {
    .chat-jump-latest-btn { width: 44px; height: 44px; border: 0; background: none; box-shadow: none; }
    .chat-jump-latest-btn::before {
        content: '';
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        border: 1px solid var(--jump-edge);
        background: var(--jump-bg);
        box-shadow: 0 1px 6px rgba(var(--black-rgb), 0.3);
    }
    .chat-jump-latest-dot { top: 5px; right: 5px; }
}
@media (prefers-reduced-motion: reduce) { .chat-jump-latest-btn { transition: none; } }
.chat-jump-latest-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Icon-only toggle (the tooltips and aria-labels name the views) */
.live-view-toggle-btn > span:not(.material-icons) {
    display: none;
}
.live-view-toggle-btn {
    padding: 3px 7px;
}
.live-view-toggle-btn .material-icons {
    font-size: 1rem;
}

/* ── Chat prose: reading typography (live Chat view + history Chat tab) ── */
/* Prose uses the shared body role, with user-overridable family/size.
   Code blocks retain their independent mono styling and language labels. */

.chat-prose {
    --chat-code-bg: color-mix(in srgb, var(--bg-tertiary) 70%, var(--bg-primary));
    /* Chat colors come from the theme (theme editor > Chat):
       --chat-prose-inline-code (base theme: #e5931f, variables.css) and
       --chat-prose-human-bg (unset: a neutral tint). Blue is kept for links. */
    --chat-inline-code: var(--chat-prose-inline-code, var(--text-primary));
    --chat-prose-human: var(--chat-prose-human-bg, color-mix(in srgb, var(--text-primary) 9%, transparent));
}

.capture-wrapper.chat-mode .live-history-center,
.chat-prose.chat-messages {
    padding: 24px 28px 40px;
}

.chat-prose > * {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.chat-prose.chat-messages .chat-bubble.assistant .role-label {
    display: none;
}

.chat-prose.chat-messages .chat-bubble.assistant {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 auto 22px;
    max-width: 780px;
}

.chat-prose.chat-messages .chat-bubble.assistant .message-text {
    font-family: var(--chat-prose-font);
    font-size: var(--chat-prose-size);
    line-height: 1.5;
    color: var(--text-primary);
}

.chat-prose.chat-messages .chat-bubble.assistant .message-text p {
    margin: 0 0 14px;
}
.chat-prose.chat-messages .chat-bubble.assistant .message-text > :last-child {
    margin-bottom: 0;
}

.chat-prose.chat-messages .chat-bubble.assistant .message-text h1,
.chat-prose.chat-messages .chat-bubble.assistant .message-text h2,
.chat-prose.chat-messages .chat-bubble.assistant .message-text h3,
.chat-prose.chat-messages .chat-bubble.assistant .message-text h4 {
    font-family: var(--chat-prose-font);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 26px 0 10px;
}
.chat-prose.chat-messages .chat-bubble.assistant .message-text h1 { font-size: 1.5em; }
.chat-prose.chat-messages .chat-bubble.assistant .message-text h2 { font-size: 1.3em; }
.chat-prose.chat-messages .chat-bubble.assistant .message-text h3 { font-size: 1.12em; }
.chat-prose.chat-messages .chat-bubble.assistant .message-text h4 { font-size: 1em; }
.chat-prose.chat-messages .chat-bubble.assistant .message-text > :first-child { margin-top: 0; }

.chat-prose.chat-messages .chat-bubble.assistant .message-text ul,
.chat-prose.chat-messages .chat-bubble.assistant .message-text ol {
    margin: 0 0 14px;
    padding-left: 26px;
}
.chat-prose.chat-messages .chat-bubble.assistant .message-text li {
    margin: 4px 0;
}

.chat-prose.chat-messages .chat-bubble.assistant .message-text hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 28px 0;
}

.chat-prose.chat-messages .chat-bubble.assistant .message-text blockquote {
    border-left: 3px solid var(--border-light);
    margin: 0 0 14px;
    padding: 2px 0 2px 14px;
    color: var(--text-secondary);
}

.chat-prose.chat-messages .chat-bubble.assistant .message-text a {
    color: var(--accent-light, var(--accent));
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Inline code: tinted, on a faint chip */
.chat-prose.chat-messages .chat-bubble .message-text :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.84em;
    color: var(--chat-inline-code);
    background: var(--chat-code-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 5px;
}

/* Code blocks: a card with the language as a small label */
.chat-prose.chat-messages .chat-bubble .message-text pre {
    position: relative;
    background: var(--chat-code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-ml);
    padding: 16px 18px;
    margin: 0 0 16px;
    overflow-x: auto;
}
.chat-prose.chat-messages .chat-bubble .message-text pre code {
    font-family: var(--font-mono);
    font-size: 0.8438rem;
    line-height: 1.6;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
}
.chat-prose.chat-messages .chat-bubble .message-text pre code.hljs {
    background: none;
    padding: 0;
}

.chat-prose.chat-messages .chat-bubble .message-text table {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    margin: 0 0 16px;
}

/* User turns stay as a compact, neutral bubble on the right */
.chat-prose.chat-messages .chat-bubble.human {
    background: var(--chat-prose-human);
    color: var(--text-primary);
    margin: 28px 0 22px auto;
    /* 85% of the 780px reading column, or of the screen when it is narrower (#4208) */
    max-width: calc(min(100%, 780px) * 0.85);
    border: none;
    padding: 10px 16px;
}
.chat-prose.chat-messages > .chat-bubble.human {
    margin-right: max(0px, calc((100% - 780px) / 2));
}
.chat-prose.chat-messages .chat-bubble.human .role-label {
    display: none;
}
.chat-prose.chat-messages .chat-bubble.human .message-text {
    font-size: var(--fs-lg);
    line-height: 1.55;
}

/* Coral's notices and notes start where the prose does: the column is 780px wide and centred
   (.chat-prose > * above), so a shrink-to-fit pill takes the same left margin. Inside a
   wrapper that is itself the column (pending messages) the base margin of 0 already lines up. */
.chat-prose > .chat-system,
.chat-prose > .chat-note {
    margin-left: max(0px, calc((100% - 780px) / 2));
    margin-right: auto;
}

/* Tool/work groups: quieter, sans, so prose stands out */
.chat-prose .work-group,
.chat-prose .work-rollup {
    margin-bottom: 18px;
}

/* History: "Edit & Resubmit" sits beside the compact user bubble, not over it */
.chat-prose.chat-messages .chat-bubble.human .edit-btn {
    top: 50%;
    right: calc(100% + 8px);
    transform: translateY(-50%);
    white-space: nowrap;
}

/* File references in the live Chat view open in the Files preview */
.live-history-center .chat-file-ref {
    cursor: pointer;
}
.live-history-center .chat-file-ref.chat-file-ref-loading {
    opacity: 0.6;
    cursor: wait;
}
.live-history-center code.chat-file-ref:hover,
.live-history-center .chat-file-ref-bare:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.live-history-center .chat-file-ref-bare {
    color: var(--link-text);
}

/* Options for a clicked file reference */
.chat-file-menu {
    position: fixed;
    z-index: 300;
    min-width: 180px;
    max-width: 360px;
    padding: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.chat-file-menu-path {
    padding: 4px 10px 6px;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: left;
}
.chat-file-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-primary);
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
}
.chat-file-menu button .material-icons {
    font-size: var(--icon-inline-size);
    color: var(--text-muted);
}
.chat-file-menu button:hover,
.chat-file-menu button:focus-visible {
    background: var(--bg-hover);
    outline: none;
}

/* Sent but not yet in the transcript: dimmed bubble with a "Queued" label */
.chat-bubble.human.pending {
    opacity: 0.6;
    border: 1px dashed var(--border-light);
}
.chat-bubble.human.pending .pending-label {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    text-align: right;
    margin-top: 4px;
    font-family: var(--font-sans);
}
.chat-bubble.human.pending .pending-label::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--warning);
    vertical-align: 1px;
}

/* Agent is working: a quiet row at the bottom of the chat */
.chat-working {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px auto 18px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
}
.chat-working-dots {
    display: inline-flex;
    gap: 3px;
}
.chat-working-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: chat-working-pulse 1.2s infinite ease-in-out;
}
.chat-working-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-working-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-working-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .chat-working-dots i { animation: none; opacity: 0.7; }
}

/* An Esc interrupt: a small note, not a message from the user, at the message column's left
   edge like Coral's notices (#3592) */
.chat-note {
    text-align: left;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 6px 0 16px;
}
.chat-note::before {
    content: "—";
    margin-right: 8px;
    opacity: 0.6;
}

/* A message Coral typed into the agent's terminal (board or task nudge):
   a one-line notice instead of a bubble from the user. It shrinks to its text and starts at the
   message column's left edge, so it doesn't shift with the text's length (#3592). */
.chat-system {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: min(780px, 100%);
    margin: 4px 0 16px;
    padding: 4px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    line-height: 1.4;
}
/* A health check: the pill in the secondary accent (a left bar on a round pill read as a
   bracket once the pills lined up). */
.chat-system-health {
    border-color: color-mix(in srgb, var(--accent-secondary) 40%, transparent);
    background: color-mix(in srgb, var(--accent-secondary) 8%, transparent);
}
.chat-system-health .chat-system-label,
.chat-system-health .material-icons {
    color: var(--accent-secondary);
}
.chat-system .material-icons {
    flex: none;
    font-size: var(--icon-inline-size);
    color: var(--accent);
}
.chat-system-label {
    flex: none;
    font-weight: 600;
    color: var(--accent);
}
.chat-system-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-system-count {
    flex: none;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Agent is waiting on the user: what it is asking, and a way to answer */
.chat-needs-input {
    margin: 8px auto 22px;
    padding: 16px 18px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-ml);
    background: var(--bg-secondary);
    font-family: var(--font-sans);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(var(--black-rgb), 0.12);
}
.cni-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}
.cni-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning);
    flex-shrink: 0;
    animation: cni-pulse 2s ease-in-out infinite;
}
@keyframes cni-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .cni-dot { animation: none; }
}
.cni-kicker {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--warning);
}
.cni-question {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 2px 0 12px;
}
.cni-context-text {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin: -6px 0 8px;
}
.cni-target {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 10px;
    margin: 0 0 12px;
    overflow-x: auto;
    font-size: var(--fs-base);
}
.cni-plan {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    margin: 0 0 12px;
    background: var(--bg-primary);
    font-size: 0.875rem;
}
.cni-plan h1, .cni-plan h2, .cni-plan h3, .cni-plan h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 10px 0 4px;
}
.cni-plan > :first-child {
    margin-top: 0;
}
.cni-plan p, .cni-plan ul, .cni-plan ol {
    margin: 4px 0;
}
.cni-plan ul, .cni-plan ol {
    padding-left: 22px;
}
.cni-plan li {
    margin: 2px 0;
}
.cni-static-q {
    margin: 0 0 10px;
    font-size: 0.875rem;
}
.cni-static-q ul {
    margin: 4px 0 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

/* Options: chips for short answers, small cards when they have descriptions */
.cni-options {
    margin: 0 0 12px;
}
.cni-options-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cni-options-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.cni-answer:not(.btn):not(.cni-link) {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    text-align: left;
    padding: 8px 12px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.cni-options-cards .cni-answer:not(.btn):not(.cni-link) {
    padding: 10px 12px;
}
.cni-answer:not(.btn):not(.cni-link):hover:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary));
}
.cni-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1.5px solid var(--control-border);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--text-on-accent);
}
.cni-answer.is-checked {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border-light));
}
.cni-answer.is-checked .cni-box {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
}
.cni-answer.is-default {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-light));
}
.cni-answer:disabled {
    opacity: 0.5;
    cursor: default;
}
.cni-answer.sending {
    opacity: 1;
    border-color: var(--accent);
}
.cni-key {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 16px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-primary);
    margin-top: 1px;
}
.cni-answer-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cni-answer-label {
    font-weight: 600;
}
.cni-answer-desc {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Typing an answer / feedback */
.cni-text-form {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
}
.cni-text-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.875rem;
}
.cni-text-input::placeholder {
    color: var(--text-muted);
}
.cni-text-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Review step: each question with its answer */
.cni-review {
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    overflow: hidden;
}
/* Stacked (question, then answer) so a long typed answer or question never
   squeezes the other into a narrow column */
.cni-review-row {
    padding: 9px 12px;
}
.cni-review-row + .cni-review-row {
    border-top: 1px solid var(--border);
}
.cni-review dt {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    line-height: 1.4;
    margin: 0 0 3px;
    overflow-wrap: anywhere;
}
.cni-review dd {
    margin: 0;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* Footer: Open terminal (quiet) on the left, primary actions on the right */
.cni-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-base);
}
.cni-foot-spacer {
    flex: 1;
}
.cni-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}
.cni-link:hover:not(:disabled) {
    color: var(--text-primary);
    text-decoration-color: currentColor;
}
.cni-hint {
    color: var(--text-muted);
}
.cni-foot .btn {
    font-size: 0.8125rem;
}

/* A brand-new agent with no transcript yet: a title and what to do next */
.chat-empty {
    text-align: center;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    margin: 3rem auto;
    padding: 0 1rem;
    max-width: 28rem;
}
.chat-empty-title {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.375rem;
}
.chat-empty-hint {
    line-height: 1.5;
}

/* Chat mode: the command pane keeps just Cancel (Esc) and Send. The mode
   buttons, macros and raw arrow/Enter keys are terminal tools and read as
   noise next to the chat. */
#command-pane.chat-mode .toolbar-group-modes,
#command-pane.chat-mode .toolbar-divider,
#command-pane.chat-mode .toolbar-group-macros,
#command-pane.chat-mode .btn-nav-key {
    display: none;
}
.btn-esc .esc-label-chat,
#command-pane.chat-mode .btn-esc .esc-label-terminal {
    display: none;
}
#command-pane.chat-mode .btn-esc .esc-label-chat {
    display: inline;
}

/* Chat mode: the composer card narrows to the transcript's reading column */
@media (min-width: 768px) {
    #command-pane.chat-mode {
        width: calc(100% - 56px);
        max-width: 780px;
    }
}

/* Copy button on agent replies: top-right of a bubble, or tucked into the
   space under the reply's right edge in prose mode. Shown on hover or keyboard focus. */
.chat-bubble.assistant .chat-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
}
.chat-bubble.assistant .chat-copy-btn .material-icons {
    font-size: var(--icon-inline-size);
}
.chat-bubble.assistant:hover .chat-copy-btn,
.chat-bubble.assistant .chat-copy-btn:focus-visible,
.chat-bubble.assistant .chat-copy-btn.copied {
    opacity: 1;
}
.chat-bubble.assistant .chat-copy-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.chat-bubble.assistant .chat-copy-btn.copied {
    color: var(--success, var(--accent));
}
.chat-prose.chat-messages .chat-bubble.assistant .chat-copy-btn {
    top: 100%;
    right: -4px;
    margin-top: 1px;
}
@media (hover: none) {
    .chat-bubble.assistant .chat-copy-btn {
        opacity: 0.6;
    }
}

/* Code blocks in chat: a wrapper holds the copy button in the corner so it
   stays put while the block scrolls sideways. The wrapper takes the block's
   outer margin. */
.chat-bubble .message-text .code-block {
    position: relative;
    margin: 8px 0;
}
.chat-prose.chat-messages .chat-bubble .message-text .code-block {
    margin: 0 0 16px;
}
.chat-bubble .message-text .code-block > pre,
.chat-prose.chat-messages .chat-bubble .message-text .code-block > pre {
    margin: 0;
}
.code-block .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s;
}
.code-block .code-copy-btn .material-icons {
    font-size: var(--icon-inline-size);
}
.code-block:hover .code-copy-btn,
.code-block .code-copy-btn:focus-visible,
.code-block .code-copy-btn.copied {
    opacity: 1;
}
.code-block .code-copy-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.code-block .code-copy-btn.copied {
    color: var(--success, var(--accent));
}
@media (hover: none) {
    .code-block .code-copy-btn {
        opacity: 0.7;
    }
}

/* ── Chat Loading Error State ──────────────────────────────── */

.chat-load-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
    flex-wrap: wrap;
}

.chat-load-error .chat-error-message {
    color: var(--danger);
}

/* ── Find in conversation ───────────────────────────────────── */
::highlight(chat-find) { background-color: rgba(var(--warning-rgb, 210, 153, 34), 0.35); color: inherit; }
::highlight(chat-find-current) { background-color: rgba(var(--accent-rgb), 0.6); color: inherit; }

.chat-find-bar {
    position: fixed;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.35);
}
.chat-find-bar[hidden] { display: none; }
.chat-find-input {
    width: 200px;
    padding: 3px 6px;
    background: var(--bg-primary);
    border: 1px solid var(--control-border);
    border-radius: 5px;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8125rem;
}
.chat-find-input:focus { outline: none; border-color: var(--accent); }
.chat-find-bar.no-results .chat-find-input { border-color: var(--error); }
.chat-find-count { min-width: 56px; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.chat-find-bar button {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.75rem;
}
.chat-find-bar button:hover:not(:disabled) { background: var(--bg-hover, rgba(var(--white-rgb), 0.08)); color: var(--text-primary); }
.chat-find-older { color: var(--accent) !important; }

/* Terminal view: the xterm accepts input directly, so the bottom command bar
   is redundant on desktop. Mobile keeps it (no hardware keyboard to type into
   the terminal). */
@media (min-width: 768px) {
    /* A sleeping or archived agent keeps its pane: the Wake / Restart / Unarchive bar lives in it,
       and without it the Terminal view is an empty box with no way back (#3735). */
    #command-pane:not(.chat-mode):not(.agent-sleeping) {
        display: none;
    }
}

/* Save for later (#4510): a bookmark one slot to the left of Copy on each reply, and on your own messages; filled and in the accent colour when saved. Shown on
   hover or keyboard focus, always while saved; on touch both are always shown at 44 px (touch.css). */
.chat-bubble .chat-save-btn {
    position: absolute;
    top: 6px;
    right: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
}
.chat-bubble.human .chat-save-btn { right: 6px; }
.chat-bubble .chat-save-btn svg { width: var(--icon-inline-size); height: var(--icon-inline-size); }
.chat-bubble:hover .chat-save-btn,
.chat-bubble .chat-save-btn:focus-visible,
.chat-bubble .chat-save-btn[aria-pressed="true"] { opacity: 1; }
.chat-bubble .chat-save-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.chat-bubble .chat-save-btn[aria-pressed="true"] { color: var(--accent); }
.chat-bubble .chat-save-btn[aria-pressed="true"] svg path, .mb-save-btn[aria-pressed="true"] svg path { fill: currentColor; }
.chat-bubble .chat-save-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-prose.chat-messages .chat-bubble .chat-save-btn { top: 100%; margin-top: 1px; right: 22px; }
.chat-prose.chat-messages .chat-bubble.human .chat-save-btn { right: -4px; }
.chat-bubble .chat-save-btn[hidden] { display: none; }
@media (hover: none) {
    .chat-bubble .chat-save-btn, .chat-bubble.assistant .chat-copy-btn { opacity: 1; }
}

/* A thumbnail on an image chip (#5028): fixed size, shown once the image has loaded. */
.chat-attachment-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    cursor: pointer;
}

.chat-attachment-thumb[hidden] {
    display: none;
}

.chat-attachment-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-attachment-thumb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* the page's polite live region for the prompt card: for screen readers only (#5252) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Code colours in the light theme (#5273): the vendored highlight.js theme is GitHub Dark, whose colours are 1.6 to 2.1:1 on a light panel. These are GitHub's light colours, a shade darker where
   GitHub's own are under 4.5:1 on the chat's code chip (#e7e9ed). */
[data-theme="light"] .hljs-doctag, [data-theme="light"] .hljs-keyword, [data-theme="light"] .hljs-meta .hljs-keyword, [data-theme="light"] .hljs-template-tag, [data-theme="light"] .hljs-template-variable,
[data-theme="light"] .hljs-type { color: #a40e26; }
[data-theme="light"] .hljs-title, [data-theme="light"] .hljs-title.function_ { color: #6639ba; }
[data-theme="light"] .hljs-attr, [data-theme="light"] .hljs-attribute, [data-theme="light"] .hljs-literal, [data-theme="light"] .hljs-meta, [data-theme="light"] .hljs-number, [data-theme="light"] .hljs-operator,
[data-theme="light"] .hljs-selector-attr, [data-theme="light"] .hljs-selector-class, [data-theme="light"] .hljs-selector-id, [data-theme="light"] .hljs-variable { color: #0550ae; }
[data-theme="light"] .hljs-meta .hljs-string, [data-theme="light"] .hljs-regexp, [data-theme="light"] .hljs-string { color: #0a3069; }
[data-theme="light"] .hljs-built_in, [data-theme="light"] .hljs-symbol, [data-theme="light"] .hljs-bullet { color: #8a3000; }
[data-theme="light"] .hljs-code, [data-theme="light"] .hljs-comment, [data-theme="light"] .hljs-formula { color: #57606a; }
[data-theme="light"] .hljs-name, [data-theme="light"] .hljs-quote, [data-theme="light"] .hljs-selector-pseudo, [data-theme="light"] .hljs-selector-tag { color: #116329; }
[data-theme="light"] .hljs-subst, [data-theme="light"] .hljs-emphasis, [data-theme="light"] .hljs-strong { color: inherit; }
[data-theme="light"] .hljs-section { color: #0550ae; font-weight: 700; }
[data-theme="light"] .hljs-addition { color: #0f5323; background-color: #dafbe1; }
[data-theme="light"] .hljs-deletion { color: #82071e; background-color: #ffebe9; }

/* The copy button on a code block is a 44 px target on a phone */
@media (max-width: 767px) {
    .code-block .code-copy-btn { width: 44px; height: 44px; }
}

/* An image pasted in the dashboard is an artifact (#5284): the button that removes its shared copy sits beside its thumbnail, and the notice that says Coral Hub viewers can see it. */
.chat-attachment-unshare {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 28px;
    min-height: 28px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
}
.chat-attachment-unshare[hidden] { display: none; }
.chat-attachment-unshare:hover { color: var(--text-primary); background: var(--bg-hover); }
.chat-attachment-unshare:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 767px) { .chat-attachment-unshare { min-width: 44px; min-height: 44px; } }

.share-notice { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--border)); border-radius: var(--radius-lg, 8px); background: color-mix(in srgb, var(--warning) 9%, var(--bg-secondary)); color: var(--text-primary); }
.share-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 767px) { .share-notice-actions { width: 100%; margin-left: 0; } .share-notice-actions .btn { flex: 1 1 auto; min-height: 44px; } }