/* The web client's page styles; the brand tokens they use are inlined by the layout. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--am-color-canvas); color: var(--am-color-text);
  font: var(--am-type-body-weight) var(--am-type-body-size)/var(--am-type-body-line-height) var(--am-font-interface); }
.chat { display: flex; flex-direction: column; height: 100dvh; max-width: 760px; margin: 0 auto; padding: 0 var(--am-space-4); }
.bar { display: flex; align-items: center; gap: var(--am-space-2); padding: var(--am-space-4) 0;
  border-bottom: var(--am-border-thin) solid var(--am-color-divider); }
.bar h1 { margin: 0; font-size: var(--am-type-label-size); font-weight: var(--am-type-label-weight); }
.lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--am-color-border); }
.phx-connected .lamp { background: var(--am-color-success); }
.roster { display: flex; gap: var(--am-space-2); overflow-x: auto; padding: var(--am-space-3) 0; }
.roster a { flex: none; padding: var(--am-space-1) var(--am-space-3); border-radius: var(--am-radius-control);
  color: var(--am-color-text-muted); text-decoration: none; white-space: nowrap; }
.roster a:hover { color: var(--am-color-text); }
.roster a[aria-current] { background: var(--am-color-selection); color: var(--am-color-selection-text); }
.transcript { flex: 1; overflow-y: auto; padding: var(--am-space-6) 0; }
.msg { margin: 0 0 var(--am-space-5); white-space: pre-wrap; overflow-wrap: anywhere; max-width: var(--am-metric-body-measure); }
.msg.you { width: fit-content; max-width: 80%; margin-left: auto; padding: var(--am-space-2) var(--am-space-4);
  background: var(--am-color-selection); color: var(--am-color-selection-text); border-radius: var(--am-radius-panel); }
.msg.md { white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md :is(p, ul, ol, pre, blockquote, table) { margin: 0 0 var(--am-space-3); }
.md :is(h1, h2, h3, h4) { margin: var(--am-space-4) 0 var(--am-space-2); font-size: var(--am-type-label-size); font-weight: var(--am-type-label-weight); }
.md a { color: var(--am-color-link); }
.md code { font: var(--am-type-code-size)/var(--am-type-code-line-height) var(--am-font-code); padding: 0 var(--am-space-1);
  background: var(--am-color-selection); border-radius: 4px; }
.md pre { overflow-x: auto; padding: var(--am-space-3); background: var(--am-color-selection); border-radius: var(--am-radius-control); }
.md pre code { padding: 0; background: none; }
.md blockquote { padding-left: var(--am-space-3); border-left: 3px solid var(--am-color-divider); color: var(--am-color-text-muted); }
.md table { border-collapse: collapse; }
.md :is(th, td) { padding: var(--am-space-1) var(--am-space-2); border: var(--am-border-thin) solid var(--am-color-divider); }
.msg.error { color: var(--am-color-error); }
.status { margin: 0 0 var(--am-space-5); color: var(--am-color-text-muted); font-size: var(--am-type-caption-size); }
.empty { display: none; margin-top: 30vh; text-align: center; color: var(--am-color-text-muted); }
.empty:only-child { display: block; }
.composer { display: flex; align-items: flex-end; gap: var(--am-space-2); padding: var(--am-space-3) 0 var(--am-space-4); }
.composer textarea { flex: 1; min-height: var(--am-metric-control-height); max-height: 40vh; resize: none; field-sizing: content;
  padding: calc(var(--am-space-3) - var(--am-border-thin)) var(--am-space-4); font: inherit; color: inherit; background: var(--am-color-surface);
  border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-control); outline: none; }
.composer textarea:focus { border-color: var(--am-color-focus); }
.composer button { display: grid; place-items: center; width: var(--am-metric-control-height); height: var(--am-metric-control-height);
  border: 0; border-radius: var(--am-radius-control); background: var(--am-color-action); color: var(--am-color-action-text); cursor: pointer; }
.composer button:hover { background: var(--am-color-action-hover); }
.composer button:disabled { background: var(--am-color-disabled-surface); color: var(--am-color-disabled-text); cursor: default; }
.lock { margin: 30vh auto 0; max-width: 28rem; text-align: center; }
.lock a { display: inline-block; padding: var(--am-space-2) var(--am-space-4); border-radius: var(--am-radius-control);
  background: var(--am-color-action); color: var(--am-color-action-text); text-decoration: none; }
.lock a:hover { background: var(--am-color-action-hover); }
.bar form { margin-left: auto; }
.bar button { padding: var(--am-space-1) var(--am-space-3); font: inherit; font-size: var(--am-type-caption-size); cursor: pointer;
  color: var(--am-color-text-muted); background: none; border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-control); }
.bar button:hover { color: var(--am-color-text); }