/* communicouple — visual style ported from the divadiscbot 'simple' mode (Phase R).
   Dark glass-morphism over a cosmic background, hot-pink accent, Instrument Serif + Barlow.
   All tokens are CSS custom properties so later phases inherit the look. DOM ids/classes are
   preserved (the e2e + app JS depend on them). */

:root {
  /* palette — comma triples so rgba(var(--x), a) composes */
  --text-main: 255, 255, 255;
  --accent: 255, 0, 127;                 /* hot pink #ff007f */
  --danger: 255, 76, 76;
  /* glass primitive */
  --glass-border: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0.22) 100%);
  --glass-shadow: 0 12px 40px rgba(0,0,0,0.5);
  --glass-inner-shadow: inset 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 1px rgba(0,0,0,0.55);
  --glass-bg: rgba(var(--text-main), 0.09); /* frosted tint over the cosmic bg */
  --blur-val: 16px;                          /* card frost (was 3px — too subtle) */
  --sat-val: 180%;
  --bg-base: #000;
  --bg-filter: contrast(1.15) brightness(0.45) saturate(1.1);
  --bg-tint-alpha: 0.55;
  /* shell */
  --text-scale: 1.0;
  --s-maxw: 820px;
  --s-accent: rgb(255,0,127);
  /* section accent colors (later phases: cursor hues, media tints) */
  --c-gold: 255,220,80; --c-sky: 100,200,255; --c-purple: 160,100,255; --c-mint: 100,255,180; --c-pink: 255,100,200;
  /* compatibility shims for any untouched rule */
  --ink: rgb(var(--text-main));
  --muted: rgba(var(--text-main),0.6);
  --line: rgba(var(--text-main),0.10);
  --radius: 20px;
}
.light-theme {
  --text-main: 15, 23, 42;
  --glass-shadow: 0 12px 40px rgba(31,38,135,0.08);
  --glass-inner-shadow: inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -1px 1px rgba(255,255,255,0.1);
  --blur-val: 18px; --sat-val: 140%;
  --glass-bg: rgba(255, 255, 255, 0.5);
  --bg-base: #f8fafc;
  --bg-filter: grayscale(0) contrast(1) brightness(1.1);
}
/* text-size on the ROOT so --text-scale drives the rem base → all rem/em text actually scales.
   Wider, clearly-felt steps (was a barely-perceptible ±8–10%). */
:root[data-text-size="small"]  { --text-scale: 0.86; }
:root[data-text-size="medium"] { --text-scale: 1.0; }
:root[data-text-size="large"]  { --text-scale: 1.22; }
/* the rem base every rem-sized element keys off of */
html { font-size: calc(16px * var(--text-scale)); }

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100dvh;
  font-family: 'Barlow', system-ui, sans-serif; font-weight: 400;
  font-size: 0.94rem; line-height: 1.5; /* ≈15px at scale 1; scales via the root */
  color: rgb(var(--text-main)); background: var(--bg-base);
  overflow-x: hidden;
  padding: 0 14px env(safe-area-inset-bottom);
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* background layers */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-layer img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: var(--bg-filter); }
.bg-tint { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgba(0,0,0, var(--bg-tint-alpha, 0.55)); }
.light-theme .bg-tint { background: rgba(241,245,249, var(--bg-tint-alpha, 0.5)); }
#login, #hub { position: relative; z-index: 2; }

.hidden { display: none !important; }
.muted { color: rgba(var(--text-main), 0.6); }
.small { font-size: 0.82rem; }
.error { color: #ffb3b3; min-height: 1.2em; }
.ok { color: rgb(var(--c-mint)); min-height: 1.2em; }

/* glass utility (for static + future-phase elements) */
.glass {
  background: transparent; position: relative; border: none;
  backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val));
  -webkit-backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val));
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  contain: layout style paint;
}
.glass::before, .glass-edge::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--glass-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 6;
}

/* buttons */
button {
  cursor: pointer; font: inherit; font-weight: 600; font-size: 0.98rem; color: #fff;
  border: none; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  transition: transform .12s ease, background .14s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: .5; cursor: default; }
button.ghost, .ghost {
  background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--text-main),0.18); color: rgb(var(--text-main));
}
button.ghost:hover { background: rgba(var(--text-main),0.06); }
button.danger, .danger { background: rgba(var(--danger),0.85); box-shadow: none; color: #fff; }
.tp-btn {
  /* softer than the flat neon #ff007f — a gentle pink gradient with a glow + top highlight */
  background: linear-gradient(135deg, #f25aa0 0%, #db3b85 100%); color: #fff;
  box-shadow: 0 3px 12px rgba(var(--accent), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  border: none; border-radius: 14px; padding: 12px 16px; font-weight: 600; cursor: pointer;
  transition: transform .12s ease, filter .14s ease, box-shadow .14s ease;
}
.tp-btn:hover { filter: brightness(1.05); box-shadow: 0 4px 16px rgba(var(--accent), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.tp-btn:active { transform: scale(0.97); }
/* secondary action (e.g. Fils) — a soft frosted fill instead of a hollow border */
.tp-btn.ghost {
  background: rgba(var(--text-main), 0.10); color: rgb(var(--text-main));
  box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.16);
}
.tp-btn.ghost:hover { background: rgba(var(--text-main), 0.16); filter: none; }

/* inputs */
input, select, textarea {
  font: inherit; color: rgb(var(--text-main)); border: none; outline: none;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1.5px rgba(var(--accent),0.7); }
select option, select optgroup { background: #1a1320; color: #fff; }

/* login dialog */
.card {
  width: min(440px, 100%); margin: 12vh auto; position: relative;
  padding: 24px; border-radius: 28px; color: rgb(var(--text-main));
  background: rgba(12,12,20,0.45);
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.13), 0 28px 80px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(255,255,255,0.08);
  animation: fadeUp .5s .05s both;
}
.card h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.8rem; margin: 0 0 .2rem; }
#login-form { display: grid; gap: .8rem; margin-top: 1rem; }
#login-form label { display: grid; gap: .25rem; font-size: 0.82rem; color: rgba(var(--text-main),0.6); }
#login-form button[type=submit] { background: var(--s-accent); box-shadow: none; color: #fff; }

/* topbar — floating sticky glass pill */
.topbar {
  position: sticky; top: 10px; z-index: 40;
  max-width: var(--s-maxw); margin: 14px auto 0; padding: 9px 14px;
  display: flex; align-items: center; gap: 12px; border-radius: 999px; border: none;
  background: transparent;
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(var(--text-main),0.14);
}
/* brand "plaque": logo + wordmark sit on a solid backing that bleeds to the pill's left edge and
   fades into the glass toward the nav — gives the title a readable, intentional home (the frosty
   blur alone left the pink wordmark hard to read over bright sky). */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.18rem; color: rgb(var(--text-main));
  position: relative; z-index: 1;
  align-self: stretch; /* fill the full bar height (the nav makes the pill taller than the brand) */
  margin: -9px 2px -9px -14px; padding: 0 40px 0 17px;
}
.brand > * { position: relative; z-index: 1; } /* icon + wordmark sit above the ::before chip */
/* The backing lives on ::before so we can localize a backdrop-filter to JUST the brand and fade the
   whole treated layer with a mask (fading the colour stops re-exposes the busy photo under the text). */
.brand::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 999px 6px 6px 999px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 56%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 56%, transparent 100%);
  background: rgba(6, 2, 10, 0.5); /* dark lift on the dark bar */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.light-theme .brand::before {
  /* flatten the bright busy photo into a calm pale field (brightness↑ + desaturate + blur), then a
     thin white floor — so the deep-pink wordmark sits on a constant light surface, still glassy */
  -webkit-backdrop-filter: blur(22px) saturate(72%) brightness(1.4);
          backdrop-filter: blur(22px) saturate(72%) brightness(1.4);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(160, 20, 87, 0.06);
}
/* wordmark — theme-aware, NO white halo (it erodes the thin serif). Tight shadow + open tracking. */
.brand-word { color: #ff79b4; letter-spacing: .25px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.light-theme .brand-word { color: #8e0c4a; letter-spacing: .35px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.brand-icon { flex: 0 0 auto; width: 28px; height: 25px; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)) drop-shadow(0 2px 7px rgba(255, 0, 127, .42)); }
/* soft rose vibrancy disc behind the logo in light mode (frosted badge, not a sticker) */
.light-theme .brand-icon { border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 236, 244, 0.5) 55%, rgba(255, 236, 244, 0) 78%); }
.brand-icon .heart { transform-box: fill-box; transform-origin: center; animation: heartbeat 2.6s ease-in-out infinite; }
.brand-icon .heart2 { transform-box: fill-box; transform-origin: center; animation: heartbeat 2.6s ease-in-out infinite .4s; opacity: .9; }
@keyframes heartbeat { 0%, 22%, 100% { transform: scale(1); } 8% { transform: scale(1.22); } 15% { transform: scale(.96); } }
.brand-title { display: inline-flex; align-items: center; gap: 11px; }
.brand-title .brand-icon { width: 40px; height: 36px; }
.brand-title .brand-word { font-size: 1.9rem; }
.topbar nav {
  display: flex; align-items: center; gap: 2px; margin-left: auto; padding: 4px; border-radius: 13px;
  background: rgba(var(--text-main),0.04); box-shadow: inset 0 0 0 1px rgba(var(--text-main),0.18);
}
.tab {
  appearance: none; border: none; background: transparent; color: rgba(var(--text-main),0.6);
  font: inherit; font-weight: 500; font-size: 12px; padding: 7px 14px; border-radius: 9px;
  cursor: pointer; transition: background .2s, color .2s, transform .15s; box-shadow: none;
}
.tab:hover { color: rgb(var(--text-main)); background: rgba(var(--text-main),0.06); }
.tab:active { transform: scale(0.96); }
.tab.active {
  background: rgba(var(--text-main),0.16); color: rgb(var(--text-main));
  backdrop-filter: blur(24px) saturate(220%); -webkit-backdrop-filter: blur(24px) saturate(220%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.18);
}
.who { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; margin: 0 .3rem; }
#logout { padding: 8px 12px; font-size: 0.86rem; font-weight: 500; }

/* views */
.view { max-width: var(--s-maxw); margin: 1.5rem auto; padding: 0; }
.view h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.5rem; margin: 1.2rem 0 .6rem; color: rgb(var(--text-main)); }
.view h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.2rem; margin: 1rem 0 .4rem; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* entry cards (glass) */
.entry-feature { margin-bottom: 1.5rem; }
.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card-link {
  display: grid; gap: .3rem; text-decoration: none; color: rgb(var(--text-main));
  background: var(--glass-bg); border: none; border-radius: 20px; padding: 20px; position: relative;
  backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val)); -webkit-backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val));
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
  transition: transform .12s ease; animation: fadeUp .5s both;
}
.card-link::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 6;
}
.card-link:hover { transform: translateY(-2px); }
.card-link.big { padding: 28px 24px; border-radius: 28px; }
.card-link strong { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.5rem; }
.kind { font-size: 10px; letter-spacing: .3em; font-weight: 700; text-transform: uppercase; color: rgb(var(--accent)); }
.badge { font-size: .66rem; padding: 2px 8px; border-radius: 999px; background: rgba(var(--text-main),0.08); color: rgba(var(--text-main),0.7); box-shadow: inset 0 0 0 1px rgba(var(--text-main),0.12); }

/* account + my-account panels (glass) */
#view-accounts, #view-account {
  position: relative; padding: 20px; border-radius: 20px;
  background: var(--glass-bg); backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val)); -webkit-backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val));
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow); animation: fadeUp .45s both;
}
#view-accounts::before, #view-account::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 6;
}
#view-accounts > *, #view-account > * { position: relative; z-index: 7; }
/* account-management cards (clean per-account layout) */
#accounts-list { display: grid; gap: 10px; margin-bottom: 1rem; }
.acct-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px;
  background: rgba(var(--text-main), 0.05); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.1); }
.acct-av { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.acct-main { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acct-name { width: 100%; max-width: 260px; background: transparent; box-shadow: none; padding: 3px 5px; border-radius: 7px; font-weight: 600; }
.acct-name:hover { background: rgba(var(--text-main), 0.06); }
.acct-name:focus { background: rgba(var(--text-main), 0.06); box-shadow: inset 0 0 0 1.5px rgba(var(--accent), 0.6); }
.acct-sub { display: flex; align-items: center; gap: 6px; font-size: .8rem; padding-left: 5px; }
.acct-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.acct-tools select { padding: 7px 9px; font-size: .85rem; }
.icon-btn { background: rgba(var(--text-main), 0.07); color: rgb(var(--text-main)); border: none; box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12);
  border-radius: 9px; padding: 7px 9px; font-size: .95rem; line-height: 1; cursor: pointer; transition: background .14s, transform .1s; }
.icon-btn:hover { background: rgba(var(--text-main), 0.14); }
.icon-btn:active { transform: scale(.93); }
.icon-btn.danger:hover { background: rgba(var(--danger), 0.28); }
.row-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

/* topbar identity chip */
.who-av { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.who-name { color: rgb(var(--text-main)); font-weight: 500; }
.who-badge { font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(var(--accent), 0.85); color: #fff; }
.who-badge.mini { background: rgba(var(--text-main), 0.15); color: rgba(var(--text-main), 0.8); letter-spacing: .04em; }

/* entry view — ONE compact glass toolbar on a single line:
   back · kicker chip · title (grows + truncates) · flexible gap · action buttons */
.entry-head { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; padding: 6px 8px; min-width: 0; }
/* back = icon-only square, matches the edit-toolbar .tb-back treatment */
.eh-back { flex: 0 0 auto; padding: 6px 8px; border-radius: 10px; line-height: 0; color: rgba(var(--text-main), 0.82); }
.eh-back:hover { background: rgba(var(--text-main), 0.12); color: rgb(var(--text-main)); }
.eh-back svg { display: block; }
/* kicker as a soft pink pill instead of bare uppercase text — sits centered beside the title */
.kind-chip { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; line-height: 1; font-size: 9px; letter-spacing: .16em;
  color: rgb(var(--accent)); background: rgba(var(--accent), 0.15); box-shadow: inset 0 0 0 1px rgba(var(--accent), 0.32); }
/* title fills the middle, shrinks first, and clips to a single line rather than wrapping/pushing buttons */
.entry-head .entry-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.45rem; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head-actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
.head-actions .tp-btn { padding: 9px 13px; white-space: nowrap; text-decoration: none; }
.ghost-link { color: rgba(var(--text-main),0.85); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ghost-link:hover { color: rgb(var(--text-main)); }
.ghost-link svg { opacity: .85; }
/* inline icons inside buttons align with the label */
.tp-btn, .editor-toolbar button { display: inline-flex; align-items: center; gap: 6px; }
.editor-toolbar .icon-only { gap: 0; padding: 6px 9px; }
.editor-toolbar button svg, .tp-btn svg, .tb-back svg { display: block; }
/* "Insérer" menu — popover anchored under the button */
.ins-wrap { position: relative; display: inline-flex; }
.ins-menu[hidden] { display: none; } /* the class's display:flex would otherwise beat the hidden attr */
.ins-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 168px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px;
  background: rgba(20, 14, 24, 0.92); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(var(--text-main), 0.14);
}
.light-theme .ins-menu { background: rgba(255, 255, 255, 0.96); }
.ins-opt {
  display: inline-flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: none; background: transparent; color: rgb(var(--text-main)); font: inherit; font-weight: 500; font-size: .9rem;
  padding: 9px 11px; border-radius: 8px; cursor: pointer; transition: background .12s;
}
.ins-opt:hover { background: rgba(var(--accent), 0.18); }
.ins-opt svg { opacity: .9; flex: 0 0 auto; }
.entry-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 2rem; margin: .2rem 0 1rem; }
.entry-title-input { width: 100%; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 2rem; margin-bottom: .8rem;
  background: transparent; box-shadow: none; padding: 4px 6px; border-radius: 8px; }
.entry-title-input:hover { background: rgba(var(--text-main), 0.05); }
.entry-title-input:focus { background: rgba(var(--text-main), 0.05); box-shadow: inset 0 0 0 1.5px rgba(var(--accent), 0.5); }
.entry-body {
  position: relative; padding: 24px; border-radius: 20px; min-height: 55vh; animation: fadeUp .4s both;
  background: var(--glass-bg); backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val)); -webkit-backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val));
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
}
.entry-body::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 6;
}
/* Text blocks: a paragraph break reads like a wrapped line (no extra gap — spacing is line-height only). */
.entry-body .blk { position: relative; z-index: 7; margin: 0; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
/* Beacons (images/sections/etc.) keep breathing room from surrounding text. */
.entry-body .blk.beacon { margin: .6rem 0; }
.entry-body .blk:last-child { margin-bottom: 0; }
.entry-body code { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .86em; background: rgba(var(--text-main),0.06); padding: .05rem .35rem; border-radius: 6px; }
.entry-textarea { width: 100%; min-height: 50vh; resize: vertical; line-height: 1.6; }

/* collaborative editor (Phase 2) */
/* editor toolbar — override the ported dark #2a2a2a bar; clean glass pill instead */
/* frosty floating bar shared by the read-mode action row and the edit-mode toolbar — both stick
   below the topbar and follow the scroll. JS sets `top` to clear the (wrap-variable) topbar. */
.float-bar {
  position: sticky; top: 8px; z-index: 30; border: none; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.14), 0 6px 20px rgba(0, 0, 0, 0.28);
  background: rgba(var(--text-main), 0.10); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.light-theme .float-bar { background: rgba(248, 250, 252, 0.72); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12), 0 6px 20px rgba(0, 0, 0, 0.12); }
.editor-toolbar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; padding: 6px;
}
.tb-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.tb-back { font-size: 1.05rem; padding: 4px 9px; border-radius: 8px; }
.tb-back:hover { background: rgba(var(--text-main), 0.12); }
.editor-toolbar button {
  background: transparent; border: none; box-shadow: none; color: rgba(var(--text-main), 0.82);
  padding: 6px 11px; border-radius: 8px; font-size: .9rem; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background .14s, color .14s, transform .1s;
}
.editor-toolbar button:hover { background: rgba(var(--text-main), 0.12); color: rgb(var(--text-main)); }
.editor-toolbar button:active { transform: scale(.93); }
.editor-toolbar button:disabled { opacity: .32; cursor: default; }
.editor-toolbar button:disabled:hover { background: transparent; color: rgba(var(--text-main), 0.82); }
.editor-toolbar button:disabled:active { transform: none; }
#hist-undo, #hist-redo { font-size: 1.05rem; }
button.mini { padding: 5px 12px; font-size: 13px; border-radius: 9px; }
/* id selector — the ported editor-styles.css also targets #rich-editor-wrapper (white bg); match
   its specificity so our glass theme wins. */
#rich-editor-wrapper {
  position: relative; display: flex; flex-direction: column; min-height: 55vh; padding: 20px; border-radius: 20px; cursor: text;
  background: var(--glass-bg); backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val)); -webkit-backdrop-filter: blur(var(--blur-val)) saturate(var(--sat-val));
  box-shadow: var(--glass-shadow), var(--glass-inner-shadow);
}
/* save toast — a little tab that drops down from the editor field's top border on save, then
   retracts back up after a beat. Sits in a wrapper (not inside #rich-editor-wrapper itself) so it
   survives the editor core replacing its own children. */
.editor-body-wrap { position: relative; }
.save-toast {
  position: absolute; top: 0; left: 50%; z-index: 9; pointer-events: none;
  transform: translate(-50%, -100%); opacity: 0;
  padding: 5px 14px; border-radius: 0 0 10px 10px;
  background: rgba(var(--accent), 0.9); color: #fff; font-size: .78rem; font-weight: 650; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform .28s ease, opacity .28s ease;
}
.save-toast.show { transform: translate(-50%, 0); opacity: 1; }
#rich-editor-wrapper::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--glass-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 6;
}
.scrollnote-rich-editor { position: relative; z-index: 7; flex: 1 1 auto; min-height: 46vh; font-size: 1rem; } /* 1rem (not the ported 16px) so editor text scales with --text-scale */
.dark-theme .scrollnote-rich-editor { background: transparent; padding: 4px 2px; } /* glass wrapper is the surface; editor text = #e0e0e0 */
.scrollnote-rich-editor [data-block-id] { margin: 0 0 .6rem; }
.hue-swatch { display: inline-block; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(var(--text-main),0.3); vertical-align: middle; }

/* appearance settings (theme / text size / bg dim) */
.pref-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .6rem 0; }
.pref-label { min-width: 150px; color: rgba(var(--text-main), 0.8); }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(var(--text-main), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12); }
.seg button { appearance: none; border: none; background: transparent; color: rgba(var(--text-main), 0.65); box-shadow: none; font: inherit; font-weight: 500; font-size: .9rem; padding: 6px 14px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.seg button:hover { color: rgb(var(--text-main)); }
.seg button.active { background: rgba(var(--text-main), 0.16); color: rgb(var(--text-main)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 8px rgba(0,0,0,.14); }
.pref-row input[type=range] { flex: 1; min-width: 160px; }

/* generic modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.modal-backdrop.hidden { display: none; }
.modal-dialog { width: min(420px, 100%); padding: 24px; border-radius: 24px; position: relative; color: rgb(var(--text-main));
  background: rgba(12,12,20,0.6); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 28px 80px rgba(0,0,0,0.65); animation: fadeUp .25s both; }
.modal-dialog h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.4rem; margin: 0 0 1rem; }
.modal-form { display: grid; gap: .7rem; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: .4rem; }

/* my-account: header + settings cards */
.account-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1.2rem; }
.account-av { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 4px 14px rgba(0,0,0,.3); }
.account-id h2 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.6rem; }
.account-id p { margin: 0; }
.settings-card { position: relative; padding: 18px 20px; border-radius: 18px; margin-bottom: 14px;
  background: rgba(var(--text-main), 0.05); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.1); }
.settings-card h3 { margin: 0 0 .9rem; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.2rem; }
.field { display: grid; gap: .4rem; margin-bottom: .9rem; }
.field:last-child { margin-bottom: 0; }
.field > label { font-size: .82rem; color: rgba(var(--text-main), 0.7); }
.field-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field-inline input[type=text], .field-inline input:not([type]), #pf-name { flex: 1; min-width: 160px; }

/* admin impersonation return bar (injected, ephemeral) */
#return-bar {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(255, 0, 127, 0.9); color: #fff; font-size: .9rem; font-weight: 500;
  box-shadow: 0 8px 28px rgba(255, 0, 127, .45), inset 0 0 0 1px rgba(255,255,255,.25);
  animation: fadeUp .3s both;
}
#return-bar .rb-btn { background: #fff; color: #c01065; border: none; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; }
#return-bar .rb-btn:active { transform: scale(.96); }

/* rich elements — beacons (Phase 4) */
.tb-sep { width: 1px; align-self: stretch; background: rgba(var(--text-main), 0.15); margin: 0 4px; }
.blk.beacon { margin: .8rem 0; }
/* contain trailing floats at the column edge while still letting text wrap around floats between blocks */
.entry-body, .editor-editable { display: flow-root; }
.blk-image { margin: 0; }
.blk-image img, .beacon-image img { max-width: 100%; height: auto; border-radius: 14px; display: block; }
.blk-image.bmedia img { width: 100%; }

/* ---- floatable media (image / gallery): how a block sits in the text column ---- */
.bmedia { margin: .6rem 0; }
.bmedia.align-full { width: 100%; float: none; clear: both; }
.bmedia.align-center { float: none; margin-left: auto; margin-right: auto; }
.bmedia.align-left { float: left; margin: .2rem 1.1rem .5rem 0; }
.bmedia.align-right { float: right; margin: .2rem 0 .5rem 1.1rem; }
.blk-grid-wrap.bmedia { display: block; }
/* on phones a floated/centered media takes the full width so text stays readable */
@media (max-width: 560px) {
  .bmedia.align-left, .bmedia.align-right, .bmedia.align-center { float: none; width: 100% !important; margin: .7rem 0; }
  /* keep the single-line bar on phones: hide the button LABELS (icon-only) so back · chip · title ·
     3 action icons all still fit one compact row without wrapping or overflowing. */
  .entry-head { gap: 7px; padding: 5px 6px; }
  .kind-chip { letter-spacing: .1em; padding: 4px 7px; }
  .entry-head .entry-title { font-size: 1.15rem; }
  .head-actions { gap: 6px; }
  .head-actions .btn-label { display: none; }
  .head-actions .tp-btn { padding: 8px; gap: 0; }
  .head-actions .tp-btn svg { width: 18px; height: 18px; }
}

/* ---- full-width HTML block (sandboxed iframe, auto height) ---- */
.blk-html { margin: .9rem 0; width: 100%; clear: both; }
.html-embed { width: 100%; border: 0; display: block; min-height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.blk-html-empty { padding: 18px; border: 1px dashed rgba(var(--text-main), 0.25); border-radius: 12px; text-align: center; }

/* ---- HTML block editor modal ---- */
.html-editor-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 18px; }
.html-editor { width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column; gap: 10px; background: #15131d; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.he-head { color: #fff; font-weight: 600; }
.he-area { flex: 1; min-height: 320px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; line-height: 1.5; color: #e8e8f0; background: #0c0b12; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 12px; }
.he-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- edit-mode beacon controls + resize handle ---- */
.editor-beacon { position: relative; margin: 14px 0; }
.editor-beacon .blk-image, .editor-beacon .blk-grid-wrap { position: relative; }
.editor-beacon .html-embed { pointer-events: none; } /* keep the block selectable while editing */
/* compact contextual control pill — overlaid top-right, sized to its content (no full-width grey bar) */
.beacon-ctrls {
  position: absolute; top: 7px; right: 7px; z-index: 6; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px;
  background: rgba(18, 12, 22, 0.82); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.bx { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: .82rem; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 7px; line-height: 1; }
.bx:hover { background: rgba(255, 255, 255, 0.16); }
.bx-del:hover { background: rgba(255, 90, 90, 0.5); }
.bx-drag { cursor: grab; touch-action: none; }
.bx-drag:active { cursor: grabbing; }
/* media beacons drop the editor grey box so they float in the text exactly like read mode (text wraps live) */
.editor-beacon[data-beacon-type="image"],
.editor-beacon[data-beacon-type="imagegrid"],
.editor-beacon[data-beacon-type="gallery"] { background: transparent; padding: 0; border-radius: 0; }
/* inline Expand editor (edit mode): a clearly-delimited frosted card (same glass treatment as the
   app's panels so it stands out over the photo) — header bar (title + expand/collapse) over the body */
.editor-beacon[data-beacon-type="expand"] { background: rgba(var(--text-main), 0.14); border: 1px solid rgba(var(--text-main), 0.3); border-radius: 14px; padding: 10px 12px; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.light-theme .editor-beacon[data-beacon-type="expand"] { background: rgba(248, 250, 252, 0.82); border-color: rgba(15, 23, 42, 0.28); }
.exp-inline { display: flex; flex-direction: column; }
.exp-inline-bar { display: flex; align-items: stretch; gap: 8px; padding-right: 54px; } /* clear the drag/delete pill (top-right) so the toggle's right arrow stays visible */
/* title: editable on click, sized to its text but never more than half the bar — longer titles scroll */
.exp-inline-title { flex: 0 1 auto; max-width: 50%; min-width: 0; box-sizing: border-box; background: transparent; color: rgb(var(--text-main)); font: inherit; font-weight: 650; font-size: 1rem; padding: 7px 11px; border: 1px solid rgba(var(--text-main), 0.2); border-radius: 10px; }
.exp-inline-title::placeholder { color: rgba(var(--text-main), 0.4); }
.exp-inline-title:focus { outline: none; border-color: rgba(var(--accent), 0.75); }
/* the rest of the bar = the expand/collapse area, with an arrow at each end */
.exp-inline-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 14px; cursor: pointer; background: rgba(var(--text-main), 0.04); border: 1px solid rgba(var(--text-main), 0.16); border-radius: 10px; color: rgba(var(--text-main), 0.55); }
.exp-inline-toggle:hover { background: rgba(var(--text-main), 0.1); color: rgba(var(--text-main), 0.85); }
/* arrows point UP when expanded (collapse), and flip to DOWN when collapsed (expand) */
.exp-arrow { display: inline-block; font-size: .72em; line-height: 1; transition: transform .18s ease; }
.exp-inline.collapsed .exp-inline-toggle .exp-arrow { transform: rotate(180deg); }
.exp-inline.collapsed .exp-inline-body { display: none; }
/* small 2-up-arrow bar at the bottom-right of the open body — collapses the section */
.exp-inline-foot { align-self: flex-end; display: inline-flex; align-items: center; gap: 1px; margin-top: 8px; padding: 3px 9px; cursor: pointer; background: rgba(var(--text-main), 0.06); border: 1px solid rgba(var(--text-main), 0.18); border-radius: 9px; color: rgba(var(--text-main), 0.6); }
.exp-inline-foot:hover { background: rgba(var(--text-main), 0.12); color: rgba(var(--text-main), 0.85); }
.exp-arrow-sm { display: inline-block; font-size: .6em; line-height: 1; }
.exp-inline.collapsed .exp-inline-foot { display: none; }
/* the editable body gets its own clear inset surface so it reads as "the content zone" */
.exp-inline-body { margin-top: 8px; background: rgba(var(--text-main), 0.08); border: 1px solid rgba(var(--text-main), 0.16); border-radius: 10px; padding: 4px 10px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
.exp-inline-body .scrollnote-rich-editor { background: transparent; min-height: 56px; padding: 4px 2px; }
/* while dragging a block: lift it, hide its pill, and show a move cursor */
#rich-editor-wrapper.bdragging { cursor: grabbing; }
#rich-editor-wrapper.bdragging .scrollnote-rich-editor { caret-color: transparent; }
.editor-beacon.dragging { opacity: .4; }
.editor-beacon.dragging .beacon-ctrls, .editor-beacon.dragging .beacon-edge { opacity: 0; pointer-events: none; }
/* per-image overlay controls (reorder ◀▶ + remove ×) */
.editor-beacon .grid-cell { position: relative; }
.item-ctrls { position: absolute; top: 5px; left: 5px; display: inline-flex; gap: 3px; z-index: 4; }
.item-ctrls .ix { width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; background: rgba(0, 0, 0, 0.55); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
.item-ctrls .ix:hover { background: rgba(0, 0, 0, 0.82); }
.item-ctrls .ix-del:hover { background: rgba(255, 70, 70, 0.9); }
/* empty media placeholder */
.blk-image.blk-empty { min-height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 2px dashed rgba(var(--text-main), 0.28); background: rgba(var(--text-main), 0.04); }
.blk-empty .media-empty { pointer-events: none; }
.blk-addzone { cursor: pointer; transition: background .14s, border-color .14s; }
.blk-addzone:hover { background: rgba(var(--accent), 0.12); border-color: rgba(var(--accent), 0.6); }
.addzone-label { color: rgba(var(--text-main), 0.72); font-weight: 600; font-size: .9rem; pointer-events: none; }
/* placement mode — preview marker + floating panel */
#rich-editor-wrapper.placing { cursor: copy; }
#rich-editor-wrapper.placing .scrollnote-rich-editor { caret-color: transparent; }
.ins-marker { position: absolute; left: 16px; right: 16px; height: 3px; border-radius: 3px; background: rgb(var(--accent)); box-shadow: 0 0 0 3px rgba(var(--accent), 0.22), 0 0 10px rgba(var(--accent), 0.6); pointer-events: none; z-index: 10; transform: translateY(-1.5px); }
.place-panel { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 14px; background: rgba(20, 14, 24, 0.92); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--text-main), 0.14); }
.light-theme .place-panel { background: rgba(255, 255, 255, 0.96); }
.place-msg { font-size: .9rem; font-weight: 500; color: rgba(var(--text-main), 0.88); }
.place-panel .tp-btn { padding: 8px 14px; }
/* drag-to-resize edge handles (left/right of the media) — replace the alignment buttons */
.beacon-edge { position: absolute; top: 0; bottom: 0; width: 16px; cursor: ew-resize; z-index: 5; touch-action: none; display: flex; align-items: center; justify-content: center; }
.beacon-edge.edge-l { left: -8px; }
.beacon-edge.edge-r { right: -8px; }
.beacon-edge::after { content: ''; width: 5px; height: 38px; max-height: 60%; border-radius: 4px; background: rgb(var(--accent)); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.6); opacity: .8; }
.beacon-edge:hover::after { opacity: 1; }
.blk-image figcaption, .beacon-image .caption, .grid-cap { margin: .4rem 0 0; font-size: .85rem; color: rgba(var(--text-main), 0.6); }
.blk-grid { display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(120px, 1fr)); gap: 8px; }
.blk-grid .grid-cell { display: block; border-radius: 12px; overflow: hidden; }
.blk-grid .grid-cell img { width: 100%; height: 130px; object-fit: cover; display: block; background: #000; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; margin: .3rem 0; display: inline-flex; flex-direction: column; gap: 2px;
  background: rgba(var(--text-main), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12); }
.bubble.right { margin-left: auto; background: rgba(var(--accent), 0.18); box-shadow: inset 0 0 0 1px rgba(var(--accent), 0.3); }
.bubble.left { margin-right: auto; }
.bubble-author { font-size: .72rem; font-weight: 600; color: rgba(var(--text-main), 0.7); }
.bubble-img { max-width: 220px; border-radius: 10px; margin: 2px 0; }
.bubble-ts { font-size: .68rem; color: rgba(var(--text-main), 0.5); align-self: flex-end; }
.editor-beacon { margin: .8rem 0; }

/* annotate mode — custom non-native selector + voice threads (Phase 3) */
.entry-body.annotate {
  user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.entry-body.annotate .w { border-radius: 4px; padding: 0 1px; transition: background .1s; }
/* per-thread highlight colour via --hl-h; .sel last so an active selection wins */
.entry-body.annotate .w.hl-lite { background: hsl(var(--hl-h, 327) 80% 55% / .18); box-shadow: inset 0 -2px 0 hsl(var(--hl-h, 327) 80% 55% / .55); }
.entry-body.annotate .w.hl { background: hsl(var(--hl-h, 327) 80% 55% / .3); box-shadow: inset 0 -2px 0 hsl(var(--hl-h, 327) 80% 55%); }
.entry-body.annotate .w.sel { background: rgba(var(--accent), 0.6); color: #fff; box-shadow: none; }
.entry-body.annotate .w.hl-open { box-shadow: inset 0 0 0 2px hsl(var(--hl-h, 327) 85% 58%); } /* the open thread */
/* fuzzy-healed ('partial') anchor: dashed underline instead of solid, signals "approximate" */
.entry-body.annotate .w.hl-partial { box-shadow: inset 0 -2px 0 hsl(var(--hl-h, 327) 80% 55% / .5); background-image: repeating-linear-gradient(90deg, transparent 0 3px, hsl(var(--hl-h, 327) 80% 55% / .25) 3px 6px); }
.row-flag { margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.row-flag.lost { color: #ffb3b3; background: rgba(255, 80, 80, 0.16); }
.row-flag.partial { color: #ffd9a0; background: rgba(255, 170, 60, 0.14); }
.annot-backdrop { position: fixed; inset: 0; z-index: 79; background: transparent; }

.annot-panel {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(140%);
  width: min(640px, calc(100% - 28px)); z-index: 80; padding: 12px 14px; border-radius: 20px;
  display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none;
  background: rgba(12,12,20,0.55); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.13), 0 20px 60px rgba(0,0,0,0.6);
  transition: transform .22s ease, opacity .22s ease;
}
.annot-panel.open { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.annot-quote { font-family: 'Instrument Serif', serif; font-size: 1.05rem; opacity: .85; text-align: center; }
.annot-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }

/* draggable selection handles — one ball at each end of the selection */
.sel-handles { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.sel-handle { position: absolute; width: 18px; height: 18px; border-radius: 50%; pointer-events: auto; cursor: ew-resize; touch-action: none;
  background: rgb(var(--accent)); box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 0 0 2px #fff; transition: transform .08s; }
.sel-handle:hover { filter: brightness(1.08); }
.sel-handle:active { transform: scale(1.2); }

/* recording */
.rec-dot { color: #fff; animation: recpulse 1s infinite; }
.rec-live { display: flex; align-items: center; gap: 8px; justify-content: center; font-weight: 500; }
@keyframes recpulse { 50% { opacity: .3; } }

/* selection → "Nouveau fil" creation panel */
.sel-panel { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.sel-head { display: flex; align-items: center; justify-content: space-between; }
.sel-title { font-family: 'Instrument Serif', serif; font-size: 1.2rem; color: rgb(var(--text-main)); }
.sel-quote {
  font-family: 'Instrument Serif', serif; font-size: 1.08rem; line-height: 1.4; color: rgb(var(--text-main));
  padding: 9px 14px; border-radius: 10px; background: rgba(var(--accent), 0.10); box-shadow: inset 3px 0 0 rgba(var(--accent), 0.65);
}
.sel-q-mark { color: rgba(var(--accent), 0.85); }
.sel-hint { text-align: center; padding: 6px 0; }
.sel-label { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 700; opacity: .55; }
.sel-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sel-choice {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 12px;
  border: none; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 600; font-size: .95rem;
  color: rgb(var(--text-main)); background: rgba(var(--accent), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--accent), 0.30);
  transition: background .14s, transform .1s;
}
.sel-choice:hover { background: rgba(var(--accent), 0.27); }
.sel-choice:active { transform: scale(.97); }
.sel-choice svg { opacity: .92; }
.sel-empty {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  border: none; border-radius: 11px; padding: 9px; cursor: pointer; font: inherit; font-weight: 500; font-size: .85rem;
  color: rgba(var(--text-main), 0.72); background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.14);
  transition: background .14s, color .14s;
}
.sel-empty:hover { background: rgba(var(--text-main), 0.06); color: rgb(var(--text-main)); }
/* the same two choices reused as a thread's "add a message" composer */
.composer-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.composer-choice { font-size: .9rem; padding: 11px; }

/* colour picker — popover behind a dot in the composer */
.color-dot { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: none; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 1px 4px rgba(0,0,0,.3); }
.color-dot:hover { transform: scale(1.08); }
.color-pop { width: 100%; display: flex; justify-content: center; margin: 2px 0 6px; }
.color-pop[hidden] { display: none; }
.color-row { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; width: 100%; padding: 8px; border-radius: 12px; background: rgba(var(--text-main), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12); }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .1s; }
.swatch:hover { transform: scale(1.12); }
.swatch.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px rgba(var(--text-main), .6); }
.color-close { margin-left: auto; flex: 0 0 auto; }
.hue-slider { flex: 1; min-width: 90px; max-width: 160px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, hsl(0 80% 55%), hsl(60 80% 55%), hsl(120 80% 55%), hsl(180 80% 55%), hsl(240 80% 55%), hsl(300 80% 55%), hsl(360 80% 55%)); }

/* thread panel: header (title + actions) / body / footer, with separators */
.thread-head { display: flex; align-items: center; gap: 10px; width: 100%; padding-bottom: 10px; border-bottom: 1px solid rgba(var(--text-main), 0.14); }
.thread-title { flex: 1; min-width: 0; font-family: 'Instrument Serif', serif; font-size: 1.1rem; line-height: 1.25; opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-head-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.icon-btn { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: none; border-radius: 9px; cursor: pointer; background: rgba(var(--text-main), 0.08); color: rgba(var(--text-main), 0.82);
  box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12); transition: background .14s, color .14s, transform .08s; }
.icon-btn:hover { background: rgba(var(--text-main), 0.16); color: rgb(var(--text-main)); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { display: block; }
.close-x:hover { background: rgba(255, 84, 84, 0.24); color: #fff; }
.thread-body { width: 100%; min-height: 150px; display: flex; flex-direction: column; }
.thread-foot { width: 100%; padding-top: 10px; border-top: 1px solid rgba(var(--text-main), 0.14); display: flex; justify-content: center; }

/* all-threads list */
.thread-list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-height: 52vh; overflow-y: auto; padding: 2px; }
.thread-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: none; cursor: pointer;
  border-radius: 12px; background: rgba(var(--text-main), 0.06); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.1); transition: background .14s; }
.thread-row:hover { background: rgba(var(--text-main), 0.12); }
.row-dot { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-quote { font-family: 'Instrument Serif', serif; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-chev { flex: 0 0 auto; opacity: .4; font-size: 1.1rem; }

/* conversation timeline */
.thread-timeline { display: flex; flex-direction: column; gap: 8px; width: 100%; flex: 1; max-height: 44vh; overflow-y: auto; padding: 2px; }
.thread-empty { margin: auto; text-align: center; padding: 10px; line-height: 1.5; }
/* day separator between messages of different dates */
.thread-day { display: flex; align-items: center; gap: 10px; margin: 4px 2px; color: rgba(var(--text-main), 0.5); font-size: 11px; font-weight: 600; }
.thread-day::before, .thread-day::after { content: ''; flex: 1; height: 1px; background: rgba(var(--text-main), 0.12); }
.thread-day span { text-transform: capitalize; white-space: nowrap; }
.t-bubble { max-width: 85%; padding: 7px 11px; border-radius: 14px; display: flex; flex-direction: column; gap: 3px;
  background: rgba(var(--text-main), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.1); }
.t-bubble.mine { align-self: flex-end; background: rgba(var(--accent), 0.18); box-shadow: inset 0 0 0 1px rgba(var(--accent), 0.28); }
.t-bubble.theirs { align-self: flex-start; }
.bubble-head { display: flex; align-items: baseline; gap: 8px; }
.bubble-who { font-size: .72rem; font-weight: 700; color: rgba(var(--text-main), 0.8); }
.bubble-time { font-size: .66rem; color: rgba(var(--text-main), 0.5); }
.bubble-text { line-height: 1.4; word-break: break-word; }
.bubble-reply { display: block; width: 100%; text-align: left; font: inherit; font-size: .72rem; color: inherit; opacity: .7;
  border: none; border-left: 2px solid rgba(var(--text-main), 0.4); border-radius: 0 6px 6px 0; background: rgba(var(--text-main), 0.05);
  padding: 3px 6px; cursor: pointer; transition: background .14s, opacity .14s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble-reply:hover { opacity: 1; background: rgba(var(--accent), 0.18); border-left-color: rgb(var(--accent)); }
/* jump-to-original highlight: held steady (.lit) while scrolling, then fades (.lit-fade) once settled */
.t-bubble.lit { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; }
.t-bubble.lit-fade { outline-color: rgba(var(--accent), 0); transition: outline-color 0.9s ease; }
@media (prefers-reduced-motion: reduce) { .t-bubble.lit-fade { transition: none; } }
/* legacy one-shot flash (kept for any other caller) */
.t-bubble.flash { animation: bubbleFlash 1.25s ease; }
@keyframes bubbleFlash { 0% { outline: 0 solid rgba(var(--accent), 0); outline-offset: 2px; } 18% { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; } 100% { outline: 0 solid rgba(var(--accent), 0); outline-offset: 2px; } }
/* progressive voice transcript under a bubble */
.bubble-transcript { margin-top: 5px; padding: 6px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid rgba(var(--accent), 0.5); font-size: .82rem; line-height: 1.4; }
.bubble-transcript.tr-preview { border-left-color: rgba(255, 255, 255, 0.35); font-style: italic; opacity: .92; }
.tr-text { color: #fff; word-break: break-word; white-space: pre-wrap; }
/* long transcripts: clamp to a few lines until "voir plus" */
.bubble-transcript.tr-clamp:not(.tr-open) .tr-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.tr-meta { margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bubble-transcript.tr-toggle { cursor: pointer; }
.bubble-transcript.tr-toggle:hover { background: rgba(255, 255, 255, 0.09); }
.tr-more { background: transparent; border: none; box-shadow: none; cursor: pointer; padding: 0; font: inherit;
  font-size: .7rem; color: rgb(var(--accent)); opacity: .85; text-decoration: underline; pointer-events: none; }
.tr-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: rgba(255, 255, 255, 0.6); margin-left: auto; }
.tr-badge.tr-live { color: rgba(255, 255, 255, 0.82); }
.tr-badge.tr-done { color: rgba(255, 255, 255, 0.42); }
.bubble-transcript.tr-pending { color: rgba(255, 255, 255, 0.7); font-style: italic; display: flex; align-items: center; gap: 7px; }
.bubble-transcript.tr-error { color: rgba(255, 200, 200, 0.85); border-left-color: rgba(255, 120, 120, 0.6); font-size: .76rem; display: flex; gap: 6px; align-items: center; }
.tr-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgb(var(--accent)); display: inline-block; animation: trSpin 0.7s linear infinite; flex: none; }
@keyframes trSpin { to { transform: rotate(360deg); } }
/* brief, gentle fade when a transcript block is swapped in by the poller */
.tr-bump { animation: trBump 0.45s ease; }
@keyframes trBump { from { opacity: 0.3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tr-spin { animation: none; } .tr-bump { animation: none; } }

.bubble-foot { display: flex; gap: 4px; justify-content: flex-end; }
.bubble-act { background: transparent; border: none; box-shadow: none; color: rgba(var(--text-main), 0.55); cursor: pointer; font-size: .8rem; padding: 1px 5px; border-radius: 6px; line-height: 1; }
.bubble-act:hover { background: rgba(var(--text-main), 0.12); color: rgb(var(--text-main)); }
.reply-banner { width: 100%; font-size: .78rem; padding: 5px 8px; border-radius: 8px; background: rgba(var(--text-main), 0.08); display: flex; align-items: center; gap: 6px; justify-content: center; }
.composer { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: center; align-items: center; margin-top: 2px; }

/* custom audio player */
.vplayer { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 6px 10px 6px 6px; border-radius: 999px;
  background: rgba(var(--text-main), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12); }
.vplay { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; padding: 0; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: var(--s-accent); box-shadow: none; }
.vplayer.playing .vplay { background: rgba(var(--text-main), 0.4); }
.vplay:active { transform: scale(.92); }
.vbar { flex: 1; min-width: 40px; height: 6px; border-radius: 999px; background: rgba(var(--text-main), 0.18); cursor: pointer; overflow: hidden; }
.vfill { height: 100%; width: 0; background: rgb(var(--accent)); border-radius: 999px; transition: width .1s linear; }
.vtime { font-size: .76rem; color: rgba(var(--text-main), 0.65); flex: 0 0 auto; min-width: 30px; text-align: right; }

/* comment composer */
.comment-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.comment-input { width: 100%; resize: vertical; min-height: 48px; }

/* micro-interactions */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* responsive */
@media (max-width: 560px) {
  .tab { padding: 8px 10px; }
  .card-link.big { padding: 20px; }
}
@media (max-width: 520px) { .who { display: none; } }
@media (max-width: 460px) { .card-link { padding: 16px; } }

/* ---- AI grammar correction (mock phase) ---- */
.gram-toggle-btn.on { background: rgba(var(--accent),0.18); color: rgb(var(--text-main)); box-shadow: inset 0 0 0 1px rgba(var(--accent),0.4); }
.gram-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.gram-mark { position: absolute; height: 3px; pointer-events: auto; cursor: pointer; border-radius: 2px;
  background: repeating-linear-gradient(90deg, hsl(28 92% 55%) 0 3px, transparent 3px 5px); }
.gram-mark:hover { height: 5px; }
.gram-old { color: hsl(0 70% 64%); text-decoration: line-through; }
.gram-new { color: hsl(140 58% 56%); font-weight: 600; }
.gram-reason { font-size: .72rem; opacity: .7; }
.gram-pop { position: fixed; z-index: 90; max-width: 250px; padding: 10px 12px; border-radius: 14px;
  background: rgba(14,14,22,0.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 12px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 6px; color: rgb(var(--text-main)); }
.gram-pop-line { font-size: .95rem; }
.gram-pop-acts { display: flex; gap: 6px; }
.gram-pop-acts button { flex: 1; padding: 6px; border: none; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; }
.gram-no { background: rgba(var(--text-main),0.1); color: rgb(var(--text-main)); }
.gram-yes { background: rgb(var(--accent)); color: #fff; }
.gram-learn { background: transparent; border: none; color: rgba(var(--text-main),0.6); font-size: .72rem; cursor: pointer; text-align: left; padding: 2px; }
.gram-learn:hover { color: rgb(var(--text-main)); }
.gram-chip { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70;
  padding: 8px 12px; border-radius: 999px; border: none; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600;
  background: rgba(14,14,22,0.82); color: rgb(var(--text-main)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 6px 20px rgba(0,0,0,.4); }
.gram-chip:hover { background: rgba(var(--accent),0.3); }
.gram-review-ov { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,12,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gram-card { width: min(420px, calc(100% - 40px)); padding: 22px; border-radius: 20px; text-align: center; color: rgb(var(--text-main));
  background: rgba(14,14,22,0.93); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 12px; }
.gram-card-count { font-size: .76rem; opacity: .6; }
.gram-card-line { font-family: 'Instrument Serif', serif; font-size: 1.5rem; }
.gram-card-acts { display: flex; gap: 10px; margin-top: 6px; }
.gram-card-acts button { flex: 1; padding: 12px; border: none; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; }
.gram-rej { background: rgba(var(--text-main),0.12); color: rgb(var(--text-main)); }
.gram-acc { background: rgb(var(--accent)); color: #fff; }
.gram-close-rev { background: transparent; border: none; color: rgba(var(--text-main),0.6); cursor: pointer; font-size: .8rem; }
.gram-hist { position: fixed; left: 16px; bottom: 60px; z-index: 88; width: min(360px, calc(100% - 32px)); padding: 12px; border-radius: 16px; color: rgb(var(--text-main));
  background: rgba(14,14,22,0.93); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 16px 50px rgba(0,0,0,.55); }
.gram-hist-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 8px; }
.gram-hist-x { background: transparent; border: none; color: rgba(var(--text-main),0.6); cursor: pointer; font-size: 1rem; }
.gram-hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; }
.gram-hist-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; padding: 6px 8px; border-radius: 8px; background: rgba(var(--text-main),0.06); }
.gram-hist-row button { background: transparent; border: none; color: rgba(var(--text-main),0.7); cursor: pointer; font-size: .78rem; white-space: nowrap; }
.gram-hist-row button:hover { color: rgb(var(--accent)); }
.gram-confirm-q { font-family: 'Instrument Serif', serif; font-size: 1.3rem; line-height: 1.25; }
.gram-confirm-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.gram-confirm-acts button { padding: 12px; border: none; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; }
.gram-applyall { background: rgba(var(--text-main),0.12); color: rgb(var(--text-main)); box-shadow: inset 0 0 0 1px rgba(var(--accent),0.4); }
.gram-applyall:hover { background: rgba(var(--accent),0.2); }

/* blue glow + sparkle particles on a silently auto-corrected word */
.gram-glow-layer { z-index: 7; }
.gram-glow { position: absolute; border-radius: 6px; pointer-events: none; background: rgba(95,175,255,0.22); animation: gramGlow 1.2s ease-out forwards; }
@keyframes gramGlow {
  0%   { box-shadow: 0 0 14px 5px rgba(95,175,255,0.8); background: rgba(95,175,255,0.34); }
  100% { box-shadow: 0 0 0 0 rgba(95,175,255,0); background: rgba(95,175,255,0); }
}
.gram-spark { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #eaf4ff; pointer-events: none;
  box-shadow: 0 0 6px 1px rgba(170,210,255,0.95); opacity: 0; animation: gramSpark 1.05s ease-out forwards; }
@keyframes gramSpark {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.3); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -16px) scale(1); }
}

/* in-context review: breathing ring on the active word + ✓/✗ flash + slim sticky bar */
.gram-ring { position: absolute; pointer-events: none; border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(255,193,92,0.95), 0 0 14px 4px rgba(255,180,80,0.5); animation: gramRing 1.5s ease-in-out infinite; }
@keyframes gramRing {
  0%,100% { box-shadow: 0 0 0 2px rgba(255,193,92,0.9), 0 0 12px 3px rgba(255,180,80,0.4); }
  50%     { box-shadow: 0 0 0 4px rgba(255,209,120,1), 0 0 22px 7px rgba(255,193,92,0.6); }
}
.gram-flash { position: absolute; pointer-events: none; font-size: 19px; font-weight: 800; animation: gramFlashUp .8s ease-out forwards; }
.gram-flash.ok { color: #39e06e; text-shadow: 0 0 8px rgba(57,224,110,.85); }
.gram-flash.no { color: #ff5a5a; text-shadow: 0 0 8px rgba(255,90,90,.85); }
@keyframes gramFlashUp { 0% { opacity: 0; transform: translateY(6px) scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scale(1.2); } }
.gram-bar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 96;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; max-width: min(560px, calc(100% - 24px));
  background: rgba(12,12,20,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 16px 50px rgba(0,0,0,.6); animation: fadeUp .2s ease; }
.gram-bar-mid { flex: 1; min-width: 0; text-align: center; }
.gram-bar-line { font-size: 1.05rem; }
.gram-bar-sub { font-size: .72rem; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gram-bar button { border: none; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; padding: 9px 12px; flex: 0 0 auto; }
.gram-bar-rej { background: rgba(255,255,255,0.16); color: #fff; }
.gram-bar-rej:hover { background: rgba(255,255,255,0.26); }
.gram-bar-acc { background: rgb(var(--accent)); color: #fff; }
.gram-bar-acc:hover { filter: brightness(1.08); }
.gram-bar-x { background: transparent; color: rgba(255,255,255,.6); padding: 6px 8px; }
.gram-bar-x:hover { color: #fff; }

/* contrast: force readable light text on the dark glass surfaces */
.gram-pop, .gram-card, .gram-hist { color: #fff; }
.gram-pop-line, .gram-card-line, .gram-confirm-q { color: #fff; }
.gram-reason { color: rgba(255,255,255,0.72); }
.gram-no, .gram-rej { background: rgba(255,255,255,0.16); color: #fff; }
.gram-no:hover, .gram-rej:hover { background: rgba(255,255,255,0.26); }
.gram-applyall { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--accent),0.5); }
.gram-learn { color: rgba(255,255,255,0.66); }
.gram-learn:hover { color: #fff; }
.gram-hist-row { color: #fff; }
.gram-hist-x { color: rgba(255,255,255,0.7); }

/* ============================================================================================
   Organizational beacons: Expand (collapsible section) + Sub-entry (text-anchored child doc)
   ============================================================================================ */

/* --- Expand beacon: a collapsible titled section owning its own nested blocks --- */
.blk-expand {
  border: 1px solid rgba(var(--text-main), 0.14);
  border-radius: 14px;
  background: rgba(var(--text-main), 0.04);
  margin: 14px 0;
  overflow: hidden;
}
.blk-expand > .expand-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-weight: 650; color: rgb(var(--text-main));
}
.blk-expand > .expand-summary::-webkit-details-marker { display: none; }
.blk-expand > .expand-summary:hover { background: rgba(var(--text-main), 0.05); }
.expand-caret { display: inline-block; transition: transform 0.18s ease; color: rgba(var(--accent), 0.95); font-size: 0.9em; }
.blk-expand[open] > .expand-summary > .expand-caret { transform: rotate(90deg); }
.expand-title { flex: 1; }
.expand-body { padding: 4px 16px 14px; border-top: 1px solid rgba(var(--text-main), 0.1); }
.expand-body > .blk { margin: 6px 0; }
/* the header-mirror spacer is inert until a section is expanded (view mode) */
.expand-spacer { display: none; }
/* view mode — EXPANDED: the title header keeps the exact same graphics as collapsed but shrinks to
   the top-left; the full-width divider is removed; the body text flows UP and wraps into the freed
   space beside the header (the hidden floated spacer reserves the header's box so text wraps around
   it; the real <summary> is laid over the spacer and stays the clickable toggle). Card bg stays. */
.entry-body .blk-expand[open] { position: relative; }
.entry-body .blk-expand[open] > .expand-summary {
  position: absolute; top: 0; left: 0; width: max-content; z-index: 8; /* above .blk (z-index 7) so taps on the chip toggle, not the text box behind it */
  border: 1px solid rgba(var(--text-main), 0.22); border-radius: 12px; /* rounded chip around the title */
}
.entry-body .blk-expand[open] > .expand-body { border-top: none; padding-top: 0; }
.entry-body .blk-expand[open] > .expand-body > .expand-spacer {
  display: inline-flex; float: left; visibility: hidden; align-items: center; gap: 10px;
  margin-left: -16px; margin-right: 14px; margin-bottom: 6px; /* breathing room between the chip and the wrapped text */
  padding: 12px 16px; font-weight: 650; border: 1px solid transparent; /* mirror the summary box exactly */
}
/* closing-tag mirror at the bottom-right — clicking it collapses the section (with view-pinning) */
.expand-foot { display: none; }
.entry-body .blk-expand[open] > .expand-body > .expand-foot {
  display: inline-block; float: right; clear: both; margin-top: 10px;
  font: inherit; font-weight: 650; font-size: .82em; line-height: 1; color: rgba(var(--text-main), 0.7);
  background: transparent; border: 1px solid rgba(var(--text-main), 0.22); border-radius: 12px;
  padding: 6px 12px; cursor: pointer; transition: background .15s, color .15s;
}
.entry-body .blk-expand[open] > .expand-body > .expand-foot:hover { background: rgba(var(--text-main), 0.07); color: rgb(var(--text-main)); }

/* smooth open/close: animate the card height. The card already clips (overflow:hidden) so the body
   stays a normal block and keeps wrapping around the floated spacer. interpolate-size lets the auto
   height tween; content-visibility:allow-discrete keeps the body visible while it animates shut. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .entry-body .blk-expand { transition: height .28s ease; }
  .entry-body .blk-expand::details-content {
    transition: content-visibility .28s allow-discrete, opacity .24s ease;
    opacity: 1;
  }
  .entry-body .blk-expand:not([open])::details-content { opacity: 0; }
}
.bcn-flash { box-shadow: 0 0 0 2px rgba(var(--accent), 0.6); transition: box-shadow 0.4s ease; }

/* Expand in the editor: the contextual pill already overlays; keep the details readable */
.editor-beacon[data-beacon-type="expand"] { padding: 0; background: none; border: 0; }
.editor-beacon[data-beacon-type="expand"] .beacon-inner { width: 100%; }

/* --- Sub-entry: text-anchored highlight + a 📄 affordance pin --- */
.w.hl-sub {
  text-decoration: underline dotted rgba(var(--accent), 0.85);
  text-underline-offset: 3px;
  cursor: pointer;
  background: rgba(var(--accent), 0.07);
  border-radius: 3px;
}
.w.hl-sub:hover { background: rgba(var(--accent), 0.14); }
.sub-pin {
  font-size: 0.72em; margin-left: 2px; cursor: pointer; vertical-align: super;
  opacity: 0.8; text-decoration: none; user-select: none;
}
.sub-pin:hover { opacity: 1; }

/* --- Selection-panel "create sub-entry" button (styled like the create-thread row) --- */
.sel-sub svg { color: rgba(var(--accent), 0.95); }

/* --- Beacons index panel (reuses the .html-editor-overlay frame) --- */
.beacons-index { max-width: 460px; width: min(460px, 92vw); }
.bcn-group { margin: 6px 0 14px; }
.bcn-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 0 0 8px 2px;
}
.bcn-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; margin: 4px 0; border-radius: 12px;
  background: rgba(var(--text-main), 0.05); color: rgb(var(--text-main));
  border: 1px solid rgba(var(--text-main), 0.1); text-align: left; cursor: pointer;
  font-size: 0.95rem; text-decoration: none;
}
.bcn-row:hover { background: rgba(var(--accent), 0.12); border-color: rgba(var(--accent), 0.4); }
.bcn-row svg { flex: 0 0 auto; color: rgba(var(--accent), 0.95); }
.bcn-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcn-empty { padding: 6px 4px; }

/* --- Expand editor modal: title field + nested editor wrapper --- */
.expand-editor { max-width: 720px; width: min(720px, 94vw); }
.exp-title-input {
  width: 100%; box-sizing: border-box; margin: 8px 0 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(var(--text-main), 0.06); color: rgb(var(--text-main));
  border: 1px solid rgba(var(--text-main), 0.16); font-size: 1.05rem; font-weight: 600;
}
.exp-editor-wrap {
  min-height: 180px; max-height: 50vh; overflow-y: auto;
  border: 1px solid rgba(var(--text-main), 0.14); border-radius: 12px; padding: 8px 12px;
  background: rgba(var(--text-main), 0.03);
}

/* ---- Custom confirm dialog (replaces native window.confirm) ---- */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
  padding: 22px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.15s ease;
}
.confirm-overlay.open { opacity: 1; }
.confirm-card {
  width: min(380px, 100%); border-radius: 18px; padding: 22px 22px 18px;
  background: rgba(var(--text-main), 0.10); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.16), 0 24px 70px rgba(0, 0, 0, 0.5);
  transform: translateY(8px) scale(0.97); transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.light-theme .confirm-card { background: rgba(248, 250, 252, 0.86); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.12), 0 24px 70px rgba(31, 38, 135, 0.18); }
.confirm-overlay.open .confirm-card { transform: translateY(0) scale(1); }
.confirm-title { font-size: 1.12rem; font-weight: 700; color: rgb(var(--text-main)); }
.confirm-msg { margin-top: 8px; color: rgba(var(--text-main), 0.72); font-size: 0.92rem; line-height: 1.45; }
.confirm-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.confirm-foot button { padding: 9px 16px; border-radius: 11px; font-size: 0.92rem; font-weight: 600; cursor: pointer; border: none; }
.confirm-cancel { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.22); color: rgb(var(--text-main)); }
.confirm-cancel:hover { background: rgba(var(--text-main), 0.08); }
.confirm-ok { background: rgba(var(--text-main), 0.16); color: rgb(var(--text-main)); box-shadow: inset 0 0 0 1px rgba(var(--text-main), 0.2); }
.confirm-ok:hover { background: rgba(var(--text-main), 0.24); }
.confirm-ok.danger { background: rgb(var(--danger)); color: #fff; box-shadow: 0 4px 16px rgba(var(--danger), 0.4); }
.confirm-ok.danger:hover { filter: brightness(1.08); }
.confirm-ok:focus-visible { outline: 2px solid rgba(var(--accent), 0.7); outline-offset: 2px; }