/* MandalaAI Phase 1 — colour tokens from brief §7.2.
   Sidebar navy, light main area, navy/white message bubbles.
   Brand fonts via Google: Tenor Sans / DM Sans / Nunito (May 2026 swap). */

:root {
  --navy: #6E4A2A;
  --navy-active: #573A20;
  --navy-hover: #7D5630;
  --light: #FBF7F0;
  --light-muted: #E8D6BE;
  --bg: #FBF7F0;
  --text: #3A2A1C;
  --text-muted: #8A765F;
  --border: #E4D8C6;
  --border-soft: #EFE7DA;
  --logo-accent: #C29A6B;
  --danger: #B0334A;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(29, 54, 83, 0.18);

  --sidebar-w: 280px;
  --radius: 12px;

  /* Brand fonts — interim Google Fonts substitutes for Magnisa Sans /
     Tenor Sans / TT Chocolates. When the real fonts are licensed, change
     the family name on each line; nothing else needs to move. */
  --font-primary:   'Hanken Grotesk', system-ui, sans-serif;
  --font-heading:   'Fraunces', Georgia, serif;
  --font-secondary: 'Hanken Grotesk', sans-serif;
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
}

input, textarea {
  font: inherit;
}

/* --- Boot splash (visible before React mounts) ----------------------- */

.boot-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--navy);
  color: var(--light);
  gap: 24px;
}

.boot-splash__logo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Image-based logo (boot splash). The asset has the navy backdrop baked
   in so it sits seamlessly on the navy splash. Width matches the wordmark
   feel — height auto-derives from the 1298×420 aspect ratio. */
.boot-splash__logo-img {
  width: min(360px, 70vw);
  height: auto;
  display: block;
}

.boot-splash__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(232, 237, 242, 0.25);
  border-top-color: var(--light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.boot-error {
  max-width: 480px;
  margin-top: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--light);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Logo --------------------------------------------------------------- */

.logo-mandala,
.logo-ai {
  font-family: var(--font-heading);
  font-weight: 400;
}
.logo-mandala { color: var(--navy); }
.logo-ai      { color: var(--logo-accent); }

/* On dark backgrounds (sidebar + boot splash) the wordmark inverts so
   "MANDALA" stays visible. */
.sidebar .logo-mandala,
.boot-splash .logo-mandala { color: var(--light); }
.sidebar .logo-ai,
.boot-splash .logo-ai      { color: var(--logo-accent); }

/* --- Login screen ------------------------------------------------------ */

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--navy);
  padding: 16px;
}

.login__card {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  padding: 40px 32px 32px;
  box-shadow: var(--shadow-lg);
}

.login__logo {
  text-align: center;
  font-size: 30px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

/* Image logo on the login card. The login card itself is white, but the
   logo asset bakes in the navy background — so we wrap it in a navy
   panel that the image fills edge-to-edge for a clean header band. */
.login__logo-wrap {
  margin: -40px -32px 14px;
  background: var(--navy);
  display: flex;
  justify-content: center;
  padding: 22px 0;
  border-radius: 12px 12px 0 0;
}

.login__logo-img {
  width: min(260px, 80%);
  height: auto;
  display: block;
}

.login__tagline {
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.login__field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.login__field input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login__field input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(29, 54, 83, 0.15);
}

.login__error {
  background: #FCE8EC;
  color: var(--danger);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

.login__btn {
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  margin-top: 8px;
  transition: background 0.15s;
}

.login__btn:hover:not(:disabled) { background: var(--navy-hover); }
.login__btn:disabled { opacity: 0.6; cursor: progress; }

/* --- Workspace --------------------------------------------------------- */

.workspace {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* --- Sidebar ----------------------------------------------------------- */

.sidebar {
  /* Width comes from inline style (drag-resizable, persisted to
     localStorage). The CSS variable is the initial paint fallback
     for the brief moment before React's first render applies the
     stored width. */
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--navy);
  color: var(--light);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;     /* anchor for .sidebar__resize */
}

/* Drag-to-resize handle on the right edge. Sits flush with the border;
   widens its hit area slightly on hover so the user can grab it without
   pixel-precise aim. Hidden on mobile (the breakpoint flips the sidebar
   to overlay mode and the handle would conflict with the swipe area). */
.sidebar__resize {
  position: absolute;
  top: 0;
  right: -3px;            /* straddle the border so easier to grab */
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background 0.15s ease-out;
}
.sidebar__resize:hover,
.sidebar--resizing .sidebar__resize {
  background: rgba(123, 195, 245, 0.35);    /* brand mid-blue, semi-transparent */
}
/* While the user is actively dragging, kill text-select hover effects
   across the rest of the sidebar — feels twitchy otherwise. */
.sidebar--resizing { user-select: none; }
.sidebar--resizing * { pointer-events: none; }
.sidebar--resizing .sidebar__resize { pointer-events: auto; }

.sidebar__header {
  padding: 18px 20px 14px;
  font-size: 20px;
  letter-spacing: 2px;
}

/* Image logo in the sidebar header. The sidebar is already navy, so the
   logo's baked-in navy backdrop blends. Width fits the 280px sidebar. */
.sidebar__logo-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

.sidebar__new {
  margin: 4px 16px 12px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--light);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  text-align: left;
  font-weight: 500;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar__new:hover { background: rgba(255, 255, 255, 0.14); }

.sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.sidebar__section-label {
  padding: 12px 12px 6px;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light-muted);
}

.conv {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--light);
  position: relative;
  user-select: none;
}

.conv:hover { background: rgba(255, 255, 255, 0.06); }
.conv--active { background: var(--navy-active); }
.conv--active:hover { background: var(--navy-active); }

.conv__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.conv__title--input {
  flex: 1;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  outline: none;
  width: 100%;
  min-width: 0;
}

.conv__menu {
  background: transparent;
  border: none;
  color: var(--light-muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.conv:hover .conv__menu,
.conv--active .conv__menu { opacity: 1; }

.conv__menu:hover { background: rgba(255, 255, 255, 0.12); }

.conv__menu-popup {
  position: absolute;
  right: 8px;
  top: 100%;
  margin-top: 4px;
  background: #fff;
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 20;
  min-width: 140px;
}

.conv__menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text);
}

.conv__menu-item:hover { background: var(--bg); }
.conv__menu-item--danger { color: var(--danger); }

.sidebar__footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar__user {
  flex: 1;
  min-width: 0;
}

.sidebar__user-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-size: 11px;
  color: var(--light-muted);
  text-transform: capitalize;
}

.sidebar__logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--light);
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  transition: background 0.15s;
}

.sidebar__logout:hover { background: rgba(255, 255, 255, 0.1); }

.sidebar__icon-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--light);
  padding: 6px 8px;
  border-radius: var(--radius);
  font-size: 14px;
  transition: background 0.15s;
  line-height: 1;
}

.sidebar__icon-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* --- Chat area --------------------------------------------------------- */

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-width: 0;
}

.chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: #fff;
  flex-shrink: 0;
}

.chat__menu-btn {
  display: none;
  background: transparent;
  border: none;
  font-size: 20px;
  color: var(--text);
  padding: 4px 8px;
}

.chat__title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 16px;
}

.chat__messages-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.msg { display: flex; }
.msg--user { justify-content: flex-end; }

.msg__bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}

.msg--user .msg__bubble {
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg--assistant .msg__bubble {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}

/* Markdown content inside assistant bubbles */
.msg__bubble p { margin: 0 0 8px; }
.msg__bubble p:last-child { margin-bottom: 0; }
.msg__bubble h1, .msg__bubble h2, .msg__bubble h3 {
  margin: 8px 0 6px;
  line-height: 1.25;
}
.msg__bubble h1 { font-size: 18px; }
.msg__bubble h2 { font-size: 16px; }
.msg__bubble h3 { font-size: 15px; }
.msg__bubble ul, .msg__bubble ol { margin: 0 0 8px; padding-left: 22px; }
.msg__bubble li { margin: 2px 0; }
.msg__bubble code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}
.msg__bubble pre {
  background: #2A3A4F;
  color: #E8EDF2;
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 6px 0;
}
.msg__bubble pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 13px;
}
.msg__bubble a { color: var(--navy); }
.msg--user .msg__bubble a { color: #fff; text-decoration: underline; }
.msg__bubble blockquote {
  border-left: 3px solid var(--border);
  padding-left: 10px;
  color: var(--text-muted);
  margin: 6px 0;
}
.msg__bubble table {
  border-collapse: collapse;
  margin: 6px 0;
}
.msg__bubble th, .msg__bubble td {
  border: 1px solid var(--border-soft);
  padding: 4px 8px;
  font-size: 13px;
}

/* Progress lines (rendered inside an assistant bubble during tool-use loop) */
.progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
}

.progress__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.progress__line--active {
  color: var(--text);
}

.progress__line--err {
  color: var(--danger);
}

.progress__icon {
  font-size: 12px;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}

.progress__summary {
  font-size: 11px;
  opacity: 0.7;
  font-style: italic;
}

/* Typing indicator */
.typing { display: flex; align-items: center; gap: 4px; padding: 4px 6px; }
.typing__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-bounce 1.2s infinite;
}
.typing__dot:nth-child(2) { animation-delay: 0.15s; }
.typing__dot:nth-child(3) { animation-delay: 0.3s; }
/* Live elapsed-time read-out next to the bouncing dots / under the tool
   progress list. Tabular-nums keeps width stable as the digits tick so
   the bubble doesn't jiggle each second. */
.typing__elapsed {
  margin-left: 8px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-secondary);
}

/* Per-user preference toggle row inside the Settings modal. */
.pref-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  cursor: pointer;
}
.pref-row input { cursor: pointer; }

/* Rotating thinking-phrase next to the dots / above the elapsed time.
   Italic for a quiet "side note" feel; crossfades between phrases. */
.tp-phrase {
  margin-left: 10px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  opacity: 0;
  transition: opacity 200ms ease-out;
  min-width: 12ch;
  display: inline-block;
}
.tp-phrase.is-visible { opacity: 0.85; }
.tp-phrase--fallback { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .tp-phrase { transition: none; opacity: 0.85; }
}
.progress__elapsed-row {
  margin-top: 6px;
  padding-left: 22px;     /* line up under the progress text, past the icon */
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-secondary);
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Composer */
.composer {
  padding: 12px 24px 18px;
  flex-shrink: 0;
}
.composer__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px 8px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer__inner:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(29, 54, 83, 0.12);
}

.composer__textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  padding: 6px 0;
  max-height: 200px;
  font-family: inherit;
  line-height: 1.45;
}

.composer__send {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  align-self: flex-end;
  transition: background 0.15s, opacity 0.15s;
}
.composer__send:hover:not(:disabled) { background: var(--navy-hover); }
.composer__send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Stop variant — shown in place of Send while a reply is streaming.
   Same shape so the composer doesn't jump width when it swaps; muted
   grey rather than red so it reads as "cancel" not "danger" (the user
   isn't doing something dangerous, just changing their mind). */
.composer__send--stop {
  background: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.composer__send--stop:hover { background: var(--text); }
.composer__stop-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #fff;
  flex-shrink: 0;
}

/* Attach button — sits left of the textarea inside .composer__inner.
   Same visual weight as the send chevron so it doesn't shout. */
.composer__attach {
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 10px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.composer__attach:hover:not(:disabled) {
  background: var(--light-grey, #f3f4f6);
  color: var(--text);
  border-color: var(--navy);
}
.composer__attach:disabled { opacity: 0.4; cursor: not-allowed; }

/* Staged attachments strip — sits ABOVE .composer__inner with the
   same max-width so it lines up. */
.composer__atts {
  max-width: 760px;
  margin: 0 auto 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Attachment chip — used in two places:
     .composer__atts   → staged before send (with remove X)
     .msg__atts        → committed under a sent message bubble (download link)
   Visual is the same; the difference is the contained controls. */
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 6px 4px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  max-width: 280px;
  text-decoration: none;
}
.att-chip--uploading {
  opacity: 0.7;
  background: var(--light-grey, #f3f4f6);
}
.att-chip__icon { font-size: 12px; flex-shrink: 0; color: var(--text); }
/* Explicit dark colour so when the chip sits inside the navy user bubble
   (which sets color: #fff on its content), the filename stays visible
   on the white chip rather than inheriting white-on-white. */
.att-chip__name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.att-chip__size {
  color: var(--text-muted);
  font-size: 10px;
  font-family: var(--font-secondary);
  flex-shrink: 0;
}
.att-chip__progress {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  font-style: italic;
}
.att-chip__warn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #92400E;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}
.att-chip__remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 10px;
}
.att-chip__remove:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}
.att-chip__remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* Attachment chips on already-sent user messages — sit at the bottom
   of the bubble. Slightly more compact + click-to-download. */
.msg__atts {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Chip on a sent message — split into a click-to-download body and a
   caret that opens a dropdown menu with extra actions (e.g. Add to
   project). The two child buttons sit side-by-side inside the chip
   pill; the chip itself is a <span> now (not <button>) since it
   contains two interactive children. */
.att-chip--msg {
  cursor: default;
  padding: 0;
  font-family: inherit;
  position: relative;
  background: #fff;
  overflow: visible;
}
.att-chip__body {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: transparent;
  border: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.att-chip__body:hover:not(:disabled) {
  background: var(--light-grey, #f3f4f6);
}
.att-chip__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  font-size: 11px;
  border-left: 1px solid var(--border-soft);
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.att-chip__caret:hover:not(:disabled) {
  background: var(--light-grey, #f3f4f6);
  color: var(--text);
}
.att-chip__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 220px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.att-chip__menu-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.att-chip__menu-item:hover {
  background: var(--light-grey, #f3f4f6);
}
.att-chip__menu-item--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  font-style: italic;
}
.att-chip__menu-item--disabled:hover { background: transparent; }

.composer__hint {
  max-width: 760px;
  margin: 6px auto 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* Empty state */
.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}

.empty__logo {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.empty__sub {
  font-size: 14px;
  max-width: 360px;
  line-height: 1.5;
}

/* Inline notice (e.g. AI service down) */
.notice {
  max-width: 760px;
  margin: 8px auto;
  padding: 8px 14px;
  background: #FCE8EC;
  color: var(--danger);
  border-radius: var(--radius);
  font-size: 13px;
}

/* --- Sample questions (empty-state grid) ----------------------------- */

.samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  max-width: 760px;
  width: 100%;
  margin: 16px auto 8px;
}

.samples__card {
  display: flex;
  gap: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
  font: inherit;
  color: var(--text);
}

.samples__card:hover {
  border-color: var(--navy);
  box-shadow: 0 2px 8px rgba(29, 54, 83, 0.10);
}

.samples__card:active { transform: translateY(1px); }

.samples__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
}

.samples__body {
  min-width: 0;
}

.samples__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.samples__q {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty__newchat {
  margin-top: 18px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
}

.empty__newchat:hover {
  background: #fff;
  color: var(--text);
}

/* --- Generic centered modal (Settings, etc) -------------------------- */

.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 40;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 48px);
  background: #fff;
  z-index: 50;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.modal__title {
  font-size: 16px;
  font-weight: 700;
}

.modal__sub {
  font-size: 12px;
  color: var(--text-muted);
}

.modal__close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px;
}

.modal__close:hover { background: var(--bg); }

.modal__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.modal__section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

.modal__hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.modal__hint--err { color: var(--danger); }

.modal__success {
  background: #E5F4EA;
  color: #1E6B3E;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

.modal__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* --- Sidebar section headers (Projects / Conversations) ------------- */

.sidebar__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Right padding owns the gap between the rightmost + button and the
     sidebar edge. Buttons + groups carry no margin-right of their own
     so single + and the rightmost + in a group land at the same x. */
  padding: 0 12px 0 4px;
}

.sidebar__section-label--spaced {
  margin-top: 14px;
}

/* Mirror of --spaced for the row containing a + button. */
.sidebar__section-head--spaced {
  margin-top: 14px;
}

.sidebar__section-add {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--light-muted);
  border-radius: var(--radius);
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* No per-button margin — spacing lives on .sidebar__section-head
     (padding-right) so groups + singles line up. */
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sidebar__section-add:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--light);
  border-color: rgba(255, 255, 255, 0.3);
}

.sidebar__hint {
  padding: 4px 12px 8px;
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--light-muted);
  line-height: 1.4;
}

/* --- Claude Archive section ---------------------------------------- */

/* Clickable section header (used by the Claude Archive collapser).
   Visual feedback: subtle hover background, pointer cursor, the
   chevron lives inside the label. */
.sidebar__section-head--clickable {
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius);
  transition: background 0.12s;
}
.sidebar__section-head--clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}
.sidebar__section-head--clickable:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.2);
  outline-offset: -2px;
}

/* Inline chevron next to a section-label inside a clickable head. */
.sidebar__section-chevron {
  display: inline-block;
  width: 0.9em;
  margin-right: 4px;
  text-align: center;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Sub-grouping label inside the Claude Archive section (e.g. "Chats",
   "Projects"). Smaller, slightly indented, lower contrast than a top-
   level section label. */
.sidebar__sublabel {
  padding: 6px 12px 4px 18px;
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light-muted);
  opacity: 0.75;
  margin-top: 6px;
}

/* Project row in the sidebar — looks like a conv row but with an icon */
.proj .proj__icon {
  color: var(--logo-accent);
  font-size: 12px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

/* Two-line conv item (title + "in <project>") */
.conv__title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.conv__project {
  font-family: var(--font-secondary);
  font-size: 11px;
  color: var(--light-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Chat header: project chip linking back to project view --------- */

.chat__title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat__project-link {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-family: var(--font-secondary);
  align-self: flex-start;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chat__project-link:hover {
  background: var(--bg);
  color: var(--navy);
  border-color: var(--navy);
}

/* --- Project detail view (replaces chat area when viewing a project) */

.project-view .chat__header { gap: 10px; }

.proj-view__archive {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.proj-view__archive:hover {
  background: #FCE8EC;
  color: var(--danger);
  border-color: var(--danger);
}

.proj-view__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.proj-view__section {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 18px 20px;
}

.proj-view__section--compact {
  padding: 10px 14px;
  background: transparent;
  border: none;
  text-align: center;
}

.proj-view__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}

.proj-view__h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--navy);
}

.proj-view__saved {
  font-size: 12px;
  color: #1E6B3E;
  font-family: var(--font-secondary);
}

.proj-view__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.proj-view__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.proj-view__label-hint {
  font-weight: 400;
  font-family: var(--font-secondary);
  font-size: 11.5px;
  margin-left: 6px;
}

.proj-view__input,
.proj-view__textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}

.proj-view__input:focus,
.proj-view__textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(29, 54, 83, 0.12);
}

.proj-view__textarea {
  resize: vertical;
  min-height: 70px;
}

.proj-view__textarea--mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}

.proj-view__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.proj-view__newconv {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.proj-view__newconv:hover {
  background: var(--navy);
  color: #fff;
}

.proj-view__empty {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  padding: 10px 0;
}

.proj-view__convs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proj-view__conv {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 4px;
  transition: border-color 0.15s, background 0.15s;
}

.proj-view__conv:hover {
  border-color: var(--navy);
  background: var(--bg);
}

.proj-view__conv-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 6px 8px;
  text-align: left;
  border-radius: var(--radius);
  color: var(--text);
  min-width: 0;
}

.proj-view__conv-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proj-view__conv-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  flex-shrink: 0;
}

.proj-view__conv-remove {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius);
  font-size: 11.5px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.proj-view__conv-remove:hover {
  background: #FCE8EC;
  color: var(--danger);
  border-color: var(--danger);
}

.proj-view__attach-toggle {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  width: 100%;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.proj-view__attach-toggle:hover {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
}

/* --- Wider modal (for Project create) -------------------------------- */

.modal--wide {
  width: min(560px, calc(100vw - 24px));
}

/* The create-project form uses login__field labels but its textareas
   are tall — give them some breathing room. */
.modal--wide textarea { resize: vertical; }

/* Reuse editor__cancel styling for the Cancel button in our modals,
   in case knowledge admin's css doesn't ship with the static dir. */
.editor__cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  transition: background 0.15s;
}

.editor__cancel:hover { background: var(--bg); }
.editor__cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Force-change-password modal (invite onboarding) ----------------- */

/* Opaque navy overlay so the user can't squint past it to use the app
   underneath. Above .modal__backdrop (z=40) and the standard .modal
   (z=50) so even if a workspace modal is open behind, this wins. */
.force-pw__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.force-pw__card {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.force-pw__head { display: flex; flex-direction: column; gap: 6px; }

.force-pw__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
}

.force-pw__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.force-pw__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.force-pw__signout {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.force-pw__signout:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Shared chats: sidebar icon + message authorship labels ---------- */

.conv__shared-icon {
  font-size: 10px;
  opacity: 0.8;
  margin-right: 4px;
  flex-shrink: 0;
}

/* Owner badge — small star next to chats/projects YOU own that are
   shared with others. Distinguishes "your shared work" from
   "things shared with you". */
.conv__owner-badge {
  font-size: 11px;
  color: #F5C518;            /* gold, but muted to avoid distracting */
  margin-right: 4px;
  flex-shrink: 0;
  line-height: 1;
}

/* Unread dot — small red circle in the row, like Apple Mail. Position
   between the title block and the ⋯ button so it sits with the other
   per-row icons. */
.conv__unread {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #DC2626;
  margin-right: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

/* Sidebar divider between Shared and Private sections. */
.sidebar__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 14px 8px 6px;
}

/* Stack the author label above the bubble. We change the message
   container to flex-column so the label aligns with the bubble's
   left/right edge automatically. */
.msg__inner {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  min-width: 0;
}
.msg--user .msg__inner { align-items: flex-end; }
.msg--assistant .msg__inner { align-items: flex-start; }

.msg__author {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
  padding: 0 6px;
  font-family: var(--font-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.msg__mandala {
  font-weight: 600;
  color: var(--navy);
}

/* Bubble loses its own max-width now that .msg__inner caps it. */
.msg__inner .msg__bubble { max-width: 100%; }

/* Read-only banner where the composer used to be. */
.composer__readonly {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 18px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

/* --- Share modal styles --------------------------------------------- */

.share-readonly {
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 10px 14px;
  border-radius: 8px;
}

.share-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.share-toggle {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  align-self: flex-start;
}
.share-toggle__btn {
  background: transparent;
  border: none;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.share-toggle__btn.on {
  background: var(--navy);
  color: #fff;
}

.share-select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  outline: none;
}
.share-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(29, 54, 83, 0.12);
}

.share-hint {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  line-height: 1.4;
}

.share-canpost {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}

.share-actions {
  display: flex;
  justify-content: flex-end;
}

.share-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.share-list__target {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.share-list__email {
  margin-left: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.share-list__meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  white-space: nowrap;
}
.share-list__revoke {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
}
.share-list__revoke:hover {
  background: #FCE8EC;
  border-color: var(--danger);
}

/* --- Chat folders (Private Chats organisation) --------------------- */

/* Multiple + buttons in one section head (chat + folder). No
   margin-right — section-head's padding-right anchors the right edge. */
.sidebar__section-adds {
  display: inline-flex;
  gap: 4px;
}

.folder {
  display: flex;
  flex-direction: column;
  margin: 2px 0;
}

.folder__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--light);
  user-select: none;
  position: relative;
}
.folder__head:hover { background: rgba(255, 255, 255, 0.06); }

.folder__caret {
  font-size: 10px;
  color: var(--light-muted);
  width: 10px;
  flex-shrink: 0;
  text-align: center;
}

.folder__icon { font-size: 14px; flex-shrink: 0; }

/* Folder name is INTENTIONALLY larger + heavier than the items inside
   (conv__title = 13px regular). The folder acts as a visual section
   heading for its contents. */
.folder__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder__count {
  font-size: 11px;
  color: var(--light-muted);
  margin-right: 4px;
  flex-shrink: 0;
}

/* Show ⋯ on folder hover only — same pattern as conv rows. */
.folder__head .conv__menu { opacity: 0; }
.folder__head:hover .conv__menu { opacity: 1; }

.folder__body {
  padding-left: 14px;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
  margin-left: 18px;
}

.folder__empty {
  font-size: 11px;
  color: var(--light-muted);
  font-family: var(--font-secondary);
  padding: 6px 12px;
  font-style: italic;
}

/* Submenu items for Move-to-folder list inside conv menu. */
.conv__menu-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 6px 10px 2px;
  font-family: var(--font-secondary);
}
.conv__menu-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 0;
}
.conv__menu-item--secondary {
  color: var(--text-muted);
  font-style: italic;
}
.conv__menu-item.on {
  background: #EFF6FF;
  color: #1D4ED8;
  font-weight: 600;
}

/* --- Sidebar tour button (?) --------------------------------------- */
/* Same shape as the settings ⚙ button — sits before it in the footer. */
.sidebar__tour-btn {
  font-weight: 700;
  font-family: var(--font-heading);
}

/* --- Shepherd.js brand theming ------------------------------------- */
/* Overrides Shepherd's base CSS to match Mandala colours + fonts.
   Keep selectors specific so we don't accidentally restyle every
   button in the app. */

.shepherd-element {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(29, 54, 83, 0.25);
  max-width: 340px;
  background: #fff;
}

.shepherd-header {
  background-color: var(--navy) !important;
  border-radius: 8px 8px 0 0;
  padding: 14px 18px 12px;
}

.shepherd-title {
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
}

.shepherd-cancel-icon {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 18px;
  transition: color 0.15s;
}
.shepherd-cancel-icon:hover {
  color: #fff !important;
}

.shepherd-text {
  color: var(--text) !important;
  font-family: var(--font-primary) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  padding: 14px 18px !important;
}

.shepherd-footer {
  padding: 8px 16px 14px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.shepherd-button {
  background-color: var(--navy) !important;
  color: #fff !important;
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 7px 14px !important;
  border: none !important;
  cursor: pointer;
  transition: background 0.15s;
}
.shepherd-button:hover {
  background-color: var(--navy-hover) !important;
}

.shepherd-button.shepherd-button-secondary {
  background-color: transparent !important;
  color: var(--text-muted) !important;
  padding: 7px 10px !important;
}
.shepherd-button.shepherd-button-secondary:hover {
  background-color: transparent !important;
  color: var(--navy) !important;
}

/* Spotlight overlay tint — semi-transparent navy. */
.shepherd-modal-overlay-container {
  fill: rgba(29, 54, 83, 0.45);
}

/* Bring the spotlight forward subtly so the focused element pops. */
.shepherd-element[data-popper-placement] {
  z-index: 9999;
}

/* --- Composer: send mode chevron + note styling -------------------- */

/* Wrapper around Send + chevron so the popup positions absolutely. */
.composer__send-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

/* When the chevron is present, soften the Send button's right edge. */
.composer__send-group .composer__send {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0;
}

.composer__mode-chevron {
  background: var(--navy);
  color: #fff;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0 10px 10px 0;
  padding: 0 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.composer__mode-chevron:hover:not(:disabled) { background: var(--navy-hover); }
.composer__mode-chevron:disabled { opacity: 0.5; cursor: not-allowed; }

.composer__mode-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 30;
  min-width: 280px;
}

.composer__mode-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.composer__mode-item:hover { background: var(--bg); }
.composer__mode-item.on { background: #EFF6FF; }
.composer__mode-item strong { font-size: 13px; }
.composer__mode-item span { font-size: 11px; color: var(--text-muted); font-family: var(--font-secondary); }

/* Note-mode tinted composer — soft amber border so the mode is obvious
   when you're typing. The Send button label flips to "Send note". */
.composer__inner--note {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12) !important;
  background: #FFFBEB;
}
.composer__send--note {
  background: #92400E !important;
}
.composer__send--note:hover:not(:disabled) {
  background: #78350F !important;
}

/* Note-style message bubble: muted amber tint + dashed border so it
   reads as side-channel, not a primary message. Applies to user-side
   notes in shared chats. */
.msg--note .msg__bubble {
  background: #FFFBEB !important;
  color: #78350F !important;
  border: 1px dashed #F59E0B !important;
  border-bottom-right-radius: 14px !important;  /* drop the "tail" — feels less direct */
}
.msg--note.msg--user .msg__bubble { border-bottom-right-radius: 14px !important; }

.msg__note-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #92400E;
  background: #FEF3C7;
  padding: 1px 7px;
  border-radius: 999px;
}

/* --- Project attachments table ------------------------------------- */

.proj-att-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.proj-att-tbl th {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 10px; text-align: left;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.proj-att-tbl th.r { text-align: right; }
.proj-att-tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.proj-att-tbl td.r { text-align: right; }
.proj-att-tbl tr:last-child td { border-bottom: none; }

.proj-att__name {
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.proj-att__name:hover { text-decoration: underline; }
.proj-att__meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  font-family: var(--font-secondary);
}

.proj-att__del {
  background: none;
  border: 1px solid transparent;
  color: var(--danger);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.proj-att__del:hover { background: #FCE8EC; border-color: var(--danger); }
.proj-att__del:disabled { opacity: 0.4; cursor: not-allowed; }

/* In-prompt toggle (same shape as Core's knowledge attachments). */
.proj-att__tog {
  width: 36px; height: 20px;
  border-radius: 10px;
  background: #d1d5db;
  position: relative;
  padding: 0; border: none;
  cursor: pointer;
}
.proj-att__tog.on { background: #1D9E75; }
.proj-att__tog:disabled { opacity: 0.5; cursor: not-allowed; }
.proj-att__togk {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute; top: 2px; left: 2px;
  transition: left 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.proj-att__tog.on .proj-att__togk { left: 18px; }

/* Badges for extracted/no text/failed (same colour kinds as bdg). */
.proj-att-tbl .bdg { font-size: 10px; padding: 1px 7px; border-radius: 999px; font-family: var(--font-secondary); font-weight: 600; }
.proj-att-tbl .bgrn { background: #D1FAE5; color: #065F46; }
.proj-att-tbl .bgry { background: #F3F4F6; color: var(--text-muted); }
.proj-att-tbl .bred { background: #FEE2E2; color: #991B1B; }

/* --- Shared-flag pill in the chat header ---------------------------- */

.shflag-wrap {
  position: relative;
  flex-shrink: 0;
}

.shflag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 13px;
  border-radius: 999px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  /* Coloured background that reads as a flag, not a button. */
  background: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}
.shflag:hover { background: #BFDBFE; }

/* Owners get a slightly more "yours" tint (the gold accent we used
   for the sidebar owner star), recipients get the blue collab one. */
.shflag--owner {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FDE68A;
}
.shflag--owner:hover { background: #FDE68A; }

.shflag__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.shflag__count { opacity: 0.75; font-weight: 500; }
.shflag__caret { font-size: 13px; opacity: 0.65; margin-left: 3px; }

.shflag__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  width: 280px;
  padding: 12px 14px;
  font-family: var(--font-primary);
  color: var(--text);
  display: flex; flex-direction: column; gap: 10px;
}

.shflag__head { display: flex; flex-direction: column; gap: 3px; }

.shflag__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-family: var(--font-secondary);
}

.shflag__value {
  font-size: 13px;
  font-weight: 600;
}

.shflag__hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.shflag__hint--err { color: var(--danger); }

.shflag__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.shflag__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--bg);
  font-size: 12px;
}

.shflag__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shflag__perm {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--font-secondary);
  flex-shrink: 0;
}

.shflag__actions {
  display: flex; justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}

.shflag__manage {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.shflag__manage:hover { background: var(--navy-hover); }

/* --- Mobile ----------------------------------------------------------- */

@media (max-width: 720px) {
  .sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 84% !important;     /* override inline width from desktop drag */
    max-width: 320px;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    box-shadow: var(--shadow-lg);
  }
  .sidebar--open { transform: translateX(0); }
  /* Resize handle would conflict with edge-swipe / overlay close. */
  .sidebar__resize { display: none; }

  .sidebar__backdrop {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 25;
  }
  .sidebar--open + .sidebar__backdrop { display: block; }

  .chat__menu-btn { display: inline-flex; }

  .composer { padding: 10px 12px 14px; }
  .chat__messages-inner { padding: 0 14px; }

  /* Knowledge admin on mobile */
  .ks-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .editor__split { grid-template-columns: 1fr; }
  .editor__preview { display: none; }
  .editor__split--no-preview .editor__preview { display: none; }
  .knowledge__body { padding: 14px; }

  /* Samples grid: single column on phones */
  .samples { grid-template-columns: 1fr; }

  /* Attachment rows wrap on phones */
  .att__row {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }
  .att__toggle, .att__row > .ks-row__btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* Modal: full-width on phones */
  .modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
  }
}

/* ===== Artifacts (Step 8) — provisional styling, re-skinned in Step 10 ===== */
.artifact, .codeblock {
  border: 1px solid rgba(58,42,28,.14);
  border-radius: 10px;
  overflow: hidden;
  margin: .6rem 0;
  background: #fff;
}
.artifact__bar, .codeblock__bar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .35rem .6rem; background: #f3efe8;
  border-bottom: 1px solid rgba(58,42,28,.10); font-size: .78rem;
}
.artifact__label, .codeblock__lang { font-weight: 600; color: #6e4a2a; letter-spacing: .02em; }
.artifact__actions { display: flex; gap: .35rem; }
.artifact__btn {
  border: 1px solid rgba(58,42,28,.18); background: #fff; border-radius: 6px;
  padding: .18rem .55rem; font-size: .75rem; cursor: pointer; color: #3a2a1c;
}
.artifact__btn:hover { background: #efe7da; }
.artifact__frame { width: 100%; height: 420px; border: 0; background: #fff; display: block; }
.artifact--diagram { padding: .8rem; overflow: auto; text-align: center; }
.artifact--diagram svg { max-width: 100%; height: auto; }
.codeblock--bare { border: 0; margin: 0; border-radius: 0; }
.codeblock pre { margin: 0; padding: .7rem .8rem; overflow: auto; font-size: .82rem; line-height: 1.45; }
.codeblock pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: none; padding: 0; }

/* ===== Voice speak button (Step 9) ===== */
.msg__actions { margin-top: .4rem; }
.speak-btn {
  border: 1px solid rgba(58,42,28,.18); background: #fff; border-radius: 14px;
  padding: .12rem .6rem; font-size: .74rem; cursor: pointer; color: #6e4a2a;
}
.speak-btn:hover { background: #efe7da; }


/* ===== Claw'd re-skin (Step 10a) ===== */
:root {
  --champagne: #C29A6B; --gold: #E0A82E; --cream: #F4ECE0; --sand: #ECE0CE;
  --ghost: #D8D4F0; --ghost-deep: #8C86C4; --espresso: #3A2A1C; --sable: #6E4A2A;
}
.sidebar { background: var(--cream); }
.conv--active, .conv--active:hover { box-shadow: inset 3px 0 0 var(--gold); }
.logo-clawd { font-family: var(--font-heading); font-weight: 600; color: var(--sable); letter-spacing: .01em; }
.empty__logo .logo-clawd { font-size: 2.4rem; }
.chat__title { font-family: var(--font-heading); }


/* ===== Claw'd re-skin 10a fix: readable cream sidebar ===== */
.sidebar, .sidebar * { color: var(--espresso); }
.sidebar__section-label { color: var(--sable); }
.sidebar__hint, .sidebar__user-role { color: var(--text-muted); }
.conv--active, .conv--active * { color: #FBF7F0; }


/* ===== Ghost-cat bubbles (Step 10b) ===== */
blockquote.ghostcat {
  background: var(--ghost);
  border-left: 3px solid var(--ghost-deep);
  border-radius: 12px;
  padding: .55rem .85rem;
  margin: .5rem 0;
  color: var(--espresso);
  font-style: normal;
}
blockquote.ghostcat p { margin: 0; }
.ghostcat__avatar {
  width: 30px; height: 30px; vertical-align: middle;
  margin-right: .35rem; margin-bottom: .15rem;
}
blockquote.ghostcat strong { color: var(--ghost-deep); }


/* ===== Superadmin console (Step 10d) ===== */
.admin { position: fixed; inset: 0; z-index: 60; background: var(--parchment, #FBF7F0); display: flex; flex-direction: column; }
.admin__bar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--cream); border-bottom: 1px solid var(--border); }
.admin__title { font-family: var(--font-heading); font-weight: 600; color: var(--sable); }
.admin__tabs { display: flex; gap: .4rem; }
.admin__tab { border: 1px solid var(--border); background: #fff; border-radius: 14px; padding: .2rem .8rem; cursor: pointer; color: var(--espresso); }
.admin__tab.on { background: var(--sable); color: #FBF7F0; border-color: var(--sable); }
.admin__usage { margin-left: auto; color: var(--text-muted); font-size: .8rem; }
.admin__close { border: 1px solid var(--border); background: #fff; border-radius: 14px; padding: .2rem .8rem; cursor: pointer; color: var(--espresso); }
.admin__body { flex: 1; overflow: auto; padding: 1rem; }
.admin__alert { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .6rem; background: #fff; }
.admin__alert--crisis { border-left: 4px solid #B0334A; }
.admin__alert--concern { border-left: 4px solid var(--gold); }
.admin__alert--watch { border-left: 4px solid var(--ghost-deep); }
.admin__alert-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.admin__pill { font-size: .7rem; background: var(--sand); border-radius: 10px; padding: .05rem .5rem; color: var(--sable); }
.admin__pill--sh { background: #F6D5DC; color: #B0334A; }
.admin__when { margin-left: auto; color: var(--text-muted); font-size: .75rem; }
.admin__alert-why { margin: .3rem 0; color: var(--espresso); }
.admin__alert-snippet { color: var(--text-muted); font-style: italic; font-size: .85rem; }
.admin__cols { display: grid; grid-template-columns: 220px 280px 1fr; gap: 1rem; height: 100%; }
.admin__col { border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: auto; padding: .4rem; }
.admin__col--read { padding: 1rem; }
.admin__col-head { font-weight: 600; color: var(--sable); padding: .3rem .4rem; position: sticky; top: 0; background: #fff; }
.admin__row { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .4rem; border-radius: 8px; cursor: pointer; color: var(--espresso); }
.admin__row:hover { background: var(--cream); }
.admin__row.on { background: var(--sand); }
.admin__muted { color: var(--text-muted); font-size: .78rem; }
.admin__empty { color: var(--text-muted); padding: 1rem; }

/* Login: cream logo header so the (dark) pawprint logo is visible */
.login__logo-wrap { background: var(--cream) !important; }


/* ===== Voice bar (Butler-style) ===== */
.voicebar { display: flex; align-items: center; gap: .75rem; padding: .2rem .2rem .55rem; }
.voicebar__btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border); background: #fff; border-radius: 20px; padding: .3rem .9rem; cursor: pointer; color: var(--sable); font-size: .85rem; }
.voicebar__btn:hover { background: var(--cream); }
.voicebar__btn.on { background: var(--sable); color: #FBF7F0; border-color: var(--sable); }
.voicebar__btn.rec { background: #B0334A; color: #fff; border-color: #B0334A; animation: voicepulse 1.2s infinite; }
@keyframes voicepulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.voicebar__sep { width: 1px; align-self: stretch; background: var(--border); }


/* Boot splash: cream so the dark pawprint logo shows (was navy/sable) */
.boot-splash { background: var(--cream); }
.boot-splash__spinner { border-color: rgba(58,42,28,.2); border-top-color: var(--sable); }


/* ===== Superadmin editor forms ===== */
.admin__savedmsg { color: #2e7d32; font-size: .8rem; margin-left: .5rem; }
.admin__form { max-width: 820px; }
.admin__hint { color: var(--text-muted); font-size: .85rem; margin: 0 0 .8rem; }
.admin__field { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.admin__field label { font-weight: 600; color: var(--sable); font-size: .85rem; }
.admin__field textarea { min-height: 110px; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; resize: vertical; background: #fff; color: var(--espresso); }
.admin__field select { padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--espresso); width: 260px; }
.admin__save { background: var(--sable); color: #FBF7F0; border: 0; border-radius: 18px; padding: .4rem 1.1rem; cursor: pointer; font-weight: 600; }
.admin__save:hover { background: #573a20; }
.admin__pron-head, .admin__pron-row { display: grid; grid-template-columns: 1fr 1fr 36px; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.admin__pron-head { color: var(--text-muted); font-size: .78rem; }
.admin__pron-row input { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; color: var(--espresso); }
.admin__pron-del { border: 1px solid var(--border); background: #fff; border-radius: 8px; cursor: pointer; color: #B0334A; }
.admin__pron-actions { display: flex; gap: .6rem; margin-top: .6rem; }
.admin__pron-add { border: 1px dashed var(--border); background: #fff; border-radius: 18px; padding: .4rem 1rem; cursor: pointer; color: var(--sable); }