/* App shell layout and responsive navigation extracted from design-system.css. */

/* Extracted from design-system.css lines 1-83. */
/* Wsiriclaw product UI system.
   Final visual layer for workspace and settings pages. */

:root {
  --ds-font: var(--font-sans);

  --ds-bg: #F5F6F2;
  --ds-bg-deep: #EEF0EA;
  --ds-surface: #ffffff;
  --ds-surface-2: #F7F8F5;
  --ds-surface-3: #EEF0EA;

  --ds-text: #151A19;
  --ds-text-2: #59615F;
  --ds-text-3: #68706E;
  --ds-text-faint: #858D8A;

  --ds-brand: #2864DC;
  --ds-brand-dark: #3974E8;
  --ds-brand-soft: #EAF1FF;
  --ds-accent: #18A99A;
  --ds-accent-soft: #E8F7F4;
  --ds-blue: #2864DC;
  --ds-blue-soft: #EAF1FF;
  --ds-danger: #DC2626;
  --ds-danger-soft: #FCEEEE;

  --ds-line: #DEE3DE;
  --ds-line-soft: #E8ECE8;
  --ds-line-strong: #AAB2AE;

  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 16px;

  --ds-shadow-xs: 0 1px 2px rgba(20, 24, 40, 0.04);
  --ds-shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.04), 0 8px 24px rgba(50, 60, 120, 0.06);
  --ds-shadow-md: 0 12px 40px rgba(50, 60, 120, 0.10);

  --ds-nav: 280px;
  --ds-content: 1180px;
  --ds-control: 42px;
  --ds-control-lg: 48px;
}

html {
  background: var(--ds-bg);
}

body,
button,
input,
textarea,
select {
  font-family: var(--ds-font);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  color: var(--ds-text);
  background: var(--ds-bg);
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(40, 100, 220, 0.18);
  outline-offset: 2px;
}

/* Extracted from design-system.css lines 85-411. */
/* Shell and navigation */
.workspace,
.workspace.subnav-open,
.agent-workspace,
.workspace.agent-detail-open .agent-workspace {
  grid-template-columns: var(--ds-nav) minmax(0, 1fr);
}

.sidebar,
.sub-sidebar,
.agent-thread-sidebar,
.workspace.agent-detail-open .agent-thread-sidebar {
  box-sizing: border-box;
  width: var(--ds-nav);
  min-width: var(--ds-nav);
  max-width: var(--ds-nav);
  border-right: 1px solid var(--ds-line);
  padding: 18px 20px;
  background: var(--ds-surface);
  box-shadow: none;
}

.sub-sidebar {
  gap: 10px;
}

.sidebar,
.sub-sidebar,
.agent-thread-sidebar {
  color: var(--ds-text);
}

.side-logo,
.sub-brand {
  min-height: 44px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--ds-line-soft);
  padding: 0 0 14px;
  color: var(--ds-text);
  font-size: 14px;
  font-weight: 720;
}

.sub-back {
  height: 40px;
  margin: 0 0 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: #ffffff;
  color: var(--ds-brand-dark);
  font-size: 0;
  box-shadow: var(--ds-shadow-xs);
}

.sub-back::before {
  content: "返回主导航";
  font-size: 12px;
  font-weight: 700;
}

.sub-brand {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 0 12px;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-lg);
  padding: 8px 12px;
  background: #ffffff;
  box-shadow: var(--ds-shadow-xs);
}

.side-brand-main {
  min-width: 0;
}

.side-logo img,
.side-logo .header-logo,
.sub-brand img {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ds-line-soft);
  border-radius: 6px;
  padding: 2px;
  object-fit: contain;
  background: #ffffff;
}

.side-home-link {
  min-height: 28px;
  border: 1px solid rgba(27, 61, 130, 0.18);
  border-radius: 4px;
  padding: 5px 10px;
  background: var(--ds-brand-soft);
  color: var(--ds-brand-dark);
  font-size: 12px;
  font-weight: 650;
}

.sidebar button,
.sub-item,
.sub-conversation,
.sub-agent-row,
.manual-entry,
.agent-back-btn,
.agent-new-thread,
.agent-workspace-settings .btn,
.agent-thread-list button {
  min-height: var(--ds-control);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  padding: 0 12px;
  color: var(--ds-text-2);
  background: transparent;
  font-size: 12px;
  font-weight: 640;
  line-height: 1.25;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar button {
  display: flex;
  align-items: center;
  gap: 0;
}

.sidebar button[data-module]::before {
  content: none;
}

.sidebar button:hover,
.sidebar button.active,
.sub-item:hover,
.sub-item.active,
.sub-conversation:hover,
.sub-conversation.active,
.sub-agent-row:hover,
.sub-agent-row.active,
.manual-entry:hover,
.manual-entry.active,
.agent-back-btn:hover,
.agent-new-thread:hover,
.agent-workspace-settings .btn:hover,
.agent-workspace-settings .btn.primary,
.agent-thread-list button:hover,
.agent-thread-list button.active {
  border-color: rgba(27, 61, 130, 0.22);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-dark);
  box-shadow: none;
}

.sub-group-title,
.agent-thread-section h3,
.agent-workspace-settings h3,
.sub-fixed-actions::before {
  color: var(--ds-text-3);
  font-size: 12px;
  font-weight: 700;
}

.agent-department {
  gap: 8px;
  margin: 10px 0 16px;
}

.department-head {
  min-height: 48px;
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 8px 12px 8px 14px;
  background: #ffffff;
  box-shadow: var(--ds-shadow-xs);
}

.department-head strong {
  font-size: 12px;
  font-weight: 720;
}

.department-head small {
  color: var(--ds-text-3);
  font-size: 12px;
}

.department-head button,
.agent-department-card button {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--ds-brand-dark);
  font-size: 18px;
  background: var(--ds-brand-soft);
}

.sub-fixed-actions,
.sub-user,
.agent-workspace-settings {
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-radius-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--ds-shadow-xs);
}

.side-bottom {
  position: relative;
  border-top: 1px solid var(--ds-line-soft);
  padding-top: 14px;
}

.side-bottom .manual-entry {
  justify-content: center;
  border-color: var(--ds-line);
  background: var(--ds-brand-soft);
  color: var(--ds-brand-dark);
}

.sub-fixed-actions {
  padding: 12px;
}

.sub-fixed-actions .manual-entry {
  justify-content: flex-start;
  border-color: var(--ds-line-soft);
  background: #ffffff;
  color: var(--ds-text);
}

.sub-user {
  gap: 10px;
  padding: 10px;
}

.sub-user .avatar {
  border: 1px solid var(--ds-line-soft);
  box-shadow: none;
}

.sub-user .name {
  color: var(--ds-text);
  font-size: 12px;
  font-weight: 720;
}

.sub-user .plan {
  color: var(--ds-text-3);
  font-size: 12px;
}

/* Extracted from design-system.css lines 924-951. */
@media (max-width: 960px) {
  :root {
    --ds-nav: 248px;
  }
}

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

/* Extracted from design-system.css lines 953-1054. */
/* Compact sidebar footer pass: avoid heavy stacked panels in level-3 navigation. */
.agent-thread-sidebar .sub-user-wrap,
.sub-sidebar .sub-user-wrap {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.agent-workspace-settings,
.sub-fixed-actions {
  border-radius: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
}

.agent-workspace-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.agent-workspace-settings h3,
.sub-fixed-actions::before {
  margin: 0 0 2px;
  color: var(--ds-text-3);
  font-size: 12px;
  font-weight: 680;
}

.agent-workspace-settings h3 {
  grid-column: 1 / -1;
}

.agent-workspace-settings .btn,
.sub-fixed-actions .manual-entry {
  min-height: 34px;
  border-radius: 6px;
  padding: 0 10px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 640;
}

.agent-workspace-settings .btn + .btn {
  margin-top: 0;
}

.sub-fixed-actions .manual-entry + .manual-entry {
  margin-top: 5px;
}

.sub-user {
  min-height: 52px;
  border-color: var(--ds-line);
  border-radius: 6px;
  padding: 8px;
  background: #ffffff;
  box-shadow: var(--ds-shadow-xs);
}

.sub-user .avatar {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.sub-user .name {
  font-size: 12px;
}

.sub-user .plan {
  font-size: 12px;
}

/* Extracted from design-system.css lines 1484-1915. */
/* Final navigation and Chinese typography pass. */
:root {
  --ds-font: var(--font-sans);
  --ds-nav: 280px;
  --ds-nav-pad-x: 20px;
  --ds-nav-item: 40px;
  --ds-nav-item-radius: 4px;
  --ds-text-xs: 12px;
  --ds-text-sm: 12px;
  --ds-text-md: 14px;
  --ds-text-lg: 18px;
  --ds-weight-normal: 400;
  --ds-weight-medium: 520;
  --ds-weight-strong: 650;
}

body,
button,
input,
textarea,
select {
  font-family: var(--ds-font);
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-normal);
  letter-spacing: 0;
}

.workspace,
.workspace.subnav-open,
.workspace.agent-detail-open .agent-workspace,
.agent-workspace {
  grid-template-columns: var(--ds-nav) minmax(0, 1fr);
}

.sidebar,
.sub-sidebar,
.agent-thread-sidebar,
.workspace.agent-detail-open .agent-thread-sidebar {
  width: var(--ds-nav);
  min-width: var(--ds-nav);
  max-width: var(--ds-nav);
  padding: 18px var(--ds-nav-pad-x);
  background: var(--ds-surface);
  box-shadow: none;
}

.sidebar,
.sub-sidebar,
.agent-thread-sidebar {
  gap: 8px;
  font-family: var(--ds-font);
  font-weight: var(--ds-weight-normal);
}

.side-logo,
.sub-brand {
  min-height: 44px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ds-line-soft);
  padding-bottom: 12px;
  font-size: var(--ds-text-md);
  font-weight: var(--ds-weight-strong);
}

.sub-back,
.agent-back-btn,
.agent-new-thread,
.sidebar button,
.sub-item,
.sub-conversation,
.sub-agent-row,
.manual-entry,
.agent-workspace-settings .btn,
.agent-thread-list button {
  min-height: var(--ds-nav-item);
  border-radius: var(--ds-nav-item-radius);
  padding: 0 12px;
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: 1.38;
}

.sidebar button:hover,
.sidebar button.active,
.sub-item:hover,
.sub-item.active,
.sub-conversation:hover,
.sub-conversation.active,
.sub-agent-row:hover,
.sub-agent-row.active,
.manual-entry:hover,
.manual-entry.active,
.agent-back-btn:hover,
.agent-new-thread:hover,
.agent-workspace-settings .btn:hover,
.agent-workspace-settings .btn.primary,
.agent-thread-list button:hover,
.agent-thread-list button.active {
  border-color: transparent;
  background: var(--ds-hover);
  color: var(--ds-brand-dark);
  box-shadow: none;
}

.agent-thread-list {
  gap: 4px;
  padding-right: 0;
}

.agent-thread-list button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-height: 48px;
  border: 1px solid transparent;
  padding: 7px 12px 7px 14px;
  overflow: visible;
}

.agent-thread-list button::before,
.sub-agent-row::before,
.sub-conversation::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 6px;
  width: 2px;
  border-radius: 4px;
  background: transparent;
}

.agent-thread-list button:hover::before,
.agent-thread-list button.active::before,
.sub-agent-row:hover::before,
.sub-agent-row.active::before,
.sub-conversation:hover::before,
.sub-conversation.active::before {
  background: var(--ds-brand);
}

.agent-thread-list button.active,
.sub-agent-row.active,
.sub-conversation.active {
  background: rgba(27, 61, 130, 0.08);
  color: var(--ds-brand-dark);
}

.agent-thread-list span,
.sub-agent-row span,
.sub-conversation span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-strong);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-thread-list small,
.sub-group-title,
.sub-empty,
.sub-user .plan,
.department-head small {
  color: var(--ds-text-3);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-normal);
  line-height: 1.35;
}

.sub-agent-row,
.sub-conversation {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
}

.sub-agent-row button,
.sub-conversation button {
  color: var(--ds-brand-dark);
  background: rgba(27, 61, 130, 0.08);
}

.agent-thread-section h3,
.sub-fixed-actions::before {
  margin: 0 0 4px;
  color: var(--ds-text-3);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: 1.35;
}

.sub-fixed-actions,
.agent-workspace-settings {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.agent-workspace-settings {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
  border-top: 1px solid var(--ds-line-soft);
  padding-top: 10px;
}

.agent-workspace-settings h3 {
  margin-bottom: 2px;
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
}

.agent-workspace-settings .btn,
.sub-fixed-actions .manual-entry {
  min-height: 36px;
  justify-content: flex-start;
  border: 1px solid var(--ds-line-soft);
  border-radius: var(--ds-nav-item-radius);
  background: #ffffff;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
}

.sub-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  width: 100%;
  border: 1px solid var(--ds-line-soft);
  border-radius: 6px;
  padding: 8px 10px;
  background: #ffffff;
  box-shadow: none;
  font-family: var(--ds-font);
  font-weight: var(--ds-weight-normal);
}

.sub-user .avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 6px;
}

.sub-user > div:last-child {
  min-width: 0;
}

.sub-user .name {
  overflow: hidden;
  color: var(--ds-text);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-strong);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-bottom {
  border-top: 1px solid var(--ds-line-soft);
  padding-top: 12px;
}

.agent-thread-sidebar .sub-user-wrap,
.sub-sidebar .sub-user-wrap {
  gap: 8px;
}

.workspace-card-head h2,
.model-workspace h2,
.tool-section-head h2,
.skill-manager-head h2,
.agent-info-panel h3,
.settings-head h1 {
  font-weight: var(--ds-weight-strong);
}

.workspace-card-head p,
.model-workspace p,
.tool-card p,
.agent-info-panel p,
.settings-head p {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-normal);
}

@media (max-width: 960px) {
  :root {
    --ds-nav: 260px;
  }
}

@media (max-width: 980px) {
  .agent-workspace {
    grid-template-columns: 1fr;
  }
}

/* Sidebar fixed-entry refinement: full-width rows, clearer section line. */
.side-bottom,
.sub-fixed-actions,
.agent-workspace-settings {
  margin-top: 10px;
  border-top: 1px solid var(--ds-line-strong);
  padding-top: 8px;
}

.side-bottom {
  margin-top: auto;
}

.sub-fixed-actions,
.agent-workspace-settings {
  display: grid;
  gap: 2px;
  background: transparent;
}

.sub-fixed-actions::before,
.agent-workspace-settings h3 {
  margin: 0 0 4px;
  padding: 0;
  color: var(--ds-text-3);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: 1.35;
}

.sub-fixed-actions .manual-entry,
.side-bottom .manual-entry,
.agent-workspace-settings .btn {
  position: relative;
  justify-content: flex-start;
  min-height: 32px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  padding: 0 8px;
  background: transparent;
  color: var(--ds-text-2);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: 1.35;
  box-shadow: none;
}

.sub-fixed-actions .manual-entry + .manual-entry,
.agent-workspace-settings .btn + .btn {
  margin-top: 1px;
}

.sub-fixed-actions .manual-entry:hover,
.sub-fixed-actions .manual-entry.active,
.side-bottom .manual-entry:hover,
.side-bottom .manual-entry.active,
.agent-workspace-settings .btn:hover,
.agent-workspace-settings .btn.primary {
  border: 0;
  background: rgba(27, 61, 130, 0.07);
  color: var(--ds-brand-dark);
}

.sub-fixed-actions .manual-entry::before,
.side-bottom .manual-entry::before,
.agent-workspace-settings .btn::before {
  content: "";
  width: 2px;
  height: 16px;
  border-radius: 4px;
  background: transparent;
}

.sub-fixed-actions .manual-entry:hover::before,
.sub-fixed-actions .manual-entry.active::before,
.side-bottom .manual-entry:hover::before,
.side-bottom .manual-entry.active::before,
.agent-workspace-settings .btn:hover::before,
.agent-workspace-settings .btn.primary::before {
  background: var(--ds-brand);
}

.sub-fixed-actions .manual-entry svg,
.side-bottom .manual-entry svg,
.agent-workspace-settings .btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--ds-brand-dark);
}

.side-bottom .manual-entry:not(:has(svg))::after {
  content: "";
  order: -1;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1.7px solid currentColor;
  border-radius: 3px;
  opacity: 0.88;
}

.side-bottom .manual-entry:has(svg)::after {
  content: none;
}

@media (min-width: 861px) {
  .side-brand-main {
    font-size: 15px;
    font-weight: var(--ds-weight-strong);
  }

  .sidebar > button,
  .side-bottom .manual-entry {
    font-size: 14px;
  }

  .sidebar > button {
    font-weight: var(--ds-weight-medium);
  }

}

/* Extracted from design-system.css lines 2258-2534. */
/* Keep secondary navigation actions inside the fixed rail on hover. */
.sub-sidebar {
  overflow-x: hidden;
}

.agent-department,
.department-head,
.sub-agent-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.department-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  column-gap: 8px;
  overflow: hidden;
}

.department-head span,
.sub-agent-row span {
  min-width: 0;
}

.department-actions {
  width: 36px;
  min-width: 36px;
  justify-content: flex-end;
}

.department-head button,
.agent-department-card button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 32px;
}

.sub-agent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  column-gap: 8px;
  align-items: center;
  overflow: hidden;
  padding-right: 8px;
}

.sub-agent-row button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 28px;
  padding: 0;
  justify-self: end;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sub-agent-row small {
  width: 42px;
  min-width: 42px;
  justify-self: end;
  text-align: center;
}

.sub-agent-row:hover button,
.sub-agent-row.active button {
  display: inline-grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile workspace: content first, navigation as drawers. */
.mobile-workspace-bar,
.mobile-nav-scrim {
  display: none;
}

@media (max-width: 860px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .workspace,
  .workspace.subnav-open,
  .workspace.agent-detail-open,
  .workspace.agent-detail-open .agent-workspace,
  .agent-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .mobile-workspace-bar {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    z-index: 4200;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    pointer-events: none;
  }

  .mobile-workspace-bar .mobile-nav-toggle:first-child {
    margin-right: auto;
  }

  .mobile-nav-toggle {
    display: inline-grid;
    place-items: center;
    min-width: 54px;
    min-height: 36px;
    border: 1px solid rgba(31, 50, 57, 0.18);
    border-radius: 4px;
    padding: 0 13px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ds-premium-ink, var(--ds-text));
    font-family: var(--ds-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    pointer-events: auto;
  }

  .mobile-nav-toggle[hidden] {
    display: none;
  }

  .content {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100dvh;
    padding: calc(max(58px, env(safe-area-inset-top) + 50px)) 12px calc(env(safe-area-inset-bottom) + 18px);
    overflow-x: hidden;
  }

  .panel-head,
  .panel-head.model-mode,
  .panel-head.tools-mode,
  .content-grid,
  .dashboard-content,
  .model-content {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .workspace-card,
  .model-workspace,
  .agent-workspace,
  .tool-card,
  .dashboard-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .sidebar,
  .sub-sidebar,
  .agent-thread-sidebar,
  .workspace.agent-detail-open .agent-thread-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 4300;
    display: flex;
    flex: 0 0 min(88vw, 340px);
    width: min(88vw, 340px);
    min-width: min(88vw, 340px);
    max-width: min(88vw, 340px);
    height: 100dvh;
    max-height: 100dvh;
    border-right: 1px solid var(--ds-line);
    padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    transform: translateX(-104%);
    transition: transform 0.22s ease;
    box-shadow: 18px 0 46px rgba(20, 35, 31, 0.18);
    writing-mode: horizontal-tb;
  }

  .workspace.mobile-main-nav-open .sidebar,
  .workspace.mobile-sub-nav-open .sub-sidebar,
  .workspace.mobile-thread-nav-open .agent-thread-sidebar {
    display: flex;
    transform: translateX(0);
  }

  .sidebar *,
  .sub-sidebar *,
  .agent-thread-sidebar * {
    writing-mode: horizontal-tb;
    word-break: normal;
  }

  .sidebar > button,
  .sidebar .manual-entry,
  .sidebar .side-logo,
  .sidebar .user-profile-btn,
  .sub-sidebar button,
  .agent-thread-sidebar button,
  .side-bottom {
    width: 100%;
    min-width: 0;
  }

  .mobile-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 4250;
    border: 0;
    padding: 0;
    background: rgba(17, 31, 28, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .workspace.mobile-main-nav-open .mobile-nav-scrim,
  .workspace.mobile-sub-nav-open .mobile-nav-scrim,
  .workspace.mobile-thread-nav-open .mobile-nav-scrim {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .workspace.agent-detail-open .agent-workspace {
    min-height: calc(100dvh - 72px);
  }

  .agent-workspace .agent-panel-body,
  .agent-workspace .chat-history {
    min-width: 0;
  }

  .agent-workspace .chat-composer {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: auto;
    right: auto;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    min-width: 0;
    margin: 12px auto 0;
    border-radius: 6px;
    padding: 9px;
  }

  .chat-bubble,
  .agent-workspace .chat-bubble {
    max-width: min(88vw, 680px);
    overflow-wrap: anywhere;
  }

  .agent-workspace .chat-composer textarea {
    width: 100%;
    min-height: 48px;
    max-height: 128px;
  }

  .agent-workspace .composer-actions {
    gap: 8px;
    padding-top: 8px;
  }

  .agent-workspace .composer-actions .grow {
    flex: 1 1 auto;
    min-width: 0;
  }

  .agent-workspace .icon-btn,
  .agent-workspace .send-action {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 6px;
  }
}