/* Client-lite components: the crew rail, feed cards, chat and control bar
   of the m3llo client, drawn on /assets/graphite.css. Shared by the web
   lounge (/lounge) and the demo client on the home page, so the two cannot
   drift apart. Page layout and responsive rules stay with each page.

   Reference renders: mello client/ui/panels/crew_panel.slint,
   crew_feed.slint, control_bar.slint, chat_panel.slint. */

:root {
  --rail-w: 264px;
  --chat-w: 320px;
  --control-h: 81px;
}

.panel-head {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}
.panel-title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }

/* ── crew rail ──────────────────────────────────────────────────── */

.rail {
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.crew-card { padding: 12px 10px 10px; }
.crew-card-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.crew-tile { background: var(--bg-raised); color: var(--text-dim); }
.crew-card-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channels { display: flex; flex-direction: column; gap: 2px; }
.channel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text);
}
.channel-head:hover { background: var(--bg-raised); }
.channel-chev { width: 13px; height: 13px; color: var(--text-dim); }
.channel-name {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-count { font-weight: 600; font-size: 11px; color: var(--text-dim); }
.channel.is-empty .channel-name { color: var(--text-dim); font-weight: 400; }
/* White marks where you are: the channel the guest sits in. */
.channel.is-joined .channel-head { background: var(--accent-dim); color: var(--text-hi); }
.channel.is-joined .channel-chev { color: var(--text-hi); }

.members { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 14px; }
.member { display: flex; align-items: center; gap: 9px; padding: 4px 8px; min-width: 0; }
.member-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member.is-you .member-name { color: var(--text-hi); }
/* Speaking: the name goes green. The avatar and the row do not change. */
.member.is-speaking .member-name { color: var(--speaking); font-family: var(--display); font-weight: 600; }
.member-tag { padding: 2px 6px; font-size: 8px; }
.member-icon { width: 13px; height: 13px; color: var(--text-dim); }
.channel-none { padding: 6px 8px; font-size: 12.5px; color: var(--text-dim); }

/* ── feed ───────────────────────────────────────────────────────── */

.feed-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feed-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.feed-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.card.locked { cursor: pointer; }
.card.locked:hover { --fill: var(--bg-card-hover); --line-c: var(--line-hi); }
.card-pad { padding: 16px; }
.card-tag { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.card-tag.is-live { color: var(--live); }
.card-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--text-hi);
}
.card.small .card-title { font-size: 13px; }
.card-meta { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

/* Thumbnails sit on the inset ground. The 1px inset keeps the card keyline. */
.thumb { position: relative; margin: 1px 1px 0; background: var(--bg-inset); overflow: hidden; }
.thumb.lg { height: 220px; }
/* The big session card grows its frame, never its title area, when its row
   is taller than the card (next to a long weekly recap). */
.card.hero.session { display: flex; flex-direction: column; }
.card.hero.session > .thumb { flex: 1 0 auto; height: auto; min-height: 176px; }
.thumb.sm { height: 96px; }
.frame-ph { position: absolute; inset: 18px; display: flex; flex-direction: column; gap: 8px; opacity: .9; }
.frame-ph i { display: block; height: 7px; background: var(--bg-card); }
.frame-ph .blk { margin-top: auto; height: 34%; width: 46%; background: var(--bg-card); }
.thumb.sm .frame-ph { inset: 12px; gap: 6px; }
.thumb.sm .frame-ph i { height: 5px; }

.lock-disc {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: var(--r-pill);
  background: var(--over-media);
  box-shadow: inset 0 0 0 1px var(--over-media-line);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.thumb.sm .lock-disc { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.lock-disc .ic { width: 16px; height: 16px; }
.thumb.sm .lock-disc .ic { width: 13px; height: 13px; }
.thumb-dur { position: absolute; right: 10px; bottom: 10px; }
.thumb-badge { position: absolute; left: 10px; top: 10px; }
.badge .ic { width: 10px; height: 10px; }
.badge .ic-live { color: var(--live); }

/* Voice clip, as the client's ClipCard: label row, dot-matrix waveform with
   a play ring, then title and meta. Dots are 2px on a 4px pitch, 64 columns,
   and fade upward like the client's. Columns use the band's full height. While playing, played columns stay red,
   the rest dim, and a white hairline marks the position. */
.card.vclip { --n: var(--notch-sm); }
.vclip-in { display: flex; flex-direction: column; gap: 8px; padding: 12px; height: 100%; }
.vclip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 16px; }
.vclip-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--live); }
.vclip-tag .ic { width: 10px; height: 10px; }
.vclip-time { font-weight: 600; font-size: 11px; letter-spacing: .08em; color: var(--text-dim); }
.dotwave { position: relative; flex: 1 0 auto; min-height: 44px; background: var(--bg-inset); overflow: hidden; }
.dotwave-dots {
  position: absolute; inset: 4px 0;
  display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); grid-template-rows: 100%; align-items: end;
  -webkit-mask: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45));
  mask: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .45));
}
.dotwave-dots i {
  --dot: var(--live);
  justify-self: center; width: 2px; height: calc(var(--n) * 4px - 2px);
  /* A taller band shows more dots, like the client's hero card: the column
     scales with the band and snaps to whole dots. */
  height: calc(round(down, var(--n) / 9 * 100% + 2px, 4px) - 2px);
  background: repeating-linear-gradient(to top, var(--dot) 0 2px, transparent 2px 4px);
}
.dotwave-dots i.q { opacity: .28; }
.dotwave-dots.is-placeholder { opacity: .3; }
.dotwave-dots i.rem { --dot: var(--text-dim); opacity: .5; }
.dotwave-dots i.at { --dot: #fff; opacity: 1; }
.dotwave-head { position: absolute; top: 0; bottom: 0; width: 1px; background: #fff; display: none; }
.vclip.playing .dotwave-head { display: block; }
.vclip-ring {
  position: absolute; right: 4px; top: 4px;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--live); color: var(--live);
  display: flex; align-items: center; justify-content: center;
}
.vclip-ring .ic { width: 8px; height: 8px; margin-left: 1px; }
.vclip.playing .vclip-ring .ic { width: 7px; height: 7px; margin-left: 0; }
.vclip.playing { --line-c: var(--live); }

.recap .card-pad { display: flex; flex-direction: column; height: 100%; }
.recap-big { font-size: 34px; line-height: 1.1; margin-top: 2px; }
.recap-rows { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.recap-rows div, .recap-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.recap-rows span:first-child, .recap-foot span { color: var(--text-dim); }
.recap-rows span:last-child { color: var(--text-hi); font-weight: 400; text-align: right; }
.recap-label { margin: 14px 0 6px; }
.recap-person { display: flex; align-items: center; gap: 8px; }
.recap-person-name { flex: 1; min-width: 0; font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--text-hi); }
.recap-games { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.recap-wl span { color: var(--text-dim); }
.recap-foot { margin-top: auto; padding-top: 12px; }
.recap-foot b { font-family: var(--display); font-size: 12.5px; }
.recap.is-empty .card-pad { justify-content: center; }
.recap-pending-ic { width: 22px; height: 22px; color: var(--text-faint); margin: 10px 0; }

.catchup .card-pad { display: flex; flex-direction: column; }

/* ── chat ───────────────────────────────────────────────────────── */

.side {
  background: var(--bg-panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; }
.msg-main { min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-name { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--text-hi); }
.msg-time { font-size: 8.5px; color: var(--text-faint); }
.msg-reply { font-size: 11.5px; color: var(--text-dim); border-left: 2px solid var(--line-hi); padding-left: 8px; margin: 2px 0; }
.msg-text { font-size: 13.5px; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
.composer {
  margin: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--bg-app);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-faint);
  text-align: left;
}
.composer:hover { border-color: var(--line-hi); }
.composer .ic { width: 13px; height: 13px; }

/* ── control bar ────────────────────────────────────────────────── */

/* Fixed height, never flexes: the feed above takes the rest, which is how the
   client keeps the bar on screen. */
.controls {
  flex: none;
  height: var(--control-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
}
.cb-you { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-who { display: flex; flex-direction: column; min-width: 0; }
.cb-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.cb-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.cb-status.is-channel { color: var(--text-hi); }
.cb-status.is-channel::before { content: ''; width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--accent); flex: none; }
.cb-status.is-error { color: var(--text-hi); }
.cb-voice { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.cb-divider { width: 1px; height: 30px; background: var(--line); margin: 0 4px; }
.cb-spacer { flex: 1; }
.cb-stream, .cb-clip { height: 38px; }