/* agent-talks pages (phase 5): Material Design 3 by hand, on the colour roles of tokens.css. The
   type scale, shapes and components are M3's, reduced to what the pages use. No inline style
   anywhere: the content security policy allows this file and tokens.css only. */

:root {
  --shape-small: 8px;
  --shape-medium: 12px;
  --shape-large: 16px;
  --shape-full: 999px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 1rem/1.5rem var(--font);
  color: var(--md-sys-color-on-background);
  background: var(--md-sys-color-background);
}

a { color: var(--md-sys-color-primary); }

/* Type scale */
.headline { font: 400 1.75rem/2.25rem var(--font); margin: 0 0 1rem; }
.title { font: 500 1rem/1.5rem var(--font); letter-spacing: 0.01em; margin: 0 0 0.5rem; }
.supporting { color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; }
.error { color: var(--md-sys-color-error); font-size: 0.875rem; margin: 0.25rem 0; }

/* Top app bar */
.app-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.5rem 1rem; min-height: 4rem;
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}
.app-bar-title { font: 400 1.375rem/1.75rem var(--font); color: inherit; text-decoration: none; flex: 1; }
.app-bar-actions { display: flex; align-items: center; gap: 0.5rem; }
.app-bar-person { color: var(--md-sys-color-on-surface-variant); }
form.inline { display: inline; margin: 0; }

.page { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.prose { max-width: 48rem; }

/* Cards */
.card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--shape-medium);
  padding: 1.25rem;
}
.welcome, .sign-in { max-width: 32rem; margin: 2rem auto; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.5rem; padding: 0 1.5rem;
  border: none; border-radius: var(--shape-full);
  font: 500 0.875rem/1.25rem var(--font); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  background: transparent; color: var(--md-sys-color-primary);
}
.button:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.button.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.button.tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.button.text { padding: 0 0.75rem; }
.button:hover { filter: brightness(0.95); }

/* Text fields (outlined) */
.text-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 0.75rem; }
.text-field.grow { flex: 1; }
.text-field-label { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.text-field input, .text-field select, .text-field textarea {
  font: inherit; color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--shape-small);
  padding: 0.5rem 0.75rem; min-height: 2.5rem;
}
.text-field textarea { resize: vertical; min-height: 6rem; }
.text-field input:focus, .text-field select:focus, .text-field textarea:focus {
  outline: 2px solid var(--md-sys-color-primary); outline-offset: -1px; border-color: transparent;
}

/* Lists */
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.list-item:last-child { border-bottom: none; }
.channel-name { font-weight: 500; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem;
  border-radius: var(--shape-full);
  background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);
  font: 500 0.75rem/1 var(--font);
}

.notice {
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
  border-radius: var(--shape-small); padding: 0.75rem 1rem; margin: 0 0 1rem;
}

/* A channel's page */
.channel-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.5rem; align-items: start; }
.channel-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.channel-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin: 0; }

/* The newest at the bottom, held there as messages arrive (column-reverse scrolls from the end). */
.timeline {
  display: flex; flex-direction: column-reverse;
  max-height: calc(100vh - 22rem); min-height: 12rem; overflow-y: auto;
  border-radius: var(--shape-medium); background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.timeline-items { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; }
.older { align-self: center; }

.message {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--shape-medium); padding: 0.75rem 1rem;
}
.message-header {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant);
}
.message-header .from { font-weight: 600; color: var(--md-sys-color-on-surface); }
.message-header .session { font-family: var(--mono); font-size: 0.75rem; }
.message-header .number { margin-left: auto; }
.subject { font: 500 1rem/1.5rem var(--font); margin: 0.25rem 0; overflow-wrap: anywhere; }
.body { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.done-by { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); margin-right: auto; }
.quiet { align-self: center; margin: 0; font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }

.composer { display: flex; flex-direction: column; }
.composer-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.replying { margin: 0 0 0.5rem; font-size: 0.875rem; }
.send { align-self: flex-end; }

.members .role { margin-left: auto; }
.listening {
  font-size: 0.75rem; color: var(--md-sys-color-primary);
}
.member .listening::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.25rem;
  border-radius: 50%; background: var(--md-sys-color-primary);
}

@media (max-width: 48rem) {
  .channel-layout { grid-template-columns: 1fr; }
  .timeline { max-height: 60vh; }
}

/* The live connection's own display (App.razor): hidden until Blazor sets a class on it. */
.reconnect { display: none; }
.reconnect.components-reconnect-show, .reconnect.components-reconnect-retrying, .reconnect.components-reconnect-failed,
.reconnect.components-reconnect-rejected, .reconnect.components-reconnect-paused, .reconnect.components-reconnect-resume-failed {
  display: block; position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--shape-small); padding: 0.75rem 1rem; z-index: 10;
}
.reconnect p { display: none; margin: 0; }
.reconnect a { color: var(--md-sys-color-inverse-primary); }
.reconnect.components-reconnect-show .reconnect-lost,
.reconnect.components-reconnect-retrying .reconnect-lost,
.reconnect.components-reconnect-paused .reconnect-lost { display: block; }
.reconnect.components-reconnect-failed .reconnect-failed,
.reconnect.components-reconnect-resume-failed .reconnect-failed { display: block; }
.reconnect.components-reconnect-rejected .reconnect-rejected { display: block; }

/* Blazor's error bar, if a page fails: shown by Blazor, styled here. */
#blazor-error-ui { display: none; }