/* ===========================================================================
   Data Tomo — Sharing a conversation (LTA-101)
   ===========================================================================

   Loaded after app.css. Ported from the approved prototype's share styles
   (artifact-003a4379, lines 561-611) onto app.css's own --ab-* tokens — the
   prototype's --accent / --surface / --border do not exist in this app.

   NAMING. Everything in this file is prefixed `dt-share-` (Data Tomo Share), with
   no exceptions. The prototype's own names are exactly the shape that
   collides: `.n`, `.from`, `.people`, `.none`, `.grow`, `.av`, `.pos`, `.find`.
   instructions.css:9-13 records what that costs — a chat speaker label classed
   `.tomo` matched app.css's `.tomo { display: grid }` and turned a 96px label
   into a 266px grid. app.css is 4,419 lines of unprefixed class names; assume
   every short word is taken.

   NO EXTERNAL ASSETS. No @import, no url() to another origin, no web font.
   nginx sends a Content-Security-Policy (nginx/nginx.conf:63 and :111) that
   local uvicorn does not, so anything external passes locally and fails on
   every deployed environment — which is exactly how LTA-103 shipped.
   ========================================================================= */

/* NO POSITIONING CLASS HERE. The popover anchors to `#tomo-share-slot`, which
   LTA-99 already renders as <span class="dt-pos" id="tomo-share-slot"> and
   styles `position: relative` in data-tomo.css. Defining a second one would be
   two rules fighting over one element. */

.dt-share-btn {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  padding: 8px 15px;
  font-family: var(--ab-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ab-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.dt-share-btn:hover {
  border-color: var(--ab-primary);
  color: var(--ab-primary);
  background: var(--ab-primary-light);
}
.dt-share-btn[hidden] { display: none !important; }

/* ── The popover ──────────────────────────────────────────────────────── */

.dt-share-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: 290px;
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(27, 40, 50, 0.14);
  padding: 14px;
  text-align: left;
}
.dt-share-pop[hidden] { display: none !important; }
.dt-share-pop-hint {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--ab-text-muted);
  line-height: 1.45;
}

.dt-share-search { position: relative; margin-bottom: 10px; }
.dt-share-search[hidden] { display: none !important; }
.dt-share-find {
  width: 100%;
  font-family: var(--ab-font-body);
  font-size: 0.95rem;
  color: var(--ab-text);
  background: var(--ab-bg);
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  padding: 9px 12px 9px 32px;
  margin: 0;
}
.dt-share-find:focus {
  outline: none;
  border-color: var(--ab-primary);
  box-shadow: 0 0 0 3px var(--ab-primary-light);
}
.dt-share-mag {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ab-text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.dt-share-people { max-height: 212px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }

.dt-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}
.dt-share-row:hover { background: var(--ab-hover-bg); }
.dt-share-row[aria-selected="true"] { background: var(--ab-primary-light); }
.dt-share-row .dt-share-nm { font-size: 0.95rem; color: var(--ab-text); font-weight: 600; }
.dt-share-row .dt-share-em { font-size: 0.8rem; color: var(--ab-text-muted); }
.dt-share-row mark { background: #fdf0c9; color: inherit; border-radius: 2px; }

.dt-share-av {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: var(--ab-border-light);
  color: var(--ab-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Someone Slack knows who has never signed in. Shown, not hidden: the reader
   needs to know their colleague exists and why they cannot be picked. */
.dt-share-row-off { cursor: not-allowed; opacity: 0.62; }
.dt-share-row-off:hover { background: none; }
.dt-share-why { font-size: 0.75rem; color: var(--ab-text-muted); line-height: 1.35; }

.dt-share-none { font-size: 0.85rem; color: var(--ab-text-muted); padding: 12px 10px; margin: 0; }

/* Share back: the one person the fork already knows about, offered first — an
   accent-tinted row above the search, then a small uppercase separator, then
   the ordinary list. Hidden as soon as a query is typed. */
.dt-share-back[hidden] { display: none !important; }

.dt-share-back-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--ab-primary-light);
  border: 1px solid #cfe0d6;
  border-radius: 7px;
  padding: 9px 11px;
  text-align: left;
  margin-bottom: 10px;
  cursor: pointer;
}
.dt-share-back-row:hover { background: var(--ab-primary); border-color: var(--ab-primary); }
.dt-share-back-row:hover .dt-share-nm,
.dt-share-back-row:hover .dt-share-em { color: #fff; }
.dt-share-back-row .dt-share-nm {
  display: block;
  font-size: 0.95rem;
  color: var(--ab-primary);
  font-weight: 600;
}
.dt-share-back-row .dt-share-em { display: block; font-size: 0.8rem; color: var(--ab-text-muted); }
.dt-share-back-row .dt-share-av { background: var(--ab-primary); color: #fff; }

.dt-share-sep {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ab-text-muted);
  margin: 0 0 8px;
}

/* The confirmation line inside the popover after a successful share, and the
   failure line that replaces the list when one could not be made. */
.dt-share-ok {
  font-size: 0.85rem;
  color: var(--ab-success);
  font-weight: 600;
  padding: 6px 10px 0;
}
.dt-share-ok[hidden] { display: none !important; }
.dt-share-err { font-size: 0.85rem; color: var(--ab-danger); padding: 6px 10px 0; }

.dt-share-bar {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: #eef4f8;
  border: 1px solid #d7e4ec;
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 0.95rem;
  color: #26485c;
  line-height: 1.5;
  margin-bottom: 20px;
}
.dt-share-bar b { font-weight: 600; }
.dt-share-bar-grow { flex: 1; min-width: 220px; }

/* ── The Theirs / Mine toggle ─────────────────────────────────────────── */
/* Its OWN slot (`#tomo-toggle-slot`), immediately above the share bar, which is
   where the prototype puts it: title -> rule -> toggle -> share bar -> thread.
   Two states, full width, one at a time — not side-by-side and not a diff. */

.dt-share-toggle {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dt-share-seg {
  display: inline-flex;
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
  flex: none;
}

.dt-share-seg button {
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 7px 16px;
  font-family: var(--ab-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ab-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}
.dt-share-seg button:hover { color: var(--ab-primary); }
.dt-share-seg button[aria-pressed="true"] { background: var(--ab-primary); color: #fff; }

/* Theirs is SOMEONE ELSE'S WRITING, so its selected state is tinted to the same
   blue the shared-thread bar uses (#26485c) rather than the normal accent. The
   two then read as one state — "you are looking at another person's thread" —
   instead of as two interchangeable tabs. Straight from the prototype. */
.dt-share-seg button[aria-pressed="true"][data-share-side="theirs"] { background: #26485c; }

.dt-share-note {
  flex: 1;
  min-width: 200px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ab-text-muted);
}
.dt-share-note b { color: var(--ab-text-secondary); font-weight: 600; }

/* Revoked. DASHED, and PERMANENT on a conversation that was forked from a share
   the sharer has since withdrawn — it is not a toast. A side that silently
   vanishes reads as a bug or as lost work; this says "yours, untouched, only
   the window closed" and keeps saying it. Also used for the sharer's own
   one-off "Stopped sharing with X" confirmation. */
.dt-share-gone {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--ab-bg);
  border: 1px dashed var(--ab-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--ab-text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}
.dt-share-gone b { color: var(--ab-text-secondary); font-weight: 600; }

/* Stop sharing — a quiet underlined text control, muted until hover, because
   revoking is ordinary rather than drastic. Explicitly NOT a prominent or
   destructive-styled button. */
.dt-share-revoke {
  background: none;
  border: 0;
  color: var(--ab-text-muted);
  font-family: var(--ab-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dt-share-revoke:hover {
  color: var(--ab-danger);
  background: #fbeaea;
  text-decoration: none;
}

/* ── "Shared with me" in the rail ─────────────────────────────────────── */

.dt-share-railhead {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ab-text-muted);
  margin: 14px 0 2px;
}
.dt-share-railcount {
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  background: var(--ab-primary-light);
  color: var(--ab-primary);
  padding: 1px 7px;
  border-radius: 99px;
}

.dt-share-conv {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
}
.dt-share-conv:hover { background: var(--ab-hover-bg); }
.dt-share-conv[aria-current="true"] { background: #eef4f8; }
.dt-share-conv .dt-share-ct { display: block; font-size: 0.9rem; color: var(--ab-text); font-weight: 600; }
.dt-share-conv[aria-current="true"] .dt-share-ct { color: #26485c; }
.dt-share-conv .dt-share-from {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.72rem;
  color: var(--ab-text-muted);
}
.dt-share-conv .dt-share-from b { color: var(--ab-text-secondary); font-weight: 600; }

/* Visually hidden, still read aloud. `.sr` and `.sr-only` are both taken. */
.dt-share-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}