/* frontend/styles/tokens.css */
:root {
  color-scheme: light;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  font-family:
    Inter,
    HarmonyOS Sans SC,
    Noto Sans SC,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    sans-serif;
}
html[data-theme=dark] {
  color-scheme: dark;
}
:root {
  --top: 0px;
  --nav: 0px;
}
:root {
  --codex-accent: #6d5bd0;
  --codex-accent-soft: #ece7fa;
  --codex-accent-text: #5443b8;
  --danger: #c2412f;
  --danger-soft: #faeae6;
  --warn: #b3740a;
  --warn-soft: #faf0dd;
  --success: #0e8a6d;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius: var(--radius-16);
  --font-body: 15px;
  --font-chat: 16px;
  --font-meta: 12px;
}
html[data-theme=dark] {
  --codex-accent: #a08ef0;
  --codex-accent-soft: #2c2745;
  --codex-accent-text: #b9adf6;
  --danger: #ef7d6a;
  --danger-soft: #3a201c;
  --warn: #e5b056;
  --warn-soft: #372a15;
  --success: #3cb893;
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, .3);
  --shadow: 0 18px 52px rgba(0, 0, 0, .48);
}
:root {
  --bg: #f6f7f6;
  --surface: #f1f3f1;
  --surface-float: #ffffff;
  --surface-strong: #e9eeeb;
  --line: #dfe4e1;
  --line-soft: #e9ecea;
  --text: #17201c;
  --muted: #66706b;
  --faint: #8d9691;
  --accent: #17775c;
  --accent-text: #116449;
  --accent-soft: #e5f2ed;
  --shadow-soft: none;
  --shadow: 0 8px 24px rgba(23, 32, 28, .08);
}
html[data-theme=dark] {
  --bg: #111513;
  --surface: #181e1b;
  --surface-float: #171c1a;
  --surface-strong: #202824;
  --line: #2b3430;
  --line-soft: #242c28;
  --text: #edf2ef;
  --muted: #a3ada7;
  --faint: #758078;
  --accent: #42a987;
  --accent-text: #70c9aa;
  --accent-soft: #19342b;
}

/* frontend/styles/base.css */
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
body {
  -webkit-tap-highlight-color: transparent;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
button:focus {
  outline: none;
}
input:focus {
  outline: none;
}
textarea:focus {
  outline: none;
}
dialog {
  width: min(calc(100vw - 24px), 520px);
  max-height: calc(100dvh - 34px);
  padding: 0;
  border: 0;
  border-radius: 17px;
  color: var(--text);
  background: transparent;
  box-shadow: var(--shadow);
}
dialog::backdrop {
  background: #00000075;
  backdrop-filter: blur(2px);
}
body[data-mode=local] #attachment-button,
body[data-mode=local] #reasoning-chip {
  display: none !important;
}
body[data-mode=local] #composer-model-button .material-symbols-rounded {
  font-size: 0;
}
body[data-mode=local] #composer-model-button .material-symbols-rounded:before {
  content: "memory";
  font-size: 22px;
}
body[data-mode=local] .composer {
  grid-template-columns: minmax(0, 1fr) 42px 42px 48px;
}
body[data-mode=local] .composer #hermes-input {
  grid-column: 1;
}
html[data-theme=dark] .mode-context-chip {
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *:before {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *:after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}
html[data-theme=dark] .floating-menu,
html[data-theme=dark] .floating-actions,
html[data-theme=dark] .composer {
  background: var(--surface-float);
  border-color: var(--line);
}
html[data-theme=dark] .message-error > button {
  background: var(--surface-float);
  border-color: var(--line);
}
html[data-theme=dark] .message-error {
  background: #321d1a;
}
html[data-theme=dark] .message-error p {
  color: #c9b4af;
}
html[data-theme=dark] .contact-runtime.planned {
  color: #c7b6e3;
  background: #302840;
}
html[data-theme=dark] .contact-list,
html[data-theme=dark] .contact-workspace-link,
html[data-theme=dark] .space-list {
  box-shadow: none;
}
body {
  font-size: var(--font-body);
  line-height: 1.55;
}
small {
  font-size: var(--font-meta);
  line-height: 1.45;
}
h1,
h2,
h3,
strong {
  letter-spacing: -.01em;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-12);
}
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-12);
}
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-12);
}
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-12);
}
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-12);
}
button:disabled {
  opacity: .45;
  cursor: default;
}
input:disabled {
  opacity: .45;
  cursor: default;
}
textarea:disabled {
  opacity: .45;
  cursor: default;
}
select:disabled {
  opacity: .45;
  cursor: default;
}
html[data-theme=dark] .message.user .user-bubble,
html[data-theme=dark] .user-bubble,
html[data-theme=dark] .personal-event.owner .personal-bubble {
  background: var(--accent);
  color: #0d1f19;
}
html[data-theme=dark] .drawer {
  background: #211e1a;
}
@media (max-height: 480px) and (orientation: landscape) {
  body[data-page=contacts] .main {
    padding-bottom: calc(48px + var(--safe-bottom));
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  body[data-page=resources] .main {
    padding-bottom: calc(48px + var(--safe-bottom));
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  body[data-page=radar] .main {
    padding-bottom: calc(48px + var(--safe-bottom));
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  body[data-page=me] .main {
    padding-bottom: calc(48px + var(--safe-bottom));
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  body[data-page=pony] .main {
    padding-bottom: calc(48px + var(--safe-bottom));
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  body[data-page=record] .main {
    padding-bottom: calc(48px + var(--safe-bottom));
  }
}
body[data-page=contacts] .bottom-nav,
body[data-page=resources] .bottom-nav,
body[data-page=radar] .bottom-nav,
body[data-page=me] .bottom-nav,
body[data-page=pony] .bottom-nav,
body[data-page=record] .bottom-nav {
  display: grid !important;
}
body[data-page=contacts],
body[data-page=resources],
body[data-page=radar],
body[data-page=me],
body[data-page=pony],
body[data-page=record] {
  --nav: 60px;
}
body[data-page=contacts] .main,
body[data-page=resources] .main,
body[data-page=radar] .main,
body[data-page=me] .main,
body[data-page=pony] .main,
body[data-page=record] .main {
  padding-bottom: calc(60px + var(--safe-bottom));
}
button.fnos-file-row {
  width: 100%;
  padding: 0;
  color: var(--text);
  text-align: left;
}

/* frontend/styles/components.css */
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  background: transparent;
}
.icon-button:active {
  background: var(--surface-strong);
}
.model-button {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.model-button > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
}
.model-button .material-symbols-rounded {
  font-size: 17px;
  color: var(--muted);
}
.welcome-grid button {
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  text-align: left;
}
.welcome-grid button:active {
  background: var(--surface);
}
.welcome-grid button > .material-symbols-rounded:first-child {
  color: var(--accent);
}
.welcome-grid button > span:nth-child(2) {
  display: grid;
  min-width: 0;
}
.welcome-grid button > .material-symbols-rounded:last-child {
  color: var(--faint);
  font-size: 18px;
}
.markdown-body > :first-child {
  margin-top: 0;
}
.markdown-body > :last-child {
  margin-bottom: 0;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin: 1.15em 0 .45em;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.markdown-body h1 {
  font-size: 22px;
}
.markdown-body h2 {
  font-size: 18px;
}
.markdown-body h3 {
  font-size: 16px;
}
.markdown-body ul,
.markdown-body ol {
  margin: .65em 0;
  padding-left: 1.45em;
}
.markdown-body li + li {
  margin-top: .28em;
}
.markdown-body blockquote {
  margin: .85em 0;
  padding: 6px 11px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
}
.markdown-body a {
  color: var(--accent-text);
}
.markdown-body img {
  max-width: 100%;
  height: auto;
}
.markdown-body :not(pre) > code {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font-size: .9em;
}
.markdown-body table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 13px;
}
.markdown-body th,
.markdown-body td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.markdown-body th {
  background: var(--surface);
}
.code-toolbar button {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  color: #d4d4d8;
  background: transparent;
  border-radius: 6px;
  font-size: 11px;
}
@keyframes typing {
  0%, 70%, to {
    transform: translateY(0);
    opacity: .35;
  }
  35% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.tool-detail-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 0;
  padding: 0 4px 0 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}
.tool-detail-toggle .material-symbols-rounded {
  font-size: 16px;
}
@keyframes stream-caret-blink {
  50% {
    opacity: .18;
  }
}
.partial-answer .markdown-body {
  color: var(--muted);
  font-size: 13px;
}
.assistant-actions button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}
.assistant-actions button:active {
  background: var(--surface);
}
@keyframes process-spin {
  to {
    transform: rotate(360deg);
  }
}
.run-status-strip button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--danger);
  border-radius: 9px;
  background: var(--danger-soft);
  font-size: 11px;
  font-weight: 650;
}
.run-status-inline button {
  min-height: 30px;
  margin-left: auto;
  padding: 0 7px;
  color: var(--muted);
  border-radius: 7px;
  background: transparent;
  font-size: 10px;
}
.run-status-inline button:active {
  color: var(--danger);
  background: var(--danger-soft);
}
@keyframes status-pulse {
  50% {
    transform: scale(.62);
    opacity: .3;
  }
}
.approval-actions button {
  min-height: 42px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
}
.approval-actions button:disabled {
  opacity: .55;
}
.task-card-actions button {
  min-height: 30px;
  padding: 0 9px;
  color: var(--danger);
  border-radius: 8px;
  background: var(--danger-soft);
  font-size: 10px;
}
.task-card-actions .task-action-buttons {
  display: flex;
  gap: 5px;
}
.task-card-actions button.allow {
  color: #fff;
  background: var(--accent);
}
.task-card-actions button.reject {
  color: var(--danger);
  background: var(--danger-soft);
}
.task-empty {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.task-empty > .material-symbols-rounded {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 31px;
}
.task-empty strong {
  color: var(--text);
}
.task-empty p {
  max-width: 240px;
  margin: 4px 0 12px;
  font-size: 12px;
}
.task-empty button {
  min-height: 38px;
  padding: 0 13px;
  color: #fff;
  border-radius: 10px;
  background: var(--accent);
  font-weight: 650;
}
.bottom-nav button {
  position: relative;
}
.nav-badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 8px);
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
  border-radius: 9px;
  color: #fff;
  font-style: normal;
  font-size: 9px;
}
.icon-button.small {
  width: 36px;
  height: 36px;
}
.drawer-footer button {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  text-align: left;
  background: transparent;
}
.drawer-footer button:active {
  background: var(--surface);
}
.drawer-footer button > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.floating-actions button {
  display: grid;
  place-items: center;
  padding: 0;
}
#model-button {
  display: none !important;
}
.markdown-body img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.assistant-actions button {
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}
.welcome-grid button {
  min-height: 38px;
  display: block;
  padding: 0 13px;
  border-radius: 19px;
  background: transparent;
  font-size: 12px;
}
.welcome-grid button > .material-symbols-rounded {
  display: none;
}
.welcome-grid button small {
  display: none;
}
.active-task-strip button {
  min-height: 30px;
  padding: 0 4px;
  color: var(--danger);
  background: transparent;
  font-size: 12px;
}
.attachment-chip button {
  color: var(--accent-text);
  background: transparent;
}
@keyframes pulse {
  50% {
    opacity: .45;
  }
}
.text-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  color: var(--accent-text);
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
}
.text-button .material-symbols-rounded {
  font-size: 17px;
}
.segmented button {
  min-width: 48px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
}
.segmented button.active {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-weight: 700;
}
.row-actions button {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 11px;
}
.inline-state button {
  min-height: 44px;
  padding: 0 12px;
  color: var(--accent-text);
  border-radius: 8px;
  background: var(--accent-soft);
  font-weight: 650;
}
.empty-state {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
  font-size: 12px;
}
.settings-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.settings-list > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.setting-toggle {
  position: relative;
  width: 34px;
  height: 20px;
  justify-self: end;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background .18s ease;
}
.setting-toggle:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-float);
  box-shadow: 0 1px 4px #1418162e;
  transition: transform .18s ease;
}
.setting-toggle.active {
  background: var(--accent);
}
.setting-toggle.active:after {
  transform: translate(14px);
}
.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--muted);
  background: transparent;
}
.bottom-nav button.active .material-symbols-rounded {
  font-variation-settings:
    "FILL" 1,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
}
.field {
  display: grid;
  gap: 5px;
}
.field label {
  font-weight: 650;
}
.field input,
.field textarea,
.path-bar input {
  width: 100%;
  outline: 0;
}
.file-editor {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: var(--surface-float);
}
.field input,
.path-bar input {
  padding: 0 11px;
}
.field textarea {
  padding: 10px 11px;
  resize: vertical;
}
.path-bar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}
.command-presets button {
  flex: 0 0 auto;
  padding: 0 9px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  font-size: 10px;
}
.file-editor {
  min-height: 54vh;
  padding: 10px;
  resize: vertical;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  font-size: 12px;
  line-height: 1.55;
}
.dialog-actions button {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 10px;
  background: var(--surface-strong);
  font-weight: 650;
}
.dialog-card {
  max-height: calc(100dvh - 34px);
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
  overflow-y: auto;
}
.dialog-title {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dialog-title > div {
  min-width: 0;
  flex: 1;
  display: grid;
}
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.large-dialog {
  min-height: min(76vh, 670px);
}
.option-list button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  text-align: left;
  background: transparent;
}
.option-list button > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.option-list button > .material-symbols-rounded:first-child {
  color: var(--accent-text);
}
.bottom-sheet {
  width: 100%;
  max-width: 680px;
  max-height: 88dvh;
  margin: auto auto 0;
  border-radius: 20px 20px 0 0;
}
.bottom-sheet .dialog-card {
  max-height: 88dvh;
  padding-bottom: max(16px, var(--safe-bottom));
  border-bottom: 0;
}
.sheet-handle {
  width: 38px;
  height: 4px;
  flex: 0 0 auto;
  margin: -5px auto 1px;
  border-radius: 4px;
  background: var(--line);
}
.model-sheet .dialog-card {
  height: min(86dvh, 760px);
}
.model-group-head button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin-left: auto;
  color: var(--muted);
  border-radius: 8px;
  background: transparent;
}
.favorite-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--faint);
  border-radius: 10px;
  background: transparent;
}
.favorite-button.active {
  color: var(--warn);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav) + var(--safe-bottom) + 12px);
  z-index: 120;
  max-width: calc(100vw - 28px);
  padding: 9px 13px;
  border-radius: 10px;
  color: #fff;
  background: #18181beb;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: .18s ease;
  font-size: 12px;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%);
}
@media (max-width: 370px) {
  .icon-button {
    width: 40px;
  }
}
.local-picker-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 24px;
  text-align: center;
}
.local-picker-empty > .material-symbols-rounded {
  font-size: 34px;
}
.local-picker-empty strong {
  color: var(--text);
  font-size: 13px;
}
.local-picker-empty small {
  max-width: 240px;
  font-size: 10px;
  line-height: 1.5;
}
.welcome-grid button > span:last-child {
  display: inline;
}
@keyframes local-pulse {
  0%, 70%, to {
    opacity: .28;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.sheet-note {
  margin: 9px 3px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.manual-primary-actions button {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  background: var(--surface-float);
}
.manual-presets button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 11px;
}
.project-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
@media (max-width: 430px) {
  .project-actions button {
    min-width: 0;
    width: 100%;
    white-space: normal;
  }
}
.pony-recent-empty {
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-float);
}
.pony-recent-empty > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #397bb7;
  background: color-mix(in srgb, #397bb7 13%, var(--surface));
  font-size: 21px;
}
.pony-recent-empty > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.pony-recent-empty small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.pony-recent-empty strong {
  font-size: 12px;
}
.notification-summary.state-loading {
  background: var(--surface);
}
.notification-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
}
.notification-empty .material-symbols-rounded {
  font-size: 30px;
}
.notification-empty p {
  max-width: 260px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}
@media (max-width: 430px) {
  .manual-primary-actions button {
    min-height: 78px;
    padding: 7px;
  }
}
.model-button {
  width: 100%;
  max-width: 108px;
}
@media (max-width: 360px) {
  .model-button {
    max-width: 86px;
    padding-inline: 8px;
  }
}
.markdown-body p {
  margin: .62em 0;
}
.assistant-actions button {
  width: 36px;
  height: 36px;
  min-height: 36px;
}
@keyframes page-enter {
  0% {
    opacity: .72;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.home-empty-branch {
  display: block;
  padding: 10px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}
.markdown-body .table-scroll table {
  width: max-content;
  min-width: 620px;
  table-layout: auto;
}
.markdown-body .table-scroll th,
.markdown-body .table-scroll td {
  min-width: max-content;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.runtime-select-row button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 650;
}
.runtime-select-row button.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  color: var(--accent-text);
  background: var(--accent-soft);
}
.model-search-sheet .dialog-card {
  max-height: min(82dvh, 760px);
}
.model-search-form > button {
  min-width: 64px;
}
.public-model-row > button,
.public-model-row > a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 11px;
  text-decoration: none;
}
@keyframes local-caret {
  0%, 48% {
    opacity: 1;
  }
  49%, to {
    opacity: 0;
  }
}
.field select {
  width: 100%;
  padding: 0 11px;
  outline: 0;
  color: var(--text);
}
.contact-health button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
}
.personal-actions button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
}
.compact-sheet {
  gap: 12px;
}
.codex-goal-options .field {
  margin: 0;
}
@keyframes personalTyping {
  0%, 70%, to {
    opacity: .28;
    transform: translateY(0);
  }
  35% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes personalCursor {
  0%, 48% {
    opacity: 1;
  }
  49%, to {
    opacity: .15;
  }
}
.markdown-body {
  font-size: var(--font-chat);
  line-height: 1.6;
}
@media (hover: hover) {
  .icon-button:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .bottom-nav button:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .drawer-footer button:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .option-list button:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .settings-list > button:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .command-presets button:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .manual-presets button:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .manual-primary-actions button:hover {
    background: var(--surface-strong);
  }
}
.today-task-list button,
.today-signal-list button {
  width: 100%;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.today-signal-list button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.today-signal-list button:last-child {
  border-bottom: 0;
}
.today-signal-list button > span {
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 800;
}
.today-signal-list button strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.today-signal-list button small {
  max-width: 72px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-task-list button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
}
.today-task-list button > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 20px;
}
.today-task-list button > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
@media (max-width: 360px) {
  .today-signal-list button {
    grid-template-columns: 20px minmax(0, 1fr);
  }
}
@media (max-width: 360px) {
  .today-signal-list button small {
    display: none;
  }
}
.state-loading,
.is-loading {
  opacity: .7;
}
.floating-actions button {
  border: 1px solid var(--line);
  background: var(--surface-float);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
}
.floating-actions button:active {
  background: var(--surface-strong);
}
.dialog-actions .primary {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-12);
  min-height: 44px;
}
.dialog-actions .secondary {
  background: var(--surface-strong);
  color: var(--text);
  border-radius: var(--radius-12);
  min-height: 44px;
}
.markdown-body .table-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.drawer-footer button {
  min-height: 48px;
  border-radius: var(--radius-16);
}
.bottom-sheet .dialog-card,
.dialog-card,
.compact-sheet {
  border-radius: var(--radius-24);
  background: var(--surface-float);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.dialog-title strong {
  font-size: 17px;
}
.dialog-title small {
  color: var(--muted);
  font-size: 12px;
}
.settings-list > button {
  min-height: 52px;
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.field input,
.field select,
.field textarea,
.path-bar input,
.model-search-form .search-box input {
  border-radius: var(--radius-12);
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 44px;
  font-size: var(--font-body);
}
.field input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.field select:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.field textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.field label {
  color: var(--muted);
  font-size: 12px;
}
.field small {
  color: var(--faint);
  font-size: 11px;
}
.option-list button {
  min-height: 48px;
  border-radius: var(--radius-16);
}
.option-list button.active {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.command-presets button,
.manual-presets button {
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
  background: var(--surface-float);
  min-height: 44px;
}
.bottom-nav button.active {
  color: var(--accent-text);
}
.bottom-nav button.active .material-symbols-rounded {
  color: var(--accent);
}
.nav-badge {
  background: var(--danger);
}
.empty-state,
.local-picker-empty,
.notification-empty,
.notification-summary.state-loading {
  color: var(--muted);
}
@media (max-width: 430px) {
  .dialog-card {
    border-radius: var(--radius-20);
  }
}
@media (max-width: 430px) {
  .bottom-sheet .dialog-card {
    border-radius: var(--radius-20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-actions button {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dialog-card {
    transition: none;
    animation: none;
  }
}
.bottom-nav button {
  min-width: 0;
  min-height: 48px;
}
.bottom-nav button small {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav button {
    transition: none;
    animation: none;
  }
}
.dialog-card,
.dialog-card * {
  min-width: 0;
}
.markdown-body {
  overflow-wrap: anywhere;
  word-break: normal;
}
.floating-actions button {
  width: 44px;
  height: 44px;
}
.floating-actions button {
  border-radius: 11px;
}
@media (prefers-reduced-motion: reduce) {
  .floating-actions button {
    transition: none;
  }
}
.hub-attachment-chip button {
  min-height: 32px;
  margin-left: auto;
  padding: 0 8px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}
.me-list > button {
  min-height: 62px;
}
@media (min-width: 1000px) {
  .me-list > button {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface-float);
  }
}
@media (prefers-reduced-motion: reduce) {
  .me-list > button {
    transition: none;
    animation: none;
  }
}
.model-library-toolbar > .icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-float);
}
.model-search-inline > button {
  min-width: 72px;
  min-height: 44px;
  border-radius: 12px;
}
.public-model-row > button,
.public-model-row > a {
  min-width: 66px;
  min-height: 40px;
  margin-top: 1px;
  border-radius: 11px;
  font-size: 10px;
}
@media (max-width: 360px) {
  .public-model-row > button,
  .public-model-row > a {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 360px) {
  .model-search-inline > button {
    width: 100%;
  }
}
#attachment-chip,
#hub-attachment-chip,
#codex-attachment-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  max-width: 100%;
  padding: 10px 4px;
}
#attachment-chip[hidden],
#hub-attachment-chip[hidden],
#codex-attachment-strip[hidden] {
  display: none;
}
.attachment-preview {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}
.attachment-preview > button {
  position: absolute;
  right: -3px;
  top: -5px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-size: 22px;
  display: grid;
  place-items: center;
}
.attachment-preview-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  padding: 4px;
}
.attachment-preview.photo .attachment-preview-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  background: #0009;
  border-radius: 0 0 13px 13px;
}
.attachment-preview.file {
  padding-top: 14px;
  text-align: center;
}
#hermes-attachment-dialog {
  background: var(--surface);
  padding: 16px;
}
#hermes-attachment-dialog .record-capture-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.briefing-expanded > summary {
  padding: 18px 0;
  cursor: pointer;
  font-weight: 600;
}
.radar-full-content {
  overflow-wrap: anywhere;
}

/* frontend/styles/resources.css */
.resource-directory {
  margin-top: 18px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-float);
}
.resource-directory > summary {
  padding: 14px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.resource-directory > summary small {
  display: block;
  margin: 4px 0 0 16px;
  color: var(--muted);
}
.resource-directory-body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  min-width: 0;
}
.resource-directory-body > input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--surface);
}
.resource-directory-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.resource-directory-filters button {
  padding: 9px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
}
.resource-directory-filters button[aria-pressed=true] {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.resource-directory [data-directory-status],
.resource-directory-dialog p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.resource-directory [data-directory-rows] {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.resource-directory-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
}
.resource-directory-row > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.resource-directory-row small {
  color: var(--muted);
}
.resource-directory-row em {
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.resource-directory [data-tone=warning],
.resource-directory [data-tone=error],
.resource-directory-dialog .resource-directory-warning {
  color: var(--warn);
}
.resource-directory-dialog {
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  box-sizing: border-box;
  overflow: auto;
  padding: 16px;
  color: var(--text);
  background: var(--surface-float);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.resource-directory-dialog header {
  display: flex;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
}
.resource-directory-dialog h2 {
  margin: 0;
  min-width: 0;
  max-height: 30dvh;
  overflow: auto;
  overflow-wrap: anywhere;
  font-size: 18px;
}
.resource-directory-dialog header button {
  flex-shrink: 0;
  padding: 8px;
}
.resource-directory-dialog dl {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
}
.resource-directory-dialog dt {
  color: var(--muted);
  margin-top: 8px;
}
.resource-directory-dialog dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.resource-directory-dialog pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.resource-directory-truth {
  display: grid;
  gap: 4px;
  padding: 12px 0;
}
.resource-directory-dialog > button {
  width: 100%;
  margin-top: 14px;
  min-height: 44px;
  white-space: normal;
}
.service-group h3 {
  margin: 0 0 5px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.service-icon {
  margin: 0;
}
.service-copy {
  min-width: 0;
  display: grid;
}
.service-card small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-open {
  color: var(--faint);
  font-size: 17px;
}
.service-list.editing .service-open {
  opacity: 0;
}
@media (max-width: 430px) {
  .service-card {
    min-height: 60px;
  }
}
.node-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--line);
}
.node-row {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  text-align: left;
  background: var(--surface-float);
}
.node-row.active {
  background: var(--accent-soft);
}
.node-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
}
.node-row.active .node-avatar {
  color: var(--accent-text);
  background: var(--surface-float);
}
.node-avatar .material-symbols-rounded {
  font-size: 20px;
}
.node-copy {
  min-width: 0;
  display: grid;
}
.node-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.node-title-line strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.node-copy small {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-metrics {
  min-width: 78px;
  display: grid;
  gap: 1px;
  text-align: right;
}
.node-metrics strong {
  font-size: 12px;
}
.node-metrics small {
  color: var(--muted);
  font-size: 10px;
}
.node-row > .material-symbols-rounded {
  color: var(--faint);
  font-size: 18px;
}
.node-detail {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-float);
  overflow: hidden;
}
.node-detail-head {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.node-detail-head strong {
  font-size: 13px;
}
.node-detail-head small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.node-truth-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0 8px 8px;
  padding: 8px 9px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.node-truth-note.warning {
  color: var(--warn);
  background: var(--warn-soft);
}
.node-truth-note > .material-symbols-rounded {
  font-size: 19px;
}
.node-truth-note > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.node-truth-note strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.node-truth-note small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.node-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
.node-quick-actions button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
}
.node-quick-actions .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 18px;
}
.service-card {
  position: relative;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 11px;
  cursor: pointer;
}
.service-card:active {
  background: var(--surface);
}
.service-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.service-icon .material-symbols-rounded {
  font-size: 23px;
}
.service-card strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.service-list.editing .edit-service {
  display: grid;
}
.service-list.editing .service-card {
  background: var(--surface);
}
.profile-grid {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.profile-grid::-webkit-scrollbar {
  display: none;
}
.profile-grid button {
  min-width: 112px;
  min-height: 57px;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  text-align: left;
  background: var(--surface-float);
}
.profile-grid button.active {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: var(--accent-soft);
}
.profile-grid .material-symbols-rounded {
  grid-row: 1 / 3;
  color: var(--accent-text);
  font-size: 20px;
}
.profile-grid strong {
  font-size: 12px;
  white-space: nowrap;
}
.profile-grid small {
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}
.operation-summary {
  min-height: 58px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.operation-summary > .material-symbols-rounded {
  font-size: 21px;
}
.operation-summary > span:last-child {
  min-width: 0;
  display: grid;
}
.operation-summary strong,
.operation-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operation-summary strong {
  color: var(--text);
  font-size: 12px;
}
.operation-summary small {
  color: var(--muted);
  font-size: 10px;
}
.operation-summary.has-error {
  color: var(--warn);
  background: var(--warn-soft);
}
.operation-row {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}
.operation-trailing {
  min-width: 72px;
  display: grid;
  justify-items: end;
  gap: 5px;
}
.operation-trailing button {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 8px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 10px;
  font-weight: 650;
}
.operation-actions {
  display: flex;
  gap: 4px;
}
.system-service-more {
  border-top: 1px solid var(--line);
}
.system-service-more > summary {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
}
.system-service-more > summary::-webkit-details-marker {
  display: none;
}
.system-service-more > summary > span:first-child {
  min-width: 0;
  display: grid;
}
.system-service-more > summary strong {
  color: var(--text);
  font-size: 12px;
}
.system-service-more > summary small {
  font-size: 10px;
}
.system-service-more > summary > .material-symbols-rounded {
  font-size: 18px;
  transition: transform .18s ease;
}
.system-service-more[open] > summary > .material-symbols-rounded {
  transform: rotate(180deg);
}
@media (min-width: 700px) {
  .service-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 370px) {
  .service-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.service-card {
  min-height: 64px;
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  text-align: left;
  background: var(--surface-float);
}
.service-card small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
@media (max-width: 430px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}
.monitor-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  margin-bottom: 9px;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface);
}
.monitor-tabs button {
  min-height: 38px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 9px;
}
.monitor-tabs .material-symbols-rounded {
  font-size: 18px;
}
.monitor-panel {
  display: none;
}
.monitor-panel.active {
  display: block;
}
.monitor-alerts {
  margin-top: 8px;
}
.monitor-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}
.monitor-evidence > header {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-float);
}
.monitor-evidence > header strong {
  font-size: 10px;
}
.monitor-evidence > header small {
  color: var(--muted);
  font-size: 8px;
}
.monitor-evidence > div {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 8px;
  background: var(--surface-float);
}
.monitor-evidence > div > span {
  color: var(--muted);
  font-size: 8px;
}
.monitor-evidence > div > strong {
  font-size: 11px;
}
.monitor-evidence > div > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.service-card {
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
}
.service-card .service-icon {
  width: 40px;
  height: 40px;
  margin: 0;
}
.service-card.unavailable {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}
.service-copy strong {
  display: flex;
  align-items: center;
  gap: 5px;
}
.service-health {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--faint);
}
.service-health.online {
  background: var(--accent);
}
.service-health.offline {
  background: var(--danger);
}
.service-state {
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
}
.service-card.unavailable .service-state {
  color: var(--danger);
  background: var(--danger-soft);
}
@media (max-width: 430px) {
  .service-state {
    display: none;
  }
}
@media (max-width: 430px) {
  .service-card {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
  }
}
.node-quick-actions button:disabled {
  color: var(--faint);
}
.compact-page-head.workspace-head {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: calc(58px + var(--safe-top));
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 8px;
  margin: 0 -14px 12px;
  padding: var(--safe-top) 10px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.workspace-head > div {
  min-width: 0;
}
.workspace-head h1 {
  font-size: 17px;
}
.workspace-head p {
  margin-top: 1px;
  font-size: 11px;
}
.workspace-head .icon-button {
  width: 40px;
  height: 40px;
}
.workspace-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 2px 8px;
}
.workspace-section-head h2 {
  margin: 0;
  font-size: 15px;
}
.workspace-section-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.workspace-section-head.apps-head {
  margin-top: 20px;
}
.workspace-section-head.live-services-head {
  margin-top: 18px;
}
.workspace-section-head .head-actions {
  display: flex;
  gap: 2px;
}
.workspace-section-head .icon-button {
  width: 36px;
  height: 36px;
}
#page-workspace .monitor-panel {
  display: block;
}
#page-workspace .node-detail {
  margin-bottom: 8px;
}
#page-workspace .service-list {
  padding-bottom: 8px;
}
.live-service-catalog {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.live-service-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-float);
}
.live-service-summary.warning {
  border-color: color-mix(in srgb, var(--warning, #b47a20) 35%, var(--line));
}
.live-service-summary > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.live-service-summary strong {
  font-size: 13px;
}
.live-service-summary small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.live-service-summary button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface);
}
.live-service-summary .material-symbols-rounded {
  font-size: 18px;
}
.live-service-group {
  min-width: 0;
}
.live-service-group h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.live-service-group h3 span {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 10px;
  color: var(--faint);
  background: var(--surface);
  font-size: 9px;
  text-align: center;
}
.live-service-group > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.live-service-row {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: inherit;
  background: var(--surface-float);
  text-align: left;
  overflow: hidden;
}
.live-service-row > .material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
  font-size: 17px;
}
.live-service-row.online > .material-symbols-rounded {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.live-service-row.offline > .material-symbols-rounded {
  color: var(--danger);
  background: var(--danger-soft);
}
.live-service-row.warning > .material-symbols-rounded {
  color: var(--warning, #a66b13);
  background: color-mix(in srgb, var(--warning, #a66b13) 11%, transparent);
}
.live-service-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.live-service-row strong,
.live-service-row small,
.live-service-row em {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.live-service-row strong {
  font-size: 12px;
  line-height: 1.35;
}
.live-service-row small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.live-service-row em {
  color: var(--faint);
  font-size: 9px;
  font-style: normal;
  line-height: 1.3;
}
.live-service-row > i {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  white-space: nowrap;
}
.live-service-row.online > i {
  color: var(--accent-text);
}
.live-service-row.offline > i {
  color: var(--danger);
}
.service-mini-actions {
  display: flex;
  gap: 5px;
}
.contact-workspace-link {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 15px;
  text-align: left;
  background: transparent;
}
.contact-workspace-link:active {
  background: var(--surface);
}
.contact-workspace-link > .material-symbols-rounded:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.contact-workspace-link > span:nth-child(2) {
  display: grid;
  gap: 1px;
}
.contact-workspace-link strong {
  font-size: 13px;
}
.contact-workspace-link small {
  color: var(--muted);
  font-size: 10px;
}
.contact-workspace-link > .material-symbols-rounded:last-child {
  color: var(--faint);
  font-size: 18px;
}
@media (hover: hover) {
  .contact-workspace-link:hover {
    background: var(--surface-strong);
  }
}
.operation-group {
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.operation-group > button {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  color: var(--muted);
  text-align: left;
  background: transparent;
}
.operation-group > button > .material-symbols-rounded:first-child {
  color: var(--accent-text);
  font-size: 17px;
}
.operation-group.running > button > .material-symbols-rounded:first-child {
  animation: process-spin 1.1s linear infinite;
}
.operation-group.failed > button > .material-symbols-rounded:first-child {
  color: var(--danger);
}
.operation-group > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.operation-group > button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operation-group > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operation-group > button strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}
.operation-group > button small {
  color: var(--faint);
  font-size: 9px;
}
.operation-group > button > .material-symbols-rounded:last-child {
  color: var(--faint);
  font-size: 17px;
}
.operation-group > .phase-tools {
  margin: 0;
  padding: 0 7px 7px;
  border-top: 1px solid var(--line);
}
.operation-group > .phase-tools .tool-receipt {
  margin-top: 6px;
  background: var(--surface-float);
}
@media (prefers-reduced-motion: reduce) {
  .operation-group.running > button > .material-symbols-rounded:first-child {
    animation: none;
  }
}

/* frontend/styles/hermes.css */
.chat-page {
  position: relative;
  flex-direction: column;
  min-height: 0;
}
.chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.chat-scroll::-webkit-scrollbar {
  display: none;
}
.chat-feed {
  margin: 0 auto;
}
.message {
  margin: 0 0 26px;
}
.message.user {
  display: flex;
  justify-content: flex-end;
}
.message-time {
  position: absolute;
  right: 10px;
  bottom: 3px;
  color: var(--faint);
}
.assistant-message {
  padding-right: 2px;
}
.process-panel.live-process {
  margin-top: 7px;
}
.process-panel.live-process .process-body {
  padding-top: 0;
}
.process-summary {
  align-items: center;
  color: var(--muted);
  text-align: left;
  background: transparent;
}
.process-summary:active {
  background: var(--surface);
}
.process-summary-copy {
  min-width: 0;
}
.process-summary-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.process-summary-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.process-summary-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.process-summary-copy > span {
  color: var(--muted);
}
.process-summary small {
  justify-self: end;
  color: var(--faint);
  font-size: 11px;
}
.process-state {
  color: var(--accent);
}
.process-chevron {
  color: var(--faint);
}
.process-panel.state-failed .process-state,
.process-panel.state-incomplete .process-state {
  color: var(--danger);
}
.process-panel.state-cancelled .process-state {
  color: var(--muted);
}
.process-timeline {
  position: relative;
}
.process-timeline:before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 13px;
  left: 8px;
  width: 1px;
  background: var(--line);
}
.process-step {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  padding: 5px 0 10px;
}
.process-note {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.process-note p {
  margin: .25em 0;
}
.process-note pre,
.process-note table {
  font-size: 11px;
}
.streaming-answer {
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.process-omitted {
  padding: 5px 0 8px;
  color: var(--faint);
  font-size: 11px;
}
.stream-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.12em;
  border-radius: 2px;
  background: var(--accent);
  animation: stream-caret-blink .9s steps(1, end) infinite;
}
.message-error strong {
  display: block;
  margin-bottom: 3px;
}
.message-error p {
  margin: 0;
}
.message-error .error-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.message-error button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface-float);
  font-size: 12px;
  font-weight: 650;
}
.process-panel.state-running .process-state {
  animation: process-spin 1.1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .process-panel.state-running .process-state {
    animation: none;
  }
}
.message-delivery {
  display: block;
  margin: 5px 26px -9px 0;
  color: var(--muted);
  text-align: right;
  font-size: 10px;
}
.process-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.process-timeline:before {
  display: none;
}
.process-phase {
  position: relative;
  margin: 0 0 13px;
}
.process-phase:before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: -12px;
  left: -20px;
  width: 1px;
  background: var(--line);
}
.process-phase:last-child:before {
  bottom: calc(100% - 10px);
}
.process-phase:after {
  content: "";
  position: absolute;
  top: 8px;
  left: -23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.phase-narrative .process-note {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}
.hermes-task-list {
  display: grid;
  gap: 8px;
}
.hermes-task-card {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-float);
  cursor: pointer;
}
.hermes-task-card.state-running {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.hermes-task-card > p {
  margin: 8px 0 5px 36px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.chat-feed {
  width: min(100%, 680px);
  min-height: 100%;
}
.message-time {
  display: none;
}
.streaming-answer {
  margin-top: 0;
}
.process-panel,
.process-panel.live-process {
  margin: 12px 0 2px;
}
.process-summary {
  width: auto;
  min-height: 38px;
  display: inline-grid;
  grid-template-columns: 18px minmax(0, auto) 18px;
  gap: 6px;
  padding: 0 5px 0 0;
  border-radius: 9px;
}
.process-summary-copy {
  display: block;
}
.process-summary-copy strong {
  display: none;
}
.process-summary-copy > span {
  font-size: 12px;
}
.process-summary small {
  display: none;
}
.process-state,
.process-chevron {
  font-size: 17px;
}
.process-body {
  padding: 5px 0 1px 27px;
}
.process-phase {
  margin-bottom: 10px;
}
.earlier-messages {
  min-height: 40px;
  display: block;
  margin: 0 auto 28px;
  padding: 0 14px;
  border-radius: 20px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
}
.composer-zone {
  flex: 0 0 auto;
}
.composer {
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  min-width: 0;
  max-height: 150px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
}
.composer textarea::placeholder {
  color: var(--faint);
}
.composer-action,
.send-button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
}
.composer-meta {
  width: min(100%, 760px);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px auto 0;
  padding: 0 5px;
}
.composer-meta > small {
  overflow: hidden;
  color: var(--faint);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.hermes-setting-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px 0 7px;
  color: var(--muted);
  white-space: nowrap;
}
.hermes-setting-chip:active {
  background: var(--surface);
}
.hermes-setting-chip .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 15px;
}
.new-chat-button {
  padding: 0 13px;
  font-weight: 650;
}
.provider-manage-link {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 10px;
  font-weight: 650;
}
.new-chat-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 10px;
}
.conversation-list {
  min-height: 0;
  overflow-y: auto;
}
.conversation-item {
  width: 100%;
  text-align: left;
  background: transparent;
}
.conversation-item > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.conversation-item small {
  color: var(--faint);
  font-size: 10px;
}
.conversation-item > .material-symbols-rounded:first-child {
  color: var(--muted);
  font-size: 18px;
}
.conversation-item > .material-symbols-rounded:last-child {
  padding: 5px;
  color: var(--faint);
  font-size: 16px;
}
.provider-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}
.provider-tabs::-webkit-scrollbar {
  display: none;
}
.provider-tabs button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--muted);
  background: var(--surface-float);
  font-size: 12px;
}
.provider-tabs button.active {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-soft);
}
.model-provider-badge {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 800;
}
.model-row.selected .model-provider-badge {
  background: var(--accent);
}
.provider-manage-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 12px;
}
.provider-manage-link .material-symbols-rounded {
  font-size: 18px;
}
.provider-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}
.provider-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--surface-float);
}
.provider-logo {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-weight: 800;
}
.provider-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.provider-row strong {
  font-size: 13px;
}
.provider-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}
.provider-state {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}
.provider-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}
.provider-state.connected {
  color: var(--accent-text);
}
.provider-state.connected i {
  background: var(--accent);
}
.provider-row > .material-symbols-rounded {
  color: var(--faint);
  font-size: 18px;
}
.local-chat-welcome .brand-orb {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.local-chat-welcome .welcome-grid .wide {
  grid-column: 1 / -1;
}
.local-chat-message .assistant-meta .brand-orb {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.composer-options {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.composer-options::-webkit-scrollbar {
  display: none;
}
.composer-meta > small {
  flex: 0 1 auto;
}
@media (max-width: 430px) {
  .composer-meta > small {
    display: none;
  }
}
.composer-meta {
  min-height: 31px;
  justify-content: flex-start;
  margin-top: 1px;
  padding-inline: 4px;
}
.conversation-search {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 2px 7px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
}
.conversation-search .material-symbols-rounded {
  font-size: 18px;
}
.conversation-search input {
  min-width: 0;
  flex: 1;
  outline: 0;
  font-size: 12px;
}
.conversation-search input::placeholder {
  color: var(--faint);
}
.conversation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 3px;
  padding: 3px 3px 3px 5px;
}
.conversation-main {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
  text-align: left;
  background: transparent;
}
.conversation-main > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 18px;
}
.conversation-main > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.conversation-item > small {
  color: var(--faint);
  font-size: 10px;
  white-space: nowrap;
}
.conversation-more {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  color: var(--faint);
  background: transparent;
}
.conversation-more:active {
  background: var(--surface-strong);
}
.conversation-more .material-symbols-rounded {
  font-size: 18px;
}
@media (max-width: 360px) {
  .hermes-setting-chip {
    padding-inline: 7px;
  }
}
.composer {
  width: min(100%, 680px);
}
.composer-action .material-symbols-rounded {
  font-size: 25px;
}
.composer-tools .material-symbols-rounded {
  font-size: 22px;
}
.send-button .material-symbols-rounded {
  font-size: 23px;
}
@media (max-width: 430px) {
  .composer-tools {
    display: none;
  }
}
.topbar.chat-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
}
.message.user {
  margin-top: 0;
}
.streaming-answer {
  font-size: 15px;
  line-height: 1.64;
}
.message-error {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  margin-top: 8px;
  padding: 12px;
}
.message-error > .material-symbols-rounded {
  margin-top: 1px;
  color: #c84135;
  font-size: 20px;
}
.message-error strong {
  margin: 0 0 2px;
  font-size: 13px;
}
.message-error p {
  font-size: 12px;
  line-height: 1.45;
}
.message-error > button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 17px;
  color: #8f2e27;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
}
.composer-zone {
  padding: 4px 10px max(8px, var(--safe-bottom));
}
.composer {
  min-height: 52px;
  gap: 0;
  padding: 4px;
}
.composer textarea {
  min-height: 42px;
  padding: 9px 4px;
  line-height: 24px;
}
@media (max-width: 430px) {
  .chat-feed {
    padding-right: 15px;
    padding-left: 15px;
  }
}
@media (max-width: 430px) {
  .composer-zone {
    padding-right: 8px;
    padding-left: 8px;
  }
}
.topbar.chat-hidden .floating-menu,
.topbar.chat-hidden .floating-actions {
  pointer-events: none;
}
.chat-feed {
  padding-top: calc(62px + var(--safe-top));
  padding-bottom: 72px;
}
.local-streaming-answer {
  color: var(--text);
  font-size: 14px;
  line-height: 1.72;
  white-space: normal;
}
.local-streaming-answer > i {
  width: 6px;
  height: 1.15em;
  display: inline-block;
  margin-left: 3px;
  border-radius: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: local-caret 1s steps(1, end) infinite;
}
.record-composer > .send-button {
  width: 46px;
  height: 46px;
  color: #fff;
  background: var(--accent);
}
.personal-composer > .send-button {
  background: #7665ad;
}
.personal-composer.turn-active > .send-button {
  color: #fff;
  background: var(--danger);
}
.message-time,
.composer-meta {
  font-size: var(--font-meta);
  line-height: 1.45;
}
@media (hover: hover) {
  .conversation-item:hover {
    background: var(--surface-strong);
  }
}
.chat-feed,
.chat-scroll {
  background: var(--bg);
}
.local-chat-welcome {
  color: var(--muted);
}
.local-chat-welcome .welcome-grid > * {
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.process-body {
  color: var(--muted);
  font-size: 13px;
}
.message-error {
  border-radius: var(--radius-16);
}
.message-error {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}
.message-error p,
.message-error strong,
.message-delivery.failed {
  color: var(--danger);
}
.message-delivery.queued {
  color: var(--warn);
}
.composer-zone {
  background: var(--bg);
}
.composer {
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.composer textarea {
  font-size: var(--font-chat);
}
.send-button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.composer-action {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}
.composer-action:active {
  background: var(--surface-strong);
}
.send-button.stop {
  background: var(--danger);
}
.composer-tools .material-symbols-rounded,
.composer-tools {
  color: var(--muted);
}
.conversation-item {
  border-radius: var(--radius-16);
  min-height: 48px;
}
.conversation-item.active {
  background: var(--accent-soft);
}
.conversation-item.active strong {
  color: var(--accent-text);
}
.conversation-search input {
  border-radius: var(--radius-12);
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 40px;
}
.model-row.selected .model-provider-badge {
  color: var(--accent-text);
}
.hermes-setting-chip {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
  min-height: 32px;
}
.new-chat-button {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  min-height: 44px;
}
@media (min-width: 800px) {
  .chat-feed {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .chat-scroll {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .conversation-list {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .composer {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .send-button {
    transition: none;
    animation: none;
  }
}
.today-composer {
  position: fixed;
  left: max(10px, var(--safe-left));
  right: max(10px, var(--safe-right));
  bottom: calc(60px + var(--safe-bottom) + 8px);
  z-index: 25;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: min(calc(100% - 20px), 700px);
  margin: 0 auto;
  padding: 6px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-float) 96%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (max-height: 480px) and (orientation: landscape) {
  .today-composer {
    bottom: calc(48px + var(--safe-bottom) + 6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .today-composer {
    transition: none;
    animation: none;
  }
}
.today-composer {
  border-radius: 20px;
  box-shadow: 0 8px 26px #17201c1a;
}
.chat-feed {
  padding: calc(78px + var(--safe-top)) 16px 30px;
}
.message {
  margin-bottom: 28px;
}
.message.user .user-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border: 0;
  border-radius: 16px 16px 4px;
  color: var(--text);
  background: var(--surface-strong);
  box-shadow: none;
}
.assistant-message,
.local-chat-message {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.assistant-message > .final-answer {
  padding: 0;
}
.process-note,
.phase-narrative .process-note {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.composer-zone {
  padding-top: 5px;
  border-top: 1px solid var(--line-soft);
}
.composer {
  border-radius: 20px;
  box-shadow: none;
}
.composer:focus-within {
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.today-composer.hub-composer {
  position: static;
  inset: auto;
  width: 100%;
  margin: 15px 0 22px;
  padding: 13px 13px 10px;
  display: block;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface-float);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.today-composer.hub-composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: none;
}
.hub-composer #today-input {
  width: 100%;
  min-height: 58px;
  max-height: 140px;
  padding: 3px 5px 12px;
  border: 0;
  background: transparent;
  resize: none;
  font-size: 15px;
  line-height: 1.55;
}
.hub-composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hub-composer-action {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
}
.hub-composer-action:active {
  background: var(--surface-strong);
}
.hub-composer-action .material-symbols-rounded {
  font-size: 21px;
}
.hub-composer-spacer {
  flex: 1 1 auto;
}
.hub-send {
  width: 46px;
  height: 46px;
  border-radius: 15px;
}
.hub-send .material-symbols-rounded {
  font-size: 22px;
}
@media (hover: hover) {
  .hub-composer-action:hover {
    background: var(--surface-strong);
  }
}
@media (min-width: 1000px) {
  .today-composer.hub-composer {
    grid-column: 1;
    grid-row: 2;
  }
}
.live-stage-flow .process-timeline {
  padding-left: 27px;
}
.live-stage-flow .process-phase {
  margin-bottom: 8px;
}

/* frontend/styles/records.css */
.record-page {
  position: relative;
  min-height: 0;
  flex-direction: column;
  background: var(--bg);
}
.record-scroll::-webkit-scrollbar {
  display: none;
}
.record-floating-head {
  position: absolute;
  z-index: 20;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  pointer-events: none;
}
.record-floating-head > button {
  pointer-events: auto;
}
.record-floating-head > span {
  pointer-events: auto;
}
.record-floating-head > button {
  display: grid;
  place-items: center;
  padding: 0;
}
.record-floating-head > span {
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  display: grid;
  text-align: center;
}
.record-floating-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.record-feed {
  width: min(100%, 680px);
  min-height: 100%;
  margin: 0 auto;
  padding: calc(82px + var(--safe-top)) 16px 32px;
}
.record-welcome {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 3px;
}
.record-welcome > .material-symbols-rounded {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 25px;
}
.record-welcome h1 {
  margin: 16px 0 5px;
  font-size: 28px;
  letter-spacing: -.04em;
}
.record-welcome p {
  max-width: 390px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.record-welcome button {
  margin-top: 20px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  color: #fff;
  background: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.record-load-older {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 18px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
}
.record-load-older .material-symbols-rounded {
  font-size: 17px;
}
.record-event {
  display: grid;
  justify-items: end;
  gap: 5px;
  margin: 0 0 20px;
}
.record-event.imported {
  justify-items: start;
}
.record-bubble {
  max-width: min(86%, 560px);
  padding: 11px 14px;
  border-radius: 19px 19px 5px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.record-event.imported .record-bubble {
  border: 1px solid var(--line);
  border-radius: 19px 19px 19px 5px;
  background: var(--surface-float);
}
.record-event-meta {
  max-width: min(94%, 560px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 1px 0 5px;
  color: var(--faint);
}
.record-event.imported .record-event-meta {
  flex-direction: row-reverse;
}
.record-event-meta > small {
  font-size: 9px;
}
.record-event-more {
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--faint);
  background: transparent;
}
.record-event-more:active {
  color: var(--text);
  background: var(--surface-strong);
}
.record-event-more .material-symbols-rounded {
  font-size: 18px;
}
.record-knowledge-chips {
  max-width: min(94%, 560px);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 3px;
  color: var(--muted);
  background: transparent;
}
.record-knowledge-chips span:not(.material-symbols-rounded) {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
  font-weight: 700;
}
.record-knowledge-chips .material-symbols-rounded {
  margin-left: 1px;
  color: var(--faint);
  font-size: 14px;
}
.record-composer {
  width: min(calc(100% - 20px), 680px);
  min-height: 58px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 46px;
  align-items: end;
  gap: 4px;
  margin: 0 auto calc(10px + var(--safe-bottom));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--surface-float);
  box-shadow: 0 7px 24px #181c191c;
}
#record-composer {
  grid-template-columns: 44px minmax(0, 1fr) 44px 46px;
}
.record-composer > button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
}
.record-composer > .record-voice-button {
  color: var(--muted);
}
.record-composer > .record-voice-button:active {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.record-composer textarea {
  min-height: 44px;
  max-height: min(34dvh, 220px);
  resize: none;
  overflow-y: hidden;
  overscroll-behavior: contain;
  padding: 11px 8px 8px;
  border: 0;
  background: transparent;
  line-height: 1.5;
  scrollbar-width: thin;
}
.record-media-card {
  max-width: min(94%, 560px);
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border-radius: 19px 19px 5px;
  background: var(--surface);
}
.record-event.imported .record-media-card {
  border: 1px solid var(--line);
  border-radius: 19px 19px 19px 5px;
  background: var(--surface-float);
}
.record-image-card {
  width: min(86%, 560px);
  padding: 5px;
}
.record-image-open {
  width: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 15px;
  background: var(--surface-strong);
  cursor: zoom-in;
}
.record-image-open img {
  width: 100%;
  max-height: 520px;
  display: block;
  object-fit: contain;
  border-radius: inherit;
  background: var(--surface-strong);
}
.record-image-open:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
.record-media-card > small {
  padding: 0 5px 2px;
  overflow: hidden;
  color: var(--faint);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-media-caption {
  margin: 0;
  padding: 0 5px;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.record-media-missing {
  min-height: 84px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}
.record-media-missing .material-symbols-rounded {
  font-size: 25px;
}
.record-voice-card {
  width: min(94%, 480px);
}
.record-voice-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 3px;
}
.record-voice-title .material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 18px;
}
.record-voice-title strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-voice-card audio {
  width: 100%;
  height: 42px;
  display: block;
}
.record-file-card {
  width: min(94%, 520px);
  min-height: 72px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 5px;
  color: var(--text);
  text-align: left;
  background: var(--surface-float);
}
.record-event.imported .record-file-card {
  border-radius: 18px 18px 18px 5px;
}
.record-file-card:disabled {
  opacity: .72;
}
.record-file-card > .material-symbols-rounded:first-child {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.record-file-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.record-file-card strong,
.record-file-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-file-card strong {
  font-size: 12px;
}
.record-file-card small {
  color: var(--muted);
  font-size: 9px;
}
.record-file-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.record-file-card > .material-symbols-rounded:last-child {
  color: var(--faint);
  font-size: 18px;
}
.record-pdf-card {
  border-color: color-mix(in srgb, #d34a45 22%, var(--line));
}
.record-pdf-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #d34a45;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.record-pdf-card > .material-symbols-rounded:last-child {
  color: #b63f3a;
}
.record-capture-sheet .dialog-card {
  max-height: min(54dvh, 390px);
}
.record-capture-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.record-capture-grid > button {
  min-width: 0;
  min-height: 98px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 9px 5px;
  border-radius: 16px;
  color: var(--text);
  text-align: center;
  background: var(--surface);
}
.record-capture-grid > button:active {
  background: var(--surface-strong);
}
.record-capture-grid > button:disabled {
  opacity: .46;
}
.record-capture-grid > button > .material-symbols-rounded {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 14px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 23px;
}
.record-capture-grid strong {
  font-size: 11px;
}
.record-capture-grid small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-capture-status {
  min-height: 42px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 10px;
}
.record-capture-status[hidden] {
  display: none;
}
.record-capture-status.failed {
  color: var(--danger);
  background: var(--danger-soft);
}
.record-capture-status .material-symbols-rounded {
  font-size: 19px;
}
.record-capture-status .spin {
  animation: spin .9s linear infinite;
}
.record-event-menu-sheet .dialog-card {
  max-height: min(54dvh, 390px);
}
.record-danger-action {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  color: var(--danger);
  text-align: left;
  background: var(--danger-soft);
}
.record-danger-action > .material-symbols-rounded {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-float));
}
.record-danger-action > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.record-danger-action strong {
  font-size: 12px;
}
.record-danger-action small {
  color: color-mix(in srgb, var(--danger) 68%, var(--muted));
  font-size: 9px;
  line-height: 1.45;
}
.record-delete-dialog {
  width: min(calc(100vw - 36px), 380px);
}
.record-delete-dialog .dialog-card {
  align-items: stretch;
  padding: 22px 18px 17px;
  text-align: center;
}
.record-delete-dialog .dialog-card > strong {
  font-size: 18px;
}
.record-delete-dialog .dialog-card > p {
  margin: -3px 0 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.record-delete-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 17px;
  color: var(--danger);
  background: var(--danger-soft);
}
.record-delete-icon .material-symbols-rounded {
  font-size: 25px;
}
.record-delete-dialog .dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.record-delete-dialog .dialog-actions button {
  width: 100%;
}
.record-image-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: #080a09;
  box-shadow: none;
}
.record-image-dialog::backdrop {
  background: #080a09;
  backdrop-filter: none;
}
.record-image-viewer {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #fff;
  background: #080a09;
}
.record-image-viewer > header {
  min-height: calc(58px + var(--safe-top));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: end;
  gap: 4px;
  padding: var(--safe-top) 8px 5px;
  background:
    linear-gradient(
      180deg,
      #000000bd,
      #0000);
}
.record-image-viewer > header button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: #ffffff17;
}
.record-image-viewer > header strong {
  align-self: center;
  overflow: hidden;
  padding: 0 5px;
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-image-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
}
.record-image-stage > button {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}
.record-image-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: width .18s ease;
}
.record-image-stage img.zoomed {
  width: 200%;
  height: auto;
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.record-image-viewer > small {
  min-height: calc(38px + var(--safe-bottom));
  padding: 8px 16px var(--safe-bottom);
  color: #ffffff8c;
  font-size: 9px;
  text-align: center;
}
.record-pdf-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  background: var(--surface-float);
  box-shadow: none;
}
.record-pdf-dialog::backdrop {
  background: #0a0c0bb8;
}
.record-pdf-viewer {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface-float);
}
.record-pdf-viewer > header {
  min-height: calc(58px + var(--safe-top));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: end;
  gap: 4px;
  padding: var(--safe-top) 8px 5px;
  border-bottom: 1px solid var(--line);
}
.record-pdf-viewer > header button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
}
.record-pdf-viewer > header a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
}
.record-pdf-viewer > header strong {
  align-self: center;
  overflow: hidden;
  padding: 0 5px;
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-pdf-viewer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #eef0ef;
}
.record-pdf-viewer > small {
  min-height: calc(34px + var(--safe-bottom));
  padding: 7px 16px var(--safe-bottom);
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}
.record-import-sheet .dialog-card {
  max-height: min(82dvh, 720px);
}
.record-import-summary {
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface);
}
.record-import-summary > .material-symbols-rounded {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.record-import-summary > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.record-import-summary strong {
  font-size: 12px;
}
.record-import-summary small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.record-import-summary .spin {
  animation: spin .9s linear infinite;
}
.record-import-summary .error {
  color: var(--danger);
  background: var(--danger-soft);
  animation: none;
}
.record-import-preview {
  display: grid;
  gap: 6px;
  min-height: 80px;
  max-height: 36dvh;
  overflow-y: auto;
}
.record-import-preview article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.record-import-preview article > span {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-import-preview article > small {
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 700;
}
.record-import-preview article.duplicate {
  opacity: .55;
}
.record-import-preview article.duplicate > small {
  color: var(--muted);
}
.record-insight-sheet .dialog-card {
  max-height: min(90dvh, 780px);
}
.record-search-form {
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.record-search-form > .material-symbols-rounded {
  color: var(--muted);
  font-size: 20px;
}
.record-search-form input {
  min-width: 0;
  height: 40px;
  padding: 0 4px;
  border: 0;
  background: transparent;
}
.record-search-form button {
  height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.record-source-filters,
.record-category-filters {
  display: flex;
  gap: 6px;
  margin: 0 -2px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.record-source-filters button,
.record-category-filters button {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
}
.record-source-filters button.active,
.record-category-filters button.active {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
  font-weight: 700;
}
.record-project-filter {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.record-project-filter[hidden] {
  display: none;
}
.record-project-filter > span {
  flex: none;
  color: var(--muted);
  font-size: 8px;
}
.record-project-filter > strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-project-filter > button {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent-text);
  background: transparent;
}
.record-project-filter .material-symbols-rounded {
  font-size: 16px;
}
.record-insight-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface);
}
.record-insight-switch button {
  min-height: 34px;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}
.record-insight-switch button.active {
  color: var(--text);
  background: var(--surface-float);
  box-shadow: 0 2px 8px #181c1914;
}
.record-focus-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.record-focus-summary:empty {
  display: none;
}
.record-focus-summary > div {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 8px 9px;
  border-radius: 11px;
  background: var(--surface);
}
.record-focus-summary strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-focus-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-search-truth {
  min-height: 20px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.record-insight-results {
  min-height: 120px;
  max-height: 50dvh;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.record-insight-empty {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 150px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}
.record-insight-empty .material-symbols-rounded {
  font-size: 30px;
}
.record-insight-empty .spin {
  animation: spin .9s linear infinite;
}
.record-insight-section {
  display: grid;
  gap: 7px;
}
.record-insight-section > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 2px 1px;
}
.record-insight-section > header strong {
  font-size: 12px;
}
.record-insight-section > header small {
  color: var(--faint);
  font-size: 9px;
}
.record-result-card {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-float);
}
.record-result-open {
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 0;
  color: var(--text);
  text-align: left;
  background: transparent;
}
.record-result-open > span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.record-result-open > .record-result-sensitive {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.record-result-sensitive .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--warn);
  font-size: 17px;
}
.record-result-open > small {
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 700;
}
.record-result-source {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.record-result-source > .material-symbols-rounded {
  font-size: 17px;
}
.record-result-source > span:last-child {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.record-result-source strong,
.record-result-source small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-result-source strong {
  color: var(--text);
  font-size: 9px;
}
.record-result-source small {
  font-size: 8px;
}
.record-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.record-result-meta span {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
  font-weight: 700;
}
.record-result-meta button {
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 999px;
  color: var(--accent-text);
  background: transparent;
  font-size: 8px;
  font-weight: 700;
}
.record-result-meta time {
  margin-left: auto;
  color: var(--faint);
  font-size: 8px;
}
.record-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.record-result-actions button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
}
.record-result-actions button.primary {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.record-review-backlog {
  border-top: 1px solid var(--line);
}
.record-review-backlog > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--accent-text);
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
  list-style: none;
}
.record-review-backlog > summary::-webkit-details-marker {
  display: none;
}
.record-review-backlog > summary:after {
  content: "展开";
  color: var(--muted);
  font-size: 8px;
}
.record-review-backlog[open] > summary:after {
  content: "收起";
}
.record-review-backlog-body {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}
.record-sensitive-placeholder {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--warn) 26%, var(--line));
  border-radius: 13px;
  color: var(--text);
  text-align: left;
  background: color-mix(in srgb, var(--warn) 6%, var(--surface-float));
}
.record-sensitive-placeholder > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  font-size: 19px;
}
.record-sensitive-placeholder > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.record-sensitive-placeholder strong {
  font-size: 11px;
}
.record-sensitive-placeholder small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}
.record-detail-sheet .dialog-card {
  max-height: min(92dvh, 820px);
}
@media (max-width: 480px) {
  .record-detail-sheet .dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .record-detail-sheet .dialog-actions button {
    min-width: 0;
    padding: 8px;
  }
}
.record-detail-body {
  min-height: 100px;
  display: grid;
  gap: 12px;
  overflow-y: auto;
  padding: 1px 2px 4px;
}
.record-detail-text {
  padding: 14px;
  border-radius: 15px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.72;
  overflow-wrap: anywhere;
  white-space: normal;
}
.record-detail-body .record-media-card,
.record-detail-body .record-file-card {
  width: 100%;
  max-width: none;
}
.record-detail-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.record-detail-labels span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 700;
}
.record-detail-provenance {
  min-height: 48px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
}
.record-detail-provenance > .material-symbols-rounded {
  color: var(--muted);
  font-size: 20px;
}
.record-detail-provenance > span:last-child {
  display: grid;
  gap: 2px;
}
.record-detail-provenance strong {
  font-size: 10px;
}
.record-detail-provenance small {
  color: var(--muted);
  font-size: 9px;
  overflow-wrap: anywhere;
}
.record-detail-source-evidence {
  min-height: 48px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.record-detail-source-evidence > .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 20px;
}
.record-detail-source-evidence > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.record-detail-source-evidence strong {
  font-size: 10px;
}
.record-detail-source-evidence small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.record-detail-source-evidence.protected > .material-symbols-rounded {
  color: var(--warn);
}
.record-detail-related {
  min-height: 92px;
  display: grid;
  gap: 8px;
  overflow: hidden;
}
.record-detail-related > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.record-detail-related > header strong {
  font-size: 12px;
}
.record-detail-related > header small {
  color: var(--faint);
  font-size: 8px;
}
.record-detail-related-list {
  max-height: 28dvh;
  display: grid;
  gap: 6px;
  overflow-y: auto;
}
.record-detail-related-list button {
  min-height: 48px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  background: var(--surface);
}
.record-detail-related-list button span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.record-detail-related-list button small {
  color: var(--accent-text);
  font-size: 8px;
}
.record-detail-related-empty {
  padding: 16px 12px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
  line-height: 1.6;
}
@media (max-width: 430px) {
  .record-capture-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 430px) {
  .record-floating-head > span {
    max-width: 210px;
  }
}
@media (max-width: 430px) {
  .record-floating-head > button {
    backdrop-filter: none;
  }
}
@media (max-width: 430px) {
  .record-floating-head > span {
    backdrop-filter: none;
  }
}
#record-composer {
  border: 1px solid var(--line);
  background: var(--surface-float);
}
#record-composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.record-floating-head strong {
  font-size: 15px;
}
.record-floating-head small {
  color: var(--muted);
  font-size: var(--font-meta);
}
.record-floating-head > button {
  width: 44px;
  height: 44px;
}
.record-capture-grid > * {
  border-radius: var(--radius-16);
}
.record-voice-button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
@media (max-width: 430px) {
  .record-floating-head > * {
    background: var(--surface-float);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (min-width: 800px) {
  #record-composer {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}
#record-composer {
  border-radius: 20px;
  box-shadow: none;
}
#record-composer:focus-within {
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.record-floating-head {
  inset: 0 0 auto;
  min-height: calc(62px + var(--safe-top));
  gap: 4px;
  padding: calc(7px + var(--safe-top)) 8px 7px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  backdrop-filter: none;
}
.record-floating-head > button {
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.record-floating-head > span {
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.record-floating-head > span {
  padding: 5px 8px;
}
.record-timeline-search {
  display: flex;
  gap: 8px;
  max-width: 100%;
  padding: 8px;
}
.record-timeline-search input {
  min-width: 0;
  flex: 1;
  font: inherit;
}
#record-edit-body {
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
}
#record-edit-body form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#record-edit-body textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  font: inherit;
}
#record-edit-body p {
  overflow-wrap: anywhere;
}

/* frontend/styles/codex.css */
.personal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.personal-scroll::-webkit-scrollbar {
  display: none;
}
.codex-capability-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0 0 14px;
}
.codex-capability-strip.all-ready {
  display: none;
}
.codex-capability-strip > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 9px;
}
.codex-capability-strip > span > .material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
  font-size: 17px;
}
.codex-capability-strip > span > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-capability-strip strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-capability-strip small {
  color: var(--muted);
  font-size: 8px;
}
.codex-capability-strip > span.ready {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.codex-capability-strip > span.ready > .material-symbols-rounded {
  color: var(--accent);
  background: var(--accent-soft);
}
.codex-capability-strip > span.warning > .material-symbols-rounded {
  color: #a06120;
  background: color-mix(in srgb, #d79a47 16%, var(--surface));
}
.personal-streaming-answer {
  white-space: normal;
  overflow-wrap: anywhere;
}
.personal-stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 3px;
  border-radius: 1px;
  background: #7665ad;
  vertical-align: -.12em;
  animation: personalCursor .85s steps(1, end) infinite;
}
.personal-event.codex-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, #7665ad 24%, var(--line));
  border-radius: 16px;
}
.personal-event.codex-card > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.personal-event.codex-card > header > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 14%, var(--surface));
  font-size: 20px;
}
.personal-event.codex-card > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.personal-event.codex-card strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-event.codex-card small {
  color: var(--muted);
  font-size: 9px;
}
.personal-event.codex-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.personal-event.codex-card > footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.personal-event.codex-card > footer span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--faint);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-event.codex-card > footer button {
  padding: 0 10px;
  font-size: 9px;
}
.personal-composer {
  grid-template-columns: 44px minmax(0, 1fr) 44px 46px;
  border-color: color-mix(in srgb, #7665ad 24%, var(--line));
}
.codex-jump-latest {
  right: 16px;
  bottom: calc(82px + var(--safe-bottom));
}
.codex-control-strip {
  width: min(calc(100% - 28px), 660px);
  min-height: 32px;
  display: flex;
  align-items: center;
  margin: 0 auto 5px;
}
.codex-control-strip button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  font-weight: 650;
}
.codex-control-strip button:first-child {
  max-width: min(72%, 360px);
}
.codex-control-strip button:first-child span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-control-strip button:last-child {
  margin-left: auto;
  color: #665394;
  border-color: color-mix(in srgb, #7665ad 24%, var(--line));
}
.codex-control-strip button:disabled {
  opacity: .7;
}
.codex-control-strip .material-symbols-rounded {
  font-size: 15px;
}
.codex-attachment-strip {
  width: min(calc(100% - 28px), 660px);
  display: flex;
  gap: 7px;
  margin: 0 auto 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.codex-attachment-strip[hidden] {
  display: none;
}
.codex-attachment-chip {
  min-width: 0;
  max-width: 230px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 6px;
  padding: 5px 5px 5px 8px;
  box-shadow: var(--shadow-soft);
}
.codex-attachment-chip > .material-symbols-rounded {
  color: #665394;
  font-size: 20px;
}
.codex-attachment-chip span {
  min-width: 0;
  display: grid;
}
.codex-attachment-chip strong,
.codex-attachment-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-attachment-chip strong {
  font-size: 10px;
}
.codex-attachment-chip small {
  color: var(--muted);
  font-size: 8px;
}
.codex-attachment-chip button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
}
.codex-turn {
  display: grid;
  margin: 0 0 24px;
}
.codex-turn-user {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.codex-turn-user > div {
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.65;
}
.codex-agent-message {
  display: grid;
  gap: 8px;
}
.codex-agent-message > header {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.codex-agent-message > header .material-symbols-rounded {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 14%, var(--surface));
  font-size: 17px;
}
.codex-agent-message > header strong {
  color: var(--text);
  font-size: 11px;
}
.codex-agent-message > header small {
  font-size: 9px;
}
.codex-process {
  overflow: hidden;
}
.codex-process summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}
.codex-process summary::-webkit-details-marker {
  display: none;
}
.codex-process summary > .material-symbols-rounded {
  color: #665394;
  font-size: 18px;
}
.codex-process summary span {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-process summary strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-process summary small {
  color: var(--muted);
  font-size: 8px;
}
.codex-process summary > small {
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-float);
}
.codex-process pre,
.codex-process .codex-process-body {
  max-height: 260px;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-float);
  font:
    9px/1.55 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.codex-process .codex-process-body.markdown-body {
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
  white-space: normal;
}
.codex-process[open] summary {
  background: color-mix(in srgb, #7665ad 7%, var(--surface));
}
.codex-turn-live {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}
.codex-turn-live .typing-dots {
  padding: 0;
}
.codex-reliability-banner {
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 10px;
  color: var(--warn);
}
.codex-reliability-banner strong {
  display: block;
  font-size: 10px;
}
.codex-reliability-banner small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 8px;
}
.codex-reliability-banner button {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 9px;
  color: var(--warn);
  background: var(--surface-float);
  font-size: 9px;
}
.codex-queue-banner {
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 10px;
  color: #665394;
}
.codex-queue-banner strong {
  display: block;
  font-size: 10px;
}
.codex-queue-banner small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 8px;
}
.codex-image-result {
  display: grid;
  gap: 7px;
}
.codex-image-result img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  background: var(--surface);
}
.codex-runtime-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.codex-runtime-panel label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}
.codex-runtime-panel select {
  width: 100%;
  min-height: 39px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-float);
  font-size: 10px;
}
.codex-runtime-panel label.wide {
  grid-column: 1 / -1;
}
.codex-runtime-panel > small {
  grid-column: 1 / -1;
  color: #665394;
  font-size: 8px;
}
.codex-goal-options {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 9px;
}
.codex-goal-meta {
  min-height: 20px;
}
.codex-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.codex-action-grid > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  text-align: left;
}
.codex-action-grid > button:last-child {
  grid-column: 1 / -1;
}
.codex-action-grid > button > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 14%, var(--surface-float));
}
.codex-action-grid > button > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.codex-action-grid strong {
  font-size: 11px;
}
.codex-action-grid small {
  color: var(--muted);
  font-size: 8px;
}
.codex-thread-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.codex-thread-tools label {
  min-height: 42px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  padding: 0 10px;
  border-radius: 13px;
  background: var(--surface);
}
.codex-thread-tools label .material-symbols-rounded {
  color: var(--muted);
  font-size: 18px;
}
.codex-thread-tools input {
  min-width: 0;
}
.codex-thread-tools > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  border-radius: 13px;
}
.codex-thread-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.codex-thread-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
}
.codex-thread-actions button.danger {
  color: var(--danger);
  background: var(--danger-soft);
}
.codex-thread-actions .material-symbols-rounded {
  font-size: 16px;
}
.codex-thread-list {
  max-height: min(58dvh, 560px);
  display: grid;
  gap: 6px;
  overflow-y: auto;
}
.codex-thread-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  text-align: left;
  background: var(--surface);
}
.codex-thread-row > .material-symbols-rounded:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #665394;
  background: var(--surface-float);
}
.codex-thread-row > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.codex-thread-row strong,
.codex-thread-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-thread-row strong {
  font-size: 11px;
}
.codex-thread-row small {
  color: var(--muted);
  font-size: 8px;
}
.codex-thread-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  font-size: 10px;
}
.codex-optimistic.failed {
  opacity: .78;
}
.codex-optimistic.failed small {
  color: var(--danger);
}
.personal-scroll,
.codex-turn,
.codex-agent-message {
  min-width: 0;
  max-width: 100%;
}
.codex-agent-message .markdown-body {
  min-width: 0;
}
.codex-live-work,
.codex-work-summary,
.codex-work-body,
.codex-operation-batch,
.codex-operation-list,
.codex-question-card {
  min-width: 0;
  max-width: 100%;
}
.codex-turn {
  gap: 12px;
  margin-bottom: 32px;
  overflow: clip;
}
.codex-turn-user > div {
  max-width: min(86%, 580px);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.codex-agent-message .markdown-body,
.codex-analysis-block,
.codex-question-block p {
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
.codex-agent-message .markdown-body > * {
  min-width: 0;
  max-width: 100%;
}
.codex-analysis-block > * {
  min-width: 0;
  max-width: 100%;
}
.codex-agent-message .markdown-body :not(pre) > code {
  white-space: break-spaces;
  word-break: break-all;
}
.codex-analysis-block :not(pre) > code {
  white-space: break-spaces;
  word-break: break-all;
}
.codex-agent-message .markdown-body pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  overscroll-behavior-x: contain;
}
.codex-analysis-block pre {
  white-space: pre;
  overscroll-behavior-x: contain;
}
.codex-agent-message .table-scroll,
.codex-analysis-block .table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.codex-final-message {
  padding: 2px 1px 0;
}
.codex-final-message .markdown-body {
  color: var(--text);
}
.codex-live-work {
  display: grid;
  gap: 10px;
}
.codex-analysis-block {
  padding: 0 1px;
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
  font-size: 13px;
  line-height: 1.68;
}
.codex-operation-batch,
.codex-work-summary {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-float) 70%, transparent);
}
.codex-operation-batch > button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  color: var(--muted);
  text-align: left;
  background: transparent;
}
.codex-work-summary > button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  color: var(--muted);
  text-align: left;
  background: transparent;
}
.codex-operation-batch > button > .material-symbols-rounded:first-child {
  color: var(--success);
  font-size: 19px;
}
.codex-work-summary > button > .material-symbols-rounded:first-child {
  color: var(--success);
  font-size: 19px;
}
.codex-operation-batch.is-running > button > .material-symbols-rounded:first-child {
  color: #7665ad;
  animation: spin 1.2s linear infinite;
}
.codex-operation-batch > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-work-summary > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-operation-batch strong,
.codex-work-summary strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
}
.codex-operation-batch small,
.codex-work-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-operation-list {
  display: grid;
  gap: 1px;
  padding: 3px 9px 9px 42px;
}
.codex-operation-step {
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.codex-operation-step > summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  list-style: none;
}
.codex-operation-step:not(details) {
  min-height: 42px;
  display: grid;
  align-items: center;
  gap: 7px;
  padding: 6px 2px;
  list-style: none;
}
.codex-operation-step:not(details) {
  grid-template-columns: 20px minmax(0, 1fr);
}
.codex-operation-step > summary::-webkit-details-marker {
  display: none;
}
.codex-operation-step > summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-operation-step:not(details) > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-operation-step strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-operation-step small {
  overflow: hidden;
  color: var(--faint);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.state-running .codex-step-state {
  color: #7665ad;
  animation: spin 1.2s linear infinite;
}
.state-failed .codex-step-state {
  color: var(--danger);
}
.codex-step-chevron {
  color: var(--faint);
  font-size: 16px;
}
.codex-operation-detail {
  display: grid;
  gap: 6px;
  padding: 2px 0 9px 27px;
}
.codex-operation-detail pre {
  max-height: 240px;
  margin: 0;
  padding: 9px 10px;
  overflow: auto;
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font:
    9px/1.55 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.codex-work-body {
  display: grid;
  gap: 13px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}
.codex-work-body .codex-operation-list {
  padding-left: 25px;
}
.codex-turn-live {
  min-height: 30px;
  padding: 3px 1px;
}
.codex-turn-live.is-stopping {
  color: var(--danger);
}
.codex-load-older {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
  margin: 0 auto 20px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
}
.codex-load-older .material-symbols-rounded {
  font-size: 16px;
}
.codex-question-card {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}
.codex-question-card > header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.codex-question-card > header > .material-symbols-rounded {
  display: grid;
  place-items: center;
  color: #665394;
}
.codex-question-card > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.codex-question-card > header strong {
  font-size: 13px;
}
.codex-question-card > header small {
  color: var(--muted);
  font-size: 9px;
}
.codex-question-block {
  min-width: 0;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}
.codex-question-block legend {
  margin-bottom: 3px;
  color: #665394;
  font-size: 10px;
  font-weight: 750;
}
.codex-question-block p {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.55;
}
.codex-question-choices {
  display: grid;
  gap: 6px;
}
.codex-question-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
}
.codex-question-option:has(input:checked) {
  border-color: color-mix(in srgb, #7665ad 54%, var(--line));
  background: color-mix(in srgb, #7665ad 8%, var(--surface));
}
.codex-question-option input {
  width: 17px;
  height: 17px;
  accent-color: #7665ad;
}
.codex-question-option span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.codex-question-option strong {
  font-size: 11px;
}
.codex-question-option small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}
.codex-question-other {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}
.codex-question-other input {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  resize: vertical;
}
.codex-question-block textarea {
  width: 100%;
  padding: 9px 10px;
  outline: 0;
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.codex-question-card > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.codex-question-card > footer button {
  min-height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 700;
}
@media (max-width: 430px) {
  .codex-turn {
    margin-bottom: 27px;
  }
}
@media (max-width: 430px) {
  .codex-final-message .markdown-body {
    font-size: 14px;
    line-height: 1.72;
  }
}
@media (max-width: 430px) {
  .codex-operation-list {
    padding-left: 32px;
  }
}
@media (max-width: 430px) {
  .codex-work-body {
    padding-right: 9px;
    padding-left: 9px;
  }
}
@media (max-width: 430px) {
  .personal-composer {
    grid-template-columns: 38px minmax(0, 1fr) 38px 44px;
  }
}
@media (max-width: 430px) {
  .personal-composer > .record-voice-button {
    display: grid;
  }
}
@media (max-width: 430px) {
  .codex-control-strip {
    width: calc(100% - 24px);
  }
}
@media (max-width: 430px) {
  .codex-question-card {
    padding: 13px;
    border-radius: 16px;
  }
}
.codex-session-indicator {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.codex-session-indicator[hidden] {
  display: none;
}
.codex-session-indicator > span {
  min-width: 42px;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 3px 7px;
  border-radius: 999px;
}
.codex-session-indicator strong {
  color: #665394;
  font-size: 9px;
  line-height: 1.05;
}
.codex-session-indicator small {
  color: var(--faint);
  font-size: 6px;
  line-height: 1.05;
}
.codex-live-status {
  min-width: 0;
  display: grid;
  gap: 9px;
}
.codex-live-status > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.codex-live-status > header > .material-symbols-rounded {
  color: var(--success);
  font-size: 19px;
}
.codex-live-status.is-running > header > .material-symbols-rounded {
  animation: spin 1.15s linear infinite;
}
.codex-live-status > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-live-status strong {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-live-summary {
  min-width: 0;
  line-height: 1.62;
  overflow-wrap: anywhere;
}
.codex-live-summary > :first-child {
  margin-top: 0;
}
.codex-live-summary > :last-child {
  margin-bottom: 0;
}
.codex-live-history {
  margin-top: -2px;
  background: transparent;
}
.codex-plan-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 14px;
}
.codex-plan-card > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.codex-execution-plan > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.codex-diff-card > summary {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 9px;
}
.codex-plan-card > header > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 14%, var(--surface));
  font-size: 19px;
}
.codex-execution-plan > header > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 14%, var(--surface));
  font-size: 19px;
}
.codex-plan-card.is-streaming > header > .material-symbols-rounded {
  animation: spin 1.15s linear infinite;
}
.codex-plan-card > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.codex-execution-plan > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.codex-diff-card > summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.codex-plan-card > header strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.codex-execution-plan > header strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.codex-diff-card > summary strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.codex-plan-card > header small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-execution-plan > header small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-diff-card > summary small {
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-plan-body {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}
.codex-plan-body > :first-child {
  margin-top: 0;
}
.codex-plan-body > :last-child {
  margin-bottom: 0;
}
.codex-plan-card > footer {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8px;
  padding-top: 2px;
}
.codex-plan-card > footer button {
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 750;
}
.codex-plan-card > footer .secondary {
  border: 1px solid color-mix(in srgb, #7665ad 28%, var(--line));
}
.codex-plan-card > footer button:disabled {
  opacity: .58;
}
.codex-execution-plan {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px 13px;
}
.codex-execution-plan ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.codex-execution-plan li {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.codex-execution-plan li .material-symbols-rounded {
  color: var(--faint);
  font-size: 17px;
}
.codex-execution-plan li.state-completed {
  color: color-mix(in srgb, var(--text) 75%, var(--muted));
}
.codex-execution-plan li.state-inprogress {
  color: var(--text);
  font-weight: 650;
}
.codex-execution-plan li.state-inprogress .material-symbols-rounded {
  animation: spin 1.15s linear infinite;
}
.codex-diff-card {
  min-width: 0;
  overflow: hidden;
}
.codex-diff-card > summary {
  grid-template-columns: 26px minmax(0, 1fr) 18px;
  min-height: 54px;
  padding: 9px 12px;
  list-style: none;
  cursor: pointer;
}
.codex-diff-card > summary::-webkit-details-marker {
  display: none;
}
.codex-diff-card > summary > .material-symbols-rounded:first-child {
  color: #665394;
  font-size: 20px;
}
.codex-diff-card > summary > .material-symbols-rounded:last-child {
  color: var(--faint);
  font-size: 17px;
  transition: transform .18s ease;
}
.codex-diff-card[open] > summary > .material-symbols-rounded:last-child {
  transform: rotate(180deg);
}
.codex-diff-body {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 0 10px 10px;
  border-top: 1px solid var(--line);
}
.codex-diff-body pre {
  max-height: 52dvh;
  margin: 10px 0 0;
  padding: 11px;
  overflow: auto;
  border-radius: 11px;
  background: #17151d;
  color: #e8e4f0;
  font:
    9px/1.55 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  white-space: pre;
  overscroll-behavior-x: contain;
}
.codex-diff-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.codex-diff-actions button {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 10%, var(--surface));
  font-size: 9px;
  font-weight: 700;
}
.codex-usage-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
}
.codex-usage-panel > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.codex-usage-panel > header > .material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 12%, var(--surface-float));
  font-size: 18px;
}
.codex-usage-panel > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-usage-panel > header small {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}
.codex-usage-panel > p {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
}
.codex-meter {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.codex-meter > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.codex-meter strong {
  font-size: 9px;
  font-weight: 700;
}
.codex-meter small {
  overflow: hidden;
  color: var(--muted);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.codex-meter > i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 75%, var(--surface));
}
.codex-meter > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #9887c7,
      #665394);
}
.codex-rename-form {
  display: grid;
  gap: 5px;
}
.codex-rename-form > label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}
.codex-rename-form > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}
.codex-rename-form input {
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  outline: 0;
  color: var(--text);
  font: inherit;
}
.codex-rename-form button {
  min-height: 40px;
  padding: 0 13px;
  border-radius: 11px;
  color: #fff;
  background: #7665ad;
  font-size: 9px;
  font-weight: 750;
}
@media (max-width: 430px) {
  .codex-control-strip {
    gap: 5px;
  }
}
@media (max-width: 430px) {
  .codex-control-strip button:first-child {
    max-width: 52%;
  }
}
@media (max-width: 430px) {
  .codex-session-indicator > span {
    min-width: 34px;
    padding-right: 5px;
    padding-left: 5px;
  }
}
@media (max-width: 430px) {
  .codex-session-indicator > span:nth-child(n+2) {
    display: grid;
  }
}
@media (max-width: 430px) {
  .codex-plan-card {
    padding: 13px;
    border-radius: 16px;
  }
}
@media (max-width: 430px) {
  .codex-plan-card > footer {
    grid-template-columns: 1fr 1.25fr;
  }
}
@media (max-width: 430px) {
  .codex-action-grid > button:last-child {
    grid-column: auto;
  }
}
.codex-live-work .codex-analysis-block {
  padding: 3px 1px;
}
.codex-live-work .codex-operation-list {
  padding-top: 1px;
}
.codex-usage-error {
  color: var(--danger) !important;
  overflow-wrap: anywhere;
}
.codex-turn,
.codex-turn-user,
.codex-final-message,
.codex-plan-card,
.codex-execution-plan {
  contain: layout style;
}
.codex-agent-message .markdown-body p,
.codex-agent-message .markdown-body li,
.codex-analysis-block p,
.codex-analysis-block li {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: anywhere;
}
.codex-review-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
}
.codex-review-panel > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.codex-review-panel > header > .material-symbols-rounded {
  color: #665394;
  font-size: 21px;
}
.codex-review-panel > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.codex-review-panel > header strong {
  font-size: 11px;
}
.codex-review-panel > header small {
  color: var(--muted);
  font-size: 8px;
}
.codex-review-files,
.codex-review-tests {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.codex-review-files > strong {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}
.codex-review-tests > strong {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}
.codex-review-files code {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 9px;
  white-space: nowrap;
}
.codex-review-tests > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  font-size: 9px;
}
.codex-review-tests .material-symbols-rounded {
  color: var(--success);
  font-size: 15px;
}
.codex-review-tests .state-failed .material-symbols-rounded {
  color: var(--danger);
}
.codex-final-message .markdown-body,
.codex-agent-message .markdown-body,
.personal-streaming-answer {
  font-size: var(--font-chat);
  line-height: 1.6;
}
.codex-goal-meta {
  line-height: 1.45;
}
@media (hover: hover) {
  .codex-thread-row:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .codex-action-grid > button:hover {
    background: var(--surface-strong);
  }
}
.personal-scroll {
  background: var(--bg);
}
.codex-process summary {
  color: var(--muted);
  font-size: 13px;
}
.personal-composer {
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.personal-composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}
.codex-jump-latest {
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-float);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
}
.codex-attachment-chip {
  border-radius: var(--radius-12);
  border: 1px solid var(--line);
  background: var(--surface);
}
.codex-image-result img {
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
}
.personal-event.codex-card {
  border-color: color-mix(in srgb, var(--codex-accent) 35%, var(--line));
  background: var(--codex-accent-soft);
}
.personal-event.codex-card > header strong {
  color: var(--codex-accent-text);
}
.codex-session-indicator {
  border-radius: var(--radius-16);
}
.codex-live-status.is-running > header > .material-symbols-rounded {
  color: var(--codex-accent);
}
.codex-live-status small,
.codex-live-summary,
.codex-goal-meta {
  color: var(--muted);
  font-size: 12px;
}
.codex-control-strip button {
  color: var(--text);
}
.codex-control-strip button:last-child.steer {
  color: var(--codex-accent-text);
  border-color: color-mix(in srgb, var(--codex-accent) 40%, var(--line));
  background: var(--codex-accent-soft);
}
.codex-final-message {
  border-color: color-mix(in srgb, var(--codex-accent) 30%, var(--line));
}
.codex-plan-card > footer .primary {
  color: #fff;
  border-radius: var(--radius-12);
  min-height: 44px;
}
.codex-question-card > footer .primary {
  color: #fff;
  border-radius: var(--radius-12);
  min-height: 44px;
}
.personal-event.codex-card > footer button {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-12);
  min-height: 44px;
}
.codex-plan-card > footer .primary {
  background: var(--codex-accent);
}
.codex-question-card > footer .primary {
  background: var(--codex-accent);
}
.codex-plan-card > footer .secondary {
  background: var(--surface-strong);
  color: var(--text);
  border-radius: var(--radius-12);
  min-height: 44px;
}
.codex-question-card > footer .secondary {
  background: var(--surface-strong);
  color: var(--text);
  border-radius: var(--radius-12);
  min-height: 44px;
}
.codex-diff-card > summary {
  color: var(--text);
  font-size: 13px;
}
.codex-diff-card > summary small {
  color: var(--muted);
}
.codex-diff-body pre,
.codex-operation-detail pre,
.codex-review-files code,
.codex-analysis-block pre {
  overflow-x: auto;
  max-width: 100%;
}
.codex-analysis-block pre {
  border-radius: var(--radius-12);
  background: var(--surface);
  border: 1px solid var(--line);
}
.codex-usage-panel > header strong {
  font-size: 13px;
}
.codex-usage-error {
  color: var(--danger);
  font-size: 12px;
}
.codex-execution-plan li.state-inprogress .material-symbols-rounded {
  color: var(--codex-accent);
}
.codex-execution-plan li.state-completed .material-symbols-rounded {
  color: var(--success);
}
.codex-capability-strip > span {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
}
.codex-capability-strip > span.ready {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.codex-turn-user > div {
  background: var(--accent);
  color: #f6fffb;
  border-radius: var(--radius-20);
}
.codex-turn-user > small {
  color: var(--muted);
  font-size: 11px;
}
.codex-thread-row {
  border-radius: var(--radius-16);
  min-height: 48px;
}
.codex-thread-row.active {
  background: var(--accent-soft);
}
.codex-thread-row.active strong {
  color: var(--accent-text);
}
.codex-thread-tools input {
  border-radius: var(--radius-12);
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 40px;
}
.codex-optimistic.failed {
  border-color: var(--danger);
}
.codex-operation-step {
  border-radius: var(--radius-12);
}
.codex-step-state {
  color: var(--muted);
  font-size: 11px;
}
.codex-rename-form input,
.codex-question-block textarea {
  border-radius: var(--radius-12);
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 44px;
  font-size: var(--font-body);
}
.codex-action-grid > button {
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
  background: var(--surface-float);
  min-height: 44px;
}
.codex-thread-empty {
  color: var(--muted);
}
@media (min-width: 800px) {
  .personal-scroll {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .codex-live-history {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .personal-composer {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .codex-jump-latest {
    transition: none;
    animation: none;
  }
}
.codex-plan-body,
.codex-question-card {
  overflow-wrap: anywhere;
  word-break: normal;
}
.codex-process {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.personal-composer {
  border-radius: 20px;
  box-shadow: none;
}
.personal-composer:focus-within {
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.codex-agent-message,
.codex-final-message {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.codex-live-status {
  padding: 10px 0 10px 11px;
  border: 0;
  border-left: 2px solid var(--codex-accent);
  border-radius: 0;
  background: transparent;
}
.codex-plan-card,
.codex-execution-plan,
.codex-diff-card,
.codex-usage-panel,
.codex-runtime-panel,
.codex-review-panel,
.codex-reliability-banner,
.codex-queue-banner {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}
.codex-question-card {
  padding: 10px 0 4px 12px;
  border: 0;
  border-left: 2px solid var(--codex-accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.codex-question-card > header > .material-symbols-rounded {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface);
}
.codex-question-option {
  min-height: 44px;
  border-radius: 9px;
  background: var(--surface-float);
}
.codex-control-strip {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-float);
  box-shadow: none;
}
.codex-control-strip button {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 10px;
}
.codex-session-indicator {
  border: 0;
  background: transparent;
}
.codex-session-indicator > span {
  border: 0;
  background: var(--surface);
}

/* frontend/styles/nas.css */
.subpage-scroll.fnos-scroll {
  display: grid;
  gap: 18px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom));
}
.fnos-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.fnos-summary > .material-symbols-rounded {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 26px;
}
.fnos-summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.fnos-summary > span:nth-child(2) strong {
  font-size: 17px;
  overflow-wrap: anywhere;
}
.fnos-summary > span:nth-child(2) small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.fnos-summary.error > .material-symbols-rounded {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
}
.fnos-summary.degraded > .material-symbols-rounded {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
}
.fnos-summary > button {
  grid-column: 1 / -1;
  justify-self: start;
}
.fnos-channel {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--surface-strong);
}
.fnos-channel strong {
  font-size: 13px;
}
.fnos-channel small {
  color: var(--muted);
  line-height: 1.4;
}
.fnos-channel.degraded strong {
  color: var(--warn);
}
.fnos-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fnos-links > button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  color: var(--text);
}
.fnos-links > button > .material-symbols-rounded:first-child {
  color: var(--accent);
}
.fnos-links > button > .material-symbols-rounded:last-child {
  color: var(--muted);
  font-size: 18px;
}
.fnos-links > button span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.fnos-links strong,
.fnos-links small {
  overflow-wrap: anywhere;
}
.fnos-links small {
  color: var(--muted);
  line-height: 1.35;
}
.fnos-section-head {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.fnos-section-head > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.fnos-section-head strong {
  font-size: 16px;
}
.fnos-section-head small {
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.fnos-section-head > div {
  display: flex;
  flex: none;
  gap: 7px;
}
.fnos-section-head button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px;
}
.fnos-section-head button .material-symbols-rounded {
  font-size: 18px;
}
.fnos-photos-section {
  min-width: 0;
}
.fnos-photo-search-form {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.fnos-photo-search-form > .material-symbols-rounded {
  color: var(--muted);
  font-size: 19px;
}
.fnos-photo-search-form input {
  min-width: 0;
  height: 38px;
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
}
.fnos-photo-search-form button {
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
  font-size: 10px;
  font-weight: 700;
}
.fnos-photo-truth {
  min-height: 18px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.fnos-photo-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.fnos-photo-grid > .skeleton-stack {
  grid-column: 1 / -1;
}
.fnos-photo-empty {
  grid-column: 1 / -1;
}
.fnos-photo-card {
  min-width: 0;
  overflow: hidden;
  display: grid;
  align-content: start;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  text-align: left;
  background: var(--surface);
}
.fnos-photo-card > img {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface-strong);
  object-fit: cover;
}
.fnos-photo-card > .fnos-photo-thumb-loading {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface-strong);
  object-fit: cover;
}
.fnos-photo-thumb-loading > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fnos-photo-thumb-loading > small {
  max-width: 90%;
  padding: 4px;
  overflow: hidden;
  font-size: 8px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fnos-photo-card > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
}
.fnos-photo-card strong,
.fnos-photo-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fnos-photo-card strong {
  font-size: 10px;
}
.fnos-photo-card small {
  color: var(--muted);
  font-size: 8px;
}
.fnos-photo-empty {
  min-height: 130px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}
.fnos-photo-empty > .material-symbols-rounded {
  font-size: 30px;
}
.fnos-photo-empty strong {
  color: var(--text);
  font-size: 12px;
}
.fnos-photo-empty small {
  max-width: 310px;
  line-height: 1.5;
}
.fnos-photo-more {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
}
.fnos-photo-sheet .dialog-card {
  max-height: min(92dvh, 820px);
}
.fnos-photo-preview {
  min-height: 260px;
  display: grid;
  place-items: center;
  gap: 7px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-strong);
}
.fnos-photo-preview > img {
  width: 100%;
  max-height: min(58dvh, 620px);
  object-fit: contain;
}
.fnos-photo-preview > small {
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}
.fnos-photo-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fnos-storage {
  display: grid;
  gap: 10px;
}
.fnos-volume-grid {
  display: grid;
  gap: 9px;
}
.fnos-volume-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.fnos-volume-grid article > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.fnos-volume-grid article strong {
  overflow-wrap: anywhere;
}
.fnos-volume-grid article small {
  overflow-wrap: anywhere;
}
.fnos-volume-grid article small {
  color: var(--muted);
}
.fnos-volume-grid article em {
  font-style: normal;
  font-weight: 700;
}
.fnos-volume-grid article > i {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
}
.fnos-volume-grid article > i b {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.fnos-volume-grid article.warning > i b {
  background: var(--warn);
}
.fnos-disk-list {
  display: grid;
  gap: 8px;
}
.fnos-disk-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--surface-strong);
}
.fnos-disk-list article > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.fnos-disk-list strong,
.fnos-disk-list small {
  overflow-wrap: anywhere;
}
.fnos-disk-list small {
  color: var(--muted);
}
.fnos-disk-list em {
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
}
.fnos-disk-list em[data-tone=ok] {
  color: var(--success);
}
.fnos-disk-list em[data-tone=error] {
  color: var(--danger);
}
.fnos-disk-list em[data-tone=unknown] {
  color: var(--muted);
}
.fnos-services {
  display: grid;
  gap: 8px;
}
.fnos-services article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
}
.fnos-services article > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.fnos-services article small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.fnos-services article em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
}
.fnos-services article em i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.fnos-services article em[data-tone=ok] {
  color: var(--success);
}
.fnos-services article em[data-tone=error] {
  color: var(--danger);
}
.fnos-services article em[data-tone=unknown] {
  color: var(--muted);
}
.fnos-services article > button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--text);
  padding: 7px 9px;
}
.fnos-files-section {
  min-width: 0;
}
.fnos-path-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 9px;
}
.fnos-path-bar input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnos-file-list {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.fnos-file-row {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
}
.fnos-file-row > button:first-child {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  text-align: left;
}
.fnos-file-row > button:first-child > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.fnos-file-row strong,
.fnos-file-row small {
  overflow-wrap: anywhere;
}
.fnos-file-row small {
  color: var(--muted);
  line-height: 1.35;
}
.fnos-file-row > div {
  display: flex;
  padding-right: 7px;
}
.fnos-file-row > div button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
}
.fnos-file-row > div button.danger {
  color: var(--danger);
}
.fnos-file-row .material-symbols-rounded {
  font-size: 21px;
}
.fnos-file-row.sensitive {
  background: var(--surface-strong);
  opacity: .78;
}
.fnos-trash-undo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.fnos-trash-undo span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fnos-trash-undo button {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.fnos-empty {
  display: block;
  color: var(--muted);
  padding: 16px;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 390px) {
  .fnos-links {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 390px) {
  .fnos-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
}
@media (max-width: 390px) {
  .fnos-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 390px) {
  .fnos-services article {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (max-width: 390px) {
  .fnos-services article > button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}
@media (max-width: 390px) {
  .fnos-disk-list article {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
@media (max-width: 390px) {
  .fnos-disk-list article em {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 390px) {
  .fnos-file-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 390px) {
  .fnos-file-row > div {
    justify-content: flex-end;
    padding: 0 7px 7px;
  }
}
@media (max-width: 360px) {
  .fnos-photo-card > span:last-child {
    padding: 6px;
  }
}
@media (max-width: 360px) {
  .fnos-photo-actions {
    grid-template-columns: 1fr;
  }
}
.fnos-text-form {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.fnos-text-form input,
.fnos-text-form textarea {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  font: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.fnos-trash-undo {
  flex-wrap: wrap;
}
.fnos-trash-undo > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* frontend/styles/network.css */
.home-network-entry {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 16px;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(
      135deg,
      var(--accent-soft),
      var(--surface-float));
}
.home-network-entry > .material-symbols-rounded:first-child {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-text);
  background: var(--surface-float);
  font-size: 23px;
  box-shadow: var(--shadow-soft);
}
.home-network-entry > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.home-network-entry strong {
  font-size: 14px;
}
.home-network-entry small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.home-network-entry > .material-symbols-rounded:last-child {
  color: var(--accent-text);
  font-size: 19px;
}
.home-network-page {
  max-width: 760px;
}
.subpage-scroll.home-network-scroll {
  padding: 12px 14px calc(28px + var(--safe-bottom));
}
.home-network-summary {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 17px;
  background: var(--accent-soft);
}
.home-network-summary.stale {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
  background: var(--warn-soft);
}
.home-network-summary > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-network-summary > div:first-child > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent-text);
  background: var(--surface-float);
  font-size: 21px;
}
.home-network-summary.stale > div:first-child > .material-symbols-rounded {
  color: var(--warn);
}
.home-network-summary span {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.home-network-summary > span:last-child {
  text-align: right;
}
.home-network-summary strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.home-network-summary small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.home-network-section-head {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 9px;
}
.home-network-section-head h2 {
  margin: 0;
  font-size: 15px;
}
.home-network-section-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10px;
}
.home-network-section-head > span {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 700;
}
.home-network-topology {
  min-width: 0;
  margin-bottom: 22px;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}
.home-topology-branch.online .home-ap-node > i {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
}
.home-topology-trunk {
  display: none;
}
.home-topology-domain-note {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 11px 0 8px;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
  overflow-wrap: anywhere;
}
.home-topology-domain-note .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--accent-text);
  font-size: 15px;
}
.home-topology-evidence {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: -3px 0 13px;
}
.home-topology-evidence span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-float);
  font-size: 8px;
  white-space: nowrap;
}
.home-topology-evidence span:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}
.home-topology-evidence .observed:before {
  background: var(--success);
}
.home-topology-evidence .observed.stale:before {
  background: var(--warn);
}
.home-topology-evidence .declared {
  border-style: dashed;
}
.home-topology-evidence .declared:before {
  background: var(--warn);
}
.home-topology-branches {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  padding-top: 0;
}
.home-topology-branches:before {
  display: none;
}
.home-topology-branch {
  position: relative;
  min-width: 0;
}
.home-topology-branch:before {
  display: none;
}
.home-topology-branch.direct .home-ap-node > .material-symbols-rounded {
  color: var(--muted);
  background: var(--surface);
}
.home-topology-branch.direct .home-ap-node > i {
  background: var(--faint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faint) 16%, transparent);
}
.home-network-aps {
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.home-radio-list {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.home-radio-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(116px, 1fr) 94px 102px 58px;
  align-items: end;
  gap: 7px;
  padding: 9px;
  border-radius: 13px;
  background: var(--surface);
}
.home-radio-title {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1px 7px;
}
.home-radio-title > span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 10px;
  font-weight: 800;
}
.home-radio-title strong {
  font-size: 11px;
}
.home-radio-title small {
  color: var(--muted);
  font-size: 8px;
}
.home-radio-row label {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.home-radio-row label > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 650;
}
.home-radio-row select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-float);
  font-size: 10px;
}
.home-radio-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 0;
}
.home-radio-row > button {
  min-width: 58px;
  height: 40px;
  padding: 0 8px;
  border-radius: 10px;
  color: #fff;
  background: var(--accent);
  font-size: 10px;
  font-weight: 700;
}
#home-network-refresh:disabled .material-symbols-rounded {
  animation: spin .9s linear infinite;
}
@media (max-width: 600px) {
  .home-topology-branches {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 0 0 18px;
  }
}
@media (max-width: 600px) {
  .home-topology-branches:before {
    top: 0;
    bottom: 26px;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }
}
@media (max-width: 600px) {
  .home-topology-branch:before {
    top: 29px;
    left: -12px;
    width: 12px;
    height: 2px;
  }
}
@media (max-width: 600px) {
  .home-topology-trunk {
    height: 16px;
    margin-left: 18px;
  }
}
@media (max-width: 430px) {
  .subpage-scroll.home-network-scroll {
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media (max-width: 430px) {
  .home-network-summary {
    align-items: flex-start;
  }
}
@media (max-width: 430px) {
  .home-network-summary > span:last-child {
    max-width: 42%;
  }
}
@media (max-width: 430px) {
  .home-radio-row {
    grid-template-columns: minmax(0, 1fr) minmax(82px, .72fr);
    align-items: end;
  }
}
@media (max-width: 430px) {
  .home-radio-title {
    grid-column: 1 / -1;
  }
}
@media (max-width: 430px) {
  .home-radio-row label:nth-of-type(2) {
    grid-column: 2 / 3;
  }
}
@media (max-width: 430px) {
  .home-radio-row > button {
    grid-column: 1 / -1;
    min-width: 0;
  }
}
@media (max-width: 370px) {
  .home-network-summary {
    display: grid;
  }
}
@media (max-width: 370px) {
  .home-network-summary > span:last-child {
    max-width: none;
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  #home-network-refresh:disabled .material-symbols-rounded {
    animation: none;
  }
}

/* frontend/styles/radar.css */
.research-radar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.research-radar span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 8px;
  font-weight: 700;
}
.today-briefing-card {
  width: 100%;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.radar-card {
  width: 100%;
  min-width: 0;
  color: inherit;
  text-align: left;
  overflow: hidden;
}
.radar-project-history button {
  width: 100%;
  min-width: 0;
  color: inherit;
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.radar-notify-strip button {
  width: 100%;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.today-briefing-list {
  display: grid;
  gap: 0;
  min-width: 0;
}
.today-briefing-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
}
.today-briefing-card + .today-briefing-card {
  border-top: 1px solid var(--line-soft, var(--line));
}
.today-briefing-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.today-briefing-type {
  min-width: 46px;
  padding: 5px 6px;
  border-radius: 8px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  text-align: center;
}
.today-briefing-card.weekly .today-briefing-type {
  color: #73510e;
  background: color-mix(in srgb, #d8a839 20%, var(--surface));
}
.today-briefing-card.degraded .today-briefing-type {
  color: var(--warn);
  background: var(--warn-soft);
}
.today-briefing-card strong {
  font-size: 14px;
  line-height: 1.45;
}
.today-briefing-card p {
  max-width: 100%;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.today-briefing-card small {
  color: var(--muted);
  font-size: var(--font-meta);
}
.today-briefing-card > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--faint);
}
.today-radar-list {
  display: grid;
  min-width: 0;
}
.radar-card {
  display: grid;
}
.radar-card.risk-high {
  border-color: color-mix(in srgb, #b45309 34%, var(--line));
}
.radar-card-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
}
.radar-card-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
}
.radar-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radar-card-meta time {
  flex: 0 0 auto;
}
.radar-card > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.radar-card > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
}
.radar-card-reason {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
  line-height: 1.45;
}
.radar-card-reason .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--accent-text);
  font-size: 15px;
}
.radar-card-reason span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.radar-card.compact > strong {
  font-size: 13px;
}
.radar-card.compact .radar-card-reason {
  display: none;
}
.radar-risk {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 10px;
}
.radar-risk.medium {
  color: #9a6506;
  background: color-mix(in srgb, #eab308 13%, transparent);
}
.radar-risk.high {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 15%, transparent);
}
.radar-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 48px 18px;
  color: var(--muted);
  text-align: center;
}
.radar-empty .material-symbols-rounded {
  color: var(--accent);
  font-size: 30px;
}
.radar-empty strong {
  color: var(--text);
  font-size: 14px;
}
.radar-empty small {
  max-width: 26em;
  font-size: var(--font-meta);
  line-height: 1.5;
}
.radar-notify-strip button {
  display: flex;
  align-items: center;
  gap: 9px;
}
.radar-notify-strip button > .material-symbols-rounded {
  flex: 0 0 auto;
}
.radar-notify-strip button > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.radar-notify-strip small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.radar-detail-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: var(--font-meta);
}
.radar-detail-body h2 {
  margin: 15px 0 8px;
  font-size: 22px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.radar-detail-body > p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.radar-detail-body section {
  margin: 14px 0;
  padding: 13px 14px;
  border-radius: var(--radius-16);
  background: var(--surface-float);
  overflow: hidden;
}
.radar-detail-body section strong {
  font-size: 12px;
}
.radar-detail-body section p {
  margin: 5px 0 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.radar-detail-body .radar-risk-note {
  background: color-mix(in srgb, #f59e0b 8%, var(--surface-float));
}
.radar-detail-body ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.radar-detail-body li {
  margin: 3px 0;
  overflow-wrap: anywhere;
}
.radar-detail-body dl {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
}
.radar-detail-body dl div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
}
.radar-detail-body dt {
  color: var(--muted);
  font-size: var(--font-meta);
}
.radar-detail-body dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.radar-action-grid > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.radar-action-grid > button .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 19px;
}
.radar-action-grid > button:disabled {
  opacity: .55;
}
.radar-briefing-body > header {
  display: grid;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.radar-briefing-body > header strong {
  font-size: 17px;
  line-height: 1.4;
}
.radar-briefing-body > header small {
  color: var(--muted);
  font-size: var(--font-meta);
}
.radar-briefing-summary {
  margin: 12px 0;
  line-height: 1.65;
}
.radar-briefing-summary > :first-child {
  margin-top: 0;
}
.radar-briefing-summary > :last-child {
  margin-bottom: 0;
}
.radar-project-history button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-12);
  background: var(--surface-float);
}
.radar-project-history button > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.radar-project-history strong {
  font-size: 12px;
  line-height: 1.4;
}
.radar-project-history small {
  color: var(--muted);
  font-size: 10px;
}
.radar-project-history button > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--faint);
}
@media (max-width: 360px) {
  .radar-detail-body h2 {
    font-size: 19px;
  }
}
.radar-page {
  position: relative;
  min-height: 0;
  flex-direction: column;
  background: var(--bg);
  padding-top: max(10px, var(--safe-top));
}
.radar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px 10px;
}
.radar-head > div {
  min-width: 0;
}
.radar-head small {
  display: block;
  margin-bottom: 1px;
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}
.radar-head h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}
.radar-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: var(--font-meta);
  overflow-wrap: anywhere;
}
.radar-notify-strip {
  margin: 0 16px 8px;
  padding: 9px 12px;
  border-radius: var(--radius-12);
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: var(--font-meta);
  overflow-wrap: anywhere;
}
.radar-filter-row {
  display: grid;
  gap: 6px;
  padding: 0 16px 8px;
}
.radar-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.radar-filters::-webkit-scrollbar {
  display: none;
}
.radar-filters button {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.radar-filters button.active {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.radar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 2px 16px calc(90px + var(--safe-bottom));
  scrollbar-width: none;
}
.radar-scroll::-webkit-scrollbar {
  display: none;
}
.radar-list {
  display: grid;
  min-width: 0;
}
.radar-list > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.radar-load-more {
  margin-top: 10px;
}
.radar-intake-fab {
  position: fixed;
  right: max(16px, var(--safe-right));
  bottom: calc(60px + var(--safe-bottom) + 14px);
  z-index: 25;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  color: #f6fffb;
  background: var(--accent);
  box-shadow: var(--shadow);
}
.radar-intake-fab:active {
  background: var(--accent-text);
}
.radar-detail-body {
  min-width: 0;
  padding: 10px 2px;
  font-size: var(--font-body);
  overflow-wrap: anywhere;
}
.radar-detail-body img {
  max-width: 100%;
  height: auto;
}
.radar-detail-body pre {
  overflow-x: auto;
  max-width: 100%;
}
.radar-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.radar-action-grid:empty {
  display: none;
}
.radar-action-grid > button {
  min-width: 0;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
  overflow: hidden;
  background: var(--surface-float);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.radar-action-grid > button:active {
  background: var(--surface-strong);
}
.radar-briefing-sheet {
  max-height: 94dvh;
  overflow: hidden;
}
.radar-briefing-sheet .dialog-card {
  width: min(calc(100vw - 18px), 760px);
  max-height: 94dvh;
  padding-bottom: 0;
  overflow: hidden;
}
.radar-briefing-sheet .dialog-title {
  flex: 0 0 auto;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.radar-briefing-body {
  min-width: 0;
  max-height: calc(94dvh - 76px);
  margin: 0 -2px;
  padding: 0 2px calc(52px + var(--safe-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  font-size: var(--font-body);
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.radar-briefing-sheet::-webkit-scrollbar {
  display: none;
}
.radar-briefing-body::-webkit-scrollbar {
  display: none;
}
.radar-briefing-body:empty:after {
  content: "简报生成后会显示在这里";
  color: var(--faint);
  font-size: var(--font-meta);
}
.briefing-article,
.briefing-article * {
  min-width: 0;
  max-width: 100%;
}
.briefing-article {
  display: grid;
  gap: 0;
}
.briefing-main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 8px 0 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-strong);
}
.briefing-main-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.briefing-main-image figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 28px 12px 10px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(transparent, #000000b3);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.briefing-visual-map {
  width: 100%;
  margin: 8px 0 0;
  padding: 17px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, #0d241e);
  border-radius: 18px;
  color: #effff9;
  background: #0d241e;
}
.briefing-visual-map figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(239, 255, 249, .18);
}
.briefing-visual-map figcaption span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
}
.briefing-visual-map figcaption small {
  color: #effff9a6;
  font-size: 9px;
  line-height: 1.45;
}
.briefing-map-decision {
  padding: 16px 0 14px;
}
.briefing-map-decision small,
.briefing-map-next small {
  display: block;
  margin-bottom: 5px;
  color: #76e7c3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.briefing-map-decision strong {
  display: block;
  font-size: clamp(17px, 4.7vw, 24px);
  line-height: 1.38;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.briefing-map-branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.briefing-map-branches article {
  min-height: 106px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  border-top: 3px solid #39c99d;
  border-radius: 9px;
  background: #ffffff12;
}
.briefing-map-branches article > span {
  width: fit-content;
  padding: 2px 5px;
  color: #081c16;
  background: #76e7c3;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}
.briefing-map-branches article strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.briefing-map-branches article small {
  margin-top: auto;
  color: #effff9a6;
  font-size: 8px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.briefing-map-branches article.empty {
  grid-column: 1 / -1;
  min-height: auto;
}
.briefing-map-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 9px;
  margin-top: 8px;
  padding: 11px 12px;
  border-left: 3px solid #76e7c3;
  background: #76e7c31c;
}
.briefing-map-next small {
  grid-column: 1 / -1;
  margin: 0;
}
.briefing-map-next strong {
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.briefing-map-next > span {
  align-self: center;
  color: #effff9ad;
  font-size: 8px;
}
.briefing-map-next.empty {
  border-left-color: #effff947;
}
.briefing-generation-status {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
}
.briefing-visual-status {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
  background: var(--surface-float);
}
.briefing-generation-status {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
  background: var(--warn-soft);
}
.briefing-generation-status > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 21px;
}
.briefing-visual-status > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: 21px;
}
.briefing-generation-status > .material-symbols-rounded {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
}
.briefing-generation-status > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.briefing-visual-status > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.briefing-generation-status strong,
.briefing-visual-status strong {
  color: var(--text);
  font-size: 12px;
}
.briefing-generation-status small,
.briefing-visual-status small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .briefing-visual-map {
    padding: 13px;
  }
}
@media (max-width: 480px) {
  .briefing-map-decision {
    padding-top: 13px;
  }
}
@media (max-width: 480px) {
  .briefing-map-branches {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}
@media (max-width: 480px) {
  .briefing-map-branches article {
    min-height: auto;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 3px 8px;
    padding: 8px;
  }
}
@media (max-width: 480px) {
  .briefing-map-branches article > span {
    grid-row: 1 / span 2;
  }
}
@media (max-width: 480px) {
  .briefing-map-branches article strong {
    display: block;
    overflow: visible;
    font-size: 10px;
    -webkit-line-clamp: initial;
  }
}
@media (max-width: 480px) {
  .briefing-map-branches article small {
    margin-top: 0;
  }
}
@media (max-width: 480px) {
  .briefing-action-list > article {
    grid-template-columns: 27px minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .briefing-action-list > article > div:last-child {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .briefing-action-list > article > div:last-child button {
    min-height: 38px;
    white-space: normal;
  }
}
.briefing-hero {
  padding: 24px 3px 22px;
  border-bottom: 1px solid var(--line);
}
.briefing-edition {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .16em;
}
.briefing-hero h1 {
  margin: 0;
  font-size: clamp(25px, 7vw, 34px);
  line-height: 1.22;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.briefing-hero > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.briefing-hero > div:not(.briefing-interest-tags) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 13px;
  margin-top: 15px;
  color: var(--faint);
  font-size: 10px;
}
.briefing-interest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.briefing-interest-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 700;
}
.briefing-executive {
  margin: 18px 0 5px;
  padding: 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-16) var(--radius-16) 0;
  background: color-mix(in srgb, var(--accent-soft) 64%, var(--surface-float));
  line-height: 1.72;
}
.briefing-executive > span {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.briefing-executive > :not(span) {
  margin-top: 0;
  margin-bottom: 0;
}
.briefing-analysis-section {
  position: relative;
  padding: 26px 3px 24px 40px;
  border-bottom: 1px solid var(--line-soft);
}
.briefing-section-index {
  position: absolute;
  top: 29px;
  left: 3px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.briefing-analysis-section h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.briefing-analysis-copy {
  color: var(--text);
  font-size: 14px;
  line-height: 1.78;
}
.briefing-analysis-copy > :first-child {
  margin-top: 0;
}
.briefing-analysis-copy > :last-child {
  margin-bottom: 0;
}
.briefing-analysis-copy a,
.briefing-analysis-copy code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.briefing-analysis-section aside {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  margin-top: 16px;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--surface);
}
.briefing-analysis-section aside > .material-symbols-rounded {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 17px;
}
.briefing-analysis-section aside strong {
  font-size: 10px;
}
.briefing-analysis-section aside p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.briefing-inline-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}
.briefing-inline-evidence button {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 9px;
  text-align: left;
  overflow-wrap: anywhere;
}
.briefing-inline-evidence button span {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
}
.briefing-action-section {
  margin: 22px 0 8px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: var(--radius-16);
  color: var(--text);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-float));
}
.briefing-action-section > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}
.briefing-action-section > header > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 19px;
}
.briefing-action-section header span:last-child {
  display: grid;
  gap: 1px;
}
.briefing-action-section header strong {
  font-size: 13px;
}
.briefing-action-section header small {
  color: var(--muted);
  font-size: 9px;
}
.briefing-action-list {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}
.briefing-action-list > article {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-float);
}
.briefing-action-index {
  width: 27px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .06em;
}
.briefing-action-list > article > span:nth-child(2) {
  display: grid;
  gap: 4px;
}
.briefing-action-list > article strong {
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.briefing-action-list > article p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.briefing-action-list > article small {
  color: var(--accent-text);
  font-size: 8px;
  font-weight: 700;
}
.briefing-action-list > article > div:last-child {
  display: grid;
  gap: 5px;
}
.briefing-action-list > article > div:last-child button {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--accent-text);
  background: var(--surface);
  font-size: 9px;
  white-space: nowrap;
}
.briefing-action-list > article > div:last-child button:last-child {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.briefing-action-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.briefing-action-evidence button {
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 8px;
}
.briefing-watch-section {
  padding: 18px 3px;
  border-bottom: 1px solid var(--line);
}
.briefing-watch-section > strong {
  font-size: 12px;
}
.briefing-watch-section p {
  margin: 8px 0 0;
  padding-left: 13px;
  position: relative;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.briefing-watch-section p:before {
  content: "";
  position: absolute;
  top: .65em;
  left: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.briefing-evidence {
  margin: 10px 0 0;
  border-bottom: 1px solid var(--line);
}
.briefing-evidence summary {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 3px;
  cursor: pointer;
  list-style: none;
}
.briefing-evidence summary::-webkit-details-marker {
  display: none;
}
.briefing-evidence summary > span:first-child {
  display: grid;
  gap: 2px;
}
.briefing-evidence summary strong {
  font-size: 12px;
}
.briefing-evidence summary small {
  color: var(--muted);
  font-size: 9px;
}
.briefing-evidence summary > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 19px;
  transition: transform .18s ease;
}
.briefing-evidence[open] summary > .material-symbols-rounded {
  transform: rotate(180deg);
}
.briefing-evidence > div {
  display: grid;
  gap: 5px;
  padding: 0 0 14px;
}
.briefing-evidence > div > button {
  width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}
.briefing-evidence > div > button > span:first-child {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 800;
}
.briefing-evidence button > span:nth-child(2) {
  display: grid;
  gap: 2px;
}
.briefing-evidence button strong {
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.briefing-evidence button small {
  color: var(--muted);
  font-size: 8px;
  overflow-wrap: anywhere;
}
.briefing-evidence button > .material-symbols-rounded {
  color: var(--faint);
  font-size: 15px;
}
.briefing-feedback {
  margin: 24px 0 4px;
  padding: 19px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-20);
  background: var(--surface-float);
}
.briefing-feedback-kicker {
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.briefing-feedback h2 {
  margin: 7px 0 4px;
  font-size: 18px;
  line-height: 1.35;
}
.briefing-feedback > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.briefing-rating-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 15px;
}
.briefing-rating-row button {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
  overflow-wrap: anywhere;
}
.briefing-rating-row button .material-symbols-rounded {
  font-size: 20px;
}
.briefing-rating-row button.selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent-text);
  background: var(--accent-soft);
}
.briefing-direction-title {
  display: block;
  margin-top: 17px;
  font-size: 10px;
}
.briefing-direction-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.briefing-direction-grid button {
  max-width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 9px;
  overflow-wrap: anywhere;
}
.briefing-direction-grid button.selected {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--accent-text);
  background: var(--accent-soft);
}
.briefing-feedback-submit {
  width: 100%;
  min-height: 42px;
  margin-top: 16px;
  border-radius: 12px;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 750;
}
.briefing-feedback.saved {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 14px;
}
.briefing-feedback.saved > .material-symbols-rounded {
  color: var(--accent);
  font-size: 24px;
}
.briefing-feedback.saved > span:nth-child(2) {
  display: grid;
  gap: 2px;
}
.briefing-feedback.saved strong {
  font-size: 11px;
}
.briefing-feedback.saved p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.briefing-feedback.saved button {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
}
@media (max-width: 400px) {
  .radar-briefing-sheet {
    max-height: 96dvh;
  }
}
@media (max-width: 400px) {
  .radar-briefing-sheet .dialog-card {
    width: calc(100vw - 10px);
    max-height: 96dvh;
  }
}
@media (max-width: 400px) {
  .radar-briefing-body {
    max-height: calc(96dvh - 72px);
  }
}
@media (max-width: 400px) {
  .briefing-hero {
    padding-top: 20px;
  }
}
@media (max-width: 400px) {
  .briefing-analysis-section {
    padding-left: 34px;
  }
}
@media (max-width: 400px) {
  .briefing-feedback {
    padding-right: 12px;
    padding-left: 12px;
  }
}
.radar-project-history {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}
.radar-project-history:empty {
  display: none;
}
.radar-project-history > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 400px) {
  .radar-head h1 {
    font-size: 20px;
  }
}
@media (min-width: 800px) {
  .radar-head {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}
@media (min-width: 800px) {
  .radar-filter-row {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}
@media (min-width: 800px) {
  .radar-scroll > * {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  .radar-intake-fab {
    bottom: calc(48px + var(--safe-bottom) + 10px);
    width: 48px;
    height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar-filters button {
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar-intake-fab {
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar-action-grid > button {
    transition: none;
    animation: none;
  }
}
.radar-card {
  overflow-wrap: anywhere;
  word-break: normal;
}
.today-radar-list {
  gap: 0;
}
.today-radar-list .radar-card {
  padding: 10px 0;
}
.radar-scroll {
  padding-right: 16px;
  padding-left: 16px;
}
.radar-list {
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.radar-card,
.radar-card.risk-high {
  gap: 6px;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.radar-card:active {
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}
.radar-card > strong {
  font-size: 15px;
  line-height: 1.46;
}
.radar-card > p {
  font-size: 12px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
}
.radar-card-reason {
  padding-left: 8px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
}
.radar-card-reason .material-symbols-rounded {
  display: none;
}
.radar-card-footer {
  justify-content: flex-start;
}
.radar-card-footer > :last-child {
  margin-left: auto;
}
.radar-filters button {
  border-color: transparent;
  background: var(--surface);
}
.radar-filters button.active {
  border-color: transparent;
}
.radar-evidence-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.radar-evidence-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.radar-evidence-list a {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .radar-card {
    transition: none;
  }
}
.radar-pulse {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 0 16px 10px;
}
.radar-pulse-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-float);
  overflow-wrap: anywhere;
}
.radar-pulse-card .today-briefing-card {
  min-height: 52px;
}
.radar-pulse-card > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.radar-pulse-card > header > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 19px;
}
.radar-pulse-card > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.radar-pulse-card > header strong {
  font-size: 12px;
}
.radar-pulse-card > header small {
  color: var(--muted);
  font-size: 9px;
}
.radar-pulse-list {
  display: grid;
  gap: 2px;
  margin-top: 7px;
}
.radar-pulse-list > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  text-align: left;
  background: transparent;
}
.radar-pulse-list > button > .material-symbols-rounded {
  color: var(--muted);
  font-size: 18px;
}
.radar-pulse-list > button > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.radar-pulse-list strong,
.radar-pulse-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.radar-pulse-list strong {
  font-size: 11px;
}
.radar-pulse-list small {
  color: var(--muted);
  font-size: 9px;
}
.radar-filters button {
  min-height: 44px;
}
@media (max-width: 360px) {
  .radar-pulse {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (min-width: 800px) {
  .radar-pulse {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 800px) {
  .radar-pulse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar-pulse-card {
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .radar-pulse-list > button {
    transition: none;
    animation: none;
  }
}

/* frontend/styles/models.css */
.floating-actions button.local-model {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.local-models-page .subpage-scroll {
  padding-bottom: calc(28px + var(--safe-bottom));
}
.local-model-summary {
  min-height: 74px;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.local-model-summary > .material-symbols-rounded {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
}
.local-model-summary.active > .material-symbols-rounded {
  color: var(--accent-text);
  background: var(--accent-soft);
  font-variation-settings:
    "FILL" 1,
    "wght" 450,
    "GRAD" 0,
    "opsz" 24;
}
.local-model-summary.error {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: color-mix(in srgb, var(--danger-soft) 45%, var(--surface-float));
}
.local-model-summary.error > .material-symbols-rounded {
  color: var(--danger);
  background: var(--danger-soft);
}
.local-model-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.local-model-summary small {
  color: var(--muted);
  font-size: 11px;
}
.local-model-summary > button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 11px;
  font-weight: 650;
}
.local-model-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.local-model-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.local-model-actions .material-symbols-rounded {
  font-size: 19px;
}
.local-model-guide {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface);
}
.local-model-guide > .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 19px;
}
.local-model-guide p {
  display: grid;
  gap: 2px;
  margin: 0;
}
.local-model-guide strong {
  color: var(--text);
  font-size: 12px;
}
.local-model-guide small {
  font-size: 10px;
  line-height: 1.5;
}
.local-model-job {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.local-model-job.state-active > .material-symbols-rounded {
  animation: spin .9s linear infinite;
}
.local-model-job.state-failed,
.local-model-job.state-lost {
  color: var(--danger);
  background: var(--danger-soft);
}
.local-model-job > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.local-model-job strong {
  color: var(--text);
  font-size: 12px;
}
.local-model-job small {
  color: var(--muted);
  font-size: 10px;
}
.local-model-job pre {
  max-height: 120px;
  margin: 5px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font-size: 9px;
}
.local-model-list {
  display: grid;
}
.local-model-card {
  display: grid;
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.local-model-card.running {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.local-model-icon {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
}
.local-model-card.running .local-model-icon {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.local-model-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.local-model-copy > span {
  min-width: 0;
  display: flex;
  gap: 6px;
}
.local-model-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.local-model-copy i {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.local-model-copy small {
  color: var(--muted);
  font-size: 10px;
}
.local-model-copy p {
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--faint);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  font-size: 9px;
}
.local-model-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.local-model-card-actions > button:not(.icon-button) {
  padding: 0 11px;
  border-radius: 9px;
  font-size: 11px;
}
.local-model-card-actions .icon-button {
  width: 34px;
  height: 34px;
  color: var(--muted);
}
.local-model-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 34px 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  text-align: center;
}
.local-model-empty .material-symbols-rounded {
  font-size: 34px;
}
.local-model-empty strong {
  color: var(--text);
  font-size: 13px;
}
.local-model-empty p {
  max-width: 280px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.local-models-page .subpage-bar {
  border: 0;
}
.local-models-page .subpage-bar > * {
  pointer-events: auto;
}
.local-models-page .subpage-bar > div {
  margin-right: auto;
  border-radius: 14px;
}
.local-models-page .subpage-bar .icon-button:disabled .material-symbols-rounded {
  animation: spin .9s linear infinite;
}
.local-models-page .subpage-scroll {
  padding-top: calc(var(--safe-top) + 66px);
}
.local-model-actions {
  margin: 12px 0 8px;
}
.local-model-summary .service-mini-actions button {
  padding: 0 9px;
  border-radius: 9px;
  color: var(--text);
  background: var(--surface);
  font-size: 10px;
  font-weight: 650;
}
.local-model-summary .service-mini-actions .danger {
  color: var(--danger);
  background: var(--danger-soft);
}
.local-model-empty.compact {
  min-height: 150px;
}
@media (max-width: 380px) {
  .local-model-summary {
    grid-template-columns: 36px minmax(0, 1fr);
  }
}
@media (max-width: 380px) {
  .local-model-summary .service-mini-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
@media (max-width: 370px) {
  .local-model-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 370px) {
  .local-model-summary {
    grid-template-columns: 36px minmax(0, 1fr);
  }
}
@media (max-width: 370px) {
  .local-model-summary > button {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 430px) {
  .local-models-page .subpage-bar > div {
    backdrop-filter: none;
  }
}
@media (max-width: 430px) {
  .local-models-page .subpage-bar .icon-button {
    backdrop-filter: none;
  }
}
.local-model-job pre {
  overflow-x: auto;
  max-width: 100%;
}
.local-model-empty {
  color: var(--muted);
}
.local-model-api {
  min-width: 0;
  display: grid;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.local-model-api > .material-symbols-rounded {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.local-model-api > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.local-model-api small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.local-model-api button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.local-model-performance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
  padding: 9px;
  border-radius: 12px;
  background: var(--surface);
}
.local-model-performance > span {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: center;
}
.local-model-performance strong {
  color: var(--accent-text);
  font-size: 13px;
}
.local-model-performance small {
  color: var(--muted);
  font-size: 8px;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .local-model-api {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .local-model-api button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}
.local-models-page {
  overflow: hidden;
  background: var(--bg);
}
.local-models-page .subpage-bar {
  position: relative;
  inset: auto;
  z-index: 2;
  min-height: 60px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-top) + 7px) 14px 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  pointer-events: auto;
  backdrop-filter: blur(18px);
}
.local-models-page .subpage-bar > div {
  min-width: 0;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.local-models-page .subpage-bar strong,
.local-models-page .subpage-bar small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.local-models-page .subpage-bar strong {
  font-size: 15px;
}
.local-models-page .subpage-bar small {
  color: var(--muted);
  font-size: 10px;
}
.local-models-page .subpage-bar .icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.local-models-page .subpage-scroll {
  padding: 14px 16px calc(36px + var(--safe-bottom));
}
.local-model-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 14px;
  border-radius: 18px;
}
.local-model-summary > .material-symbols-rounded {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}
.local-model-summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.local-model-summary > span:nth-child(2) > small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}
.local-model-summary > span:nth-child(2) > strong {
  font-size: 14px;
}
.local-model-summary > span:nth-child(2) > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.local-model-summary .service-mini-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.local-model-summary .service-mini-actions button {
  min-width: 50px;
  min-height: 38px;
}
.local-model-api {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
}
.local-model-api.idle {
  color: var(--muted);
  background: var(--surface);
}
.local-model-api.idle > .material-symbols-rounded {
  color: var(--muted);
  background: var(--surface-float);
}
.local-model-api strong {
  font-size: 12px;
}
.local-model-api small {
  font-size: 9px;
  line-height: 1.5;
}
.local-model-api > button {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 10px;
}
.local-model-api > .local-model-performance {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 1px;
}
.model-lab-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 15px;
  background: var(--surface);
}
.model-lab-tabs button {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: 11px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
}
.model-lab-tabs button.active {
  color: var(--accent-text);
  background: var(--surface-float);
  box-shadow: var(--shadow-soft);
}
.model-lab-tabs .material-symbols-rounded {
  font-size: 18px;
}
.model-lab-panel[hidden] {
  display: none !important;
}
.model-lab-panel {
  min-width: 0;
}
.local-model-list {
  gap: 10px;
}
.local-model-card {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 13px;
  border-radius: 16px;
}
.local-model-card.running {
  box-shadow: inset 3px 0 0 var(--accent);
}
.local-model-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}
.local-model-copy > span {
  align-items: start;
}
.local-model-copy strong {
  flex: 1 1 auto;
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.local-model-copy i.downloaded {
  color: var(--muted);
  background: var(--surface);
}
.local-model-copy p {
  white-space: normal;
  word-break: break-all;
  line-height: 1.35;
}
.local-model-card-actions {
  grid-column: 1 / -1;
  align-items: center;
}
.local-model-card-actions > button:not(.icon-button) {
  min-width: 84px;
  min-height: 40px;
}
.local-model-card-actions > button.danger {
  color: var(--danger);
  background: var(--danger-soft);
}
.runtime-select-row.readonly > div > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
  font-weight: 700;
}
.runtime-select-row.readonly > div > span.active {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.model-search-results .local-model-empty > button {
  min-height: 38px;
  margin-top: 5px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 10px;
}
.model-lab-panel[data-local-model-panel=jobs] .local-model-job {
  margin: 0;
}
.model-lab-panel[data-local-model-panel=jobs] .local-model-job pre {
  max-height: 180px;
}
#local-model-deploy-dialog .dialog-card {
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  padding-bottom: calc(18px + var(--safe-bottom));
}
#local-model-deploy-dialog input:disabled {
  color: var(--muted);
  background: var(--surface);
  opacity: 1;
}
@media (max-width: 393px) {
  .local-models-page .subpage-scroll {
    padding-inline: 12px;
  }
}
@media (max-width: 393px) {
  .local-model-summary {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 12px;
  }
}
@media (max-width: 393px) {
  .local-model-summary > .material-symbols-rounded {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 393px) {
  .local-model-summary .service-mini-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
@media (max-width: 393px) {
  .local-model-api {
    grid-template-columns: 36px minmax(0, 1fr);
  }
}
@media (max-width: 393px) {
  .local-model-api > button {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 360px) {
  .model-lab-tabs button {
    gap: 3px;
    padding-inline: 4px;
    font-size: 9px;
  }
}
@media (max-width: 360px) {
  .model-lab-tabs .material-symbols-rounded {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .local-model-summary > .material-symbols-rounded {
    animation: none;
  }
}
.local-model-history {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.local-model-history article {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.local-model-history pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.local-model-history input {
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

/* frontend/styles/manufacturing.css */
.bambu-resource-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      var(--surface-float),
      color-mix(in srgb, var(--accent-soft) 40%, var(--surface-float)));
  overflow: hidden;
}
.bambu-resource-card.pairing {
  border-color: color-mix(in srgb, #d69a2d 42%, var(--line));
  background:
    linear-gradient(
      145deg,
      var(--surface-float),
      color-mix(in srgb, #f7d99c 24%, var(--surface-float)));
}
.bambu-resource-card.warning {
  border-color: color-mix(in srgb, var(--warn) 42%, var(--line));
}
.bambu-resource-card.offline {
  border-color: var(--line);
  background: var(--surface-float);
}
.bambu-resource-card > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.bambu-resource-card > header > .material-symbols-rounded {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 24px;
}
.bambu-resource-card.pairing > header > .material-symbols-rounded {
  color: #8a5a0a;
  background: color-mix(in srgb, #f7d99c 48%, var(--surface-float));
}
.bambu-resource-card > header > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.bambu-resource-card > header strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.bambu-resource-card > header small {
  color: var(--muted);
  font-size: 9px;
  overflow-wrap: anywhere;
}
.bambu-resource-card > header > i {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}
.bambu-resource-card > header > i .material-symbols-rounded {
  font-size: 13px;
}
.bambu-resource-card.pairing > header > i {
  color: #8a5a0a;
  background: color-mix(in srgb, #f7d99c 48%, var(--surface-float));
}
.bambu-resource-card.warning > header > i {
  color: var(--warn);
  background: var(--warn-soft);
}
.bambu-resource-card.offline > header > i {
  color: var(--muted);
  background: var(--surface);
}
.bambu-progress {
  height: 6px;
  margin: 12px 0 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}
.bambu-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width .22s ease;
}
.bambu-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.bambu-facts > span {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 8px 9px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}
.bambu-facts strong {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.bambu-facts small {
  color: var(--muted);
  font-size: 8px;
  overflow-wrap: anywhere;
}
.bambu-pairing-copy {
  display: grid;
  gap: 3px;
  margin: 11px 1px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.bambu-pairing-copy strong {
  color: var(--text);
  font-size: 11px;
}
.bambu-pairing-copy span {
  overflow-wrap: anywhere;
}
.bambu-pairing-feedback {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line));
  border-radius: 11px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.bambu-pairing-feedback[hidden] {
  display: none;
}
.bambu-resource-card > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 11px;
}
.bambu-resource-card > footer button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-float);
  font-size: 9px;
  font-weight: 700;
}
.bambu-resource-card > footer button.primary {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}
.bambu-resource-card > footer button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
  background: var(--danger-soft);
}
.bambu-resource-card > footer .material-symbols-rounded {
  font-size: 15px;
}
@media (max-width: 430px) {
  .bambu-resource-card > header {
    grid-template-columns: 42px minmax(0, 1fr);
  }
}
@media (max-width: 430px) {
  .bambu-resource-card > header > i {
    grid-column: 2;
    justify-self: start;
  }
}
@media (max-width: 430px) {
  .bambu-resource-card > footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 430px) {
  .bambu-resource-card > footer button:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 370px) {
  .bambu-facts {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 370px) {
  .bambu-resource-card > footer {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 370px) {
  .bambu-resource-card > footer button:last-child {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bambu-progress > i {
    transition: none;
  }
}
.hub-row-icon-bambu {
  color: var(--warn);
  background: var(--warn-soft);
}
.bambu-page {
  max-width: 760px;
}
.subpage-scroll.bambu-scroll {
  padding: 12px 14px calc(28px + var(--safe-bottom));
}
.bambu-page-intro {
  min-height: 70px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 17px;
  background: var(--accent-soft);
}
.bambu-page-intro > .material-symbols-rounded {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-text);
  background: var(--surface-float);
  font-size: 24px;
}
.bambu-page-intro > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.bambu-page-intro strong {
  font-size: 13px;
}
.bambu-page-intro small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bambu-design-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface-float);
}
.bambu-design-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bambu-design-card > header > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.bambu-design-card > header strong {
  font-size: 15px;
}
.bambu-design-card > header small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.bambu-design-card > header > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.bambu-workflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.bambu-workflow > span {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 9px 8px;
  border-radius: 13px;
  background: var(--surface);
}
.bambu-workflow i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.bambu-workflow strong {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.bambu-workflow small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#bambu-design-brief {
  width: 100%;
  min-height: 82px;
  max-height: 180px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.bambu-reference-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.bambu-reference-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
}
.bambu-reference-actions button .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 17px;
}
.bambu-reference-actions small {
  flex: 1 1 170px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.bambu-reference-preview {
  min-width: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 13px;
  background: var(--accent-soft);
}
.bambu-reference-preview[hidden] {
  display: none;
}
.bambu-reference-preview img {
  width: 68px;
  height: 56px;
  object-fit: cover;
  border-radius: 9px;
  background: var(--surface);
}
.bambu-reference-preview > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.bambu-reference-preview strong {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.bambu-reference-preview small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.bambu-reference-preview > button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
}
.bambu-reference-preview > button .material-symbols-rounded {
  font-size: 16px;
}
.bambu-design-card > button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 13px;
  color: #fff;
  background: var(--accent);
  font-size: 12px;
  font-weight: 750;
}
.bambu-design-card > button .material-symbols-rounded {
  font-size: 18px;
}
.bambu-current-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 9px;
}
.bambu-current-head strong {
  font-size: 14px;
}
.bambu-current-head small {
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}
.manufacturing-capabilities {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-float);
}
.manufacturing-capabilities > .material-symbols-rounded {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface);
  font-size: 20px;
}
.manufacturing-capabilities > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.manufacturing-capabilities strong {
  font-size: 12px;
}
.manufacturing-capabilities small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.manufacturing-capabilities button {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 34%, var(--line));
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  font-size: 9px;
  font-weight: 750;
}
.manufacturing-capabilities button .material-symbols-rounded {
  font-size: 15px;
}
.manufacturing-capabilities[data-tone=ready] {
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
}
.manufacturing-capabilities[data-tone=ready] > .material-symbols-rounded {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 11%, var(--surface));
}
.manufacturing-capabilities[data-tone=warn] > .material-symbols-rounded {
  color: var(--warning, #b47a20);
}
.manufacturing-capabilities[data-tone=error] > .material-symbols-rounded {
  color: var(--danger);
}
.manufacturing-head {
  align-items: center;
}
.manufacturing-head .text-button {
  min-height: 32px;
  padding: 0 9px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 10px;
}
.manufacturing-projects {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.manufacturing-project-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-float);
}
.manufacturing-project-card > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 20px;
}
.manufacturing-project-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.manufacturing-project-card strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.manufacturing-project-card small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.manufacturing-project-card button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 750;
}
.manufacturing-jobs {
  display: grid;
  gap: 11px;
  margin-bottom: 20px;
}
.manufacturing-job-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-float);
}
.manufacturing-job-card[data-tone=warn] {
  border-color: color-mix(in srgb, var(--warning, #b47a20) 36%, var(--line));
}
.manufacturing-job-card[data-tone=error] {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
}
.manufacturing-job-preview {
  min-height: 142px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--accent) 18%, transparent),
      transparent 63%),
    var(--surface);
}
.manufacturing-job-preview img {
  width: 100%;
  height: 100%;
  min-height: 142px;
  object-fit: contain;
}
.manufacturing-job-preview > .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 42px;
  opacity: .7;
}
.manufacturing-job-body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}
.manufacturing-job-body > header {
  min-width: 0;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}
.manufacturing-job-body > header > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.manufacturing-job-body > header strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.manufacturing-job-body > header small {
  color: var(--muted);
  font-size: 9px;
}
.manufacturing-job-body > header i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 8px;
  font-style: normal;
  white-space: nowrap;
}
.manufacturing-job-body > header i .material-symbols-rounded {
  font-size: 13px;
}
.manufacturing-job-body > header i[data-tone=ready] {
  color: var(--success);
}
.manufacturing-job-body > header i[data-tone=warn] {
  color: var(--warning, #b47a20);
}
.manufacturing-job-body > header i[data-tone=error] {
  color: var(--danger);
}
.manufacturing-job-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.manufacturing-job-facts > span {
  min-width: 0;
  display: grid;
  gap: 1px;
  padding: 7px 8px;
  border-radius: 10px;
  background: var(--surface);
}
.manufacturing-job-facts strong {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.manufacturing-job-facts small {
  color: var(--muted);
  font-size: 8px;
  overflow-wrap: anywhere;
}
.manufacturing-filament-select {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 9px;
}
.manufacturing-filament-select select {
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 0 28px 0 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  font-size: 9px;
  text-overflow: ellipsis;
}
.manufacturing-job-error {
  margin: 0;
  color: var(--danger);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.manufacturing-job-body > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.manufacturing-job-body > footer > button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 11px;
  color: #fff;
  background: var(--accent);
  font-size: 9px;
  font-weight: 750;
}
.manufacturing-job-body > footer > button .material-symbols-rounded {
  font-size: 15px;
}
.manufacturing-job-body > footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 5px;
}
.manufacturing-job-body > footer > div button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 8px;
  font-weight: 700;
}
.manufacturing-job-body > footer > div button.danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}
.manufacturing-job-body > footer > div button:disabled {
  opacity: .48;
}
.manufacturing-chat-context {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface-float));
}
.manufacturing-chat-context > .material-symbols-rounded {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent-text);
  background: var(--surface-float);
  font-size: 22px;
}
.manufacturing-chat-context > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.manufacturing-chat-context strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.manufacturing-chat-context small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.manufacturing-chat-context button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--surface-float);
  font-size: 9px;
  font-weight: 750;
}
@media (max-width: 430px) {
  .bambu-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 430px) {
  .manufacturing-job-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}
@media (max-width: 430px) {
  .manufacturing-job-preview {
    min-height: 132px;
  }
}
@media (max-width: 430px) {
  .manufacturing-job-preview img {
    min-height: 132px;
  }
}
@media (max-width: 430px) {
  .manufacturing-job-body {
    padding: 10px;
  }
}
@media (max-width: 430px) {
  .manufacturing-job-body > footer {
    align-items: stretch;
    flex-direction: column;
  }
}
@media (max-width: 430px) {
  .manufacturing-job-body > footer > div {
    justify-content: start;
  }
}
@media (max-width: 360px) {
  .bambu-design-card {
    padding: 12px 10px;
  }
}
@media (max-width: 360px) {
  .bambu-workflow {
    gap: 5px;
  }
}
@media (max-width: 360px) {
  .manufacturing-project-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}
@media (max-width: 360px) {
  .manufacturing-project-card > .material-symbols-rounded {
    width: 34px;
    height: 34px;
  }
}
@media (max-width: 360px) {
  .manufacturing-project-card > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 360px) {
  .manufacturing-chat-context {
    grid-template-columns: 36px minmax(0, 1fr);
  }
}
@media (max-width: 360px) {
  .manufacturing-chat-context > .material-symbols-rounded {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 360px) {
  .manufacturing-chat-context > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 360px) {
  .manufacturing-job-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 360px) {
  .manufacturing-job-preview {
    min-height: 150px;
    max-height: 210px;
  }
}
@media (max-width: 360px) {
  .manufacturing-job-preview img {
    min-height: 150px;
    max-height: 210px;
  }
}

/* frontend/styles/software.css */
.software-scroll {
  display: grid;
  align-content: start;
  gap: 14px;
}
.software-intro {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-20);
  background: var(--surface-float);
}
.software-intro > .material-symbols-rounded {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-14);
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 24px;
}
.software-intro > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.software-intro strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}
.software-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.software-intro button,
.software-empty button {
  min-height: 36px;
  padding: 0 11px;
  border-radius: var(--radius-10);
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
}
.software-status {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: var(--radius-14);
  color: var(--accent-text);
  background: var(--accent-soft);
}
.software-status > .material-symbols-rounded {
  font-size: 20px;
}
.software-status > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.software-status strong,
.software-status small {
  overflow-wrap: anywhere;
}
.software-status strong {
  font-size: 12px;
}
.software-status small {
  color: var(--muted);
  font-size: 10px;
}
.software-status.state-error {
  color: var(--danger);
  background: var(--danger-soft);
}
.software-list {
  display: grid;
  gap: 11px;
}
.software-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-20);
  background: var(--surface-float);
}
.software-card > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 14px 8px;
}
.software-card > header > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.software-card > header strong {
  overflow-wrap: anywhere;
}
.software-card > header small {
  overflow-wrap: anywhere;
}
.software-card > header strong {
  font-size: 15px;
}
.software-card > header small {
  color: var(--muted);
  font-size: 10px;
}
.software-app-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-14);
  color: #536ca4;
  background: color-mix(in srgb, #6685c5 14%, var(--surface));
}
.software-app-icon .material-symbols-rounded {
  font-size: 23px;
}
.software-card > p {
  margin: 0;
  padding: 0 14px 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.software-release {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
}
.software-release.latest {
  background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
}
.software-release > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.software-release strong,
.software-release small,
.software-release p {
  overflow-wrap: anywhere;
}
.software-release strong {
  font-size: 12px;
}
.software-release small {
  color: var(--muted);
  font-size: 9px;
}
.software-release p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.software-release button {
  min-width: 58px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-10);
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.software-release button:disabled {
  opacity: .55;
}
.software-card details {
  border-top: 1px solid var(--line);
}
.software-card details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  font-size: 10px;
}
.software-card details > summary::-webkit-details-marker {
  display: none;
}
.software-card details > summary .material-symbols-rounded {
  font-size: 17px;
  transition: transform .18s ease;
}
.software-card details[open] > summary .material-symbols-rounded {
  transform: rotate(180deg);
}
.software-empty {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px;
  text-align: center;
}
.software-empty > .material-symbols-rounded {
  color: var(--faint);
  font-size: 42px;
}
.software-empty strong {
  margin-top: 9px;
  font-size: 14px;
}
.software-empty p {
  max-width: 330px;
  margin: 5px 0 13px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
@media (max-width: 390px) {
  .software-intro {
    grid-template-columns: 40px minmax(0, 1fr);
  }
}
@media (max-width: 390px) {
  .software-intro > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 390px) {
  .software-release {
    align-items: start;
  }
}

/* frontend/styles/pairing.css */
.web-pair-gate {
  background:
    radial-gradient(
      circle at 50% 13%,
      color-mix(in srgb, var(--accent-soft) 82%, transparent),
      transparent 34%),
    var(--bg);
}
.web-pair-gate .unlock-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-float);
  box-shadow: var(--shadow);
}
.web-pair-gate .unlock-card > small:first-of-type {
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.web-pair-gate .unlock-card h1 {
  font-size: clamp(27px, 7vw, 34px);
}
.web-pair-gate .unlock-card form[hidden] {
  display: none;
}
.web-pair-gate .unlock-card button.primary {
  min-height: 48px;
  margin-top: 4px;
  border-radius: 12px;
}
.web-pair-gate .text-button {
  justify-content: center;
}
.web-pair-session-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.device-pair-card {
  text-align: left;
}
.device-pair-code {
  margin: 12px 0 6px;
  padding: 20px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--text);
  font:
    700 30px/1.1 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  letter-spacing: .15em;
  text-align: center;
}
.device-pair-card .dialog-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.device-pair-card .dialog-actions .material-symbols-rounded {
  font-size: 18px;
}
.web-pair-request-dialog .dialog-card {
  width: min(calc(100vw - 36px), 390px);
  text-align: center;
}
.web-pair-request-dialog .dialog-card > strong {
  font-size: 18px;
}
.web-pair-request-dialog .dialog-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.web-pair-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 2px;
  border-radius: 18px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.web-pair-icon .material-symbols-rounded {
  font-size: 28px;
}
.web-pair-request-dialog .device-pair-code {
  width: 100%;
}
#classic-device-pairing-status,
#other-device-pairing-status {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

/* frontend/styles/drafts.css */
.classic-recovery-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.classic-recovery-body article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.classic-recovery-body strong,
.classic-recovery-body p {
  overflow-wrap: anywhere;
}
.classic-recovery-body textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 110px;
  max-height: 240px;
  resize: vertical;
  margin: 10px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.classic-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.classic-recovery-actions button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
#classic-recovery-summary {
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

/* frontend/styles/shell.css */
[hidden] {
  display: none !important;
}
.material-symbols-rounded {
  font-size: 22px;
  line-height: 1;
  font-variation-settings:
    "FILL" 0,
    "wght" 430,
    "GRAD" 0,
    "opsz" 24;
}
.app {
  width: 100%;
  height: 100dvh;
  grid-template-rows: calc(var(--top) + var(--safe-top)) minmax(0, 1fr) calc(var(--nav) + var(--safe-bottom));
  grid-template-areas: "top" "main" "nav";
}
.topbar {
  grid-area: top;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.top-presence {
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  text-align: left;
  background: transparent;
}
.top-presence > span:last-child {
  min-width: 0;
  display: grid;
}
.top-presence strong,
.top-presence small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-presence strong {
  font-size: 16px;
  line-height: 20px;
}
.top-presence small {
  color: var(--muted);
  font-size: 12px;
  line-height: 17px;
}
.presence-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faint) 16%, transparent);
}
.presence-dot.online {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.presence-dot.partial {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent);
}
.presence-dot.offline {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.main {
  grid-area: main;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.page {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.page.active {
  display: flex;
}
.jump-latest {
  position: absolute;
  z-index: 14;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 650;
}
.jump-latest .material-symbols-rounded {
  color: var(--accent-text);
}
.welcome {
  display: flex;
  flex-direction: column;
}
.welcome .brand-mark {
  margin-bottom: 18px;
}
.welcome h1 {
  margin: 0;
  line-height: 1.18;
}
.welcome > p {
  color: var(--muted);
}
.welcome-grid small {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-bubble {
  position: relative;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.assistant-meta {
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.assistant-meta strong {
  font-size: 13px;
}
.assistant-meta small {
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
}
.brand-mark {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 13px #10a37f2e;
}
.brand-orb {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 4px 13px #10a37f2e;
}
.brand-mark .material-symbols-rounded,
.brand-orb .material-symbols-rounded {
  font-size: 17px;
  font-variation-settings:
    "FILL" 1,
    "wght" 500,
    "GRAD" 0,
    "opsz" 20;
}
.table-scroll {
  margin: .85em 0;
  border: 1px solid var(--line);
}
.code-block {
  margin: 12px 0;
  overflow: hidden;
}
.code-toolbar {
  height: 35px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px 0 11px;
  border-bottom: 1px solid #2e3033;
}
.code-toolbar > span {
  margin-right: auto;
  text-transform: uppercase;
}
.code-toolbar .material-symbols-rounded {
  font-size: 15px;
}
.code-block pre {
  margin: 0;
  padding: 13px;
  overflow: auto;
  background: #151719 !important;
  font-size: 12px;
  line-height: 1.55;
}
.code-block.code-collapsed pre {
  max-height: 82px;
  overflow: hidden;
}
.typing {
  display: flex;
  gap: 5px;
  padding: 8px 0;
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) {
  animation-delay: .16s;
}
.typing i:nth-child(3) {
  animation-delay: .32s;
}
.step-node {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  margin-left: -14px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--bg);
  font-size: 15px;
}
.status-completed > .step-node {
  color: var(--accent);
}
.status-failed > .step-node {
  color: var(--danger);
}
.status-incomplete > .step-node {
  color: var(--danger);
}
.status-running > .step-node {
  color: var(--accent);
}
.status-waiting > .step-node {
  color: var(--accent);
}
.step-content {
  min-width: 0;
}
.step-head {
  min-height: 20px;
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.step-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}
.step-head small {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 10px;
}
.step-subtitle {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thinking-line {
  display: flex;
  gap: 4px;
  padding: 5px 0 1px;
}
.thinking-line i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing 1.2s infinite ease-in-out;
}
.thinking-line i:nth-child(2) {
  animation-delay: .14s;
}
.thinking-line i:nth-child(3) {
  animation-delay: .28s;
}
.tool-detail-panel {
  margin: 5px 0 2px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.tool-detail-section + .tool-detail-section {
  border-top: 1px solid var(--line);
}
.tool-detail-section > strong {
  display: block;
  padding: 7px 9px 0;
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.tool-detail-section pre {
  max-height: 190px;
  margin: 0;
  padding: 7px 9px 9px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  line-height: 1.5;
}
.final-answer {
  color: var(--text);
}
.partial-answer {
  margin-top: 9px;
  padding: 9px 10px;
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0;
  background: var(--warn-soft);
}
.partial-answer > strong {
  display: block;
  margin-bottom: 3px;
  color: var(--warn);
  font-size: 11px;
}
.assistant-actions {
  display: flex;
  margin-top: 8px;
}
.status-running > .step-node {
  animation: process-spin 1.1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .status-running > .step-node {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .typing i {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-line i {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .status-pulse {
    animation: none;
  }
}
.run-status-strip {
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 2px 0 9px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.run-status-strip > .material-symbols-rounded {
  color: var(--accent);
  font-size: 19px;
  animation: process-spin 1.1s linear infinite;
}
.run-status-strip.approval-waiting > .material-symbols-rounded {
  color: var(--warn);
  animation: none;
}
.run-status-strip > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.run-status-strip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
}
.run-status-strip small {
  color: var(--muted);
  font-size: 10px;
}
.run-status-inline {
  min-height: 30px;
  align-items: center;
  gap: 7px;
  margin: 0 0 5px;
  color: var(--muted);
}
.run-status-inline > span:nth-child(2) {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.run-status-inline strong {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-status-inline small {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 10px;
}
.status-pulse {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  animation: status-pulse 1.25s ease-in-out infinite;
}
.run-status-inline.approval-waiting .status-pulse {
  background: var(--warn);
  animation: none;
}
.approval-card {
  display: grid;
  gap: 10px;
  margin: 8px 0 10px;
}
.approval-card-copy {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 8px;
}
.approval-card-copy > .material-symbols-rounded {
  color: var(--warn);
  font-size: 21px;
}
.approval-card-copy span:last-child {
  min-width: 0;
}
.approval-card-copy strong {
  display: inline-block;
  margin-right: 7px;
  font-size: 13px;
}
.approval-card-copy small {
  color: var(--muted);
  font-size: 10px;
}
.approval-card-copy p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.approval-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.approval-actions .reject {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
}
.steer-list {
  display: grid;
  gap: 5px;
  margin: 7px 0 10px;
}
.steer-list > div {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  gap: 6px;
  padding: 7px 9px;
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--accent-soft);
}
.steer-list .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 17px;
}
.steer-list span:last-child {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 6px;
}
.steer-list strong {
  font-size: 11px;
}
.steer-list small {
  color: var(--muted);
  font-size: 10px;
}
.steer-list p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.phase-narrative {
  min-width: 0;
}
.thinking-preview {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 9px;
  color: var(--muted);
  text-align: left;
  background: var(--surface);
}
.thinking-preview:disabled {
  opacity: 1;
  cursor: default;
}
.thinking-preview > .material-symbols-rounded:first-child {
  color: var(--accent-text);
  font-size: 18px;
}
.thinking-preview > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.thinking-preview strong,
.thinking-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thinking-preview strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.thinking-preview small {
  color: var(--faint);
  font-size: 10px;
}
.thinking-chevron {
  color: var(--faint);
  font-size: 17px;
}
.thought-detail {
  margin-top: 6px !important;
  padding: 8px 9px;
  border-left: 2px solid var(--line);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
}
.phase-tools {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}
.tool-receipt {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.tool-receipt-head {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  text-align: left;
  background: transparent;
}
.tool-receipt-head:disabled {
  opacity: 1;
  cursor: default;
}
.receipt-state {
  color: var(--accent-text);
  font-size: 17px;
}
.status-running .receipt-state {
  animation: process-spin 1.1s linear infinite;
}
.status-failed .receipt-state {
  color: var(--danger);
}
.receipt-copy {
  min-width: 0;
  display: grid;
}
.receipt-copy strong,
.receipt-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-copy strong {
  font-size: 12px;
  font-weight: 650;
}
.receipt-copy small {
  color: var(--muted);
  font-size: 10px;
}
.receipt-chevron {
  color: var(--faint);
  font-size: 17px;
}
.tool-receipt .tool-detail-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-float);
}
.run-summary {
  min-height: 58px;
  display: grid;
  gap: 2px;
  margin-bottom: 9px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.run-summary strong {
  font-size: 13px;
}
.run-summary small {
  color: var(--muted);
  font-size: 11px;
}
.task-card-top {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.task-state-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 17px;
}
.state-running .task-state-icon {
  animation: process-spin 1.1s linear infinite;
}
.task-title {
  min-width: 0;
  display: grid;
}
.task-title strong,
.task-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-title strong {
  font-size: 13px;
}
.task-title small {
  color: var(--muted);
  font-size: 10px;
}
.task-card-actions {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 36px;
  color: var(--faint);
  font-size: 10px;
}
.nav-health-dot {
  position: absolute;
  top: 8px;
  left: calc(50% + 9px);
  border: 2px solid var(--bg);
  background: var(--faint);
}
.nav-health-dot.online {
  background: var(--accent);
}
.nav-health-dot.partial {
  background: var(--warn);
}
.nav-health-dot.offline {
  background: var(--danger);
}
.drawer-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.drawer-footer strong {
  font-size: 13px;
}
.settings-section {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.app {
  position: relative;
  display: block;
  background: var(--bg);
}
.main {
  width: 100%;
  height: 100%;
}
.topbar {
  justify-content: space-between;
  z-index: 35;
}
.floating-menu {
  display: grid;
  place-items: center;
  padding: 0;
}
.floating-actions {
  display: grid;
}
.assistant-meta {
  display: none;
}
.final-answer {
  margin-top: 0;
}
.table-scroll {
  border-radius: 14px;
}
.run-status-inline {
  display: none;
}
.tool-receipt {
  border-radius: 12px;
}
.assistant-actions {
  gap: 2px;
}
.welcome {
  min-height: 100%;
  align-items: center;
  justify-content: center;
  padding: 16vh 8px 12vh;
  text-align: center;
}
.welcome .brand-orb {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  box-shadow: none;
}
.welcome h1 {
  font-size: 27px;
  font-weight: 620;
  letter-spacing: -.035em;
}
.welcome > p {
  max-width: 270px;
  margin: 9px auto 24px;
  font-size: 14px;
}
.welcome-grid {
  display: flex;
  max-width: 350px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.welcome-grid strong {
  font-size: 12px;
  font-weight: 560;
}
.active-task-strip {
  width: min(100%, 650px);
  min-height: 32px;
  margin: 0 auto 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.active-task-strip .task-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  animation: status-pulse 1.25s ease-in-out infinite;
}
.bottom-nav {
  display: none !important;
}
.content-page {
  padding-top: max(10px, var(--safe-top));
}
.subpage {
  padding-top: 0;
}
.drawer-footer {
  padding-top: 8px;
}
.drawer-status-icon {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.drawer-status-icon .presence-dot {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--surface);
  box-shadow: none;
}
@media (max-width: 430px) {
  .user-bubble {
    max-width: 84%;
  }
}
.attachment-chip {
  width: min(100%, 760px);
  margin: 0 auto 5px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px;
}
.content-page {
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.compact-page-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 1px 8px;
}
.compact-page-head > div {
  min-width: 0;
  flex: 1;
}
.compact-page-head > .head-actions {
  flex: 0 0 auto;
  display: flex;
}
.compact-page-head h1 {
  margin: 0;
  letter-spacing: -.03em;
}
.compact-page-head p {
  margin: 1px 0 0;
}
.fabric-summary {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.fabric-summary strong {
  font-size: 13px;
}
.fabric-summary small {
  color: var(--muted);
  font-size: 11px;
}
.fabric-summary.stale {
  color: var(--warn);
  background: var(--warn-soft);
}
.skeleton-line {
  width: 72px;
  height: 10px;
  border-radius: 8px;
  background: var(--surface-strong);
  animation: pulse 1.3s infinite;
}
.skeleton-line.wide {
  width: 150px;
}
.skeleton-stack {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--line);
}
.skeleton-stack i {
  display: block;
  height: 66px;
  background: var(--surface);
  animation: pulse 1.3s infinite;
}
.mini-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--danger);
}
.mini-dot.online {
  background: var(--accent);
}
.mini-dot.pending {
  background: var(--faint);
}
.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 6px;
}
.metric-strip > div {
  min-width: 0;
  padding: 0 5px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.metric-strip > div:last-child {
  border-right: 0;
}
.metric-strip strong,
.metric-strip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metric-strip strong {
  font-size: 13px;
}
.metric-strip small {
  color: var(--muted);
  font-size: 10px;
}
.control-tasks {
  margin-top: 15px;
}
.section-title {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.section-title.compact {
  min-height: 39px;
}
.section-title > div {
  min-width: 0;
}
.section-title h2 {
  display: inline;
  margin: 0;
  font-size: 16px;
}
.section-title span {
  margin-left: 7px;
  color: var(--muted);
  font-size: 11px;
}
.segmented {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar {
  display: none;
}
.compact-tabs {
  margin: 1px 0 7px;
}
.list-surface {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-float);
}
.list-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child {
  border-bottom: 0;
}
.list-row.clickable {
  cursor: pointer;
}
.row-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.row-icon .material-symbols-rounded {
  font-size: 19px;
}
.row-main {
  min-width: 0;
  display: grid;
}
.row-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.row-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}
.status-label {
  padding: 3px 7px;
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
  white-space: nowrap;
}
.status-label.online,
.status-label.active,
.status-label.running,
.status-label.succeeded {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.status-label.failed,
.status-label.lost {
  color: var(--danger);
  background: var(--danger-soft);
}
.row-actions {
  grid-column: 2 / -1;
  display: flex;
  gap: 5px;
}
.inline-state {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  font-size: 12px;
}
.apps-section {
  margin-bottom: 14px;
}
.edit-service {
  position: absolute;
  top: 1px;
  right: 0;
  width: 25px;
  height: 25px;
  display: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-float);
  opacity: .9;
}
.edit-service .material-symbols-rounded {
  font-size: 16px;
}
.settings-list {
  border-top: 1px solid var(--line);
}
.setting-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface);
}
.setting-icon .material-symbols-rounded {
  color: var(--muted);
  font-size: 20px;
}
.settings-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trailing {
  color: var(--faint);
  font-size: 18px;
}
.update-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 10px;
  border-radius: 11px;
  background: var(--accent-soft);
}
.update-panel > div {
  min-width: 0;
  flex: 1;
}
.update-panel strong {
  font-size: 13px;
}
.update-panel p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.bottom-nav {
  grid-area: nav;
}
.bottom-nav small {
  font-size: 11px;
}
.subpage {
  overflow: hidden;
}
.subpage-bar {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.subpage-bar > div {
  display: grid;
}
.subpage-bar strong {
  font-size: 15px;
}
.subpage-bar small {
  color: var(--muted);
  font-size: 11px;
}
.subpage-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 9px 12px 24px;
  scroll-padding-bottom: 24px;
}
.subpage-intro {
  display: grid;
  gap: 1px;
  margin: 0 1px 8px;
}
.subpage-intro strong {
  font-size: 12px;
}
.subpage-intro small {
  color: var(--muted);
  font-size: 10px;
}
.row-chevron {
  color: var(--faint);
  font-size: 18px;
}
.control-panel {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.command-presets {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.path-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
  margin-bottom: 9px;
}
.terminal-output {
  min-height: 200px;
  max-height: 58vh;
  margin: 0;
  padding: 11px;
  overflow: auto;
  border-radius: 10px;
  color: #d4d4d8;
  background: #101214;
  white-space: pre-wrap;
  font-size: 11px;
  line-height: 1.55;
}
.primary {
  min-height: 42px;
  padding: 0 13px;
  border-radius: 10px;
  font-weight: 650;
}
.primary {
  color: #fff;
  background: var(--accent);
}
.wide {
  width: 100%;
}
.danger {
  color: var(--danger) !important;
  background: var(--danger-soft) !important;
}
.spacer {
  flex: 1;
}
.drawer-scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
}
.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: max(12px, var(--safe-top)) 10px max(12px, var(--safe-bottom));
  transform: translate(-104%);
  transition: transform .2s ease;
}
.drawer.open {
  transform: translate(0);
}
.drawer-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding-left: 4px;
}
.drawer-head > div {
  flex: 1;
  display: grid;
}
.option-list {
  display: grid;
  gap: 4px;
}
.option-list strong {
  font-size: 13px;
}
.option-list small {
  color: var(--muted);
  font-size: 11px;
}
.search-box {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 11px;
  background: var(--surface);
}
.search-box .material-symbols-rounded {
  color: var(--muted);
  font-size: 20px;
}
.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}
.model-toolbar {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.model-toolbar > span {
  color: var(--muted);
  font-size: 11px;
}
.model-options {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.model-group {
  padding: 9px 0 3px;
}
.model-group-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
}
.model-group-head strong {
  font-size: 13px;
}
.model-group-head small {
  color: var(--muted);
  font-size: 10px;
}
.model-group-head .material-symbols-rounded {
  font-size: 17px;
}
.model-row {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 7px;
  padding: 5px 4px 5px 8px;
  border-radius: 9px;
  text-align: left;
  background: transparent;
}
.model-copy {
  min-width: 0;
  display: grid;
}
.model-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
}
.model-copy small {
  color: var(--muted);
  font-size: 10px;
}
.unlock {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--bg);
}
.unlock-card {
  width: min(100%, 390px);
  display: grid;
  gap: 12px;
}
.unlock-card .brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}
.unlock-card h1 {
  margin: 4px 0 -9px;
  font-size: 30px;
  letter-spacing: -.04em;
}
.unlock-card > p {
  margin: 0 0 10px;
  color: var(--muted);
}
.unlock-card form {
  display: grid;
  gap: 8px;
}
.unlock-card label {
  font-size: 12px;
  font-weight: 650;
}
.unlock-card input {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  background: var(--surface);
}
.unlock-card input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.web-gate-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  background:
    linear-gradient(
      145deg,
      var(--accent),
      color-mix(in srgb, var(--accent) 62%, #142d28));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 24%, transparent);
}
.web-gate-mark .material-symbols-rounded {
  font-size: 28px;
}
.unlock-error {
  min-height: 18px;
  margin: 0 !important;
  color: var(--danger) !important;
  font-size: 11px;
}
.error-text {
  min-height: 18px;
}
@media (min-width: 700px) {
  .content-page {
    width: min(100%, 760px);
    margin: 0 auto;
  }
}
@media (min-width: 700px) {
  .welcome-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 370px) {
  .topbar {
    grid-template-columns: 40px minmax(0, 1fr) 94px 40px;
    padding-inline: 4px;
  }
}
@media (max-width: 370px) {
  .metric-strip strong {
    font-size: 11px;
  }
}
.mode-context-chip {
  max-width: min(82vw, 330px);
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 auto 7px;
  backdrop-filter: blur(18px);
  font-weight: 650;
  box-shadow: 0 4px 14px #191e1c0d;
}
.mode-context-chip > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-context-chip .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 15px;
}
.mode-context-chip .material-symbols-rounded:last-child {
  font-size: 14px;
}
.local-picker-note {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 10px;
  font-weight: 650;
}
.local-picker-note .material-symbols-rounded {
  font-size: 15px;
}
.local-picker-row {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  background: transparent;
}
.local-picker-row > .material-symbols-rounded {
  color: var(--muted);
  font-size: 19px;
}
.local-picker-row.selected > .material-symbols-rounded {
  color: var(--accent-text);
}
.local-thinking {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}
.local-thinking i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  animation: local-pulse 1.1s ease-in-out infinite;
}
.local-thinking i:nth-child(2) {
  animation-delay: .15s;
}
.local-thinking i:nth-child(3) {
  margin-right: 3px;
  animation-delay: .3s;
}
.bottom-nav {
  padding-inline: max(20px, 12vw);
}
.all-clear {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--surface);
}
.alert-summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 12px;
}
.all-clear > .material-symbols-rounded {
  color: var(--accent-text);
}
.alert-summary {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
}
.all-clear > span:last-child {
  min-width: 0;
  display: grid;
}
.alert-summary > span:last-child {
  min-width: 0;
  display: grid;
}
.all-clear strong,
.alert-summary strong {
  color: var(--text);
  font-size: 13px;
}
.all-clear small,
.alert-summary small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.control-section {
  margin-bottom: 14px;
}
.agent-control-grid {
  display: grid;
  gap: 7px;
}
.agent-control-card {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
}
.agent-control-card:disabled {
  opacity: .58;
}
.agent-control-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.agent-control-card strong {
  font-size: 13px;
}
.agent-control-card small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.agent-icon {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.agent-icon i {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface-float);
  border-radius: 50%;
  background: var(--danger);
}
.agent-control-card.online .agent-icon i {
  background: var(--accent);
}
.agent-state {
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
}
.agent-control-card.offline .agent-state {
  color: var(--muted);
}
.manual-control-panel {
  display: grid;
  gap: 8px;
}
.manual-primary-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.manual-primary-actions .material-symbols-rounded {
  margin-bottom: 3px;
  color: var(--accent-text);
  font-size: 21px;
}
.manual-primary-actions strong {
  font-size: 12px;
}
.manual-primary-actions small {
  color: var(--muted);
  font-size: 9px;
}
.manual-presets {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.manual-presets .material-symbols-rounded {
  color: var(--accent-text);
  font-size: 16px;
}
.project-hero {
  min-height: 112px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-float);
}
.project-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.project-icon .material-symbols-rounded {
  font-size: 29px;
}
.project-hero > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.project-hero > span:nth-child(2) > small {
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .09em;
}
.project-hero strong {
  font-size: 16px;
}
.project-hero p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.project-actions {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.notification-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.agent-research-state {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-float);
}
.agent-research-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.agent-research-head > .material-symbols-rounded {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 23px;
}
.agent-research-head > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.agent-research-head strong {
  font-size: 13px;
}
.agent-research-head small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-research-state-label {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 8px;
  font-weight: 750;
}
.agent-research-state-label.running {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.agent-research-state-label.failed {
  color: var(--danger);
  background: var(--danger-soft);
}
.agent-research-latest {
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}
.agent-research-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pony-capability-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.pony-capability {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-float);
}
.pony-capability > .material-symbols-rounded {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 16px;
}
.pony-capability.online > .material-symbols-rounded {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.pony-capability.offline > .material-symbols-rounded {
  color: var(--danger);
  background: var(--danger-soft);
}
.pony-capability > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.pony-capability strong {
  font-size: 9px;
}
.pony-capability small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.secondary {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  font-weight: 650;
}
.info-surface {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
}
.info-surface strong {
  font-size: 13px;
}
.info-surface p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}
.pony-project-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pony-project-actions > .primary {
  grid-column: 1 / -1;
}
@media (max-width: 430px) {
  .agent-research-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 430px) {
  .pony-project-actions {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 430px) {
  .pony-capability-matrix {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 430px) {
  .pony-project-actions > .primary {
    grid-column: auto;
  }
}
@media (max-width: 430px) {
  .pony-capability small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}
.pony-project-recent {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}
.pony-recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 3px;
}
.pony-recent-head strong {
  font-size: 12px;
}
.pony-recent-head small {
  color: var(--faint);
  font-size: 9px;
}
.pony-recent-card {
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-float);
}
.pony-recent-card > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #397bb7;
  background: color-mix(in srgb, #397bb7 13%, var(--surface));
  font-size: 21px;
}
.pony-recent-card > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.pony-recent-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.pony-recent-card small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}
.notification-summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.notification-summary.state-attention {
  color: var(--warn);
  background: var(--warn-soft);
}
.notification-summary.state-error {
  background: var(--danger-soft);
}
.notification-summary > span:last-child {
  display: grid;
}
.notification-summary strong {
  color: var(--text);
  font-size: 14px;
}
.notification-summary small {
  color: var(--muted);
  font-size: 10px;
}
.notification-feed {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}
.notification-item {
  min-height: 66px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-float);
}
.notification-item > .material-symbols-rounded {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 18px;
}
.notification-item.error > .material-symbols-rounded {
  background: var(--danger-soft);
}
.notification-item.warning > .material-symbols-rounded {
  background: var(--warn-soft);
}
.notification-item > span:last-child {
  min-width: 0;
  display: grid;
}
.notification-item strong {
  font-size: 12px;
}
.notification-item p {
  margin: 2px 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.notification-item small {
  color: var(--faint);
  font-size: 9px;
}
.drawer-active-task {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 7px 9px;
  color: var(--accent-text);
  text-align: left;
}
.drawer-active-task[hidden] {
  display: none;
}
.top-presence {
  gap: 7px;
}
.drawer-footer {
  display: grid;
  gap: 2px;
}
@media (max-width: 360px) {
  .topbar {
    grid-template-columns: 42px minmax(0, 1fr) 86px 42px;
    padding-inline: 4px;
  }
}
.subpage {
  padding: 0;
}
.topbar {
  visibility: visible;
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;
}
.user-bubble {
  font-size: 15px;
  line-height: 1.46;
}
.assistant-actions {
  margin: 7px 0 0 -7px;
}
.assistant-actions .material-symbols-rounded {
  font-size: 19px;
}
.content-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 14px 24px;
}
.page.active {
  animation: page-enter .16s ease-out;
}
#page-workspace .apps-section {
  margin: 0;
}
.home-resource-modules {
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}
.home-gateway-node,
.home-ap-node {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface-float);
  box-shadow: 0 2px 8px #181c190a;
}
.home-gateway-node {
  width: min(100%, 310px);
  margin: 0 auto;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}
.home-gateway-node > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 21px;
}
.home-ap-node > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 21px;
}
.home-gateway-node > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.home-ap-node > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.home-gateway-node strong,
.home-ap-node strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.home-gateway-node small,
.home-ap-node small,
.home-ap-node em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.home-gateway-node > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.home-ap-node > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.home-gateway-node.online > i {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent);
}
.home-device-grid {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin-top: 7px;
}
.home-device-chip {
  position: relative;
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 6px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-float);
}
.home-device-chip > .material-symbols-rounded {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 16px;
}
.home-device-chip.online > .material-symbols-rounded {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.home-device-chip > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.home-device-chip strong {
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.home-device-chip small {
  color: var(--muted);
  font-size: 8px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.home-device-chip > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}
.home-device-chip.online > i {
  background: var(--success);
}
.home-device-chip.offline > i {
  background: var(--danger);
}
.home-device-chip.declared {
  border-style: dashed;
}
.home-device-chip.observed {
  border-color: color-mix(in srgb, var(--success) 32%, var(--line));
}
.home-device-chip.observed.stale {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
}
.home-device-chip.offline {
  opacity: .64;
}
.home-ap-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-float);
}
.home-ap-card.ready {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
.home-ap-card.warning {
  border-color: color-mix(in srgb, var(--warn) 36%, var(--line));
}
.home-ap-card > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.home-ap-card > header > .material-symbols-rounded {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 21px;
}
.home-ap-card.warning > header > .material-symbols-rounded {
  color: var(--warn);
  background: var(--warn-soft);
}
.home-ap-card > header > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.home-ap-card > header strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.home-ap-card > header small {
  color: var(--muted);
  font-size: 9px;
  overflow-wrap: anywhere;
}
.home-ap-card > header > i {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.home-ap-card.warning > header > i {
  color: var(--warn);
  background: var(--warn-soft);
}
.home-ap-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 8px;
}
.home-ap-facts span {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: 8px;
  font-weight: 650;
}
.home-ap-facts span.warning {
  color: var(--warn);
  background: var(--warn-soft);
}
.home-ap-error {
  margin: 0 0 8px;
  color: var(--warn);
  font-size: 9px;
}
.wifi-explainer {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-float);
  overflow: hidden;
}
.wifi-explainer > summary {
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}
.wifi-explainer > summary::-webkit-details-marker {
  display: none;
}
.wifi-explainer > summary > .material-symbols-rounded:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 19px;
}
.wifi-explainer > summary > span:nth-child(2) {
  min-width: 0;
  display: grid;
}
.wifi-explainer > summary strong {
  font-size: 12px;
}
.wifi-explainer > summary small {
  color: var(--muted);
  font-size: 9px;
}
.wifi-explainer > summary > .material-symbols-rounded:last-child {
  color: var(--muted);
  font-size: 19px;
  transition: transform .18s ease;
}
.wifi-explainer[open] > summary > .material-symbols-rounded:last-child {
  transform: rotate(180deg);
}
.wifi-explainer-body {
  padding: 0 13px 13px;
  border-top: 1px solid var(--line);
}
.wifi-explainer-body p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
}
.wifi-explainer-body strong {
  color: var(--text);
}
.channel-lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 11px;
}
.channel-lanes > span {
  min-height: 46px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface);
  font-size: 13px;
  font-weight: 800;
}
.channel-lanes > span.used {
  color: var(--accent-text);
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: var(--accent-soft);
}
.channel-lanes > span.used.alt {
  color: #8a5a0a;
  border-color: color-mix(in srgb, #d69a2d 36%, var(--line));
  background: color-mix(in srgb, #f7d99c 36%, var(--surface-float));
}
.channel-lanes small {
  color: inherit;
  font-size: 7px;
  font-weight: 650;
}
@media (max-width: 600px) {
  .home-gateway-node {
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  .home-device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 370px) {
  .home-device-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wifi-explainer > summary > .material-symbols-rounded:last-child {
    transition: none;
  }
}
.subpage-bar {
  min-height: calc(56px + var(--safe-top));
  padding: var(--safe-top) 8px 0;
  background: var(--bg);
}
.drawer {
  width: min(88vw, 350px);
  box-shadow: 14px 0 38px #14181529;
}
.topbar {
  border: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none !important;
  transform: none;
  pointer-events: none;
}
.floating-menu,
.floating-actions {
  margin: 0;
  pointer-events: auto;
}
.floating-actions {
  grid-template-columns: 40px 40px;
}
.floating-actions .material-symbols-rounded,
.floating-menu .material-symbols-rounded {
  font-variation-settings:
    "FILL" 0,
    "wght" 430,
    "GRAD" 0,
    "opsz" 22;
}
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
}
.jump-latest {
  right: 14px;
  bottom: calc(72px + var(--safe-bottom));
  width: 40px;
  height: 40px;
  justify-content: center;
  padding: 0;
}
.jump-latest > span:not(.material-symbols-rounded) {
  display: none;
}
.jump-latest .material-symbols-rounded {
  font-size: 19px;
}
.runtime-choice {
  display: grid;
  gap: 8px;
}
.runtime-choice label {
  cursor: pointer;
}
.runtime-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.runtime-choice span {
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-float);
}
.runtime-choice input:checked + span {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: var(--accent-soft);
}
.runtime-choice strong {
  font-size: 13px;
}
.runtime-choice small {
  color: var(--muted);
  font-size: 10px;
}
.local-runtime-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.local-runtime-strip::-webkit-scrollbar {
  display: none;
}
.local-runtime-strip span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-float);
  font-size: 10px;
  font-weight: 650;
}
.local-runtime-strip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.local-runtime-strip .unavailable {
  opacity: .48;
}
.local-runtime-strip .unavailable i {
  background: var(--muted);
}
.local-library-search {
  margin: 2px 0 12px;
}
.runtime-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.runtime-select-row > span {
  color: var(--muted);
  font-size: 10px;
}
.runtime-select-row > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.runtime-choice {
  grid-template-columns: repeat(3, 1fr);
}
.runtime-choice span {
  min-height: 70px;
  padding: 8px;
  text-align: center;
}
.model-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.model-search-results {
  min-height: 180px;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
}
.public-model-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.public-model-row strong,
.public-model-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-model-row strong {
  font-size: 12px;
}
.public-model-row small {
  color: var(--muted);
  font-size: 10px;
}
.public-model-row em {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 650;
}
@media (max-width: 380px) {
  .runtime-choice {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .runtime-choice span {
    min-height: 54px;
    text-align: left;
  }
}
.switch-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--surface);
}
.switch-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.switch-row span {
  display: grid;
  gap: 1px;
}
.switch-row strong {
  font-size: 12px;
}
.switch-row small {
  color: var(--muted);
  font-size: 10px;
}
.contacts-page,
.personal-page {
  position: relative;
  min-height: 0;
  flex-direction: column;
  background: var(--bg);
}
.contacts-scroll {
  width: min(100%, 720px);
  height: 100%;
  margin: 0 auto;
  padding: calc(12px + var(--safe-top)) 16px calc(26px + var(--safe-bottom));
  overflow-y: auto;
  scrollbar-width: none;
}
.contacts-scroll::-webkit-scrollbar {
  display: none;
}
.contacts-head {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px 12px;
}
.contacts-head > div {
  min-width: 0;
}
.contacts-head small {
  display: block;
  margin-bottom: 1px;
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}
.contacts-head h1 {
  margin: 0;
  letter-spacing: -.035em;
}
.contacts-head p {
  margin: 3px 0 0;
}
.contacts-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.contact-settings {
  flex: 0 0 auto;
  box-shadow: var(--shadow-soft);
}
.contact-health-compact {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.contact-health-compact i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.contact-health-compact.online i {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent);
}
.contact-health-compact.warning {
  color: var(--warn);
  background: var(--warn-soft);
}
.contact-health-compact.warning i {
  background: var(--warn);
}
.contact-health {
  min-height: 58px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.contact-health[hidden] {
  display: none;
}
.contact-health-dot {
  background: var(--muted);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--muted) 13%, transparent);
}
.contact-health-dot.online {
  background: var(--success);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 14%, transparent);
}
.contact-health-dot.warning {
  background: var(--warn);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 14%, transparent);
}
.contact-health > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.contact-health small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface-float);
  box-shadow: 0 5px 22px #181c190b;
}
.home-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 7px 3px 8px;
}
.home-section-heading > span {
  color: var(--accent-text);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}
.home-section-heading > strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 550;
}
.spaces-heading {
  margin-top: 17px;
}
.space-list {
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-float);
  box-shadow: 0 5px 22px #181c190b;
}
.space-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.space-row:last-child {
  border-bottom: 0;
}
.space-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.space-row strong {
  font-size: 13px;
}
.space-row small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.space-row > .material-symbols-rounded:last-child {
  color: var(--faint);
  font-size: 18px;
}
.space-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.space-project .space-icon {
  color: #2563a6;
  background: color-mix(in srgb, #5a9ce1 15%, var(--surface));
}
.space-system .space-icon {
  color: #9a641d;
  background: color-mix(in srgb, #d59b46 16%, var(--surface));
}
.contact-row {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 15px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.contact-row:last-child {
  border-bottom: 0;
}
.contact-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #318b72;
}
.contact-avatar .material-symbols-rounded {
  font-size: 23px;
  font-variation-settings:
    "FILL" 0,
    "wght" 480,
    "GRAD" 0,
    "opsz" 28;
}
.contact-avatar:after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface-float);
  border-radius: 50%;
  background: var(--muted);
}
.contact-row.runtime-ready .contact-avatar:after {
  background: var(--success);
}
.contact-row.runtime-warning .contact-avatar:after {
  background: var(--warn);
}
.contact-row.runtime-offline .contact-avatar:after {
  background: var(--warn);
}
.contact-row.runtime-attention .contact-avatar:after {
  background: #d78024;
}
.accent-emerald .contact-avatar {
  background: #176b55;
}
.accent-violet .contact-avatar {
  background: #7665ad;
}
.accent-amber .contact-avatar {
  background: #b77624;
}
.accent-blue .contact-avatar {
  background: #397bb7;
}
.contact-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.contact-copy > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-copy time {
  margin-left: auto;
  font-weight: 500;
}
.contact-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-runtime {
  max-width: 104px;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-runtime.ready {
  display: none;
}
.contact-runtime.warning {
  color: var(--warn);
  background: var(--warn-soft);
}
.contact-chevron {
  color: var(--faint);
  font-size: 17px;
}
.personal-floating-head > span {
  border-color: color-mix(in srgb, #7665ad 28%, var(--line));
}
.personal-feed {
  min-height: 100%;
  margin: 0 auto;
  padding: calc(84px + var(--safe-top)) 16px 34px;
}
.personal-welcome {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 3px;
}
.personal-welcome > .material-symbols-rounded {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 14%, var(--surface));
  font-size: 26px;
}
.personal-welcome h1 {
  margin: 16px 0 6px;
  font-size: 28px;
  letter-spacing: -.04em;
}
.personal-welcome p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.personal-event {
  margin: 0 0 24px;
}
.personal-event.owner {
  justify-items: end;
  gap: 5px;
}
.personal-event.owner .personal-bubble {
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.personal-event.owner > small {
  padding: 0 4px;
  color: var(--faint);
  font-size: 9px;
}
.personal-event.system > small {
  padding: 0 4px;
}
.personal-event.assistant {
  display: grid;
  gap: 8px;
}
.personal-event.assistant > header {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.personal-event.assistant > header > .material-symbols-rounded {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #665394;
  background: color-mix(in srgb, #7665ad 14%, var(--surface));
  font-size: 17px;
}
.personal-event.assistant > header strong {
  color: var(--text);
}
.typing-dots.inline {
  display: inline-flex;
  padding: 5px 2px;
  vertical-align: middle;
}
.personal-actions {
  display: flex;
  gap: 5px;
}
.personal-actions .material-symbols-rounded {
  font-size: 19px;
}
.personal-event.system {
  display: grid;
  justify-items: start;
  gap: 5px;
}
.personal-system {
  max-width: 94%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line));
  border-radius: 14px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 11px;
  line-height: 1.5;
}
.personal-system .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 18px;
}
.personal-event.image-result {
  display: grid;
  gap: 9px;
}
.personal-event.image-result img {
  width: 100%;
  max-height: 620px;
  display: block;
  object-fit: contain;
  background: var(--surface);
}
.personal-event.image-result .personal-image-prompt {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
@media (max-width: 520px) {
  .contact-runtime {
    max-width: 78px;
  }
}
.typing-dots {
  display: flex;
  gap: 5px;
  padding: 8px 4px;
}
.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: personalTyping 1.1s infinite ease-in-out;
}
.typing-dots i:nth-child(2) {
  animation-delay: .14s;
}
.typing-dots i:nth-child(3) {
  animation-delay: .28s;
}
.project-space-heading {
  margin-top: 4px;
}
.project-space-heading:not(:first-child) {
  margin-top: 18px;
}
.long-project-card {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
  background: var(--surface-float);
}
.long-project-card:active {
  background: var(--surface);
}
.long-project-card > .material-symbols-rounded:first-child {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.long-project-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.long-project-card strong {
  font-size: 12px;
}
.long-project-card small {
  color: var(--muted);
  font-size: 9px;
}
.long-project-card > .material-symbols-rounded:last-child {
  color: var(--faint);
  font-size: 18px;
}
@media (max-width: 430px) {
  .contacts-scroll {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (max-width: 430px) {
  .contact-row {
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    min-height: 76px;
    padding: 11px;
  }
}
@media (max-width: 430px) {
  .contact-runtime {
    display: none;
  }
}
@media (max-width: 430px) {
  .contact-section-title small {
    display: none;
  }
}
.personal-page,
.personal-feed {
  min-width: 0;
  max-width: 100%;
}
.personal-feed {
  width: min(100%, 720px);
  overflow-x: clip;
}
@media (max-width: 430px) {
  .personal-feed {
    padding: calc(78px + var(--safe-top)) 13px 28px;
  }
}
.final-answer,
.personal-answer {
  font-size: var(--font-chat);
  line-height: 1.6;
}
.assistant-meta,
.contact-copy small {
  font-size: var(--font-meta);
  line-height: 1.45;
}
.contact-copy time {
  font-size: var(--font-meta);
  line-height: 1.45;
}
.space-row small,
.space-link small {
  font-size: var(--font-meta);
  line-height: 1.45;
}
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-12);
}
@media (hover: hover) {
  .contact-row:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .space-row:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .space-link:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .long-project-card:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .model-row:hover {
    background: var(--surface-strong);
  }
}
.today-deep-card {
  width: 100%;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.today-signal-list {
  display: grid;
  min-width: 0;
}
.today-deep-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 2px 0;
}
.today-deep-card > .material-symbols-rounded {
  flex: 0 0 auto;
  padding: 7px;
  border-radius: 10px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.today-deep-card > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.today-deep-card strong {
  color: var(--accent-text);
  font-size: 11px;
}
.today-deep-card p {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}
.today-deep-card small {
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.4;
}
.today-task-list {
  display: grid;
  gap: 6px;
}
.today-task-list strong {
  font-size: 13px;
  line-height: 1.35;
}
.today-task-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
[aria-busy=true] {
  opacity: .7;
}
.contacts-head h1,
.compact-page-head h1,
.space-head h1 {
  font-size: 22px;
  line-height: 1.25;
}
.contacts-head p,
.compact-page-head p,
.space-head p {
  color: var(--muted);
  font-size: 13px;
}
.contact-health {
  border-radius: var(--radius-20);
  border: 1px solid var(--line);
  background: var(--surface-float);
  box-shadow: var(--shadow-soft);
  padding: 14px 16px;
}
.contact-health strong {
  font-size: 15px;
}
.contact-health small {
  color: var(--muted);
  font-size: var(--font-meta);
}
.contact-list {
  gap: 10px;
}
.contact-row,
.agent-control-card {
  min-height: 64px;
  border-radius: var(--radius-20);
  border: 1px solid var(--line);
  background: var(--surface-float);
  box-shadow: var(--shadow-soft);
}
.contact-row:active,
.agent-control-card:active {
  background: var(--surface-strong);
}
.contact-avatar {
  border-radius: var(--radius-16);
}
.contact-copy strong {
  font-size: 15px;
}
.contact-copy small {
  color: var(--muted);
}
.contact-copy time {
  color: var(--muted);
}
.contact-runtime {
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 9px;
}
.contact-runtime.ready {
  color: var(--accent-text);
  background: var(--accent-soft);
}
.contact-runtime.offline {
  color: var(--danger);
  background: var(--danger-soft);
}
.contact-runtime.planned {
  color: var(--codex-accent-text);
  background: var(--codex-accent-soft);
}
.contact-health-dot,
.nav-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.space-list,
.space-row,
.space-link {
  border-radius: var(--radius-20);
}
.space-row,
.space-link {
  min-height: 56px;
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.space-row:active,
.space-link:active {
  background: var(--surface-strong);
}
.space-icon {
  border-radius: var(--radius-12);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.space-heading,
.home-section-heading,
.contact-section-title {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.personal-feed {
  background: var(--bg);
}
.personal-welcome {
  color: var(--muted);
}
.welcome-grid > * {
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
  background: var(--surface-float);
}
.brand-orb {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: 50%;
}
.approval-actions .allow {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-12);
  min-height: 44px;
}
.approval-actions .reject {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-12);
  min-height: 44px;
}
.error-text {
  border-radius: var(--radius-16);
}
.error-text {
  color: var(--danger);
}
.mode-context-chip {
  color: var(--muted);
  font-size: 12px;
}
.mode-context-chip.local {
  color: var(--codex-accent-text);
  border-color: color-mix(in srgb, var(--codex-accent) 40%, var(--line));
  background: var(--codex-accent-soft);
}
.active-task-strip .task-dot {
  background: var(--accent);
}
.jump-latest {
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-float);
  box-shadow: var(--shadow-soft);
  color: var(--muted);
}
.jump-latest.has-update {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
}
.floating-menu {
  color: var(--muted);
}
.floating-menu:active {
  background: var(--surface-strong);
}
.attachment-chip {
  border-radius: var(--radius-12);
  border: 1px solid var(--line);
  background: var(--surface);
}
.personal-event.assistant > header strong {
  font-size: 13px;
}
.personal-event.assistant > header small {
  color: var(--muted);
  font-size: 11px;
}
.personal-event.system > small {
  color: var(--faint);
  font-size: 11px;
}
.personal-event.image-result img {
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
}
.personal-image-prompt {
  color: var(--muted);
  font-size: 12px;
}
.code-block pre {
  overflow-x: auto;
  max-width: 100%;
}
.code-block {
  border-radius: var(--radius-12);
  background: var(--surface);
  border: 1px solid var(--line);
}
.code-toolbar {
  color: var(--muted);
  font-size: 11px;
}
.drawer {
  background: var(--surface-float);
  border-right: 1px solid var(--line);
}
.drawer-head strong {
  font-size: 16px;
}
.drawer-head small,
.drawer-footer small {
  color: var(--muted);
  font-size: 12px;
}
.drawer-active-task {
  border-radius: var(--radius-16);
  border: 1px solid var(--line);
  background: var(--surface);
}
.drawer-scrim {
  background: #1c181266;
}
.settings-section {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.settings-list strong {
  font-size: 14px;
}
.settings-list small {
  color: var(--muted);
  font-size: 12px;
}
.model-row.selected,
.local-picker-row.selected {
  background: var(--accent-soft);
  border-radius: var(--radius-16);
}
.danger {
  color: var(--danger);
}
.inline-state,
.all-clear {
  color: var(--muted);
}
.notification-item.error > .material-symbols-rounded {
  color: var(--danger);
}
.notification-item.warning > .material-symbols-rounded {
  color: var(--warn);
}
.notification-summary.state-error {
  color: var(--danger);
}
.typing-dots i,
.local-thinking i {
  background: var(--muted);
}
@media (max-width: 430px) {
  .personal-floating-head > span {
    background: var(--surface-float);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (max-width: 430px) {
  .contacts-head h1 {
    font-size: 20px;
  }
}
@media (max-width: 430px) {
  .compact-page-head h1 {
    font-size: 20px;
  }
}
@media (max-width: 430px) {
  .space-head h1 {
    font-size: 20px;
  }
}
@media (min-width: 800px) {
  .contacts-scroll {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .personal-feed {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .content-page {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .settings-list {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 800px) {
  .drawer {
    border-radius: 0 var(--radius-24) var(--radius-24) 0;
  }
}
@media (min-width: 1000px) {
  .contacts-scroll {
    width: min(calc(100% - 64px), 980px);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    column-gap: 28px;
  }
}
@media (min-width: 1000px) {
  .contacts-head {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1000px) {
  #contact-health {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1000px) {
  .contacts-scroll > .home-section-heading:not(.spaces-heading) {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (min-width: 1000px) {
  .contacts-scroll > #contact-list {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }
}
@media (min-width: 1000px) {
  .contacts-scroll > .spaces-heading {
    grid-column: 2;
    grid-row: 2;
    margin-top: 7px;
  }
}
@media (min-width: 1000px) {
  .contacts-scroll > .space-list {
    grid-column: 2;
    grid-row: 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .jump-latest {
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-row {
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .space-row {
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition: none;
    animation: none;
  }
}
.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  min-height: 60px;
  padding: 4px max(10px, var(--safe-left)) calc(4px + var(--safe-bottom)) max(10px, var(--safe-right));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.today-page {
  position: relative;
  min-height: 0;
  flex-direction: column;
  background: var(--bg);
}
.today-scroll {
  padding-bottom: calc(118px + var(--safe-bottom));
}
.today-head h1 {
  letter-spacing: -.02em;
}
.contact-settings {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--surface-float);
}
.contact-settings:active {
  background: var(--surface-strong);
}
.today-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.today-quick {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.today-quick-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.today-quick-copy {
  min-width: 0;
  display: grid;
}
.today-quick-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-quick-copy small {
  overflow: hidden;
  color: var(--muted);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-section {
  min-width: 0;
  margin-bottom: 12px;
  overflow: hidden;
}
.today-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.today-section-head h2 {
  min-width: 0;
  margin: 0;
}
.today-section-head small {
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-section-body {
  min-width: 0;
  font-size: 14px;
}
.today-placeholder {
  margin: 0;
  color: var(--faint);
  font-size: var(--font-meta);
}
#today-target-chip {
  flex: 0 1 auto;
  min-height: 44px;
  align-items: center;
  gap: 3px;
}
#today-target-chip #today-target-label {
  overflow: hidden;
  max-width: 5.5em;
  text-overflow: ellipsis;
}
#today-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 2px;
  border: 0;
  background: transparent;
  resize: none;
}
.model-deploy-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
  counter-reset: deploy-step;
}
.model-deploy-flow li {
  min-width: 0;
  display: grid;
  align-content: center;
  min-height: 48px;
  padding: 5px;
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  counter-increment: deploy-step;
}
.model-deploy-flow li:before {
  content: counter(deploy-step);
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
  border-radius: 50%;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 8px;
  font-weight: 800;
}
@media (max-height: 480px) and (orientation: landscape) {
  .bottom-nav {
    min-height: 48px;
    padding-top: 2px;
  }
}
@media (max-height: 480px) and (orientation: landscape) {
  .today-scroll {
    padding-bottom: calc(104px + var(--safe-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .today-quick {
    animation: none;
  }
}
.main,
.page,
.page * {
  min-width: 0;
}
.today-section-body,
.personal-event,
.active-task-strip {
  overflow-wrap: anywhere;
  word-break: normal;
}
.today-scroll {
  padding-right: 16px;
  padding-left: 16px;
}
.today-quick-grid {
  gap: 4px;
  margin: 4px -3px 18px;
}
.today-quick {
  min-height: 68px;
  align-items: center;
  gap: 5px;
  padding: 7px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.today-quick:active {
  background: var(--surface-strong);
}
.today-quick-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 18px;
}
.today-quick-copy {
  width: 100%;
  justify-items: center;
  gap: 0;
}
.today-quick-copy strong {
  max-width: 100%;
  font-size: 12px;
}
.today-quick-copy small {
  max-width: 100%;
  font-size: 9px;
}
.today-section {
  margin: 0;
  padding: 15px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.today-section-head {
  margin-bottom: 9px;
}
.today-section-head h2 {
  font-size: 16px;
  letter-spacing: -.015em;
}
.topbar {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: calc(66px + var(--safe-top));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 88px;
  align-items: start;
  gap: 8px;
  padding: calc(9px + var(--safe-top)) 12px 0;
  background: linear-gradient(var(--bg) 78%, transparent);
  overflow: visible;
}
.floating-menu,
.floating-actions {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.floating-menu {
  width: 44px;
  height: 44px;
}
.floating-actions {
  min-width: 88px;
  width: 88px;
  height: 44px;
  border-radius: 11px;
  overflow: visible;
}
.floating-menu {
  border-radius: 11px;
}
.floating-actions .material-symbols-rounded,
.floating-menu .material-symbols-rounded {
  font-size: 23px;
}
.agent-top-context {
  height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-content: center;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  color: var(--text);
  background: transparent;
  line-height: 1.25;
  pointer-events: auto;
}
.agent-top-context > span:first-child {
  min-width: 0;
  display: grid;
  justify-items: center;
}
.agent-top-context strong {
  font-size: 14px;
  font-weight: 720;
}
.agent-top-context small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-top-context > .material-symbols-rounded {
  color: var(--muted);
  font-size: 17px;
}
.agent-top-context:active {
  border-radius: 11px;
  background: var(--surface-strong);
}
.user-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border: 0;
  border-radius: 16px 16px 4px;
  color: var(--text);
  background: var(--surface-strong);
  box-shadow: none;
}
.final-answer {
  padding: 0;
}
.mode-context-chip {
  min-height: 26px;
  margin-bottom: 2px;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.active-task-strip {
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}
.personal-floating-head > span {
  border: 0;
  border-radius: 11px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.personal-feed {
  padding-right: 16px;
  padding-left: 16px;
}
.personal-event {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.personal-event.owner {
  display: flex;
  justify-content: flex-end;
}
.personal-event.owner .personal-bubble {
  max-width: 86%;
  border-radius: 16px 16px 4px;
  background: var(--surface-strong);
  color: var(--text);
  box-shadow: none;
}
.final-answer {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.approval-card {
  padding: 10px 0 4px 12px;
  border: 0;
  border-left: 2px solid var(--codex-accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 400px) {
  .today-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 400px) {
  .today-quick-copy strong {
    font-size: 11px;
  }
}
@media (max-width: 400px) {
  .today-quick-copy small {
    font-size: 8px;
  }
}
@media (max-width: 400px) {
  .agent-top-context small {
    max-width: 18em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .today-quick {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-menu {
    transition: none;
  }
}
.hub-page {
  background: var(--bg);
}
.contacts-scroll.hub-scroll {
  width: min(100%, 560px);
  max-width: 560px;
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  padding-top: calc(18px + var(--safe-top));
  padding-bottom: calc(28px + var(--safe-bottom));
}
.hub-hero {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  padding: 4px 2px 0;
  text-align: left;
}
.hub-ring {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 34%, transparent));
}
.hub-brand-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.hub-hero h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.hub-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.hub-attachment-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -2px 3px 9px;
  color: var(--accent-text);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.hub-attachment-chip[hidden] {
  display: none;
}
.hub-attachment-chip .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 17px;
}
#today-target-chip {
  min-width: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  white-space: normal;
}
#today-target-chip:active {
  background: var(--surface-strong);
}
#today-target-chip .material-symbols-rounded {
  font-size: 21px;
}
.hub-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 9px;
}
.hub-section-head h2 {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}
.hub-all-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin: -10px -4px -10px 0;
  padding: 0 4px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}
.hub-all-link .material-symbols-rounded {
  font-size: 17px;
}
.hub-resource-list {
  display: grid;
  gap: 10px;
}
.hub-row {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
  background: var(--surface-float);
}
.hub-row:active {
  background: var(--surface-strong);
}
.hub-row-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.hub-row-icon .material-symbols-rounded {
  font-size: 22px;
}
.hub-row-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.hub-row-state {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.hub-row-state > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-row-state i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--faint);
}
.hub-row-state[data-tone=ok] {
  color: var(--accent-text);
}
.hub-row-state[data-tone=ok] i {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 14%, transparent);
}
.hub-row-state[data-tone=warn] {
  color: var(--warn);
}
.hub-row-state[data-tone=warn] i {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 14%, transparent);
}
.hub-row-state[data-tone=error] {
  color: var(--danger);
}
.hub-row-state[data-tone=error] i {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}
.hub-row-chevron {
  color: var(--faint);
  font-size: 20px;
}
.hub-task-row {
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  margin-top: 14px;
}
.hub-row-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hub-row-copy strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-row-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .hub-row:hover {
    background: var(--surface-strong);
  }
}
@media (hover: hover) {
  .hub-all-link:hover {
    background: var(--surface-strong);
  }
}
@media (max-width: 360px) {
  .hub-ring {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}
@media (max-width: 360px) {
  .hub-hero h1 {
    font-size: 21px;
  }
}
@media (max-width: 360px) {
  .hub-row {
    gap: 10px;
    padding: 10px 12px;
  }
}
@media (max-width: 360px) {
  .hub-row-name {
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  .hub-row-state {
    font-size: 11px;
  }
}
.resources-page,
.me-page {
  position: relative;
  min-height: 0;
  flex-direction: column;
  background: var(--bg);
  padding-top: max(10px, var(--safe-top));
}
.resources-head,
.me-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px 13px;
}
.resources-head > div {
  min-width: 0;
}
.me-head > div {
  min-width: 0;
}
.resources-head small,
.me-head small {
  display: block;
  margin-bottom: 1px;
  color: var(--accent-text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}
.resources-head h1,
.me-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}
.resources-head p,
.me-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.resources-scroll,
.me-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 2px 16px calc(26px + var(--safe-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.resources-scroll::-webkit-scrollbar {
  display: none;
}
.me-scroll::-webkit-scrollbar {
  display: none;
}
.resources-grid {
  display: grid;
  min-width: 0;
}
.resource-card {
  width: 100%;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  text-align: left;
  background: var(--surface-float);
}
.resource-card:active {
  background: var(--surface-strong);
}
.resource-card-icon {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.resource-card-icon .material-symbols-rounded {
  font-size: 23px;
}
.resource-card-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.resource-card-copy strong,
.resource-card-copy small {
  overflow-wrap: anywhere;
}
.resource-card-copy strong {
  font-size: 15px;
  line-height: 1.35;
}
.resource-card-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.resource-card .hub-row-state {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}
.resource-card-chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--faint);
  font-size: 20px;
}
.resources-note,
.me-note {
  max-width: 760px;
  margin: 15px auto 0;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.me-profile {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 14px 3px 18px;
}
.me-profile img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 28%, transparent));
}
.me-profile > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.me-profile strong {
  font-size: 18px;
}
.me-profile small {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.me-list {
  width: 100%;
}
.me-list .update-panel {
  margin-top: 10px;
}
@media (max-width: 360px) {
  .resources-head {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (max-width: 360px) {
  .me-head {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (max-width: 360px) {
  .resources-scroll {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (max-width: 360px) {
  .me-scroll {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (max-width: 360px) {
  .resource-card {
    gap: 4px 9px;
    padding-right: 10px;
    padding-left: 10px;
  }
}
@media (max-width: 360px) {
  .resource-card-copy strong {
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  .resource-card-copy small {
    font-size: 10px;
  }
}
@media (min-width: 800px) {
  .resources-head {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 800px) {
  .me-head {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 800px) {
  .resources-scroll {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 800px) {
  .me-scroll {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 800px) {
  .resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .contacts-scroll.hub-scroll {
    width: min(calc(100% - 64px), 1080px);
    max-width: 1080px;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-content: start;
    column-gap: 34px;
  }
}
@media (min-width: 1000px) {
  .hub-hero {
    grid-column: 1;
    grid-row: 1;
  }
}
@media (min-width: 1000px) {
  .hub-resources {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    padding-top: 48px;
  }
}
@media (min-width: 1000px) {
  .hub-task-row {
    grid-column: 2;
    grid-row: 4;
  }
}
@media (min-width: 1000px) {
  .me-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 0;
  }
}
@media (min-width: 1000px) {
  .me-list .update-panel {
    grid-column: 1 / -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page.active {
    transition: none;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .resource-card {
    transition: none;
    animation: none;
  }
}
.hub-focus {
  margin-top: 4px;
}
.hub-focus .hub-task-row {
  margin-top: 0;
}
.resources-grid {
  grid-template-columns: 1fr !important;
  gap: 20px;
}
.resource-group {
  min-width: 0;
}
.resource-group > header {
  min-height: 36px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 8px;
}
.resource-group > header > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.resource-group > header strong {
  font-size: 14px;
}
.resource-group > header small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.resource-group > header em {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--accent-text);
  background: var(--accent-soft);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
}
.resource-group > div {
  display: grid;
  gap: 9px;
}
.live-stage-flow {
  min-width: 0;
  margin: 2px 0 12px;
  padding: 4px 0 2px;
}
.live-stage-flow .thinking-preview {
  min-height: 42px;
  padding: 3px 5px;
  background: transparent;
}
.live-stage-flow .thinking-preview strong {
  font-size: 13px;
}
.live-stage-flow .thinking-preview small {
  font-size: 10px;
}
.live-stage-wait {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
}
.live-stage-wait > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.live-stage-wait strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 620;
}
.live-stage-wait small {
  color: var(--faint);
  font-size: 10px;
}
.live-stage-timing {
  display: block;
  margin: 3px 0 0 32px;
  color: var(--faint);
  font-size: 10px;
}
.turn-performance {
  width: fit-content;
  margin-top: 7px;
  color: var(--faint);
  font-size: 10px;
}
@media (min-width: 800px) {
  .resource-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .contacts-scroll.hub-scroll {
    grid-template-rows: auto auto auto;
  }
}
@media (min-width: 1000px) {
  .hub-focus {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }
}
.model-panel-intro {
  display: grid;
  gap: 4px;
  margin: 0 2px 12px;
}
.model-panel-intro strong {
  font-size: 14px;
}
.model-panel-intro small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.model-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  margin-bottom: 11px;
}
.model-library-toolbar .search-box {
  margin: 0;
}
.local-runtime-strip {
  margin: 0 0 10px;
}
.local-runtime-strip span {
  min-height: 28px;
  padding: 0 9px;
}
.runtime-select-row {
  grid-column: 1 / -1;
}
.model-search-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 10px 0 7px;
}
.model-search-inline .search-box {
  margin: 0;
}
.model-search-results {
  max-height: none;
  overflow: visible;
}
.model-search-source-note {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 13px;
  color: var(--accent-text);
  background: var(--accent-soft);
}
.model-search-source-note > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.model-search-source-note > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.model-search-source-note strong {
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.model-search-source-note small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.public-model-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-float);
}
.public-model-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.public-model-copy strong {
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.public-model-copy small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.public-model-copy em {
  color: var(--accent-text);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}
.public-model-copy em.warning {
  color: var(--warning, #b47a20);
}
.public-model-file {
  min-width: 0;
  display: grid;
  gap: 4px;
  margin-top: 5px;
}
.public-model-file > span {
  color: var(--muted);
  font-size: 9px;
}
.public-model-file select {
  min-width: 0;
  width: 100%;
  height: 38px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  font-size: 9px;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .public-model-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }
}
@media (max-width: 360px) {
  .model-search-inline {
    grid-template-columns: 1fr;
  }
}
.hub-briefing {
  margin: -8px 0 22px;
}
.hub-briefing .today-section-head {
  align-items: center;
}
.hub-briefing .hub-all-link {
  margin: -8px -4px -8px 0;
}
@media (min-width: 1000px) {
  .hub-briefing {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 48px;
  }
}
.update-panel {
  flex-wrap: wrap;
}
#update-progress {
  width: 100%;
}
#update-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}
#update-downloads a {
  overflow-wrap: anywhere;
}

/* frontend/features/workflows/workflow.css */
.workflow-history {
  min-width: 0;
  padding: 16px;
  color: var(--text);
}
.workflow-history *,
.workflow-history *:before,
.workflow-history *:after {
  box-sizing: border-box;
}
.workflow-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.workflow-header h2 {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}
.workflow-detail-view .workflow-header {
  flex-direction: column;
  align-items: flex-start;
}
.workflow-detail-view .workflow-header h2 {
  flex: none;
  width: 100%;
}
.workflow-history h3 {
  margin: 20px 0 10px;
  font-size: 1rem;
}
.workflow-muted,
.workflow-history small {
  color: var(--muted);
  line-height: 1.6;
}
.workflow-history p,
.workflow-history strong,
.workflow-history span,
.workflow-history small {
  overflow-wrap: anywhere;
  white-space: normal;
}
.workflow-items {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.workflow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.workflow-button {
  min-height: 44px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  overflow-wrap: anywhere;
  white-space: normal;
}
.workflow-button:disabled {
  opacity: .55;
  cursor: default;
}
.workflow-button[aria-pressed=true] {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent);
}
.workflow-button:focus-visible,
.workflow-history input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.workflow-card {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 14px;
}
.workflow-card strong {
  font-weight: 600;
}
.workflow-state {
  color: var(--accent-text);
  line-height: 1.6;
}
.workflow-notice {
  background: var(--surface);
  color: var(--muted);
  border-left: 3px solid var(--warn);
  border-radius: 5px;
  padding: 10px 12px;
  line-height: 1.65;
}
.workflow-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.workflow-search input {
  flex: 1 1 180px;
  min-width: 0;
}
.workflow-history input:not([type=checkbox]) {
  max-width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 10px;
  font: inherit;
}
.workflow-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  line-height: 1.6;
}
.workflow-field input[type=text] {
  flex: 1 1 100%;
  order: 2;
  width: 100%;
}
.workflow-field input[type=checkbox] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}
.workflow-field span {
  flex: 1;
  min-width: 0;
}
.workflow-composer .workflow-field {
  display: grid;
}
.workflow-composer textarea,
.workflow-composer select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 10px;
  font: inherit;
  line-height: 1.65;
}
.workflow-composer textarea {
  resize: vertical;
  overflow-wrap: anywhere;
}
.workflow-composer input[type=file] {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 4px 0;
  font-size: .85em;
}
.workflow-composer :is(textarea, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.workflow-source-row {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.workflow-source-row span {
  flex: 1 1 160px;
  min-width: 0;
}
.workflow-reference {
  display: block;
  width: 100%;
  text-align: left;
  margin: 8px 0;
}
.workflow-result-text {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  line-height: 1.75;
  max-height: 34rem;
  overflow-y: auto;
}
.workflow-facts {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 14px;
}
.workflow-facts summary {
  min-height: 44px;
  cursor: pointer;
  line-height: 1.6;
}
.workflow-facts p {
  color: var(--muted);
  line-height: 1.7;
}
@media (min-width: 720px) {
  .workflow-history {
    width: min(100%, 840px);
    margin-inline: auto;
    padding: 24px;
  }
}

/* frontend/features/home/workbench.css */
.workbench {
  width: min(100%, 780px);
  height: 100%;
  margin-inline: auto;
  padding: calc(22px + var(--safe-top)) 24px calc(34px + var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.workbench > * {
  flex-shrink: 0;
  min-width: 0;
}
.workbench-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.workbench-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -1.5px;
  font-weight: 750;
}
.workbench-brand span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.workbench-search {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 2px 0 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.workbench-search .material-symbols-rounded {
  font-size: 21px;
}
.workbench-welcome {
  margin: 40px 0 25px;
}
.workbench-eyebrow {
  color: var(--accent-text);
  font-size: 11px;
  letter-spacing: .08em;
}
.workbench-welcome h1 {
  margin: 10px 0;
  font-size: clamp(25px, 3.1vw, 34px);
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -.04em;
}
.workbench-welcome p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}
.workbench-composer {
  padding: 15px 16px 11px;
  background: var(--surface-float);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 6px 24px #17201c06;
  transition: border-color .18s, box-shadow .18s;
}
.workbench-composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.workbench-composer textarea {
  display: block;
  width: 100%;
  min-height: 88px;
  max-height: 160px;
  padding: 5px 3px 14px;
  resize: none;
  border: 0;
  outline: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  font-size: 16px;
  line-height: 1.65;
}
.workbench-composer textarea:focus-visible {
  outline: 0;
}
.workbench-composer textarea::placeholder {
  color: var(--faint);
}
.workbench .hub-composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.workbench .hub-composer-action {
  min-height: 40px;
  min-width: 40px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 10px;
}
.workbench #today-target-chip {
  width: auto;
  height: auto;
  border: 0;
  padding: 8px;
  font-size: 12px;
  display: inline-flex;
  gap: 6px;
}
.workbench #today-target-chip .material-symbols-rounded {
  font-size: 17px;
}
.workbench .hub-composer-spacer {
  flex: 1;
}
.workbench .hub-send {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #fff;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.workbench-intents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.workbench-intents button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 12px;
  background: transparent;
  color: var(--muted);
}
.workbench-intents .material-symbols-rounded {
  font-size: 17px;
}
.workbench-intents button[aria-pressed=true] {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.workbench-hint {
  margin: 10px 2px 32px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.workbench-recent {
  margin-bottom: 25px;
}
.workbench .hub-section-head {
  min-height: 32px;
  margin: 0 0 9px;
}
.workbench .hub-section-head h2,
.workbench .today-section-head h2 {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}
.workbench .hub-section-head > span {
  color: var(--muted);
  font-size: 10px;
}
.workbench-conversations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.workbench-conversations .contact-row {
  width: 100%;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.workbench-conversations .contact-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--text);
  display: grid;
  place-items: center;
}
.workbench-conversations .contact-avatar .material-symbols-rounded {
  font-size: 20px;
}
.workbench-conversations .contact-copy {
  min-width: 0;
  flex: 1;
}
.workbench-conversations .contact-copy > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.workbench-conversations .contact-copy strong {
  font-size: 13px;
}
.workbench-conversations .contact-copy time {
  display: none;
}
.workbench-conversations .contact-copy small {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}
.workbench-conversations .contact-runtime,
.workbench-conversations .contact-chevron {
  display: none;
}
.workbench-conversations .runtime-warning,
.workbench-conversations .runtime-offline {
  border-color: var(--warn);
}
.workbench .hub-focus {
  order: 1;
  margin: 0 0 18px;
  width: 100%;
  align-self: stretch;
}
.workbench .hub-task-row {
  width: 100%;
  margin: 0;
  min-height: 64px;
  border: 0;
  border-radius: 13px;
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.workbench .hub-row-icon {
  color: var(--muted);
  background: transparent;
}
.workbench .hub-row-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.workbench .hub-row-copy strong {
  font-size: 13px;
}
.workbench .hub-row-copy small {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.workbench .hub-row-chevron {
  color: var(--muted);
  font-size: 18px;
}
.workbench .hub-briefing {
  order: 2;
  width: 100%;
  max-width: none;
  align-self: stretch;
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.workbench .hub-all-link {
  color: var(--muted);
  font-size: 11px;
}
.workbench .today-placeholder {
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.workbench-shortcuts {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 12px;
}
.workbench-shortcuts button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.workbench-shortcuts .material-symbols-rounded {
  font-size: 18px;
}
.personal-apps {
  margin-bottom: 26px;
}
.personal-apps > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.personal-apps h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}
.personal-apps > header > span {
  color: var(--muted);
  font-size: 11px;
}
.personal-apps > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.personal-apps > div > button {
  min-width: 0;
  padding: 14px 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-float);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.personal-apps > div .material-symbols-rounded {
  font-size: 25px;
  color: var(--accent-text);
  margin-bottom: 7px;
}
.personal-apps strong {
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.personal-apps small {
  color: var(--muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.personal-api-link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 12px 0 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 12px;
}
.personal-api-link .material-symbols-rounded {
  font-size: 17px;
}
.personal-api-link .material-symbols-rounded:last-child {
  margin-left: auto;
}
@media (max-width: 560px) {
  .workbench-conversations {
    grid-template-columns: minmax(0, 1fr);
  }
  .workbench-conversations .contact-row {
    min-height: 68px;
  }
  .workbench-conversations .contact-chevron {
    display: block;
    color: var(--muted);
    font-size: 20px;
  }
}
@media (max-width: 420px) {
  .workbench {
    padding-inline: 20px;
  }
  .workbench-welcome {
    margin-top: 27px;
    margin-bottom: 21px;
  }
  .workbench-intents {
    gap: 6px;
  }
  .workbench-intents button {
    padding: 8px 10px;
    font-size: 11px;
  }
  .workbench-conversations {
    gap: 8px;
  }
  .workbench-conversations .contact-row {
    padding: 12px 10px;
    gap: 8px;
  }
  .personal-apps > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .workbench {
    padding-top: 32px;
  }
  .workbench-welcome {
    margin-top: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workbench-composer {
    transition: none;
  }
}

/* frontend/features/resources/domains.css */
.domain-center {
  margin: 0 0 28px;
  min-width: 0;
}
.domain-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px;
  border-radius: 22px;
  background: var(--accent-soft);
  margin-bottom: 16px;
}
.domain-eyebrow {
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--accent-text);
  font-weight: 700;
}
.domain-heading h2 {
  font-size: 1.5rem;
  letter-spacing: -.03em;
  margin: 8px 0 5px;
}
.domain-heading p {
  font-size: .85rem;
  color: var(--muted);
  margin: 0;
}
.domain-mark {
  font-size: 3.2rem;
  color: var(--accent-text);
  opacity: .65;
}
.domain-search {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 12px;
  border-radius: 13px;
  color: var(--muted);
}
.domain-search input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 0;
  background: transparent;
  font-size: .9rem;
}
.domain-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.domain-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 13px;
}
.domain-filters button {
  min-height: 40px;
  border-radius: 99px;
  padding: 8px 13px;
  font-size: .78rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
}
.domain-filters button[hidden] {
  display: none;
}
.domain-filters button[aria-pressed=true] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}
.domain-status {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.6;
  margin: 15px 2px 11px;
}
.domain-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.domain-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  transition: border-color .15s;
}
.domain-card:hover {
  border-color: var(--accent);
}
.domain-main {
  display: flex;
  text-align: left;
  align-items: flex-start;
  width: 100%;
  gap: 11px;
  padding: 17px 15px 12px;
  background: transparent;
}
.domain-icon {
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 22px;
}
.domain-card[data-category="AI 与开发"] .domain-icon {
  color: var(--codex-accent-text);
  background: var(--codex-accent-soft);
}
.domain-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
.domain-copy strong {
  font-size: .97rem;
  font-weight: 650;
  line-height: 1.4;
}
.domain-copy > span {
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.6;
}
.domain-copy small {
  color: var(--muted);
  font-size: .73rem;
  letter-spacing: .01em;
}
.domain-arrow {
  color: var(--muted);
  font-size: 18px;
  padding-top: 2px;
}
.domain-card footer {
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding: 1px 8px 1px 15px;
}
.domain-card footer > span {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: .7rem;
  overflow-wrap: anywhere;
}
.domain-card footer button {
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  font-size: .75rem;
}
.domain-card footer button[aria-pressed=true] {
  color: var(--accent-text);
}
.domain-card footer .material-symbols-rounded {
  font-size: 19px;
}
.domain-center button:focus-visible,
.domain-dialog button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.domain-empty {
  grid-column: 1 / -1;
  padding: 22px 8px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.7;
}
.domain-dialog {
  background: var(--surface);
  padding: 22px;
  overflow-y: auto;
}
.domain-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.domain-dialog h2 {
  font-size: 1.25rem;
  margin: 0;
  overflow-wrap: anywhere;
}
.domain-dialog header button {
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
}
.domain-dialog p {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.7;
}
.domain-dialog dl {
  display: grid;
  gap: 6px;
  margin: 20px 0;
}
.domain-dialog dt {
  color: var(--muted);
  font-size: .72rem;
  margin-top: 8px;
}
.domain-dialog dd {
  margin: 0;
  font-size: .88rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.domain-dialog .domain-detail-note {
  font-size: .75rem;
}
.domain-launch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
}
@media (max-width: 559px) {
  .domain-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .domain-heading {
    padding: 18px;
  }
}
.domain-copy small {
  display: flex;
  align-items: center;
  gap: 5px;
}
.domain-copy small .material-symbols-rounded {
  font-size: 14px;
  flex-shrink: 0;
}
.internal-resource-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 0 16px;
  border-top: 1px solid var(--line);
}
.internal-resource-heading > span {
  padding: 11px;
  border-radius: 12px;
  color: var(--muted);
  background: var(--surface);
}
.internal-resource-heading h2 {
  font-size: 1.1rem;
  margin: 0 0 5px;
}
.internal-resource-heading p {
  font-size: .77rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* frontend/styles/index.css */