/* web/components/convrail/convrail.css — [MINE1 conv-rail-v1]
   Controls for collapsing / restoring the chat list column. Markup is built
   by components/convrail/convrail.js. Tokens only. */

/* expanded: New chat + chevron on one row (the button keeps its own look) */
#convpanel .conv-top { display: flex; align-items: center; gap: 8px; width: 100%; }
#convpanel .conv-top #newchat { flex: 1 1 auto; min-width: 0; margin: 0; }
#convpanel .conv-tgl { flex: none; width: 36px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-btn, 10px); border: 1px solid transparent;
  background: transparent; color: var(--tb-text-secondary, var(--text-muted));
  cursor: pointer; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; }
#convpanel .conv-tgl:hover { background: var(--surface-2, var(--tb-surface-2)); color: var(--tb-text, var(--text));
  border-color: var(--tb-border-strong, var(--border-2)); }
#convpanel .conv-tgl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }

/* collapsed: a 44px rail where the pane used to be */
#convmini { display: none; flex: none; width: 44px; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 0; background: var(--list, var(--tb-list)); border-right: 1px solid var(--border, var(--tb-border)); }
body.convcollapsed:not(.takeover) #convmini { display: flex; }
body.convcollapsed:not(.takeover) #convsplit { display: block; }
.conv-mini-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-btn, 10px); border: 1px solid var(--tb-border-strong, var(--border-2));
  background: var(--surface, var(--tb-surface)); color: var(--tb-text-secondary, var(--text-muted)); cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease; }
.conv-mini-btn:hover { background: var(--surface-2, var(--tb-surface-2)); color: var(--tb-text, var(--text)); }
.conv-mini-btn.primary { background: var(--tb-accent, var(--accent)); border-color: var(--tb-accent, var(--accent));
  color: var(--accent-ink, #fff); }
.conv-mini-btn.primary:hover { background: var(--tb-primary-hover, var(--tb-accent, var(--accent))); transform: translateY(-1px); }
.conv-mini-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.conv-mini-btn:focus-visible, #convpanel .conv-tgl:focus-visible { outline: 2px solid var(--tb-accent, var(--accent)); outline-offset: 2px; }

@media (max-width: 767px) { #convmini { display: none !important; } }