/* Claude workspace: the selected reference fills the window rather than a card. */
.layout.is-claude {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: #fcfcfb;
}
.layout.is-claude > .app-header,
.layout.is-claude .main > .topbar,
.layout.is-claude .main > .workspace-footer { display: none; }
.layout.is-claude .main {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.layout.is-claude #page-content { height: 100%; min-height: 0; padding: 0; }
.wb.wb-claude {
  --cl-surface: #fcfcfb;
  --cl-sidebar: #fbfbf9;
  --cl-text: #242422;
  --cl-muted: #91908a;
  --cl-line: #e9e8e2;
  --cl-accent: #da7858;
  --wb-muted: #85847e;
  --wb-line: #e9e8e2;
  display: grid;
  grid-template-columns: clamp(254px, 18.85vw, 374px) minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: var(--cl-surface);
  color: var(--cl-text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
}
.wb.wb-claude button,
.wb.wb-claude select,
.wb.wb-claude textarea { font-family: inherit; }
.wb.wb-claude .cl-icon,
.cl-utility .cl-icon { display: block; width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.wb.wb-claude .wb-button { font-size: 15px !important; font-weight: 400; }
.wb.wb-claude .wb-button:hover:enabled { background: #edede8; }
.wb.wb-claude button:focus-visible,
.wb.wb-claude select:focus-visible { outline: 2px solid #c1b5a5; outline-offset: 3px; }
.wb.wb-claude .wb-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 7px;
  overflow: hidden;
  border-right: 1px solid var(--cl-line);
  border-bottom: 0;
  background: var(--cl-sidebar);
}
.wb.wb-claude .cl-sidebar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 6px;
  flex-shrink: 0;
}
.wb.wb-claude .cl-sidebar-toolbar .brand,
.wb.wb-claude .cl-sidebar-brand,
.wb.wb-claude .cl-brand-label { font-size: 20px; font-weight: 600; letter-spacing: -.8px; }
.wb.wb-claude .cl-sidebar-toolbar .wb-button {
  min-width: 29px;
  min-height: 30px;
  padding: 6px;
  border-radius: 7px;
  color: #777770;
}
.wb.wb-claude .cl-sidebar-toolbar svg { width: 18px; height: 18px; }
.wb.wb-claude .cl-mode-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-left: auto;
  border-radius: 9px;
  background: #edede9;
}
.wb.wb-claude .cl-mode-switch .wb-button {
  width: 32px;
  min-height: 31px;
  padding: 6px;
  border-radius: 6px;
  color: #97968f;
}
.wb.wb-claude .cl-mode-switch [aria-selected="true"],
.wb.wb-claude .cl-mode-switch [aria-pressed="true"],
.wb.wb-claude .cl-mode-switch .is-active { background: #fff; color: #383832; box-shadow: 0 1px 4px #1e1e1b12; }
.wb.wb-claude .cl-sidebar-nav { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.wb.wb-claude .cl-sidebar-nav .wb-button {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-height: 28px;
  padding: 4px 11px;
  margin: 0;
  gap: 11px;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  background: transparent;
  color: #666660;
  font-size: 14px !important;
  line-height: 1.35;
}
.wb.wb-claude .cl-sidebar-nav .wb-button-new,
.wb.wb-claude .cl-sidebar-nav .is-active { background: #edece9; color: #30302c; }
.wb.wb-claude .cl-sidebar-nav svg { width: 17px; height: 17px; }
.wb.wb-claude .cl-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  margin: 20px 0 5px;
  color: #96958e;
  font-size: 13px;
  font-weight: 400;
  flex-shrink: 0;
}
.wb.wb-claude .cl-history-heading .wb-button { padding: 5px; min-height: 27px; }
.wb.wb-claude .wb-history { flex: 1; min-height: 0; max-height: none; padding-top: 2px; gap: 1px; overflow: auto; scrollbar-width: thin; }
.wb.wb-claude .wb-history-row { min-height: 29px; border-radius: 7px; }
.wb.wb-claude .wb-history-row.is-active { background: transparent; }
.wb.wb-claude .wb-history-row:hover { background: #eeede8; }
.wb.wb-claude .wb-history-select { max-width: none; padding: 6px 10px; color: #666660; font-size: 14px !important; }
.wb.wb-claude .wb-history-select::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 12px; border: 1px solid #c8c7bf; border-radius: 50%; vertical-align: middle; }
.wb.wb-claude .wb-history-delete { opacity: 0; color: #a09f98; min-width: 25px; padding: 3px; }
.wb.wb-claude .wb-history-row:hover .wb-history-delete,
.wb.wb-claude .wb-history-row:focus-within .wb-history-delete { opacity: 1; }
.wb.wb-claude .cl-sidebar-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 46px;
  margin: auto -7px 0;
  padding: 6px 13px;
  border-top: 1px solid var(--cl-line);
  flex-shrink: 0;
  color: #797870;
  font-size: 15px;
}
.wb.wb-claude .cl-sidebar-account .wb-button { font-size: 13px !important; padding: 6px; min-height: 29px; }
.wb.wb-claude .cl-sidebar-account img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.wb.wb-claude .cl-sidebar-account .cl-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb.wb-claude .wb-delete-confirm { margin: 10px 4px; border-color: #e4ddd1; background: #fffdfa; }
.wb.wb-claude .wb-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--cl-surface); }
.wb.wb-claude .cl-main-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  padding: 10px 26px;
  flex-shrink: 0;
  color: #96958d;
  font-size: 14px;
}
.wb.wb-claude .cl-main-header .wb-button { padding: 4px 8px; min-height: 27px; font-size: 13px !important; color: #6d6b61; }
.wb.wb-claude .cl-main-header > .wb-button { position: absolute; top: 17px; right: 22px; background: transparent; }
.wb.wb-claude .cl-main-header > span,
.wb.wb-claude .cl-main-header .cl-account-status { padding: 7px 12px; border-radius: 12px; background: #f7f6f2; line-height: 1.45; }
.wb.wb-claude .cl-main-header .cl-account-status { position: absolute; top: 54px; display: flex; align-items: center; gap: 4px; padding: 4px 9px; }
.wb.wb-claude .cl-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 25dvh 38px 30px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #dfded7 transparent;
}
.wb.wb-claude .cl-stage > .wb-messages {
  width: min(100%, 640px);
  min-height: 0;
  max-height: none;
  flex: none;
  padding: 0;
  overflow: visible;
}
.wb.wb-claude .cl-greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 50px;
  margin: 0;
  padding: 0;
  text-align: center;
}
.wb.wb-claude .cl-greeting img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.wb.wb-claude .cl-greeting h1 {
  font-family: Georgia, "Songti SC", "Noto Serif SC", "Times New Roman", serif;
  font-size: 40px;
  line-height: 1.24;
  letter-spacing: -1.5px;
  font-weight: 400;
  margin: 0;
  color: #161613;
  text-wrap: balance;
}
.wb.wb-claude .cl-stage > .wb-composer-area {
  width: min(100%, 640px);
  max-height: none;
  flex: none;
  margin: 32px 0 0;
  padding: 0;
  overflow: visible;
}
.wb.wb-claude .wb-composer {
  border: 1px solid #cfcec7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 30px #19191307;
  overflow: hidden;
}
.wb.wb-claude .wb-composer:focus-within { border-color: #bab8ad; box-shadow: 0 8px 30px #19191309; }
.wb.wb-claude textarea.wb-draft {
  min-height: 56px;
  max-height: 190px;
  padding: 14px 17px 6px;
  font-size: 16px !important;
  line-height: 1.5;
  color: #383831;
}
.wb.wb-claude .wb-draft::placeholder { color: #96958d; }
.wb.wb-claude textarea.wb-draft:placeholder-shown { height: 56px !important; }
.wb.wb-claude .cl-composer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 4px 12px 8px;
  min-height: 46px;
}
.wb.wb-claude .cl-composer-bottom > :first-child,
.wb.wb-claude .cl-composer-bottom > :last-child,
.wb.wb-claude .cl-composer-left,
.wb.wb-claude .cl-composer-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wb.wb-claude .cl-composer-bottom > :last-child,
.wb.wb-claude .cl-composer-right { justify-content: flex-end; }
.wb.wb-claude .cl-composer-bottom .wb-button-attach { min-width: 33px; min-height: 33px; padding: 7px; color: #45443d; }
.wb.wb-claude .cl-composer-bottom .wb-button-attach svg,
.wb.wb-claude .cl-composer-bottom .wb-button-attach .cl-icon { width: 19px; height: 19px; }
.wb.wb-claude .cl-task-switch { display: flex; padding: 3px; gap: 2px; border-radius: 9px; background: #f6f5f2; }
.wb.wb-claude .cl-task-switch .wb-button { min-height: 25px; padding: 2px 10px; border-radius: 6px; font-size: 14px !important; color: #7c7b73; }
.wb.wb-claude .cl-task-switch [aria-pressed="true"],
.wb.wb-claude .cl-task-switch [aria-selected="true"],
.wb.wb-claude .cl-task-switch .is-active { color: #36362f; background: #fff; box-shadow: 0 0 0 1px #e9e8e2, 0 1px 3px #19191306; }
.wb.wb-claude .wb-model-select { font-size: 14px !important; font-weight: 400 !important; color: #8a897f; padding: 5px 19px 5px 5px; max-width: 190px; }
.wb.wb-claude .la-trigger { background: transparent; color: #77766e; font-size: 11px; padding: 6px 5px; gap: 5px; min-height: 31px; }
.wb.wb-claude .la-trigger span { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb.wb-claude .la-trigger svg { width: 17px; height: 17px; }
.wb.wb-claude .la-trigger.la-full { background: #fff0e7; color: #d3733f; }
.wb.wb-claude .wb-button-send { min-width: 34px; min-height: 34px; border-radius: 9px; padding: 7px; background: #d47d5a; color: #fff; font-size: 12px !important; }
.wb.wb-claude .wb-button-send:hover:enabled { background: #bd6948; }
.wb.wb-claude .wb-button-send:disabled { background: #dfb29a; color: #fff; opacity: .7; }
.wb.wb-claude .wb-button-send svg { width: 17px; height: 17px; }
.wb.wb-claude .wb-button-send .cl-icon { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.wb.wb-claude .wb-button-stop { font-size: 12px !important; background: #efede7; color: #78746b; }
.wb.wb-claude .cl-suggestions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: min(100%, 640px);
  margin: 40px 0 0;
  padding: 0;
}
.wb.wb-claude .cl-suggestions .wb-button {
  min-height: 32px;
  padding: 4px 10px;
  gap: 7px;
  border: 1px solid #e4e3dd;
  border-radius: 10px;
  background: #fcfcfb;
  box-shadow: 0 2px 3px #17171004;
  color: #34342f;
  font-size: 14px !important;
}
.wb.wb-claude .cl-suggestions .wb-button:hover:enabled { border-color: #c9c7bb; background: #f6f5f0; }
.wb.wb-claude .cl-suggestions svg,
.wb.wb-claude .cl-suggestions .cl-icon { width: 17px; height: 17px; color: #9e9c90; }
.wb.wb-claude .wb-send-note,
.wb.wb-claude .wb-cost-note { font-size: 10px !important; line-height: 1.65; color: #aba99e; }
.wb.wb-claude .wb-connection-note { font-size: 11px !important; color: #969389; line-height: 1.6; margin-top: 12px; }
.wb.wb-claude .wb-connection-note .wb-button { font-size: 11px !important; color: #898575; }
.wb.wb-claude .wb-char-count { color: #a39f93; font-size: 10px !important; }
.wb.wb-claude .wb-attachment { border-color: #eeeae0; background: #f9f7f2; }
.wb.wb-claude .wb-attachment summary { font-size: 12px !important; }
.wb.wb-claude .wb-error { border-color: #ecdccc; background: #fffaf3; color: #9a694b; }
.wb.wb-claude .cl-history-search {
  width: calc(100% - 14px);
  margin: 12px 7px 0;
  padding: 8px 10px;
  border: 1px solid #deddd6;
  border-radius: 8px;
  background: #fff;
  color: #54534b;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline-color: #c1b5a5;
}
.wb.wb-claude .cl-history-search::placeholder { color: #a09e94; }
.wb.wb-claude .cl-utility-note { margin: 4px 10px; font-size: 12px; line-height: 1.7; color: #a09a8b; }
.wb.wb-claude .cl-slash-commands { display: flex; flex-direction: column; gap: 2px; padding: 5px 9px; border-top: 1px solid #efeee8; background: #fdfcf9; }
.wb.wb-claude .cl-slash-command { justify-content: flex-start; min-height: 29px; padding: 5px 9px; font-size: 12px !important; color: #716b5d; border-radius: 6px; }
.wb.wb-claude .cl-session-notes { display: flex; justify-content: center; width: 100%; margin: 14px 0 0; padding: 0; color: #a19a8c; }
.wb.wb-claude .cl-usage-details { width: fit-content; max-width: 100%; }
.wb.wb-claude .cl-usage-details > summary { justify-content: center; gap: 7px; padding: 2px 0; font-size: 10px; line-height: 1.6; color: #a6a194; }
.wb.wb-claude .cl-usage-details > summary::after { margin-left: 0; width: 4px; height: 4px; border-width: 1px; }
.wb.wb-claude .cl-usage-details[open] { width: 100%; padding: 0 4px; }
.wb.wb-claude .cl-usage-details[open] > summary { margin-bottom: 9px; }
.wb.wb-claude .cl-session-notes .wb-send-note { padding-top: 2px; }
.wb.wb-claude .cl-session-notes .wb-cost-note { margin-bottom: 5px; }
.wb.wb-claude .cl-session-notes .wb-button-attach { margin-left: 10px; padding: 3px 7px; min-height: 25px; font-size: 10px !important; color: #8b8270; }
.wb.wb-claude .cl-account-label { color: #a49f92; font-size: 11px; }

/* These dialogs are mounted in the document, outside the workspace grid. */
.cl-utility {
  width: min(560px, calc(100vw - 32px));
  max-height: min(80dvh, 760px);
  padding: 0;
  border: 1px solid #dedbd2;
  border-radius: 16px;
  background: #fcfcf9;
  color: #3c3a32;
  box-shadow: 0 22px 75px #2b281b24;
  overflow: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
  scrollbar-width: thin;
}
.cl-utility::backdrop { background: #28251f36; }
.cl-utility .cl-utility-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 23px 15px; border-bottom: 1px solid #ece9e1; }
.cl-utility .cl-utility-header h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.3px; }
.cl-utility .cl-utility-body { display: flex; flex-direction: column; gap: 12px; padding: 21px 23px 23px; }
.cl-utility .wb-button { display: inline-flex; align-items: center; justify-content: flex-start; gap: 9px; min-height: 34px; padding: 7px 10px; border-radius: 8px; background: transparent; color: #736b5b; font-family: inherit; line-height: 1.5; font-size: 13px !important; }
.cl-utility .wb-button:hover:enabled { background: #f0eee6; }
.cl-utility .cl-icon-button { justify-content: center; min-width: 30px; min-height: 30px; padding: 6px; }
.cl-utility .cl-utility-action { align-self: flex-start; border: 1px solid #e2ded3; background: #fff; }
.cl-utility .cl-utility-note,
.cl-utility .cl-utility-empty { margin: 0; font-size: 13px; line-height: 1.8; color: #96907e; }
.cl-utility .cl-utility-empty { padding: 16px 0; }
.cl-utility .cl-project-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid #e8e4d9; border-radius: 10px; background: #f6f4ec; }
.cl-utility .cl-project-card > .cl-icon { margin-top: 3px; }
.cl-utility .cl-project-card > div { min-width: 0; }
.cl-utility .cl-project-card strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.cl-utility .cl-project-card p { margin: 7px 0 0; font-size: 12px; line-height: 1.7; color: #99917d; }
.cl-utility .cl-custom-input { min-height: 155px; max-height: 38dvh; padding: 12px 13px; resize: vertical; border: 1px solid #d9d4c6; border-radius: 9px; background: #fff; color: #5c5547; font-family: inherit; font-size: 13px; line-height: 1.8; }
.cl-utility .cl-artifact { min-width: 0; border: 1px solid #e7e2d6; border-radius: 9px; background: #fff; overflow: hidden; }
.cl-utility .cl-artifact > summary { padding: 11px 12px; font-size: 12px; color: #89816f; overflow-wrap: anywhere; }
.cl-utility .cl-artifact pre { max-height: 35dvh; padding: 0 13px 14px; overflow: auto; font-size: 12px; line-height: 1.7; white-space: pre; }
.cl-utility .cl-artifact .cl-utility-action { margin: 0 12px 12px; }
.cl-utility button:focus-visible,
.cl-utility textarea:focus-visible { outline: 2px solid #bdb19b; outline-offset: 3px; }

/* A conversation keeps the same quiet shell and moves the composer to the bottom. */
.wb.wb-claude .cl-stage.cl-chat-state,
.wb.wb-claude.cl-chat-state .cl-stage { padding-top: 8px; overflow: hidden; }
.wb.wb-claude .cl-chat-state .cl-greeting,
.wb.wb-claude.cl-chat-state .cl-greeting,
.wb.wb-claude .cl-chat-state .cl-suggestions,
.wb.wb-claude.cl-chat-state .cl-suggestions { display: none; }
.wb.wb-claude .cl-chat-state > .wb-messages,
.wb.wb-claude.cl-chat-state .cl-stage > .wb-messages { flex: 1; overflow: auto; padding: 12px 8px 25px; max-height: none; }
.wb.wb-claude .cl-chat-state > .wb-composer-area,
.wb.wb-claude.cl-chat-state .cl-stage > .wb-composer-area { flex-shrink: 0; margin-top: 10px; padding-bottom: 0; max-height: 54%; overflow: auto; }
.wb.wb-claude .wb-message-content { font-size: 16px !important; line-height: 1.85; }
.wb.wb-claude .wb-message-user .wb-message-content { background: #f2f0e8; color: #48453c; border-radius: 16px; }
.wb.wb-claude .wb-message-heading { font-size: 12px !important; color: #868174; }
.wb.wb-claude .wb-message-assistant .wb-avatar { background: #dc7b59; border-color: #dc7b59; }
.wb.wb-claude .wb-code { border-color: #e8e4da; background: #f7f5f0; }
.wb.wb-claude .wb-code-head { border-color: #e8e4da; color: #8b8375; }
.wb.wb-claude .wb-tool-traces { color: #938a7b; }

/* Code is a separate, functional workspace within the same window. */
.wb.wb-claude.wb-claude-code .cl-stage { padding-top: clamp(64px, 14dvh, 190px); }
.wb.wb-claude .cl-code-empty { width: min(100%, 640px); margin: 0; padding: 0; text-align: center; }
.wb.wb-claude .cl-code-heading { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 14px; }
.wb.wb-claude .cl-code-heading > img { width: 35px; height: 35px; object-fit: contain; }
.wb.wb-claude .cl-code-heading h1 { font-family: Georgia, "Songti SC", serif; font-size: 31px; letter-spacing: -1.2px; font-weight: 400; line-height: 1.3; margin: 0; }
.wb.wb-claude .cl-code-intro { color: #817c72; font-size: 14px; line-height: 1.7; margin: 0 0 19px; }
.wb.wb-claude .cl-code-caption { color: #817c72; font-size: 11px; line-height: 1.7; margin: 12px 0 0; }
.wb.wb-claude .cl-project-trigger { max-width: 190px; font-size: 12px !important; padding: 5px 7px; color: #827b6d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb.wb-claude .cl-code-heading p { color: #979184; font-size: 14px; line-height: 1.7; max-width: 570px; margin-bottom: 20px; }
.wb.wb-claude .cl-code-empty > .wb-button,
.wb.wb-claude .cl-code-heading .wb-button { padding: 10px 17px; border: 1px solid #d4cfbf; border-radius: 10px; background: #fff; color: #68604f; font-size: 14px !important; }
.wb.wb-claude .cl-code-tasks,
.wb.wb-claude .cl-recent-tasks { display: flex; flex-direction: column; gap: 0; border-top: 1px solid #e7e3d8; margin-top: 25px; }
.wb.wb-claude .cl-code-tasks .wb-button,
.wb.wb-claude .cl-recent-tasks .wb-button { width: 100%; justify-content: flex-start; text-align: left; border-bottom: 1px solid #e9e5db; border-radius: 0; padding: 12px 2px; font-size: 14px !important; color: #8b806f; }
.wb.wb-claude.wb-claude-code .cl-stage > .wb-composer-area { margin-top: 24px; }
.wb.wb-claude.wb-claude-code .cl-stage.cl-chat-state,
.wb.wb-claude.wb-claude-code.cl-chat-state .cl-stage { padding-top: 8px; }

/* Keep the disclosure preview usable without changing other model workspaces. */
.wb.wb-claude.wb-is-review .cl-stage { padding-top: 12px; overflow: hidden; }
.wb.wb-claude.wb-is-review .wb-messages,
.wb.wb-claude.wb-is-review .cl-suggestions { display: none; }
.wb.wb-claude.wb-is-review .cl-stage > .wb-composer-area { display: flex; flex: 1; flex-direction: column; min-height: 0; max-height: none; margin: 0; overflow: hidden; }
.wb.wb-claude.wb-is-review .wb-review-host { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.wb.wb-claude.wb-is-review .wb-review { flex: 1; min-height: 0; border-color: #e3ddd0; background: #faf8f2; }

/* Collapsed navigation keeps its real mode and project controls available. */
.wb.wb-claude.cl-sidebar-collapsed { grid-template-columns: 70px minmax(0, 1fr); }
.wb.wb-claude.cl-sidebar-collapsed .wb-sidebar { padding-inline: 8px; }
.wb.wb-claude.cl-sidebar-collapsed .cl-sidebar-toolbar { flex-wrap: wrap; justify-content: center; padding-inline: 0; gap: 5px; }
.wb.wb-claude.cl-sidebar-collapsed .cl-sidebar-toolbar .brand,
.wb.wb-claude.cl-sidebar-collapsed .cl-sidebar-brand,
.wb.wb-claude.cl-sidebar-collapsed .cl-brand-label,
.wb.wb-claude.cl-sidebar-collapsed .cl-history-heading,
.wb.wb-claude.cl-sidebar-collapsed .wb-history,
.wb.wb-claude.cl-sidebar-collapsed .cl-sidebar-nav .wb-button > span,
.wb.wb-claude.cl-sidebar-collapsed .cl-account-name { display: none; }
.wb.wb-claude.cl-sidebar-collapsed .cl-mode-switch { flex-direction: column; margin: 6px auto 0; }
.wb.wb-claude.cl-sidebar-collapsed .cl-sidebar-nav { margin-top: 8px; }
.wb.wb-claude.cl-sidebar-collapsed .cl-sidebar-nav .wb-button { justify-content: center; padding-inline: 8px; font-size: 0 !important; gap: 0; }
.wb.wb-claude.cl-sidebar-collapsed .cl-history-search { display: none; }
.wb.wb-claude.cl-sidebar-collapsed .cl-sidebar-account { justify-content: center; margin-top: auto; padding-inline: 5px; }

@media (max-width: 1100px) {
  .wb.wb-claude { grid-template-columns: 250px minmax(0, 1fr); }
  .wb.wb-claude .cl-stage { padding-inline: 30px; padding-top: 23dvh; }
  .wb.wb-claude .cl-greeting h1 { font-size: 38px; letter-spacing: -1.4px; }
  .wb.wb-claude .cl-greeting img { width: 36px; height: 36px; }
  .wb.wb-claude .cl-composer-bottom { gap: 8px; padding-inline: 12px; }
  .wb.wb-claude .cl-composer-bottom > :first-child,
  .wb.wb-claude .cl-composer-bottom > :last-child { gap: 6px; }
  .wb.wb-claude .wb-model-select { max-width: 145px; font-size: 12px !important; }
  .wb.wb-claude .la-trigger span { max-width: 95px; }
  .wb.wb-claude .cl-suggestions { gap: 8px; margin-top: 39px; }
  .wb.wb-claude .cl-suggestions .wb-button { font-size: 14px !important; padding: 6px 10px; }
}
@media (max-width: 760px) {
  .wb.wb-claude,
  .wb.wb-claude.cl-sidebar-collapsed { grid-template-columns: 64px minmax(0, 1fr); height: 100dvh; min-height: 0; margin: 0; border-radius: 0; }
  .wb.wb-claude .wb-sidebar { padding-inline: 6px; }
  .wb.wb-claude .cl-sidebar-toolbar { flex-wrap: wrap; justify-content: center; gap: 5px; min-height: 58px; padding: 12px 0 9px; }
  .wb.wb-claude .cl-sidebar-toolbar .brand,
  .wb.wb-claude .cl-sidebar-brand,
  .wb.wb-claude .cl-brand-label,
  .wb.wb-claude .cl-history-heading,
  .wb.wb-claude .wb-history,
  .wb.wb-claude .cl-sidebar-nav .wb-button > span,
  .wb.wb-claude .cl-account-name { display: none; }
  .wb.wb-claude .cl-mode-switch { flex-direction: column; margin: 6px auto 0; }
  .wb.wb-claude .cl-sidebar-nav { margin-top: 8px; }
  .wb.wb-claude .cl-sidebar-nav .wb-button { justify-content: center; padding-inline: 7px; min-height: 38px; font-size: 0 !important; gap: 0; }
  .wb.wb-claude .cl-history-search { display: none; }
  .wb.wb-claude .cl-sidebar-account { justify-content: center; padding-inline: 5px; min-height: 57px; }
  .wb.wb-claude .wb-main { min-height: 0; overflow: hidden; }
  .wb.wb-claude .cl-main-header { min-height: 54px; padding: 10px 15px; font-size: 12px; }
  .wb.wb-claude .cl-main-header > .wb-button { position: static; margin-left: auto; font-size: 10px !important; }
  .wb.wb-claude .cl-main-header .cl-account-status { position: static; max-width: calc(100% - 72px); font-size: 11px; }
  .wb.wb-claude .cl-stage { padding: 22dvh 22px 22px; }
  .wb.wb-claude .cl-greeting { gap: 10px; min-height: 57px; }
  .wb.wb-claude .cl-greeting h1 { font-size: 34px; letter-spacing: -1px; }
  .wb.wb-claude .cl-greeting img { width: 35px; height: 35px; }
  .wb.wb-claude .cl-stage > .wb-composer-area { margin-top: 30px; }
  .wb.wb-claude textarea.wb-draft { font-size: 16px !important; min-height: 56px; padding: 14px 17px 6px; }
  .wb.wb-claude .cl-composer-bottom { flex-wrap: wrap; row-gap: 8px; padding: 7px 11px 11px; }
  .wb.wb-claude .cl-task-switch .wb-button { font-size: 13px !important; min-height: 28px; padding-inline: 9px; }
  .wb.wb-claude .cl-suggestions { margin-top: 30px; gap: 8px; }
  .wb.wb-claude .cl-suggestions .wb-button { font-size: 13px !important; min-height: 35px; padding: 5px 9px; }
  .wb.wb-claude .cl-suggestions svg,
  .wb.wb-claude .cl-suggestions .cl-icon { width: 16px; height: 16px; }
  .wb.wb-claude .wb-message-content { font-size: 14px !important; }
  .wb.wb-claude .cl-code-heading h1 { font-size: 29px; }
  .wb.wb-claude .cl-code-heading p { font-size: 13px; }
  .wb.wb-claude.wb-claude-code .cl-stage { padding-top: 12dvh; }
}
@media (max-width: 540px) {
  .wb.wb-claude .cl-stage { padding-inline: 16px; padding-top: 18dvh; }
  .wb.wb-claude .cl-greeting h1 { font-size: 28px; line-height: 1.35; letter-spacing: -.8px; }
  .wb.wb-claude .cl-greeting img { width: 31px; height: 31px; }
  .wb.wb-claude .wb-composer { border-radius: 17px; }
  .wb.wb-claude .cl-composer-bottom { gap: 7px; }
  .wb.wb-claude .cl-composer-bottom > :last-child { flex: 1; justify-content: flex-end; }
  .wb.wb-claude .la-trigger span { display: none; }
  .wb.wb-claude .la-trigger { padding-inline: 4px; }
  .wb.wb-claude .wb-model-select { max-width: 120px; font-size: 11px !important; }
  .wb.wb-claude .wb-send-note { display: none; }
  .wb.wb-claude .wb-cost-note { font-size: 9px !important; }
  .wb.wb-claude .cl-stage.cl-chat-state,
  .wb.wb-claude.cl-chat-state .cl-stage { padding-top: 5px; }
  .wb.wb-claude .cl-code-heading h1 { font-size: 27px; }
  .wb.wb-claude .cl-code-heading p { font-size: 12px; }
  .cl-utility .cl-utility-header { padding: 17px 18px 12px; }
  .cl-utility .cl-utility-body { padding: 17px 18px; }
}
/* Keep actual model and permission labels readable on narrow screens. */
@media (max-width: 540px) {
  .wb.wb-claude .cl-composer-bottom .cl-composer-left,
  .wb.wb-claude .cl-composer-bottom .cl-composer-right { flex-basis: 100%; width: 100%; }
  .wb.wb-claude .cl-composer-bottom .cl-composer-right { justify-content: space-between; }
  .wb.wb-claude .cl-composer-right .wb-model-select { min-width: 106px; max-width: 132px; flex: 1; }
  .wb.wb-claude .la-trigger span { display: block; max-width: 96px; }
  .wb.wb-claude .cl-sidebar-account { flex-direction: column; gap: 2px; min-height: 80px; }
  .wb.wb-claude .cl-composer-right .la-trigger .cl-icon { width: 16px; height: 16px; }
}
.cl-utility .cl-dialog-history { display: flex; flex-direction: column; gap: 6px; }
.cl-utility .cl-history-search { width: 100%; border: 1px solid #d9d4c6; padding: 10px 12px; border-radius: 9px; background: #fff; color: #5c5547; font: inherit; }
@media (max-height: 760px) and (min-width: 761px) {
  .wb.wb-claude .cl-stage { padding-top: 19dvh; }
  .wb.wb-claude .cl-stage > .wb-composer-area { margin-top: 28px; }
  .wb.wb-claude .cl-suggestions { margin-top: 27px; }
  .wb.wb-claude .cl-greeting h1 { font-size: 40px; }
  .wb.wb-claude.wb-claude-code .cl-stage { padding-top: 8dvh; }
  .wb.wb-claude .cl-stage.cl-chat-state,
  .wb.wb-claude.cl-chat-state .cl-stage,
  .wb.wb-claude.wb-claude-code .cl-stage.cl-chat-state { padding-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .wb.wb-claude * { transition: none !important; animation: none !important; }
}