/* 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; }
/* The device's own reading face, as in the Mac app: SF Pro on Apple devices, Segoe UI on Windows, the desktop's elsewhere. Not the
   kit's interface token, whose Outfit only a browser with it installed drew. Segoe UI comes before system-ui, which a Windows CJK
   locale maps to a face that sets Latin poorly. */
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) -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
/* Without color-scheme a dark page keeps the browser's white scrollbar, and a browser with no scrollbar-color
   (Safari before 26.2) still draws its own; ::-webkit-scrollbar would pin Safari's overlay scrollbars open. */
:root { color-scheme: light dark; scrollbar-color: var(--am-color-border) transparent; }
* { scrollbar-width: thin; }
.app { display: flex; height: 100dvh; }
.chat { display: flex; flex: 1; min-width: 0; flex-direction: column; height: 100dvh; max-width: 760px; margin: 0 auto; padding: 0 var(--am-space-4); }
.sidebar { display: flex; flex: none; flex-direction: column; width: 260px; padding: var(--am-space-4) var(--am-space-3);
  background: var(--am-color-surface); border-right: var(--am-border-thin) solid var(--am-color-divider); }
.roster { display: flex; flex: 1; flex-direction: column; gap: var(--am-space-1); overflow-y: auto; }
.roster a { display: flex; flex-direction: column; padding: var(--am-space-2) var(--am-space-3); border-radius: var(--am-radius-control);
  color: var(--am-color-text); font-weight: var(--am-type-label-weight); text-decoration: none; }
.roster a:hover { background: var(--am-color-surface-inset); }
.roster a[aria-current] { background: var(--am-color-selection); color: var(--am-color-selection-text); }
.roster .role { overflow: hidden; color: var(--am-color-text-muted); font-size: var(--am-type-caption-size);
  font-weight: var(--am-type-caption-weight); text-overflow: ellipsis; white-space: nowrap; }
.account { padding-top: var(--am-space-3); border-top: var(--am-border-thin) solid var(--am-color-divider); }
.account > button { display: flex; align-items: center; gap: var(--am-space-2); width: 100%; padding: var(--am-space-2); font: inherit;
  font-weight: var(--am-type-label-weight); text-align: left; color: var(--am-color-text); background: none; border: 0;
  border-radius: var(--am-radius-control); cursor: pointer; }
.account > button:hover, .account > button:has(+ :popover-open) { background: var(--am-color-surface-inset); }
.avatar { position: relative; display: grid; flex: none; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%;
  background: var(--am-color-text-muted); color: var(--am-color-canvas); font-size: var(--am-type-caption-size); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.account .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#account-menu { inset: auto auto calc(var(--am-space-4) + var(--am-space-3) + 28px + 3 * var(--am-space-2)) var(--am-space-3);
  width: calc(260px - 2 * var(--am-space-3)); margin: 0; padding: var(--am-space-1); color: var(--am-color-text); background: var(--am-color-surface);
  border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-panel); box-shadow: var(--am-elevation-panel); }
#account-menu :is(a, button) { display: block; width: 100%; padding: var(--am-space-2) var(--am-space-3); font: inherit; text-align: left;
  color: inherit; text-decoration: none; background: none; border: 0; border-radius: var(--am-radius-control); cursor: pointer; }
#account-menu :is(a, button):hover { background: var(--am-color-surface-inset); }
#account-menu form { margin: 0; }
.menu { display: none; place-items: center; width: var(--am-metric-touch-target); height: var(--am-metric-touch-target); margin-left: calc(-1 * var(--am-space-2));
  padding: 0; color: var(--am-color-text); background: none; border: 0; cursor: pointer; }
.scrim { display: none; }
@media (max-width: 720px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 2; width: min(80vw, 300px); transform: translateX(-100%);
    visibility: hidden; transition: transform var(--am-motion-quick) var(--am-motion-ease), visibility var(--am-motion-quick); }
  .sidebar.open { transform: none; visibility: visible; box-shadow: var(--am-elevation-panel); }
  .menu, .scrim { display: grid; }
  #account-menu { width: calc(min(80vw, 300px) - 2 * var(--am-space-3)); }
  .scrim { position: fixed; inset: 0; z-index: 1; background: rgb(0 0 0 / 0.3); }
}
.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); }
.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; }
#reply-md:empty { display: none; }
.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); }
.card { margin: 0 0 var(--am-space-5); padding: var(--am-space-4); background: var(--am-color-surface);
  border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-panel); }
.card h2 { margin: 0 0 var(--am-space-1); font-size: var(--am-type-label-size); font-weight: var(--am-type-label-weight); }
.card .status { margin-bottom: var(--am-space-3); }
.card form { display: flex; gap: var(--am-space-2); margin-bottom: var(--am-space-3); }
.card input { flex: 1; min-width: 0; height: var(--am-metric-control-height); padding: 0 var(--am-space-4); font: inherit; color: inherit;
  background: var(--am-color-canvas); border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-control); outline: none; }
.card input:focus { border-color: var(--am-color-focus); }
.card button { height: var(--am-metric-control-height); padding: 0 var(--am-space-4); font: inherit; color: inherit; cursor: pointer;
  background: none; border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-control); }
.card button[type=submit] { border: 0; background: var(--am-color-action); color: var(--am-color-action-text); }
.card button[type=submit]:hover { background: var(--am-color-action-hover); }
.card button:disabled { background: var(--am-color-disabled-surface); color: var(--am-color-disabled-text); cursor: default; }
.card > a { color: var(--am-color-link); }
.items { margin: 0 0 var(--am-space-3); padding: 0; list-style: none; }
.items li { display: flex; align-items: center; gap: var(--am-space-3); padding: var(--am-space-3) 0; border-top: var(--am-border-thin) solid var(--am-color-divider); }
.items li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.items li .status { display: block; margin: 0; }
.chat:has(#vault-list) .empty { display: none; }
/* Feedback: a button at the top bar's end, like the Mac's title bar, and a sheet over the page. */
.feedback { margin-left: auto; }
.feedback > button, .sheet button { height: var(--am-metric-control-height); padding: 0 var(--am-space-4); font: inherit; color: var(--am-color-text);
  background: none; border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-control); cursor: pointer; }
.feedback > button { height: auto; padding: var(--am-space-1) var(--am-space-3); font-size: var(--am-type-caption-size); }
.feedback > button:hover, .sheet button:hover { background: var(--am-color-surface-inset); }
.feedback .scrim { display: block; position: fixed; inset: 0; z-index: 3; background: rgb(0 0 0 / 0.3); }
.sheet { position: fixed; top: 10vh; left: 50%; z-index: 4; width: min(480px, calc(100vw - 2 * var(--am-space-4))); max-height: 80vh; overflow-y: auto;
  transform: translateX(-50%); padding: var(--am-space-5); background: var(--am-color-surface); border: var(--am-border-thin) solid var(--am-color-border);
  border-radius: var(--am-radius-panel); box-shadow: var(--am-elevation-panel); }
.sheet h2 { margin: 0 0 var(--am-space-4); font-size: var(--am-type-label-size); font-weight: var(--am-type-label-weight); }
.sheet fieldset { display: flex; flex-direction: column; gap: var(--am-space-3); margin: 0; padding: 0; border: 0; }
.sheet .kinds { display: flex; flex-wrap: wrap; gap: var(--am-space-2) var(--am-space-4); white-space: nowrap; }
.sheet label { display: flex; align-items: center; gap: var(--am-space-2); }
.sheet .include { color: var(--am-color-text-muted); font-size: var(--am-type-caption-size); }
.sheet textarea { resize: vertical; padding: var(--am-space-3); font: inherit; color: inherit; background: var(--am-color-canvas);
  border: var(--am-border-thin) solid var(--am-color-border); border-radius: var(--am-radius-control); outline: none; }
.sheet textarea:focus { border-color: var(--am-color-focus); }
.sheet summary { color: var(--am-color-text-muted); font-size: var(--am-type-caption-size); cursor: pointer; }
.sheet pre { max-height: 150px; overflow: auto; margin: var(--am-space-2) 0 0; padding: var(--am-space-3); white-space: pre-wrap; overflow-wrap: anywhere;
  font: var(--am-type-code-size)/var(--am-type-code-line-height) var(--am-font-code); background: var(--am-color-surface-inset); border-radius: var(--am-radius-control); }
.sheet .failed { margin: 0; color: var(--am-color-error); font-size: var(--am-type-caption-size); }
.sheet .actions { display: flex; justify-content: flex-end; gap: var(--am-space-2); }
.sheet button.key { border: 0; background: var(--am-color-action); color: var(--am-color-action-text); }
.sheet button.key:hover:not(:disabled) { background: var(--am-color-action-hover); }
.sheet button:disabled { background: var(--am-color-disabled-surface); color: var(--am-color-disabled-text); cursor: default; }
.bar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .feedback > button { min-height: var(--am-metric-touch-target); } }

/* Scout's trail, paced as the apps pace it (ScoutTrail.swift): a dot that hesitates, then darts, with a faint tail, on one
   fixed loop. Both paths follow the inherited dash offset; under reduced motion the dot rests where it hesitates. */
.scout { margin-right: var(--am-space-2); vertical-align: middle; stroke: var(--am-color-link);
  stroke-linecap: round; stroke-dashoffset: -25; animation: scout 4.8s linear infinite; }
.scout .tail { stroke-width: 2; stroke-dasharray: 0 88 12 0; opacity: 0.42; }
.scout .dot { stroke-width: 6; stroke-dasharray: 0 100; }
@keyframes scout { 0% { stroke-dashoffset: 0; } 26%, 31.7% { stroke-dashoffset: -25; } 43.75% { stroke-dashoffset: -53; } 100% { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .scout { animation: none; } }