:root {
  color-scheme: light;
  /* TLOM README palette: white canvas plus the three branded olive-slates. */
  --background: #ffffff;
  --panel: #ffffff;
  --panel-raised: #c9d3bf;
  --line: #c9d3bf;
  --text: #111827;
  --muted: #6e7b61;
  --accent: #4e5b43;
  --accent-dark: #6e7b61;
  --brand-mid: #6e7b61;
  --brand-light: #c9d3bf;
  --good: #4e5b43;
  --warn: #9a3412;
  --bad: #b42318;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
}

button, textarea, input, select { font: inherit; }
button { touch-action: manipulation; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: calc(.45rem + env(safe-area-inset-top, 0px)) .55rem .45rem;
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: .3rem;
  min-width: 0;
}
.topbar-links {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  grid-template-rows: repeat(2, minmax(36px, auto));
  align-items: stretch;
  justify-content: safe center;
  gap: .3rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.top-nav-button, .settings-menu > summary {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 36px;
  padding: .4rem .65rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .76rem;
  white-space: nowrap;
}
.top-nav-button:hover, .settings-menu > summary:hover { color: var(--text); background: var(--panel-raised); }
.top-nav-button.active { color: #ffffff; background: var(--accent); border-color: var(--accent); }
.top-nav-button.active:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.create-video-button { color: #fff; background: var(--accent); border-color: var(--accent); }
.create-video-button:hover { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
.settings-menu { position: relative; place-self: center; }
.settings-menu > summary {
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: .45rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.settings-menu > summary::-webkit-details-marker { display: none; }
.menu-icon { display: grid; gap: 3px; width: 18px; }
.menu-icon > span { height: 2px; background: currentColor; border-radius: 999px; }
.settings-menu[open] > summary { color: var(--text); background: var(--panel-raised); border-color: var(--line); }
.settings-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 14;
  display: grid;
  gap: .8rem;
  width: min(22rem, calc(100vw - 1.1rem));
  max-height: calc(100vh - 4rem - env(safe-area-inset-top, 0px));
  padding: .8rem;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(17, 24, 39, .18);
}
.settings-group { display: grid; gap: .5rem; margin: 0; padding: 0 0 .8rem; border-bottom: 1px solid var(--line); }
.settings-group:last-child { padding-bottom: 0; border-bottom: 0; }
.settings-group .eyebrow { margin-bottom: .05rem; }
.settings-group button { width: 100%; text-align: left; }

h1, h2, p { margin-top: 0; }
h1, h2, h3, h4, h5, h6, strong, b { font-weight: 500; }
h1 { margin-bottom: 0; font-size: clamp(1.45rem, 4vw, 2rem); letter-spacing: -.04em; }
h2 { margin-bottom: .8rem; font-size: 1.15rem; }

.eyebrow {
  margin-bottom: .2rem;
  color: var(--accent);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

main { width: min(920px, 100%); margin: 0 auto; padding: 1rem 1rem calc(var(--composer-height, 11rem) + 1rem); }
section { margin-bottom: 1rem; }

#agent-view-button { gap: .35rem; padding-left: .3rem; }

.agent-mascot {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 112px;
  height: 64px;
}
.agent-mascot[hidden] { display: none; }
.agent-hat-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(17, 24, 39, .2)); }
.agent-hat-shape { fill: var(--accent); stroke: #ffffff; stroke-width: 3; stroke-linejoin: round; }
.agent-hat-label { fill: #ffffff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: .25px; text-anchor: middle; }
.agent-hat-badges { position: absolute; right: -10px; bottom: -4px; display: flex; gap: 3px; }
.agent-hat-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
  padding: 2px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.agent-hat-badge .agent-hat-svg { width: 40px; height: 23px; }
.agent-mascot-nav { width: 52px; height: 30px; margin: -5px 0; }
.agent-mascot-nav .agent-hat-badges { right: -9px; bottom: -8px; }
.agent-mascot-nav .agent-hat-badge { width: 30px; height: 20px; padding: 1px; border-width: 1px; border-radius: 6px; }
.agent-mascot-nav .agent-hat-badge .agent-hat-svg { width: 28px; height: 17px; }

.requests, .trace-panel {
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .18);
}
.requests { background: transparent; border: 0; box-shadow: none; }
#agent-view { padding-top: 3.2rem; }

.agent-presentation-switch {
  position: fixed;
  top: calc(var(--topbar-height, 5rem) + .55rem);
  left: 50%;
  z-index: 11;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(22rem, calc(100% - 2rem));
  margin: 0;
  padding: .25rem;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .08);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.agent-presentation-tab { min-height: 34px; padding: .35rem .85rem; color: var(--muted); background: transparent; border-radius: 999px; font-size: .78rem; }
.agent-presentation-tab:hover { color: var(--text); background: var(--panel-raised); }
.agent-presentation-tab.active { color: #fff; background: var(--accent); }
.object-stream { display: grid; gap: 1rem; }
.object-draft { display: grid; gap: .75rem; margin-top: 1rem; padding: 1rem; background: #f7f8f4; border: 1px dashed var(--brand-mid); border-radius: 18px; scroll-margin-bottom: calc(var(--composer-height, 11rem) + 1rem); }
.object-draft[hidden] { display: none; }
.object-draft.searching .draft-object-card { opacity: .55; }
.object-draft-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.object-draft-heading .eyebrow { margin: 0 0 .25rem; }
.object-draft-heading h2 { margin: 0; font-size: 1rem; }
.object-draft-list { display: grid; gap: .55rem; }
.draft-object-card { display: grid; gap: .5rem; min-width: 0; padding: .7rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.draft-object-card.selected { border-color: var(--accent); background: #f7fbf5; }
.draft-object-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.draft-object-copy { flex: 1 1 12rem; min-width: 0; }
.draft-object-kind { display: block; margin-bottom: .1rem; color: var(--accent); font-size: .68rem; font-weight: 700; }
.draft-object-title { display: block; overflow: hidden; color: var(--text); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.draft-object-detail { display: block; overflow: hidden; margin-top: .1rem; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.draft-object-actions { display: flex; gap: .25rem; }
.draft-object-actions button { min-height: 28px; padding: .25rem .45rem; font-size: .7rem; }
.draft-object-dismiss { color: var(--muted); background: transparent; }
.draft-object-dismiss:hover { color: var(--text); background: var(--brand-light); }
.draft-object-relations { display: flex; flex-wrap: wrap; gap: .3rem; }
.draft-object-related { min-height: 27px; padding: .25rem .45rem; color: #717974; background: #edf0ed; border: 1px solid #dce2dc; border-radius: 7px; font-size: .7rem; }
.draft-object-related:hover, .draft-object-related:focus-visible, .draft-object-related:disabled { color: var(--accent); background: var(--brand-light); }
.object-interaction {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #f7f8f4 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(17, 24, 39, .08);
  animation: object-scene-enter .32s ease-out both;
}
.object-interaction[data-status="processing"], .object-interaction[data-status="queued"] { border-color: var(--brand-mid); }
.object-interaction[data-status="error"] { border-color: rgba(180, 35, 24, .5); }
.object-interaction-heading { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.object-interaction-mascot { width: 116px; height: 65px; margin: -.65rem 0 -.35rem -.45rem; }
.object-interaction-identity { display: grid; gap: .14rem; min-width: 0; }
.object-interaction-identity strong { font-size: 1rem; }
.object-hat-name { color: var(--accent); font-size: .76rem; text-transform: capitalize; }
.object-interaction-meta { display: grid; justify-items: end; gap: .15rem; color: var(--muted); font-size: .68rem; }
.object-interaction-status { text-transform: capitalize; }
.object-interaction-reply { margin-top: .2rem; }
.object-activity-list { position: relative; display: grid; gap: .55rem; padding-left: 1rem; }
.object-activity-list::before { position: absolute; top: .2rem; bottom: .2rem; left: .28rem; width: 2px; content: ""; background: var(--brand-light); border-radius: 999px; }
.activity-object-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .72rem .78rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  animation: object-card-enter .3s ease-out both;
}
.activity-object-card[data-action="created"] { border-left: 4px solid var(--good); }
.activity-object-card[data-action="changed"] { border-left: 4px solid var(--brand-mid); }
.activity-object-card[data-action="removed"] { border-left: 4px solid var(--bad); opacity: .78; }
.activity-object-symbol {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
}
.activity-object-card[data-action="created"] .activity-object-symbol { background: var(--good); }
.activity-object-card[data-action="removed"] .activity-object-symbol { background: var(--bad); }
.activity-object-body { display: grid; gap: .12rem; min-width: 0; }
.activity-object-action { color: var(--muted); font-size: .66rem; letter-spacing: .055em; text-transform: uppercase; }
.activity-object-title { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-object-context { overflow: hidden; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-object-reference { max-width: 11rem; padding: .25rem .45rem; overflow: hidden; color: var(--accent); background: var(--brand-light); border-radius: 999px; font: .66rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.object-activity-state { position: relative; display: flex; align-items: center; gap: .45rem; min-height: 3.2rem; padding: .75rem; color: var(--muted); background: rgba(201, 211, 191, .2); border: 1px dashed var(--line); border-radius: 12px; font-size: .78rem; }
.object-working-dot { width: .42rem; height: .42rem; background: var(--brand-mid); border-radius: 50%; animation: object-working 1.05s ease-in-out infinite; }
.object-working-dot:nth-child(2) { animation-delay: .14s; }
.object-working-dot:nth-child(3) { animation-delay: .28s; }
@keyframes object-scene-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes object-card-enter { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes object-working { 0%, 70%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

.scroll-latest {
  position: fixed;
  bottom: calc(var(--composer-height, 11rem) + .7rem);
  left: 50%;
  z-index: 13;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  color: #ffffff;
  background: var(--accent);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 5px 18px rgba(17, 24, 39, .24);
  transform: translateX(-50%);
}
.scroll-latest[hidden] { display: none; }
.scroll-latest:hover { background: var(--brand-mid); transform: translateX(-50%) translateY(-2px); }
.scroll-latest:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; }
.scroll-latest span { font-size: 1.35rem; line-height: 1; transform: translateY(-1px); }

.composer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: .7rem max(.8rem, env(safe-area-inset-right, 0px)) calc(.55rem + env(safe-area-inset-bottom, 0px)) max(.8rem, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -14px 48px rgba(17, 24, 39, .14);
  backdrop-filter: blur(16px);
}
.composer-input-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px auto; align-items: stretch; gap: .5rem; }
.voice-recorder { display: grid; place-items: center; }
.composer.recording .composer-input-row { grid-template-areas: "cancel recorder send"; grid-template-columns: auto minmax(0, 1fr) auto; }
.composer.recording .composer-input-row textarea { display: none; }
.composer.recording .composer-attachment-button { display: none; }
.composer.recording .cancel-recording { grid-area: cancel; }
.composer.recording .voice-recorder { grid-area: recorder; display: flex; align-items: center; justify-content: center; gap: .55rem; }
.composer.recording .composer-send { grid-area: send; }
.composer.recording .composer-actions { display: none; }
.record-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: linear-gradient(145deg, #332b25, #171411);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .025);
}
.record-button:hover { background: linear-gradient(145deg, #3c312a, #1c1714); }
.record-button:focus-visible { outline: 3px solid rgba(255, 91, 53, .55); outline-offset: 4px; }
.record-button:disabled { filter: grayscale(1); opacity: .45; }
.record-microphone { width: 23px; height: 23px; fill: var(--brand-mid); }
.record-meter { display: none; align-items: center; justify-content: center; width: 28px; height: 24px; gap: 2px; }
.record-meter span {
  width: 3px;
  height: 20px;
  background: #fff7f2;
  border-radius: 999px;
  transform: scaleY(.14);
  transition: transform 70ms linear;
}
.record-button.recording { background: #d83a20; animation: record-pulse 1.6s infinite; pointer-events: none; }
.record-button.recording:hover { background: #bf301a; }
.record-button.recording .record-microphone { display: none; }
.record-button.recording .record-meter { display: flex; }
@keyframes record-pulse {
  50% { box-shadow: 0 0 0 8px rgba(255, 91, 53, .1); }
}
.record-label { color: var(--muted); font-size: .72rem; }
.record-timer { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.recording-readout { display: none; line-height: 1.15; }
.composer.recording .recording-readout { display: grid; }
.composer.recording .record-label, .composer.recording .record-timer { color: #b32c17; font-weight: 600; }
.cancel-recording { display: inline-flex; align-items: center; gap: .25rem; min-height: 46px; padding: .45rem .7rem; }
.cancel-recording > span:first-child { font-size: 1.05rem; line-height: .8; }
.cancel-recording[hidden] { display: none; }
.composer-feedback { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; min-width: 0; min-height: 1.3rem; }
.composer-feedback .status { min-width: 0; margin: 0; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.composer-feedback .status:empty { display: none; }
.composer-hats-link { margin: 0; }
.composer-attachment-button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  color: var(--accent);
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.composer-attachment-button:hover, .composer-attachment-button.selected { color: white; background: var(--accent); }
.composer-attachment-button:focus-visible { outline: 3px solid rgba(78, 91, 67, .25); outline-offset: 3px; }
.composer-attachment-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.composer-file-selection { display: inline-flex; align-items: center; min-width: 0; max-width: 20rem; padding: .25rem .3rem .25rem .55rem; color: var(--accent); background: var(--brand-light); border-radius: 999px; font-size: .75rem; }
.composer-file-selection[hidden] { display: none; }
.composer-file-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-file-remove { width: 24px; min-width: 24px; min-height: 24px; margin-left: .2rem; padding: 0; color: var(--accent); background: transparent; border-radius: 50%; font-size: 1rem; line-height: 1; }
.composer-file-remove:hover { color: white; background: var(--accent); }

textarea, input {
  width: 100%;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: none;
}

textarea { min-height: 7.5rem; padding: .85rem; line-height: 1.45; resize: vertical; }
.composer textarea { min-height: 46px; max-height: 8rem; height: 46px; padding: .7rem .8rem; resize: none; }
input { padding: .7rem; }
textarea:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(78, 91, 67, .15); }

.composer-actions, .section-heading, .button-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.request-heading-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.request-limit-label { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .75rem; }
.request-limit-label select { width: auto; padding: .38rem .5rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.composer-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin-top: .45rem; }
.request-attachment-control { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.attachment-button { display: inline-flex; align-items: center; min-height: 42px; padding: .65rem 1rem; color: var(--text); background: var(--panel-raised); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400; }
.attachment-button.compact-control { min-height: 32px; padding: .35rem .6rem; font-size: .78rem; }
.attachment-button:hover { border-color: var(--brand-mid); background: var(--brand-light); }
.request-image-preview { width: 58px; height: 58px; object-fit: cover; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.request-file-label { overflow: hidden; max-width: 24rem; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.request-existing-file { max-width: 25rem; min-height: 32px; padding: .35rem .55rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font-size: .78rem; }
.request-run-controls { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.respond-silently-control { gap: .4rem; padding: .45rem .3rem; color: var(--muted); font-size: .78rem; white-space: nowrap; cursor: pointer; }
#respond-silently { width: 1rem; height: 1rem; margin: 0; padding: 0; accent-color: var(--accent); }
.run-limits-summary { padding: .3rem .5rem; color: var(--accent); background: var(--brand-light); border-radius: 999px; font-size: .7rem; white-space: nowrap; }
#run-limits-button.ready { color: var(--accent); border-color: var(--brand-mid); }

.file-library-toolbar { display: grid; gap: .75rem; }
.file-library-toolbar h3 { margin: 0 0 .25rem; }
.file-library-toolbar p { margin-bottom: 0; }
.file-picker-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.file-list { display: grid; gap: .7rem; }
.file-card { display: grid; gap: .45rem; }
.file-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(78, 91, 67, .18); }
.file-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.file-card-id, .file-card-meta { color: var(--muted); font-size: .75rem; }
.file-card-meta, .file-card-description { margin: 0; overflow-wrap: anywhere; }
.file-card-actions { display: flex; flex-wrap: wrap; gap: .45rem; }

button {
  min-height: 42px;
  padding: .65rem 1rem;
  color: white;
  font-weight: 400;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:hover { background: var(--accent-dark); }
button:disabled { opacity: .55; cursor: wait; }
button.secondary { color: var(--text); background: var(--panel-raised); border: 1px solid var(--line); }
button.secondary:hover { border-color: var(--brand-mid); background: var(--brand-light); }
button.danger { color: white; background: #9f342f; }
button.danger:hover { background: #bd4039; }
button.compact { min-height: 32px; padding: .35rem .6rem; font-size: .78rem; }
button.text-button { min-height: 0; padding: .2rem 0; color: var(--muted); background: transparent; border: 0; font-size: .78rem; }
button.text-button:hover { color: var(--text); background: transparent; text-decoration: underline; }
.reference-in-agent { display: inline-flex; align-items: center; justify-content: center; }
.reply-reference-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy-text-button { min-height: 0; margin: 0; padding: 0; overflow-wrap: anywhere; color: var(--text); background: transparent; border: 0; border-radius: 0; font: inherit; text-align: left; cursor: copy; }
.copy-text-button:hover { color: var(--accent); background: transparent; text-decoration: underline; }
.copy-text-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.runtime, .usage, .integration, .top-refresh {
  min-height: 34px;
  padding: .35rem .65rem;
  color: var(--muted);
  font: 400 .78rem ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel-raised);
  border: 1px solid var(--line);
}
.usage { font-family: inherit; }
.integration { font-family: inherit; }
.top-refresh { font-family: inherit; }
.runtime.ready, .usage.ready, .integration.ready { color: var(--good); }
.runtime.not-ready, .usage.not-ready, .integration.not-ready { color: var(--bad); }
.integration:disabled { cursor: default; opacity: 1; }

.organizer-heading, .calendar-search-bar, .todo-toolbar, .contact-toolbar, .journal-toolbar, .interaction-toolbar, .dialog-heading, .editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.organizer-heading { margin: .25rem .15rem .75rem; }
.organizer-heading h2 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.1rem); letter-spacing: -.035em; }
.calendar-range-heading { align-items: flex-end; margin-top: 0; }
.calendar-heading-copy { min-width: 0; }
.calendar-date-row { display: flex; align-items: center; justify-content: flex-start; gap: .8rem; }
.calendar-date-control { display: grid; grid-template-columns: 9.5rem 3.5rem 8.5rem 5.25rem; align-items: center; gap: .2rem; min-height: 4.1rem; }
.calendar-date-weekday { overflow: hidden; white-space: nowrap; }
.calendar-date-stepper { display: grid; grid-template-rows: 1.15rem auto 1.15rem; justify-items: center; align-items: center; }
.calendar-date-value { overflow: hidden; width: 100%; line-height: 1.08; text-align: center; text-overflow: clip; white-space: nowrap; }
.calendar-date-arrow {
  min-width: 2rem;
  height: 1.1rem;
  padding: 0 .35rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: .58rem;
  line-height: 1;
}
.calendar-date-arrow:hover { color: var(--accent); background: var(--panel-raised); }
.calendar-date-arrow:focus-visible { color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.organizer-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.ai-usage-view { display: grid; gap: 1rem; }
.ai-usage-view[hidden] { display: none; }
.ai-usage-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ai-usage-summary-card { display: grid; gap: .25rem; padding: 1rem; }
.ai-usage-summary-card span, .ai-usage-summary-card small { color: var(--muted); }
.ai-usage-summary-card strong { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 500; overflow-wrap: anywhere; }
.ai-pricing-form { display: grid; grid-template-columns: minmax(14rem, 2fr) minmax(11rem, 1fr) repeat(4, minmax(8rem, 1fr)) auto; align-items: end; gap: .8rem; padding: 1rem; }
.ai-pricing-form h3, .ai-pricing-form p { margin: 0; }
.ai-pricing-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; }
.ai-usage-history { padding: 1rem; }
.ai-usage-requests { display: grid; gap: .65rem; }
.ai-usage-request { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ai-usage-request > summary { padding: .85rem; cursor: pointer; background: var(--panel-raised); }
.ai-usage-request-title { font-weight: 500; overflow-wrap: anywhere; display: inline-block; max-width: calc(100% - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ai-usage-request-meta { display: block; margin-top: .35rem; color: var(--muted); font-size: .8rem; }
.ai-usage-request-content { padding: .85rem; border-top: 1px solid var(--line); }
.ai-usage-request-content h4 { margin: 1rem 0 .5rem; }
.ai-usage-request-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-usage-full-trace { margin-top: 1rem; }
.ai-usage-full-trace > summary { padding: .65rem 0; cursor: pointer; }
.ai-usage-request summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-scroll { overflow-x: auto; }
.ai-usage-history table { width: 100%; border-collapse: collapse; }
.ai-usage-history th, .ai-usage-history td { padding: .65rem .5rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ai-usage-history th:first-child, .ai-usage-history td:first-child,
.ai-usage-history th:nth-child(2), .ai-usage-history td:nth-child(2) { text-align: left; }
.ai-usage-history th { color: var(--muted); font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.calendar-search-bar, .todo-toolbar, .content-toolbar, .contact-toolbar, .journal-toolbar, .interaction-toolbar { margin-bottom: 1rem; padding: .65rem .8rem; }
.calendar-search-bar { flex-wrap: wrap; }
.calendar-search-controls { display: flex; align-items: end; gap: .65rem; flex: 1 1 25rem; }
.calendar-search { display: grid; grid-template-columns: auto minmax(10rem, 1fr); align-items: center; gap: .55rem; flex: 1; color: var(--muted); font-size: .8rem; }
.calendar-search input { padding: .6rem; }
.calendar-search-archived { display: flex; align-items: center; gap: .4rem; padding-bottom: .62rem; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.calendar-search-archived input { width: auto; }
.calendar-search-bar small { color: var(--muted); }
.calendar-schedule-mode { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .8rem; border-color: var(--brand-mid); background: rgba(201, 211, 191, .32); }
.calendar-schedule-mode[hidden] { display: none; }
.calendar-schedule-mode p { margin: 0 0 .2rem; }
.calendar-schedule-mode strong, .calendar-schedule-mode span { display: block; }
.calendar-schedule-mode span { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
#calendar-view.scheduling .calendar-day { cursor: crosshair; }
#calendar-view.scheduling .calendar-day:hover { background: rgba(201, 211, 191, .42); box-shadow: inset 0 0 0 2px var(--brand-mid); }
.calendar-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.calendar-layout[hidden], .calendar-search-results[hidden] { display: none; }
.calendar-search-results { padding: 1rem; }
.calendar-search-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.calendar-search-results-heading h3 { margin: 0; }
.calendar-search-results-heading small { max-width: 28rem; color: var(--muted); text-align: right; }
.calendar-search-result-list { display: grid; gap: .55rem; }
.calendar-search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; align-items: stretch; margin: 0; }
.calendar-search-result-actions { display: flex; align-items: stretch; flex-direction: column; gap: .35rem; }
.calendar-search-result-open { display: block; min-width: 0; padding: .75rem; color: var(--text); background: var(--panel-raised); border: 1px solid var(--line); text-align: left; }
.calendar-search-result-open:hover { background: var(--panel-raised); }
.calendar-search-result-open strong, .calendar-search-result-open span { display: block; }
.calendar-search-result-open span { overflow: hidden; margin-top: .22rem; color: var(--muted); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-search-result-open .calendar-search-result-description { color: var(--muted); }
.calendar-range-panel { overflow: hidden; }
.calendar-range-arrow { display: block; width: 100%; height: 2rem; border-radius: 0; }
.calendar-range-arrow:focus-visible { outline-offset: -2px; }
.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-grid > .empty { grid-column: 1 / -1; margin: 1rem; }
.weekday-row { border-bottom: 1px solid var(--line); background: var(--panel-raised); }
.weekday-row span { padding: .65rem .35rem; color: var(--muted); font-size: .68rem; font-weight: 400; text-align: center; text-transform: uppercase; }
.calendar-day {
  position: relative;
  min-width: 0;
  min-height: 112px;
  padding: .45rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  text-align: left;
}
.calendar-grid .calendar-day {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.calendar-day.has-month-marker { padding-left: 1.7rem; }
.calendar-month-marker {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.18rem;
  overflow: hidden;
  color: var(--background);
  background: var(--accent);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.calendar-day:hover { background: var(--panel-raised); }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:nth-last-child(-n + 7) { border-bottom: 0; }
.calendar-day.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-day.today .day-number { color: white; background: var(--accent); }
.calendar-day.outside-representative-month { background: color-mix(in srgb, var(--panel-raised) 45%, transparent); }
.calendar-day.outside-representative-month .day-number,
.calendar-day.outside-representative-month .day-items { opacity: .42; }
.day-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; font-size: .76rem; font-weight: 400; }
.day-items { display: grid; gap: 4px; margin-top: 5px; }
.day-event { overflow: hidden; padding: 3px 4px; background: rgba(201, 211, 191, .38); border-radius: 4px; font-size: .67rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.day-event.all-day { border-left: 3px solid var(--accent); }
.day-event.tentative { background: rgba(240, 189, 79, .1); }
.day-todo { overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.day-todo.routine-published, .agenda-item.routine-published { background: #fff0bd; color: #49370b; outline: 1px dashed #997012; outline-offset: -1px; border-radius: .2rem; }
.calendar-publication { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.calendar-publication[hidden] { display: none; }
.day-more { color: var(--muted); font-size: .62rem; }
.agenda-panel { padding: 1rem; }
.agenda-panel h3 { margin: 0; font-size: 1.05rem; }
.agenda-section { margin: 1rem 0 0; }
.agenda-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.agenda-section-heading h4 { margin: 0; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.agenda-section-heading span { color: var(--muted); font-size: .7rem; }
.agenda-list { display: grid; gap: .55rem; }
.agenda-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: stretch; }
.agenda-event-content { min-width: 0; }
.agenda-event-actions { display: flex; align-items: stretch; flex-direction: column; gap: .35rem; }
.agenda-item, .todo-card { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
.agenda-item { width: 100%; padding: .7rem; text-align: left; }
.agenda-event-content.has-linked-todos .agenda-item { border-radius: 13px 13px 0 0; }
.agenda-item strong, .agenda-item span { display: block; }
.agenda-item span { margin-top: .25rem; color: var(--muted); font-size: .74rem; }
.agenda-item .agenda-item-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: .8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.agenda-item .agenda-item-details { font-size: .7rem; }
.agenda-item .agenda-planning-state { display: inline-flex; width: fit-content; margin-top: .4rem; padding: .16rem .42rem; border-radius: 999px; font-size: .66rem; font-weight: 600; }
.agenda-item .agenda-planning-state.needs_planning { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.agenda-item .agenda-planning-state.deferred { color: var(--muted); background: var(--panel-raised); }
.agenda-item .agenda-planning-state.planned { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.agenda-event-todos { margin-top: -1px; padding: 0 .7rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 13px 13px; }
.agenda-event-todos-summary { padding: .5rem 0; color: var(--muted); font-size: .7rem; cursor: pointer; }
.agenda-event-todo-list { display: grid; gap: .3rem; margin: 0; padding: 0 0 .6rem; list-style: none; }
.agenda-event-todo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: .4rem; font-size: .75rem; line-height: 1.35; }
.agenda-event-todo-check { color: var(--brand-mid); font-size: .9rem; }
.agenda-event-todo-relationship { padding: .1rem .35rem; color: var(--muted); background: var(--panel-raised); border-radius: 999px; font-size: .64rem; }
.agenda-event-todo-text { min-width: 0; overflow-wrap: anywhere; }
.agenda-event-todo.completed .agenda-event-todo-text { color: var(--muted); text-decoration: line-through; }
.agenda-event-copy { align-self: stretch; white-space: nowrap; }
.agenda-item.todo { border-left: 3px solid var(--brand-mid); }
.agenda-empty { color: var(--muted); font-size: .83rem; line-height: 1.45; }
.agenda-all-day .agenda-item { border-left: 3px solid var(--accent); }
.agenda-all-day .agenda-item.todo { border-left-color: var(--brand-mid); }
.agenda-timeline { position: relative; display: grid; gap: .65rem; }
.agenda-timeline::before { content: ""; position: absolute; top: 1rem; bottom: 1rem; left: 6.72rem; width: 1px; background: var(--line); }
.agenda-timeline-row { display: grid; grid-template-columns: 5.9rem 1rem minmax(0, 1fr); gap: .35rem; align-items: start; }
.agenda-timeline-time { display: grid; gap: .1rem; padding-top: .65rem; color: var(--text); font-size: .73rem; text-align: right; white-space: nowrap; }
.agenda-timeline-end, .agenda-timeline-kind { color: var(--muted); font-size: .64rem; }
.agenda-timeline-marker { position: relative; z-index: 1; justify-self: center; width: .62rem; height: .62rem; margin-top: .83rem; background: var(--accent); border: 2px solid var(--panel); border-radius: 50%; box-shadow: 0 0 0 1px var(--accent); }
.agenda-timeline-marker.todo { background: var(--brand-mid); box-shadow: 0 0 0 1px var(--brand-mid); }
.agenda-timeline-empty { position: relative; margin: .2rem 0 0; padding-left: 7.6rem; }
.agenda-timeline.empty::before { display: none; }
.todo-toolbar, .contact-toolbar, .journal-toolbar, .interaction-toolbar { justify-content: flex-start; }
.todo-toolbar { flex-wrap: wrap; }
.todo-toolbar label, .contact-toolbar label, .journal-toolbar label, .interaction-toolbar label { color: var(--muted); font-size: .8rem; font-weight: 400; }
.todo-toolbar select, .contact-toolbar select, .journal-toolbar select, .interaction-toolbar select, .editor-dialog select { width: auto; padding: .6rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.contact-search { display: grid; grid-template-columns: auto minmax(10rem, 1fr); align-items: center; gap: .55rem; flex: 1 1 22rem; }
.contact-search input { padding: .6rem; }
.contact-bulk-actions { display: flex; align-items: center; flex: 1 0 100%; flex-wrap: wrap; gap: .55rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.contact-bulk-actions[hidden] { display: none; }
.contact-bulk-actions strong { margin-right: auto; font-size: .82rem; }
.contact-toolbar .contact-bulk-tag { display: flex; align-items: center; gap: .45rem; }
.contact-bulk-tag input { width: min(14rem, 45vw); padding: .48rem .6rem; }
.toolbar-count { margin-left: auto; color: var(--muted); font-size: .8rem; }
.todo-toolbar-summary { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.todo-toolbar-summary .toolbar-count { margin-left: 0; }
.todo-list { display: grid; gap: .65rem; }
.todo-group-section { margin: 0; }
.todo-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .35rem .15rem .55rem; }
.todo-group-heading h3 { margin: 0; font-size: 1.05rem; }
.todo-group-heading span { color: var(--muted); font-size: .75rem; }
.todo-group-heading-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.todo-group-heading-actions { display: flex; align-items: center; gap: .5rem; }
.todo-group-heading .todo-group-archived { color: var(--warn); }
.todo-group-heading .todo-group-sequence-marker { padding: 3px 7px; color: var(--accent); background: rgba(201, 211, 191, .42); border-radius: 999px; }
.todo-group-cards { display: grid; gap: .65rem; }
.todo-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem; padding: .85rem; }
.todo-check { display: grid; place-items: center; width: 27px; height: 27px; min-height: 27px; padding: 0; color: var(--good); background: var(--panel-raised); border: 1px solid var(--line); border-radius: 8px; }
.todo-leading-controls { display: grid; justify-items: center; gap: 5px; min-width: 2.1rem; }
.todo-sequence-display, .content-sequence-display { max-width: 7rem; overflow: hidden; color: var(--accent); font-size: 1.18rem; font-weight: 750; line-height: 1.1; text-overflow: ellipsis; }
.todo-card.completed { opacity: .64; }
.todo-card.completed h3 { text-decoration: line-through; }
.todo-body { min-width: 0; }
.todo-body h3 { margin: 1px 0 6px; font-size: .96rem; white-space: pre-wrap; }
.todo-planning-prompt { margin: 0 0 .55rem; color: var(--muted); font-size: .8rem; line-height: 1.4; white-space: pre-wrap; }
.todo-text { display: block; max-width: 100%; padding: 0; color: inherit; background: transparent; border: 0; text-align: left; cursor: copy; }
.todo-text:hover { color: var(--accent); }
.todo-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.todo-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .71rem; }
.todo-pill { padding: 3px 7px; background: var(--panel-raised); border-radius: 999px; }
.todo-contact-pill { min-height: 0; color: var(--accent); background: rgba(201, 211, 191, .42); border: 0; font-size: inherit; font-weight: 400; }
.todo-contact-pill:hover { color: #ffffff; background: var(--brand-mid); }
.todo-pill.overdue { color: var(--bad); }
.todo-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px; }

.content-toolbar { flex-wrap: wrap; }
.content-search { display: grid; grid-template-columns: auto minmax(12rem, 1fr); align-items: center; gap: .5rem; flex: 1 1 21rem; }
.content-search input { width: 100%; }
.content-list { display: grid; gap: 1rem; }
.content-group-section { margin: 0; }
.content-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .35rem .15rem .55rem; }
.content-group-heading h3 { margin: 0; font-size: 1.05rem; }
.content-group-heading-title, .content-group-heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.content-group-heading-actions span { color: var(--muted); font-size: .75rem; }
.content-card-grid { display: grid; gap: .65rem; }
.content-card { margin: 0; padding: .9rem; }
.content-card.has-sequence { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; }
.content-card-body { min-width: 0; }
.content-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.content-card-identity { min-width: 0; }
.content-card h4 { margin: 0; font-size: 1rem; }
.content-title-link { color: var(--text); font-size: 1rem; font-weight: 500; text-decoration-color: var(--brand-mid); text-underline-offset: 3px; }
.content-title-link:hover { color: var(--accent); }
.content-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; color: var(--muted); font-size: .71rem; }
.content-card-actions { display: flex; gap: .35rem; }
.content-description { margin: .75rem 0 0; line-height: 1.45; white-space: pre-wrap; }
.content-transcript { margin-top: .75rem; color: var(--muted); }
.content-transcript summary { cursor: pointer; }
.content-transcript p { max-height: 22rem; margin: .65rem 0 0; overflow: auto; color: var(--text); line-height: 1.45; white-space: pre-wrap; }

.video-script-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.video-script-list { display: grid; gap: .8rem; }
.video-script-card { padding: 1rem; }
.video-script-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.video-script-card h3 { margin: 0; font-size: 1.08rem; }
.video-script-title-copy { text-decoration: underline; text-decoration-color: var(--brand-mid); text-underline-offset: 3px; }
.video-script-meta, .video-script-sources { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; color: var(--muted); font-size: .72rem; }
.video-script-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.video-production-status { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; margin-top: .8rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-raised); font-size: .76rem; }
.video-production-status span { color: var(--muted); overflow-wrap: anywhere; }
.video-production-status strong { color: var(--accent); }
.video-production-error { border-color: var(--bad); }
.video-production-error strong { color: var(--bad); }
.video-script-document { margin-top: .85rem; border-top: 1px solid var(--line); }
.video-script-document summary { padding-top: .8rem; cursor: pointer; color: var(--accent); }
.video-script-markdown { max-height: 70dvh; margin-top: .8rem; padding: .9rem; overflow: auto; background: var(--panel-raised); border: 1px solid var(--line); border-radius: 9px; line-height: 1.5; user-select: text; }
.video-script-markdown > :first-child { margin-top: 0; }
.video-script-markdown > :last-child { margin-bottom: 0; }
.video-content-title { margin: 0; font-weight: 600; }

.contact-inactive-toggle { gap: .4rem; white-space: nowrap; }
.contact-list { overflow-x: auto; }
.contact-table-header, .contact-row { display: grid; grid-template-columns: minmax(145px, 1.25fr) minmax(145px, 1.1fr) minmax(120px, .95fr) minmax(90px, .7fr) minmax(110px, .9fr) minmax(125px, 1fr) auto; gap: .7rem; min-width: 820px; }
.contact-table-header { padding: .6rem .8rem; color: var(--muted); background: var(--panel-raised); border-bottom: 1px solid var(--line); font-size: .67rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.contact-row { align-items: start; margin: 0; padding: .8rem; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: 0; }
.contact-row:hover { background: rgba(201, 211, 191, .2); }
.contact-identity { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.contact-identity > div { min-width: 0; }
.contact-select-checkbox { width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; margin: 0; accent-color: var(--accent); }
.contact-select-all { display: flex; align-items: center; gap: .65rem; }
.contact-row h3 { overflow: hidden; margin: 0; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.contact-organization { display: block; overflow: hidden; margin-top: .18rem; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.contact-identity-meta, .contact-row-notes { display: block; overflow: hidden; margin-top: .16rem; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.contact-row-notes { color: var(--muted); text-transform: none; }
.contact-cell { min-width: 0; }
.contact-value-stack { display: grid; gap: .48rem; }
.contact-value-line { min-width: 0; }
.contact-method-value { overflow-wrap: anywhere; color: var(--text); font-size: .82rem; }
.contact-method-copy { min-height: 0; max-width: 100%; padding: 0; color: var(--accent); background: transparent; border-radius: 0; font-weight: 400; text-align: left; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: copy; }
.contact-method-copy:hover { color: white; background: transparent; }
.contact-method-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.contact-value-label { display: block; margin-top: .12rem; color: var(--muted); font-size: .64rem; }
.contact-empty-value { color: var(--muted); }
.contact-birthday-cell { font-size: .8rem; white-space: nowrap; }
.contact-tag-stack { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; }
.contact-tag { min-height: 0; padding: 3px 6px; color: var(--accent); background: var(--panel-raised); border-radius: 999px; font-size: .66rem; font-weight: 400; }
.contact-tag:hover { color: #ffffff; background: var(--brand-mid); }
.contact-row-actions { display: flex; justify-content: flex-end; }

.journal-list { display: grid; gap: 1rem; }
.journal-group-section { margin: 0; }
.journal-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .35rem .15rem .55rem; }
.journal-group-heading h3 { margin: 0; font-size: 1.05rem; }
.journal-group-heading span { color: var(--muted); font-size: .75rem; }
.journal-tracker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: .7rem; }
.journal-tracker-card { min-width: 0; padding: .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
.journal-tracker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.journal-tracker-heading h4 { margin: 0; font-size: 1rem; }
.journal-tracker-meta { margin: .22rem 0 0; color: var(--muted); font-size: .72rem; }
.journal-average-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .75rem 0; }
.journal-average-stat { display: grid; align-content: start; gap: .16rem; min-width: 0; padding: .55rem; background: var(--panel-raised); border-radius: 9px; }
.journal-average-stat span, .journal-average-stat small { color: var(--muted); font-size: .63rem; }
.journal-average-stat strong { overflow-wrap: anywhere; font-size: .82rem; font-variant-numeric: tabular-nums; }
.journal-entry-disclosure { border-top: 1px solid var(--line); }
.journal-entry-summary { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding-top: .7rem; color: var(--muted); cursor: pointer; font-size: .75rem; list-style: none; }
.journal-entry-summary::-webkit-details-marker { display: none; }
.journal-entry-summary::before { content: "▸"; flex: 0 0 auto; color: var(--accent); transition: transform .16s ease; }
.journal-entry-disclosure[open] > .journal-entry-summary::before { transform: rotate(90deg); }
.journal-entry-summary > span:first-child { margin-right: auto; }
.journal-entry-summary-count { font-variant-numeric: tabular-nums; }
.journal-entry-list { display: grid; }
.journal-entry-list > .empty { margin: 1rem 0 .2rem; }
.journal-entry { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.journal-entry:last-child { padding-bottom: 0; border-bottom: 0; }
.journal-entry p { margin: .38rem 0 0; line-height: 1.42; white-space: pre-wrap; }
.journal-entry-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: var(--muted); font-size: .72rem; }
.journal-value { flex: 0 0 auto; padding: 3px 7px; color: var(--accent); background: var(--brand-light); border-radius: 999px; font-weight: 400; }
@media (max-width: 440px) {
  .journal-average-grid { grid-template-columns: 1fr; }
}
.field-hint { color: var(--muted); font-weight: 400; }
#journal-tracker { width: 100%; }

.check-in-catch-up { padding: 1rem; margin-bottom: 1.25rem; }
.check-in-catch-up h3 { margin: 0; }
.check-in-catch-up .section-heading { flex-wrap: wrap; }
.check-in-catch-up > p { margin-bottom: 0; }
.catch-up-settings { display: grid; gap: .9rem; margin-top: 1rem; }
.catch-up-setting { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.catch-up-setting > .checkbox-row { flex: 0 0 15rem; }
.catch-up-setting select, .catch-up-setting input[type="date"], .catch-up-setting input[type="datetime-local"] { width: auto; max-width: 100%; }
.catch-up-lookback { display: flex; align-items: center; gap: .4rem; }
.catch-up-lookback input { width: 4.5rem; }
@media (max-width: 600px) {
  .catch-up-setting > .checkbox-row { flex-basis: 100%; }
}
.interaction-workspace { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 2fr); align-items: start; gap: .8rem; }
.interaction-guide-list { display: grid; align-content: start; max-height: calc(100dvh - 13rem); padding: .45rem; overflow: auto; }
.interaction-list-empty { padding: 1rem .5rem; }
.interaction-guide-list-item {
  display: grid;
  gap: .28rem;
  width: 100%;
  min-height: 0;
  padding: .75rem;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
}
.interaction-guide-list-item:hover { background: var(--panel-raised); border-color: var(--line); }
.interaction-guide-list-item.selected { background: rgba(201, 211, 191, .38); border-color: var(--brand-mid); }
.interaction-guide-list-item strong { overflow-wrap: anywhere; }
.interaction-guide-list-meta { color: var(--muted); font-size: .7rem; line-height: 1.35; text-transform: capitalize; }
.interaction-guide-detail { min-width: 0; padding: 1rem; }
.interaction-detail-empty { padding: 1rem; text-align: center; }
.interaction-detail-empty h3 { margin: .2rem 0 .55rem; }
.interaction-detail-empty p:last-child { margin-bottom: 0; }
.interaction-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.interaction-detail-identity { min-width: 0; }
.interaction-detail-heading h3 { margin: .1rem 0 .35rem; overflow-wrap: anywhere; font-size: 1.35rem; }
.interaction-guide-meta { margin: 0; color: var(--muted); font-size: .72rem; text-transform: capitalize; }
.interaction-detail-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }
.interaction-brief { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.interaction-brief h4, .interaction-turns-heading h4 { margin: 0; }
.interaction-brief p { margin: .6rem 0 0; line-height: 1.5; white-space: pre-wrap; }
.interaction-turns { margin: 0; padding-top: 1rem; }
.interaction-turns-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.interaction-turns-heading .eyebrow { margin-bottom: .12rem; }
.interaction-turn-list { display: grid; gap: .7rem; }
.interaction-turn-list.reordering { user-select: none; }
.interaction-turn-placeholder { box-sizing: border-box; background: var(--panel-raised); border: 1px dashed var(--brand-mid); border-radius: 12px; }
.interaction-turn-card { margin: 0; padding: .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.interaction-turn-card.disabled { opacity: .62; }
.interaction-turn-card.dragging { border-color: var(--accent); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); opacity: .92; transform: rotate(.25deg) scale(1.01); }
.reorder-saving .interaction-turn-drag-handle { pointer-events: none; opacity: .5; }
.interaction-turn-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.interaction-turn-identity { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.interaction-turn-drag-handle { width: 1.8rem; height: 1.8rem; padding: 0; touch-action: none; cursor: grab; color: var(--muted); background: transparent; border: 1px solid transparent; font-size: 1.2rem; line-height: 1; }
.interaction-turn-drag-handle:hover, .interaction-turn-drag-handle:focus-visible { color: var(--accent); background: var(--brand-light); border-color: var(--brand-mid); }
.interaction-turn-drag-handle:active { cursor: grabbing; }
.interaction-turn-drag-handle:disabled { cursor: not-allowed; }
.interaction-turn-opening-copy { font-size: .95rem; }
.interaction-turn-number { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: 0 0 auto; color: white; background: var(--accent); border-radius: 50%; font-size: .78rem; }
.interaction-turn-state { padding: 3px 7px; color: var(--accent); background: var(--brand-light); border-radius: 999px; font-size: .65rem; }
.interaction-turn-state.disabled { color: var(--warn); background: rgba(240, 189, 79, .1); }
.interaction-turn-field + .interaction-turn-field { margin-top: .7rem; }
.interaction-turn-field strong { display: block; color: var(--muted); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.interaction-turn-field p { margin: .25rem 0 0; line-height: 1.45; white-space: pre-wrap; }
.interaction-turn-answers { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.interaction-turn-answers summary { color: var(--muted); cursor: pointer; font-size: .75rem; }
.interaction-turn-answers pre { max-width: 100%; margin: .55rem 0 0; padding: .65rem; overflow: auto; background: var(--panel-raised); border-radius: 8px; font-size: .72rem; white-space: pre-wrap; }
.interaction-step-enabled { align-self: end; min-height: 42px; padding-bottom: .55rem; }
#interaction-step-completion-mode { width: 100%; }
.interaction-guide-dialog .field-hint { margin: -.35rem 0 0; font-size: .75rem; line-height: 1.4; }

.dialog-heading { align-items: flex-start; margin-bottom: .9rem; }
.integration-list { display: grid; gap: .55rem; margin: 1rem 0; }
.integration-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.integration-card.ready { border-color: var(--brand-mid); }
.integration-identity strong, .integration-identity span { display: block; }
.integration-identity strong { text-transform: capitalize; }
.integration-identity span { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.integration-card.ready .integration-identity span { color: var(--good); }
.integration-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.integration-form h3 { margin: 0; font-size: 1rem; }
.integration-form label { display: grid; gap: .4rem; color: var(--muted); font-size: .78rem; }
.integration-form .button-row { justify-content: flex-end; }
.integration-footnote { font-size: .75rem; line-height: 1.4; }
#integrations-dialog { width: min(540px, calc(100% - 2rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; }
.editor-dialog { width: min(620px, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; }
.run-limits-dialog { width: min(520px, calc(100% - 1.5rem)); }
.run-limits-intro { color: var(--muted); font-size: .82rem; line-height: 1.45; }
.run-limit-fieldset { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; margin: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; }
.run-limit-fieldset legend { padding: 0 .3rem; color: var(--text); font-size: .82rem; }
.run-limit-fieldset > label:first-of-type { display: grid; gap: .4rem; color: var(--muted); font-size: .78rem; }
.contact-dialog { width: min(860px, calc(100% - 1.5rem)); }
.editor-dialog form { display: grid; gap: .85rem; }
.editor-dialog label { display: grid; gap: .4rem; color: var(--muted); font-size: .78rem; font-weight: 400; }
.editor-dialog textarea { min-height: 6rem; }
.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.event-contact-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .35rem 0; }
.event-date-time-field { display: grid; gap: .4rem; min-width: 0; color: var(--muted); font-size: .78rem; }
.event-date-time-inputs { display: grid; grid-template-columns: minmax(8rem, 1fr) 5.8rem; gap: .45rem; }
.event-date-time-inputs input { min-width: 0; }
.event-time-input { font-variant-numeric: tabular-nums; }
.event-time-input[hidden] { display: none; }
.event-date-time-inputs:has(.event-time-input[hidden]) { grid-template-columns: 1fr; }
.event-duration { min-height: 1.2em; margin: -.35rem 0 0; color: var(--muted); font-size: .78rem; }
.timing-duration-row { display: grid; grid-template-columns: minmax(9rem, .45fr) minmax(12rem, 1fr); align-items: end; gap: .75rem; }
.timing-duration-row .event-duration { margin: 0 0 .65rem; }
.duration-input { font-variant-numeric: tabular-nums; }
.todo-timing-editor { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.todo-timing-editor .timing-duration-row { grid-column: 1 / -1; }
.todo-timing-editor #todo-clear-scheduled { justify-self: start; }
.todo-due-editor { min-width: 0; }
.todo-group-editor, .content-group-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; }
.content-group-dialog { width: min(520px, calc(100% - 1.5rem)); }
.content-group-sequence-help { margin: 0; font-size: .78rem; line-height: 1.45; }
#todo-contact { width: 100%; }
.content-dialog { width: min(760px, calc(100% - 1.5rem)); }
.contact-method-editor { margin: 0; padding: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.contact-method-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.contact-method-heading strong, .contact-method-heading span { display: block; }
.contact-method-heading strong { color: var(--text); font-size: .85rem; }
.contact-method-heading span { margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.contact-method-list { display: grid; gap: .55rem; margin-top: .7rem; }
.contact-method-list:empty { display: none; }
.contact-method-row { display: grid; grid-template-columns: 7rem 7rem minmax(10rem, 1fr) auto auto auto; align-items: center; gap: .45rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.contact-method-row select, .contact-method-row input { width: 100%; min-width: 0; padding: .55rem; }
.contact-method-check { display: flex !important; grid-auto-flow: initial !important; align-items: center; gap: .3rem !important; color: var(--muted) !important; font-size: .7rem !important; white-space: nowrap; }
.contact-method-check input { width: auto; }
.contact-duplicates-dialog { width: min(720px, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); overflow: auto; }
.duplicate-intro { margin: 0 0 1rem; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.contact-duplicate-list { display: grid; gap: .75rem; }
.duplicate-group { margin: 0; padding: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.duplicate-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; }
.duplicate-group-heading span { color: var(--muted); font-size: .7rem; text-transform: capitalize; }
.duplicate-choices { display: grid; gap: .4rem; margin-bottom: .7rem; }
.duplicate-choice { display: flex; align-items: center; gap: .6rem; padding: .55rem; background: var(--panel-raised); border-radius: 8px; cursor: pointer; }
.duplicate-choice input { width: auto; }
.duplicate-choice span, .duplicate-choice strong, .duplicate-choice small { display: block; }
.duplicate-choice small { margin-top: .15rem; color: var(--muted); }
.checkbox-row { display: flex !important; align-items: center; }
.checkbox-row input { width: auto; }
.recurrence-editor { padding: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.recurrence-toggle { gap: .55rem !important; color: var(--text) !important; font-size: .9rem !important; }
.recurrence-fields { display: grid; gap: .75rem; margin-top: .8rem; }
.recurrence-editor [hidden] { display: none !important; }
.recurrence-every { display: grid; grid-template-columns: auto 5.5rem minmax(8rem, 1fr); align-items: center; gap: .55rem; }
.recurrence-weekdays { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin: 0; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 9px; }
.recurrence-weekdays legend { padding: 0 .25rem; color: var(--muted); font-size: .75rem; font-weight: 400; }
.recurrence-weekdays label { display: flex; grid-auto-flow: column; align-items: center; gap: .3rem; color: var(--text); }
.recurrence-weekdays input { width: auto; }
.recurrence-month-pattern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.recurrence-ordinal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.recurrence-ending { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.routine-heading { align-items: end; }
.routine-introduction { max-width: 48rem; margin: .35rem 0 0; }
.routine-toolbar { flex-wrap: wrap; justify-content: flex-start; }
.routine-toolbar > span:first-child { color: var(--muted); font-size: .8rem; }
.routine-pattern-section { margin-top: 1.5rem; }
.routine-pattern-section > h3 { margin: 0 0 .35rem; }
.routine-pattern-section > p { margin: 0 0 .75rem; font-size: .8rem; }
.routine-week-grid .calendar-day { aspect-ratio: auto; min-height: 9rem; overflow: visible; }
.routine-week-grid .day-number { width: auto; justify-content: start; border-radius: 0; font-weight: 600; }
.routine-week-grid .day-todo { white-space: normal; overflow-wrap: anywhere; padding: .2rem 0; }
.routine-pattern-agenda { margin-top: .65rem; }
.routine-pattern-agenda > summary { cursor: pointer; font-size: .85rem; }
.routine-pattern-agenda .agenda-section > span { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .8rem; }
.recurrence-summary { margin: 0; color: var(--text); font-size: .82rem; font-weight: 400; }
.recurrence-hint { margin: -.35rem 0 0; color: var(--muted); font-size: .75rem; }
.editor-actions { justify-content: flex-end; flex-wrap: wrap; }
.editor-actions .editor-delete { margin-right: auto; }
.editor-leading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-right: auto; }
.form-error { min-height: 1.2em; margin: 0; color: var(--bad); font-size: .8rem; }
.form-success { min-height: 1.2em; margin: 0; color: var(--good); font-size: .8rem; }
.event-invite-intro { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.event-invite-recipients { min-width: 0; margin: 0; padding: .8rem; border: 1px solid var(--line); border-radius: 11px; }
.event-invite-recipients legend { padding: 0 .3rem; color: var(--muted); font-size: .75rem; }
.event-invite-contact-list { display: grid; gap: .4rem; max-height: min(42dvh, 24rem); overflow: auto; }
.event-invite-choice { display: flex !important; grid-auto-flow: initial !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem !important; padding: .6rem; color: var(--text) !important; background: var(--panel); border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.event-invite-choice:hover { border-color: var(--line); background: var(--panel-raised); }
.event-invite-choice input { width: auto; }
.event-invite-choice span, .event-invite-choice strong, .event-invite-choice small { display: block; min-width: 0; }
.event-invite-choice small { overflow: hidden; margin-top: .14rem; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.todo-calendar-dialog section h3 { margin: 0 0 .55rem; font-size: .9rem; }
.todo-calendar-current { display: grid; gap: .45rem; max-height: min(30dvh, 15rem); overflow: auto; }
.todo-calendar-current .empty { margin: .4rem 0; text-align: left; }
.todo-calendar-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.todo-calendar-link div, .todo-calendar-link strong, .todo-calendar-link span { display: block; min-width: 0; }
.todo-calendar-link span { margin-top: .15rem; color: var(--muted); font-size: .75rem; }
.todo-calendar-placement { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.todo-calendar-placement select { max-width: 100%; }
.event-invite-count { margin-right: auto; color: var(--muted); font-size: .78rem; }

.hats-heading { align-items: flex-end; }
.hat-introduction { padding: clamp(1rem, 3vw, 1.5rem); }
.hat-introduction p:last-child { margin-bottom: 0; }
.hat-invocation-template {
  margin: .35rem 0 1rem;
  color: var(--text);
  font: 500 clamp(1.05rem, 4vw, 1.45rem)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.hat-card { min-width: 0; padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; }
.hat-card.available { border-color: var(--brand-mid); }
.hat-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.hat-card-title { display: flex; align-items: flex-start; flex-direction: column; gap: .25rem; min-width: 0; }
.hat-card-mascot { width: 128px; height: 72px; margin: -.55rem 0 0 -.55rem; }
.hat-card-heading h2 { margin: 0; font-size: 1.35rem; }
.hat-identity .eyebrow { margin-bottom: 0; }
.hat-availability { flex: 0 0 auto; padding: .25rem .5rem; border-radius: 999px; font-size: .68rem; }
.hat-availability.available { color: var(--accent); background: var(--brand-light); }
.hat-availability.unavailable { color: var(--warn); background: rgba(240, 189, 79, .1); }
.hat-description { min-height: 2.8em; margin: .8rem 0; color: var(--muted); line-height: 1.4; }
.hat-example { margin: 0 0 .8rem; padding: .75rem; color: var(--text); background: var(--panel-raised); border-left: 3px solid var(--accent); border-radius: 4px 9px 9px 4px; line-height: 1.45; }
.hat-actions { display: flex; justify-content: flex-end; margin-bottom: .65rem; }
.hat-tools { border-top: 1px solid var(--line); }
.hat-tools summary { padding: .7rem 0 0; color: var(--muted); cursor: pointer; font-size: .75rem; }
.hat-tool-list { display: grid; gap: .65rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.hat-tool-list li { min-width: 0; }
.hat-tool-list code, .hat-tool-list span { display: block; overflow-wrap: anywhere; }
.hat-tool-list code { color: var(--text); font-size: .75rem; }
.hat-tool-list span { margin-top: .15rem; color: var(--muted); font-size: .7rem; line-height: 1.35; }

.status, .muted, .empty { color: var(--muted); }
.status { min-height: 1.3rem; margin: .6rem 0 0; font-size: .88rem; }
.empty { margin: 1.5rem 0; text-align: center; }

.request-list { display: grid; gap: .75rem; }
.request-entry { display: grid; gap: .75rem; }
.request-entry:last-child { scroll-margin-bottom: calc(var(--composer-height, 11rem) + 1rem); }
.conversation-separator { width: 100%; height: 1px; margin: .35rem 0; overflow: visible; color: var(--accent); background: var(--brand-light); border: 0; }
.request-card { display: grid; gap: .55rem; padding: .3rem; background: transparent; border: 1px solid transparent; border-radius: 14px; }
.request-user-turn {
  justify-self: end;
  width: fit-content;
  max-width: 82%;
  padding: .8rem .9rem;
  color: #ffffff;
  background: var(--brand-mid);
  border: 1px solid var(--brand-mid);
  border-radius: 14px 14px 4px 14px;
}
.request-agent-turn {
  justify-self: start;
  width: min(88%, 48rem);
  padding: .8rem;
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--brand-light);
  border-radius: 14px 14px 14px 4px;
}
.request-meta { display: flex; flex-wrap: wrap; gap: .4rem .7rem; color: var(--muted); font-size: .75rem; }
.request-user-turn .request-meta, .request-agent-turn .request-meta { color: rgba(255, 255, 255, .78); }
.request-user-meta { justify-content: flex-end; margin-top: .65rem; }
.request-number {
  min-height: 0;
  padding: 0;
  color: var(--text);
  font-weight: 400;
  background: transparent;
  border-radius: 0;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.request-user-turn .request-number, .request-agent-turn .request-number { color: #ffffff; }
.request-number:hover { color: var(--accent); background: transparent; }
.request-number:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.request-status { color: var(--warn); }
.request-entry[data-status="complete"] .request-status { color: var(--good); }
.request-entry[data-status="error"] .request-status, .request-error { color: var(--bad); }
.request-agent-turn .request-status { color: var(--brand-light); }
.request-entry[data-status="complete"] .request-agent-turn .request-status { color: var(--brand-light); }
.request-entry[data-status="error"] .request-agent-turn .request-status,
.request-agent-turn .request-error { color: #ffd7d3; }
.user-request { margin: 0; color: #ffffff; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-attachment { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: .35rem .65rem; margin: .7rem 0 0; padding: .65rem; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 9px; }
.request-attachment[hidden] { display: none; }
.request-file-reference { justify-self: start; color: #ffffff; }
.request-file-original, .request-file-description { min-width: 0; color: rgba(255, 255, 255, .78); font-size: .75rem; overflow-wrap: anywhere; }
.request-file-description { grid-column: 1 / -1; }
.agent-response { margin: 0; }
.agent-response:not([hidden]) { display: flex; align-items: flex-start; gap: .7rem; }
.agent-response-avatar { width: 96px; height: 54px; margin: -.2rem 0 0 -.35rem; }
.agent-response-body { min-width: 0; flex: 1; }
.agent-response-markdown { line-height: 1.55; overflow-wrap: anywhere; user-select: text; }
.agent-response-markdown > :first-child { margin-top: 0; }
.agent-response-markdown > :last-child { margin-bottom: .7rem; }
.agent-response-markdown h1,
.agent-response-markdown h2,
.agent-response-markdown h3,
.agent-response-markdown h4,
.agent-response-markdown h5,
.agent-response-markdown h6 { margin: 1.15em 0 .45em; line-height: 1.25; letter-spacing: -.015em; }
.agent-response-markdown h1 { font-size: 1.45rem; }
.agent-response-markdown h2 { font-size: 1.25rem; }
.agent-response-markdown h3 { font-size: 1.08rem; }
.agent-response-markdown h4,
.agent-response-markdown h5,
.agent-response-markdown h6 { font-size: 1rem; }
.agent-response-markdown p,
.agent-response-markdown ul,
.agent-response-markdown ol,
.agent-response-markdown blockquote,
.agent-response-markdown pre,
.agent-response-markdown table { margin: 0 0 .8rem; }
.agent-response-markdown ul,
.agent-response-markdown ol { padding-left: 1.4rem; }
.agent-response-markdown li + li { margin-top: .3rem; }
.agent-response-markdown li > p { margin-bottom: .3rem; }
.agent-response-markdown blockquote { padding: .15rem 0 .15rem .8rem; color: rgba(255, 255, 255, .82); border-left: 3px solid var(--brand-light); }
.agent-response-markdown blockquote > :last-child { margin-bottom: 0; }
.agent-response-markdown code { padding: .12em .3em; background: rgba(17, 24, 39, .3); border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; font: .88em/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.agent-response-markdown pre { max-width: 100%; padding: .75rem; overflow-x: auto; background: rgba(17, 24, 39, .3); border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; }
.agent-response-markdown pre code { padding: 0; white-space: pre; background: transparent; border: 0; }
.agent-response-markdown a { color: #ffffff; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.agent-response-markdown hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--line); }
.agent-response-markdown table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.agent-response-markdown th,
.agent-response-markdown td { padding: .4rem .55rem; border: 1px solid var(--line); text-align: left; }
.agent-response-markdown th { background: rgba(17, 24, 39, .22); }
.agent-response-markdown input[type="checkbox"] { width: auto; margin: 0 .35rem 0 0; accent-color: var(--accent); }
.markdown-image-alt { color: var(--muted); font-style: italic; }
.request-error { margin: 0 0 .65rem; white-space: pre-wrap; }
.turn-brief-approval {
  display: grid;
  gap: .8rem;
  margin: 0 0 .8rem;
  padding: .85rem;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--brand-light);
  border-radius: 11px;
}
.turn-brief-approval[hidden] { display: none; }
.turn-brief-heading { margin: 0; color: var(--accent); font-size: .9rem; font-weight: 600; }
.turn-brief-summary { display: grid; gap: .7rem; margin: 0; }
.turn-brief-summary > div { display: grid; gap: .2rem; }
.turn-brief-summary dt, .turn-brief-selection h3 { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.turn-brief-summary dd { margin: 0; line-height: 1.45; white-space: pre-wrap; }
.turn-brief-selection { display: grid; gap: .75rem; }
.turn-brief-selection > div { padding-top: .7rem; border-top: 1px solid var(--line); }
.turn-brief-selection h3, .turn-brief-selection p { margin: 0; }
.turn-brief-selection > div > p { margin-top: .2rem; color: var(--muted); font-size: .75rem; }
.turn-brief-selection ul { display: grid; gap: .45rem; margin: .55rem 0 0; padding: 0; list-style: none; }
.turn-brief-selection li { display: grid; gap: .12rem; }
.turn-brief-selection strong { font-size: .82rem; font-weight: 500; }
.turn-brief-selection code { color: var(--accent); font-size: .72rem; overflow-wrap: anywhere; }
.turn-brief-selection li p { color: var(--muted); font-size: .75rem; line-height: 1.4; }
.turn-brief-selection .turn-brief-none { color: var(--muted); font-size: .78rem; }
.turn-brief-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.turn-brief-decision-status { min-height: 1.1rem; margin: 0; color: var(--muted); font-size: .75rem; }
.response-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; margin-top: .7rem; padding: .55rem 0; color: rgba(255, 255, 255, .78); border-top: 1px solid rgba(255, 255, 255, .22); border-bottom: 1px solid rgba(255, 255, 255, .22); font-size: .75rem; font-variant-numeric: tabular-nums; }
.response-metrics-label { color: #ffffff; font-weight: 500; }
.request-steps { display: grid; gap: .3rem; margin: .65rem 0; padding: 0; list-style: none; }
.request-step { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; color: rgba(255, 255, 255, .78); font-size: .75rem; }
.request-step strong { color: #ffffff; font-weight: 500; }
.request-step[data-status="processing"] strong { color: var(--brand-light); }
.request-step-token { font-variant-numeric: tabular-nums; }
.request-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .65rem; }
.video-script-source-choice { display: flex; align-items: center; gap: .4rem; margin-right: auto; color: #ffffff; font-size: .78rem; }
.video-script-source-choice[hidden] { display: none; }
.video-script-source-choice input { width: auto; accent-color: var(--accent); }
.request-card.video-script-selected { border-color: var(--brand-mid); background: rgba(201, 211, 191, .2); box-shadow: 0 0 0 1px rgba(78, 91, 67, .2); }
.video-script-selection { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.video-script-selection[hidden] { display: none; }
.video-script-selection > div:first-child { display: grid; gap: .2rem; }
.video-script-selection span { color: var(--muted); font-size: .76rem; }
.video-script-selection-actions { display: flex; gap: .45rem; flex-wrap: wrap; }
.composer-video-script-selection {
  margin: 0 0 .7rem;
  padding: .65rem .75rem;
  background: rgba(201, 211, 191, .42);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .08);
}
.request-progress {
  align-items: center;
  gap: 11px;
  margin: .8rem 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 13px;
  background: rgba(255, 255, 255, .1);
}
.request-progress:not([hidden]) { display: flex; }
.request-progress > div { min-width: 0; }
.request-progress strong, .request-progress span { display: block; }
.progress-label { overflow: hidden; font-size: .84rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.progress-detail { margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: .75rem; font-variant-numeric: tabular-nums; }
.progress-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--brand-light);
  border-radius: 50%;
  animation: progress-spin .85s linear infinite;
}
@keyframes progress-spin { to { transform: rotate(360deg); } }

.trace-panel { position: fixed; inset: .5rem; z-index: 20; margin: 0 auto; width: min(1100px, calc(100% - 1rem)); overflow: auto; box-shadow: 0 20px 80px rgba(17, 24, 39, .28); }
.sticky { position: sticky; top: -1rem; z-index: 2; margin: -1rem -1rem 1rem; padding: 1rem; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.trace-events { display: grid; gap: .65rem; }
.trace-event { overflow: hidden; background: var(--panel-raised); border: 1px solid var(--line); border-radius: 10px; }
.trace-event summary { padding: .7rem; cursor: pointer; font-weight: 400; }
.trace-event pre { max-height: 65vh; margin: 0; padding: .8rem; overflow: auto; color: var(--text); background: var(--panel); border-top: 1px solid var(--line); font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; user-select: text; }

dialog { width: min(430px, calc(100% - 2rem)); color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
dialog::backdrop { background: rgba(0, 0, 0, .76); backdrop-filter: blur(4px); }
dialog form { display: grid; gap: .8rem; }
dialog h2, dialog p { margin-bottom: 0; }

@media (max-width: 580px) {
  .topbar { padding: calc(.35rem + env(safe-area-inset-top, 0px)) .35rem .35rem; }
  .topbar-links { grid-template-rows: repeat(2, minmax(34px, auto)); }
  .top-nav-button, .settings-menu > summary { min-height: 34px; padding: .35rem .55rem; font-size: .72rem; }
  .settings-menu > summary { width: 34px; height: 34px; }
  .settings-panel { right: 0; }
  .composer { padding-inline: .55rem; border-radius: 13px 13px 0 0; }
  .composer-input-row { grid-template-columns: 42px minmax(0, 1fr) 42px auto; gap: .35rem; }
  .composer-attachment-button { width: 42px; height: 42px; min-height: 42px; }
  .record-button { width: 42px; height: 42px; min-height: 42px; }
  .composer textarea { height: 42px; min-height: 42px; padding: .6rem .7rem; }
  .composer-send { min-height: 42px; padding-inline: .7rem; }
  .cancel-recording { min-height: 42px; padding-inline: .55rem; }
  .composer-actions { align-items: center; flex-wrap: wrap; }
  .request-attachment-control { width: 100%; }
  .request-file-label { max-width: calc(100vw - 10rem); }
  .composer-file-selection { max-width: 11rem; }
  .request-existing-file { max-width: 9rem; }
  .request-attachment { grid-template-columns: 1fr; }
  .request-file-description { grid-column: 1; }
  .request-user-turn { max-width: 92%; }
  .request-agent-turn { width: 96%; }
  .object-interaction { padding: .75rem; border-radius: 15px; }
  .object-interaction-heading { grid-template-columns: 92px minmax(0, 1fr); }
  .object-interaction-mascot { width: 92px; height: 52px; }
  .object-interaction-meta { grid-column: 1 / -1; grid-row: 2; justify-items: start; display: flex; align-items: center; gap: .55rem; }
  .object-interaction-reply { margin-top: 0; margin-left: auto; }
  .activity-object-card { grid-template-columns: 2rem minmax(0, 1fr); gap: .55rem; }
  .activity-object-symbol { width: 1.9rem; height: 1.9rem; }
  .activity-object-reference { grid-column: 2; justify-self: start; max-width: 100%; }
  .request-run-controls { justify-content: flex-start; width: 100%; }
  .respond-silently-control { margin-right: auto; }
  .run-limits-summary { order: 3; width: 100%; text-align: left; }
  .run-limit-fieldset { grid-template-columns: 1fr; }
  main { padding: .7rem .7rem calc(var(--composer-height, 14rem) + .7rem); }
  .requests { border-radius: 13px; }
  .section-heading { align-items: flex-start; }
  .request-heading-actions { justify-content: flex-start; }
  .trace-panel { inset: 0; width: 100%; border-radius: 0; }
  .button-row { align-items: stretch; flex-direction: column; }
  .calendar-search-bar { align-items: flex-start; }
  .calendar-search-bar > small { width: 100%; max-width: none; text-align: right; }
  .calendar-search-controls { align-items: stretch; flex-basis: 100%; flex-direction: column; gap: .45rem; }
  .calendar-search { grid-template-columns: 1fr; }
  .calendar-search-archived { padding-bottom: 0; }
  .calendar-range-heading { align-items: stretch; flex-direction: column; }
  .calendar-range-heading > #new-event { align-self: flex-end; }
  .calendar-date-row { flex-wrap: wrap; gap: .35rem .6rem; }
  .calendar-date-control { grid-template-columns: 5.7rem 2.2rem 5.2rem 3.4rem; gap: .08rem; font-size: clamp(1rem, 5.2vw, 1.45rem); }
  .calendar-search-results-heading { align-items: flex-start; flex-direction: column; }
  .calendar-search-results-heading small { text-align: left; }
  .calendar-search-result { grid-template-columns: 1fr; }
  .calendar-schedule-mode { align-items: stretch; flex-direction: column; }
  .calendar-day { min-height: 76px; padding: 4px; }
  .calendar-day.has-month-marker { padding-left: 1.1rem; }
  .calendar-month-marker { width: .85rem; font-size: .46rem; }
  .day-more { display: none; }
  .agenda-event { grid-template-columns: 1fr; }
  .agenda-timeline::before { left: 5.32rem; }
  .agenda-timeline-row { grid-template-columns: 4.5rem .8rem minmax(0, 1fr); gap: .25rem; }
  .agenda-timeline-time { font-size: .68rem; }
  .agenda-timeline-end, .agenda-timeline-kind { font-size: .59rem; }
  .agenda-timeline-empty { padding-left: 6rem; }
  .editor-grid { grid-template-columns: 1fr; }
  .todo-timing-editor, .timing-duration-row { grid-template-columns: 1fr; }
  .todo-timing-editor .timing-duration-row { grid-column: 1; }
  .timing-duration-row .event-duration { margin-bottom: 0; }
  .recurrence-ending { grid-template-columns: 1fr; }
  .todo-toolbar, .content-toolbar, .contact-toolbar, .journal-toolbar, .interaction-toolbar { align-items: stretch; flex-wrap: wrap; }
  .content-search { grid-template-columns: 1fr; flex-basis: 100%; }
  .content-group-heading, .content-card-heading, .video-script-card-heading { align-items: stretch; flex-direction: column; }
  .video-script-selection { align-items: stretch; flex-direction: column; }
  .video-script-actions { justify-content: flex-start; }
  .contact-search { grid-template-columns: 1fr; flex-basis: 100%; }
  .contact-method-row { grid-template-columns: 1fr 1fr; }
  .contact-method-input { grid-column: 1 / -1; }
  .contact-method-remove { justify-self: end; }
  .toolbar-count { width: 100%; margin-left: 0; }
  .todo-toolbar-summary { width: 100%; margin-left: 0; justify-content: space-between; }
  .todo-toolbar-summary .toolbar-count { width: auto; }
  .todo-card { grid-template-columns: auto minmax(0, 1fr); }
  .todo-actions { grid-column: 2; }
  .interaction-workspace { grid-template-columns: 1fr; }
  .interaction-guide-list { max-height: 14rem; }
  .interaction-detail-heading { flex-direction: column; }
  .interaction-detail-actions { justify-content: flex-start; }
}

@media (max-width: 820px) {
  .calendar-range-heading { flex-wrap: wrap; }
  .calendar-layout { grid-template-columns: 1fr; }
  .agenda-panel { position: static; }
  .ai-usage-summary-grid { grid-template-columns: 1fr; }
  .ai-pricing-form { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .contact-list { overflow: hidden; border: 0; background: transparent; }
  .contact-table-header { display: none; }
  .contact-row { grid-template-columns: 1fr; gap: .65rem; min-width: 0; margin-bottom: .65rem; padding: .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
  .contact-row:last-child { border-bottom: 1px solid var(--line); }
  .contact-identity { padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
  .contact-row > .contact-cell { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .6rem; }
  .contact-row > .contact-cell::before { content: attr(data-label); color: var(--muted); font-size: .67rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
  .contact-row > .contact-tag-stack { display: flex; padding-left: 5.6rem; }
  .contact-row > .contact-tag-stack::before { position: absolute; margin-left: -5.6rem; }
  .contact-value-line + .contact-value-line { grid-column: 2; }
  .contact-row-actions { justify-content: flex-end; }
  .duplicate-group-heading { align-items: flex-start; flex-direction: column; }
}