/* 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;
    --doc-panel-w: 248px;
    --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: var(--radius-md);
    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: var(--radius-lg);
    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: flex-start;
    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 {
    display: block;
    line-height: 1.15;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chrome-chip-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.chrome-chip-status {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--quindi-text-soft);
    font-family: var(--font-sans);
    font-size: 10px;
    line-height: 1;
}
.chrome-chip-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.chrome-chip-status.is-saved { color: var(--accent); }
.chrome-chip-status.is-saving { color: var(--quindi-amber); }
.chrome-chip-status.is-conflict,
.chrome-chip-status.is-error { color: var(--quindi-red); }
.chrome-chip-chevron {
    flex: 0 0 auto;
    color: var(--quindi-text-soft);
}

/* ── 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(--doc-panel-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-head-left {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.doc-panel-home,
.doc-panel-back,
.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-back 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-back: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: var(--radius-sm);
    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;
}
/* Toggled-on state for a menu action (e.g. Presentation / Underline while active). */
.doc-panel-action.is-active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.doc-panel-action.is-active .doc-panel-row-icon { color: var(--accent); opacity: 1; }
.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;
}
/* Export block — a divider above, then the download icon inline with the three
   format chips on a single row. The chips flex to share the remaining width. */
.doc-panel-export {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    position: relative;
}
.doc-panel-export::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 80px;
    height: 1px;
    background: var(--quindi-text-soft);
    opacity: 0.55;
}
.doc-panel-export-icon {
    flex: 0 0 auto;
    color: var(--quindi-text-soft);
}
.doc-panel-export-formats {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
}
.doc-panel-export-link {
    appearance: none;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 32px;
    gap: 4px;
    padding: 5px 4px;
    background: transparent;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    color: var(--quindi-text-soft);
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.doc-panel-export-link:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}
.doc-panel-export-link:disabled {
    opacity: 0.5;
    cursor: progress;
}
.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;
    min-height: 32px;
    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: var(--radius-sm);
    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: 28px;
    height: 28px;
    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: 2px solid var(--accent); outline-offset: 1px; }
/* 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: var(--radius-sm);
    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: var(--radius-sm);
    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;
}
/* Title + optional content-match snippet stacked in the item. */
.cmdk-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.cmdk-item-text .cmdk-snippet {
    font-size: 11px;
    color: var(--quindi-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cmdk-empty {
    padding: 24px;
    color: var(--quindi-text-soft);
    text-align: center;
    font-size: 13px;
}

/* ── Chrome buttons (Recenti top-left, Comments bottom-right) ───────────── */
.chrome-recents-btn,
.chrome-comments-btn {
    position: fixed;
    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-recents-btn:hover,
.chrome-comments-btn:hover {
    border-color: var(--accent);
    transform: scale(1.02);
}
.chrome-recents-btn-label,
.chrome-comments-btn-label { line-height: 1; }

/* Brand-green icons, white labels. The SVGs stroke with currentColor, so colour
   the icon green here while the button's own color keeps the label white. */
.chrome-recents-btn svg,
.chrome-comments-btn svg { color: var(--accent); }

/* Recenti — sits where Comments used to: just right of the document chip. */
.chrome-recents-btn {
    top: var(--chip-top);
    left: calc(var(--chip-left) + var(--chip-w) + 8px);
}

/* Comments — moved to the bottom-right, to the LEFT of Excalidraw's "?" help
   button (which lives in the very corner). The right offset clears it; tune if
   the Excalidraw footer geometry changes. */
.chrome-comments-btn {
    right: 60px;
    bottom: 19px;
}


/* Red unread badge on the Comments pill — lit when a collaborator has commented
   since the user last opened the panel (EditorChrome polls + a per-device
   localStorage "seen" marker). The pill is position:fixed, so this anchors to it. */
.chrome-comments-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #E5484D;
    /* Ring in the pill's own surface colour so the dot reads as a badge sitting
       on the corner rather than bleeding into the edge. */
    box-shadow: 0 0 0 2px var(--quindi-surface-2);
    pointer-events: none;
}

.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: var(--radius-sm);
    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: var(--radius-md);
    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;
}
/* Author can be a long email — truncate it so the timestamp/badge never get
   squeezed onto a second wrapped line in the narrow comments panel. */
.comment-author {
    color: var(--quindi-text);
    font-weight: 600;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comment-meta { color: var(--quindi-text-soft); flex: 0 0 auto; white-space: nowrap; }
.comment-badge {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 10px;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    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: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 6px;
}
.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-red); }

/* Element-anchored comments — "On element" jump chip (in the actions row) +
   composer "attach" toggle. Both stay on a single line (nowrap) so their labels
   never break mid-word in the narrow comments panel. */
.comment-anchor-chip {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    appearance: none;
    border: 1px solid var(--quindi-border);
    background: transparent;
    color: var(--quindi-text-soft);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}
.comment-anchor-chip:hover { color: var(--accent); border-color: var(--accent); }
.comment-anchor-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    appearance: none;
    border: 1px solid var(--quindi-border);
    background: var(--quindi-surface);
    color: var(--quindi-text-soft);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
.comment-anchor-toggle:hover { color: var(--quindi-text); }
.comment-anchor-toggle.is-on {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--quindi-surface-2);
}
.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;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
/* Post sits at the right of the row; if the toggle + button don't fit, the
   button wraps to its own line instead of squeezing both. */
.comment-input-actions .comment-btn { margin-left: auto; }
.comment-input-hint {
    display: block;
    margin-top: 6px;
    color: var(--quindi-text-soft);
    font-size: 11px;
}
.comment-btn {
    appearance: none;
    white-space: nowrap;
    border: 1px solid var(--quindi-border);
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    border-radius: var(--radius-sm);
    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; }

/* ── RecentDocumentsPanel (popover under the Recenti button) ─────────────── */
.recents-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--chrome-z-doc-panel);
    background: transparent;
    animation: glass-fade 0.18s ease;
}
.recents-panel {
    position: fixed;
    top: calc(var(--chip-top) + var(--chip-h) + var(--chip-gap));
    left: calc(var(--chip-left) + var(--chip-w) + 8px);
    width: 288px;
    max-height: min(70vh, 460px);
    z-index: calc(var(--chrome-z-doc-panel) + 1);
    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;
    animation: glass-pop 0.2s ease;
    transform-origin: top left;
}
.recents-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--quindi-border);
}
.recents-panel-title {
    margin: 0;
    font-family: var(--font-hand);
    font-size: 14px;
    color: var(--quindi-text);
}
.recents-panel-close {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    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;
}
.recents-panel-close svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.recents-panel-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.recents-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.recents-panel-empty {
    padding: 20px 14px;
    text-align: center;
    color: var(--quindi-text-soft);
    font-size: 13px;
}
.recents-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-md);
    background: var(--quindi-surface-2);
    color: var(--quindi-text);
    transition: border-color 0.12s ease, background 0.12s ease;
}
/* Navigation area of the row (thumb + title); the pin button sits beside it. */
.recents-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
/* The link inherits the global a:hover underline — and on touch the hover state
   sticks after a tap, leaving the row underlined. The accent border already
   signals hover/selection; no underline, ever. */
.recents-item-link:hover,
.recents-item-link:focus,
.recents-item-link:active {
    text-decoration: none;
}
.recents-item:hover {
    border-color: var(--accent);
    background: var(--quindi-surface);
}
.recents-item:hover .recents-item-thumb {
    box-shadow: 0 0 0 1px rgba(0, 214, 143, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* Thumbnail box — mirrors .gallery-thumb so quindi.thumbnails.attach (which swaps
   .is-placeholder → .has-thumb and injects img.gallery-thumb-img) renders the same. */
.recents-item-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 46px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #ffffff;
    /* Mounted-print frame to match the dashboard cards, just smaller. */
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--quindi-text-soft);
}
.recents-item-thumb.is-placeholder { background: var(--quindi-surface); }
.recents-item-thumb.is-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
    transform: translateX(-100%);
    animation: thumb-skeleton-sweep 1.4s ease-in-out infinite;
    pointer-events: none;
}
.recents-item-thumb.is-placeholder .thumb-placeholder {
    width: 70%;
    opacity: 0.5;
    color: var(--quindi-text-soft);
}
.recents-item-thumb.has-thumb img.gallery-thumb-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
@media (prefers-reduced-motion: reduce) {
    .recents-item-thumb.is-placeholder::after { animation: none; }
}
.recents-item-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Pin toggle — pinned rows stay at the top of the panel. Deliberately quiet:
   barely-there at rest so idle rows stay clean, revealed by row hover or
   keyboard focus; never fully hidden so it stays reachable on touch (no hover).
   The pinned state fills the glyph in the soft text color — no accent. */
.recents-item-pin {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--quindi-text-soft);
    opacity: 0.3;
    cursor: pointer;
    transition: color 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}
.recents-item:hover .recents-item-pin,
.recents-item-pin:focus-visible {
    opacity: 0.75;
}
.recents-item-pin:hover {
    opacity: 1;
    color: var(--quindi-text);
    background: rgba(255, 255, 255, 0.06);
}
.recents-item-pin.is-pinned {
    opacity: 0.85;
    color: var(--quindi-text-soft);
}
.recents-item-pin.is-pinned svg { fill: currentColor; }
/* Divider between the pinned block and the recency-ordered list. */
.recents-panel-sep {
    height: 1px;
    margin: 2px 6px;
    background: var(--quindi-border);
}
.recents-item-title {
    font-size: 13px;
    color: var(--quindi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recents-item-when {
    font-size: 11px;
    color: var(--quindi-text-soft);
}

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

/* ── Compact chrome (narrow viewports) ──────────────────────────────────────
   The top-left cluster (document chip + Recenti button, both position:fixed)
   crowds Excalidraw's centered tool island on narrow screens. Shrink the chip,
   collapse both pill buttons to icon-only (their title/aria-label keep them
   accessible), and keep the document popover readable so the cluster stays
   clear of the native toolbar. Comments now lives bottom-right, away from the
   island, but stays icon-only too so it doesn't crowd Excalidraw's "?" help. */
@media (max-width: 1100px) {
    :root {
        --chip-w: 140px;
    }
    .chrome-recents-btn-label,
    .chrome-comments-btn-label { display: none; }
    .chrome-recents-btn,
    .chrome-comments-btn { padding: 0 9px; }
    /* .doc-panel width is normally tied to --chip-w; keep a readable floor now
       that the chip is narrower. */
    .doc-panel { width: min(var(--doc-panel-w), calc(100vw - 24px)); }
}

/* ── Phones — one quiet right-edge rail, coexisting with Excalidraw's touch UI ──
   At editor width <= 599px (or short landscape) Excalidraw owns both top corners
   (hamburger / menu) and the bottom tool bar. So our three app actions collapse
   into a SINGLE vertical rail of round icon buttons on the free right edge, just
   below Excalidraw's top-right menu: the document chip (logo, icon-only), Recents,
   and Comments — 40px touch targets, labels dropped, the canvas keeps the rest.
   The top-left corner is left entirely to Excalidraw. Mirror its exact breakpoint.
   Needs on-device QA — CI has no phone renderer. */
@media (max-width: 599px), (max-width: 999px) and (max-height: 499px) {
    :root {
        --rail-top: calc(58px + var(--safe-top));       /* below Excalidraw's top-right menu */
        --rail-right: calc(10px + var(--safe-right));
        --rail-size: 44px;
        --rail-step: 54px;
    }
    /* All three become identical round icon buttons stacked in the right rail. */
    .chrome-chip,
    .chrome-recents-btn,
    .chrome-comments-btn {
        top: auto;
        bottom: auto;
        left: auto;
        right: var(--rail-right);
        width: var(--rail-size);
        height: var(--rail-size);
        max-width: none;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .chrome-chip         { top: var(--rail-top); }
    .chrome-recents-btn  { top: calc(var(--rail-top) + var(--rail-step)); }
    .chrome-comments-btn { top: calc(var(--rail-top) + 2 * var(--rail-step)); }
    /* Icon-only: drop the app-name label and size the marks up for the bigger button. */
    .chrome-chip-copy,
    .chrome-chip-chevron { display: none; }
    .chrome-chip-mark { width: 22px; height: 22px; }
    .chrome-recents-btn svg,
    .chrome-comments-btn svg { width: 20px; height: 20px; }
    /* No hardware keyboard on a phone → the ⌘K hint is just noise. */
    .chrome-cmdk-hint { display: none; }
}

/* ── Phones — chrome dropdowns become bottom sheets ────────────────────────
   The doc + recents panels are narrow dropdowns pinned to the desktop chrome
   positions; on a phone float them up as full-width bottom sheets — thumb-
   reachable, internally scrollable, clearing the home indicator. Their existing
   backdrops keep tap-outside-to-close. (The comments panel is already full-
   screen at this width and the command palette is 92vw-centred, so both are left
   as-is.) Needs on-device QA — CI has no phone renderer. */
@media (max-width: 599px), (max-width: 999px) and (max-height: 499px) {
    .doc-panel,
    .recents-panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: 100vw;
        max-height: 85vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform-origin: bottom center;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: var(--safe-bottom);
    }
    /* Grab handle at the top of each sheet. */
    .doc-panel::before,
    .recents-panel::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 10px auto 6px;
        border-radius: 999px;
        background: var(--quindi-border);
    }
    .doc-panel-home,
    .doc-panel-back,
    .doc-panel-close,
    .doc-panel-rev-del { width: 44px; height: 44px; }
    .doc-panel-rev { min-height: 44px; padding-right: 52px; }
    .doc-panel-export-link { min-height: 44px; }
}

/* ── "Control from phone" pairing modal ─────────────────────────────
   The presenter's laptop shows this QR; the phone scans it to drive the
   board. Kept off the shared /present surface, so it never rides along in
   a screen-share. */
.pairing-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(2px);
    z-index: 1200;
}

.pairing-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1201;
    width: min(360px, calc(100vw - 32px));
    /* Clamp to the viewport and scroll internally so the footer (New code / Disconnect)
       stays reachable on short/landscape windows instead of clipping off-screen. */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--quindi-surface, #141414);
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.pairing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pairing-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--quindi-text, #f5f5f5);
}

.pairing-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--quindi-text-muted, #9a9a9a);
    cursor: pointer;
}

.pairing-close:hover {
    background: var(--quindi-hover, rgba(255, 255, 255, 0.06));
    color: var(--quindi-text, #f5f5f5);
}

.pairing-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

/* The QR renders black-on-white for reliable camera capture; the white
   plate is intentional against the dark modal. */
.pairing-qr {
    padding: 12px;
    background: #ffffff;
    border-radius: var(--radius-md);
    line-height: 0;
}

.pairing-qr svg {
    display: block;
    width: 220px;
    height: 220px;
    shape-rendering: crispEdges;
}

.pairing-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--quindi-text, #f5f5f5);
}

.pairing-note {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--quindi-text-muted, #9a9a9a);
}

/* The shared display: opens /present (follow mode) — the surface you screen-share
   while the phone drives it. Accent-green because it's the other half of the flow. */
.pairing-display-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 550;
    color: var(--quindi-accent, #00d68f);
    background: rgba(0, 214, 143, 0.10);
    border: 1px solid rgba(0, 214, 143, 0.35);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.pairing-display-link:hover {
    background: rgba(0, 214, 143, 0.16);
    border-color: rgba(0, 214, 143, 0.5);
}

/* Self-pairing. On a laptop the QR is the whole point and this link would only hijack the very
   screen being presented, so it is hidden; on a touch device you cannot scan your own screen and
   the QR was a dead end, so the same single-use code is offered as a tap. Keyed on the pointer
   rather than a width, because "can this device scan itself" is a pointer question. */
.pairing-self-link { display: none; }
.pairing-keys-hint { display: inline; }

@media (pointer: coarse) {
    .pairing-self-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 11px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--quindi-text);
        background: var(--quindi-surface-2, #1c1c1c);
        border: 1px solid var(--quindi-border);
        border-radius: var(--radius-sm);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* The arrow-key hint is only impossible on a phone. A tablet with a keyboard has both a coarse
   pointer and arrow keys, so keep it there and hide it on the small screens alone. */
@media (pointer: coarse) and (max-width: 599px) {
    .pairing-keys-hint { display: none; }
}

/* Connected state: the display link is the primary call to action (filled, full width). */
.pairing-display-link--primary {
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #04140d;
    background: var(--quindi-accent, #00d68f);
    border-color: var(--quindi-accent, #00d68f);
}
.pairing-display-link--primary:hover {
    background: var(--accent-hover, #00c081);
    border-color: var(--accent-hover, #00c081);
}
.pairing-display-link--primary:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Separator between the always-on "Open presentation" action and the optional phone section. */
.pairing-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    color: var(--quindi-text-soft, #8b95a5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pairing-divider::before,
.pairing-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--quindi-border, rgba(255, 255, 255, 0.1));
}
.pairing-note kbd {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--quindi-border, rgba(255, 255, 255, 0.18));
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.4;
}

/* "Phone connected ✓" confirmation above the primary action. */
.pairing-connected {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
}
.pairing-connected-check {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    color: var(--quindi-accent, #00d68f);
    background: rgba(0, 214, 143, 0.12);
    border: 1px solid rgba(0, 214, 143, 0.4);
}

.pairing-error {
    margin: 0;
    font-size: 13px;
    color: var(--quindi-danger, #ff443a);
}

.pairing-foot {
    display: flex;
    gap: 8px;
}

.pairing-btn {
    flex: 1;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--quindi-text, #f5f5f5);
    background: var(--quindi-hover, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--quindi-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pairing-btn:hover:not(:disabled) {
    background: var(--quindi-hover-strong, rgba(255, 255, 255, 0.1));
}

.pairing-btn:disabled {
    opacity: 0.5;
    cursor: default;
}