/* L'orizzonte — chrome editor full-bleed.
   La UI dell'editor (seam, chip, document panel, command palette) vive
   `position: fixed` SOPRA il canvas: zero pixel sottratti al disegno.
   I valori di colore della seam mappano direttamente lo stato di salvataggio
   (vedi Components/Chrome/ChromeContext.cs). */

:root {
    --seam-h: 1px;
    --chrome-z-seam: 50;
    --chrome-z-chip: 51;
    --chrome-z-doc-panel: 70;
    --chrome-z-cmdk: 60;
    /* Excalidraw's top-left hamburger sits at --editor-container-padding
       1rem (16px) with --lg-button-size 2.5rem (40px). The chip is shorter
       (28px) and offset down so its vertical center matches the hamburger's
       (16 + 40/2 == 22 + 28/2 == 36px). */
    --chip-top: 22px;
    --chip-left: 64px;
    --chip-h: 28px;
    --chip-w: 180px;
    --chip-gap: 6px;
}

/* ── Seam ───────────────────────────────────────────────────────────────── */
.chrome-seam {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--seam-h);
    z-index: var(--chrome-z-seam);
    pointer-events: none;
    background: var(--quindi-text-soft);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.chrome-seam.is-idle      { background: rgba(255, 255, 255, 0.06); }
.chrome-seam.is-saved     { background: var(--accent); box-shadow: 0 0 16px rgba(0, 214, 143, 0.55); }
.chrome-seam.is-saving    { background: var(--quindi-amber); animation: seam-saving 1.1s ease-in-out infinite; }
.chrome-seam.is-conflict  { background: var(--quindi-red); animation: seam-shimmer 1.4s ease-in-out infinite; }
.chrome-seam.is-error     { background: var(--quindi-red); }

@keyframes seam-saving {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
@keyframes seam-shimmer {
    0%, 100% { box-shadow: 0 0 0 rgba(229, 72, 77, 0); }
    50%      { box-shadow: 0 0 20px rgba(229, 72, 77, 0.8); }
}

/* ── ⌘K onboarding hint — flashes after each scene load so the user is
   reminded of the command-palette shortcut whenever they enter a document.
   Anchored to the bottom of the viewport (out of the way of the canvas);
   CSS-driven 2 s lifecycle (slide-up + fade-in → hold → fade-out);
   EditorChrome removes it from the DOM right after. */
.chrome-cmdk-hint {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    color: var(--quindi-text);
    font-size: 13px;
    letter-spacing: 0.01em;
    box-shadow: var(--glass-shadow);
    pointer-events: none;
    animation: chrome-cmdk-hint 2s ease forwards;
}
.chrome-cmdk-hint kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 2px 8px;
    border: 1px solid var(--quindi-border);
    border-radius: 6px;
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
}
@keyframes chrome-cmdk-hint {
    0%   { opacity: 0; transform: translate(-50%, 12px); }
    15%  { opacity: 1; transform: translate(-50%, 0); }
    85%  { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
}

/* ── Conflict banner (top-center, persistent) ──────────────────────────────
   Shown by EditorChrome only while SaveStatus == Conflict. Sits above the
   canvas so the user can act without reloading the browser. */
.chrome-conflict-banner {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: min(92vw, 720px);
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-red);
    color: var(--quindi-text);
    box-shadow: 0 12px 36px rgba(229, 72, 77, 0.18), var(--glass-shadow);
}
.chrome-conflict-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.35;
}
.chrome-conflict-banner-text strong {
    color: var(--quindi-red);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.chrome-conflict-banner-text span {
    color: var(--quindi-text-soft);
}
.chrome-conflict-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── DocumentChip (top-left, always visible) ────────────────────────────── */
.chrome-chip {
    position: fixed;
    top: var(--chip-top);
    left: var(--chip-left);
    z-index: var(--chrome-z-chip);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: var(--chip-w);
    height: var(--chip-h);
    padding: 0 12px;
    border-radius: 999px;
    background: var(--quindi-surface-2);
    border: 1px solid var(--quindi-border);
    color: var(--quindi-text);
    font-family: var(--font-hand);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--glass-shadow-soft);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.chrome-chip:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}
.chrome-chip-mark {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.chrome-chip-label {
    line-height: 1;
    letter-spacing: 0;
}

/* ── DocumentPanel (popover anchored under the chip) ────────────────────── */
.doc-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--chrome-z-doc-panel);
    background: transparent;
    animation: glass-fade 0.18s ease;
}
.doc-panel {
    position: absolute;
    top: calc(var(--chip-top) + var(--chip-h) + var(--chip-gap));
    left: var(--chip-left);
    width: var(--chip-w);
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
    animation: glass-pop 0.2s ease;
    transform-origin: top left;
}
.doc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid var(--quindi-border);
}
.doc-panel-home,
.doc-panel-close {
    /* Centring strategy: position the SVG absolutely at top:50%/left:50% and
       translate it by -50% of its OWN size. This is invariant to every UA
       quirk that previous attempts ran into — browser-default padding,
       Safari's native button appearance offset, font/line-height baseline
       contribution, flex/grid sub-pixel rounding. Whatever the parent does,
       the SVG's centre always sits on the button's centre.
       Verified: both icon paths are symmetric in their 24×24 viewBox
       (home y=3..21, close ±5.3 around 12), so a perfect box-centre is also
       a perfect optical centre — no transform compensation needed. */
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    /* 2 px transparent border avoids the 1 px layout shift you'd get if the border
       grew on :hover; only the colour swaps, the box geometry never moves. */
    border: 2px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--quindi-text);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.doc-panel-home svg,
.doc-panel-close svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* pointer-events:none keeps the click on the parent <button> regardless
       of where the SVG strokes are hit. */
    pointer-events: none;
}
.doc-panel-home:hover,
.doc-panel-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.doc-panel-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}
.doc-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--quindi-border);
    border-radius: 999px;
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    font: inherit;
    font-size: 12px;
    text-align: left;
}
/* Action rows (Save now / Save revision / Share) must stay on a single line —
   the leading icon+label and trailing meta hint compose horizontally. The title
   row keeps its normal wrapping so long titles still flow over multiple lines
   when fitWords can't shrink them enough. */
.doc-panel-action {
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    min-width: 0;
}
.doc-panel-action:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.doc-panel-action.is-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #050505;
}
.doc-panel-action.is-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #050505;
}
.doc-panel-row-meta {
    color: var(--quindi-text-soft);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.doc-panel-action.is-primary .doc-panel-row-meta { color: rgba(5, 5, 5, 0.65); }
.doc-panel-row-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-panel-row-content > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-panel-row-icon {
    flex-shrink: 0;
    opacity: 0.85;
}
.doc-panel-row-meta {
    flex-shrink: 0;
}
.doc-panel-action.is-primary .doc-panel-row-icon { opacity: 1; }
/* Visual separator above ancillary actions (Save / Share). Short centred
   hairline (80 px) in the soft text colour so it reads as a grey divider
   rather than a full-width section border. */
.doc-panel-action.has-divider-above {
    margin-top: 12px;
    position: relative;
}
.doc-panel-action.has-divider-above::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 80px;
    height: 1px;
    background: var(--quindi-text-soft);
    opacity: 0.55;
    transform: translateX(-50%);
    pointer-events: none;
}
.doc-panel-title-row { padding: 6px 4px; border: none; background: transparent; overflow: hidden; }
.doc-panel-title-btn {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    background: none;
    border: 1px dashed transparent;
    border-radius: var(--radius-md);
    padding: 6px 10px;
    color: inherit;
    font-family: var(--font-hand);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    cursor: text;
    text-align: left;
    /* `break-word` only kicks in when fitWords can't shrink the font enough to
       fit the longest unbreakable token; anywhere/break-all would let "Quindi"
       split mid-word at full size, which is what regressed and produced the
       broken three-line stack. */
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    transition: border-color 0.12s ease;
}
.doc-panel-title-btn:hover {
    border-color: var(--quindi-border);
}
.doc-panel-title-input {
    flex: 1;
    width: 100%;
    background: var(--quindi-surface-2);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    color: var(--quindi-text);
    font-family: var(--font-hand);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    padding: 6px 10px;
    outline: none;
}
.doc-panel-status {
    background: transparent;
    border-color: transparent;
    color: var(--quindi-text-soft);
    font-size: 11px;
    justify-content: flex-start;
    padding: 4px 12px;
}
.doc-panel-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--quindi-text-soft);
    flex-shrink: 0;
}
.doc-panel-status-dot.is-idle      { background: rgba(255, 255, 255, 0.18); }
.doc-panel-status-dot.is-saved     { background: var(--accent); box-shadow: 0 0 8px rgba(0, 214, 143, 0.55); }
.doc-panel-status-dot.is-saving    { background: var(--quindi-amber); animation: seam-saving 1.1s ease-in-out infinite; }
.doc-panel-status-dot.is-conflict  { background: var(--quindi-red); }
.doc-panel-status-dot.is-error     { background: var(--quindi-red); }

.doc-panel-section-title {
    padding: 8px 12px 4px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--quindi-text-soft);
}
.doc-panel-revs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Each item is the pill + an optional note line beneath it, so heights
       vary. Cap visual height around 5 average-size items; past that the
       list scrolls. min-height: 0 + flex-shrink: 1 break the default
       `min-height: auto` that flex items inherit, which would otherwise
       stretch this box to its content's height and ignore max-height. */
    min-height: 0;
    flex-shrink: 1;
    max-height: 280px;
    overflow-y: auto;
    padding: 0 2px 4px;
}
/* Each revision item stacks the pill row on top of the (optional) note
   line. Keeping these in a single flex column means hover affordances on
   the pill don't extend onto the note and vice-versa. */
.doc-panel-rev-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
/* A revision row pairs the pill (preview trigger) with a small × that
   removes the revision. The × is hidden by default and reveals on row
   hover so the resting list stays calm. The current revision shows no
   ×: deleting it would orphan the live pointer. */
.doc-panel-rev-row {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.doc-panel-rev-row:hover .doc-panel-rev-del,
.doc-panel-rev-row:focus-within .doc-panel-rev-del { opacity: 1; pointer-events: auto; }
.doc-panel-rev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 28px;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    /* The right padding always reserves room for the × overlay so the
       timestamp doesn't get hidden behind it on hover. */
    padding: 0 32px 0 12px;
    border: 1px solid var(--quindi-border);
    border-radius: 999px;
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.doc-panel-rev:hover { border-color: var(--accent); color: var(--accent); }
/* Current revision keeps the same 32 px right padding as the other rows so
   timestamps line up vertically across the list — it just doesn't get a ×
   overlay (deleting the live pointer is forbidden). */
.doc-panel-rev.is-current { border-color: var(--accent); }
.doc-panel-rev-del {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: var(--quindi-surface);
    color: var(--quindi-text-soft);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.doc-panel-rev-del:hover { color: var(--quindi-red); background: rgba(229, 72, 77, 0.12); }
.doc-panel-rev-del:focus-visible { opacity: 1; pointer-events: auto; outline: 1px solid var(--accent); }
/* Inline confirm pill that takes over the row when the user clicked × on
   that revision. Stays visible (no opacity gating), uses the danger color
   and a slightly bigger footprint so the user can't fat-finger it. */
.doc-panel-rev-confirm {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--quindi-red);
    border-radius: 999px;
    background: rgba(229, 72, 77, 0.18);
    color: var(--quindi-red);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 0 2px var(--quindi-surface);
}
.doc-panel-rev-confirm:hover { background: var(--quindi-red); color: #fff; }
.doc-panel-rev .num { font-family: var(--font-sans); font-size: 12px; font-weight: 600; }
.doc-panel-rev .when { font-family: var(--font-sans); font-size: 11px; color: var(--quindi-text-soft); }
.doc-panel-rev:hover .when { color: var(--accent); }

/* Inline note line beneath each revision pill. Filled state shows the
   trimmed comment (truncated with ellipsis), empty state shows a quiet
   "+ Add note" affordance that brightens on hover. Both forms are full-
   width buttons so the click target spans the row, but they do NOT look
   like the primary pill — flat background, indented, smaller type. */
.doc-panel-rev-note {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin: 0;
    padding: 2px 12px 2px 16px;
    border: none;
    background: transparent;
    color: var(--quindi-text);
    font: inherit;
    font-size: 11px;
    line-height: 1.35;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px;
    transition: background 0.12s ease, color 0.12s ease;
}
.doc-panel-rev-note:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
}
.doc-panel-rev-note.is-empty {
    color: var(--quindi-text-soft);
    font-style: italic;
}
.doc-panel-rev-note.is-empty:hover { color: var(--accent); font-style: normal; }
/* Inline edit form: textarea + action row. Kept indented to align with the
   read-only note above, so editing in-place doesn't shift the visual
   anchor. */
.doc-panel-rev-note-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 6px 6px 16px;
}
.doc-panel-rev-note-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    max-height: 140px;
    resize: vertical;
    padding: 6px 8px;
    border: 1px solid var(--quindi-border);
    border-radius: 6px;
    background: var(--quindi-surface);
    color: var(--quindi-text);
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.12s ease;
}
.doc-panel-rev-note-input:focus { border-color: var(--accent); }
.doc-panel-rev-note-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.doc-panel-rev-note-count {
    flex: 1;
    font-size: 10px;
    color: var(--quindi-text-soft);
}
.doc-panel-rev-note-btn {
    height: 22px;
    padding: 0 10px;
    border: 1px solid var(--quindi-border);
    border-radius: 999px;
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.doc-panel-rev-note-btn:hover { border-color: var(--accent); color: var(--accent); }
.doc-panel-rev-note-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.doc-panel-rev-note-btn.is-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #050505;
}
.doc-panel-rev-note-btn.is-primary:hover { filter: brightness(1.08); }
.doc-panel-rev-note-error {
    font-size: 11px;
    color: var(--quindi-red);
    padding-left: 2px;
}
.doc-panel-revs-empty {
    padding: 10px 12px;
    font-size: 11px;
    color: var(--quindi-text-soft);
    text-align: center;
}

/* ── CommandPalette (⌘K) ───────────────────────────────────────────────── */
.cmdk-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--chrome-z-cmdk);
    background: var(--scrim);
    display: grid;
    place-items: start center;
    padding-top: 18vh;
    animation: glass-fade 0.18s ease;
}
.cmdk-panel {
    width: min(560px, 92vw);
    background: var(--quindi-surface);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: glass-pop 0.2s ease;
}
.cmdk-input {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-bottom: 1px solid var(--quindi-border);
    background: transparent;
    color: var(--quindi-text);
    font: inherit; font-size: 16px;
    outline: none;
}
.cmdk-input::placeholder { color: var(--quindi-text-soft); }
.cmdk-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 6px;
}
.cmdk-section-title {
    padding: 10px 14px 6px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--quindi-text-soft);
}
.cmdk-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--quindi-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit; font-size: 14px;
    text-align: left;
    transition: background 0.1s ease;
}
.cmdk-item:hover,
.cmdk-item.is-selected {
    background: var(--accent-soft);
}
.cmdk-item .cmdk-shortcut {
    color: var(--quindi-text-soft);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.cmdk-empty {
    padding: 24px;
    color: var(--quindi-text-soft);
    text-align: center;
    font-size: 13px;
}

/* ── Comments button + side panel ───────────────────────────────────────── */
.chrome-comments-btn {
    position: fixed;
    top: var(--chip-top);
    /* Sit just to the right of the document chip. */
    left: calc(var(--chip-left) + var(--chip-w) + 8px);
    z-index: var(--chrome-z-chip);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--chip-h);
    padding: 0 12px;
    border-radius: 999px;
    background: var(--quindi-surface-2);
    border: 1px solid var(--quindi-border);
    color: var(--quindi-text);
    font-family: var(--font-hand);
    font-size: 13px;
    cursor: pointer;
    box-shadow: var(--glass-shadow-soft);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.chrome-comments-btn:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}
.chrome-comments-btn-label { line-height: 1; }

.comments-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(0, 0, 0, 0.18);
    animation: glass-fade 0.18s ease;
}
.comments-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    z-index: 80;
    background: var(--quindi-surface);
    border-left: 1px solid var(--quindi-border);
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-direction: column;
    animation: glass-slide-right 0.22s ease;
}
@keyframes glass-slide-right {
    from { transform: translateX(8px); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
.comments-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--quindi-border);
}
.comments-panel-title {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--quindi-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.comments-panel-count {
    font-size: 11px;
    color: var(--quindi-text-soft);
    background: var(--quindi-surface-2);
    border: 1px solid var(--quindi-border);
    border-radius: 999px;
    padding: 1px 8px;
}
.comments-panel-close {
    width: 26px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--quindi-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.comments-panel-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.comments-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.comments-panel-empty {
    color: var(--quindi-text-soft);
    font-size: 13px;
    padding: 24px 4px;
    text-align: center;
}
.comments-panel-foot {
    border-top: 1px solid var(--quindi-border);
    padding: 12px 16px;
    background: var(--quindi-surface-2);
}
.comment-thread {
    border: 1px solid var(--quindi-border);
    border-radius: 8px;
    background: var(--quindi-surface-2);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comment-thread.is-resolved { opacity: 0.75; }
.comment {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.comment.is-reply {
    margin-left: 16px;
    padding-left: 10px;
    border-left: 2px solid var(--quindi-border);
}
.comment.is-deleted { opacity: 0.6; }
.comment-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}
.comment-author { color: var(--quindi-text); font-weight: 600; }
.comment-meta { color: var(--quindi-text-soft); }
.comment-badge {
    margin-left: auto;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--quindi-border);
}
.comment-badge.resolved { color: var(--accent); border-color: var(--accent); }
.comment-body { color: var(--quindi-text); font-size: 13px; }
.comment-body-text {
    margin: 0;
    font: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}
.comment-actions {
    display: inline-flex;
    gap: 12px;
    margin-top: 2px;
}
.comment-action-link {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.comment-action-link:hover { text-decoration: underline; }
.comment-action-link.danger { color: var(--quindi-danger, #d4554b); }
.comment-reply-row { display: flex; flex-direction: column; gap: 6px; }
.comment-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid var(--quindi-border);
    border-radius: 6px;
    background: var(--quindi-surface);
    color: var(--quindi-text);
    font: inherit;
    font-size: 13px;
    padding: 8px 10px;
}
.comment-input:focus {
    outline: none;
    border-color: var(--accent);
}
.comment-input-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}
.comment-input-hint {
    margin-right: auto;
    color: var(--quindi-text-soft);
    font-size: 11px;
}
.comment-btn {
    appearance: none;
    border: 1px solid var(--quindi-border);
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.comment-btn:hover { border-color: var(--accent); color: var(--accent); }
.comment-btn.primary { background: var(--accent); color: var(--quindi-surface); border-color: var(--accent); }
.comment-btn.primary:hover { filter: brightness(0.95); color: var(--quindi-surface); }
.comment-btn.ghost { background: transparent; }
.comment-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .chrome-seam,
    .chrome-chip,
    .chrome-comments-btn,
    .doc-panel,
    .doc-panel-backdrop,
    .comments-panel,
    .comments-panel-backdrop,
    .cmdk-panel,
    .cmdk-backdrop {
        animation: none !important;
        transition: none !important;
    }
}