/* ─── Frontend shortcode shell ─────────────────────────────────────────── */

.chip-fe-shell {
  --chip-fe-bg: #1b1814;
  background: var(--chip-fe-bg);
  color: #eee5cc;
  border:1px solid #000;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  margin: 18px auto;
  max-width: 1400px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.chip-fe-header {
  background: linear-gradient(180deg, #251c14, #1b1814);
  padding: 12px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid #000;
}
.chip-fe-brand {
  display:flex; align-items:center; gap: 10px;
  font-family: "Lora", "Georgia", serif;
  color: #f3ead7;
}
.chip-fe-brand .chip-badge {
  display:inline-block; padding:4px 8px;
  border:2px solid #b81e1e; color:#b81e1e;
  font-family: "JetBrains Mono","SF Mono","Menlo",ui-monospace,monospace;
  font-weight:700; letter-spacing:2px; font-size: 11px;
  transform: rotate(-3deg); border-radius:3px; background: rgba(243,234,215,.08);
}
.chip-fe-brand strong { font-size: 16px; }
.chip-fe-brand .chip-subtle { color: #b9aa86; font-size: 12px; }

.chip-fe-nav {
  flex: 1;
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
}
.chip-fe-nav a {
  padding: 6px 10px;
  font-family: "JetBrains Mono","SF Mono","Menlo",ui-monospace,monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: #d6c9a8;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}
.chip-fe-nav a:hover { background: rgba(243,234,215,.05); color: #f3ead7; }
.chip-fe-nav a.active {
  background: #f3ead7; color: #1b1814; border-color: #b81e1e;
  box-shadow: inset 0 -3px 0 #b81e1e;
}

.chip-fe-user {
  display: flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono","SF Mono","Menlo",ui-monospace,monospace;
  font-size: 11px; color: #b9aa86;
}
.chip-fe-user .chip-btn { background: transparent; color: #d6c9a8; border-color: #5a4a36; padding: 4px 8px; font-size: 10px; }
.chip-fe-user .chip-btn:hover { background: rgba(243,234,215,.08); color: #f3ead7; }

.chip-fe-main { background: #f3ead7; padding: 0; }
.chip-fe-main .chip-wrap {
  margin: 0; border: none; box-shadow: none; min-height: auto;
}
.chip-fe-main .chip-wrap::before { display: none; }

.chip-fe-locked .chip-fe-gate {
  background: #f3ead7; padding: 60px 40px; text-align: center; color: #20140c;
  font-family: "Lora","Georgia",serif;
}
.chip-fe-locked .chip-fe-gate h2 { font-size: 28px; }
.chip-fe-locked .chip-fe-gate a { color: #8b1e1e; }

@media (max-width: 720px) {
  .chip-fe-nav a { font-size: 10px; padding: 5px 7px; }
  .chip-fe-brand strong { font-size: 14px; }
}

/* ─── CaseHound Investigations Pro — Dossier UI ─────────────────────────────────── */

:root {
  --chip-bg:        #1b1814;
  --chip-paper:     #f3ead7;
  --chip-paper-2:   #e7dcc1;
  --chip-ink:       #20140c;
  --chip-ink-2:     #4a3826;
  --chip-line:      #b8a888;
  --chip-line-2:    #d6c9a8;
  --chip-accent:    #8b1e1e;
  --chip-accent-2:  #c0392b;
  --chip-stamp:     #b81e1e;
  --chip-gold:      #c8a96a;
  --chip-thread:    #a51010;
  --chip-good:      #2c7a4d;
  --chip-warn:      #d68a30;
  --chip-info:      #2c5c8a;
  --chip-shadow:    0 6px 20px rgba(0,0,0,.18);
  --chip-shadow-soft: 0 1px 3px rgba(0,0,0,.10);
  --chip-mono:      "JetBrains Mono","SF Mono","Menlo",ui-monospace,monospace;
  --chip-typewriter:"Special Elite","Courier New",monospace;
  --chip-sans:      -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --chip-serif:     "Lora","Georgia",serif;
}

@font-face {
  font-family: "Special Elite";
  src: local("Special Elite");
  font-display: swap;
}

/* ─── Wrap ────────────────────────────────────────────────────────────── */

.chip-wrap {
  --paper-grain:
    radial-gradient(1200px 600px at 10% -10%, rgba(184,30,30,.05), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(200,169,106,.10), transparent 60%);
  background:
    var(--paper-grain),
    repeating-linear-gradient(0deg, rgba(80,50,20,.02) 0 1px, transparent 1px 4px),
    var(--chip-paper);
  color: var(--chip-ink);
  padding: 24px 28px 60px;
  margin: 18px 18px 0 0;
  border: 1px solid var(--chip-line);
  box-shadow: var(--chip-shadow);
  font-family: var(--chip-sans);
  position: relative;
  min-height: calc(100vh - 100px);
}
.chip-fullbleed { padding: 18px 18px 18px; }

/* dossier "binder rings" along the left edge */
.chip-wrap::before {
  content:"";
  position:absolute; left:14px; top:60px; bottom:30px; width:8px;
  background: repeating-linear-gradient(180deg, transparent 0 30px, rgba(40,20,10,.18) 30px 36px);
  border-radius:2px; pointer-events:none;
}

.chip-wrap h1, .chip-wrap h2, .chip-wrap h3 {
  font-family: var(--chip-serif);
  color: var(--chip-ink);
  letter-spacing: .3px;
}
.chip-subtle { color: var(--chip-ink-2); font-size: 13px; }
.chip-frontend-link { margin: -8px 0 18px; }
.chip-frontend-link a { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ─── Header ─────────────────────────────────────────────────────────── */

.chip-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom: 2px solid var(--chip-ink); padding-bottom:14px; margin-bottom:18px;
}
.chip-header h1 {
  margin:0; font-size: 28px; line-height:1; padding-right:14px;
}
.chip-header-title { display:flex; align-items:center; gap:14px; }
.chip-badge {
  display:inline-block; padding:6px 10px; border:2px solid var(--chip-stamp);
  color:var(--chip-stamp); font-family: var(--chip-mono); font-weight:700; letter-spacing:2px;
  transform: rotate(-3deg); border-radius:4px; background: rgba(255,255,255,.4);
}
.chip-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chip-header-actions label { display:flex; flex-direction:column; font-size:11px; color:var(--chip-ink-2); }
.chip-header-actions select { min-width:200px; }

/* ─── Buttons ────────────────────────────────────────────────────────── */

.chip-btn {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background: var(--chip-paper-2); color: var(--chip-ink);
  border:1px solid var(--chip-line); padding:7px 12px; border-radius: 3px;
  font-family: var(--chip-mono); font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  box-shadow: var(--chip-shadow-soft);
  transition: transform .04s ease, background .15s, border-color .15s;
  text-decoration:none;
}
.chip-btn:hover { background:#fff8e5; border-color:var(--chip-ink-2); }
.chip-btn:active{ transform:translateY(1px); }
.chip-btn.primary { background: var(--chip-ink); color: var(--chip-paper); border-color: var(--chip-ink); }
.chip-btn.primary:hover { background:#3a2415; }
.chip-btn.danger  { background: #fff; color: var(--chip-accent); border-color: var(--chip-accent); }
.chip-btn.danger:hover  { background: var(--chip-accent); color: #fff; }
.chip-btn.ghost   { background: transparent; }

/* Icon-only square button — used for per-card actions (Edit, Delete, View, …)
   so cards stay compact. Pair with title="..." for hover tooltips. */
.chip-btn.icon {
  padding: 0; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; letter-spacing: 0;
}
.chip-btn.icon.sm { width: 24px; height: 24px; font-size: 12px; }

/* ─── Filter / search bar ────────────────────────────────────────────── */

.chip-filter-bar {
  display:flex; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:14px;
  background: rgba(255,255,255,.45); border:1px dashed var(--chip-line); border-radius:3px;
}
.chip-filter-bar input[type="search"], .chip-filter-bar input[type="text"], .chip-filter-bar select {
  background: #fff; border:1px solid var(--chip-line); padding:6px 10px; min-width:180px; color:var(--chip-ink);
  font-family: var(--chip-sans); font-size:13px;
}
.chip-tab-search { flex: 1; min-width: 240px !important; }
.chip-filter-bar input[type="search"]:focus, .chip-filter-bar select:focus { outline: 2px solid var(--chip-gold); outline-offset:1px; }
.chip-checks label { font-size:12px; color:var(--chip-ink-2); }

/* ─── Loading ────────────────────────────────────────────────────────── */

.chip-loading { font-family: var(--chip-typewriter); color: var(--chip-ink-2); padding:30px; text-align:center; }
.chip-empty   { font-family: var(--chip-typewriter); color: var(--chip-ink-2); padding:40px; text-align:center; border:1px dashed var(--chip-line); }

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

.chip-card-grid, .chip-person-grid, .chip-evidence-grid, .chip-tips-grid {
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.chip-card {
  background: #fff; border:1px solid var(--chip-line); padding:14px; box-shadow: var(--chip-shadow-soft);
  position:relative; transition: transform .12s, box-shadow .12s;
  display: flex; flex-direction: column;
  min-height: 200px;
  font-size: 12px;
}
.chip-card:hover { box-shadow: var(--chip-shadow); transform: translateY(-1px); }
.chip-card h3 { margin:0 0 4px; font-family: var(--chip-serif); font-size:14px; }
.chip-card .chip-meta { font-family: var(--chip-mono); font-size:10px; color: var(--chip-ink-2); }
.chip-card > p, .chip-card > .chip-summary, .chip-card > div.chip-summary { margin: 4px 0; font-size: 12px; line-height: 1.45; color: var(--chip-ink); }
.chip-card .chip-actions { margin-top: auto; padding-top: 10px; display:flex; gap:4px; flex-wrap:wrap; }

/* Summary clamp — keeps any text node to N lines so cards stay uniform. */
.chip-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}
.chip-summary-2 { -webkit-line-clamp: 2; }
.chip-summary-4 { -webkit-line-clamp: 4; }
/* Quill HTML inside summaries needs explicit font sizes so headings don't
   blow out the card. Match the timeline description treatment. */
.chip-summary p, .chip-summary li, .chip-summary div { font-size: 12px; line-height: 1.45; margin: 0; }
.chip-summary h1, .chip-summary h2, .chip-summary h3, .chip-summary h4 {
  font-size: 13px; margin: 0; font-family: var(--chip-serif);
}
.chip-summary ul, .chip-summary ol { margin: 0 0 0 16px; padding: 0; }

/* Make the auto-fill grids align rows so cards in the same row are equal height. */
.chip-card-grid, .chip-person-grid, .chip-evidence-grid, .chip-tips-grid {
  align-items: stretch;
}

/* ─── Case grid (manila folders) ─────────────────────────────────────── */

.chip-case-grid {
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.chip-folder {
  --cover: #c8a96a;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cover) 90%, white) 0%, color-mix(in srgb, var(--cover) 78%, black) 100%);
  border:1px solid rgba(0,0,0,.25);
  border-radius: 0 6px 4px 4px;
  position:relative; min-height:180px;
  padding: 28px 16px 14px;
  cursor:pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 8px 14px rgba(0,0,0,.18), inset 0 -3px 0 rgba(0,0,0,.18);
  color: #1a1106;
  font-family: var(--chip-sans);
  overflow: hidden;
}
.chip-folder:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 12px 22px rgba(0,0,0,.25); }
.chip-folder::before { /* tab */
  content:""; position:absolute; top:-12px; left:14px; height:14px; width:120px;
  background: inherit; border:1px solid rgba(0,0,0,.25); border-bottom:none; border-radius: 5px 5px 0 0;
}
.chip-folder .chip-case-no {
  font-family: var(--chip-mono); font-size:11px; background: #fffbe9; color:#1a1106;
  padding:2px 6px; border-radius:2px; border:1px solid rgba(0,0,0,.2); margin-right:6px;
}
.chip-folder .chip-folder-title {
  font-family: var(--chip-serif); font-weight:700; font-size:18px; line-height:1.2; margin:8px 0 8px;
  color:#231609;
}
.chip-folder .chip-folder-syn { font-size: 12px; color:#2b1c0f; opacity:.85;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.chip-folder .chip-folder-foot {
  position:absolute; left:14px; right:14px; bottom:10px; display:flex; justify-content:space-between; align-items:center;
  font-family: var(--chip-mono); font-size: 10px; color:#1a1106; opacity:.85;
}
/* "STATUS" stamp */
.chip-stamp {
  display:inline-block; padding:2px 6px; border:2px solid currentColor; transform: rotate(-4deg);
  font-family: var(--chip-mono); font-weight:700; font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color: var(--chip-stamp); background: rgba(255,255,255,.4); border-radius:2px;
}
.chip-stamp.priority-critical { color:#7a0d0d; border-color:#7a0d0d; }
.chip-stamp.priority-high     { color:#a44a16; border-color:#a44a16; }
.chip-stamp.priority-low      { color:#3a4a5e; border-color:#3a4a5e; }

/* per-status tints (cover stripe) */
.chip-folder .status-tag {
  position:absolute; top:8px; right:10px;
}

/* ─── Person cards ───────────────────────────────────────────────────── */

.chip-person {
  background:#fff; border:1px solid var(--chip-line); padding:12px;
  display:flex; flex-direction: column; gap: 0;
  min-height: 200px;
  font-size: 12px;
}
.chip-person-row {
  display: flex; gap: 12px; align-items: flex-start; flex: 1;
}
.chip-person .pic {
  width:54px; height:54px; border-radius: 50%; background: var(--chip-paper-2);
  display:flex; align-items:center; justify-content:center; font-family: var(--chip-serif); font-size:20px; color:var(--chip-ink-2);
  border:1px solid var(--chip-line); overflow:hidden;
  flex-shrink: 0;
}
.chip-person .pic img { width:100%; height:100%; object-fit:cover; }
.chip-person .info { flex:1; min-width:0; }
.chip-person .info h3 { margin:0; font-size:14px; font-family: var(--chip-serif); }
.chip-person .info .role { font-family: var(--chip-mono); font-size:10px; color:var(--chip-ink-2); margin-top:2px; }
.chip-person .info .desc { font-size:12px; color:var(--chip-ink); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Actions sit below the row, anchored to the card's left edge so they line
   up with the action buttons on every other tab's cards. */
.chip-person > .chip-actions {
  margin-top: auto; padding-top: 10px; display: flex; gap: 4px; flex-wrap: wrap;
  justify-content: flex-start;
}
.chip-risk-badge { font-family: var(--chip-mono); font-size:10px; padding:1px 5px; border-radius:2px; border:1px solid; display:inline-block; margin-left:6px; }
.chip-risk-low      { color:#2c7a4d; border-color:#2c7a4d; }
.chip-risk-medium   { color:#d68a30; border-color:#d68a30; }
.chip-risk-high     { color:#a31a1a; border-color:#a31a1a; }
.chip-risk-extreme  { color:#fff; background:#7a0d0d; border-color:#7a0d0d; }
.chip-risk-unknown  { color:#5a4a36; border-color:#5a4a36; }
/* Directory rows not attached to any case */
.chip-unlinked-badge { font-family: var(--chip-mono); font-size:10px; padding:1px 5px; border-radius:2px; border:1px dashed #8a7a5f; color:#8a7a5f; display:inline-block; margin-left:6px; cursor:help; }

/* ─── Evidence cards ─────────────────────────────────────────────────── */

.chip-ev {
  background: #fff; border:1px solid var(--chip-line); padding:12px; position:relative;
}
.chip-ev::before { /* "EVIDENCE" rubber stamp */
  content:"EVIDENCE"; position:absolute; top:6px; right:10px;
  font-family: var(--chip-mono); font-size:10px; color: var(--chip-stamp);
  border:1px solid var(--chip-stamp); padding:1px 4px; transform: rotate(8deg);
  letter-spacing:1px; opacity:.8;
}
.chip-ev .chip-ev-no { font-family: var(--chip-mono); font-size:11px; color:var(--chip-ink-2); }
.chip-ev h3 { margin:6px 0 4px; font-size:15px; }
.chip-ev .chip-ev-desc { font-size:12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.chip-ev .chip-ev-foot { font-family: var(--chip-mono); font-size:10px; margin-top:8px; color:var(--chip-ink-2); }
.chip-ev .chip-ev-foot .seal { color: var(--chip-good); font-weight:700; }
.chip-ev .chip-ev-foot .unseal { color: var(--chip-warn); }
.chip-ev .chip-ev-thumb { width:100%; height:120px; background:#f8f0d8; border:1px dashed var(--chip-line); display:flex; align-items:center; justify-content:center; color:var(--chip-ink-2); font-family: var(--chip-mono); font-size:11px; margin-top:8px; overflow:hidden; }
.chip-ev .chip-ev-thumb img { width:100%; height:100%; object-fit:cover; }

/* ─── Tips ───────────────────────────────────────────────────────────── */

.chip-tip {
  background:
    linear-gradient(0deg, rgba(0,0,0,.02), transparent),
    repeating-linear-gradient(180deg, rgba(0,0,0,.02) 0 28px, transparent 28px 30px),
    #fffaee;
  border:1px solid var(--chip-line); padding:14px; box-shadow: var(--chip-shadow-soft);
  position:relative;
  display: flex; flex-direction: column;
  min-height: 200px;
}
.chip-tip .chip-actions { margin-top: auto; padding-top: 10px; }
.chip-tip .tip-type { font-family: var(--chip-mono); font-size:11px; color: var(--chip-stamp); letter-spacing:1px; }
.chip-tip blockquote { margin:8px 0; font-family: var(--chip-typewriter); font-size:14px; line-height:1.5; color:var(--chip-ink); }
.chip-tip .meta { font-family: var(--chip-mono); font-size:10px; color:var(--chip-ink-2); }
.chip-tip .pin {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%; background: radial-gradient(circle at 35% 35%, #ff8585, #b81e1e 60%, #6b0a0a 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}

/* ─── Modal ──────────────────────────────────────────────────────────── */

.chip-modal {
  /* Light tint over the page — enough to signal "modal" but not so dark that
     the underlying text is unreadable when the user drags the card aside to
     reference it. */
  position:fixed; inset:0; background: rgba(20,12,6,.18); z-index:99999;
  display:flex; align-items:flex-start; justify-content:center; padding:60px 20px;
}
.chip-modal[hidden] { display:none; }
.chip-modal-card {
  background: var(--chip-paper); border:1px solid var(--chip-ink); width: 720px; max-width:95vw;
  max-height: 85vh; overflow:auto; box-shadow: 0 16px 50px rgba(0,0,0,.5);
}
/* When a card is being dragged JS switches it to position:fixed with explicit
   top/left so it escapes the flex container; kill text-selection so the drag
   feels clean. */
.chip-modal-card.chip-dragging { user-select:none; }
.chip-modal-head {
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom: 2px solid var(--chip-ink); background: var(--chip-paper-2);
  cursor: move; user-select: none;
}
/* Buttons inside the head (×, save, etc.) shouldn't show the move cursor. */
.chip-modal-head button { cursor: pointer; }
.chip-modal-head h2 { margin:0; font-family: var(--chip-serif); font-size:20px; }
.chip-modal-close { background:transparent; border:none; font-size:24px; cursor:pointer; color:var(--chip-ink); }
.chip-modal-foot {
  display:flex; gap:10px; justify-content:flex-end; padding:14px 18px;
  border-top: 1px solid var(--chip-line); background: var(--chip-paper-2);
  position:sticky; bottom:0;
}
/* Delete button injected by addDeleteToModal — anchored to the bottom-left
   so destructive action is visually separated from Cancel/Save on the right. */
.chip-modal-foot .chip-modal-delete { margin-right: auto; }

/* In-page image lightbox (opened in place of a raw new-tab navigation). */
.chip-img-viewer { align-items:center; padding:40px 20px; }
/* Definite width (not auto) so the rich Description editor wraps long text
   instead of stretching the card to fit a whole sentence on one line. */
.chip-img-viewer .chip-img-viewer-card { width:min(960px,95vw); max-width:95vw; max-height:90vh; display:flex; flex-direction:column; }
.chip-img-viewer .chip-img-viewer-body {
  display:flex; align-items:center; justify-content:center;
  background: #1a120a; padding:8px; flex:1 1 auto; min-height:0;
  overflow: hidden;
  position: relative; /* anchors the loupe absolutely-positioned overlay */
}
.chip-img-viewer .chip-img-viewer-body img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display:block;
}
.chip-img-tile .thumb { cursor: zoom-in; }
.chip-attach-tile .thumb img { cursor: zoom-in; }

/* Cursor-following loupe overlay drawn on top of the image. */
.chip-img-viewer-body.chip-loupe-on .chip-img-viewer-img { cursor: crosshair; }
.chip-img-loupe {
  position: absolute; pointer-events: none;
  width: 240px; height: 240px; border-radius: 50%;
  border: 2px solid #f5e6cf; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.55);
  background-color: #1a120a; background-repeat: no-repeat;
  z-index: 2;
}
/* The magnifier icon button looks pressed when active. */
.chip-img-viewer .chip-btn.icon.active {
  background: var(--chip-ink); color: var(--chip-paper);
}

/* ─── Form ───────────────────────────────────────────────────────────── */

.chip-form { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.chip-form label { display:flex; flex-direction:column; font-size:12px; color: var(--chip-ink-2); font-family: var(--chip-mono); }
.chip-form input, .chip-form select, .chip-form textarea {
  background: #fff; border:1px solid var(--chip-line); padding:7px 9px; font-family: var(--chip-sans); font-size:13px; color: var(--chip-ink);
  margin-top:3px; border-radius:2px;
}
.chip-form input:focus, .chip-form select:focus, .chip-form textarea:focus { outline:2px solid var(--chip-gold); outline-offset:1px; }
.chip-form textarea { font-family: var(--chip-typewriter); }
/* Feet + inches pair on the person form: two narrow number boxes with their
   unit labels, sharing the single row a normal input would occupy. */
.chip-height-fields { display:flex; align-items:center; gap:5px; }
.chip-height-fields input { width:100%; min-width:0; }
.chip-height-fields .chip-unit { font-size:11px; color: var(--chip-ink-2); font-family: var(--chip-mono); margin-top:3px; }

/* Multi-value contacts (phones / emails / addresses, each with a confidence).
   One group per kind: a header, a stack of value+confidence+remove rows, and
   an add button. The value box flexes; the confidence select is fixed-width so
   the rows line up down the column. */
.chip-contacts { display:flex; flex-direction:column; gap:14px; }
.chip-contact-group { display:flex; flex-direction:column; gap:5px; padding-top:10px; border-top:1px dotted var(--chip-line); }
.chip-contact-group:first-child { padding-top:0; border-top:0; }
.chip-contact-head { display:flex; align-items:baseline; gap:8px; }
.chip-contact-label { font-size:12px; color: var(--chip-ink-2); font-family: var(--chip-mono); }
.chip-contact-hint { font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.chip-contact-rows { display:flex; flex-direction:column; gap:5px; }
.chip-contact-row { display:flex; align-items:flex-start; gap:6px; }
.chip-contact-row input, .chip-contact-row textarea { flex:1 1 auto; min-width:0; margin-top:0; }
.chip-contact-row select { flex:0 0 150px; margin-top:0; }
.chip-contact-row .chip-btn.icon { flex:0 0 auto; }
.chip-contact-add { align-self:flex-start; }
.chip-contact-more { font-size:11px; }

/* Employment history: one block per job — employer + title on the first line,
   period + "current" on the second, notes across the bottom. */
.chip-emp { display:flex; flex-direction:column; gap:5px; padding-top:10px; border-top:1px dotted var(--chip-line); }
.chip-emp-jobs { display:flex; flex-direction:column; gap:8px; }
.chip-emp-job { display:flex; flex-direction:column; gap:5px; padding:8px; border:1px solid var(--chip-line); border-radius:2px; background: rgba(0,0,0,.015); }
.chip-emp-line { display:flex; align-items:center; gap:6px; }
.chip-emp-line input[type="text"] { flex:1 1 0; min-width:0; margin-top:0; }
.chip-emp-job > input[type="text"] { margin-top:0; }
/* Needs `.chip-form label` specificity (0,1,1) to beat the generic rule that
   stacks label text above its control — here the box and its word sit inline. */
.chip-form label.chip-emp-current {
  flex:0 0 auto; display:flex; flex-direction:row; align-items:center; gap:5px;
  font-size:12px; color: var(--chip-ink-2); font-family: var(--chip-mono); white-space:nowrap;
}
.chip-emp-current input { margin-top:0; }

.chip-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.chip-form .chip-row label { margin-bottom:0; }

/* ─── Status colors (tab tints) ──────────────────────────────────────── */

.chip-case-status { font-family: var(--chip-mono); font-size:11px; padding:3px 7px; border:2px solid currentColor; transform: rotate(-2deg); border-radius:2px; }
.chip-status-reported    { color:#888; }
.chip-status-triaged     { color:#5b8def; }
.chip-status-assigned    { color:#9b59b6; }
.chip-status-active      { color:#27ae60; }
.chip-status-pending     { color:#e67e22; }
.chip-status-cold        { color:#3498db; }
.chip-status-cleared     { color:#16a085; }
.chip-status-charged     { color:#c0392b; }
.chip-status-trial       { color:#8e44ad; }
.chip-status-adjudicated { color:#2c3e50; }
.chip-status-closed      { color:#34495e; }
.chip-status-unfounded   { color:#7f8c8d; }

/* ─── Case Detail cover ──────────────────────────────────────────────── */

.chip-case-cover {
  --cover:#c8a96a;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cover) 92%, white), color-mix(in srgb, var(--cover) 78%, black)),
    #c8a96a;
  border:1px solid rgba(0,0,0,.25);
  padding: 28px 24px 18px; margin-bottom:14px;
  position:relative; box-shadow: 0 10px 22px rgba(0,0,0,.2);
  color:#1a1106; min-height:140px;
}
.chip-case-cover .chip-cover-flap {
  position:absolute; top:-14px; left:14px; height:18px; width:160px; background:inherit;
  border:1px solid rgba(0,0,0,.25); border-bottom:none; border-radius: 6px 6px 0 0;
}
.chip-case-cover .chip-cover-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-family: var(--chip-mono); font-size:11px; }
.chip-case-cover .chip-case-no { background: #fffbe9; color:#1a1106; padding:3px 7px; border:1px solid rgba(0,0,0,.2); border-radius:2px; font-weight:700; }
.chip-case-cover .chip-case-type { background: rgba(255,255,255,.4); padding:3px 7px; border:1px solid rgba(0,0,0,.15); border-radius:2px; }
.chip-case-cover .chip-case-title { font-family: var(--chip-serif); margin:10px 0 14px; font-size:30px; line-height:1.1; color:#231609; }
.chip-case-cover .chip-cover-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ─── Tabs ───────────────────────────────────────────────────────────── */

/* Case context bar shown above the Settings page when the user navigated
   from a specific case — preserves the case header + tab strip so they
   can return without losing their place. */
.chip-settings-case-context {
  background: var(--chip-paper-2);
  border: 1px solid var(--chip-line);
  padding: 8px 12px;
  margin: 6px 0 16px;
}
.chip-settings-case-back { display:flex; align-items:center; gap:10px; font-family: var(--chip-mono); font-size: 12px; }
.chip-settings-case-back .chip-case-no { letter-spacing: 1px; }
.chip-settings-case-back .chip-case-title-inline { font-family: var(--chip-serif); font-size: 16px; }
/* Anchor-based static tab strip (used by Settings context bar) — links not
   buttons, so they need their own styling. */
.chip-tabs-static { margin-top: 8px; }
.chip-tabs-static a {
  display:inline-block; padding: 5px 10px; border:1px solid var(--chip-line);
  background: var(--chip-paper); color: var(--chip-ink);
  font-family: var(--chip-mono); font-size: 11px; text-decoration: none;
  margin: 0 2px -2px 0;
}
.chip-tabs-static a:hover { background:#fff8e5; }

.chip-tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:2px solid var(--chip-ink); margin-bottom:14px; }
.chip-tabs button {
  background: var(--chip-paper-2); border:1px solid var(--chip-line); border-bottom:none;
  padding:8px 14px; font-family: var(--chip-mono); font-size:12px; cursor:pointer; color: var(--chip-ink-2);
  letter-spacing: .5px; text-transform:uppercase;
}
.chip-tabs button.active { background: var(--chip-paper); color: var(--chip-ink); border-color: var(--chip-ink); border-bottom: 2px solid var(--chip-paper); margin-bottom:-2px; font-weight:700; }
.chip-tabs button:hover:not(.active) { background:#fff8e5; }

.chip-tab-body { padding: 4px 0; }
.chip-tab-body h2 { margin: 0 0 10px; font-family: var(--chip-serif); font-size:22px; }

/* ─── Overview grid ──────────────────────────────────────────────────── */

.chip-overview-grid {
  display:grid; gap:14px;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 980px) { .chip-overview-grid { grid-template-columns: 1fr; } }
.chip-panel {
  background:#fff; border:1px solid var(--chip-line); padding:14px;
  font-size:13px; line-height:1.5;
}
.chip-panel h3 { margin:0 0 8px; font-family: var(--chip-serif); font-size:14px; }

/* Rich-text content rendered from Quill HTML (synopsis on the Overview tab
   today; reusable for any other rich-text fields we surface later). Tag rules
   give paragraphs proper spacing, indent lists, and shrink any inline headings
   so they don't compete with the panel <h3>. */
.chip-rt-display { font-size:13px; line-height:1.5; }
.chip-rt-display p { margin:0 0 8px; }
.chip-rt-display p:last-child { margin-bottom:0; }
.chip-rt-display ul, .chip-rt-display ol { margin:4px 0 8px 22px; padding:0; }
.chip-rt-display li { margin:0 0 2px; }
.chip-rt-display blockquote { margin:4px 0 8px; padding-left:10px; border-left:3px solid var(--chip-line); color:var(--chip-ink-2); }
.chip-rt-display h1, .chip-rt-display h2, .chip-rt-display h3, .chip-rt-display h4 { font-family: var(--chip-serif); margin:6px 0 4px; }
.chip-rt-display h1 { font-size:15px; }
.chip-rt-display h2 { font-size:14px; }
.chip-rt-display h3, .chip-rt-display h4 { font-size:13px; }
.chip-rt-display pre, .chip-rt-display code { font-family: var(--chip-mono); font-size:12px; }
.chip-rt-display pre { background:#f6efe2; padding:8px 10px; border:1px solid var(--chip-line); margin:4px 0 8px; white-space:pre-wrap; }
.chip-panel p  { margin:0 0 8px; font-size:13px; }
.chip-kv { display:grid; grid-template-columns: 130px 1fr; gap:6px 10px; font-size:13px; }
.chip-kv dt { color:var(--chip-ink-2); font-family: var(--chip-mono); font-size:11px; text-transform:uppercase; }
.chip-kv dd { margin:0; }

/* ─── Status timeline ────────────────────────────────────────────────── */

.chip-status-timeline { list-style:none; margin:0; padding:0; border-left: 2px solid var(--chip-ink); padding-left: 14px; }
.chip-status-timeline li { margin-bottom:12px; position:relative; font-size:13px; }
.chip-status-timeline li::before {
  content:""; position:absolute; left:-21px; top:6px; width:10px; height:10px; border-radius:50%; background: var(--chip-stamp); border:2px solid var(--chip-paper);
}
.chip-status-timeline .when { font-family: var(--chip-mono); font-size:10px; color: var(--chip-ink-2); }
.chip-status-timeline .change strong { font-family: var(--chip-mono); font-size:11px; }

/* ─── Timeline visualization ─────────────────────────────────────────── */

.chip-tl {
  position:relative; padding: 10px 0 30px 0;
}
.chip-tl::before {
  content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; background: var(--chip-ink);
}
.chip-tl-item {
  width:46%; padding:12px; background:#fff; border:1px solid var(--chip-line); margin-bottom:14px; box-shadow: var(--chip-shadow-soft);
  position:relative;
}
.chip-tl-item.left  { margin-right:auto; }
.chip-tl-item.right { margin-left:auto; }
.chip-tl-item .when { font-family: var(--chip-mono); font-size:10px; color: var(--chip-ink-2); text-transform:uppercase; }
.chip-tl-item h4 { margin:4px 0 6px; font-family: var(--chip-serif); font-size:14px; }
.chip-tl-item p, .chip-tl-item .chip-tl-desc { margin:0; font-size:12px; line-height: 1.45; color: var(--chip-ink); }
.chip-tl-item .chip-tl-desc p,
.chip-tl-item .chip-tl-desc li,
.chip-tl-item .chip-tl-desc div { font-size: 12px; line-height: 1.45; margin: 0 0 4px; }
.chip-tl-item .chip-tl-desc h1,
.chip-tl-item .chip-tl-desc h2,
.chip-tl-item .chip-tl-desc h3,
.chip-tl-item .chip-tl-desc h4 { font-size: 13px; margin: 4px 0 2px; font-family: var(--chip-serif); }
.chip-tl-item .chip-tl-desc ul,
.chip-tl-item .chip-tl-desc ol { margin: 2px 0 4px 18px; padding: 0; }
.chip-tl-item::after {
  content:""; position:absolute; top:14px; width:14px; height:14px; border-radius:50%; background: var(--chip-stamp); border: 3px solid var(--chip-paper);
}
.chip-tl-item.left::after  { right:-26px; }
.chip-tl-item.right::after { left:-26px; }

/* Drag handle — the only grabbable part of a card, so description text stays
   selectable. Sits in the top corner away from the spine. */
.chip-tl-drag {
  position: absolute; top: 8px; right: 6px; z-index: 2;
  padding: 0 3px;
  font-size: 14px; line-height: 1; color: var(--chip-ink-2);
  cursor: grab; user-select: none;
}
/* Keep the date/type line clear of the handle. */
.chip-tl-item .when { padding-right: 18px; }
.chip-tl-drag:hover  { color: var(--chip-ink); }
.chip-tl-drag:active { cursor: grabbing; }
.chip-tl-item.dragging { opacity: .55; cursor: grabbing; }
/* Mid-drag every card is a drop target — stop their contents from swallowing
   dragover so the insertion point always resolves to a card. */
.chip-tl.is-dragging .chip-tl-item * { pointer-events: none; }
/* An event whose slot was set by hand rather than by its date. Inset shadow
   rather than a fatter border for the same reason as sub-events below: these
   cards aren't border-box, so a wider border would change their geometry. */
.chip-tl-item.is-arranged.left  { box-shadow: inset 3px 0 0 0 var(--chip-gold), var(--chip-shadow-soft); }
.chip-tl-item.is-arranged.right { box-shadow: inset -3px 0 0 0 var(--chip-gold), var(--chip-shadow-soft); }
/* The card about to become the parent. Deliberately understated — the
   placeholder carries the message; this only anchors which card the
   placeholder's "sub-event of X" refers to. */
.chip-tl-item.chip-tl-drop-child {
  background: color-mix(in srgb, var(--chip-gold) 12%, #fff);
  border-color: var(--chip-gold);
}

/* ── Drop placeholders ───────────────────────────────────────────────────
   Two shapes for two outcomes, sitting in the flow where the card will land
   so content opens up and it reads as snapping into a slot. Never a drop
   target itself — pointer-events off, and it carries no .chip-tl-item class
   so the nearest-card search ignores it. */
.chip-tl-ghost {
  position: relative;
  margin-bottom: 14px;
  pointer-events: none;
  /* content-box to match .chip-tl-item, which is not border-box. Sharing the
     width formula only means something if both interpret it the same way. */
  box-sizing: content-box;
}
.chip-tl-ghost.left  { margin-right: auto; }
.chip-tl-ghost.right { margin-left: auto; }
/* Reorder: a slim solid bar at the target's own indent level. Reads as
   "slot in here", with no suggestion of containment. */
.chip-tl-ghost-move {
  width: calc(46% - var(--tl-depth, 0) * 26px);
  height: 6px;
  background: var(--chip-gold);
}
.chip-tl-ghost-move.left  { margin-left:  calc(var(--tl-depth, 0) * 26px); }
.chip-tl-ghost-move.right { margin-right: calc(var(--tl-depth, 0) * 26px); }
/* Nest: a faded dashed card-shaped box indented one level deeper than the
   parent, so the indent itself is the message. */
.chip-tl-ghost-child {
  width: calc(46% - var(--tl-depth, 0) * 26px);
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 12px;
  border: 2px dashed var(--chip-gold);
  background: color-mix(in srgb, var(--chip-gold) 14%, transparent);
  font-family: var(--chip-mono);
  font-size: 11px;
  color: #7a5a22;
}
.chip-tl-ghost-child.left  { margin-left:  calc(var(--tl-depth, 0) * 26px); }
.chip-tl-ghost-child.right { margin-right: calc(var(--tl-depth, 0) * 26px); justify-content: flex-end; text-align: right; }
/* Dot on the spine matching a real sub-event's, so the slot looks like the
   card that is about to occupy it. */
.chip-tl-ghost-child::after {
  content: ""; position: absolute; top: 17px;
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 2px dashed var(--chip-gold);
}
.chip-tl-ghost-child.left::after  { right: -23px; }
.chip-tl-ghost-child.right::after { left:  -23px; }

/* ── Sub-events ──────────────────────────────────────────────────────────
   A sub-event sits on the SAME side of the spine as its parent and indents
   away from it. Width shrinks by exactly the indent so the spine-side edge —
   where the dot sits — stays aligned at every depth, keeping the dots in a
   straight line down the spine however deep the nesting goes. */
.chip-tl-item.chip-tl-child { width: calc(46% - var(--tl-depth, 0) * 26px); }
/* The indent accent is an INSET shadow, not a thicker border: a wider border
   would add its own width to the box (these cards aren't border-box) and
   throw the indent off against the parent. An inset shadow paints inside the
   existing geometry. */
.chip-tl-item.left.chip-tl-child {
  margin-left: calc(var(--tl-depth, 0) * 26px);
  box-shadow: inset 3px 0 0 0 var(--chip-gold), var(--chip-shadow-soft);
}
.chip-tl-item.right.chip-tl-child {
  margin-right: calc(var(--tl-depth, 0) * 26px);
  box-shadow: inset -3px 0 0 0 var(--chip-gold), var(--chip-shadow-soft);
}
.chip-tl-item.chip-tl-child h4   { font-size: 13px; }
.chip-tl-item.chip-tl-child .when { font-size: 9px; }
/* Smaller spine dot so parents stay the visual anchor of a group. */
.chip-tl-item.chip-tl-child::after {
  width: 9px; height: 9px; top: 15px; border-width: 2px;
  background: var(--chip-gold);
}
.chip-tl-item.left.chip-tl-child::after  { right: -23px; }
.chip-tl-item.right.chip-tl-child::after { left:  -23px; }

/* Year banner spans the spine and visually anchors each period. */
.chip-tl-year {
  position: relative; z-index: 1;
  width: fit-content;
  margin: 22px auto 14px;
  padding: 4px 14px;
  background: var(--chip-ink); color: var(--chip-paper);
  font-family: var(--chip-serif); font-size: 16px; letter-spacing: 2px;
  border: 2px solid var(--chip-ink);
  box-shadow: var(--chip-shadow-soft);
}
/* Undated tail: same banner shape as a year, inverted so it reads as
   "outside the chronology" rather than as another date. */
.chip-tl-year.chip-tl-undated {
  background: var(--chip-paper); color: var(--chip-ink);
  border-style: dashed;
}
/* Month label is centered on the spine, smaller than the year banner so it
   visually reads as a subdivision. */
.chip-tl-month {
  position: relative; z-index: 1;
  width: fit-content;
  margin: 10px auto 8px;
  padding: 2px 10px;
  font-family: var(--chip-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--chip-paper);
  background: var(--chip-ink-2);
  border: 1px solid var(--chip-ink-2);
}
/* Day label — smaller than Month, plain background, hangs on the spine. */
.chip-tl-day {
  position: relative; z-index: 1;
  width: fit-content;
  margin: 8px auto 4px;
  padding: 1px 8px;
  font-family: var(--chip-serif); font-size: 12px; font-style: italic;
  color: var(--chip-ink);
  background: var(--chip-paper);
  border: 1px solid var(--chip-line);
}
/* Time label — smallest divider, mono so HH:MM stays aligned. Used to
   subdivide a day when many events happen at different times. */
.chip-tl-time {
  position: relative; z-index: 1;
  width: fit-content;
  margin: 4px auto 2px;
  padding: 0 6px;
  font-family: var(--chip-mono); font-size: 10px; letter-spacing: 1px;
  color: var(--chip-ink-2);
  background: var(--chip-paper);
}

/* Floating "+" that appears when hovering the timeline spine, lets the user
   add a new event anchored to that vertical position. Positioned via inline
   `top` (set in JS); the transform centers it both axes on that anchor. */
.chip-tl-add-btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--chip-ink);
  background: var(--chip-stamp);
  color: var(--chip-paper);
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--chip-shadow-soft);
  font-family: var(--chip-serif);
}
.chip-tl-add-btn:hover { filter: brightness(1.15); transform: translate(-50%, -50%) scale(1.1); }
.chip-tl-add-btn:focus-visible { outline: 2px solid var(--chip-gold); outline-offset: 2px; }

@media (max-width: 720px) {
  .chip-tl::before { left:14px; }
  .chip-tl-add-btn { left: 14px; }
  .chip-tl-item { width:auto; margin-left:34px !important; margin-right:0 !important; }
  .chip-tl-item::after { left:-26px !important; right:auto !important; }
  .chip-tl-year, .chip-tl-month, .chip-tl-day, .chip-tl-time { margin-left: 0; margin-right: 0; }
}

/* ─── Custody log ────────────────────────────────────────────────────── */

.chip-custody { width:100%; border-collapse:collapse; font-size:12px; }
.chip-custody th { background: var(--chip-paper-2); text-align:left; padding:6px 8px; border:1px solid var(--chip-line); font-family: var(--chip-mono); font-size:11px; text-transform:uppercase; }
.chip-custody td { padding:6px 8px; border:1px solid var(--chip-line); background:#fff; }

/* ─── Graph ──────────────────────────────────────────────────────────── */

.chip-graph-host { display:grid; grid-template-columns: 1fr 280px; gap:12px; height: calc(100vh - 220px); }
@media (max-width: 980px) { .chip-graph-host { grid-template-columns: 1fr; height: auto; } }
#chip-graph-canvas { background: var(--chip-paper); border:1px solid var(--chip-ink); min-height: 500px; }
.chip-graph-side { display:flex; flex-direction:column; gap:10px; max-height: calc(100vh - 220px); overflow:auto; }
.chip-side-card { background:#fff; border:1px solid var(--chip-line); padding:12px; }
.chip-side-card h3 { margin:0 0 6px; font-size:14px; font-family: var(--chip-serif); }
.chip-legend { list-style:none; padding:0; margin:0; font-size:12px; }
.chip-legend li { display:flex; align-items:center; gap:8px; padding:3px 0; }
.chip-legend .dot { width:14px; height:14px; display:inline-block; background:#888; }
.chip-legend .dot.box   { background:#888; border-radius:2px; }
.chip-legend .dot.circle{ background:#5b8def; border-radius:50%; }
.chip-legend .dot.tri   { width:0; height:0; background:transparent; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:12px solid #16a085; }
.chip-legend .dot.sq    { background:#e67e22; border-radius:1px; }
.chip-legend .dot.dia   { background:#9b59b6; transform: rotate(45deg); }
.chip-legend .dot.star  { background: var(--chip-stamp); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.chip-legend .dot.dotn  { background:#7f8c8d; border-radius:50%; }

/* ─── Map ────────────────────────────────────────────────────────────── */

#chip-map-host { height: calc(100vh - 220px); border:1px solid var(--chip-ink); }
.leaflet-container { background:#e6decb; }

/* Custom pin marker — colored circular badge with an emoji glyph and a small
   tail underneath so it points to the exact lat/lng. */
.chip-pin { background: transparent; border: 0; }
.chip-pin-bubble {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  background: #c0392b; color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
  position: relative;
}
.chip-pin-bubble::after {
  content:''; position:absolute; left:50%; bottom:-7px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid #fff;
}

/* Pin preview chip used in Settings vocab editor + Edit Location modal. */
.chip-pin-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #888; color: #fff;
  font-size: 16px; line-height: 1;
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: var(--chip-shadow-soft);
  vertical-align: middle;
}
.chip-pin-preview-lg { width: 40px; height: 40px; font-size: 22px; }
.chip-pin-preview-label { display: flex; flex-direction: column; align-items: flex-start; }
.leaflet-popup-content { font-family: var(--chip-sans); font-size: 12px; }
.leaflet-popup-content strong { font-family: var(--chip-serif); font-size: 14px; }
.leaflet-control-layers { font-family: var(--chip-mono); font-size: 12px; }
.leaflet-control-layers label { padding: 2px 0; }
.leaflet-control-layers-toggle { background-color: var(--chip-paper); }

/* Find & Merge — duplicate group cards. Each group renders as a header row
   with the match reason, followed by a horizontal row of cards (one per
   candidate). Picking the "Keep" radio on a card marks it as the canonical
   row; the other cards in the group get merged into it. */
.chip-merge-body { display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow: auto; }
.chip-merge-group {
  border: 1px solid var(--chip-line); background: var(--chip-paper);
  padding: 10px 12px;
}
.chip-merge-group-head {
  display: flex; align-items: center; gap: 4px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--chip-line);
  font-family: var(--chip-mono); font-size: 11px; color: var(--chip-ink-2);
}
.chip-merge-match { color: var(--chip-stamp); text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.chip-merge-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.chip-merge-card {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--chip-line); padding: 8px 10px;
  cursor: pointer;
  font-size: 12px; line-height: 1.4;
}
.chip-merge-card:has(input[type="radio"]:checked) {
  border-color: var(--chip-stamp); box-shadow: 0 0 0 2px rgba(165,16,16,.15);
}
.chip-merge-card-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--chip-mono); font-size: 11px;
}
.chip-merge-card-body { display: flex; flex-direction: column; gap: 2px; }
.chip-merge-field { font-size: 12px; line-height: 1.4; }
.chip-merge-label { color: var(--chip-ink-2); font-family: var(--chip-mono); font-size: 11px; }
.chip-merge-value { color: var(--chip-ink); word-break: break-word; }
.chip-merge-actions { margin-top: 10px; display: flex; gap: 8px; }

/* "Include on timelines / maps" membership picker — rendered in the event
   and location modals so a row can be added to / removed from any of the
   user's named overlays in one go.
   The `label.…-row` selector (specificity 0,1,1) is needed because the
   generic `.chip-form label` rule (also 0,1,1) sets flex-direction:column,
   which would otherwise stack the checkbox above its label text. */
.chip-overlay-membership {
  background: var(--chip-paper-2);
  border: 1px solid var(--chip-line);
  padding: 4px 8px;
  display: flex; flex-direction: column; gap: 0;
  max-height: 140px; overflow: auto;
}
.chip-form label.chip-overlay-membership-row,
label.chip-overlay-membership-row {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  font-family: var(--chip-mono); font-size: 12px; color: var(--chip-ink);
  margin: 0; padding: 1px 0; line-height: 1.4;
  cursor: pointer;
}
.chip-overlay-membership-row input[type="checkbox"] { margin: 0; }
.chip-overlay-membership-row .chip-subtle { font-size: 11px; }

/* Overlay manager toolbar — used by multi-timeline and multi-graph tabs.
   Mirrors the map toolbar's look so the named-view pattern feels uniform. */
.chip-overlay-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--chip-paper-2);
  border: 1px solid var(--chip-line);
  font-family: var(--chip-mono); font-size: 12px;
}
.chip-overlay-toolbar .chip-overlay-select {
  background: #fff; border: 1px solid var(--chip-line); padding: 4px 6px;
  font-family: var(--chip-mono); font-size: 12px; color: var(--chip-ink);
}

/* Map manager toolbar — appears above each Leaflet map. Lets the user pick
   the active named map, plus create / rename / duplicate / delete actions. */
.chip-map-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--chip-paper-2);
  border: 1px solid var(--chip-line);
  font-family: var(--chip-mono); font-size: 12px;
}
.chip-map-toolbar .chip-map-select {
  background: #fff; border: 1px solid var(--chip-line); padding: 4px 6px;
  font-family: var(--chip-mono); font-size: 12px; color: var(--chip-ink);
}

/* Map tools (📏 measure, 📍 drop pin) — square Leaflet control buttons. */
.chip-map-tools.leaflet-bar a {
  background: #fff; color: var(--chip-ink);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; text-decoration: none;
}
.chip-map-tools.leaflet-bar a:hover { background: var(--chip-paper-2); }
.chip-map-tools.leaflet-bar a.active {
  background: var(--chip-stamp); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}

/* When a tool is active, change the map's cursor so the user sees they're
   in tool mode (and pan/zoom still work). */
.chip-map-measuring .leaflet-grab,
.chip-map-measuring .leaflet-interactive { cursor: crosshair !important; }
.chip-map-dropping  .leaflet-grab,
.chip-map-dropping  .leaflet-interactive { cursor: copy !important; }
.chip-map-drawing-line .leaflet-grab,
.chip-map-drawing-line .leaflet-interactive { cursor: crosshair !important; }
/* Drag handles for selected movement lines — pop on hover so they're easy
   to grab; the regular Leaflet pan cursor switches to a move icon. */
.leaflet-interactive.chip-line-handle { cursor: grab; }
.leaflet-interactive.chip-line-handle:hover { stroke-width: 3 !important; }
/* Ctrl/Cmd held → markers become draggable; show the move cursor over them. */
.chip-map-pin-drag .chip-pin { cursor: move !important; }
.chip-map-pin-drag .chip-pin-bubble { box-shadow: 0 0 0 3px var(--chip-stamp), 0 2px 4px rgba(0,0,0,.4); }

/* Distance label hovering off the latest measure point. */
.leaflet-tooltip.chip-measure-label {
  background: var(--chip-ink); color: var(--chip-paper);
  border: 1px solid var(--chip-ink); padding: 3px 8px;
  font-family: var(--chip-mono); font-size: 11px; letter-spacing: .5px;
  box-shadow: var(--chip-shadow);
}
.leaflet-tooltip.chip-measure-label::before { display: none; }

/* Field-help chips and the popover they open. Placed inline immediately
   after the label text — see attachHelpChips() — and reveal the help on
   hover or keyboard focus.
   The wrapper span keeps text + chip on the same row inside the flex-column
   label, instead of pushing the chip onto its own row beneath the text. */
.chip-help-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip-help-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin: 0 0 0 6px; padding: 0;
  vertical-align: middle;
  border: 1px solid var(--chip-line); border-radius: 50%;
  background: var(--chip-paper-2); color: var(--chip-ink-2);
  font-family: var(--chip-mono); font-size: 10px; font-weight: 700;
  line-height: 1; cursor: help;
  user-select: none;
}
.chip-help-chip:hover,
.chip-help-chip:focus { background: var(--chip-stamp); color: #fff; border-color: var(--chip-stamp); outline: none; }
.chip-help-pop {
  position: fixed; z-index: 100000;
  max-width: 320px; padding: 10px 12px;
  background: var(--chip-ink); color: var(--chip-paper);
  border: 1px solid var(--chip-ink); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  font-size: 12px; line-height: 1.5;
}

/* Import row flagged when its case selector is "— no case —". */
tr.chip-iox-nocase td:last-child { background: #fff3cd; }
tr.chip-iox-nocase select[name="link_case_id"] {
  border:1px solid #c9931e; outline:none;
}

/* ─── Fullscreen-app mode ───────────────────────────────────────────────
   Two toggle buttons share state:
     - .chip-fs-app-floating : fixed top-right of viewport, always visible
       (the "topmost" toggle, on every admin + frontend page including case
       detail).
     - .chip-fs-app-inline   : injected into .chip-fe-user on the frontend
       so it sits next to the ⚙ Settings button.

   Active state turns the app's outer wrapper (.chip-wrap in admin,
   .chip-fe-shell on frontend) into a fixed full-viewport overlay so the
   surrounding WP / theme chrome can't bleed through. JS is in admin.js. */
.chip-fs-app-btn {
  background: rgba(255, 251, 233, .96);
  border: 1px solid var(--chip-line);
  border-radius: 4px; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--chip-ink);
  padding: 4px 10px;
}
.chip-fs-app-btn:hover { background: var(--chip-paper); }
.chip-fs-app-btn[aria-pressed="true"] { background: var(--chip-paper); border-color: var(--chip-ink); }

/* Floating copy — pinned to the top-right of the viewport. Sits below the WP
   admin bar in normal mode; slides up when fullscreen hides the bar. */
.chip-fs-app-floating {
  position: fixed;
  top: 40px; right: 12px;
  z-index: 100001;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
body.chip-fullscreen-app .chip-fs-app-floating { top: 12px; }

/* Inline copy in the frontend top menu — render as a button-shaped icon
   alongside Settings/Plans/Logout. */
.chip-fs-app-inline { margin-right: 6px; }

/* Hide WP admin chrome when fullscreen is on. */
body.chip-fullscreen-app #wpadminbar,
body.chip-fullscreen-app #adminmenumain,
body.chip-fullscreen-app #adminmenuback,
body.chip-fullscreen-app #wpfooter { display: none !important; }
body.chip-fullscreen-app.wp-toolbar { padding-top: 0 !important; }
html.wp-toolbar:has(body.chip-fullscreen-app) { padding-top: 0 !important; }
body.chip-fullscreen-app #wpcontent { margin-left: 0 !important; padding-left: 0 !important; }
body.chip-fullscreen-app #wpbody,
body.chip-fullscreen-app #wpbody-content { padding: 0 !important; margin: 0 !important; }

/* Overlay approach — the app wrapper becomes a full-viewport fixed layer so
   theme headers/footers and any other surrounding chrome are visually
   covered, even if we can't reach them with selectors. */
body.chip-fullscreen-app .wrap.chip-wrap,
body.chip-fullscreen-app .chip-fe-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000;
  margin: 0 !important;
  max-width: none !important;
  background: var(--chip-paper, #fffbe9);
  overflow: auto;
  padding: 20px 28px !important;
}

/* Fullscreen map — fill the viewport and let the toolbar sit on top. */
.leaflet-container:fullscreen,
.leaflet-container:-webkit-full-screen { width: 100vw !important; height: 100vh !important; background: var(--chip-paper); }
:fullscreen #chip-map-host,
:-webkit-full-screen #chip-map-host { width: 100vw; height: 100vh; }

/* Hover tooltip on each location marker — small, just the name. */
.leaflet-tooltip.chip-mark-tooltip {
  background: rgba(255,251,233,.96); color: var(--chip-ink);
  border: 1px solid var(--chip-ink); padding: 3px 8px;
  font-family: var(--chip-serif); font-size: 12px;
  box-shadow: var(--chip-shadow-soft);
}
.leaflet-tooltip.chip-mark-tooltip::before {
  border-top-color: var(--chip-ink);
}

/* ─── Documents ──────────────────────────────────────────────────────── */

.chip-doc-upload-card { background:#fff; border:1px solid var(--chip-line); padding:14px; margin-bottom:12px; display:grid; grid-template-columns: 1fr 2fr; gap:14px; align-items:center; }
.chip-doc-upload-card > div:first-child { display:flex; gap:10px; flex-wrap:wrap; }
.chip-doc-upload-card label { display:flex; flex-direction:column; font-size:11px; color:var(--chip-ink-2); font-family:var(--chip-mono); }
.chip-doc-upload-card select, .chip-doc-upload-card input { background:#fff; border:1px solid var(--chip-line); padding:6px 9px; }
.chip-dropzone {
  display:flex; align-items:center; justify-content:center; min-height: 90px;
  border: 2px dashed var(--chip-line); background: var(--chip-paper-2); cursor:pointer; color: var(--chip-ink-2); font-family: var(--chip-mono); font-size:13px; text-align:center;
}
.chip-dropzone.dragover { background: #fff8e5; border-color: var(--chip-stamp); color: var(--chip-stamp); }
.chip-dropzone input { display:none; }
.chip-progress { font-family: var(--chip-mono); font-size:12px; padding:6px 10px; background: var(--chip-paper-2); border:1px solid var(--chip-line); margin-top:8px; }

.chip-doc-row { background:#fff; border:1px solid var(--chip-line); padding:12px; margin-bottom:8px; }
.chip-doc-row .doc-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.chip-doc-row .doc-head > .chip-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; padding-top:0; margin-top:0; }
/* Let the title/meta column shrink so long unbroken filenames wrap instead of
   forcing the row wider and shoving the action buttons offscreen. */
.chip-doc-row .doc-head > .doc-head-main { flex:1 1 auto; min-width:0; }
.chip-doc-row h3 { margin:0; font-family: var(--chip-serif); font-size:15px; overflow-wrap:anywhere; word-break:break-word; }
.chip-doc-row .doc-title { cursor:pointer; }
.chip-doc-row .doc-title:hover { text-decoration:underline; }
.chip-doc-row .doc-meta { font-family: var(--chip-mono); font-size:11px; color:var(--chip-ink-2); overflow-wrap:anywhere; word-break:break-word; }
.chip-doc-row .doc-snippet { font-family: var(--chip-typewriter); font-size:13px; line-height:1.5; margin-top:8px; max-height:5.4em; overflow:hidden; }
.chip-doc-row .doc-actions { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.chip-doc-row .chip-doc-desc-preview { font-family: var(--chip-typewriter); font-size:13px; line-height:1.5; color: var(--chip-ink); margin-top:8px; max-height:6em; overflow:hidden; }
.chip-doc-row .chip-doc-desc-preview p { margin:0 0 4px; }

/* Shared edit panel (Title + rich Description) used by the image & document
   viewers. */
.chip-doc-edit-panel { padding:10px 14px; background:#fff; border-top:1px solid var(--chip-line); max-height:42vh; overflow-y:auto; overflow-x:hidden; }
.chip-doc-edit-panel .chip-doc-rt .chip-quill-editor,
.chip-doc-edit-panel .chip-doc-rt textarea { min-height:120px; }
/* Keep the editor and its content from driving the modal wider — wrap instead. */
.chip-doc-edit-panel .chip-doc-rt,
.chip-doc-edit-panel .chip-quill-editor,
.chip-doc-edit-panel .ql-container,
.chip-doc-edit-panel .ql-editor { max-width:100%; min-width:0; box-sizing:border-box; }
.chip-doc-edit-panel .ql-editor { overflow-wrap:anywhere; word-break:break-word; }
.chip-doc-edit-panel .chip-doc-rt textarea { width:100%; }

/* Document viewer modal — internal reader + edit panel. */
.chip-doc-viewer { align-items:center; padding:32px 20px; }
.chip-doc-viewer .chip-doc-viewer-card { width:1000px; max-width:95vw; height:88vh; max-height:92vh; display:flex; flex-direction:column; }
.chip-doc-viewer .chip-doc-viewer-body { flex:1 1 auto; min-height:0; display:flex; background: var(--chip-paper-2); overflow:auto; }
.chip-doc-viewer .chip-doc-reader-frame { flex:1; width:100%; height:100%; border:0; background:#fff; }
.chip-doc-viewer .chip-doc-reader-img { max-width:100%; max-height:100%; object-fit:contain; margin:auto; }
.chip-doc-viewer .chip-doc-reader-empty { margin:auto; text-align:center; color: var(--chip-ink-2); padding:40px; display:flex; flex-direction:column; align-items:center; }

/* ─── Search results ─────────────────────────────────────────────────── */

#chip-search-results .search-row {
  background:#fff; border:1px solid var(--chip-line); padding:10px 12px; margin-bottom:6px;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
#chip-search-results .search-row .label { font-family: var(--chip-serif); font-size:14px; }
#chip-search-results .search-row .meta { font-family: var(--chip-mono); font-size:11px; color:var(--chip-ink-2); }
.chip-pill {
  display:inline-block; padding:1px 6px; font-family: var(--chip-mono); font-size:10px; border:1px solid var(--chip-line); border-radius:2px; background:var(--chip-paper-2); color:var(--chip-ink-2); text-transform:uppercase; margin-right:6px;
}
.chip-pill.case  { background:#fff3d4; }
.chip-pill.person{ background:#dde7ff; }
.chip-pill.location { background:#dff5e9; }
.chip-pill.vehicle  { background:#fde6cc; }
.chip-pill.organization { background:#eddff5; }
.chip-pill.evidence { background:#fbd9d9; }
.chip-pill.document { background:#e7e4dc; }
.chip-pill.tip      { background:#fff5b8; }

/* ─── Dashboard ──────────────────────────────────────────────────────── */

.chip-stat-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); margin-bottom:14px; }
.chip-stat {
  background:#fff; border:1px solid var(--chip-line); padding:14px;
  display:flex; flex-direction:column; gap:4px;
}
.chip-stat .v { font-family: var(--chip-serif); font-size: 28px; line-height:1; color: var(--chip-ink); }
.chip-stat .l { font-family: var(--chip-mono); font-size:10px; color: var(--chip-ink-2); text-transform:uppercase; letter-spacing:1px; }
.chip-stat.warn .v { color: var(--chip-warn); }
.chip-stat.danger .v { color: var(--chip-accent); }

.chip-dash-grid { display:grid; gap:14px; grid-template-columns: 2fr 1fr; }
@media (max-width: 980px) { .chip-dash-grid { grid-template-columns: 1fr; } }
.chip-chart-card { background:#fff; border:1px solid var(--chip-line); padding:14px; }
.chip-chart-card canvas { max-height: 260px; }
.chip-feed { background:#fff; border:1px solid var(--chip-line); padding:14px; max-height:320px; overflow:auto; }
.chip-feed .row { padding:8px 0; border-bottom:1px dashed var(--chip-line); font-size:13px; }
.chip-feed .row:last-child { border-bottom:none; }
.chip-feed .when { font-family: var(--chip-mono); font-size:10px; color:var(--chip-ink-2); }

/* ─── Print ──────────────────────────────────────────────────────────── */

@media print {
  body, .wp-admin { background:#fff !important; }
  #adminmenumain, #adminmenuback, #wpadminbar, #wpfooter, .chip-tabs, .chip-cover-actions, .chip-header-actions { display:none !important; }
  .chip-wrap { box-shadow:none; border:none; padding:0; margin:0; }
  .chip-case-cover { box-shadow:none; }
}

/* ─── Misc ───────────────────────────────────────────────────────────── */

.chip-sentiment-positive { color: var(--chip-good); }
.chip-sentiment-negative,
.chip-sentiment-very_negative { color: var(--chip-accent); }
.chip-sentiment-neutral  { color: var(--chip-ink-2); }

.chip-ai-callout {
  background: #fff8e0; border-left: 4px solid var(--chip-stamp); padding:8px 12px; margin:6px 0; font-size:13px;
}
.chip-ai-summary {
  background:#fff; border:1px solid var(--chip-line); padding:14px; font-family: var(--chip-typewriter); font-size:14px; line-height:1.6;
}

/* AI suggested links */
.chip-sug-row {
  background:#fff; border:1px solid var(--chip-line); padding:8px 10px; margin: 6px 0;
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}
.chip-sug-body { flex:1; min-width:0; }
.chip-sug-pair { font-size:13px; font-family: var(--chip-serif); }
.chip-sug-arrow { color: var(--chip-stamp); margin: 0 2px; }
.chip-sug-reason { font-family: var(--chip-mono); font-size:11px; color: var(--chip-ink-2); margin-top:3px; }
.chip-sug-conf {
  display:inline-block; padding:1px 6px; border:1px solid currentColor;
  border-radius:2px; font-size:10px; text-transform:uppercase; letter-spacing:1px;
}
.chip-sug-conf-high   { color: var(--chip-good); }
.chip-sug-conf-medium { color: var(--chip-warn); }
.chip-sug-conf-low    { color: var(--chip-ink-2); }
.chip-sug-actions { display:flex; gap:6px; flex-shrink:0; }
.chip-sug-actions .chip-btn { padding: 4px 8px; font-size:10px; }

.chip-bar { height:6px; background: var(--chip-paper-2); border-radius:3px; overflow:hidden; }
.chip-bar > div { height:100%; background: var(--chip-stamp); }

.chip-toast {
  position:fixed; bottom:20px; right:20px; background: var(--chip-ink); color: var(--chip-paper);
  padding: 10px 14px; border-radius:3px; font-family: var(--chip-mono); font-size:12px; box-shadow: var(--chip-shadow); z-index:99999;
}
.chip-toast.error { background: var(--chip-accent); }
.chip-toast.success { background: #2e7d32; }

/* ─── Help button + help modal ─────────────────────────────────────────── */

.chip-help-btn {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  font-weight: 700; font-family: var(--chip-serif); font-size: 14px;
  background: var(--chip-paper-2); color: var(--chip-ink); border: 1px solid var(--chip-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.chip-help-btn:hover { background: var(--chip-stamp); color: #fff; border-color: var(--chip-stamp); }
.chip-help-body { padding: 16px 18px; }
.chip-help-body h3 { font-family: var(--chip-serif); font-size: 15px; margin: 14px 0 4px; }
.chip-help-body p, .chip-help-body li { font-size: 13px; line-height: 1.5; }
.chip-help-body ul, .chip-help-body ol { margin: 4px 0 8px 18px; padding: 0; }

/* ─── Add Link modal — step blocks + result list ───────────────────────── */

.chip-link-steps {
  background: #fff8e0; border-left: 4px solid var(--chip-stamp);
  padding: 8px 12px 8px 28px; margin: 0 0 12px;
  font-size: 13px; line-height: 1.55;
}
.chip-link-step {
  border: 1px solid var(--chip-line); padding: 10px 12px 12px;
  margin-bottom: 10px; background: rgba(255,255,255,.5);
}
.chip-link-step legend {
  font-family: var(--chip-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 1px; padding: 2px 8px; background: var(--chip-paper-2);
  border: 1px solid var(--chip-line);
}
.chip-link-results {
  margin-top: 6px; max-height: 160px; overflow: auto;
  background: #fff; border: 1px solid var(--chip-line);
}
.chip-link-result {
  padding: 6px 9px; cursor: pointer; border-bottom: 1px solid var(--chip-line);
  font-size: 13px;
}
.chip-link-result:hover { background: var(--chip-paper-2); }
.chip-link-result:last-child { border-bottom: none; }
.chip-link-sel {
  display: inline-block; padding: 5px 9px;
  background: #fff; border: 1px solid var(--chip-line);
  font-family: var(--chip-mono); font-size: 12px; color: var(--chip-ink-2);
  min-height: 1.3em;
}
.chip-link-sel.selected { color: var(--chip-good); border-color: var(--chip-good); font-weight: 700; }

/* ─── Image tiles + attachment picker ──────────────────────────────────── */

.chip-img-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.chip-img-tile { background: #fff; border:1px solid var(--chip-line); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.chip-img-tile .thumb { width:100%; aspect-ratio: 4/3; background: var(--chip-paper-2); border:1px dashed var(--chip-line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.chip-img-tile .thumb img { width:100%; height:100%; object-fit: cover; }
.chip-img-tile .thumb .icon { font-size: 28px; color: var(--chip-ink-2); }
.chip-img-tile .name { font-family: var(--chip-mono); font-size: 11px; word-break: break-all; }
.chip-img-tile .meta { font-family: var(--chip-mono); font-size: 10px; color: var(--chip-ink-2); }

.chip-pick-row {
  display:flex; align-items:center; gap:10px;
  padding:8px; border-bottom: 1px solid var(--chip-line); cursor: pointer;
}
.chip-pick-row:hover { background: var(--chip-paper-2); }
.chip-pick-row:last-child { border-bottom: none; }
.chip-pick-row.attached { background: #eef7ee; cursor: default; opacity: .8; }
.chip-pick-row.attached:hover { background: #eef7ee; }
.chip-pick-row.attached .chip-pick-thumb { box-shadow: inset 0 0 0 2px var(--chip-good); }
.chip-pick-del {
  background: transparent; border: 1px solid transparent; color: var(--chip-ink-2);
  padding: 4px 8px; cursor: pointer; font-size: 16px; line-height: 1; border-radius: 3px;
}
.chip-pick-del:hover { color: #fff; background: var(--chip-accent); border-color: var(--chip-accent); }
.chip-pick-del:disabled { opacity: .4; cursor: default; }

.chip-btn.chip-btn-success {
  background: var(--chip-good); color: #fff; border-color: var(--chip-good); cursor: default;
}
.chip-btn.chip-btn-success:hover { background: var(--chip-good); color: #fff; }
.chip-btn:disabled, .chip-btn[disabled] { opacity: .8; cursor: default; }
.chip-pick-thumb {
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--chip-paper-2); border: 1px solid var(--chip-line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--chip-mono); font-size: 18px;
}
.chip-pick-thumb img { width:100%; height:100%; object-fit: cover; }
/* Thumb doubles as a preview button — expands the file instead of attaching it. */
button.chip-pick-thumb { padding: 0; position: relative; cursor: zoom-in; }
button.chip-pick-thumb:hover { border-color: var(--chip-ink); }
button.chip-pick-thumb:focus-visible { outline: 2px solid var(--chip-accent); outline-offset: 1px; }
.chip-pick-zoom {
  position: absolute; right: 1px; bottom: 1px; pointer-events: none;
  font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 2px;
  background: rgba(27,24,20,.72); color: #fff;
  opacity: 0; transition: opacity .12s ease;
}
button.chip-pick-thumb:hover .chip-pick-zoom,
button.chip-pick-thumb:focus-visible .chip-pick-zoom { opacity: 1; }
.chip-pick-body { flex: 1; min-width: 0; }
.chip-pick-title { font-family: var(--chip-serif); font-size: 14px; }
.chip-pick-meta  { font-family: var(--chip-mono); font-size: 11px; color: var(--chip-ink-2); }

/* ─── Toggle switch ────────────────────────────────────────────────────── */

.chip-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; padding: 4px 0; cursor: pointer;
  font-family: var(--chip-mono); font-size: 11px; color: var(--chip-ink);
}
.chip-toggle:focus-visible { outline: 2px solid var(--chip-gold); outline-offset: 2px; }
.chip-toggle.disabled, .chip-toggle:disabled { opacity: .45; cursor: not-allowed; }
.chip-toggle .chip-toggle-track {
  display: inline-block; position: relative;
  width: 36px; height: 20px;
  background: var(--chip-paper-2);
  border: 1px solid var(--chip-line);
  border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.chip-toggle .chip-toggle-thumb {
  position: absolute; top: 1px; left: 1px;
  width: 16px; height: 16px;
  background: #fff; border: 1px solid var(--chip-line);
  border-radius: 50%;
  transition: left .15s;
}
.chip-toggle[data-state="1"] .chip-toggle-track { background: var(--chip-good); border-color: var(--chip-good); }
.chip-toggle[data-state="1"] .chip-toggle-thumb { left: 17px; border-color: var(--chip-good); }
.chip-toggle-label { text-transform: uppercase; letter-spacing: 1px; }
.chip-toggle-hint  { display: block; margin-top: 2px; font-size: 10px; }

/* ─── Quill (rich text editor) overrides ───────────────────────────────── */

.chip-rt-host { border: 1px solid var(--chip-line); background: #fff; margin-bottom: 8px; }
.chip-rt-host .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid var(--chip-line); background: var(--chip-paper-2); }
.chip-rt-host .ql-container.ql-snow { border: none; font-family: var(--chip-typewriter); font-size: 14px; }
.chip-rt-host .ql-editor { min-height: 180px; }

/* ─── Convert-to dropdown on the Note modal ────────────────────────────── */

.chip-convert-menu {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 4px;
  background: #fff; border: 1px solid var(--chip-ink); box-shadow: var(--chip-shadow);
  z-index: 100000; min-width: 180px;
  display: flex; flex-direction: column;
}
.chip-convert-menu[hidden] { display: none; }
.chip-convert-menu button {
  background: transparent; border: none; text-align: left;
  padding: 7px 12px; font-size: 13px; font-family: var(--chip-sans); color: var(--chip-ink);
  cursor: pointer;
}
.chip-convert-menu button:hover { background: var(--chip-paper-2); }
.chip-convert-menu button + button { border-top: 1px solid var(--chip-line); }

/* ─── Attachment section (inside entity modals) ───────────────────────── */

.chip-attach-section {
  background: #fff8e5; border:1px dashed var(--chip-line); padding:10px 12px; margin-top: 6px;
}
.chip-attach-section .chip-attach-head {
  display:flex; align-items:center; gap:8px; margin-bottom:6px; font-family: var(--chip-mono); font-size:12px; color: var(--chip-ink);
}
.chip-attach-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.chip-attach-tile {
  background:#fff; border:1px solid var(--chip-line); padding:6px; display:flex; flex-direction:column; gap:4px; font-size:11px;
  box-shadow: var(--chip-shadow-soft); position:relative;
  cursor: grab;
  transition: opacity .12s, transform .12s;
}
.chip-attach-tile:active { cursor: grabbing; }
.chip-attach-tile.dragging { opacity: .4; outline: 2px dashed var(--chip-stamp); outline-offset: 2px; }
.chip-attach-tile button, .chip-attach-tile a { cursor: pointer; }
.chip-attach-tile img { cursor: zoom-in; }
.chip-attach-tile .thumb {
  width:100%; height:88px; background: var(--chip-paper-2); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px dashed var(--chip-line);
}
.chip-attach-tile .thumb img { width:100%; height:100%; object-fit:cover; }
.chip-attach-tile .thumb .icon { font-family: var(--chip-mono); font-size:20px; color: var(--chip-ink-2); }
.chip-attach-tile .name { font-family: var(--chip-mono); font-size:11px; color: var(--chip-ink); word-break: break-all; overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.chip-attach-tile .meta { font-family: var(--chip-mono); font-size:10px; color: var(--chip-ink-2); }
.chip-attach-tile .tile-actions { display:flex; gap:4px; }
.chip-attach-tile .tile-actions .chip-btn { padding:3px 6px; font-size:10px; }
.chip-attach-ctrls { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.chip-attach-status { margin-top:8px; font-family: var(--chip-mono); font-size:11px; color: var(--chip-stamp); }

/* ─── Import / Export table ────────────────────────────────────────────── */

.chip-iox-table { background:#fff; border:1px solid var(--chip-line); }
.chip-iox-table th { background: var(--chip-paper-2); font-family: var(--chip-mono); font-size: 11px; text-transform: uppercase; }
.chip-iox-table td { vertical-align: middle; }
.chip-iox-table code { font-size: 11px; color: var(--chip-ink-2); background: transparent; padding: 0; }
.chip-iox-form { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
/* Native file input is hidden — the matching <label class="chip-btn icon">
   acts as the click target and the filename is shown beside it. */
.chip-iox-form input.chip-iox-file { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-iox-form .chip-iox-filename {
  font-family: var(--chip-mono); font-size: 11px; color: var(--chip-ink-2);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 4px;
}
.chip-iox-form select { font-size: 12px; padding: 4px 6px; border: 1px solid var(--chip-line); min-width: 0; }

/* ─── Vocab editor ─────────────────────────────────────────────────────── */

.chip-vocab-block {
  background:#fff; border:1px solid var(--chip-line); padding:10px 14px; margin-bottom:8px;
}
.chip-vocab-block summary {
  cursor:pointer; font-family: var(--chip-serif); padding: 4px 0; outline: none;
}
.chip-vocab-table {
  width:100%; border-collapse: collapse; margin: 8px 0; font-size:13px;
}
.chip-vocab-table th {
  background: var(--chip-paper-2); text-align:left; padding:6px 8px; border:1px solid var(--chip-line); font-family: var(--chip-mono); font-size:11px; text-transform:uppercase;
}
.chip-vocab-table td {
  padding:5px 8px; border:1px solid var(--chip-line); background:#fff; vertical-align:middle;
}
.chip-vocab-table input[type="text"] {
  width:100%; padding:5px 7px; border:1px solid var(--chip-line); background:#fff; font-family: var(--chip-mono); font-size:12px;
}
.chip-vocab-table input[type="color"] { width:36px; height:28px; padding:0; border:1px solid var(--chip-line); cursor:pointer; }
.chip-vocab-table select { padding:4px 6px; border:1px solid var(--chip-line); }

/* ── Text highlights + entity links ──────────────────────────────────────── */
/* Hosts keep their text natively selectable — nothing sets user-select:none. */
mark.chip-hl {
  background: #fff59d;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
  cursor: pointer;
  user-select: text;                 /* text inside a highlight stays selectable */
  transition: box-shadow .12s, filter .12s;
}
/* Glow the highlighted text on hover. */
mark.chip-hl:hover {
  box-shadow: 0 0 7px 2px rgba(200,169,106,.9);
  filter: brightness(1.04);
}
/* Entity-bound highlight (a "link"): no fill, dashed underline. */
mark.chip-hl.chip-hl-link {
  background: transparent !important;
  color: var(--chip-thread, #a51010);
  text-decoration: underline dashed;
  text-underline-offset: 2px;
  border-radius: 0;
}
mark.chip-hl.chip-hl-link:hover {
  background: rgba(165,16,16,.08) !important;
  box-shadow: none;
  text-decoration-color: var(--chip-accent, #8b1e1e);
}

/* Floating selection toolbar (appears over a fresh text selection). */
.chip-sel-menu {
  position: absolute; z-index: 100002;
  display: flex; align-items: center; gap: 4px;
  background: var(--chip-ink, #20140c);
  border: 1px solid rgba(0,0,0,.3);
  border-radius: 6px; padding: 5px 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.chip-sel-swatch {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); cursor: pointer;
  transition: transform .1s;
}
.chip-sel-swatch:hover { transform: scale(1.14); }
.chip-sel-btn {
  background: transparent; color: #f3ead7; border: none;
  font-family: var(--chip-mono); font-size: 11px; cursor: pointer;
  padding: 3px 6px; border-radius: 4px;
}
.chip-sel-btn:hover { background: rgba(255,255,255,.14); }

/* Mark action / bound-link popover. */
.chip-hl-pop {
  position: absolute; z-index: 100002;
  background: var(--chip-paper, #f3ead7);
  border: 1px solid var(--chip-line, #b8a888);
  border-radius: 6px; padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  display: flex; flex-direction: column; gap: 4px; min-width: 160px;
}
.chip-hl-pop-title {
  font-family: var(--chip-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--chip-ink-2, #4a3826); padding: 0 2px 2px;
}
.chip-hl-pop .chip-btn { justify-content: flex-start; text-align: left; }
.chip-btn.sm { padding: 3px 8px; font-size: 11px; }

/* Link-picker result rows. */
.chip-hl-pick-row {
  display: block; width: 100%; text-align: left;
  background: var(--chip-paper-2, #e7dcc1);
  border: 1px solid var(--chip-line, #b8a888);
  border-radius: 4px; padding: 7px 10px; margin-bottom: 5px;
  font-size: 13px; cursor: pointer; color: var(--chip-ink, #20140c);
}
.chip-hl-pick-row:hover { background: var(--chip-paper, #f3ead7); border-color: var(--chip-ink, #20140c); }

/* ── Sticky tabs + view preferences (Tier 2) ─────────────────────────────── */
/* Pin the case-detail tab strip flush below whatever is fixed at the top
   (WP admin bar in normal mode; nothing in fullscreen). The top inset is set
   from JS via --chip-sticky-top because the bar's height varies (32/46px) and
   drops to 0 in fullscreen. position:sticky !important defeats stray theme
   rules on .chip-tabs's position. */
.chip-case-detail.chip-sticky-tabs #chip-case-tabs {
  position: sticky !important;
  top: var(--chip-sticky-top, 32px);
  z-index: 50;
  background: var(--chip-paper);
  margin-top: 0;
  box-shadow: 0 8px 10px -10px rgba(0,0,0,.35);   /* hint it floats over scrolled content */
}
/* Leave room under the admin bar so scrollIntoView lands flush, not behind it. */
#chip-case-tabs { scroll-margin-top: var(--chip-sticky-top, 32px); }

/* Collapsible cover — shrink to a one-line header (badges + title + actions),
   dropping the chunky padding and the torn-paper flap. */
.chip-cover-chevron { min-width: 28px; padding: 4px 8px !important; }
.chip-case-cover.chip-cover-collapsed {
  padding: 8px 16px; min-height: 0; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.chip-case-cover.chip-cover-collapsed .chip-cover-flap { display: none; }
.chip-case-cover.chip-cover-collapsed .chip-cover-meta { margin-bottom: 0; display: inline-flex; vertical-align: middle; }
.chip-case-cover.chip-cover-collapsed .chip-case-title {
  display: inline-block; font-size: 17px; margin: 0 0 0 12px; vertical-align: middle;
}
.chip-case-cover.chip-cover-collapsed .chip-cover-actions { margin-top: 6px; }

/* Floating "jump to tabs" workspace pill. */
#chip-workspace-pill {
  position: fixed; bottom: 32px; right: 24px; z-index: 99990;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid #1a1106; border-radius: 50%;
  background: var(--chip-ink, #20140c); color: var(--chip-paper, #f3ead7);
  font-size: 20px; line-height: 1; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
#chip-workspace-pill:hover { background: #3a2415; }

/* ⚙ View preferences popover. */
.chip-view-prefs-pop {
  position: absolute; z-index: 100001;
  background: var(--chip-paper, #f3ead7);
  border: 1px solid var(--chip-line, #b8a888);
  box-shadow: 0 8px 22px rgba(0,0,0,.22); border-radius: 6px;
  min-width: 300px; max-width: 340px; padding: 6px 0; font-size: 13px;
}
.chip-view-prefs-head {
  padding: 6px 12px 8px; border-bottom: 1px solid var(--chip-line);
  font-family: var(--chip-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--chip-ink-2, #4a3826);
}
.chip-view-pref-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; cursor: pointer; }
.chip-view-pref-row:hover { background: #fff8e5; }
.chip-view-pref-row input { margin-top: 2px; }
.chip-view-pref-label { font-weight: 600; color: var(--chip-ink, #20140c); }

/* ─── Murder Board (corkboard + red string) ────────────────────────────── */

.chip-board-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.chip-board {
  position: relative; overflow: hidden; height: 70vh;
  border: 8px solid #5a4023; border-radius: 3px;
  background:
    radial-gradient(circle at 18% 32%, rgba(0,0,0,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 71%, rgba(0,0,0,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 22%, rgba(255,255,255,.05) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 3px, transparent 3px 7px),
    #b08d57;
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
  cursor: grab; /* empty cork pans the board; cards show grab instead */
  touch-action: none;
}
.chip-board.panning { cursor: grabbing; }
/* Panned + zoomed via transform (no scrollbars). transform-origin 0 0 keeps
   the pan/zoom math simple: screen = pan + surface * zoom. */
.chip-board-surface { position: relative; transform-origin: 0 0; will-change: transform; }
.chip-board-strings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.chip-board-strings .string        { fill: none; stroke: #b91c1c; stroke-linecap: round; }
.chip-board-strings .string-shadow { fill: none; stroke: rgba(0,0,0,.30); stroke-width: 3.5; transform: translate(1.5px, 2.5px); }
.chip-board-card {
  position: absolute; width: 156px; padding: 12px 10px 8px; box-sizing: border-box;
  background: #fdf6e3; border: 1px solid #c9b88a;
  box-shadow: 2px 3px 9px rgba(0,0,0,.38);
  cursor: grab; user-select: none; touch-action: none;
  transform: rotate(var(--tilt, -1deg));
}
.chip-board-card.dragging { cursor: grabbing; z-index: 30; transform: rotate(0deg) scale(1.03); box-shadow: 4px 7px 16px rgba(0,0,0,.45); }
.chip-board-card .pin {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f28b82 0 3px, #b91c1c 60%, #7a0d0d);
  box-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.chip-board-photo { display: block; width: 100%; height: 84px; object-fit: cover; border: 1px solid #c9b88a; margin-bottom: 6px; pointer-events: none; }
.chip-board-label { font-weight: 700; font-size: 12px; line-height: 1.25; color: #20140c; word-break: break-word; }
.chip-board-sub   { font-size: 10px; color: #6b5b45; margin-top: 3px; font-family: var(--chip-mono); }
.chip-board-tag {
  position: absolute; transform: translate(-50%, -50%) rotate(-2deg); z-index: 20;
  background: #fffbe9; border: 1px solid #b91c1c; color: #7a0d0d;
  font-size: 10px; font-family: var(--chip-mono); padding: 1px 6px; border-radius: 2px;
  cursor: pointer; white-space: nowrap; box-shadow: 1px 2px 4px rgba(0,0,0,.3);
}
.chip-board-tag:hover { background: #b91c1c; color: #fffbe9; }
/* Per-type accent stripe along the card's left edge */
.chip-board-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #8a7a5f; }
.chip-board-person::before       { background: #7a0d0d; }
.chip-board-location::before     { background: #1d6f42; }
.chip-board-vehicle::before      { background: #a04000; }
.chip-board-organization::before { background: #6c3483; }
.chip-board-evidence::before     { background: #a31a1a; }
.chip-board-document::before     { background: #5a4a36; }
.chip-board-event::before        { background: #b9770e; }
.chip-board-case::before         { background: #1b1814; }

/* ─── Search + highlight (Link Analysis graph & Murder Board) ──────────── */
/* Shared chrome: one search control, two surfaces. Findings are highlighted
   in place rather than filtered out — on a link chart the un-matched nodes
   are the context that makes a match mean anything, so they fade, not vanish. */
.chip-search-box {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--chip-paper, #f3ead7);
  border: 1px solid var(--chip-ink, #20140c); border-radius: 2px; padding: 2px 4px;
}
.chip-search-box.has-query { border-color: #b8860b; box-shadow: 0 0 0 2px rgba(224,160,16,.28); }
/* Two classes deep on purpose: WP admin's `input[type=search]` rules would
   otherwise out-specify a single class and put the border back. */
.chip-search-box .chip-search-input {
  border: 0; background: transparent; outline: none; box-shadow: none;
  font-family: var(--chip-mono); font-size: 12px; color: var(--chip-ink, #20140c);
  padding: 3px 4px; width: 190px; min-height: 0; height: auto; margin: 0;
}
.chip-search-box .chip-btn {
  padding: 0 6px; font-size: 13px; line-height: 20px;
  background: transparent; border-color: transparent;
}
.chip-search-box .chip-btn:hover { background: #fff8e5; border-color: var(--chip-ink-2, #5a4a36); }
.chip-search-count {
  font-family: var(--chip-mono); font-size: 10px; color: #6b5b45;
  min-width: 64px; text-align: right; padding-right: 2px; white-space: nowrap;
}
/* Graph: floats over the network canvas, so the case tab and the global Link
   Analysis page both get the control without either adding markup for it. */
.chip-graph-search { position: absolute; top: 8px; left: 8px; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.28); }

/* Board: matches keep their color and gain a gold ring; the rest sink into
   the cork. Strings between two matches light up with them. */
.chip-board-card { transition: opacity .15s ease, box-shadow .15s ease, filter .15s ease; }
.chip-board.searching .chip-board-card.miss { opacity: .18; filter: grayscale(.75); }
.chip-board-card.hit     { box-shadow: 0 0 0 3px #e0a010, 2px 3px 12px rgba(0,0,0,.45); z-index: 25; }
.chip-board-card.current { box-shadow: 0 0 0 4px #e0a010, 0 0 24px 7px rgba(224,160,16,.6), 2px 3px 12px rgba(0,0,0,.45); z-index: 26; }
.chip-board-strings .string.dim,
.chip-board-strings .string-shadow.dim { opacity: .1; }
.chip-board-strings .string.lit        { stroke: #e0a010; }
.chip-board-strings .string-shadow.lit { opacity: .5; }
.chip-board-tag.dim { opacity: .14; }
.chip-board-tag.lit { border-color: #b8860b; background: #fff3c4; color: #6b4a06; }

/* ─── Linked-object map pins (entities riding a location's coordinates) ── */
.chip-linked-pin { background: transparent; border: none; }
.chip-linked-bubble {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 4px;
  background: #fffbe9; border: 2px solid #8a7a5f;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; box-shadow: 1px 2px 5px rgba(0,0,0,.35);
}
.chip-linked-person       { border-color: #7a0d0d; }
.chip-linked-organization { border-color: #6c3483; }
.chip-linked-vehicle      { border-color: #a04000; }
.chip-linked-evidence     { border-color: #a31a1a; }
.chip-linked-document     { border-color: #5a4a36; }
.chip-linked-event        { border-color: #b9770e; }
.chip-linked-case         { border-color: #1b1814; }

/* ─── Media tab: audio / video tiles + inline players ──────────────────── */
.chip-av-thumb { position: relative; width: 100%; height: 100%; }
.chip-av-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: #111; }
.chip-av-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.62); color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center; padding-left: 3px;
  box-shadow: 0 1px 6px rgba(0,0,0,.4); pointer-events: none;
}
.chip-img-tile .icon.chip-av-audio { font-size: 34px; }
.chip-doc-reader-video { width: 100%; max-height: 100%; background: #111; display: block; }
.chip-doc-reader-audio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 40px 20px; width: 100%;
}
.chip-doc-reader-audio audio { width: 100%; max-width: 480px; }
.chip-av-audio-glyph { font-size: 46px; }

/* ─── Card corner image preview + media viewer ‹ › navigation ──────────── */
.chip-card { position: relative; }
.chip-card-thumb {
  position: absolute; top: 8px; right: 8px;
  width: 48px; height: 48px; object-fit: cover;
  border: 1px solid var(--chip-line); border-radius: 2px;
  box-shadow: 1px 1px 4px rgba(0,0,0,.25);
  cursor: zoom-in; z-index: 2; background: #fff;
}
.chip-card-thumb:hover { box-shadow: 0 0 0 2px #c8a96a, 1px 1px 6px rgba(0,0,0,.3); }
/* Keep card titles clear of the corner thumb */
.chip-card .chip-card-thumb ~ h3 { padding-right: 60px; }
.chip-media-nav { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }

/* Person card social-media chips */
.chip-person-social { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.chip-social-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 1.4; max-width: 100%;
  padding: 1px 7px 1px 5px; border: 1px solid var(--chip-line, #d9cdb0); border-radius: 11px;
  background: #f6f1e3; color: #3a4a66; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.chip-social-chip:hover { background: #eae0c6; border-color: #b9a877; text-decoration: none; }
span.chip-social-chip { color: #6b5b45; cursor: default; }

/* Social-media platform autocomplete menu */
.chip-social-ac {
  position: fixed; z-index: 100000; min-width: 168px; max-width: 260px;
  background: #fff; border: 1px solid var(--chip-line, #d9cdb0); border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); overflow: hidden; font-size: 13px;
}
.chip-social-ac-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; }
.chip-social-ac-item .ac-icon { width: 18px; text-align: center; }
.chip-social-ac-item .ac-hint { margin-left: auto; color: #9a8c6f; font-family: var(--chip-mono, monospace); }
.chip-social-ac-item.active, .chip-social-ac-item:hover { background: #f2ead6; }

/* Branded social-media logos (Simple Icons) on chips + autocomplete */
.chip-social-icon { width: 13px; height: 13px; flex: 0 0 auto; display: block; }
.chip-social-emoji { font-size: 12px; line-height: 1; }
.chip-social-ac-item .ac-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; }
.chip-social-ac-item .ac-icon img { width: 15px; height: 15px; display: block; }

/* Attachment chosen as the entity card thumbnail */
.chip-attach-tile.is-thumb { outline: 2px solid #c8a96a; outline-offset: -2px; }
.chip-attach-tile.is-thumb::after {
  content: '★ Thumbnail'; position: absolute; top: 4px; left: 4px; z-index: 1;
  background: #c8a96a; color: #1a1206; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 2px; letter-spacing: .03em; pointer-events: none;
}

/* Linkified contact values on cards (email / website / phone) */
.chip-contact-link { color: #2c5c8a; text-decoration: none; }
.chip-contact-link:hover { text-decoration: underline; }
.chip-contact-line { margin-top: 3px; word-break: break-word; }