/* #region zone:monitor.ui.kit — สีและขนาดตัวอักษร Monitor บนรูปทรงส่วนกลาง */
:root {
  --u-body: var(--fs-md);
  --u-font: var(--font);
  --u-mono: var(--mono);
  --u-bg: var(--surface-0);
  --u-surface: var(--surface-2);
  --u-surface-2: var(--surface-3);
  --u-pop: var(--surface-raised);
  --u-ink: var(--text-1);
  --u-muted: var(--text-3);
  --u-line: var(--border);
  --u-line-strong: var(--border-strong);
  --u-focus: var(--focus);
  --u-shadow: var(--shadow-overlay);
  --u-scrim: var(--scrim);
  --r-sm: var(--u-radius-inner);
  --r-md: var(--u-radius-inner);
  --r-lg: var(--u-radius-card);
}
/* Monitor's form sections already provide shell padding; preserve that scroll layout. */
dialog.ui-dialog.u-dialog {
  padding: 0;
}
body,
input.u-input,
textarea.u-input,
.u-select {
  font-size: var(--u-body);
}
html:root :is(input.u-input, textarea.u-input, button.select-trigger.u-select) {
  border-radius: var(--u-radius-inner);
}
/* Match canonical text fields; the legacy select's 38px rule predates kit adoption. */
html:root button.select-trigger.u-select {
  height: var(--u-tap);
  min-height: var(--u-tap);
  font-size: var(--u-body);
}
html:root .segmented.u-seg > .segment.u-btn {
  font-size: var(--u-body);
}
html:root .btn-sm.u-btn {
  font-size: var(--fs-sm);
}
html:root .members-table .btn.u-btn {
  font-size: var(--fs-sm);
}
html:root .monitor-luna-prompts .btn.u-chip {
  font-size: var(--u-body);
}
@media (min-width: 481px) and (pointer: fine) {
  html:root .chip.u-btn.u-chip {
    height: var(--h-sm);
    min-height: 0;
    padding-block: 0;
  }
}
html:root .monitor-luna :is(input, textarea).u-input {
  font-size: var(--u-body);
}
.nav-items {
  display: grid;
  gap: var(--u-space-2);
}
.tab.u-btn {
  font-size: var(--fs-md);
}
html:root .tab.u-btn {
  border-radius: var(--u-radius-inner);
}
/* Filter search, selects and refresh actions share a 44px toolbar row. */
html:root #search.u-input {
  height: var(--u-tap);
  min-height: var(--u-tap);
}
/* Header controls own real layout space at every width, including during live resize. */
.topbar-tools .btn:is(.monitor-luna-launcher, .back-to-top) {
  position: static;
  width: var(--u-tap);
  min-width: var(--u-tap);
  height: var(--u-tap);
  animation: none;
}
.topbar-tools :is(.monitor-luna-launcher, .account-button) {
  width: var(--u-tap);
  min-width: var(--u-tap);
  height: var(--u-tap);
  padding: 0;
  border-radius: var(--u-radius-pill);
}
.topbar-tools .monitor-luna-launcher .ai-mascot {
  width: 40px;
  height: 40px;
}
.topbar-tools .monitor-luna-launcher:is(:hover, [aria-expanded='true']) {
  background: var(--surface-hover);
}
#main {
  padding-bottom: calc(var(--u-tap) + var(--u-space-6) + env(safe-area-inset-bottom, 0px));
}
/* Keep inline help identifiable without changing Monitor green. */
#content a[href$='#agent-access-code'] {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.birthday-generator [aria-pressed='true'] {
  background: var(--u-sheet);
}
/* Phone chrome has one title row; status, warnings and refresh stay compact. */
.auth-banner-short,
.auth-banner .auth-banner-details {
  display: none;
}
@media (max-width: 759px) {
  :root {
    --topbar-h: 60px;
    scroll-padding-top: calc(var(--topbar-h) + var(--u-space-4));
  }
  :root[data-monitor-page='settings'] {
    scroll-padding-top: calc(var(--topbar-h) + var(--u-tap) + var(--u-space-5));
  }
  .topbar {
    gap: var(--u-space-2);
  }
  .page-header {
    gap: var(--u-space-2);
    margin-bottom: var(--u-space-3);
  }
  :root[data-monitor-page='settings'] .page-heading {
    display: none;
  }
  .page-actions {
    gap: var(--u-space-2);
  }
  #refresh {
    width: var(--u-tap);
    min-width: var(--u-tap);
    height: var(--u-tap);
    padding: 0;
    border-radius: var(--u-radius-pill);
    flex: none;
  }
  #refresh .btn-label {
    display: none;
  }
  .auth-banner {
    align-items: center;
    gap: var(--u-space-2);
    min-height: var(--u-tap);
    padding: 0 var(--u-space-2) 0 var(--u-space-3);
    margin-bottom: var(--u-space-2);
    border-radius: var(--u-radius-inner);
    font-size: var(--fs-xs);
    flex-wrap: nowrap;
  }
  .auth-banner > span {
    min-width: 0;
    flex: 1;
  }
  .auth-banner-full {
    display: none;
  }
  .auth-banner-short,
  .auth-banner .auth-banner-details {
    display: inline-flex;
    white-space: nowrap;
  }
  .auth-banner .auth-banner-details {
    flex: none;
    min-height: var(--u-tap);
    padding-inline: var(--u-space-2);
    font-size: var(--fs-xs);
  }
  .directory-bar:has(> .tabs) {
    position: sticky;
    top: var(--topbar-h);
    z-index: 16;
    background: var(--surface-0);
  }
  .broadcast-switcher {
    position: sticky;
    top: var(--topbar-h);
    z-index: 16;
    padding: var(--u-space-2);
    background: var(--surface-0);
  }
  .broadcast-switcher > .panel-header {
    display: none;
  }
}
/* #endregion */

/* #region zone:monitor.ui.reading-size — ขนาดอ่านบนจอสัมผัส */
@media (max-width: 767px), (pointer: coarse) {
  :root {
    --u-body: var(--u-text-reading);
  }
}
/* #endregion */