/*
 * LTG Peak palette, taken from the logo: black, white, royal blue.
 *
 * Dark theme, but the logo's own relationship is kept - blue is the ONE
 * accent and it never competes with a second one. The A in the wordmark is
 * a blue peak, which is the mountain motif; it is drawn as an SVG rather
 * than a letter so it stays sharp and matches the logo's geometry.
 *
 * The blue is lifted from the logo's #1668e3 to #2f7bff for anything
 * sitting on near-black. The original is correct on white and muddy on
 * black - contrast against the background is what decides which, and both
 * are kept so light surfaces can use the true one.
 */
:root {
  color-scheme: dark;

  --black: #07090c;      /* the page */
  --panel: #0d1219;      /* sidebar, raised surfaces */
  --panel2: #141c26;     /* hover, selected */
  --line: #1d2733;

  --white: #ffffff;
  --text: #e9eef4;
  --mute: #8b96a5;

  --blue: #2f7bff;       /* the accent, lifted for dark backgrounds */
  --blue-deep: #1668e3;  /* the logo's own blue, for white surfaces */
  --blue-soft: rgba(47, 123, 255, 0.13);

  --warn: #e0a03a;       /* reconnecting only - never decorative */

  --radius: 10px;
  --sidebar: 262px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------- sign in */

#signin {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
.mark {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin: 0 0 10px;
  display: inline-flex;
  align-items: baseline;
  color: var(--white);
}
.mark .peak { width: 0.6em; height: 0.7em; margin: 0 0.1em 0 0.04em; align-self: center; }
.mark .peak path { fill: var(--blue); }
/* The logo's line, kept verbatim - blue on the two words it emphasises. */
.tagline { margin: 0 0 30px; font-size: 0.74rem; letter-spacing: 0.16em; color: var(--mute); }
.tagline b { color: var(--blue); font-weight: 600; }
.tag { margin: 0 0 28px; color: var(--mute); font-size: 0.9rem; }
.primary {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 12px 24px;
}
.primary:hover { background: #4a8dff; }
.note { margin-top: 22px; color: var(--mute); font-size: 0.82rem; max-width: 34ch; }

/* ------------------------------------------------------------ shell */

#app { height: 100dvh; display: grid; grid-template-columns: var(--sidebar) 1fr; }

/* ---------------------------------------------------------- sidebar */

#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.brand {
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 9px;
}

/* The wordmark. Wide tracking and the blue peak, as in the logo. */
.wordmark {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.19em;
  display: inline-flex;
  align-items: baseline;
  color: var(--white);
}
.wordmark .peak {
  width: 0.62em;
  height: 0.72em;
  margin: 0 0.13em 0 0.05em;
  align-self: center;
  flex: none;
}
.wordmark .peak path { fill: var(--blue); }

.dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #4d5a50; margin-left: auto; flex: none;
  transition: background 0.3s;
}
.dot.live { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.dot.away { background: var(--warn); }

.chanlist {
  width: 230px;
  flex: none;
  overflow-y: auto;
  padding: 8px;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.grouphead {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mute);
  padding: 12px 10px 6px;
}

.chan {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  padding: 9px 10px;
  border-radius: 9px;
  line-height: 1.25;
}
.chan:hover { background: var(--panel2); }
.chan[aria-current="true"] { background: var(--panel2); }
.chan[aria-current="true"] .nm { color: var(--white); font-weight: 600; }
.chan .ic { width: 20px; text-align: center; flex: none; font-size: 1rem; }
.chan .nm {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chan .swatch {
  width: 3px; align-self: stretch; border-radius: 2px; flex: none;
  background: var(--accent, transparent);
}
.badge {
  flex: none;
  background: var(--blue);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 19px;
  text-align: center;
  border-radius: 999px;
  padding: 1px 6px;
}

.whoami {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.whoami img { width: 26px; height: 26px; border-radius: 999px; background: var(--line); }
.whoami .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkish {
  background: none; border: 0; color: var(--mute);
  font-size: 0.78rem; padding: 4px;
}
.linkish:hover { color: var(--text); }

/* ------------------------------------------------------------- main */

#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar {
  border-bottom: 1px solid var(--line);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 53px;
}
.topbar h2 { margin: 0; font-size: 0.98rem; font-weight: 650; }
.topbar .sub { color: var(--mute); font-size: 0.8rem; }
.back { display: none; background: none; border: 0; color: var(--text); padding: 4px 8px 4px 0; }

#banner {
  background: #2a2113;
  color: #f0d5a2;
  font-size: 0.82rem;
  padding: 7px 18px;
  border-bottom: 1px solid #3b2f19;
}

#messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.more {
  align-self: center;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--mute);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 0.78rem;
  margin-bottom: 12px;
}

.daysep {
  text-align: center;
  color: var(--mute);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0 8px;
}

.msg { display: flex; gap: 10px; padding: 3px 0; }
.msg.grouped { padding-top: 0; }
.msg .av {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  background: var(--line);
  display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 700; color: var(--white);
}
.msg.grouped .av { visibility: hidden; height: 0; }
.msg .bd { min-width: 0; flex: 1; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.msg .who { font-weight: 650; font-size: 0.88rem; color: var(--white); }
.msg .when { color: var(--mute); font-size: 0.7rem; }
.msg .txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.pending { opacity: 0.55; }
.msg.failed .txt { color: #ff6b5c; }
.msg .edited { color: var(--mute); font-size: 0.7rem; margin-left: 5px; }
.msg .deleted { color: var(--mute); font-style: italic; }

.empty { margin: auto; color: var(--mute); text-align: center; font-size: 0.9rem; }

/* -------------------------------------------------------- composer */

#composer {
  border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
#composer textarea {
  flex: 1;
  resize: none;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 10px 12px;
  font: inherit;
  max-height: 140px;
  min-height: 42px;
}
#composer textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
#send {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--white);
  font-weight: 650;
  border-radius: var(--radius);
  padding: 10px 18px;
  height: 42px;
}
#send:disabled { opacity: 0.4; cursor: default; }

/* ----------------------------------------------------------- mobile */

@media (max-width: 767px) {
  /*
   * TWO separate levels on a phone, and they are not the same thing.
   *
   *   .navopen   the dashboard's navigation, instead of the content
   *   .showlist  INSIDE chat: the channel list, instead of the conversation
   *
   * An earlier version used one class for both, which was fine while the
   * sidebar WAS the channel list. Once chat became one tool among five, that
   * single class meant opening the nav and going back to the channel list were
   * the same action - so the nav covered the whole screen and nothing else
   * could be reached.
   */
  #app { grid-template-columns: 1fr; }
  #sidebar { display: none; }
  body.navopen #sidebar { display: flex; }
  body.navopen #main { display: none; }
  .back { display: block; }
  #messages { padding: 14px; }
  #composer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
}

/* ============================================================ tasks: tabs */

.tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.tab {
  flex: 1;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--mute);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 6px;
}
.tab:hover { color: var(--text); background: var(--panel2); }
.tab[aria-selected="true"] { background: var(--blue); color: var(--white); }
.tab .count {
  display: inline-block;
  margin-left: 5px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 0.7rem;
}

/* =========================================================== tasks: board */

#tasksView { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.subtabs { display: flex; gap: 6px; padding: 10px 18px 0; }
.subtab {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mute);
  font-size: 0.78rem;
  padding: 5px 13px;
}
.subtab[aria-selected="true"] {
  border-color: var(--blue);
  color: var(--white);
  background: var(--blue-soft);
}

/* The suggestion strip. Dashed, because it is a proposal and not a fact yet. */
#suggestions { padding: 12px 18px 0; }
.sugstrip {
  border: 1px dashed var(--blue);
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.sugstrip h3 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blue);
}
.sugcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.sugcard:last-child { margin-bottom: 0; }
.sugcard .t { font-weight: 600; margin-bottom: 3px; }
.sugcard .src {
  color: var(--mute);
  font-size: 0.78rem;
  border-left: 2px solid var(--line);
  padding-left: 8px;
  margin: 6px 0;
}
.sugacts { display: flex; gap: 6px; margin-top: 8px; }
.sugacts button {
  border-radius: 7px;
  font-size: 0.78rem;
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
}
.sugacts .yes {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  font-weight: 600;
}

.board {
  flex: 1;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 18px 18px;
  min-height: 0;
}
.col {
  flex: 0 0 268px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 0;
}
.col.over { border-color: var(--blue); background: var(--blue-soft); }
.colhead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mute);
}
.colhead .n {
  margin-left: auto;
  background: var(--panel2);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
}
.colbody {
  flex: 1;
  overflow-y: auto;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, var(--line));
  border-radius: 9px;
  padding: 10px 11px;
  cursor: grab;
  text-align: left;
  width: 100%;
  color: var(--text);
  font: inherit;
}
.card:hover { border-color: var(--mute); }
.card.dragging { opacity: 0.4; }
.card .t { font-weight: 550; line-height: 1.35; }
.card .row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-size: 0.73rem;
  color: var(--mute);
}
.chip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.chip.who { border-color: var(--blue); color: var(--text); }
.chip.due.late { border-color: #ff6b5c; color: #ff9d92; }

.addcard {
  background: none;
  border: 1px dashed var(--line);
  color: var(--mute);
  border-radius: 9px;
  padding: 8px;
  font-size: 0.8rem;
  width: 100%;
}
.addcard:hover { border-color: var(--blue); color: var(--text); }

/* ========================================================= tasks: my list */

#todoList { flex: 1; overflow-y: auto; padding: 14px 18px 18px; }
.todo {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  margin-bottom: 8px;
}
.todo.done { opacity: 0.5; }
.todo.done .t { text-decoration: line-through; }
.tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--mute);
  background: none;
  padding: 0;
  color: var(--white);
  font-size: 0.72rem;
  line-height: 1;
}
.todo.done .tick { background: var(--blue); border-color: var(--blue); }
.todo .bd { flex: 1; min-width: 0; }
.todo .t { line-height: 1.4; }
.todogroup {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mute);
  margin: 16px 0 8px;
}
.todogroup:first-child { margin-top: 0; }

/* =========================================================== the editor */

#sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.62);
  display: grid;
  place-items: center;
  padding: 20px;
}
.sheetbox {
  width: min(480px, 100%);
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
.sheetbox h3 { margin: 0 0 14px; font-size: 1rem; }
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mute);
  margin-bottom: 5px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  background: var(--black);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}
.field textarea { resize: vertical; min-height: 74px; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.two { display: flex; gap: 10px; }
.two .field { flex: 1; }
.sheetacts { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.sheetacts .grow { flex: 1; }
.btn {
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
}
.btn.primary { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn.danger { color: #ff9d92; border-color: #4a2723; background: none; }

.sourcequote {
  border-left: 2px solid var(--blue);
  padding: 4px 0 4px 10px;
  color: var(--mute);
  font-size: 0.82rem;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  /* One column at a time, swiped sideways. Six columns squeezed onto a phone is
     six unreadable columns. */
  .board { padding: 12px 14px 18px; scroll-snap-type: x mandatory; }
  .col { flex: 0 0 84vw; scroll-snap-align: center; }
  #todoList { padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); }
  .sheetbox { max-height: 92dvh; }
  .subtabs { padding: 10px 14px 0; }
  #suggestions { padding: 12px 14px 0; }
}

/* Chat and Tasks each fill what is left under the top bar. #main is the column;
   these are the two things that can occupy it. */
/* Every view fills what is left under the top bar. Only one is ever shown. */
#overviewView,
#clientsView,
#filesView,
#chatView { flex: 1; display: flex; flex-direction: column; min-height: 0; }

#overviewView[hidden],
#clientsView[hidden],
#filesView[hidden],
#chatView[hidden],
#tasksView[hidden] { display: none; }

/* Chat is a tool with its own two panes, not the shape of the app. */
.chatlayout { flex: 1; display: flex; min-height: 0; }
.chatmain { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ============================================================ files */

#filesView { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#filesView[hidden] { display: none; }

.filesbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.filesbar select {
  font: inherit;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
}
.filesbar .grow { flex: 1; }
.filesbar .usage { color: var(--mute); font-size: 0.78rem; }
.filesbar .btn { padding: 7px 14px; font-size: 0.85rem; }

.dropzone {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  border: 2px dashed transparent;
  border-radius: var(--radius);
  margin: 8px;
}
.dropzone.over { border-color: var(--blue); background: var(--blue-soft); }

.filegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  align-content: start;
}

.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, var(--line));
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tile .preview {
  height: 118px;
  background: var(--black);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tile .preview img { width: 100%; height: 100%; object-fit: cover; }
.tile .preview.glyph { font-size: 2rem; }
.tilebd { padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; }
.tilebd .nm {
  font-weight: 550;
  font-size: 0.86rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tilebd .row { font-size: 0.72rem; color: var(--mute); gap: 6px; margin: 0; }
.tileacts { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.tilebtn {
  font: inherit;
  font-size: 0.74rem;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}
.tilebtn:hover { border-color: var(--blue); }
.tilebtn.danger { color: #ff9d92; }
.tilebtn.danger:hover { border-color: #ff6b5c; }

@media (max-width: 767px) {
  .filesbar { padding: 10px 14px; }
  .dropzone { padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); margin: 6px; }
  .filegrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .tile .preview { height: 96px; }
}

/* ============================================================== settings */

.botrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--black);
  margin-bottom: 8px;
}
.botrow .dot { margin-left: 0; }
.botrow .bd { flex: 1; min-width: 0; }
.botrow .nm { font-weight: 600; font-size: 0.88rem; }
.botrow .sub { color: var(--mute); font-size: 0.74rem; }

.botempty {
  color: var(--mute);
  font-size: 0.85rem;
  border: 1px dashed var(--line);
  border-radius: 9px;
  padding: 16px;
  text-align: center;
  margin: 0 0 8px;
}

/* Shown once. Deliberately loud - there is no second chance to copy it. */
.tokenreveal {
  border: 1px solid var(--blue);
  background: var(--blue-soft);
  border-radius: 9px;
  padding: 12px;
  margin-bottom: 12px;
}
.tokenreveal .nm { font-size: 0.78rem; font-weight: 700; color: var(--blue); margin-bottom: 7px; }
.tokenreveal code {
  display: block;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
  user-select: all;
  margin-bottom: 8px;
}
.tokenreveal .btn { padding: 6px 14px; font-size: 0.8rem; }
.tokenreveal .note { margin-top: 10px; font-size: 0.75rem; }

.gear {
  background: none;
  border: 0;
  color: var(--mute);
  font-size: 0.95rem;
  padding: 4px 6px;
  line-height: 1;
  cursor: pointer;
}
.gear:hover { color: var(--text); }

/* ============================================================ navigation */

.nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--mute);
  padding: 10px 11px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 550;
}
.navitem:hover { background: var(--panel2); color: var(--text); }
.navitem[aria-current="true"] { background: var(--blue); color: var(--white); }
.navitem[aria-current="true"] .ic { opacity: 1; }
.navitem .ic { width: 16px; text-align: center; flex: none; opacity: 0.7; font-size: 0.9rem; }
.navitem .nm { flex: 1; }
.navitem .count {
  background: var(--panel2);
  color: var(--mute);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
}
.navitem .count.blue { background: var(--blue); color: var(--white); }
.navitem[aria-current="true"] .count { background: rgba(255, 255, 255, 0.22); color: var(--white); }

.topbar .titles { min-width: 0; }
.topbar .grow { flex: 1; }
#topActions { display: flex; gap: 8px; }
#topActions .btn { padding: 7px 14px; font-size: 0.84rem; }

/* ============================================================== overview */

#overviewView { overflow-y: auto; padding: 18px; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
}
.stat .k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mute);
  margin-bottom: 6px;
}
.stat .v { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--white); }
.stat .v.blue { color: var(--blue); }
.stat .sub { font-size: 0.75rem; color: var(--mute); margin-top: 3px; }

.panels { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel > h3 {
  margin: 0;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel > h3 .more {
  margin: 0 0 0 auto;
  background: none;
  border: 0;
  color: var(--blue);
  font-size: 0.74rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  cursor: pointer;
}
.panelbody { padding: 8px; }
.panelbody .empty { padding: 22px; text-align: center; }

/* rows inside a panel */
.prow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
}
button.prow { cursor: pointer; }
button.prow:hover { background: var(--panel2); }
.prow .bd { flex: 1; min-width: 0; }
.prow .t { line-height: 1.35; font-size: 0.88rem; }
.prow .row { margin-top: 4px; gap: 6px; font-size: 0.72rem; color: var(--mute); }
.prow .when { color: var(--mute); font-size: 0.72rem; flex: none; }
.prow .avi {
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 700; color: var(--white);
  background: #31445c;
  overflow: hidden;
}
.prow .avi img { width: 100%; height: 100%; object-fit: cover; }
.prow .swatch { width: 3px; align-self: stretch; border-radius: 2px; background: var(--accent, var(--line)); flex: none; }

/* ================================================================ clients */

#clientsView { overflow-y: auto; padding: 18px; }
.clientgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  align-content: start;
}
.ccard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, var(--line));
  border-radius: var(--radius);
  padding: 14px 15px;
  text-align: left;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ccard:hover { border-color: var(--mute); }
.ccard .head { display: flex; align-items: center; gap: 9px; }
.ccard .ic { font-size: 1.15rem; }
.ccard .nm { font-weight: 650; font-size: 0.98rem; color: var(--white); flex: 1; min-width: 0; }
.pill {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  color: var(--mute);
}
.pill.active { border-color: var(--blue); color: var(--blue); }
.pill.lead { border-color: #d8a33a; color: #d8a33a; }
.ccard .figs { display: flex; gap: 18px; }
.ccard .fig .k {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute);
}
.ccard .fig .v { font-size: 1.05rem; font-weight: 650; color: var(--white); }
.ccard .foot { display: flex; gap: 8px; font-size: 0.73rem; color: var(--mute); flex-wrap: wrap; }

/* ================================================================= mobile */

@media (max-width: 767px) {
  .chanlist { width: 100%; border-right: 0; }
  body.showlist .chatmain { display: none; }
  body:not(.showlist) .chanlist { display: none; }
  .topbar { padding: 10px 14px; }
  #topActions .btn { padding: 6px 11px; font-size: 0.8rem; }

  .panels { grid-template-columns: 1fr; gap: 14px; }
  #overviewView { padding: 14px; }
  #clientsView { padding: 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 12px; }
  .stat .v { font-size: 1.25rem; }
  .clientgrid { grid-template-columns: 1fr; }
}