/* Vici shared rail - the thread list beside the conversation.
   The modal is the master copy: rules moved verbatim, in source order, from
   dock/panel/panel.css; loaded after shared-tokens.css and before the host's
   own sheet (panel.css here, styles.css on the web under /panel/).
   The rail, its head with the wordmark, the thread rows (title, dots,
   indicator, pin, the inline rename), the empty note, and the foot with the
   account button. The rail's width, its divider, collapsing, the overlay
   drawer and the hand-drawn scrollbar are the host's.
   Shared files (dock/HANDOFF.md, "Shared files"): they hold exactly what the
   modal ships; a host need is a selector in the host's own sheet; no
   transition, animation, filter or blur, and no CSS the board's WebKit has
   not already shipped; every rule renders right with no host-toggled class.
   An edit here is a dock landing (live first) that also deploys the web. */

.conversation-rail {
  flex: 0 0 auto;
  width: 220px;                 /* JS-set; this is only the fallback */
  min-width: 150px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.conversation-rail-head {
  min-height: 58px;             /* matches .conversation-header: one
                                   chrome band across both columns */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.conversation-rail-head strong { flex: 1; font-size: 14px; }
/* Rail foot: the bottom-left corner is who you are + the way into
 * settings (ChatGPT/Claude shape, KAN-333). One wide press target. */
.conversation-rail-foot {
  border-top: 1px solid var(--border);
  padding: 6px;
}
.rail-gear {
  appearance: none;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.rail-gear:hover,
.rail-gear.kb-hover { background: var(--accent-soft); color: var(--accent-link); }
.rail-gear-glyph { flex: none; font-size: 15px; color: var(--muted); }
.rail-gear:hover .rail-gear-glyph,
.rail-gear.kb-hover .rail-gear-glyph { color: var(--accent-link); }
.rail-gear-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.conversation-thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px 6px 6px;    /* the right gutter is the page's thumb's
                                   (8 px in from the edge, 5 wide): a
                                   hovered row's shade ends before it */
}
.conversation-rail-empty {
  padding: 28px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.conversation-thread {
  position: relative;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.conversation-thread:hover,
.conversation-thread.kb-hover {
  /* probe-driven twin of :hover, and a shade that actually reads over
     live video (plain surface-2 was the invisible one) */
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
.conversation-thread.selected {
  border-color: transparent;
  background: var(--surface-2);
}
.conversation-thread-open {
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 8px 30px 8px 10px;  /* room for the always-visible ⋯ */
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.conversation-thread-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.conversation-thread-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.conversation-thread-title { font-size: 13.5px; font-weight: 500; }
.conversation-thread-dots {
  /* The row's ⋯ (rename · delete · pin). Always visible (muted):
     hover-reveal is unreliable from injected moves and undiscoverable
     without an OS cursor. Accent on hover is an enhancement, never
     the only signal. */
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.conversation-thread-dots:hover,
.conversation-thread-dots.kb-hover {
  color: var(--accent-link);
  background: var(--accent-soft);
}
/* Pinned chats sort first; the tiny pin says why. */
.thread-pin-wrap { flex: none; display: grid; place-items: center; }
.thread-pin {
  width: 11px;
  height: 11px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  color: var(--muted);
}
/* Inline rename, in the row itself: the buffer + block caret rig (no
 * native caret renders in this offscreen window). Select-all-on-open —
 * the first keystroke replaces, the way every rename field behaves. */
.conversation-thread-title.editing {
  color: var(--text);
  background: var(--accent-soft);
  outline: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0 4px;
  overflow: visible;
  text-overflow: clip;
}
.conversation-thread-title.editing.selected {
  background: color-mix(in srgb, var(--accent) 35%, var(--surface-2));
}
.conversation-thread-indicator {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}
.conversation-thread-indicator.running { color: var(--ok); }
.conversation-thread-indicator.unread { color: var(--accent-link); }
.conversation-thread-indicator.archived { color: var(--muted); }
/* a Vicit task at work in that thread (docs/vicit.md §42 C): the running
   dot's green with a ring, since a task is not a reply on its way */
.conversation-thread-indicator.working {
  color: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 30%, transparent);
}
/* Approved Pearl / Graphite modal: event-driven paint, shared editor metrics. */
.conversation-rail { background:var(--rail); }
.conversation-rail-head { padding:0 12px; height:58px; box-sizing:border-box; }
.conversation-thread { border-radius:8px; }
.conversation-thread.selected { background:var(--rail-selected); }
.conversation-thread.selected::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:2px; background:var(--accent-mark); }
.conversation-thread:hover { background:var(--neutral-hover); }
.conversation-thread-open { min-height:36px; padding:8px 36px 8px 12px; }
.conversation-thread-title { font-size:13px; line-height:19px; font-weight:400; }
.conversation-thread.selected .conversation-thread-title { font-weight:500; }
.conversation-thread-dots { width:32px; height:32px; right:2px; }
.conversation-thread-list { padding:8px; }
.rail-account-initial { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--rail-selected); font-size:12px; font-weight:600; }
.vici-wordmark svg { display:block; height:24px; width:auto; }
.rail-settings-icon { flex:none; margin-left:auto; width:16px; height:16px; color:var(--muted); }