:root {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--ui-text, #e8e8e5);
  background: var(--ui-canvas, #101212);
  color-scheme: var(--ui-scheme, dark);
  font-size: 15px;
}
* {
  box-sizing: border-box;
}
html,
body,
#root {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  min-height: 42px;
  border: 1px solid var(--ui-border, #343938);
  border-radius: 9px;
  background: var(--ui-raised, #222827);
  color: var(--ui-text, #e9edeb);
  padding: 8px 12px;
}
button:hover {
  background: var(--ui-raised, #2d3633);
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ui-secondary, #a5c6b3);
  outline-offset: 2px;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  min-width: 0;
  background: var(--ui-inset, #171c1a);
  color: var(--ui-text, #e9edeb);
  border: 1px solid var(--ui-border, #353c38);
  border-radius: 9px;
  padding: 11px 12px;
  font-size: 16px;
}
textarea {
  resize: none;
  line-height: 1.5;
}
label {
  display: grid;
  gap: 8px;
}
p {
  line-height: 1.5;
}
small,
.muted {
  color: var(--ui-secondary, #a0aaa5);
  font-size: 12px;
}
h1 {
  font-size: 25px;
  font-weight: 600;
  margin: 6px 0 12px;
}
h2 {
  font-size: 21px;
  margin: 0;
}
a {
  color: var(--ui-soft-text, #b8d9c4);
}
.primary {
  background: var(--ui-accent, #bfd8c8);
  color: var(--ui-on-accent, #17291f);
  border-color: var(--ui-accent, #bfd8c8);
  font-weight: 600;
}
.primary:hover {
  background: var(--ui-accent-hover, #d1e6d8);
}
.row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.row input {
  flex: 1;
  min-width: 120px;
}
.app-shell {
  position: relative;
  height: 100dvh;
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: var(--ui-page, #141817);
  overflow: hidden;
  border-inline: 1px solid var(--ui-raised, #232a27);
}
.app-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: calc(9px + env(safe-area-inset-top)) 14px 9px;
  border-bottom: 1px solid var(--ui-raised, #2a312d);
}
.app-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.app-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}
.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  color: var(--ui-secondary);
  flex-shrink: 0;
}
.language-picker select {
  font: inherit;
  font-size: 12px;
  color: var(--ui-text);
  background: var(--ui-page);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 5px 3px;
  max-width: 110px;
}
.app-header-main > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memory-badge {
  flex-shrink: 0;
  color: var(--ui-secondary, #9eafa4);
  font-size: 10px;
  white-space: nowrap;
  cursor: help;
}
.app-header button {
  font-size: 12px;
  background: transparent;
  border: 0;
  padding: 6px;
  min-height: 36px;
}
.app-header .brand,
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 4px;
}
.brand img {
  filter: brightness(0) invert(1);
  display: block;
  width: 32px;
  height: 32px;
}
.network-test {
  position: relative;
  flex-shrink: 0;
}
.app-header .network-test-trigger {
  color: var(--ui-soft-text, #c5dacf);
}
.network-test-menu {
  position: fixed;
  z-index: 80;
  top: calc(env(safe-area-inset-top) + 58px);
  right: 12px;
  width: 236px;
  padding: 10px;
  border: 1px solid var(--ui-border, #35423b);
  border-radius: 11px;
  background: var(--ui-surface, #1c2521);
  box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
}
.network-test-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 3px 8px;
}
.network-test-head strong {
  font-size: 12px;
}
.network-test-head small,
.network-test-results small {
  color: var(--ui-secondary, #9eaea5);
}
.network-test-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 9px;
}
.network-test-results span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border-radius: 8px;
  background: var(--ui-inset, #17201c);
}
.network-test-results strong {
  font-size: 12px;
  white-space: nowrap;
}
.network-test-error {
  margin: 0 0 8px;
  color: var(--ui-danger, #efb09d);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.network-test-run {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--ui-border, #3d5046);
  border-radius: 8px;
  background: var(--ui-raised, #26342d);
}
.network-test-run:disabled {
  opacity: 0.65;
}
.codex-control {
  position: relative;
  flex-shrink: 0;
}
.app-header .codex-control-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ui-soft-text, #c5dacf);
  border: 1px solid var(--ui-border, #34443b);
  border-radius: 999px;
  padding: 6px 9px;
  min-height: 32px;
  background: var(--ui-surface, #1b2420);
}
.app-header .codex-control-trigger:hover {
  background: var(--ui-raised, #26342d);
}
.codex-chevron {
  color: var(--ui-secondary, #95aa9c);
  font-size: 14px;
  line-height: 1;
  transform: translateY(-1px);
}
.codex-menu-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: calc(env(safe-area-inset-top) + 96px) 12px 12px;
  background: rgb(0 0 0 / 18%);
}
.codex-menu {
  width: min(340px, calc(100vw - 24px));
  max-height: min(620px, calc(100dvh - env(safe-area-inset-top) - 118px));
  overflow: auto;
  padding: 7px;
  border: 1px solid var(--ui-border, #35423b);
  border-radius: 11px;
  background: var(--ui-surface, #1c2521);
  box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
}
.codex-menu small {
  display: block;
  padding: 4px 8px 7px;
  color: var(--ui-secondary, #9eaea5);
}
.codex-menu button {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  text-align: left;
  background: transparent;
  color: var(--ui-text, #e6ece8);
}
.codex-menu button:hover {
  background: var(--ui-raised, #2b3932);
}
.codex-menu button.danger {
  color: var(--ui-danger, #efb09d);
}
.codex-usage-panel {
  display: grid;
  gap: 8px;
  padding: 4px 5px 9px;
  border-bottom: 1px solid var(--ui-raised, #303b35);
}
.codex-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.codex-usage-head > strong {
  font-size: 13px;
}
.codex-menu .codex-usage-head > button {
  width: auto;
  min-height: 28px;
  padding: 4px 7px;
  color: var(--ui-secondary, #a9bdb2);
}
.codex-usage-error,
.codex-usage-blocked {
  margin: 0;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 11px;
}
.codex-usage-error {
  color: var(--ui-danger, #efb09d);
  background: var(--ui-danger-bg, #2b201c);
  overflow-wrap: anywhere;
}
.codex-usage-blocked {
  color: var(--ui-danger, #efc49d);
  background: var(--ui-warning-bg, #2b261c);
}
.codex-usage-limits {
  display: grid;
  gap: 8px;
}
.codex-usage-limit {
  display: grid;
  gap: 6px;
}
.codex-usage-limit-name {
  color: var(--ui-soft-text, #b7c9bf);
}
.codex-usage-window {
  display: grid;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--ui-inset, #17201c);
}
.codex-usage-window-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.codex-usage-window-head > span {
  color: var(--ui-soft-text, #c7d8ce);
  font-variant-numeric: tabular-nums;
}
.codex-usage-track {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ui-raised, #303d36);
}
.codex-usage-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-accent, #9bc2aa);
}
.codex-reset-summary {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}
.codex-reset-summary > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ui-secondary, #aebdb5);
  font-size: 11px;
}
.codex-reset-summary > span strong {
  color: var(--ui-text, #dce7e1);
  font-size: 12px;
}
.codex-menu .codex-reset-summary > button {
  display: grid;
  gap: 2px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid var(--ui-border, #405248);
  background: var(--ui-raised, #233029);
}
.codex-reset-summary button > span {
  font-size: 12px;
  font-weight: 600;
}
.codex-reset-summary button > small {
  padding: 0;
  font-size: 10px;
  line-height: 1.35;
}
.page {
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.home-page {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.home-controls {
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
  padding-bottom: 12px;
}
.home-controls h1 {
  margin: 0;
}
.home-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.agent-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 5px 0 8px;
  background: var(--ui-canvas, #101212);
  border-bottom: 1px solid var(--ui-raised, #2c332f);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
}
.agent-tabs::-webkit-scrollbar { display: none; }
.agent-tabs button {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 39px;
  padding: 7px 9px;
  border-color: transparent;
  background: transparent;
  color: var(--ui-secondary, #a7b4aa);
  font-weight: 600;
  white-space: nowrap;
  scroll-snap-align: center;
  touch-action: pan-x;
}
.agent-tabs button.is-active {
  background: var(--ui-selected, #294336);
  border-color: var(--ui-selected-border, #537a63);
  color: var(--ui-selected-text, #eaf7ed);
}
.agent-tabs button.is-pinned:not(.is-active) {
  border-color: var(--ui-border, #3d5848);
}
.agent-tab-icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  overflow: hidden;
  color: var(--ui-soft-text, #c8d9cf);
  line-height: 1;
}
.agent-tab-icon.is-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.agent-tab-icon.is-image.is-invert img { filter: invert(1); }
.agent-tab-icon.is-fallback {
  border: 1px solid var(--ui-border, #46594d);
  background: var(--ui-raised, #28372f);
  font-size: 8px;
  font-weight: 700;
}
.agent-tab-text {
  display: block;
  min-width: 0;
  padding: 10px 4px;
  margin: -10px -4px;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}
.agent-tab-pin {
  position: absolute;
  top: 3px;
  right: 3px;
  color: var(--ui-soft-text, #c7e4d1);
  font-size: 6px;
  line-height: 1;
}
.home-scroll > .codex-catalog { margin-top: 8px; }
.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  min-width: 0;
}
.section-title > span,
.section-title > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.section-title button {
  flex-shrink: 0;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.7px;
  color: var(--ui-secondary, #96ac9e);
}
.project-list {
  margin-top: 20px;
}
.codex-catalog {
  margin-top: 24px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--ui-raised, #2c332f);
}
.codex-catalog .section-title {
  margin-bottom: 4px;
}
.codex-catalog .section-title > div {
  min-width: 0;
  flex: 1;
}
.codex-catalog .section-title h2 {
  font-size: clamp(18px, 5vw, 22px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.codex-catalog .section-title > .muted {
  flex: 0 0 auto;
  white-space: nowrap;
}
.catalog-more {
  width: 100%;
  margin-top: 12px;
  min-height: 36px;
  color: var(--ui-soft-text, #afcfbc);
  background: transparent;
  border-color: var(--ui-border, #3a4b3f);
}
.codex-card {
  margin-top: 8px;
  border-bottom-color: var(--ui-border, #35453a);
}
.project-card {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 14px;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--ui-raised, #2c332f);
  border-radius: 0;
  background: transparent;
}
.project-card > span:nth-child(2) {
  display: grid;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.project-card strong {
  font-size: 17px;
  font-weight: 550;
}
.project-card small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  background: var(--ui-raised, #2b3930);
  color: var(--ui-soft-text, #bdd4c6);
  border: 1px solid var(--ui-border, #405045);
  border-radius: 12px;
  font-size: 18px;
}
.project-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ui-raised, #2a312d);
  flex-shrink: 0;
}
.project-tabs button {
  flex: 1;
  background: transparent;
  border-color: transparent;
  min-height: 38px;
  color: var(--ui-secondary, #a8b1ac);
}
.project-tabs button[aria-current] {
  background: var(--ui-raised, #2a3930);
  border-color: var(--ui-border, #425448);
  color: var(--ui-text, #daeadf);
}
.empty {
  text-align: center;
  color: var(--ui-secondary, #a2afa7);
  padding: 60px 15px;
}
.empty strong {
  display: block;
  color: var(--ui-soft-text, #d6ded9);
  font-size: 17px;
  font-weight: 500;
}
.new-session {
  padding: 10px 16px 18px;
  background: var(--ui-surface, #1c2420);
  border: 1px solid var(--ui-border, #354139);
  border-radius: 12px;
  margin: 12px 0 22px;
}
.task-card {
  display: grid;
  width: 100%;
  gap: 7px;
  text-align: left;
  margin: 8px 0;
  padding: 16px;
  background: var(--ui-surface, #1a211d);
}
.task-card span {
  font-size: 13px;
  color: var(--ui-secondary, #a7b5ac);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.directory-group {
  margin: 15px 0 20px;
}
.directory-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 0 4px 5px;
}
.directory-heading strong {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ui-soft-text, #d6ded9);
}
.directory-heading small {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-muted, #89978f);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.directory-count {
  flex: 0 0 auto;
  color: var(--ui-muted, #76877c);
  font-size: 11px;
}
.directory-more {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 3px 8px;
  color: var(--ui-soft-text, #afcfbc);
  background: transparent;
  border-color: var(--ui-border, #3a4b3f);
  font-size: 11px;
}
.directory-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 28px;
  padding: 3px 8px;
  color: var(--ui-soft-text, #afcfbc);
  background: transparent;
  border-color: var(--ui-border, #3a4b3f);
  font-size: 11px;
}
.directory-sessions {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px solid var(--ui-border, #354239);
}
.directory-session {
  margin: 8px 0;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.directory-session strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-layout {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.task-layout > .section-title {
  padding: 5px 10px;
  min-height: 44px;
  border-bottom: 1px solid var(--ui-raised, #29312c);
  flex-shrink: 0;
}
.task-toolbar {
  gap: 6px;
}
.task-toolbar .task-home {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 3px;
  border: 0;
  background: transparent;
  color: var(--ui-soft-text, #c5dacf);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.task-toolbar .task-back {
  flex: 0 0 auto;
  width: 32px;
  min-height: 34px;
  padding: 0;
  font-size: 23px;
  line-height: 1;
  background: transparent;
  border-color: transparent;
}
.task-toolbar > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.task-toolbar > span small {
  flex: 0 0 auto;
}
.model-picker {
  flex: 0 1 122px;
  width: 122px;
  min-height: 32px;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 11px;
  background: var(--ui-surface, #1b2420);
}
.history {
  flex: 1;
  min-height: 70px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px 14px;
}
.history-shell {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}
/* flow-root keeps the first and last message margins inside the wrapper so the
   height observed by useHistoryStickToBottom matches the scroll extent. */
.history-body {
  display: flow-root;
}
.history-jumps {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  pointer-events: none;
}
.history-jumps button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--ui-border, #52675a);
  border-radius: 999px;
  color: var(--ui-text, #d4e6da);
  background: rgba(25, 35, 29, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}
.history-jumps button.is-hidden {
  visibility: hidden;
  pointer-events: none;
}
.message {
  margin: 12px 0;
  overflow-wrap: anywhere;
}
.message > div {
  white-space: pre-wrap;
  line-height: 1.55;
  font-weight: 400;
  margin-top: 5px;
}
.message.user {
  margin-left: 12%;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--ui-raised, #2a3630);
}
.message.assistant {
  padding: 10px 2px;
}
.message.thinking,
.message.tool,
.message.operations {
  font:
    12px/1.5 ui-monospace,
    monospace;
  padding: 12px;
  border: 1px solid var(--ui-raised, #343a35);
  border-radius: 8px;
  color: var(--ui-secondary, #b1b9b4);
}
.message.thinking > div,
.message.tool > div,
.message.operations > div {
  max-height: 88px;
  overflow: hidden;
}
.text-button {
  background: transparent;
  border: 0;
  color: var(--ui-soft-text, #afcfbc);
  padding: 4px 0;
  font-size: 12px;
  min-height: 32px;
}
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding: 10px 0;
  flex-shrink: 0;
}
.pager button {
  font-size: 12px;
}
.live-area {
  flex-shrink: 0;
  border-top: 1px solid var(--ui-raised, #2b352e);
  padding: 3px 10px 4px;
  max-height: 20dvh;
  overflow: auto;
}
.live-area.live-collapsed {
  max-height: 34px;
  padding-block: 2px;
}
.live-area.live-collapsed .connection {
  display: none;
}
.connection {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ui-secondary, #a8b6ae);
  min-height: 22px;
}
.connection > span:last-child {
  margin-left: auto;
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-warning, #b9a16c);
}
.dot.online {
  background: var(--ui-soft-text, #b0d9be);
}
.progress-block {
  height: 64px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 4px 8px;
  overflow: hidden;
}
.progress-block.is-collapsed {
  height: 28px;
  padding-block: 0;
}
.progress-block.is-expanded {
  height: 64px;
  background: var(--ui-surface, #1b251f);
}
.progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 32px;
}
.progress-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.progress-heading strong {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thinking-tail {
  font-size: 12px;
  line-height: 18px;
  white-space: pre-wrap;
  color: var(--ui-secondary, #a5b7aa);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-answer {
  white-space: pre-wrap;
  line-height: 1.5;
  max-height: 80px;
  overflow: auto;
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
}
.composer {
  position: relative;
  padding: 5px 10px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-raised, #303c33);
  flex-shrink: 0;
  background: var(--ui-inset, #181f1b);
}
.composer-card {
  padding: 7px 9px 5px;
  border: 1px solid var(--ui-border, #35443a);
  border-radius: 16px;
  background: var(--ui-surface, #202a23);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.composer-settings {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 0 0 3px;
  overflow: hidden;
}
.composer-settings label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-secondary, #9eafa4);
  font-size: 11px;
  white-space: nowrap;
}
.composer-settings select {
  min-width: 0;
  max-width: 164px;
  height: 27px;
  padding: 2px 22px 2px 7px;
  border-radius: 7px;
  border: 1px solid var(--ui-border, #35443a);
  background: var(--ui-surface, #202a23);
  color: var(--ui-soft-text, #d2e1d6);
  font-size: 11px;
}
.settings-hint {
  color: var(--ui-secondary, #9eafa4);
  font-size: 11px;
}
.composer-input-row {
  position: relative;
}
.composer-input-row textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  padding-right: 52px;
  border: 0;
  background: transparent;
}
.composer-toggle {
  position: absolute;
  top: 4px;
  right: 3px;
  min-height: 28px;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(53, 68, 58, 0.72);
}
.composer.is-collapsed .composer-actions > small {
  display: none;
}
.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 36px;
  padding-top: 4px;
  flex-wrap: wrap;
}
.composer-actions .composer-settings {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.composer-actions > small {
  flex: 1;
  font-size: 11px;
}
.error {
  color: var(--ui-danger, #efb0a1);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  margin: 8px 0;
}
.global-error {
  padding: 5px 14px;
  max-height: 110px;
  overflow: auto;
}
.notice {
  position: absolute;
  z-index: 15;
  top: calc(env(safe-area-inset-top) + 50px);
  left: 10px;
  right: 10px;
  padding: 8px 12px;
  color: var(--ui-soft-text, #c8dfd0);
  background: var(--ui-raised, #29382e);
  border: 1px solid var(--ui-border, #405844);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 24%);
  font-size: 12px;
  cursor: pointer;
}
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--ui-inset, #161d18);
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top)) 16px
    calc(12px + env(safe-area-inset-bottom));
  overflow: auto;
}
.overlay > .section-title {
  margin-bottom: 16px;
}
.project-form {
  display: grid;
  gap: 20px;
}
.checkbox {
  display: flex;
  align-items: center;
}
.checkbox input {
  width: auto;
}
.directory-picker {
  max-height: 35dvh;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--ui-border, #38483c);
  border-radius: 10px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: auto;
  padding: 10px 0;
  white-space: nowrap;
}
.breadcrumb button {
  font-size: 12px;
  min-height: 36px;
  padding: 4px 7px;
  background: transparent;
  border: 0;
}
.file-list {
  margin-top: 12px;
}
.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 3px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--ui-raised, #2c3730);
  border-radius: 0;
  background: transparent;
  min-width: 0;
}
.file-row > span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-symbol {
  color: var(--ui-secondary, #a7c5b2);
  font-size: 20px;
}
.preview-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 12px;
}
.path-label {
  display: block;
  padding: 7px 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  color: var(--ui-secondary, #adbbb2);
}
.code-preview {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--ui-inset, #111813);
  border: 1px solid var(--ui-raised, #2d3b31);
  border-radius: 8px;
  font:
    12px/1.7 ui-monospace,
    SFMono-Regular,
    monospace;
}
.code-line {
  display: flex;
  min-width: max-content;
}
.code-line > span {
  position: sticky;
  left: 0;
  display: inline-block;
  background: var(--ui-inset, #172019);
  color: var(--ui-muted, #7c9485);
  text-align: right;
  min-width: 42px;
  padding: 0 8px;
  user-select: none;
}
.code-line code {
  white-space: pre;
  padding: 0 10px;
}
.code-line .token.comment,
.code-line .token.prolog,
.code-line .token.doctype,
.code-line .token.cdata { color: var(--ui-muted, #718479); }
.code-line .token.punctuation { color: var(--ui-secondary, #a9b8ad); }
.code-line .token.property,
.code-line .token.tag,
.code-line .token.boolean,
.code-line .token.number,
.code-line .token.constant,
.code-line .token.symbol { color: var(--ui-syntax-number, #d5b77e); }
.code-line .token.selector,
.code-line .token.attr-name,
.code-line .token.string,
.code-line .token.char,
.code-line .token.builtin { color: var(--ui-syntax-string, #9bc7a6); }
.code-line .token.operator,
.code-line .token.entity,
.code-line .token.url { color: var(--ui-syntax-operator, #b7a6d1); }
.code-line .token.atrule,
.code-line .token.attr-value,
.code-line .token.keyword { color: var(--ui-syntax-keyword, #8bb9d4); }
.code-line .token.function,
.code-line .token.class-name { color: var(--ui-syntax-function, #e2c58f); }
.preview-controls {
  padding-top: 10px;
}
.preview-controls input {
  font-size: 13px;
}
.image-preview {
  min-height: 0;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.image-preview img {
  max-width: 100%;
  max-height: 65dvh;
  object-fit: contain;
}
.document,
.diff {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    12px/1.6 ui-monospace,
    monospace;
  color: var(--ui-soft-text, #c3d1c8);
  background: var(--ui-inset, #101812);
  padding: 12px;
  border: 1px solid var(--ui-raised, #2d3c32);
  border-radius: 8px;
  overflow: auto;
}
.document {
  flex: 1;
  min-height: 0;
}
.diff-view {
  padding: 0;
  white-space: pre;
  overflow: auto;
}
.diff-line {
  display: block;
  min-width: max-content;
  padding-right: 12px;
}
.record-line {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diff-line i {
  display: inline-block;
  width: 42px;
  margin-right: 10px;
  padding-right: 8px;
  border-right: 1px solid var(--ui-raised, #2d3c32);
  color: var(--ui-muted, #65746a);
  font-style: normal;
  text-align: right;
  user-select: none;
}
.diff-add { color: var(--ui-positive, #b9e6c6); background: var(--ui-positive-bg, rgba(56, 142, 73, 0.2)); }
.diff-remove { color: var(--ui-negative, #f0b8b8); background: var(--ui-negative-bg, rgba(170, 55, 55, 0.2)); }
.diff-hunk { color: var(--ui-syntax-keyword, #b8c8f0); background: var(--ui-hunk-bg, rgba(73, 93, 145, 0.22)); }
.diff-file { color: var(--ui-syntax-function, #e2cf9c); font-weight: 600; }
.diff {
  max-height: 65dvh;
}
.search-panel {
  padding: 10px 14px;
  max-height: 32dvh;
  overflow: auto;
  flex-shrink: 0;
  background: var(--ui-surface, #1b261e);
}
.search-panel > small {
  display: block;
  margin-top: 8px;
}
.search-hit {
  display: block;
  max-height: 80px;
  overflow: hidden;
  width: 100%;
  margin-top: 7px;
  text-align: left;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.request {
  padding: 12px;
  margin: 8px 0;
  border: 1px solid var(--ui-warning-border, #9d9968);
  background: var(--ui-warning-bg, #302f21);
  border-radius: 10px;
}
.request strong {
  font-size: 14px;
}
.request p {
  white-space: pre-wrap;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.request label {
  font-size: 13px;
  margin: 10px 0;
}
.auth-shell {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 25px;
}
.auth-card {
  width: min(100%, 380px);
  padding: 30px;
  border: 1px solid var(--ui-border, #354238);
  border-radius: 16px;
  background: var(--ui-surface, #19211c);
}
.auth-card h1 {
  margin-top: 30px;
}
.auth-card p {
  color: var(--ui-secondary, #a8b8ad);
}
.auth-card form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 700px) {
  .page {
    padding: 30px 36px;
  }
  .history {
    padding-inline: 32px;
  }
}
@media (max-height: 600px) {
  .progress-block {
    height: 42px;
  }
  .composer-settings select { max-width: 132px; }
  .composer-settings { gap: 5px; }
  .thinking-tail {
    display: none;
  }
  .live-area {
    max-height: 25dvh;
  }
  .composer textarea {
    max-height: 65px;
  }
  .app-header {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
@media (max-width: 560px) {
  .app-header {
    display: block;
    padding-inline: 10px;
  }
  .app-header-main {
    min-height: 38px;
  }
  .app-header-actions {
    gap: 2px;
    margin-top: 3px;
    overflow-x: visible;
  }
  .app-header-actions::-webkit-scrollbar {
    display: none;
  }
  .app-header-actions > button,
  .app-header-actions .codex-control-trigger {
    min-height: 32px;
    padding: 5px 7px;
    white-space: nowrap;
  }
  .network-test-menu {
    top: calc(env(safe-area-inset-top) + 86px);
    right: 10px;
  }
}
.markdown {
  white-space: normal;
  overflow-wrap: anywhere;
}
.markdown h1 {
  font-size: 1.3em;
}
.markdown h2 {
  font-size: 1.18em;
}
.markdown h3 {
  font-size: 1.08em;
}
.markdown pre {
  white-space: pre;
  overflow: auto;
  max-width: 100%;
  background: var(--ui-inset, #111813);
  padding: 10px;
  border-radius: 8px;
}
.markdown table {
  display: block;
  overflow: auto;
  border-collapse: collapse;
  max-width: 100%;
}
.markdown td,
.markdown th {
  padding: 6px;
  border: 1px solid var(--ui-border, #3a483e);
}
.markdown-preview {
  overflow: auto;
  min-height: 0;
  flex: 1;
  padding: 12px;
}
.markdown p:first-child {
  margin-top: 0;
}

/* Mailbox: what happened on the host while the phone was away. Visually
   secondary to task content, and bounded like everything else: the list is
   paged from the server and never accumulates locally. */
.inbox-trigger {
  position: relative;
}
.inbox-badge {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--ui-strong-accent, #3f6b52);
  color: var(--ui-on-strong-accent, #eaf3ee);
  font-size: 11px;
  line-height: 15px;
}
.inbox-panel {
  flex-shrink: 0;
  max-height: 52vh;
  overflow: auto;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--ui-raised, #2a312d);
  background: var(--ui-surface, #1c2521);
}
.inbox-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-head small {
  flex: 1;
  color: var(--ui-secondary, #9eaea5);
}
.inbox-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.inbox-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  text-align: left;
  background: transparent;
  color: var(--ui-text, #e6ece8);
}
.inbox-item.unread {
  background: var(--ui-raised, #222d28);
}
.inbox-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.inbox-line strong {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 400;
}
.inbox-line small {
  color: var(--ui-muted, #8d9c93);
  font-size: 11px;
}
.inbox-summary {
  display: block;
  margin-top: 3px;
  color: var(--ui-secondary, #b1b9b4);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.inbox-foot {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
/* A page whose records were evicted. It stays in place as a refetchable slot,
   so the transcript never silently joins distant messages. */
.history-slot {
  padding: 12px 2px;
  text-align: center;
  border: 1px dashed var(--ui-raised, #343a35);
  border-radius: 8px;
  margin: 12px 0;
}

/* Image input. The strip holds at most a few previews and the transcript shows
   bounded host-rendered thumbnails, never inline base64. */
.composer-file {
  display: none;
}
.composer-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.composer-images li {
  position: relative;
}
.composer-images img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--ui-raised, #343a35);
}
.composer-images small {
  display: block;
  margin-top: 2px;
  color: var(--ui-muted, #8d9c93);
  font-size: 10px;
  text-align: center;
}
.composer-image-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ui-border, #35423b);
  border-radius: 10px;
  background: var(--ui-surface, #1c2521);
  color: var(--ui-text, #e6ece8);
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.message-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.message-images img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  border-radius: 9px;
  border: 1px solid var(--ui-raised, #343a35);
}
.dsh-view { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.dsh-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) 12px 6px;
  border-bottom: 1px solid var(--ui-raised, #2a312d);
}
.dsh-header strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-header button { min-height: 36px; }
.dsh-error { margin: 5px 12px; color: var(--ui-danger, #f0ad9b); font-size: 12px; }
.dsh-catalog, .dsh-transcript { flex: 1; min-height: 0; overflow: auto; padding: 12px; overscroll-behavior: contain; }
.dsh-create { display: flex; gap: 8px; margin-bottom: 12px; }
.dsh-create button { flex: 0 0 auto; }
.dsh-session-card { display: grid; gap: 4px; width: 100%; margin-bottom: 7px; text-align: left; }
.dsh-session-card small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dsh-session-card span { color: var(--ui-secondary, #98a79e); font-size: 11px; }
.dsh-turn { display: grid; gap: 9px; margin: 0 0 22px; }
.dsh-user, .dsh-answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.dsh-user { justify-self: end; max-width: 94%; padding: 10px 13px; border-radius: 14px; background: var(--ui-raised, #27362e); }
.dsh-answer { padding: 2px 4px; }
.dsh-operations { padding: 7px 10px; border: 1px solid var(--ui-border, #35443a); border-radius: 9px; color: var(--ui-secondary, #a7b7aa); }
.dsh-operations summary { cursor: pointer; font-size: 12px; }
.dsh-operations pre { max-height: 55dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, monospace; }
.dsh-composer { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ui-raised, #2a312d); }
.dsh-composer textarea { max-height: 28dvh; }
.dsh-composer > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dsh-composer small { margin-right: auto; }

:root[data-ui-theme="paper"] .brand img { filter: brightness(0); }

.composer-attachments { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.composer-attachments li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--ui-border); border-radius: 8px; padding: 8px 10px; }
.composer-attachments li > div { flex: 1; min-width: 0; }
.composer-attachments a, .composer-attachments span { display: block; overflow-wrap: anywhere; color: var(--ui-text); font-size: 13px; }
.composer-attachments small { display: block; font-size: 11px; color: var(--ui-secondary); overflow-wrap: anywhere; }
.composer-attachments progress { display: block; width: 100%; height: 4px; margin-top: 6px; accent-color: var(--ui-soft-text); }
.composer-attachments button { flex-shrink: 0; min-height: 32px; padding: 4px 10px; }

.composer-attachment-actions { display: flex; align-items: center; gap: 8px; padding: 2px 0 4px; }
.composer-attachment-actions .composer-attach { padding: 4px 10px; min-height: 30px; border: 1px solid var(--ui-border); border-radius: 6px; font-size: 12px; }

.native-history-empty { flex: 1; min-height: 0; margin: 0; display: grid; place-items: center; font-size: 13px; }

.directory-upload { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0; }
.directory-upload small { color:var(--ui-secondary); font-size:11px; }
.directory-upload-progress { display:grid; gap:6px; margin:10px 0; font-size:12px; overflow-wrap:anywhere; }
.directory-upload-progress progress { width:100%; }
.directory-upload-progress button { justify-self:start; }

.file-preview-actions { padding: 6px 12px; flex-shrink: 0; }
.file-preview-actions a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--ui-border); border-radius: 8px; color: var(--ui-text); text-decoration: none; font-size: 12px; }

.file-entry { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ui-raised); }
.file-entry .file-row { flex: 1; width: 0; border-bottom: 0; }
.file-entry-download { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 8px; font-size: 12px; color: var(--ui-soft-text); text-decoration: none; border-radius: 6px; }
.file-entry-download:hover { background: var(--ui-raised); }

.pinned-folders { margin-bottom: 20px; }
.pinned-folder { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ui-border); padding: 6px 0; }
.pinned-folder-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; }
.pinned-folder-open > span:nth-child(2) { flex: 1; min-width: 0; }
.pinned-folder-open strong, .pinned-folder-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-folder-open small { margin-top: 4px; color: var(--ui-secondary); }

.directory-address { display: flex; gap: 8px; margin: 12px 0; }
.directory-address input { flex: 1; min-width: 0; width: 0; }
.directory-address button { flex-shrink: 0; }

/* Primary navigation stays visible; secondary controls use a disclosure panel. */
.app-header { position: relative; display: block; z-index: 35; }
.app-header-main { width: 100%; }
.app-header .header-files { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; min-height: 40px; background: var(--ui-raised); border: 1px solid var(--ui-border); border-radius: 8px; font-weight: 600; flex-shrink: 0; }
.app-header .header-more-trigger { min-height: 40px; flex-shrink: 0; }
.app-header-actions { position: absolute; top: calc(100% + 6px); right: 10px; left: 10px; margin-top: 0; padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; background: var(--ui-card, var(--ui-page)); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: 0 12px 35px #0003; }
.app-header-actions[hidden] { display: none; }
.app-header-actions > button, .app-header-actions .codex-control-trigger, .app-header-actions .appearance-trigger { min-height: 40px; padding: 8px 10px; }
.app-header-actions .memory-badge { margin-left: auto; align-self: center; }

[hidden] { display: none !important; }
.section-title > small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-title > strong { flex-shrink: 0; }
.file-list + .pager { margin-top: 12px; }
[data-form="filter"] { display: flex; align-items: center; gap: 8px; }
[data-form="filter"] input { min-width: 0; flex: 1; }
.composer > textarea { min-height: 76px; max-height: 180px; resize: vertical; }
#live { max-height: 28dvh; overflow: auto; flex-shrink: 0; }
#live-answer { white-space: pre-wrap; }
.syntax-code pre { white-space: pre; overflow: auto; padding: 14px; }

.overlay { z-index: 130; }
.section-title > small { flex: 1; text-align: right; }
.section-title > strong { flex: 0 1 auto; max-width: 65%; }