:root {
  --forest: #163d35;
  --forest-deep: #0d2b25;
  --paper: #f4f1e9;
  --paper-strong: #fffdf7;
  --ink: #1d2724;
  --muted: #596560;
  --line: #d8d6cc;
  --green: #1e8b68;
  --amber: #bd751a;
  --red: #b9473f;
  --blue: #336f8d;
  --shadow: 0 20px 50px rgba(15, 42, 36, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 20rem; background: var(--paper); }
body { margin: 0; min-height: 100vh; background: var(--paper); }
button, a { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: .75rem;
  z-index: 20;
  padding: .65rem .9rem;
  color: white;
  background: var(--forest-deep);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(1rem, 3vw, 3rem);
  color: #f7f4eb;
  background: rgba(13, 43, 37, .97);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
  font-weight: 760;
  letter-spacing: -.02em;
}
.brand-mark {
  width: 1.8rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
}
.brand-mark span { width: .55rem; height: .9rem; border: solid #d9b86c; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.topbar nav { display: flex; align-self: stretch; gap: 1.5rem; }
.topbar nav a { display: grid; place-items: center; color: rgba(255,255,255,.68); text-decoration: none; border-bottom: 2px solid transparent; font-size: .88rem; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: white; }
.topbar nav a[aria-current="page"] { color: white; border-bottom-color: #d9b86c; }
.owner-mode { margin-left: auto; display: flex; align-items: center; gap: .55rem; color: rgba(255,255,255,.68); font-size: .78rem; }
.owner-mode i, .auto-refresh i { width: .42rem; height: .42rem; border-radius: 50%; background: #5bc497; box-shadow: 0 0 0 .25rem rgba(91,196,151,.12); }

main { width: min(100%, 100rem); margin: 0 auto; padding: clamp(1.5rem, 3vw, 3rem); }
.monitor-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 1.5rem 0 2.25rem; }
.eyebrow { margin: 0 0 .45rem; color: var(--muted); font-size: .68rem; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.title-line { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font: 650 clamp(2.15rem, 5vw, 4.4rem)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
h2 { margin: 0; font: 650 clamp(1.35rem, 2.5vw, 2rem)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
.lede { margin: .8rem 0 0; color: var(--muted); font-size: .95rem; }

.overall-state { display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem; padding: .38rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .73rem; font-weight: 700; background: var(--paper-strong); }
.overall-state i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber); }
.overall-state.is-online i { background: var(--green); box-shadow: 0 0 0 .28rem rgba(30,139,104,.11); }
.overall-state.is-error i { background: var(--red); }
.overall-state.is-loading i { animation: pulse 1.2s ease-in-out infinite; }
.refresh-cluster { display: grid; justify-items: end; gap: .55rem; }
.refresh-cluster p { margin: 0; color: var(--muted); font-size: .75rem; }
.refresh-button { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border: 1px solid var(--forest); background: transparent; cursor: pointer; }
.refresh-button:hover, .refresh-button:focus-visible { color: white; background: var(--forest); }
.refresh-button:disabled { cursor: wait; opacity: .65; }
.refresh-button svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.is-loading svg { animation: spin .8s linear infinite; }

.mode-banner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .9rem; padding: .85rem 1rem; margin-bottom: 1.5rem; color: #6f420c; background: #f4e4bf; border-left: 3px solid var(--amber); }
.mode-banner span { font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.mode-banner p { margin: 0; font-size: .84rem; }
.mode-banner.is-configured { color: #1d5c48; background: #e2eee7; border-color: var(--green); }

.service-board { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(18rem, 1fr); gap: 2rem; align-items: end; padding: 1.4rem 0; }
.section-heading > p { margin: 0; color: var(--muted); max-width: 40rem; font-size: .86rem; line-height: 1.5; }
.service-list { display: grid; grid-template-columns: repeat(8, minmax(7rem, 1fr)); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.service-item { position: relative; min-height: 8.5rem; padding: 1rem .9rem 1rem 1.1rem; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.service-item:last-child { border-right: 0; }
.service-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); transform: scaleY(0); transform-origin: bottom; transition: transform .25s ease, background .25s ease; }
.service-item.is-online::before { background: var(--green); transform: scaleY(1); }
.service-item.is-offline::before { background: var(--red); transform: scaleY(1); }
.service-item.is-warning::before, .service-item.is-unknown::before, .service-item.is-starting::before { background: var(--amber); transform: scaleY(1); }
.service-step { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.service-dot { width: .48rem; height: .48rem; margin-top: .12rem; border-radius: 50%; background: var(--line); }
.is-online .service-dot { background: var(--green); }
.is-offline .service-dot { background: var(--red); }
.is-warning .service-dot, .is-unknown .service-dot, .is-starting .service-dot { background: var(--amber); }
.service-item h3 { margin: 1.25rem 0 .4rem; font-size: .9rem; }
.service-item p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.service-item a { display: inline-block; margin-top: .45rem; color: var(--forest); font-size: .68rem; text-underline-offset: .2rem; }

.metric-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 1.5rem 0 2.4rem; }
.metric-strip div { padding: .6rem 1.3rem; border-left: 1px solid var(--line); }
.metric-strip div:first-child { padding-left: 0; border-left: 0; }
.metric-strip span { display: block; font: 600 clamp(1.65rem, 3vw, 2.45rem)/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.metric-strip small { display: block; margin-top: .45rem; color: var(--muted); font-size: .7rem; }

.activity-grid { min-height: 38rem; display: grid; grid-template-columns: minmax(18rem, .72fr) minmax(24rem, 1.28fr); background: var(--paper-strong); border: 1px solid var(--line); box-shadow: var(--shadow); }
.conversation-index { min-width: 0; border-right: 1px solid var(--line); }
.pane-heading, .transcript-heading { min-height: 6.4rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--line); }
.pane-heading h2 span { color: var(--muted); font: 600 .76rem/1 ui-sans-serif, system-ui, sans-serif; vertical-align: middle; }
.auto-refresh { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.conversation-list { max-height: 43rem; overflow-y: auto; }
.conversation-row { width: 100%; display: grid; grid-template-columns: 2.35rem 1fr auto; gap: .8rem; align-items: center; padding: 1rem 1.2rem; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; transition: background .15s ease, padding-left .15s ease; }
.conversation-row:hover { background: #f0ede4; }
.conversation-row:focus-visible { background: #f0ede4; outline: 2px solid var(--blue); outline-offset: -3px; }
.conversation-row.is-active { padding-left: 1.45rem; background: #e8eee9; box-shadow: inset 3px 0 var(--green); }
.conversation-avatar { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; color: white; background: var(--forest); border-radius: 50%; font-size: .68rem; font-weight: 760; }
.conversation-copy { min-width: 0; }
.conversation-copy strong, .conversation-copy span { display: block; }
.conversation-copy strong { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-copy p { margin: .28rem 0 0; color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-copy span { margin-top: .25rem; color: var(--muted); font-size: .63rem; }
.conversation-time { align-self: start; color: var(--muted); font-size: .64rem; white-space: nowrap; }

.transcript-pane { min-width: 0; display: grid; grid-template-rows: auto 1fr; position: relative; }
.transcript-heading { align-items: center; }
.transcript-heading > div { min-width: 0; }
.transcript-heading h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transcript-heading > div > p:last-child { margin: .42rem 0 0; color: var(--muted); font-size: .72rem; }
.window-state { max-width: 13rem; padding: .35rem .55rem; color: #1d5c48; background: #e2eee7; font-size: .65rem; text-align: right; }
.window-state.is-closed { color: #825312; background: #f4e4bf; }
.message-list { min-height: 27rem; max-height: 43rem; margin: 0; padding: 1.7rem; list-style: none; overflow-y: auto; background: linear-gradient(rgba(255,253,247,.94), rgba(255,253,247,.94)), radial-gradient(circle at 20% 20%, rgba(22,61,53,.08), transparent 30%); }
.message-row { display: grid; justify-items: start; margin: 0 0 1rem; animation: rise .25s ease both; }
.message-row.is-assistant { justify-items: end; }
.message-label { margin: 0 0 .3rem .15rem; color: var(--muted); font-size: .61rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.message-bubble { max-width: min(84%, 38rem); padding: .75rem .9rem; background: #ece9df; border-radius: .2rem .85rem .85rem .85rem; font-size: .79rem; line-height: 1.5; white-space: pre-wrap; }
.is-assistant .message-bubble { color: white; background: var(--forest); border-radius: .85rem .2rem .85rem .85rem; }
.message-meta { display: flex; gap: .45rem; margin: .3rem .15rem 0; color: var(--muted); font-size: .61rem; }
.delivery-failed { color: var(--red); font-weight: 700; }
.delivery-read { color: var(--green); font-weight: 700; }

.empty-state { min-height: 18rem; display: grid; place-items: center; align-content: center; padding: 2rem; text-align: center; color: var(--muted); }
.empty-state > span:first-child { font: 300 2.4rem/1 Georgia, serif; color: var(--line); }
.empty-state h3 { margin: .8rem 0 .35rem; color: var(--ink); font-size: .9rem; }
.empty-state p { max-width: 24rem; margin: 0; font-size: .73rem; line-height: 1.5; }
.empty-state--transcript { position: absolute; inset: 6.4rem 0 0; background: var(--paper-strong); }
.empty-pulse { display: flex; gap: .28rem; }
.empty-pulse i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--forest); opacity: .3; animation: dot 1.5s ease-in-out infinite; }
.empty-pulse i:nth-child(2) { animation-delay: .15s; }
.empty-pulse i:nth-child(3) { animation-delay: .3s; }

.error-log { margin-top: 2.5rem; border-top: 1px solid var(--ink); }
.error-log ol { margin: 0; padding: 0; list-style: none; }
.error-log li { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); font-size: .74rem; }
.error-log code { color: var(--red); font: inherit; }
.error-log time, .error-log small { color: var(--muted); }

.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; max-width: 23rem; padding: .8rem 1rem; color: white; background: var(--forest-deep); box-shadow: var(--shadow); font-size: .8rem; }

@keyframes pulse { 50% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(.35rem); } }
@keyframes dot { 50% { opacity: 1; transform: translateY(-.15rem); } }

@media (max-width: 72rem) {
  .service-list { grid-template-columns: repeat(8, minmax(7rem, 1fr)); }
  .activity-grid { grid-template-columns: minmax(17rem, .85fr) minmax(22rem, 1.15fr); }
}

@media (max-width: 48rem) {
  .topbar { min-height: auto; padding: .85rem 1rem; flex-wrap: wrap; gap: .8rem 1.2rem; }
  .topbar nav { order: 3; width: 100%; height: 2rem; }
  .owner-mode { font-size: .68rem; }
  main { padding: 1rem; }
  .monitor-head { align-items: flex-start; padding-top: 1rem; }
  .refresh-cluster { justify-items: end; }
  .refresh-button span { display: none; }
  .refresh-button { padding: .65rem; }
  .section-heading { grid-template-columns: 1fr; gap: .6rem; }
  .metric-strip { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; padding-bottom: 1.5rem; }
  .metric-strip div { padding: .45rem .7rem; }
  .metric-strip div:nth-child(4) { padding-left: 0; border-left: 0; }
  .activity-grid { display: block; }
  .conversation-index { border-right: 0; border-bottom: 1px solid var(--line); }
  .conversation-list { max-height: 22rem; }
  .transcript-pane { min-height: 34rem; }
  .message-list { max-height: 34rem; min-height: 27rem; padding: 1rem; }
  .empty-state--transcript { inset: 6.4rem 0 0; }
  .error-log li { grid-template-columns: 1fr; gap: .25rem; }
}

@media (max-width: 30rem) {
  .brand > span:last-child { display: none; }
  .owner-mode { margin-left: 0; }
  .monitor-head { display: grid; grid-template-columns: 1fr auto; gap: 1rem; }
  .title-line { display: block; }
  .overall-state { margin-top: .8rem; }
  .refresh-cluster p { display: none; }
  .mode-banner { grid-template-columns: 1fr; gap: .35rem; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-strip div:nth-child(3), .metric-strip div:nth-child(5) { padding-left: 0; border-left: 0; }
  .metric-strip div:nth-child(4) { padding-left: .7rem; border-left: 1px solid var(--line); }
  .pane-heading { align-items: flex-start; }
  .auto-refresh { white-space: normal; text-align: right; }
  .transcript-heading { align-items: flex-start; }
  .window-state { max-width: 7.5rem; }
  .message-bubble { max-width: 94%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}