/* Light, warm, calm. A contact-centre tool someone looks at all day, not a demo.
   Three columns: who is answering, the conversation, what actually ran. */

:root {
  --ink:      #1b1a18;
  --ink-2:    #56534d;
  --ink-3:    #8b877f;
  --line:     #e7e3dc;
  --line-2:   #f0ede7;
  --paper:    #fbfaf8;
  --card:     #ffffff;
  --sand:     #fdf5ea;
  --amber:    #c2762a;
  --amber-2:  #a9631f;
  --prepaid:  #2e8b74;
  --postpaid: #2f6fba;
  --ok:       #2e8b74;
  --warn:     #c0553f;
  --radius:   12px;
  --shadow:   0 1px 2px rgba(27,26,24,.05), 0 8px 24px rgba(27,26,24,.05);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 14px/1.55 -apple-system, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }

.shell {
  display: grid; grid-template-columns: 236px minmax(0,1fr) 300px;
  height: 100vh; overflow: hidden;
}

/* ───────── rail ───────── */
.rail {
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px; padding: 18px 16px;
  overflow-y: auto; min-height: 0;
}
.brand { display: flex; gap: 10px; align-items: center; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ink); color: var(--sand); font-size: 13px;
}
.brand-name { font-weight: 650; letter-spacing: -.01em; }
.brand-sub { color: var(--ink-3); font-size: 11.5px; }

.rail-label {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px; font-weight: 600;
}
.rail-count { float: right; letter-spacing: 0; text-transform: none; opacity: .8; }
.agent-list { display: flex; flex-direction: column; gap: 12px; }
.agent-group { display: flex; flex-direction: column; gap: 2px; }
.agent-group-label {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 9px 4px; opacity: .75;
}
/* An agent the identified caller's account type cannot reach. Dimmed rather
   than removed, so it stays visible that the other half of the platform exists
   and is simply out of reach for this customer. */
.agent.unavailable { opacity: .32; }
.agent.unavailable .count { display: none; }
.agent {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 9px; font-size: 12.8px; color: var(--ink-2);
  transition: background .18s, color .18s;
}
.agent .swatch {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3);
  flex: 0 0 auto; transition: box-shadow .2s, transform .2s;
}
.agent.active { background: var(--sand); color: var(--ink); font-weight: 550; }
.agent.active .swatch { transform: scale(1.25); }
.agent.busy .swatch { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.agent .count {
  margin-left: auto; font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--ink-3);
}

.select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--card); color: var(--ink); font-size: 12.8px;
}
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.stat {
  display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3);
}
.stat b { color: var(--ink-2); font-weight: 550; }
.ghost-btn {
  margin-top: 6px; padding: 7px; border: 1px solid var(--line); background: none;
  border-radius: 9px; color: var(--ink-2); font-size: 12px;
}
.ghost-btn:hover { background: var(--line-2); }

/* ───────── main ───────── */
/* min-height:0 is load-bearing, not tidying. A grid or flex child defaults to
   min-height:auto, which refuses to shrink below its content. Without it the
   conversation column grows as long as the transcript, .shell clips the
   overflow, and .stream never scrolls - the messages simply vanish off the
   bottom with no scrollbar. Every scrolling pane below needs the same. */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px; border-bottom: 1px solid var(--line); background: var(--card);
}
.who-name { font-weight: 620; letter-spacing: -.01em; }
.who-sub { font-size: 12px; color: var(--ink-3); }
.topbar-right { display: flex; align-items: center; gap: 9px; }
.pill {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--sand); color: var(--amber-2);
}
.pill.prepaid  { background: #e8f4f0; color: var(--prepaid); }
.pill.postpaid { background: #e9f0f9; color: var(--postpaid); }
.pill-quiet {
  background: var(--line-2); color: var(--ink-3); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3);
  transition: background .3s;
}
.dot.on { background: var(--ok); }

.stream {
  flex: 1; min-height: 0; overflow-y: auto; padding: 26px; scroll-behavior: smooth;
  overscroll-behavior: contain;   /* a long transcript must not scroll the page */
}
.welcome { max-width: 540px; margin: 8vh auto 0; text-align: center; }
.welcome h1 {
  font-size: 26px; font-weight: 620; letter-spacing: -.02em; margin: 0 0 8px;
}
.welcome p { color: var(--ink-2); margin: 0 0 22px; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-size: 12.6px; color: var(--ink-2);
}
.chip:hover { border-color: var(--amber); color: var(--amber-2); }

.turn { max-width: 720px; margin: 0 auto 16px; display: flex; flex-direction: column; }
.turn.user { align-items: flex-end; }
.bubble {
  padding: 10px 14px; border-radius: 14px; max-width: 82%;
  white-space: pre-wrap; word-break: break-word;
}
.turn.user .bubble {
  background: var(--ink); color: #fdfcfa; border-bottom-right-radius: 5px;
}
.turn.bot .bubble {
  background: var(--card); border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.turn .meta {
  font-size: 10.5px; color: var(--ink-3); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* ───────── cards ───────── */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 16px; margin-top: 9px;
  max-width: 82%; align-self: flex-start;
}
.card-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.card-title { font-weight: 620; letter-spacing: -.01em; }
.card-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: var(--line-2); color: var(--ink-2);
}
.card-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 9px; }
.card-hero {
  font-size: 27px; font-weight: 640; letter-spacing: -.02em; margin: 3px 0 10px;
  font-variant-numeric: tabular-nums;
}
.card.prepaid  .card-hero { color: var(--prepaid); }
.card.postpaid .card-hero { color: var(--postpaid); }
.card.warn     .card-hero { color: var(--warn); }
.card-rows { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; }
.card-rows .k { color: var(--ink-3); font-size: 12.5px; }
.card-rows .v {
  text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.card-body { font-size: 12.8px; color: var(--ink-2); margin-top: 9px; }
/* A wide table scrolls inside its own box; the page itself never scrolls
   sideways. */
.table-wrap { overflow-x: auto; margin-top: 10px; }
.card table { width: 100%; border-collapse: collapse; font-size: 12.4px; }
.card th {
  text-align: left; font-weight: 600; color: var(--ink-3); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; padding: 0 8px 5px 0;
  border-bottom: 1px solid var(--line-2);
}
.card td {
  padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
}
.card td:last-child, .card th:last-child { text-align: right; padding-right: 0; }
.card ul { margin: 9px 0 0; padding-left: 17px; font-size: 12.6px; color: var(--ink-2); }
.meter { height: 6px; border-radius: 3px; background: var(--line-2); margin: 4px 0 6px; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--amber); }
.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.flag {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-2);
}
.flag.ok   { background: #e8f4f0; color: var(--ok); }
.flag.warn { background: #fbeeea; color: var(--warn); }

/* ───────── composer ───────── */
.composer { border-top: 1px solid var(--line); background: var(--card); padding: 12px 26px 16px; }
.composer-row { display: flex; gap: 9px; max-width: 720px; margin: 0 auto; align-items: center; }
.input {
  flex: 1; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font-size: 13.6px; color: var(--ink); outline: none;
}
.input:focus { border-color: var(--amber); background: var(--card); }
.mic, .send {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2); display: grid; place-items: center;
  flex: 0 0 auto; transition: background .2s, color .2s, border-color .2s;
}
.mic svg path, .send svg path { fill: currentColor; }
.mic svg path[fill="none"] { fill: none; }
.mic:hover, .send:hover { border-color: var(--amber); color: var(--amber-2); }
.mic.live { background: var(--warn); border-color: var(--warn); color: #fff; }
.mic.live::after {
  content: ""; position: absolute; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--warn); animation: ring 1.4s ease-out infinite;
}
.mic { position: relative; }
@keyframes ring {
  0% { transform: scale(1); opacity: .6 }
  100% { transform: scale(1.7); opacity: 0 }
}
.send { background: var(--ink); border-color: var(--ink); color: #fdfcfa; }
.send:hover { background: var(--amber-2); border-color: var(--amber-2); color: #fff; }
.voice-state {
  max-width: 720px; margin: 0 auto 8px; font-size: 11.5px; color: var(--ink-3);
  text-align: center;
}

/* ───────── activity ───────── */
.side {
  background: var(--card); border-left: 1px solid var(--line); padding: 18px 16px;
  overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 8px;
}
.side-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-top: 10px;
}
.link-btn {
  border: none; background: none; color: var(--ink-3); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; padding: 0;
}
.link-btn:hover { color: var(--amber-2); }
.trace { display: flex; flex-direction: column; gap: 5px; }
.trace-empty { font-size: 12px; color: var(--ink-3); padding: 6px 0; }
.trace-item {
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; font-size: 11.8px;
  animation: slide .25s ease;
}
@keyframes slide { from { opacity: 0; transform: translateY(-3px) } }
.trace-item .row1 { display: flex; align-items: center; gap: 6px; }
.trace-item .name { font-weight: 600; }
.trace-item .ms {
  margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.trace-item .row2 { color: var(--ink-3); font-size: 10.8px; margin-top: 2px; }
.trace-item.fail { border-color: #f0d5cf; background: #fdf6f4; }
.path {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 999px; background: var(--line-2); color: var(--ink-3);
}
.path.fast { background: #e8f4f0; color: var(--ok); }
.path.delegate { background: var(--sand); color: var(--amber-2); }
.path.specialist { background: #e9f0f9; color: var(--postpaid); }

.tool-count { font-size: 12px; color: var(--ink-2); }
.tool-list { display: flex; flex-wrap: wrap; gap: 4px; }
.tool-tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: var(--line-2);
  color: var(--ink-3);
}
.tool-tag.on { background: var(--sand); color: var(--amber-2); }

@media (max-width: 1080px) {
  .shell { grid-template-columns: 200px minmax(0,1fr); }
  .side { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0,1fr); }
  .rail { display: none; }
}