/* The browser channel page. Everything from the Govorun tokens (brand/tokens.css). */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--fw-regular) var(--fs-base) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.talk {
  max-width: 640px; min-height: 100vh; margin: 0 auto; padding: var(--space-6) var(--space-4);
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--space-4);
}
.talk__head { display: flex; align-items: center; gap: var(--space-3); }
.talk__mark {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent);
  box-shadow: inset 0 0 0 6px var(--accent-soft);
}
.talk__title {
  margin: 0; color: var(--text-strong); font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-heading); line-height: var(--lh-tight);
}
.talk__sub { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.talk__call { margin-left: auto; }
.talk__status { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); min-height: 1.5em; }
.talk__status[data-live="robot"]::before,
.talk__status[data-live="peer"]::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: var(--space-2); vertical-align: 1px; background: var(--line-control);
}
.talk__status[data-live="robot"]::before { background: var(--accent); }
.talk__log {
  display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; min-height: 320px;
  padding: var(--space-4); background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.msg { max-width: 82%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.msg--robot { align-self: flex-start; background: var(--surface-sunken); color: var(--text-body); }
.msg--peer {
  align-self: flex-end; background: var(--surface-card); color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--line);
}
.msg__by { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; }
.msg--voice .msg__by::after { content: " · голос"; }
.msg--cut { box-shadow: inset 2px 0 0 var(--line-control); }
.divider {
  align-self: center; font-size: var(--fs-xs); color: var(--text-muted);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: var(--space-2) 0;
}
.outcome {
  align-self: center; display: inline-flex; gap: var(--space-2); align-items: center;
  padding: 2px var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-sm);
  background: var(--tone-ready-bg); color: var(--tone-ready-text);
  box-shadow: inset 0 0 0 1px var(--tone-ready-line);
}
.outcome[data-tone="neutral"] {
  background: var(--tone-neutral-bg); color: var(--tone-neutral-text);
  box-shadow: inset 0 0 0 1px var(--tone-neutral-line);
}
.talk__form { display: flex; gap: var(--space-2); }
.control {
  flex: 1; height: var(--control-h); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: var(--control-bg); color: var(--text-strong); font: inherit;
  box-shadow: inset 0 0 0 1px var(--control-line);
}
.control:hover { box-shadow: inset 0 0 0 1px var(--control-line-hover); }
.control:focus-visible, .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h);
  padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); cursor: pointer;
  font: var(--fw-medium) var(--fs-base) / 1 var(--font-sans);
  transition: background var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--primary[aria-pressed="true"] { background: var(--btn-secondary-bg); color: var(--btn-danger-text); box-shadow: inset 0 0 0 1px var(--btn-secondary-line); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--btn-secondary-line); }
.btn:disabled { opacity: .5; cursor: default; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.talk__note { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
@media (max-width: 480px) {
  .talk { padding: var(--space-4) var(--space-3); }
  #call-label { display: none; }
}
.aside { align-self: center; color: var(--text-muted); font-size: var(--fs-sm); }