/* [project]/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --canvas: #f3f5f1;
  --surface: #fff;
  --surface-soft: #f8faf7;
  --surface-glass: #ffffffc7;
  --surface-glass-soft: #ffffff8c;
  --header-glass: #f8faf7e0;
  --sidebar: #fbfcfa;
  --board: #e9ede8;
  --window-bar: #dfe5e0;
  --neutral-soft: #edf0ec;
  --input: #fff;
  --placeholder: #9aa59e;
  --logo-bg: #17201a;
  --ink: #17201a;
  --ink-soft: #536158;
  --ink-faint: #829087;
  --line: #dce3dc;
  --line-strong: #c8d1c9;
  --green: #16875c;
  --green-dark: #0d6d49;
  --green-soft: #e3f5ec;
  --amber: #a96008;
  --amber-soft: #fff1d8;
  --red: #bc3c32;
  --red-soft: #fcedeb;
  --blue: #2468a9;
  --blue-soft: #e7f0fa;
  --solid: #17201a;
  --solid-hover: #28342c;
  --on-solid: #fff;
  --on-green: #fff;
  --danger-line: #f0c5c1;
  --danger-detail: #8e4a44;
  --amber-line: #edcf9b;
  --amber-detail: #745321;
  --approval-surface: #fffaf0;
  --code-inline: #edf1ed;
  --code-inline-ink: #81411e;
  --code-surface: #18211b;
  --code-line: #303a33;
  --code-ink: #e8eee9;
  --diff-surface: #f4f6f2;
  --composer-fade: #f3f5f100;
  --attachment-line: #ffffff2b;
  --attachment-surface: #ffffff14;
  --image-label: #101211c7;
  --overlay-ink: #fff;
  --backdrop: #12141373;
  --code-accent: #72d3a5;
  --shadow-sm: 0 1px 2px #15231a0d, 0 6px 18px #15231a09;
  --shadow-float: 0 14px 40px #15231a1a;
  --shadow-lg: 0 24px 80px #15231a1f;
}

html[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --canvas: #000;
  --surface: #090909;
  --surface-soft: #111;
  --surface-glass: #090909f5;
  --surface-glass-soft: #050505db;
  --header-glass: #050505f5;
  --sidebar: #050505;
  --board: #000;
  --window-bar: #0b0b0b;
  --neutral-soft: #171717;
  --input: #050505;
  --placeholder: #6b6b6b;
  --logo-bg: #000;
  --ink: #fafafa;
  --ink-soft: #b3b3b3;
  --ink-faint: #737373;
  --line: #1f1f1f;
  --line-strong: #333;
  --green: #22c55e;
  --green-dark: #4ade80;
  --green-soft: #0b2916;
  --amber: #f0b45e;
  --amber-soft: #382b18;
  --red: #ff8a80;
  --red-soft: #3b211f;
  --blue: #38bdf8;
  --blue-soft: #1b3044;
  --solid: #22c55e;
  --solid-hover: #4ade80;
  --on-solid: #001a09;
  --on-green: #001a09;
  --danger-line: #70413d;
  --danger-detail: #e9aaa4;
  --amber-line: #70552c;
  --amber-detail: #dfbd86;
  --approval-surface: #2b2519;
  --code-inline: #151515;
  --code-inline-ink: #ffb88e;
  --code-surface: #030303;
  --code-line: #303030;
  --code-ink: #f5f5f5;
  --diff-surface: #050505;
  --composer-fade: #0000;
  --attachment-line: #ffffff2e;
  --attachment-surface: #ffffff12;
  --image-label: #000000c7;
  --overlay-ink: #fff;
  --backdrop: #0000009e;
  --code-accent: #79dba9;
  --shadow-sm: 0 1px 2px #00000047, 0 8px 22px #0000002e;
  --shadow-float: 0 14px 40px #0000006b;
  --shadow-lg: 0 24px 80px #00000080;
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

body {
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
}

button, input, textarea, select {
  color: inherit;
  font: inherit;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .62;
}

a {
  color: inherit;
  text-decoration: none;
}

code, pre {
  font-family: SFMono-Regular, Consolas, Liberation Mono, monospace;
}

:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #16875c40;
}

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

.mobileHeader {
  display: none;
}

.preWrap {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.muted {
  color: var(--ink-soft);
}

.logo {
  letter-spacing: -.05em;
  border-radius: 10px;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 850;
  display: inline-flex;
}

.logoMark {
  background: var(--logo-bg);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px #16875c2e;
}

.logoMark span {
  background: #76d9aa;
  border-radius: 5px;
  width: 8px;
  height: 18px;
  position: absolute;
  transform: rotate(35deg);
}

.logoMark span:first-child {
  top: 9px;
  left: 8px;
}

.logoMark span:nth-child(2) {
  background: #ffb26d;
  top: 4px;
  left: 15px;
}

.logoMark span:nth-child(3) {
  background: #f6f8f5;
  height: 13px;
  top: 13px;
  left: 20px;
}

.primaryButton, .secondaryButton, .smallButton, .textButton, .approvalAccept, .newProjectButton {
  border: 0;
  border-radius: 11px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 750;
  transition: transform .15s, border-color .15s, background .15s;
  display: inline-flex;
}

.primaryButton, .newProjectButton {
  background: var(--solid);
  color: var(--on-solid);
  box-shadow: var(--shadow-sm);
}

.primaryButton:not(:disabled):hover, .newProjectButton:hover {
  background: var(--solid-hover);
  transform: translateY(-1px);
}

.secondaryButton, .smallButton {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.secondaryButton:not(:disabled):hover, .smallButton:not(:disabled):hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.smallButton {
  border-radius: 8px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.textButton {
  min-height: 30px;
  color: var(--green-dark);
  background: none;
  padding: 0 5px;
}

.fullWidth {
  width: 100%;
}

.dangerText {
  color: var(--red) !important;
}

.iconButton {
  width: 36px;
  height: 36px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 10px;
  flex: none;
  place-items: center;
  font-size: 18px;
  display: inline-grid;
}

.iconButton:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.centeredPage, .contentStatus {
  min-height: 250px;
  color: var(--ink-soft);
  place-items: center;
  display: grid;
}

.centeredPage {
  min-height: 100vh;
}

.spinnerWrap {
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 650;
  display: inline-flex;
}

.spinner {
  border: 2px solid #16875c33;
  border-top-color: var(--green);
  border-radius: 50%;
  flex: none;
  width: 18px;
  height: 18px;
  animation: .75s linear infinite spin;
  display: inline-block;
}

.spinner.small {
  width: 14px;
  height: 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.authPage {
  background: radial-gradient(circle at 20% 20%, #76d9aa29, transparent 30%),
    var(--surface);
  place-items: center;
  min-height: 100vh;
  display: grid;
}

.authPanel {
  width: 100%;
  padding: 32px 24px;
}

.authCard {
  width: min(100%, 430px);
  margin: 0 auto;
}

.authTopbar {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  display: flex;
}

.authCard h1 {
  letter-spacing: -.045em;
  margin: 44px 0 30px;
  font-size: 36px;
}

.formStack {
  gap: 18px;
  display: grid;
}

.field {
  gap: 8px;
  display: grid;
}

.field > span {
  font-size: 12px;
  font-weight: 750;
}

.field input, .field select, .inlineChatForm input {
  border: 1px solid var(--line-strong);
  background: var(--input);
  border-radius: 11px;
  outline: none;
  width: 100%;
  height: 47px;
  padding: 0 14px;
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}

.field input:focus, .field select:focus, .inlineChatForm input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #16875c1c;
}

.field input::placeholder, .inlineChatForm input::placeholder {
  color: var(--placeholder);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 38px;
}

.field small {
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.5;
}

.formError {
  border: 1px solid var(--danger-line);
  background: var(--red-soft);
  color: var(--red);
  border-radius: 9px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.authSwitch {
  color: var(--ink-soft);
  text-align: center;
  margin: 25px 0 0;
  font-size: 12px;
}

.authSwitch a {
  color: var(--green-dark);
  font-weight: 750;
}

.appFrame {
  width: 100%;
  height: 100dvh;
  display: flex;
  overflow: hidden;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--sidebar);
  flex-direction: column;
  width: 274px;
  min-width: 274px;
  transition: width .18s, min-width .18s;
  display: flex;
}

.sidebarHeader {
  justify-content: space-between;
  align-items: center;
  height: 75px;
  padding: 0 21px;
  display: flex;
}

.sidebarHeaderActions {
  align-items: center;
  gap: 5px;
  display: flex;
}

.sidebarCollapseButton svg {
  width: 18px;
  height: 18px;
}

.themeToggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  color: var(--ink-soft);
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  flex: none;
  place-items: center;
  padding: 0;
  transition: border-color .15s, background .15s, color .15s;
  display: grid;
}

.themeToggle:hover {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

.themeToggleIcon {
  place-items: center;
  display: grid;
}

.themeToggleIcon svg {
  width: 18px;
  height: 18px;
}

.themeSun {
  display: none;
}

.themeMoon, html[data-theme="dark"] .themeSun {
  display: block;
}

html[data-theme="dark"] .themeMoon {
  display: none;
}

.newProjectButton {
  margin: 5px 15px 18px;
}

.sidebarNav {
  flex: 1;
  min-height: 0;
  padding: 4px 11px 20px;
  overflow-y: auto;
}

.navSectionTitle {
  color: var(--ink-faint);
  letter-spacing: .11em;
  text-transform: uppercase;
  justify-content: space-between;
  align-items: center;
  padding: 12px 9px 8px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.navSectionTitle a {
  color: var(--green-dark);
  letter-spacing: 0;
  text-transform: none;
  font-size: 9px;
}

.projectNavSectionTitle {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 19px;
}

.analyticsNavItem {
  margin-bottom: 8px;
}

.analyticsNavItem .projectNavCopy strong {
  font-size: 13px;
}

.analyticsNavItem .projectNavCopy small {
  font-size: 12px;
}

.analyticsNavIcon {
  background: linear-gradient(145deg, var(--green-soft), var(--blue-soft));
  color: var(--green-dark);
}

.analyticsNavIcon svg {
  width: 18px;
  height: 18px;
}

.workspaceAvatar {
  background: var(--blue-soft);
  color: var(--blue);
  border-radius: 50%;
}

.projectNavItem {
  border: 1px solid #0000;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  transition: background .15s, border-color .15s;
  display: flex;
}

.projectNavItem:hover, .projectNavItem.active {
  border-color: var(--line);
  background: var(--surface);
}

.projectNavItem.active {
  box-shadow: var(--shadow-sm);
}

.projectNavGroup + .projectNavGroup {
  margin-top: 3px;
}

.recentChatNav {
  gap: 1px;
  margin: 2px 0 7px 42px;
  display: grid;
}

.recentChatNav a {
  min-width: 0;
  color: var(--ink-soft);
  border-radius: 7px;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  font-size: 10px;
  display: flex;
}

.recentChatNav a:hover {
  background: var(--surface);
  color: var(--ink);
}

.recentChatNav a span:first-child {
  color: var(--green);
  flex: none;
}

.recentChatNav a span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.projectAvatar, .accountAvatar {
  background: var(--green-soft);
  width: 32px;
  height: 32px;
  color: var(--green-dark);
  border-radius: 9px;
  flex: none;
  place-items: center;
  font-size: 11px;
  font-weight: 850;
  display: grid;
}

.projectNavCopy, .accountCopy {
  flex: 1;
  min-width: 0;
  display: block;
}

.projectNavCopy strong, .projectNavCopy small, .accountCopy strong, .accountCopy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.projectNavCopy strong, .accountCopy strong {
  font-size: 12px;
}

.projectNavCopy small, .accountCopy small {
  color: var(--ink-faint);
  margin-top: 3px;
  font-size: 9px;
}

.activityDot, .livePill i, .statusBadge i, .connectionBadge i {
  background: var(--green);
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
}

.sidebarError, .sidebarEmpty {
  color: var(--ink-faint);
  margin: 4px 9px;
  font-size: 11px;
  line-height: 1.5;
}

.sidebarError {
  color: var(--red);
}

.accountPanel {
  border-top: 1px solid var(--line);
  flex: none;
  padding: 10px 11px;
  position: relative;
}

.accountAvatar {
  background: var(--neutral-soft);
  color: var(--ink-soft);
}

.accountTrigger {
  text-align: left;
  background: none;
  border: 0;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 4px 3px;
  transition: background .15s;
  display: flex;
}

.accountTrigger:hover, .accountTrigger[aria-expanded="true"] {
  background: var(--surface);
}

.accountChevron {
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  flex: none;
  transition: transform .15s;
}

.accountChevron.isOpen {
  transform: rotate(180deg);
}

.accountMenu {
  z-index: 60;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform-origin: bottom;
  border-radius: 12px;
  padding: 6px;
  animation: .15s ease-out accountMenuIn;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 11px;
  right: 11px;
}

.accountMenuItem {
  width: 100%;
  min-height: 42px;
  color: var(--red);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 750;
  transition: background .15s;
  display: flex;
}

.accountMenuItem:hover:not(:disabled) {
  background: var(--red-soft);
}

.accountMenuItem svg {
  flex: none;
  width: 17px;
  height: 17px;
}

@keyframes accountMenuIn {
  from {
    opacity: 0;
    transform: translateY(5px)scale(.98);
  }
}

.appContent {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 821px) {
  .appFrame.sidebarCollapsed .sidebar {
    width: 72px;
    min-width: 72px;
  }

  .appFrame.sidebarCollapsed .sidebarHeader {
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    height: auto;
    min-height: 170px;
    padding: 14px 0 8px;
  }

  .appFrame.sidebarCollapsed .sidebarHeader .logo > span:last-child {
    display: none;
  }

  .appFrame.sidebarCollapsed .sidebarHeaderActions {
    flex-direction: column;
  }

  .appFrame.sidebarCollapsed .sidebarCollapseButton svg {
    transform: scaleX(-1);
  }

  .appFrame.sidebarCollapsed .newProjectButton {
    width: 44px;
    min-height: 42px;
    margin: 2px auto 12px;
    padding: 0;
    font-size: 18px;
  }

  .appFrame.sidebarCollapsed .newProjectText, .appFrame.sidebarCollapsed .navSectionTitle, .appFrame.sidebarCollapsed .projectNavCopy, .appFrame.sidebarCollapsed .recentChatNav, .appFrame.sidebarCollapsed .sidebarError, .appFrame.sidebarCollapsed .sidebarEmpty, .appFrame.sidebarCollapsed .accountCopy, .appFrame.sidebarCollapsed .accountChevron {
    display: none;
  }

  .appFrame.sidebarCollapsed .sidebarNav {
    padding: 4px 9px 18px;
  }

  .appFrame.sidebarCollapsed .projectNavGroup + .projectNavGroup {
    margin-top: 5px;
  }

  .appFrame.sidebarCollapsed .projectNavItem {
    justify-content: center;
    gap: 0;
    padding: 8px;
    position: relative;
  }

  .appFrame.sidebarCollapsed .projectAvatar {
    width: 36px;
    height: 36px;
  }

  .appFrame.sidebarCollapsed .projectNavItem .activityDot {
    border: 2px solid var(--sidebar);
    position: absolute;
    top: 5px;
    right: 5px;
  }

  .appFrame.sidebarCollapsed .accountPanel {
    padding: 10px 9px;
  }

  .appFrame.sidebarCollapsed .accountTrigger {
    justify-content: center;
    padding: 4px;
  }

  .appFrame.sidebarCollapsed .accountAvatar {
    width: 36px;
    height: 36px;
  }

  .appFrame.sidebarCollapsed .accountMenu {
    width: 190px;
    bottom: 8px;
    left: calc(100% + 8px);
    right: auto;
  }

  .appFrame.sidebarCollapsed .appContent, .appFrame.sidebarCollapsed .projectGrid {
    min-width: 0;
  }
}

.pageSurface {
  height: 100%;
  padding: clamp(34px, 6vw, 72px) clamp(26px, 6vw, 82px);
  overflow-y: auto;
}

.narrowPage {
  max-width: 1000px;
  margin: 0 auto;
}

.pageHeader, .projectHeader {
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 42px;
  display: flex;
}

.pageHeader h1, .projectHeader h1 {
  letter-spacing: -.06em;
  margin: 0;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}

.pageHeaderCopy > p {
  max-width: 600px;
  color: var(--ink-soft);
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.compactHeader {
  margin: 30px 0 28px;
}

.compactHeader h1 {
  font-size: 46px;
}

.surfaceCard {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
}

.projectForm {
  gap: 24px;
  padding: clamp(25px, 5vw, 44px);
  display: grid;
}

.formActions {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  gap: 9px;
  padding-top: 22px;
  display: flex;
}

.errorPanel {
  border: 1px solid var(--danger-line);
  background: var(--red-soft);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px;
  display: flex;
}

.errorPanel strong, .errorPanel p {
  margin: 0;
}

.errorPanel p {
  color: var(--red);
  margin-top: 4px;
  font-size: 12px;
}

.emptyState {
  border: 1px dashed var(--line-strong);
  background: var(--surface-glass-soft);
  text-align: center;
  border-radius: 22px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 360px;
  padding: 45px 24px;
  display: flex;
}

.emptyGlyph {
  background: var(--green-soft);
  width: 56px;
  height: 56px;
  color: var(--green-dark);
  border-radius: 16px;
  place-items: center;
  margin-bottom: 19px;
  font-size: 27px;
  font-weight: 800;
  display: grid;
  transform: rotate(-4deg);
}

.emptyState h2 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: 27px;
}

.analyticsPage {
  --chart-input: var(--blue);
  --chart-output: var(--amber);
  max-width: 1680px;
  margin: 0 auto;
}

.pageSurface.analyticsPage, .pageSurface.projectTargetPage {
  padding-top: 18px;
}

.analyticsHeader {
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 18px;
  display: flex;
}

.analyticsHeader h1 {
  letter-spacing: -.06em;
  margin: 0;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}

.analyticsHeader .pageHeaderCopy > p {
  font-size: 15px;
  line-height: 1.55;
}

.analyticsHeaderActions {
  flex-wrap: wrap;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  display: flex;
}

.analyticsModelFilters {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 13px;
  display: inline-flex;
  overflow: hidden;
}

.analyticsModelFilters select {
  min-width: 145px;
  min-height: 46px;
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
  padding: 0 34px 0 13px;
  font-size: 13px;
  font-weight: 700;
}

.analyticsModelFilters select + select {
  border-left: 1px solid var(--line);
}

.analyticsModelFilters select:focus-visible {
  background: var(--green-soft);
}

.analyticsModelFilters select:disabled {
  color: var(--ink-faint);
}

.analyticsRangeControl {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 13px;
  flex: none;
  gap: 3px;
  padding: 4px;
  display: inline-flex;
}

.analyticsRangeControl button {
  min-height: 38px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 750;
  transition: background .15s, color .15s, box-shadow .15s;
}

.analyticsRangeControl button:hover {
  color: var(--ink);
}

.analyticsRangeControl button.active {
  background: var(--solid);
  color: var(--on-solid);
  box-shadow: var(--shadow-sm);
}

.analyticsError {
  margin-top: 38px;
}

.analyticsContent {
  gap: 17px;
  display: grid;
}

.analyticsPeriod {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 13px;
  font-size: 12px;
  font-weight: 650;
  display: flex;
}

.analyticsPeriod > span:last-child {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.analyticsPeriod svg {
  width: 13px;
  height: 13px;
}

.analyticsKpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.analyticsKpi {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  min-height: 148px;
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
  align-items: flex-start;
  gap: 15px;
  padding: 22px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.analyticsKpi:after {
  content: "";
  opacity: .035;
  background: currentColor;
  border-radius: 50%;
  width: 105px;
  height: 105px;
  position: absolute;
  bottom: -45px;
  right: -30px;
}

.kpiIcon {
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 39px;
  height: 39px;
  display: grid;
}

.kpiIcon svg {
  width: 20px;
  height: 20px;
}

.kpi-green .kpiIcon {
  background: var(--green-soft);
  color: var(--green-dark);
}

.kpi-blue .kpiIcon {
  background: var(--blue-soft);
  color: var(--blue);
}

.kpi-amber .kpiIcon {
  background: var(--amber-soft);
  color: var(--amber);
}

.kpi-neutral .kpiIcon {
  background: var(--neutral-soft);
  color: var(--ink-soft);
}

.kpiCopy {
  min-width: 0;
}

.kpiCopy > span, .kpiCopy > strong, .kpiCopy > small {
  display: block;
}

.kpiCopy > span {
  color: var(--ink-soft);
  margin: 1px 0 6px;
  font-size: 13px;
  font-weight: 720;
}

.kpiCopy > strong {
  letter-spacing: -.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(25px, 2.5vw, 35px);
  line-height: 1.05;
  overflow: hidden;
}

.kpiCopy > small {
  color: var(--ink-faint);
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.45;
}

.analyticsPanel {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  border-radius: 20px;
}

.trendPanel {
  min-height: 430px;
  padding: clamp(20px, 3vw, 31px);
}

.analyticsSectionHeading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  display: flex;
}

.analyticsSectionHeading h2 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: 24px;
}

.chartLegend {
  color: var(--ink-soft);
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 17px;
  font-size: 12px;
  font-weight: 680;
  display: flex;
}

.chartLegend span, .chartTooltip span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.chartLegend i, .chartTooltip i {
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
  display: inline-block;
}

.legendTotal {
  background: var(--green);
}

.legendInput {
  background: var(--chart-input);
}

.legendOutput {
  background: var(--chart-output);
}

.usageChartWrap {
  width: 100%;
  margin-top: 19px;
  position: relative;
}

.usageChart {
  touch-action: pan-y;
  width: 100%;
  height: 320px;
  display: block;
  overflow: visible;
}

.chartGridLine line {
  stroke: var(--line);
  stroke-dasharray: 2 5;
  stroke-width: 1px;
}

.chartGridLine text, .chartDateLabel {
  fill: var(--ink-faint);
  font-family: inherit;
  font-size: 12px;
}

.chartArea {
  fill: url("#totalArea");
}

.chartLine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chartLineTotal {
  stroke: var(--green);
  stroke-width: 2.6px;
}

.chartLineInput {
  stroke: var(--chart-input);
  stroke-width: 1.4px;
  stroke-dasharray: 4 4;
  opacity: .82;
}

.chartLineOutput {
  stroke: var(--chart-output);
  stroke-width: 1.4px;
  stroke-dasharray: 4 4;
  opacity: .82;
}

.chartActivePoint line {
  stroke: var(--line-strong);
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.chartActivePoint circle {
  fill: var(--surface);
  stroke: var(--green);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.chartTooltip {
  z-index: 4;
  border: 1px solid var(--line-strong);
  background: var(--surface-glass);
  min-width: 220px;
  box-shadow: var(--shadow-float);
  pointer-events: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  gap: 6px;
  padding: 13px 14px;
  font-size: 12px;
  display: grid;
  position: absolute;
  top: 9px;
  transform: translate(-50%, -100%);
}

.chartTooltip.alignLeft {
  transform: translate(0, -100%);
}

.chartTooltip.alignRight {
  transform: translate(-100%, -100%);
}

.chartTooltip > strong {
  font-size: 13px;
}

.chartTooltip span {
  color: var(--ink-soft);
  justify-content: space-between;
}

.chartTooltip span b {
  color: var(--ink);
  margin-left: auto;
  padding-left: 12px;
}

.chartTooltip small {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  padding-top: 6px;
  font-size: 12px;
}

.analyticsBreakdowns {
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  align-items: start;
  gap: 21px;
  display: grid;
}

.projectsUsagePanel, .workspaceUsagePanel {
  padding: clamp(20px, 3vw, 28px);
}

.sectionTotal {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 680;
}

.projectUsageList {
  gap: 7px;
  margin-top: 20px;
  display: grid;
}

.projectUsageRow {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 14px;
  overflow: hidden;
}

.projectUsageRow[open] {
  border-color: var(--line-strong);
  background: var(--surface);
}

.projectUsageRow summary {
  cursor: pointer;
  grid-template-columns: 36px minmax(100px, 1fr) minmax(100px, 180px) 18px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  list-style: none;
  display: grid;
}

.projectUsageRow summary::-webkit-details-marker {
  display: none;
}

.projectUsageRow summary:hover {
  background: var(--surface);
}

.usageAvatar {
  background: var(--green-soft);
  width: 36px;
  height: 36px;
  color: var(--green-dark);
  border-radius: 10px;
  place-items: center;
  font-size: 13px;
  font-weight: 850;
  display: grid;
}

.usageEntityCopy, .usageEntityCopy strong, .usageEntityCopy small {
  min-width: 0;
  display: block;
}

.usageEntityCopy strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.usageEntityCopy small {
  color: var(--ink-faint);
  margin-top: 4px;
  font-size: 12px;
}

.usageAmount {
  text-align: right;
  min-width: 0;
}

.usageAmount > strong {
  font-size: 14px;
  display: block;
}

.usageBar, .workspaceBar {
  background: var(--neutral-soft);
  border-radius: 8px;
  height: 4px;
  display: block;
  overflow: hidden;
}

.usageBar {
  margin-top: 7px;
}

.usageBar i, .workspaceBar i {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
  height: 100%;
  display: block;
}

.usageChevron {
  width: 17px;
  color: var(--ink-faint);
  transition: transform .16s;
}

.projectUsageRow[open] .usageChevron {
  transform: rotate(180deg);
}

.projectTargetUsage {
  border-top: 1px solid var(--line);
  margin: 0 14px 14px 30px;
  padding-top: 5px;
}

.targetUsageRow {
  grid-template-columns: 16px minmax(100px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  display: grid;
}

.targetUsageRow + .targetUsageRow {
  border-top: 1px solid var(--line);
}

.targetBranch {
  border-bottom: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  border-radius: 0 0 0 5px;
  align-self: start;
  width: 11px;
  height: 15px;
}

.targetUsageCopy, .targetUsageCopy strong, .targetUsageCopy code {
  min-width: 0;
  display: block;
}

.targetUsageCopy strong {
  font-size: 13px;
}

.targetUsageCopy code {
  color: var(--ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  font-size: 12px;
  overflow: hidden;
}

.targetRuns {
  color: var(--ink-faint);
  white-space: nowrap;
  font-size: 12px;
}

.targetTokens {
  text-align: right;
  min-width: 63px;
  font-size: 12px;
}

.usageInfoNote {
  background: var(--surface-soft);
  color: var(--ink-faint);
  border-radius: 9px;
  align-items: flex-start;
  gap: 7px;
  margin: 13px 0 18px;
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.55;
  display: flex;
}

.usageInfoNote svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.workspaceUsageList {
  display: grid;
}

.workspaceUsageRow {
  gap: 12px;
  min-width: 0;
  padding: 14px 0;
  display: flex;
}

.workspaceUsageRow + .workspaceUsageRow {
  border-top: 1px solid var(--line);
}

.workspaceRank {
  color: var(--ink-faint);
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.workspaceUsageMain {
  flex: 1;
  min-width: 0;
}

.workspaceUsageTitle {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  display: flex;
}

.workspaceUsageTitle strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.workspaceUsageTitle b {
  flex: none;
  font-size: 12px;
}

.workspaceBar {
  height: 5px;
}

.workspaceUsageMain small {
  color: var(--ink-faint);
  margin-top: 6px;
  font-size: 12px;
  display: block;
}

.analyticsInlineEmpty {
  color: var(--ink-faint);
  margin: 20px 0 4px;
  font-size: 12px;
}

.analyticsSkeleton {
  gap: 21px;
  padding-top: 31px;
  display: grid;
}

.skeletonKpis, .skeletonColumns {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  display: grid;
}

.skeletonKpis i, .skeletonChart, .skeletonColumns i {
  border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--surface) 25%, var(--surface-soft) 42%, var(--surface) 60%);
  background-size: 300% 100%;
  border-radius: 18px;
  animation: 1.6s ease-in-out infinite analyticsShimmer;
}

.skeletonKpis i {
  min-height: 148px;
}

.skeletonChart {
  min-height: 430px;
}

.skeletonColumns {
  grid-template-columns: 1.35fr .65fr;
  gap: 21px;
}

.skeletonColumns i {
  min-height: 330px;
}

@keyframes analyticsShimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

.emptyState > p {
  max-width: 540px;
  color: var(--ink-soft);
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.65;
}

.emptyAction {
  margin-top: 24px;
}

.projectGrid {
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
  display: grid;
}

.projectCard {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
  gap: 16px;
  padding: 20px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
  display: flex;
}

.projectCard:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-float);
  transform: translateY(-2px);
}

.workspaceCardLink {
  flex: 1;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.workspaceCard > .archiveButton {
  flex: none;
  align-self: flex-start;
}

.archiveButton svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.archiveButton:hover, .windowActions .archiveButton:hover {
  color: var(--red);
}

.projectCardMark, .projectHeroMark {
  background: var(--green-soft);
  width: 48px;
  height: 48px;
  color: var(--green-dark);
  border-radius: 13px;
  flex: none;
  place-items: center;
  font-size: 16px;
  font-weight: 850;
  display: grid;
}

.projectCardBody {
  flex: 1;
  min-width: 0;
}

.projectCardTitle {
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  display: flex;
}

.projectCard h2 {
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}

.projectCard code {
  color: var(--ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
  font-size: 10px;
  display: block;
  overflow: hidden;
}

.projectCardMeta {
  color: var(--ink-faint);
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  font-size: 10px;
  display: flex;
}

.openArrow {
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 700;
}

.workspaceCardMark {
  background: var(--blue-soft);
  color: var(--blue);
  border-radius: 50%;
}

.workspaceCard p {
  color: var(--ink-soft);
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.workspaceChatCount {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink-soft);
  border-radius: 20px;
  flex: none;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 750;
}

.livePill {
  background: var(--green-soft);
  color: var(--green-dark);
  border-radius: 20px;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 750;
  display: inline-flex;
}

.projectIdentity {
  align-items: center;
  gap: 17px;
  min-width: 0;
  display: flex;
}

.projectHeroMark {
  border-radius: 17px;
  width: 61px;
  height: 61px;
  font-size: 21px;
}

.projectIdentity h1 {
  font-size: 42px;
}

.projectIdentity code {
  max-width: 600px;
  color: var(--ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
  font-size: 10px;
  display: block;
  overflow: hidden;
}

.inlineChatForm {
  gap: 8px;
  width: min(100%, 480px);
  display: flex;
}

.inlineChatForm input {
  flex: 1;
  min-width: 0;
}

.inlineChatForm .primaryButton {
  flex: none;
}

.pageError {
  margin-bottom: 18px;
}

.chatListSection {
  margin-top: 10px;
}

.sectionHeading {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 13px;
  display: flex;
}

.sectionHeading h2 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: 25px;
}

.sectionHeading > span {
  color: var(--ink-faint);
  font-size: 10px;
}

.chatList {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 15px;
  overflow: hidden;
}

.chatListItem {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 16px;
  transition: background .15s;
  display: flex;
}

.chatListItem:last-child {
  border-bottom: 0;
}

.chatListItem:hover {
  background: var(--surface-soft);
}

.chatIcon {
  background: var(--neutral-soft);
  width: 35px;
  height: 35px;
  color: var(--ink-soft);
  border-radius: 10px;
  flex: none;
  place-items: center;
  display: grid;
}

.chatListCopy {
  flex: 1;
  min-width: 0;
  display: block;
}

.chatListCopy strong, .chatListCopy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.chatListCopy strong {
  font-size: 13px;
}

.chatListCopy small {
  color: var(--ink-faint);
  margin-top: 4px;
  font-size: 9px;
}

.projectBoard {
  background: var(--board);
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 14px;
  display: flex;
  overflow: hidden;
}

.projectBoardHeader {
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 58px;
  padding: 0 4px 12px;
  display: flex;
}

.projectBoardHeader > div:first-child {
  min-width: 0;
}

.projectBoardHeader h1 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: 23px;
}

.projectBoardHeader code {
  max-width: 620px;
  color: var(--ink-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 9px;
  display: block;
  overflow: hidden;
}

.projectBoardTools {
  flex: none;
  align-items: center;
  gap: 9px;
  display: flex;
}

.workspaceBoardHeader {
  flex-wrap: wrap;
  row-gap: 10px;
}

.workspaceBoardHeader .projectBoardTools {
  flex-wrap: wrap;
  max-width: 100%;
}

.workspaceBoardHeader > div:first-child {
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 8px;
  display: grid;
}

.workspaceBoardHeader p {
  color: var(--ink-faint);
  white-space: nowrap;
  margin: 0;
  font-size: 9px;
}

.workspaceEyebrow {
  color: var(--green-dark);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 850;
  display: block;
}

.windowSizeControl {
  border: 1px solid var(--line-strong);
  background: var(--surface-glass);
  height: 42px;
  box-shadow: var(--shadow-sm);
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  display: flex;
}

.windowSizeControl > span:first-child {
  color: var(--ink-soft);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 750;
}

.windowDimensionSlider {
  align-items: center;
  gap: 4px;
  display: flex;
}

.windowDimensionSlider > span[aria-hidden] {
  width: 14px;
  color: var(--ink-faint);
  text-align: center;
  font-size: 12px;
}

.windowDimensionSlider input {
  width: clamp(58px, 5vw, 82px);
  accent-color: var(--green);
  cursor: ew-resize;
}

.windowSizeControl output {
  width: 72px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  font-size: 8px;
}

.windowSizeControl.isDisabled {
  opacity: .58;
}

.boardError {
  width: min(100%, 680px);
  margin: auto;
}

.boardOperationError {
  border: 1px solid var(--danger-line);
  border-radius: 9px;
  flex: none;
  margin: 0 0 10px;
  padding: 8px 11px;
}

.emptyBoard {
  border: 1px dashed var(--line-strong);
  background: var(--surface-glass-soft);
  border-radius: 12px;
  flex: 1;
  place-items: center;
  min-height: 0;
  display: grid;
}

.workspaceEmptyBoard {
  text-align: center;
  padding: 30px;
}

.workspaceEmptyBoard > div {
  justify-items: center;
  max-width: 470px;
  display: grid;
}

.emptyBoardGlyph {
  background: var(--green-soft);
  width: 56px;
  height: 56px;
  color: var(--green-dark);
  border-radius: 50%;
  place-items: center;
  font-size: 24px;
  display: grid;
}

.workspaceEmptyBoard h2 {
  letter-spacing: -.035em;
  margin: 17px 0 0;
  font-size: 24px;
}

.workspaceEmptyBoard p {
  color: var(--ink-soft);
  margin: 9px 0 20px;
  font-size: 12px;
  line-height: 1.55;
}

.chatWindowGrid {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--chat-window-width, 380px), 100%), var(--chat-window-width, 380px)));
  grid-auto-rows: var(--chat-window-height, 400px);
  flex: 1;
  align-content: start;
  gap: 10px;
  min-height: 0;
  display: grid;
  overflow: auto;
}

.chatWindowGrid.hasMaximized {
  display: block;
  overflow: hidden;
}

.chatWindow {
  border: 1px solid var(--line-strong);
  background: var(--canvas);
  min-width: 0;
  min-height: 0;
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  flex-direction: column;
  transition: border-color .14s, box-shadow .14s, opacity .14s;
  display: flex;
  overflow: hidden;
  container-type: inline-size;
}

.chatWindow.isDragging {
  border-color: var(--green);
  opacity: .48;
  box-shadow: 0 10px 28px #0d6d4929;
}

.chatWindow.maximized {
  width: 100%;
  height: 100%;
}

.chatWindow.isHidden {
  display: none;
}

.chatWindowBar {
  border-bottom: 1px solid var(--line-strong);
  background: var(--window-bar);
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 4px 6px;
  display: flex;
}

.windowDragHandle, .windowActions button {
  width: 28px;
  height: 28px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 7px;
  flex: none;
  place-items: center;
  display: grid;
}

.windowDragHandle {
  cursor: grab;
  font-size: 15px;
}

.windowDragHandle:active {
  cursor: grabbing;
}

.windowDragHandle:hover, .windowActions button:hover {
  background: var(--surface-glass);
  color: var(--ink);
}

.windowTitle {
  min-width: 0;
  color: var(--ink);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: 0;
  flex: 1;
  padding: 4px;
  font-size: 11px;
  font-weight: 780;
  overflow: hidden;
}

.windowTitleForm {
  flex: 1;
  min-width: 0;
}

.windowTitleForm input {
  border: 1px solid var(--green);
  background: var(--input);
  border-radius: 6px;
  outline: 0;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}

.draftPill {
  background: var(--surface-glass);
  color: var(--ink-faint);
  text-transform: uppercase;
  border-radius: 10px;
  flex: none;
  padding: 3px 6px;
  font-size: 7px;
  font-weight: 800;
}

.windowProjectBadge {
  border: 1px solid var(--line);
  background: var(--surface-glass);
  min-width: 0;
  max-width: 142px;
  color: var(--ink-soft);
  border-radius: 12px;
  flex: 0 auto;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 4px;
  font-size: 8px;
  font-weight: 750;
  display: inline-flex;
}

.windowProjectBadge i {
  background: var(--green-soft);
  width: 17px;
  height: 17px;
  color: var(--green-dark);
  border-radius: 5px;
  flex: none;
  place-items: center;
  font-size: 7px;
  font-style: normal;
  display: grid;
}

.windowProjectBadge > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.windowActions {
  flex: none;
  align-items: center;
  gap: 1px;
  display: flex;
}

.windowActions button {
  font-size: 13px;
}

.chatPane {
  height: 100%;
}

.chatWindow > .chatPane {
  flex: auto;
  height: auto;
  min-height: 0;
}

.chatPaneStatus {
  border-bottom: 1px solid var(--line);
  background: var(--header-glass);
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 9px;
  display: flex;
  overflow: hidden;
}

.chatPaneConnection {
  min-width: 0;
  margin-left: auto;
}

.chatPaneConnection > span {
  color: var(--ink-faint);
  white-space: nowrap;
  font-size: 8px;
}

.chatPaneStatus .connectionBanner {
  background: none;
  border: 0;
  padding: 4px;
  font-size: 8px;
}

.chatWindow .timeline {
  padding: 20px 16px 18px;
}

.chatWindow .conversation, .chatWindow .chatWelcome {
  width: 100%;
}

.chatWindow .chatWelcome .emptyState {
  min-height: 210px;
}

.chatWindow .composerWrap {
  padding: 7px 10px 10px;
}

.chatWindow .composerWrap > p, .chatWindow .wideModelName {
  display: none;
}

.chatWindow .chatSettingsPopover {
  width: min(330px, 100cqw - 22px);
  left: -44px;
}

.chatWindow .messageBubble, .chatWindow .runCard {
  width: 94%;
}

.singleChatPage {
  width: 100%;
  height: 100%;
}

@container (max-width: 470px) {
  .windowProjectBadge {
    max-width: 30px;
    padding-right: 4px;
  }

  .windowProjectBadge > span, .windowActions button[title="Přejmenovat"] {
    display: none;
  }
}

.dialogBackdrop {
  z-index: 90;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.workspaceDialog {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  width: min(100%, 620px);
  max-height: min(780px, 100dvh - 40px);
  box-shadow: var(--shadow-lg);
  border-radius: 18px;
  overflow: hidden;
}

.compactDialog {
  width: min(100%, 480px);
}

.dialogHeader {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 15px 19px 14px 23px;
  display: flex;
}

.dialogHeader h2 {
  letter-spacing: -.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 500px;
  margin: 4px 0 0;
  font-size: 22px;
  overflow: hidden;
}

.dialogTabs {
  background: var(--neutral-soft);
  border-radius: 11px;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 16px 20px 0;
  padding: 4px;
  display: grid;
}

.dialogTabs button {
  min-height: 38px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
}

.dialogTabs button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.dialogBody {
  gap: 19px;
  max-height: calc(100dvh - 190px);
  padding: 22px;
  display: grid;
  overflow-y: auto;
}

.workspaceChatForm {
  padding-top: 20px;
}

.dialogActions {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  gap: 8px;
  padding-top: 18px;
  display: flex;
}

.dialogEmpty {
  text-align: center;
  justify-items: center;
  padding: 42px 24px;
  display: grid;
}

.dialogEmpty strong {
  font-size: 18px;
}

.dialogEmpty p, .dialogMuted {
  color: var(--ink-soft);
  margin: 8px 0 20px;
  font-size: 12px;
  line-height: 1.5;
}

.dialogMuted {
  border: 1px dashed var(--line);
  text-align: center;
  border-radius: 11px;
  margin: 0;
  padding: 22px;
}

.existingChatList {
  gap: 6px;
  min-height: 110px;
  display: grid;
}

.existingChatList > .spinnerWrap {
  min-height: 110px;
}

.existingChatList > button {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  text-align: left;
  border-radius: 11px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 10px;
  transition: border-color .15s, background .15s;
  display: flex;
}

.existingChatList > button:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--green-soft);
}

.existingChatList > button > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.existingChatList strong, .existingChatList small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.existingChatList strong {
  font-size: 11px;
}

.existingChatList small {
  color: var(--ink-faint);
  margin-top: 3px;
  font-size: 8px;
}

.existingChatList b {
  color: var(--green-dark);
  flex: none;
  font-size: 9px;
}

.projectTargetHeader {
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin: 0 0 26px;
  display: flex;
}

.projectTargetHeader .projectIdentity h1 {
  margin: 0;
}

.projectTargetHint {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border-radius: 14px;
  padding: 17px 19px;
}

.projectTargetHint strong {
  font-size: 13px;
}

.projectTargetHint p {
  color: var(--ink-soft);
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.projectRepositoriesSection {
  margin-top: 34px;
}

.projectRepositoriesSection .sectionHeading {
  align-items: flex-end;
}

.projectRepositoriesSection .sectionHeading > div:first-child p {
  color: var(--ink-faint);
  margin: 5px 0 0;
  font-size: 10px;
}

.projectRepositoriesSection .sectionHeadingActions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.projectRepositoriesSection .sectionHeadingActions > span {
  background: var(--neutral-soft);
  min-width: 25px;
  height: 25px;
  color: var(--ink-soft);
  border-radius: 999px;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.pinSubprojectForm {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 14px;
  grid-template-columns: minmax(150px, .45fr) minmax(240px, 1fr);
  gap: 14px;
  margin: 17px 0;
  padding: 17px;
  display: grid;
}

.pinSubprojectForm .formError, .pinSubprojectForm .dialogActions {
  grid-column: 1 / -1;
}

.pinSubprojectForm .dialogActions {
  padding-top: 14px;
}

.repositoryTree {
  gap: 7px;
  margin-top: 15px;
  display: grid;
}

.repositoryRow {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  grid-template-columns: 20px 34px minmax(130px, .55fr) minmax(180px, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px 14px 11px 10px;
  display: grid;
}

.repositoryRow.isRoot {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.repositoryBranch {
  color: var(--ink-faint);
  text-align: center;
  font-size: 11px;
}

.repositoryIcon {
  background: var(--green-soft);
  width: 30px;
  height: 30px;
  color: var(--green-dark);
  border-radius: 9px;
  place-items: center;
  font-size: 13px;
  display: grid;
}

.repositoryRow > div {
  min-width: 0;
}

.repositoryRow strong, .repositoryRow small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.repositoryRow strong {
  font-size: 11px;
}

.repositoryRow small {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
  font-size: 8px;
  font-weight: 650;
}

.repositoryRow code {
  background: var(--neutral-soft);
  color: var(--ink-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 9px;
  overflow: hidden;
}

.projectTargetPage .chatListSection {
  margin-top: 34px;
}

.projectTargetPage .emptyState {
  min-height: 260px;
}

.chatWorkspace {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.threadRail {
  border-right: 1px solid var(--line);
  background: var(--surface-glass);
  width: 210px;
  min-width: 210px;
  padding: 13px 10px;
  overflow-y: auto;
}

.threadRailHeader {
  justify-content: space-between;
  align-items: center;
  height: 43px;
  padding: 0 5px 8px 9px;
  display: flex;
}

.threadRailHeader > a {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
}

.threadRail nav {
  gap: 2px;
  display: grid;
}

.threadLink {
  border-radius: 9px;
  padding: 9px 10px;
  display: block;
  overflow: hidden;
}

.threadLink:hover, .threadLink.active {
  background: var(--surface);
}

.threadLink.active {
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}

.threadLink span, .threadLink small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.threadLink span {
  font-size: 11px;
  font-weight: 700;
}

.threadLink small {
  color: var(--ink-faint);
  margin-top: 4px;
  font-size: 8px;
}

.chatMain {
  background: var(--canvas);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
  position: relative;
}

.chatHeader {
  border-bottom: 1px solid var(--line);
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  padding: 11px clamp(20px, 4vw, 46px);
  display: flex;
}

.chatTitle {
  min-width: 0;
}

.chatTitle h1 {
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  overflow: hidden;
}

.connectionBadge {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 20px;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 750;
  display: inline-flex;
}

.connectionBadge.live i {
  animation: 2s ease-in-out infinite pulse;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 5px #16875c1f;
  }
}

.connectionBanner {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 650;
  display: inline-flex;
}

.connectionBanner.offline {
  border-color: var(--danger-line);
  color: var(--red);
}

.mobileConnection {
  display: none;
}

.operationError {
  border-bottom: 1px solid var(--danger-line);
  background: var(--red-soft);
  color: var(--red);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px clamp(20px, 4vw, 46px);
  font-size: 11px;
  font-weight: 650;
  display: flex;
}

.operationError button {
  color: var(--red);
  background: none;
  border: 0;
  font-size: 18px;
}

.timeline {
  scroll-behavior: smooth;
  flex: 1;
  min-height: 0;
  padding: 32px clamp(18px, 5vw, 70px) 26px;
  overflow-y: auto;
}

.conversation, .chatWelcome {
  width: min(100%, 900px);
  margin: 0 auto;
}

.chatWelcome .emptyState {
  background: none;
  border: 0;
  min-height: 300px;
}

.turnGroup {
  margin-bottom: 27px;
}

.messageBubble {
  border-radius: 15px;
  width: min(78%, 690px);
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.65;
}

.messageMeta {
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 9px;
  display: flex;
}

.messageMeta time {
  opacity: .65;
}

.messageMeta .copyIconButton {
  margin: -5px -7px -5px auto;
}

.userMessage {
  background: var(--solid);
  color: var(--on-solid);
  box-shadow: var(--shadow-sm);
  border-bottom-right-radius: 4px;
  margin-left: auto;
}

.assistantMessage {
  border: 1px solid var(--line);
  background: var(--surface);
  border-bottom-left-radius: 4px;
}

.systemMessage {
  background: var(--neutral-soft);
  width: fit-content;
  color: var(--ink-soft);
  border-radius: 20px;
  margin: 12px auto;
  padding: 6px 10px;
  font-size: 9px;
}

.messageAttachments {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.messageImage {
  border: 1px solid var(--attachment-line);
  background: var(--attachment-surface);
  border-radius: 11px;
  min-height: 90px;
  display: block;
  position: relative;
  overflow: hidden;
}

.messageImage img {
  object-fit: cover;
  width: 100%;
  height: 150px;
  display: block;
}

.messageImage span {
  background: var(--image-label);
  color: var(--overlay-ink);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 7px;
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 750;
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.messageFile {
  border: 1px solid var(--attachment-line);
  background: var(--attachment-surface);
  border-radius: 11px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  display: flex;
}

.messageFile > span:last-child {
  min-width: 0;
}

.messageFile strong, .messageFile small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.messageFile strong {
  font-size: 9px;
}

.messageFile small {
  opacity: .7;
  margin-top: 2px;
  font-size: 8px;
}

.fileGlyph {
  background: var(--green-soft);
  width: 30px;
  height: 30px;
  color: var(--green-dark);
  border-radius: 8px;
  flex: none;
  place-items: center;
  font-size: 14px;
  display: grid;
}

.runCard {
  border: 1px solid var(--line);
  background: var(--surface);
  width: min(88%, 780px);
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
  margin: 13px 0 0;
  overflow: hidden;
}

.runHeader {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 57px;
  padding: 9px 13px;
  display: flex;
}

.codexIdentity {
  align-items: center;
  gap: 9px;
  display: flex;
}

.codexMark {
  background: var(--green-soft);
  width: 31px;
  height: 31px;
  color: var(--green-dark);
  border-radius: 9px;
  place-items: center;
  font-size: 11px;
  font-weight: 850;
  display: grid;
}

.codexIdentity strong, .codexIdentity small {
  display: block;
}

.codexIdentity strong {
  font-size: 11px;
}

.codexIdentity small {
  color: var(--ink-faint);
  margin-top: 2px;
  font-size: 8px;
}

.runHeaderActions {
  align-items: center;
  gap: 7px;
  display: flex;
}

.statusBadge {
  background: var(--blue-soft);
  min-height: 24px;
  color: var(--blue);
  white-space: nowrap;
  border-radius: 20px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 800;
  display: inline-flex;
}

.statusBadge.compact {
  min-height: 21px;
}

.statusBadge i {
  background: currentColor;
  width: 5px;
  height: 5px;
}

.status-running, .status-starting, .status-reconnecting, .status-recovering {
  background: var(--green-soft);
  color: var(--green-dark);
}

.status-running i, .status-starting i, .status-reconnecting i, .status-recovering i {
  animation: 1.6s ease-in-out infinite pulse;
}

.status-waiting_approval, .status-recovery_required {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-completed {
  background: var(--green-soft);
  color: var(--green-dark);
}

.status-failed {
  background: var(--red-soft);
  color: var(--red);
}

.status-cancelled {
  background: var(--neutral-soft);
  color: var(--ink-soft);
}

.agentOutput {
  padding: 17px;
  font-size: 13px;
  line-height: 1.7;
}

.markdownContent {
  overflow-wrap: anywhere;
  min-width: 0;
  line-height: 1.7;
}

.markdownContent > :first-child {
  margin-top: 0;
}

.markdownContent > :last-child {
  margin-bottom: 0;
}

.markdownContent p {
  margin: 0 0 .85em;
}

.markdownContent h1, .markdownContent h2, .markdownContent h3, .markdownContent h4, .markdownContent h5, .markdownContent h6 {
  color: var(--ink);
  letter-spacing: -.025em;
  margin: 1.35em 0 .55em;
  font-weight: 800;
  line-height: 1.25;
}

.markdownContent h1 {
  border-bottom: 1px solid var(--line);
  padding-bottom: .3em;
  font-size: 1.55em;
}

.markdownContent h2 {
  border-bottom: 1px solid var(--line);
  padding-bottom: .25em;
  font-size: 1.35em;
}

.markdownContent h3 {
  font-size: 1.18em;
}

.markdownContent h4 {
  font-size: 1.05em;
}

.markdownContent h5, .markdownContent h6 {
  font-size: 1em;
}

.markdownContent strong {
  color: var(--ink);
  font-weight: 800;
}

.markdownContent ul, .markdownContent ol {
  margin: 0 0 .9em;
  padding-left: 1.65em;
}

.markdownContent li {
  padding-left: .18em;
}

.markdownContent li + li {
  margin-top: .28em;
}

.markdownContent li > ul, .markdownContent li > ol {
  margin: .28em 0 0;
}

.markdownContent a {
  color: var(--green-dark);
  text-underline-offset: .18em;
  font-weight: 650;
  -webkit-text-decoration: underline #0d6d4959;
  text-decoration: underline #0d6d4959;
}

.markdownContent a:hover {
  text-decoration-color: currentColor;
}

.markdownContent code {
  border: 1px solid var(--line);
  background: var(--code-inline);
  color: var(--code-inline-ink);
  border-radius: 5px;
  padding: .12em .35em;
  font-size: .88em;
}

.markdownContent pre {
  border: 1px solid var(--code-line);
  background: var(--code-surface);
  max-width: 100%;
  color: var(--code-ink);
  white-space: pre;
  border-radius: 9px;
  margin: .9em 0;
  padding: 13px 14px;
  font-size: .85em;
  line-height: 1.6;
  overflow-x: auto;
}

.markdownContent pre code {
  color: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.markdownContent blockquote {
  border-left: 3px solid var(--green);
  background: var(--green-soft);
  color: var(--ink-soft);
  margin: .9em 0;
  padding: .65em .9em;
}

.markdownContent blockquote > :last-child {
  margin-bottom: 0;
}

.markdownContent hr {
  background: var(--line);
  border: 0;
  height: 1px;
  margin: 1.25em 0;
}

.markdownContent table {
  border-spacing: 0;
  border-collapse: collapse;
  width: max-content;
  max-width: 100%;
  margin: .9em 0;
  font-size: .9em;
  display: block;
  overflow-x: auto;
}

.markdownContent th, .markdownContent td {
  border: 1px solid var(--line-strong);
  text-align: left;
  vertical-align: top;
  padding: .5em .7em;
}

.markdownContent th {
  background: var(--code-inline);
  color: var(--ink);
  font-weight: 800;
}

.markdownContent tr:nth-child(2n) td {
  background: var(--surface-soft);
}

.markdownContent input[type="checkbox"] {
  accent-color: var(--green);
  margin: 0 .45em 0 0;
}

.runPlaceholder {
  color: var(--ink-soft);
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 17px;
  font-size: 11px;
  display: flex;
}

.typingDots {
  gap: 3px;
  display: inline-flex;
}

.typingDots i {
  background: var(--green);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 1s ease-in-out infinite typing;
}

.typingDots i:nth-child(2) {
  animation-delay: .12s;
}

.typingDots i:nth-child(3) {
  animation-delay: .24s;
}

@keyframes typing {
  50% {
    opacity: .25;
    transform: translateY(-2px);
  }
}

.runItems {
  border-top: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
  display: grid;
}

.runItem {
  background: var(--surface);
}

.runItem summary {
  cursor: pointer;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 8px 13px;
  list-style: none;
  display: flex;
}

.runItem summary::-webkit-details-marker {
  display: none;
}

.itemState {
  background: var(--neutral-soft);
  width: 23px;
  height: 23px;
  color: var(--ink-soft);
  border-radius: 7px;
  flex: none;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.itemState.busy {
  background: var(--green-soft);
  color: var(--green-dark);
  animation: 1.8s infinite pulse;
}

.runItem summary > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.runItem summary strong, .runItem summary small {
  display: block;
}

.runItem summary strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  overflow: hidden;
}

.runItem summary small {
  color: var(--ink-faint);
  margin-top: 2px;
  font-size: 8px;
}

.detailsChevron {
  color: var(--ink-faint);
  transition: transform .15s;
}

.runItem[open] .detailsChevron {
  transform: rotate(180deg);
}

.runItemBody {
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 12px 13px;
  font-size: 11px;
  line-height: 1.55;
}

.runItemBody > p {
  margin: 0;
}

.commandPreview {
  border: 1px solid var(--code-line);
  background: var(--code-surface);
  color: var(--code-ink);
  border-radius: 9px;
  overflow: hidden;
}

.commandPreview > div {
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}

.commandPreview span {
  color: var(--code-accent);
  -webkit-user-select: none;
  user-select: none;
}

.commandPreview code {
  white-space: pre-wrap;
  font-size: 10px;
  overflow-x: auto;
}

.commandPreview small {
  border-top: 1px solid var(--code-line);
  color: var(--ink-faint);
  padding: 6px 12px;
  font-size: 8px;
  display: block;
}

.terminalOutput, .diffOutput, .diffDetails pre {
  background: var(--code-surface);
  max-height: 330px;
  color: var(--code-ink);
  white-space: pre-wrap;
  border-radius: 8px;
  margin: 9px 0 0;
  padding: 11px;
  font-size: 9px;
  line-height: 1.55;
  overflow: auto;
}

.diffOutput, .diffDetails pre {
  background: var(--diff-surface);
  color: var(--ink);
}

.approvalStack {
  border-top: 1px solid var(--line);
  gap: 9px;
  padding: 12px;
  display: grid;
}

.approvalCard {
  border: 1px solid var(--amber-line);
  background: var(--approval-surface);
  border-radius: 12px;
  padding: 14px;
}

.approvalHeader {
  align-items: center;
  gap: 10px;
  display: flex;
}

.approvalIcon {
  background: var(--amber-soft);
  width: 31px;
  height: 31px;
  color: var(--amber);
  border-radius: 9px;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  display: grid;
}

.approvalHeader h3 {
  margin: 0;
  font-size: 13px;
}

.approvalReason {
  color: var(--amber-detail);
  margin: 11px 0;
  font-size: 11px;
  line-height: 1.55;
}

.approvalCard .commandPreview {
  margin-top: 11px;
}

.approvalFacts {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 11px 0 0;
  display: grid;
}

.approvalFacts div {
  background: var(--surface);
  border-radius: 8px;
  padding: 8px;
}

.approvalFacts dt {
  color: var(--ink-faint);
  text-transform: uppercase;
  font-size: 8px;
}

.approvalFacts dd {
  margin: 3px 0 0;
  font-family: monospace;
  font-size: 10px;
}

.diffDetails {
  margin-top: 10px;
}

.diffDetails summary {
  color: var(--green-dark);
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.sessionWarning {
  color: var(--amber-detail);
  margin: 10px 0 0;
  font-size: 9px;
  line-height: 1.45;
}

.approvalActions {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
  display: flex;
}

.approvalActions .secondaryButton, .approvalActions .approvalAccept {
  min-height: 34px;
  padding: 0 11px;
  font-size: 10px;
}

.approvalAccept {
  background: var(--green);
  color: var(--on-green);
}

.approvalResolved {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.approvalResolved > span {
  background: var(--green-soft);
  width: 26px;
  height: 26px;
  color: var(--green-dark);
  border-radius: 50%;
  place-items: center;
  font-size: 10px;
  display: grid;
}

.approvalResolved strong, .approvalResolved p {
  margin: 0;
  display: block;
}

.approvalResolved strong {
  font-size: 10px;
}

.approvalResolved p {
  color: var(--ink-faint);
  margin-top: 3px;
  font-size: 8px;
}

.runFailure {
  border-top: 1px solid var(--danger-line);
  background: var(--red-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.runFailure strong, .runFailure p {
  margin: 0;
}

.runFailure strong {
  color: var(--red);
  font-size: 10px;
}

.runFailure p {
  color: var(--danger-detail);
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.45;
}

.recoveryRequired {
  border-top: 1px solid var(--amber-line);
  background: var(--amber-soft);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.recoveryRequired strong, .recoveryRequired p {
  margin: 0;
}

.recoveryRequired strong {
  color: var(--amber);
  font-size: 10px;
}

.recoveryRequired p {
  color: var(--amber-detail);
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.45;
}

.runTokenUsage {
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  flex-wrap: wrap;
  gap: 6px 13px;
  margin: 0;
  padding: 8px 13px;
  font-size: 8px;
  display: flex;
}

.runTokenUsage div {
  align-items: baseline;
  gap: 4px;
  display: flex;
}

.runTokenUsage dt, .runTokenUsage dd {
  margin: 0;
}

.runTokenUsage dd {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.runTokenUsage .total {
  margin-left: auto;
}

.runTokenUsage .total dd {
  color: var(--ink);
}

.runFooter {
  border-top: 1px solid var(--line);
  min-height: 39px;
  color: var(--ink-faint);
  justify-content: space-between;
  align-items: center;
  padding: 5px 13px;
  font-size: 8px;
  display: flex;
}

.copyIconButton {
  width: 28px;
  height: 28px;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: 8px;
  flex: none;
  place-items: center;
  padding: 0;
  transition: background .14s, color .14s;
  display: inline-grid;
}

.copyIconButton:hover {
  background: var(--neutral-soft);
  color: var(--ink);
}

.copyIconButton:active {
  transform: translateY(1px);
}

.copyIconButton.isCopied {
  color: var(--green-dark);
}

.copyIconButton svg {
  width: 15px;
  height: 15px;
}

.composerWrap {
  background: linear-gradient(to top, var(--canvas) 65%, var(--composer-fade));
  flex: none;
  padding: 8px clamp(18px, 5vw, 70px) 14px;
}

.composer {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  width: min(100%, 900px);
  box-shadow: var(--shadow-float);
  border-radius: 16px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 auto;
  padding: 8px 9px 8px 13px;
  display: flex;
}

.composer:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #16875c17, var(--shadow-float);
}

.composerWrap.isDragging .composer {
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 0 0 4px #16875c21, var(--shadow-float);
}

.composer textarea {
  resize: none;
  field-sizing: content;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  width: 100%;
  min-height: 38px;
  max-height: 150px;
  padding: 8px 2px;
  font-size: 13px;
  line-height: 1.55;
}

.composer textarea::placeholder {
  color: var(--placeholder);
}

.composerToolbar {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  display: flex;
}

.composerTools {
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.attachmentButton {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  width: 38px;
  height: 38px;
  color: var(--ink-soft);
  border-radius: 11px;
  flex: none;
  place-items: center;
  font-size: 20px;
  display: grid;
}

.attachmentButton:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green-dark);
}

.chatSettingsPicker {
  min-width: 0;
  max-width: 100%;
  position: relative;
}

.chatSettingsTrigger {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  min-width: 0;
  max-width: 210px;
  height: 38px;
  color: var(--ink-soft);
  border-radius: 11px;
  align-items: center;
  gap: 6px;
  padding: 0 9px 0 6px;
  font-size: 10px;
  font-weight: 720;
  display: flex;
}

.chatSettingsTrigger:hover:not(:disabled), .chatSettingsTrigger[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: var(--neutral-soft);
  color: var(--ink);
}

.chatSettingsTrigger:disabled {
  cursor: not-allowed;
}

.chatSettingsMark {
  background: var(--green-soft);
  width: 24px;
  height: 24px;
  color: var(--green-dark);
  border-radius: 8px;
  flex: none;
  place-items: center;
  font-size: 8px;
  font-weight: 900;
  display: grid;
}

.chatSettingsModel {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.chatSettingsSeparator, .chatSettingsChevron {
  color: var(--ink-faint);
}

.chatSettingsChevron {
  margin-left: 1px;
  font-size: 13px;
  transform: translateY(-1px);
}

.settingsSpinner {
  flex: none;
  width: 11px;
  height: 11px;
}

.chatSettingsPopover {
  z-index: 35;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  width: min(360px, 100vw - 28px);
  max-height: min(430px, 55vh);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
  padding: 12px;
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  overflow-y: auto;
}

.chatSettingsSection {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.chatSettingsSection + .chatSettingsSection {
  border-top: 1px solid var(--line);
  margin-top: 13px;
  padding-top: 11px;
}

.chatSettingsSection legend {
  color: var(--ink-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0;
  font-size: 8px;
  font-weight: 820;
}

.modelChoiceGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}

.modelChoice {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  min-width: 0;
  min-height: 58px;
  color: var(--ink-soft);
  text-align: left;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  display: flex;
  position: relative;
}

.modelChoice:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--ink);
}

.modelChoice.selected {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--ink);
}

.modelChoiceMark {
  background: var(--neutral-soft);
  width: 27px;
  height: 27px;
  color: var(--ink);
  border-radius: 8px;
  flex: none;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  display: grid;
}

.modelChoice.selected .modelChoiceMark {
  background: var(--green);
  color: var(--on-green);
}

.modelChoice strong, .modelChoice small {
  display: block;
}

.modelChoice strong {
  font-size: 9px;
}

.modelChoice small {
  color: var(--ink-faint);
  margin-top: 2px;
  font-size: 7px;
}

.choiceCheck {
  color: var(--green-dark);
  font-size: 8px;
  font-weight: 900;
  position: absolute;
  top: 4px;
  right: 5px;
}

.effortChoiceGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.effortChoiceGrid button {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  min-height: 34px;
  color: var(--ink-soft);
  border-radius: 9px;
  font-size: 9px;
  font-weight: 720;
}

.effortChoiceGrid button:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--ink);
}

.effortChoiceGrid button.selected {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-dark);
}

.composerAttachments {
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px;
  padding: 1px 1px 8px;
  display: grid;
}

.composerAttachment {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  display: flex;
}

.composerAttachment img {
  object-fit: cover;
  border-radius: 7px;
  flex: none;
  width: 38px;
  height: 38px;
}

.composerAttachment .fileGlyph {
  width: 38px;
  height: 38px;
}

.attachmentCopy {
  flex: 1;
  min-width: 0;
}

.attachmentCopy strong, .attachmentCopy small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.attachmentCopy strong {
  font-size: 9px;
}

.attachmentCopy small {
  color: var(--ink-faint);
  margin-top: 3px;
  font-size: 7px;
}

.composerAttachment button {
  width: 24px;
  height: 24px;
  color: var(--ink-faint);
  background: none;
  border: 0;
  border-radius: 7px;
  flex: none;
  place-items: center;
  font-size: 16px;
  display: grid;
}

.composerAttachment button:hover {
  background: var(--red-soft);
  color: var(--red);
}

.sendButton {
  background: var(--green);
  width: 38px;
  height: 38px;
  color: var(--on-green);
  border: 0;
  border-radius: 11px;
  flex: none;
  place-items: center;
  font-size: 21px;
  font-weight: 650;
  display: grid;
}

.sendButton:hover:not(:disabled) {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.composerWrap > p {
  color: var(--ink-faint);
  text-align: center;
  margin: 7px auto 0;
  font-size: 8px;
}

@media (max-width: 1050px) {
  .threadRail {
    width: 175px;
    min-width: 175px;
  }

  .pageSurface {
    padding-left: 35px;
    padding-right: 35px;
  }

  .analyticsKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analyticsBreakdowns {
    grid-template-columns: 1fr;
  }

  .workspaceUsagePanel {
    order: 2;
  }

  .skeletonKpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .skeletonColumns {
    grid-template-columns: 1fr;
  }

  .projectHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .inlineChatForm {
    width: 100%;
  }

  .windowSizeControl > span:first-child, .windowSizeControl output {
    display: none;
  }

  .windowDimensionSlider input {
    width: 58px;
  }
}

@media (max-width: 820px) {
  .authPanel {
    padding: 28px 24px;
  }

  .mobileHeader {
    border-bottom: 1px solid var(--line);
    background: var(--header-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    justify-content: space-between;
    align-items: center;
    height: 58px;
    padding: 0 13px;
    display: flex;
  }

  .sidebar {
    z-index: 50;
    width: min(88vw, 300px);
    min-width: 0;
    box-shadow: var(--shadow-lg);
    transition: transform .22s;
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-105%);
  }

  .sidebarCollapseButton {
    display: none;
  }

  .sidebar.isOpen {
    transform: translateX(0);
  }

  .navBackdrop {
    z-index: 40;
    background: var(--backdrop);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 0;
    position: fixed;
    inset: 0;
  }

  .appContent {
    flex-direction: column;
    display: flex;
  }

  .pageSurface, .chatWorkspace {
    flex: 1;
    min-height: 0;
  }

  .pageSurface {
    padding: 30px 20px 50px;
  }

  .projectBoard {
    flex: 1;
    min-height: 0;
    padding: 8px;
  }

  .projectBoardHeader {
    min-height: 55px;
    padding: 0 2px 8px;
  }

  .projectBoardHeader h1 {
    font-size: 19px;
  }

  .projectBoardHeader code {
    max-width: 48vw;
  }

  .workspaceBoardHeader > div:first-child {
    display: block;
  }

  .workspaceBoardHeader p {
    display: none;
  }

  .projectBoardHeader .primaryButton {
    min-height: 36px;
    padding: 0 11px;
    font-size: 11px;
  }

  .windowSizeControl {
    display: none;
  }

  .chatWindowGrid {
    display: block;
    overflow-y: auto;
  }

  .chatWindow {
    height: calc(100vh - 132px);
    margin-bottom: 8px;
  }

  .chatWindow.maximized {
    height: 100%;
  }

  .pageHeader {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
  }

  .pageHeader .primaryButton {
    width: 100%;
  }

  .analyticsHeader {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 22px;
  }

  .analyticsHeaderActions {
    justify-content: flex-start;
    width: 100%;
  }

  .analyticsModelFilters {
    flex: 310px;
  }

  .analyticsModelFilters select {
    flex: 1;
    min-width: 0;
  }

  .analyticsRangeControl {
    width: 100%;
  }

  .analyticsRangeControl button {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
  }

  .analyticsPeriod {
    flex-direction: column;
    align-items: flex-start;
  }

  .analyticsKpi {
    min-height: 132px;
    padding: 17px;
  }

  .usageChart {
    height: 270px;
  }

  .projectGrid {
    grid-template-columns: 1fr;
  }

  .projectTargetHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .projectTargetHeader .primaryButton {
    width: 100%;
  }

  .projectRepositoriesSection .sectionHeading {
    flex-direction: column;
    align-items: flex-start;
  }

  .pinSubprojectForm {
    grid-template-columns: 1fr;
  }

  .repositoryRow {
    grid-template-columns: 18px 32px 1fr;
  }

  .repositoryRow code {
    grid-column: 2 / -1;
  }

  .threadRail {
    display: none;
  }

  .chatHeader {
    min-height: 60px;
    padding: 9px 16px;
  }

  .chatHeader > .connectionBanner {
    display: none;
  }

  .mobileConnection {
    padding: 6px 12px 0;
    display: block;
  }

  .mobileConnection .connectionBanner {
    width: 100%;
  }

  .timeline {
    padding: 24px 14px 18px;
  }

  .composerWrap {
    padding: 7px 10px 10px;
  }

  .composerWrap > p {
    display: none;
  }

  .messageBubble, .runCard {
    width: 94%;
  }
}

@media (max-width: 520px) {
  .authCard h1 {
    margin-top: 36px;
    font-size: 31px;
  }

  .pageHeader h1 {
    font-size: 40px;
  }

  .pageHeaderCopy > p {
    font-size: 12px;
  }

  .analyticsHeader h1 {
    font-size: 40px;
  }

  .analyticsKpis {
    grid-template-columns: 1fr;
  }

  .analyticsKpi {
    min-height: 112px;
  }

  .analyticsSectionHeading {
    flex-direction: column;
    align-items: flex-start;
  }

  .chartLegend {
    justify-content: flex-start;
  }

  .trendPanel {
    min-height: 370px;
    padding: 18px 12px 14px;
  }

  .usageChart {
    height: 245px;
  }

  .chartTooltip {
    min-width: 190px;
    top: 3px;
  }

  .projectUsageRow summary {
    grid-template-columns: 36px minmax(0, 1fr) 18px;
  }

  .usageAmount {
    text-align: left;
    grid-area: 2 / 2;
  }

  .usageChevron {
    grid-area: 1 / 3 / span 2;
  }

  .projectTargetUsage {
    margin-left: 14px;
  }

  .targetUsageRow {
    grid-template-columns: 13px minmax(0, 1fr) auto;
  }

  .targetRuns {
    display: none;
  }

  .projectsUsagePanel, .workspaceUsagePanel {
    padding: 17px 14px;
  }

  .skeletonKpis {
    grid-template-columns: 1fr;
  }

  .projectCard {
    padding: 15px;
  }

  .projectCardTitle {
    flex-direction: column;
    align-items: flex-start;
  }

  .projectHeader {
    margin-bottom: 28px;
  }

  .projectIdentity {
    align-items: flex-start;
  }

  .projectIdentity h1 {
    font-size: 32px;
  }

  .projectHeroMark {
    width: 49px;
    height: 49px;
  }

  .inlineChatForm {
    flex-direction: column;
  }

  .inlineChatForm .primaryButton {
    width: 100%;
  }

  .chatListItem .statusBadge {
    display: none;
  }

  .runHeader {
    align-items: flex-start;
  }

  .runHeaderActions {
    flex-direction: column;
    align-items: flex-end;
  }

  .approvalActions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .approvalActions button {
    width: 100%;
  }

  .runFailure, .recoveryRequired {
    flex-direction: column;
    align-items: stretch;
  }

  .runFailure .secondaryButton, .recoveryRequired .secondaryButton, .messageBubble, .runCard {
    width: 100%;
  }

  .messageAttachments, .composerAttachments {
    grid-template-columns: 1fr;
  }

  .wideModelName {
    display: none;
  }

  .chatSettingsTrigger {
    max-width: 145px;
  }

  .dialogBackdrop {
    align-items: end;
    padding: 0;
  }

  .workspaceDialog, .compactDialog {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-height: calc(100dvh - 22px);
  }

  .dialogHeader {
    min-height: 68px;
    padding: 13px 15px 12px 19px;
  }

  .dialogHeader h2 {
    font-size: 19px;
  }

  .dialogTabs {
    margin: 12px 14px 0;
  }

  .dialogBody {
    max-height: calc(100dvh - 160px);
    padding: 17px 14px;
  }

  .dialogActions {
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .dialogActions button {
    width: 100%;
  }

  .existingChatList > button {
    align-items: flex-start;
  }

  .existingChatList > button b {
    white-space: normal;
    text-align: right;
    max-width: 82px;
  }
}

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

/* [project]/app/mobile.css [app-client] (css) */
.sidebarCloseButton {
  display: none;
}

.mobileHeader .iconButton svg, .sidebarCloseButton svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 820px) {
  .appFrame {
    height: var(--app-viewport-height, 100dvh);
  }

  .appContent {
    min-height: 0;
  }

  .mobileHeader {
    height: calc(56px + env(safe-area-inset-top));
    min-height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    flex: none;
  }

  .iconButton, .themeToggle {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .primaryButton, .secondaryButton, .smallButton, .textButton, .newProjectButton {
    min-height: 44px;
    font-size: 14px;
  }

  .field, .field input, .field select, .formStack, .projectForm {
    min-width: 0;
  }

  .field input, .field select, .inlineChatForm input, textarea {
    font-size: 16px;
  }

  .field > span {
    font-size: 14px;
  }

  .field small {
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  .sidebar {
    width: min(100vw - 32px, 340px);
    height: var(--app-viewport-height, 100dvh);
    visibility: hidden;
    pointer-events: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    transition: transform .22s, visibility .22s;
  }

  .sidebar.isOpen {
    visibility: visible;
    pointer-events: auto;
  }

  .sidebarHeader {
    flex: none;
    height: auto;
    min-height: 64px;
    padding: 10px 14px;
  }

  .sidebarCloseButton {
    display: inline-grid;
  }

  .sidebar .newProjectButton {
    flex: none;
  }

  .sidebarNav {
    overscroll-behavior-y: contain;
  }

  .navSectionTitle {
    min-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 11px;
  }

  .navSectionTitle a {
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    display: inline-flex;
  }

  .projectNavItem {
    min-height: 60px;
  }

  .projectNavCopy strong, .accountCopy strong, .analyticsNavItem .projectNavCopy strong {
    font-size: 14px;
  }

  .projectNavCopy small, .accountCopy small {
    font-size: 12px;
  }

  .sidebarError, .sidebarEmpty {
    font-size: 13px;
  }

  .accountTrigger, .accountMenuItem {
    min-height: 48px;
  }

  .pageSurface {
    min-width: 0;
    height: auto;
    padding: 24px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overscroll-behavior-y: contain;
  }

  .pageHeader {
    gap: 18px;
    margin-bottom: 24px;
  }

  .pageHeader h1 {
    overflow-wrap: anywhere;
    font-size: clamp(30px, 8vw, 40px);
    line-height: 1.1;
  }

  .pageHeaderCopy > p {
    font-size: 14px;
  }

  .compactHeader {
    margin-top: 0;
  }

  .projectForm {
    gap: 20px;
    padding: 20px;
  }

  .projectCard, .workspaceCardLink {
    gap: 12px;
  }

  .projectCardTitle {
    min-width: 0;
  }

  .projectCard h2 {
    max-width: 100%;
  }

  .projectCard code, .projectCardMeta, .workspaceCard p, .workspaceChatCount {
    font-size: 12px;
  }

  .projectTargetHeader {
    gap: 20px;
  }

  .projectIdentity, .projectIdentity > div {
    min-width: 0;
    max-width: 100%;
  }

  .projectIdentity h1 {
    overflow-wrap: anywhere;
    font-size: 30px;
  }

  .projectIdentity code {
    font-size: 12px;
  }

  .projectTargetHint p, .projectRepositoriesSection .sectionHeading > div:first-child p {
    font-size: 13px;
  }

  .sectionHeading {
    gap: 12px;
  }

  .sectionHeading h2 {
    overflow-wrap: anywhere;
    font-size: 22px;
  }

  .repositoryRow {
    grid-template-columns: 18px 32px minmax(0, 1fr);
  }

  .repositoryRow strong {
    font-size: 14px;
  }

  .repositoryRow small {
    font-size: 10px;
  }

  .repositoryRow code {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  .chatListItem {
    padding: 14px 12px;
  }

  .chatListCopy strong {
    font-size: 14px;
  }

  .chatListCopy small {
    font-size: 12px;
  }

  .formError, .errorPanel p {
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  .emptyState {
    min-height: 260px;
    padding: 28px 18px;
  }

  .emptyState h2 {
    font-size: 24px;
  }

  .authPage {
    min-height: 100dvh;
  }

  .authPanel {
    padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  .authSwitch {
    font-size: 14px;
  }

  .authSwitch a {
    align-items: center;
    min-height: 44px;
    display: inline-flex;
  }
}

@media (max-width: 520px) {
  .formActions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .formActions .primaryButton {
    grid-row: 1;
  }

  .workspaceCard {
    gap: 8px;
    padding: 14px;
  }

  .projectCardMark {
    width: 40px;
    height: 40px;
  }

  .workspaceCardLink {
    gap: 10px;
  }

  .errorPanel {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
}

@media (max-width: 820px) {
  .appFrame[data-compact-viewport] .mobileHeader {
    height: calc(48px + env(safe-area-inset-top));
    min-height: calc(48px + env(safe-area-inset-top));
  }
}

/* [project]/components/ChatWorkspace.mobile.css [app-client] (css) */
.chatPane {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}

.chatPane .timeline {
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  min-width: 0;
}

.chatPane :is(.conversation, .turnGroup, .messageBubble, .runCard, .runItems, .runItem, .runItemBody, .approvalStack, .approvalCard, .composerWrap, .composer) {
  min-width: 0;
  max-width: 100%;
}

.chatPane :is(.preWrap, .systemMessage, .operationError, .commandPreview small, .approvalFacts dd, .approvalResolved, .runFailure, .recoveryRequired) {
  overflow-wrap: anywhere;
}

.chatPane :is(.codexIdentity, .codexIdentity > div, .operationError > span) {
  min-width: 0;
}

.chatPane :is(.codexMark, .approvalIcon) {
  flex: none;
}

.chatPane :is(.terminalOutput, .diffOutput, .diffDetails pre, .markdownContent pre) {
  overscroll-behavior-x: contain;
  min-width: 0;
  max-width: 100%;
}

.chatPane .markdownContent img {
  max-width: 100%;
  height: auto;
}

.chatSettingsPopoverHeader {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
}

.chatSettingsPopoverHeader button {
  background: var(--surface-soft);
  width: 32px;
  height: 32px;
  color: var(--ink-soft);
  border: 0;
  border-radius: 8px;
  flex: none;
  place-items: center;
  font-size: 21px;
  display: grid;
}

.chatPane .latestMessagesBar {
  flex: none;
  justify-content: center;
  padding: 5px 10px;
  display: flex;
}

@media (max-width: 820px) {
  .chatPane .chatPaneStatus {
    min-height: 28px;
    padding: 3px 12px;
  }

  .chatPane .chatPaneConnection {
    max-width: 100%;
  }

  .chatPane .chatPaneConnection > span, .chatPane .chatPaneStatus .connectionBanner {
    white-space: normal;
    font-size: 11px;
  }

  .chatPane .chatPaneStatus .connectionBanner {
    line-height: 1.4;
  }

  .chatPane .timeline {
    padding: 16px 12px 18px;
  }

  .chatPane .chatWelcome .emptyState {
    min-height: 150px;
  }

  .chatPane .turnGroup {
    margin-bottom: 20px;
  }

  .chatPane :is(.messageBubble, .runCard) {
    width: 100%;
  }

  .chatPane .messageBubble {
    padding: 12px 13px;
    font-size: 15px;
    line-height: 1.6;
  }

  .chatPane .messageMeta {
    min-height: 28px;
    font-size: 11px;
  }

  .chatPane .messageMeta .copyIconButton {
    margin: -5px -5px -5px auto;
  }

  .chatPane .systemMessage {
    font-size: 12px;
    line-height: 1.5;
  }

  .chatPane .messageFile {
    min-height: 56px;
  }

  .chatPane .messageFile strong {
    font-size: 12px;
  }

  .chatPane :is(.messageFile small, .messageImage span) {
    font-size: 11px;
  }

  .chatPane .messageImage span {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 12px);
    overflow: hidden;
  }

  .chatPane .runHeader {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .chatPane .codexIdentity {
    flex: 145px;
  }

  .chatPane .codexIdentity strong {
    font-size: 13px;
  }

  .chatPane .codexIdentity small {
    overflow-wrap: anywhere;
    font-size: 11px;
    line-height: 1.45;
  }

  .chatPane .runHeaderActions {
    flex-flow: wrap;
    align-items: center;
    gap: 8px;
  }

  .chatPane .statusBadge {
    min-height: 28px;
    font-size: 11px;
  }

  .chatPane .agentOutput {
    padding: 14px 12px;
    font-size: 15px;
    line-height: 1.6;
  }

  .chatPane .runPlaceholder {
    padding: 14px 12px;
    font-size: 13px;
    line-height: 1.5;
  }

  .chatPane .markdownContent pre {
    padding: 10px;
    font-size: 12px;
  }

  .chatPane .markdownContent table {
    overscroll-behavior-x: contain;
    font-size: 13px;
  }

  .chatPane .markdownContent :is(th, td) {
    min-width: 120px;
    max-width: 320px;
  }

  .chatPane .runItem summary {
    min-height: 52px;
    padding: 9px 12px;
  }

  .chatPane .runItem summary strong {
    font-size: 13px;
  }

  .chatPane .runItem summary small {
    font-size: 11px;
  }

  .chatPane .runItemBody {
    padding: 12px;
    font-size: 14px;
  }

  .chatPane .commandPreview code {
    overflow-wrap: anywhere;
    min-width: 0;
    font-size: 12px;
  }

  .chatPane .commandPreview small {
    font-size: 11px;
  }

  .chatPane :is(.terminalOutput, .diffOutput, .diffDetails pre) {
    white-space: pre;
    font-size: 12px;
  }

  .chatPane .approvalStack {
    padding: 10px;
  }

  .chatPane .approvalCard {
    padding: 12px;
  }

  .chatPane .approvalHeader h3 {
    font-size: 15px;
  }

  .chatPane .approvalReason {
    font-size: 14px;
  }

  .chatPane :is(.approvalFacts dt, .sessionWarning, .approvalResolved p) {
    font-size: 12px;
    line-height: 1.5;
  }

  .chatPane :is(.approvalFacts dd, .approvalResolved strong) {
    font-size: 13px;
  }

  .chatPane .diffDetails summary {
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    display: flex;
  }

  .chatPane .approvalActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    display: grid;
  }

  .chatPane :is(.runFailure, .recoveryRequired) {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .chatPane :is(.runFailure strong, .recoveryRequired strong) {
    font-size: 14px;
  }

  .chatPane :is(.runFailure p, .recoveryRequired p) {
    font-size: 13px;
    line-height: 1.5;
  }

  .chatPane .runTokenUsage {
    gap: 8px 12px;
    padding: 10px 12px;
    font-size: 11px;
  }

  .chatPane .runFooter {
    gap: 8px;
    padding: 5px 12px;
    font-size: 11px;
  }

  .chatPane :is(.smallButton, .secondaryButton, .textButton, .approvalAccept) {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.35;
  }

  .chatPane .copyIconButton {
    width: 44px;
    height: 44px;
  }

  .chatPane .operationError {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.45;
  }

  .chatPane .operationError button {
    flex: none;
    width: 44px;
    height: 44px;
  }

  .chatPane .composerWrap {
    padding: 7px 10px 10px;
  }

  .chatPane .composer {
    gap: 6px;
    padding: 8px 9px;
  }

  .chatPane .composer textarea {
    min-height: 48px;
    max-height: clamp(48px, 23dvh, 150px);
    padding: 7px 3px;
    font-size: 16px;
    line-height: 1.5;
  }

  .chatPane .composerToolbar {
    gap: 6px;
    position: relative;
  }

  .chatPane .composerTools {
    gap: 6px;
  }

  .chatPane :is(.attachmentButton, .sendButton) {
    width: 44px;
    height: 44px;
  }

  .chatPane .chatSettingsPicker {
    flex: 0 auto;
    position: static;
  }

  .chatPane .chatSettingsTrigger {
    gap: 5px;
    max-width: 100%;
    height: 44px;
    padding: 0 8px;
    font-size: 12px;
  }

  .chatPane .chatSettingsMark, .chatPane .wideModelName {
    display: none;
  }

  .chatPane .chatSettingsPopover {
    width: auto;
    max-height: min(430px, calc(var(--app-viewport-height, 100dvh) * .52));
    overscroll-behavior: contain;
    padding: 12px;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
  }

  .chatPane .chatSettingsPopoverHeader {
    font-size: 14px;
  }

  .chatPane .chatSettingsPopoverHeader button {
    width: 44px;
    height: 44px;
  }

  .chatPane .chatSettingsSection legend {
    font-size: 11px;
  }

  .chatPane .modelChoice {
    min-height: 60px;
  }

  .chatPane .modelChoice strong {
    font-size: 12px;
  }

  .chatPane :is(.modelChoice small, .choiceCheck) {
    font-size: 11px;
  }

  .chatPane .effortChoiceGrid button {
    min-height: 44px;
    padding: 6px 3px;
    font-size: 12px;
  }

  .chatPane .composerAttachments {
    overscroll-behavior-x: contain;
    grid-template-columns: none;
    grid-auto-columns: minmax(200px, 84%);
    grid-auto-flow: column;
    padding-bottom: 8px;
    overflow-x: auto;
  }

  .chatPane .composerAttachment button {
    width: 44px;
    height: 44px;
  }

  .chatPane .attachmentCopy strong {
    font-size: 12px;
  }

  .chatPane .attachmentCopy small {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .chatPane .approvalActions, .chatPane .approvalFacts, .chatPane .messageAttachments {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .appFrame[data-compact-viewport] .chatPane .chatPaneStatus {
    display: none;
  }

  .appFrame[data-compact-viewport] .chatPane .timeline {
    padding-block: 6px;
  }

  .appFrame[data-compact-viewport] .chatPane .composerWrap {
    padding-block: 5px;
  }

  .appFrame[data-compact-viewport] .chatPane .composer {
    gap: 4px;
    padding-block: 6px;
  }

  .appFrame[data-compact-viewport] .chatPane .composer textarea {
    min-height: 44px;
    max-height: 60px;
    padding-block: 5px;
  }

  .appFrame[data-compact-viewport] .chatPane .composerAttachment {
    gap: 6px;
    padding-block: 3px;
  }

  .appFrame[data-compact-viewport] .chatPane .composerAttachment :is(img, .fileGlyph) {
    display: none;
  }
}

/* [project]/components/AnalyticsDashboard.mobile.css [app-client] (css) */
.analyticsPage .usageChartMobileControls, .analyticsPage .chartMobileActivePoint {
  display: none;
}

@media (max-width: 820px) {
  .analyticsPage, .analyticsPage .analyticsHeader, .analyticsPage .pageHeaderCopy, .analyticsPage .analyticsHeaderActions, .analyticsPage .analyticsContent {
    min-width: 0;
  }

  .analyticsPage .analyticsHeader {
    gap: 18px;
    margin-bottom: 18px;
  }

  .analyticsPage .analyticsHeaderActions {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    display: grid;
  }

  .analyticsPage .analyticsModelFilters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    display: grid;
  }

  .analyticsPage .analyticsModelFilters select {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-left: 11px;
    font-size: 16px;
  }

  .analyticsPage .analyticsRangeControl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    display: grid;
  }

  .analyticsPage .analyticsRangeControl button {
    min-height: 44px;
    font-size: 14px;
  }

  .analyticsPage .analyticsPeriod {
    overflow-wrap: anywhere;
    gap: 7px;
    line-height: 1.5;
  }

  .analyticsPage .analyticsPeriod svg {
    flex: none;
  }

  .analyticsPage .analyticsKpis, .analyticsPage .skeletonKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analyticsPage .analyticsSectionHeading {
    flex-direction: column;
    gap: 12px;
  }

  .analyticsPage .analyticsSectionHeading h2 {
    overflow-wrap: anywhere;
    font-size: 21px;
  }

  .analyticsPage .chartLegend {
    justify-content: flex-start;
    gap: 14px;
  }

  .analyticsPage .trendPanel {
    min-height: 0;
    padding: 18px 12px;
  }

  .analyticsPage .usageChartWrap {
    margin-top: 12px;
  }

  .analyticsPage .usageChart {
    overflow: hidden;
  }

  .analyticsPage .chartTooltip {
    display: none;
  }

  .analyticsPage .chartMobileActivePoint {
    display: initial;
  }

  .analyticsPage .usageChartMobileControls {
    border-top: 1px solid var(--line);
    gap: 8px;
    min-width: 0;
    padding-top: 13px;
    display: grid;
  }

  .analyticsPage .chartDayHeading {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 5px 12px;
    font-size: 12px;
    display: flex;
  }

  .analyticsPage .chartDayHeading label {
    color: var(--ink-soft);
  }

  .analyticsPage .chartDayHeading output {
    color: var(--ink);
    font-weight: 700;
  }

  .analyticsPage .chartDayPicker {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    display: grid;
  }

  .analyticsPage .chartDayPicker button {
    border: 1px solid var(--line);
    background: var(--surface-soft);
    min-width: 44px;
    min-height: 44px;
    color: var(--ink);
    touch-action: manipulation;
    border-radius: 10px;
    font-size: 24px;
  }

  .analyticsPage .chartDayPicker button:disabled {
    color: var(--ink-faint);
    opacity: .5;
  }

  .analyticsPage .chartDayPicker input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    accent-color: var(--green);
    margin: 0;
  }

  .analyticsPage .chartDayPicker button:focus-visible, .analyticsPage .chartDayPicker input:focus-visible, .analyticsPage .projectUsageRow summary:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
  }

  .analyticsPage .chartDayValues {
    background: var(--surface-soft);
    border-radius: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
    padding: 10px;
    display: grid;
  }

  .analyticsPage .chartDayValues dt {
    color: var(--ink-soft);
    font-size: 11px;
  }

  .analyticsPage .chartDayValues dd {
    color: var(--ink);
    overflow-wrap: anywhere;
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 750;
  }

  .analyticsPage .usageChartMobileControls > small {
    color: var(--ink-faint);
    font-size: 12px;
  }

  .analyticsPage .projectsUsagePanel, .analyticsPage .workspaceUsagePanel {
    padding: 17px 14px;
  }

  .analyticsPage .projectUsageRow summary {
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    gap: 9px;
    min-height: 64px;
    padding: 12px;
  }

  .analyticsPage .usageAvatar {
    grid-area: 1 / 1 / span 2;
    align-self: start;
  }

  .analyticsPage .usageEntityCopy strong, .analyticsPage .workspaceUsageTitle strong, .analyticsPage .targetUsageCopy strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .analyticsPage .usageEntityCopy small {
    line-height: 1.5;
  }

  .analyticsPage .usageAmount {
    text-align: left;
    grid-area: 2 / 2;
  }

  .analyticsPage .usageChevron {
    grid-area: 1 / 3 / span 2;
  }

  .analyticsPage .projectTargetUsage {
    margin: 0 12px 12px;
  }

  .analyticsPage .targetUsageRow {
    grid-template-columns: 13px minmax(0, 1fr) auto;
    gap: 7px 9px;
    padding: 12px 0;
  }

  .analyticsPage .targetBranch {
    grid-area: 1 / 1 / span 2;
  }

  .analyticsPage .targetUsageCopy {
    grid-column: 2 / -1;
  }

  .analyticsPage .targetUsageCopy code {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .analyticsPage .targetRuns {
    grid-column: 2;
    display: block;
  }

  .analyticsPage .targetTokens {
    grid-column: 3;
    min-width: 0;
  }

  .analyticsPage .workspaceUsageTitle {
    align-items: flex-start;
    gap: 10px;
  }

  .analyticsPage .analyticsError {
    overflow-wrap: anywhere;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .analyticsPage .analyticsError button {
    min-height: 44px;
  }

  .analyticsPage .skeletonColumns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .analyticsPage .analyticsKpi {
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 14px;
  }

  .analyticsPage .kpiIcon {
    width: 32px;
    height: 32px;
  }

  .analyticsPage .kpiCopy > span {
    font-size: 12px;
  }

  .analyticsPage .kpiCopy > strong {
    font-size: 27px;
  }

  .analyticsPage .kpiCopy > small {
    overflow-wrap: anywhere;
    font-size: 11px;
  }
}

@media (max-width: 420px) {
  .analyticsPage .analyticsModelFilters {
    grid-template-columns: minmax(0, 1fr);
  }

  .analyticsPage .analyticsModelFilters select + select {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* [project]/components/WorkspaceBoard.mobile.css [app-client] (css) */
.mobileChatSwitcher, .mobileWindowActions, .mobileWindowRenameAction {
  display: none;
}

@media (max-width: 820px) {
  .workspaceBoard {
    min-width: 0;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }

  .workspaceBoard .workspaceBoardHeader {
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 52px;
    padding: 0 0 8px;
  }

  .workspaceBoard .workspaceBoardHeader > div:first-child {
    flex: 1;
    min-width: 0;
  }

  .workspaceBoard .workspaceBoardHeader h1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    overflow: hidden;
  }

  .workspaceBoard .projectBoardTools {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .workspaceBoard .projectBoardTools > .archiveButton {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0;
  }

  .workspaceBoard .projectBoardTools > .archiveButton svg {
    width: 18px;
    height: 18px;
  }

  .workspaceBoard .projectBoardTools > .primaryButton {
    white-space: nowrap;
    min-height: 44px;
    padding: 0 10px;
    font-size: 13px;
  }

  .workspaceBoard .windowSizeControl {
    display: none;
  }

  .workspaceBoard .mobileChatSwitcher {
    flex: none;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-bottom: 8px;
    display: grid;
  }

  .mobileChatSwitcher label {
    color: var(--ink-soft);
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    display: grid;
  }

  .mobileChatSwitcher label span {
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
  }

  .mobileChatSwitcher select {
    border: 1px solid var(--line-strong);
    background: var(--input);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    color: var(--ink);
    text-overflow: ellipsis;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 16px;
  }

  .workspaceBoard .chatWindowGrid, .workspaceBoard .chatWindowGrid.hasMaximized {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .workspaceBoard .chatWindow {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    display: none;
  }

  .workspaceBoard .chatWindow.isMobileActive {
    flex: 1;
    display: flex;
  }

  .workspaceBoard .chatWindowBar {
    z-index: 3;
    gap: 6px;
    min-height: 52px;
    padding: 4px 6px;
    position: relative;
  }

  .workspaceBoard .windowDragHandle, .workspaceBoard .windowActions {
    display: none;
  }

  .workspaceBoard .windowTitle {
    min-height: 44px;
    font-size: 14px;
  }

  .workspaceBoard .windowProjectBadge {
    max-width: 30px;
    padding-right: 4px;
  }

  .workspaceBoard .windowProjectBadge > span {
    display: none;
  }

  .workspaceBoard .draftPill {
    font-size: 9px;
  }

  .workspaceBoard .mobileWindowActions {
    flex: none;
    display: block;
  }

  .mobileWindowActionsTrigger {
    border: 1px solid var(--line);
    background: var(--surface);
    min-width: 66px;
    min-height: 44px;
    color: var(--ink);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
  }

  .mobileWindowActionMenu {
    z-index: 5;
    width: min(280px, 100cqw - 14px);
    max-height: min(300px, calc(var(--app-viewport-height, 100dvh) - 230px));
    overscroll-behavior: contain;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
    gap: 3px;
    padding: 6px;
    display: grid;
    position: absolute;
    top: calc(100% + 4px);
    right: 6px;
    overflow-y: auto;
  }

  .mobileWindowActionMenu button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    color: var(--ink);
    text-align: left;
    white-space: normal;
    background: none;
    border: 0;
    border-radius: 7px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    font-size: 14px;
    display: flex;
  }

  .mobileWindowActionMenu button:hover:not(:disabled) {
    background: var(--surface-soft);
  }

  .mobileWindowActionMenu > .archiveButton {
    border-top: 1px solid var(--line);
    color: var(--red);
    border-radius: 0 0 7px 7px;
  }

  .mobileWindowOrderActions {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    display: grid;
  }

  .workspaceBoard .windowTitleForm {
    gap: 4px;
    min-width: 0;
    display: flex;
  }

  .workspaceBoard .windowTitleForm input {
    flex: 1;
    width: 0;
    min-width: 0;
    height: 44px;
    font-size: 16px;
  }

  .workspaceBoard .mobileWindowRenameAction {
    border: 1px solid var(--line);
    background: var(--surface);
    width: 44px;
    min-height: 44px;
    color: var(--ink);
    border-radius: 8px;
    flex: none;
    place-items: center;
    font-size: 19px;
    display: grid;
  }

  .workspaceBoard .chatWindowBar.isRenaming .windowProjectBadge, .workspaceBoard .chatWindowBar.isRenaming .draftPill, .workspaceBoard .chatWindowBar.isRenaming .mobileWindowActions {
    display: none;
  }

  .workspaceBoard .boardOperationError {
    overflow-wrap: anywhere;
    gap: 8px;
    font-size: 13px;
  }

  .workspaceBoard .boardOperationError button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .workspaceBoard .workspaceEmptyBoard {
    padding: 24px 14px;
    overflow-y: auto;
  }

  .workspaceBoard .workspaceEmptyBoard h2 {
    font-size: 22px;
  }

  .workspaceBoard .workspaceEmptyBoard p {
    font-size: 14px;
  }

  .workspaceBoardDialog {
    min-width: 0;
    max-height: calc(var(--app-viewport-height, 100dvh) - 16px);
    flex-direction: column;
    display: flex;
  }

  .workspaceBoardDialog .dialogHeader {
    flex: none;
    gap: 10px;
    padding: 12px 14px;
  }

  .workspaceBoardDialog .dialogHeader > div:first-child {
    min-width: 0;
  }

  .workspaceBoardDialog .dialogHeader h2 {
    max-width: 100%;
    font-size: 20px;
  }

  .workspaceBoardDialog .dialogHeader > button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .workspaceBoardDialog .dialogTabs {
    flex: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 10px 14px 0;
  }

  .workspaceBoardDialog .dialogTabs button {
    min-height: 44px;
    padding: 4px;
    font-size: 13px;
  }

  .workspaceBoardDialog .dialogBody, .workspaceBoardDialog .dialogEmpty {
    overscroll-behavior: contain;
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 18px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    flex: auto;
    gap: 16px;
    overflow-y: auto;
  }

  .workspaceBoardDialog .field, .workspaceBoardDialog .field input, .workspaceBoardDialog .field select {
    min-width: 0;
    max-width: 100%;
  }

  .workspaceBoardDialog .field input, .workspaceBoardDialog .field select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
  }

  .workspaceBoardDialog .field > span {
    font-size: 13px;
  }

  .workspaceBoardDialog .field small {
    overflow-wrap: anywhere;
    font-size: 12px;
  }

  .workspaceBoardDialog .dialogActions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding-top: 14px;
    display: grid;
  }

  .workspaceBoardDialog .dialogActions button {
    white-space: normal;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 8px;
    font-size: 13px;
  }

  .workspaceBoardDialog .existingChatList > button {
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: start;
    gap: 6px 10px;
    min-height: 72px;
    display: grid;
  }

  .workspaceBoardDialog .existingChatList strong, .workspaceBoardDialog .existingChatList small {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .workspaceBoardDialog .existingChatList strong {
    font-size: 14px;
  }

  .workspaceBoardDialog .existingChatList small {
    font-size: 12px;
  }

  .workspaceBoardDialog .existingChatList b {
    text-align: left;
    white-space: normal;
    grid-column: 2;
    max-width: none;
    font-size: 13px;
  }

  .appFrame[data-compact-viewport] .workspaceBoard {
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  }

  .appFrame[data-compact-viewport] .workspaceBoard .workspaceBoardHeader {
    min-height: 48px;
    padding-bottom: 4px;
  }

  .appFrame[data-compact-viewport] .workspaceBoard .mobileChatSwitcher {
    margin-bottom: 4px;
  }

  .appFrame[data-compact-viewport] .workspaceBoard .chatWindowBar {
    min-height: 44px;
    padding: 0 4px;
  }

  :is(.appFrame[data-compact-viewport] .workspaceBoard:has(.composer:focus-within) .workspaceBoardHeader, .appFrame[data-compact-viewport] .workspaceBoard:has(.composer:focus-within) .mobileChatSwitcher) {
    display: none;
  }
}

/*# sourceMappingURL=_0kcujtt._.css.map*/