/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --indigo-500: #2563eb;
  --indigo-600: #1d4ed8;
  --indigo-700: #1e40af;
  --violet-500: #2d7dd2;
  --gradient: linear-gradient(135deg, #1d4ed8 0%, #2d7dd2 100%);
  --gradient-hover: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);

  /* Accent (orange) */
  --orange-500: #f59e0b;
  --orange-600: #d97706;
  --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  /* Sidebar */
  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;
  --sidebar-active: #1e293b;
  --sidebar-border: #1e293b;
  --sidebar-text: #cbd5e1;
  --sidebar-muted: #475569;
  --sidebar-w: 260px;

  /* Main */
  --chat-bg: #f1f5f9;
  --header-bg: #ffffff;
  --input-bg: #ffffff;

  /* Bubbles */
  --bubble-bot: #ffffff;
  --bubble-user-from: #2563eb;
  --bubble-user-to: #2d7dd2;

  /* Text */
  --txt-primary: #0f172a;
  --txt-secondary: #475569;
  --txt-muted: #94a3b8;
  --txt-inverse: #ffffff;

  /* Misc */
  --border: #e2e8f0;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  /* Transitions */
  --t: 200ms ease;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  color: var(--txt-primary);
  background: var(--sidebar-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── App Shell ─────────────────────────────────────────────── */
.app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;   /* the auto-link panel is anchored to the sidebar's edge */
}

/* ── Sessions of one auto link ─────────────────────────────────
   Slides out beside the sidebar rather than pushing the chat pane across:
   opening a link to glance at its conversations should not move everything
   else on screen. */
.auto-flyout {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sidebar-w);
  width: 290px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 14px 0 34px rgba(15, 23, 42, .22);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
}
.auto-flyout.open { opacity: 1; transform: none; }

.auto-flyout-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 12px 12px 16px;
  border-bottom: 1px solid var(--sidebar-border);
}
.auto-flyout-headings { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.auto-flyout-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auto-flyout-meta { font-size: 11px; color: var(--sidebar-muted); }

.auto-flyout-close {
  border: 0;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.auto-flyout-close:hover { background: rgba(148, 163, 184, .16); color: inherit; }

.auto-flyout-list { flex: 1; overflow-y: auto; padding: 6px 8px 12px; }

/* Replayed when the panel opens and again when another link is picked, so a
   swap reads as a new list arriving rather than content changing in place. */
.flyout-enter > * { animation: flyoutRow .24s cubic-bezier(.22, .61, .36, 1) both; }
.flyout-enter > *:nth-child(2) { animation-delay: .03s; }
.flyout-enter > *:nth-child(3) { animation-delay: .06s; }
.flyout-enter > *:nth-child(4) { animation-delay: .09s; }
.flyout-enter > *:nth-child(n+5) { animation-delay: .12s; }
@keyframes flyoutRow {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* An auto link is a folder, not a conversation: it opens something beside it. */
.conv-item.auto-link { cursor: pointer; }

/* How many conversations the link has produced. Sits where a conversation row
   carries its score, so the column reads straight down: one number per row,
   always in the same place. Unlike the score it stays put on hover — it is the
   reason to open the link, not a detail the actions can cover. */
.conv-count {
  flex-shrink: 0;
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--indigo-500, #6366f1);
}
.conv-count.empty {
  color: var(--sidebar-muted);
  background: transparent;
  border: 1px dashed var(--sidebar-border);
  font-weight: 600;
}
.auto-caret {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--sidebar-muted);
  transition: transform .2s ease;
}
.conv-item.auto-link.expanded { background: rgba(99, 102, 241, .16); }
.conv-item.auto-link.expanded .auto-caret { transform: translateX(2px); color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .auto-flyout { transition: none; }
  .flyout-enter > * { animation: none; }
}

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
}

/* Sidebar title - white frame with blue + orange chat bubbles */
.brand-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.brand-icon i {
  position: absolute;
  font-size: 13px;
}
.brand-icon .bubble-blue {
  color: #2563eb;
  top: 7px;
  left: 6px;
}
.brand-icon .bubble-orange {
  color: #f59e0b;
  bottom: 7px;
  right: 6px;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.brand-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #ffffff;
}

/* ── Small circular avatars - square WeWin mark fills the circle ─ */
.header-avatar img,
.msg-avatar img,
.typing-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Welcome hero - full WeWin logo centered in a white circle ─── */
.welcome-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Section label */
.sidebar-section-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sidebar-muted);
  padding: 8px 18px 4px;
}

/* "Recent" and its refresh button share one line. */
.sidebar-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}
.conv-refresh-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--sidebar-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.conv-refresh-btn:hover { background: rgba(255,255,255,.08); color: var(--sidebar-text); }
.conv-refresh-btn:disabled { opacity: .5; cursor: default; }

/* "Copy link" sitting inside the auto-sessions meta line: a button that reads as
   part of the sentence rather than a control stacked under it. */
.flyout-link-btn {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--accent, #60a5fa);
  cursor: pointer;
}
.flyout-link-btn:hover { text-decoration: underline; }
.flyout-link-btn i { font-size: .9em; }

/* Conversation class toggle (Custom / Auto) */
.conv-filter {
  display: flex;
  gap: 4px;
  margin: 4px 12px 0;
  padding: 3px;
  background: rgba(148,163,184,.12);
  border-radius: var(--radius-md);
}
.conv-filter-btn {
  flex: 1;
  min-width: 0;              /* three across a 260px sidebar: let labels shrink */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  color: var(--sidebar-muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: calc(var(--radius-md) - 3px);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.conv-filter-btn:hover { color: #e2e8f0; }
.conv-filter-btn.active { background: rgba(37,99,235,.9); color: #fff; }
.conv-filter-btn i { font-size: 11px; }

.conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  color: var(--sidebar-muted);
  font-size: 12.5px;
  text-align: center;
}
.conv-empty i { font-size: 20px; opacity: .7; }

/* Scope filters (time window + whose workspace), side by side on one row.
   Borderless on purpose: bordered selects read as a form to fill in, when these
   only describe the list underneath. The box appears on hover/focus instead. */
.conv-scope {
  display: flex;
  gap: 6px;
  margin: 6px 12px 0;
}
.conv-chip {
  position: relative;
  flex: 1;
  min-width: 0;              /* let a long name ellipsize instead of pushing out */
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.conv-chip:hover { background: rgba(148,163,184,.12); }
/* An author `display` beats the browser's own [hidden] rule, so without this the
   switcher would still occupy the row for everyone who has no attached users. */
.conv-chip[hidden] { display: none; }
.conv-chip > i {                     /* our own caret; the native one is hidden */
  position: absolute;
  right: 7px;
  font-size: 9px;
  color: var(--sidebar-muted);
  pointer-events: none;
}
.conv-chip-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 6px 20px 6px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-overflow: ellipsis;
}
.conv-chip-select:focus-visible { outline: 2px solid rgba(37,99,235,.7); outline-offset: -1px; }
.conv-chip-select option { background: #111827; color: #e2e8f0; }

/* Agreement-score badge in the list */
.conv-score {
  flex-shrink: 0;
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--score-color, var(--sidebar-muted));
}
.conv-item:hover .conv-score { display: none; }

/* No score yet — either nobody has opened the link, or the report has not come
   back. Kept in the column rather than left blank so the rows stay aligned and
   an absent score reads as "not yet" instead of as an empty cell. */
.conv-score.pending {
  color: var(--sidebar-muted);
  background: transparent;
  border: 1px dashed var(--sidebar-border, rgba(148, 163, 184, .4));
  font-weight: 600;
}

/* Whether a visitor ever arrived. Sits with the date, in the same muted key. */
.conv-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.conv-state i { font-size: 9px; }
.conv-state.opened { color: #22c55e; }
.conv-state.expired { color: #f59e0b; }

/* An unopened link is a listing, not a conversation: there is nothing to open,
   so it must not offer the affordances of a row that can be. */
.conv-item.unopened { cursor: default; opacity: .78; }
.conv-item.unopened:hover { background: transparent; }
.conv-item.unopened:hover .conv-score { display: block; }

/* Conversation list */
.conversations {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}
.conversations::-webkit-scrollbar { width: 0; }

.conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t);
  margin-bottom: 2px;
}
.conv-item:hover { background: var(--sidebar-hover); }
.conv-item.active { background: var(--sidebar-active); }

.conv-icon {
  font-size: 13px;
  color: var(--sidebar-muted);
  flex-shrink: 0;
}

.conv-text { flex: 1; min-width: 0; }

.conv-title {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--sidebar-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar footer */
.sidebar-footer {
  position: relative;
  padding: 12px 14px;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t);
}
.sidebar-user:hover { background: var(--sidebar-hover); }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--sidebar-text);
  overflow: hidden;
}
.user-avatar img,
.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-popover {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 58px;
  z-index: 20;
  padding: 12px;
  background: #111827;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.account-popover[hidden] { display: none; }

.account-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.account-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sidebar-text);
  overflow: hidden;
}

.account-text { min-width: 0; }

.account-name {
  font-size: 13px;
  font-weight: 600;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-email {
  font-size: 11.5px;
  color: var(--sidebar-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-credits {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: #e2e8f0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: var(--radius-sm, 8px);
}

.account-credits[hidden] { display: none; }

.account-credits i {
  font-size: 11px;
  color: var(--sidebar-muted);
}

.account-credits.depleted {
  color: #fca5a5;
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.1);
}

.account-credits.depleted i { color: #fca5a5; }

.account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
}

.account-btn.danger {
  background: rgba(239,68,68,.12);
  color: #fecaca;
}

.sidebar-pages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sidebar-border);
}
.page-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12.5px;
  color: var(--sidebar-muted);
  transition: background 150ms, color 150ms;
}
.page-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.page-link i { font-size: 11px; width: 14px; text-align: center; }
.page-link.disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sidebar-meta {
  font-size: 11px;
  color: var(--sidebar-muted);
  padding-left: 2px;
}

/* ── Chat Main ─────────────────────────────────────────────── */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────── */
.chat-header {
  height: 64px;
  min-height: 64px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: var(--shadow-xs);
  z-index: 10;
}

.header-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}

.online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}

.header-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt-primary);
  letter-spacing: -0.2px;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--txt-muted);
  margin-top: 1px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ctrl-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--txt-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background var(--t), color var(--t);
}
.ctrl-btn:hover {
  background: var(--border);
  color: var(--txt-primary);
}

/* ── New-conversation dropdown (was the share button's slot) ── */
.new-conv-dropdown { position: relative; }

/* Labelled and filled, unlike the ghost .ctrl-btn beside it: this is the primary
   action of the page, and the only entry point to all three kinds. */
.new-conv-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient);
  color: var(--txt-inverse);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t), opacity var(--t);
}
.new-conv-btn:hover { background: var(--gradient-hover); }
.new-conv-btn:disabled { opacity: .45; cursor: not-allowed; }
.new-conv-btn > i:first-child { font-size: 12px; }
.new-conv-btn .nc-caret { font-size: 9px; opacity: .8; }
.new-conv-btn[aria-expanded="true"] .nc-caret { transform: rotate(180deg); }

.share-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 248px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.share-menu[hidden] { display: none; }

.share-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.share-menu-item:hover { background: var(--border); }
.share-menu-item > i {
  color: var(--indigo-500);
  font-size: 14px;
  width: 18px;
  text-align: center;
  margin-top: 2px;
}
.smi-text { display: flex; flex-direction: column; gap: 1px; }
.smi-text strong { font-size: 13.5px; color: var(--txt-primary); font-weight: 600; }
.smi-text small { font-size: 11.5px; color: var(--txt-muted); }

/* ── Messages Area ─────────────────────────────────────────── */
.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px 0;
  scroll-behavior: smooth;
}

.messages-area::-webkit-scrollbar { width: 6px; }
.messages-area::-webkit-scrollbar-track { background: transparent; }
.messages-area::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
.messages-area::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.messages-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Welcome Screen ────────────────────────────────────────── */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 20px 40px;
  gap: 10px;
}

.welcome-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.welcome-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--txt-primary);
  letter-spacing: -0.4px;
}

.welcome-sub {
  font-size: 14.5px;
  color: var(--txt-secondary);
  max-width: 400px;
  line-height: 1.6;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--txt-secondary);
  cursor: pointer;
  transition: border-color var(--t), color var(--t), box-shadow var(--t);
  font-family: inherit;
  box-shadow: var(--shadow-xs);
}
.suggestion:hover {
  border-color: var(--indigo-500);
  color: var(--indigo-600);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
.suggestion i { font-size: 13px; color: var(--orange-500); }

/* ── Message Bubbles ───────────────────────────────────────── */
.message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 250ms ease, transform 250ms ease;
  margin: 4px 0;
}
.message.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Bot messages - left */
.bot-message { flex-direction: row; }
.user-message { flex-direction: row-reverse; }

/* Bot avatar */
.msg-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  margin-bottom: 2px;
}

/* Consecutive messages: hide avatar */
.message.consecutive .msg-avatar { visibility: hidden; }

/* Bubble wrapper */
.bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: min(68%, 620px);
  min-width: 0;
}

/* Bubble */
.bubble {
  max-width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-xl);
  line-height: 1.65;
  font-size: 14.5px;
  overflow-wrap: break-word;
  word-break: normal;
  box-shadow: var(--shadow-sm);
}
/* Mixed Arabic (RTL) + English (LTR): when a message contains Arabic, JS sets
   dir="rtl" on the bubble so the whole line reads right-to-left and embedded
   English words land in their correct positions. text-align follows dir. */
.bubble[dir="rtl"] { text-align: right; }

.bot-message .bubble {
  background: var(--bubble-bot);
  color: var(--txt-primary);
  border-bottom-left-radius: 6px;
}

.user-message .bubble {
  background: var(--gradient);
  color: #fff;
  border-bottom-right-radius: 6px;
}

/* Timestamp */
.msg-time {
  font-size: 11px;
  color: var(--txt-muted);
  margin-top: 4px;
  padding: 0 4px;
  display: block;
}
.user-message .msg-time { text-align: right; }
.bot-message .msg-time { text-align: left; }

/* ── Markdown inside bot bubbles ───────────────────────────── */
.bubble p { margin-bottom: .6em; }
.bubble p:last-child { margin-bottom: 0; }
.bubble h1, .bubble h2, .bubble h3 {
  margin: .9em 0 .4em;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.2px;
}
.bubble h1 { font-size: 1.25em; }
.bubble h2 { font-size: 1.1em; }
.bubble h3 { font-size: 1em; }

.bubble ul, .bubble ol {
  margin: .4em 0 .6em 1.2em;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bubble li { line-height: 1.6; }

.bubble a { color: var(--indigo-500); text-decoration: underline; }
.user-message .bubble a { color: rgba(255,255,255,.85); }

.bubble strong { font-weight: 600; }
.bubble em { font-style: italic; }

/* Inline code */
.bubble code:not(pre code) {
  background: rgba(37,99,235,.1);
  color: #1e40af;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 13px;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
}
.user-message .bubble code:not(pre code) {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* Code blocks */
.bubble pre {
  margin: .7em 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.bubble pre code {
  display: block;
  padding: 14px 16px;
  font-size: 13px;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
  overflow-x: auto;
  line-height: 1.6;
}
/* copy button wrapper */
.code-block-wrapper {
  position: relative;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 6px;
  color: #cdd5e0;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t);
}
.copy-btn:hover { background: rgba(255,255,255,.22); }

/* Blockquote */
.bubble blockquote {
  border-left: 3px solid var(--indigo-500);
  margin: .6em 0;
  padding: 6px 12px;
  background: rgba(37,99,235,.06);
  border-radius: 0 6px 6px 0;
  color: var(--txt-secondary);
  font-style: italic;
}

/* Tables */
.bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: .7em 0;
  font-size: 13.5px;
}
.bubble th, .bubble td {
  border: 1px solid var(--border);
  padding: 7px 12px;
  text-align: left;
}
.bubble th {
  background: #f1f5f9;
  font-weight: 600;
}
.bubble tr:nth-child(even) td { background: #f8fafc; }

/* ── Error message ─────────────────────────────────────────── */
.error-message { justify-content: center; }
.error-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  color: #dc2626;
  font-size: 13.5px;
}

/* ── Typing Indicator ──────────────────────────────────────── */
.typing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 8px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}

.typing-row[hidden] {
  display: none;
}

.typing-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.typing-bubble {
  background: #fff;
  border-radius: var(--radius-xl);
  border-bottom-left-radius: 6px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: var(--shadow-sm);
}

.typing-bubble span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
  animation: bounce 1.2s infinite;
}
.typing-bubble span:nth-child(2) { animation-delay: .2s; }
.typing-bubble span:nth-child(3) { animation-delay: .4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ── Input Bar ─────────────────────────────────────────────── */
.input-bar {
  background: var(--input-bg);
  border-top: 1px solid var(--border);
  padding: 14px 24px 16px;
}

.input-box {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 10px 10px 10px 18px;
  transition: border-color var(--t), box-shadow var(--t);
  max-width: 820px;
  margin: 0 auto;
}

.input-box:focus-within {
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: #fff;
}

/* The author `display` above beats [hidden], and the bar is hidden whenever
   personal chat is switched off. */
.input-bar[hidden] { display: none; }

#msgInput {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--txt-primary);
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  outline: none;
}
#msgInput::placeholder { color: var(--txt-muted); }
#msgInput::-webkit-scrollbar { width: 4px; }
#msgInput::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.send-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 12px;
  border: none;
  background: var(--gradient-accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: opacity var(--t), transform var(--t), box-shadow var(--t);
  box-shadow: 0 2px 8px rgba(217,119,6,.4);
}
.send-btn:disabled {
  background: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  cursor: default;
}
.send-btn:not(:disabled):hover {
  opacity: .9;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(217,119,6,.5);
}
.send-btn:not(:disabled):active {
  transform: scale(.96);
}

.input-hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--txt-muted);
  margin-top: 8px;
}
.input-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 10.5px;
  font-family: inherit;
  color: var(--txt-secondary);
}

/* ── Date separator ────────────────────────────────────────── */
.date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  color: var(--txt-muted);
  font-size: 11.5px;
  font-weight: 500;
}
.date-sep::before, .date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Conversation action buttons ───────────────────────────── */
.conv-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.conv-item:hover .conv-actions { display: flex; }

.conv-action-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--sidebar-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background var(--t), color var(--t);
  font-family: inherit;
}
.conv-action-btn:hover {
  background: rgba(255,255,255,.08);
  color: var(--sidebar-text);
}
.conv-action-btn.shared { color: #93c5fd; }
.conv-action-btn.danger:hover {
  background: rgba(239,68,68,.15);
  color: #f87171;
}

/* ── Share modal ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.modal-overlay[hidden] { display: none; }

.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: min(460px, calc(100vw - 40px));
  max-height: min(700px, 90vh);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-title i { color: var(--indigo-500); }

.modal-close-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--border);
  border-radius: 8px;
  color: var(--txt-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background var(--t);
  font-family: inherit;
}
.modal-close-btn:hover { background: #cbd5e1; }

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-desc {
  font-size: 13.5px;
  color: var(--txt-secondary);
  margin-bottom: 14px;
  line-height: 1.55;
}

.share-draft-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.45;
  font-size: 13px;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 7px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
/* The author `display: flex` above beats [hidden], so an empty notice would
   still draw as a blank orange box. */
.share-draft-notice[hidden] { display: none; }

.share-draft-notice i { margin-top: 3px; }

.share-input-row { display: flex; gap: 8px; }

.share-link-input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-family: 'Fira Code', 'Cascadia Code', monospace;
  color: var(--txt-secondary);
  background: #f8fafc;
  outline: none;
  min-width: 0;
}
.share-link-input:focus { border-color: var(--indigo-500); }

.share-copy-btn {
  padding: 9px 16px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: inherit;
  transition: opacity var(--t);
  flex-shrink: 0;
}
.share-copy-btn:hover { opacity: .9; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}

.revoke-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #dc2626;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t);
}
.revoke-btn:hover { background: #fef2f2; }

.modal-done-btn {
  padding: 8px 22px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity var(--t);
}
.modal-done-btn:hover { opacity: .9; }
.modal-done-btn:disabled { opacity: .45; cursor: not-allowed; }

.share-name-row { margin-bottom: 16px; }

.share-name-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt-secondary);
  margin-bottom: 7px;
}
.share-name-label i { color: var(--indigo-500); font-size: 11px; }

.share-name-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--txt-primary);
  background: #f8fafc;
  outline: none;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.share-name-input:focus {
  border-color: var(--indigo-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.share-name-hint {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--txt-muted);
}

.template-warning {
  margin-top: 7px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.template-warning[hidden] { display: none; }
.template-warning i { margin-top: 1px; color: #d97706; }

.share-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--txt-primary);
  background: #f8fafc;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.share-select:focus {
  border-color: var(--indigo-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.share-desc-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--txt-primary);
  background: #f8fafc;
  outline: none;
  resize: vertical;
  min-height: 76px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
  box-sizing: border-box;
}
.share-desc-textarea:focus {
  border-color: var(--indigo-500);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.share-desc-textarea::placeholder { color: var(--txt-muted); }

.char-counter {
  margin-top: 4px;
  font-size: 11px;
  color: var(--txt-muted);
  text-align: right;
}
.char-counter.at-limit { color: #ef4444; font-weight: 600; }

/* ── Report modal ────────────────────────────────────────────── */
.report-modal { max-width: 560px; }

.report-score-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 4px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.report-gauge-wrap {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}
.report-gauge { width: 120px; height: 120px; display: block; }
.gauge-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}
.gauge-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 1s ease;
}
.gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gauge-pct {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.gauge-label {
  font-size: 11px;
  color: var(--txt-muted);
  font-weight: 500;
  margin-top: 2px;
}

.report-score-meta { flex: 1; min-width: 0; }
.report-score-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 4px;
}
.report-score-desc {
  font-size: 12px;
  color: var(--txt-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.report-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.report-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.report-stat-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.report-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--txt);
  line-height: 1;
}
.stat-lbl {
  font-size: 10px;
  color: var(--txt-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.report-stat-sep {
  width: 1px;
  height: 32px;
  background: var(--border);
}

.report-section { margin-bottom: 18px; }
.report-section-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt-muted);
  margin-bottom: 9px;
}
.report-summary {
  font-size: 13.5px;
  color: var(--txt);
  line-height: 1.7;
  margin: 0;
}
.report-outcome {
  font-size: 13.5px;
  color: var(--txt);
  line-height: 1.65;
  margin: 0;
  padding: 10px 14px;
  background: var(--bg);
  border-left: 3px solid var(--indigo-500);
  border-radius: 0 6px 6px 0;
}

.report-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.report-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--txt);
  line-height: 1.55;
}
.report-highlights li i {
  color: var(--indigo-500);
  font-size: 9px;
  margin-top: 5px;
  flex-shrink: 0;
}

.report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.report-tag {
  padding: 4px 11px;
  border-radius: 20px;
  background: rgba(37,99,235,.1);
  color: var(--indigo-600);
  font-size: 12px;
  font-weight: 500;
}

.report-footer-meta {
  font-size: 11px;
  color: var(--txt-muted);
  text-align: right;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.report-loading,
.report-pending,
.report-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 52px 24px;
  color: var(--txt-muted);
  font-size: 14px;
  text-align: center;
}
.report-loading i { font-size: 26px; }
.report-pending i { font-size: 26px; color: #f59e0b; }
.report-error   i { font-size: 26px; color: #ef4444; }
.report-pending .modal-done-btn,
.report-error .modal-done-btn { margin-top: 4px; }

/* ── Context modal ─────────────────────────────────────────── */
.context-modal { width: min(520px, calc(100vw - 40px)); }

.context-section { margin-bottom: 20px; }
.context-section:last-child { margin-bottom: 0; }

.context-section h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--txt-muted);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.context-section h4 i { color: var(--indigo-500); }

.context-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.context-row:last-child { border-bottom: none; }

.context-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.context-label i { color: var(--indigo-500); width: 14px; text-align: center; }

.context-value {
  font-size: 13.5px;
  color: var(--txt-primary);
  text-align: right;
  word-break: break-word;
}

.context-description {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--txt-primary);
  white-space: pre-wrap;
  margin: 0;
}

.context-template {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--txt-primary);
  background: var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  max-height: 320px;
  overflow-y: auto;
}

.context-muted { font-size: 13px; color: var(--txt-muted); margin: 0; }

/* Starting a new conversation from the one being read. Set apart from the setup
   above it, because it acts rather than describes. */
.context-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(148, 163, 184, .25));
}
.context-actions .context-muted { flex: 1 1 200px; }

.context-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--txt-muted);
  text-align: center;
}
.context-empty i { font-size: 26px; color: var(--indigo-500); }
.context-empty p { margin: 0; font-size: 14px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sidebar { display: none; }
  .messages-inner { padding: 0 12px; }
  .input-bar { padding: 10px 12px 14px; }
  .bubble-wrap { max-width: 85%; }
}

/* ── Observing another workspace (chat + dashboard) ──────────────── */

/* While observing another workspace: no destructive or creating affordances.
   The server refuses these writes anyway; this keeps the UI honest. */
body.is-observing .conv-action-btn.danger,
body.is-observing .input-hint { display: none; }
body.is-observing #newConvBtn,
body.is-observing #clearBtn { opacity: .4; pointer-events: none; }

/* Report: conversation date, duration and how much of the allowed window it used */
.report-timing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e2e8f0);
  font-size: 13px;
  color: var(--txt-secondary, #475569);
}
.report-timing-item { display: inline-flex; align-items: center; gap: 7px; }
.report-timing-item i { color: var(--txt-muted, #94a3b8); font-size: 12px; }
.report-duration-bar {
  flex: 1;
  min-width: 120px;
  height: 6px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.report-duration-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .report-duration-fill { transition: none; } }
.report-duration-fill.full { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.report-duration-cap { font-size: 12px; color: var(--txt-muted, #94a3b8); }


/* A control whose feature an admin switched off. */
.feature-off {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
}


/* Delivery channel picker in the share modal */
.channel-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.channel-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.channel-option:hover { border-color: #cbd5e1; }
.channel-option input { margin-top: 3px; }
.channel-option span { display: flex; flex-direction: column; gap: 2px; }
.channel-option strong { font-size: 13.5px; color: #0f172a; }
.channel-option small { font-size: 12px; color: #64748b; }
.channel-option:has(input:checked) { border-color: #2563eb; background: #f5f9ff; }

.channel-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12.5px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}
.channel-notice.show { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .channel-notice { transition: none; }
}


/* The vendor account: the wait, then either the connect prompt or the picker */
.avatar-account { margin-top: 10px; }
.avatar-connect, .avatar-picker { display: flex; flex-direction: column; gap: 6px; }
.avatar-account .share-name-label { margin-top: 2px; }
.avatar-account a { color: #2563eb; }
.avatar-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0; color: #64748b; font-size: 13px;
}
.avatar-loading i { font-size: 15px; color: #2563eb; }
/* An author `display` beats the browser's own [hidden] rule, so every box that
   sets one needs this companion or the `hidden` attribute does nothing — which
   is exactly why the connect button and the picker used to show together. */
.avatar-loading[hidden],
.avatar-connect[hidden],
.avatar-picker[hidden] { display: none; }