/* GPT workspace, measured against the ChatGPT desktop reference (1280 × 720).
   Every rule is scoped to this provider; the shared brand shell owns behavior. */
.wb.wb-gpt {
  --b-surface: #fcfcfc;
  --b-sidebar: #fafafa;
  --b-text: #171717;
  --b-muted: #737373;
  --b-line: #e5e5e5;
  --wb-muted: #737373;
  --wb-line: #e5e5e5;
  grid-template-columns: 260px minmax(0, 1fr);
  background: var(--b-surface);
  color: var(--b-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", sans-serif;
}
.wb.wb-gpt button,
.wb.wb-gpt select,
.wb.wb-gpt textarea { font-family: inherit; }
.wb.wb-gpt .wb-button { font-size: 14px !important; }
.wb.wb-gpt .b-icon-button { min-width: 34px; width: 34px; padding: 6px; font-size: 0 !important; }
.wb.wb-gpt .wb-button:hover:enabled { background: #ececec; }
.wb.wb-gpt button:focus-visible,
.wb.wb-gpt select:focus-visible { outline: 2px solid #9c9c9c; outline-offset: 3px; }
.wb.wb-gpt .b-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

.wb.wb-gpt .b-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0 8px;
  border-right: 1px solid #dedede;
  border-bottom: 0;
  background: var(--b-sidebar);
  overflow: hidden;
}
.wb.wb-gpt.b-sidebar-collapsed,
.wb.wb-gpt.wb-sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.wb.wb-gpt.b-sidebar-collapsed .b-sidebar,
.wb.wb-gpt.wb-sidebar-collapsed .b-sidebar { display: none; }
.wb.wb-gpt .b-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 7px 9px;
  flex-shrink: 0;
}
.wb.wb-gpt .b-sidebar-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: #171717;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.6px;
}
.wb.wb-gpt .b-sidebar-brand img { width: 24px; height: 24px; object-fit: contain; }
.wb.wb-gpt .b-sidebar-brand .b-brand-name { font-size: 20px; }
.wb.wb-gpt .b-sidebar-top .wb-button:not(.b-sidebar-brand),
.wb.wb-gpt .b-sidebar-toggle {
  width: 32px;
  min-height: 32px;
  padding: 6px;
  border-radius: 8px;
  color: #696969;
}
.wb.wb-gpt .b-navigation { display: flex; flex-direction: column; gap: 1px; padding-top: 4px; flex-shrink: 0; }
.wb.wb-gpt .b-nav-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 7px 9px;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  color: #292929;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.5;
}
.wb.wb-gpt .b-nav-button svg,
.wb.wb-gpt .b-nav-button img { width: 18px; height: 18px; }
.wb.wb-gpt .b-nav-button.is-active { background: #eaeaea; }
.wb.wb-gpt .b-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 22px 0 6px;
  padding: 0 9px;
  color: #787878;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.wb.wb-gpt .b-history-heading .wb-button { padding: 4px; min-height: 25px; font-size: 12px !important; }
.wb.wb-gpt .wb-history { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: none; gap: 2px; overflow: auto; padding-bottom: 8px; }
.wb.wb-gpt .wb-history-row { min-height: 35px; border-radius: 8px; }
.wb.wb-gpt .wb-history-row.is-active { background: #eaeaea; }
.wb.wb-gpt .wb-history-row:hover { background: #ededed; }
.wb.wb-gpt .wb-history-select { max-width: none; padding: 7px 9px; color: #333; font-size: 14px !important; }
.wb.wb-gpt .wb-history-delete { color: #7c7c7c; min-width: 28px; min-height: 30px; padding: 3px; }
.wb.wb-gpt .b-sidebar-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 66px;
  margin: auto -8px 0;
  padding: 12px 17px;
  border-top: 1px solid #dedede;
  flex-shrink: 0;
  color: #333;
  font-size: 14px;
}
.wb.wb-gpt .b-sidebar-account img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.wb.wb-gpt .b-account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb.wb-gpt .b-sidebar-account .wb-button { min-height: 30px; padding: 5px 7px; font-size: 13px !important; }

.wb.wb-gpt .wb-main { min-width: 0; min-height: 0; background: var(--b-surface); }
.wb.wb-gpt .b-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 4px 12px 4px 24px;
  color: #262626;
  flex-shrink: 0;
}
.wb.wb-gpt .b-header-start,
.wb.wb-gpt .b-header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wb.wb-gpt .b-header-start { flex: 1; }
.wb.wb-gpt .b-header-actions { flex-shrink: 0; }
.wb.wb-gpt .b-main-header .wb-model-pickers { gap: 5px 8px; flex-wrap: nowrap; }
.wb.wb-gpt .b-main-header .wb-model-select {
  min-height: 34px;
  border: 0;
  padding: 5px 21px 5px 0;
  background: transparent;
  color: #252525;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4;
}
.wb.wb-gpt .b-main-header #wb-provider { max-width: 108px; }
.wb.wb-gpt .b-main-header #wb-model { flex: 0 1 190px; max-width: 210px; font-size: 14px !important; font-weight: 400 !important; color: #777; }
.wb.wb-gpt .b-header-actions .wb-button { min-height: 36px; padding: 7px 12px; border-radius: 22px; white-space: nowrap; font-size: 13px !important; }
.wb.wb-gpt .b-header-actions .b-icon-button { width: 36px; min-width: 36px; padding: 6px; font-size: 0 !important; }
.wb.wb-gpt .b-header-actions .b-account-button { width: 36px; padding: 5px; background: #ededed; border-radius: 50%; }
.wb.wb-gpt .b-header-actions .b-account-button img { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; }

.wb.wb-gpt .b-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: clamp(88px, 34dvh, 280px) 48px 42px;
  overflow: auto;
  scrollbar-width: thin;
}
.wb.wb-gpt .b-stage > .wb-messages { width: min(100%, 768px); max-height: none; min-height: 0; padding: 0; flex: none; overflow: visible; }
.wb.wb-gpt .b-welcome { padding: 0; margin: 0; text-align: center; }
.wb.wb-gpt .b-welcome-title {
  margin: 0;
  color: #151515;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -.45px;
}
.wb.wb-gpt .b-welcome-subtitle { margin: 12px 0 0; color: #737373; font-size: 14px; line-height: 1.7; }
.wb.wb-gpt .b-stage > .wb-composer-area { width: min(100%, 768px); max-height: none; padding: 0; margin: 40px 0 0; flex-shrink: 0; overflow: visible; }
.wb.wb-gpt .wb-composer {
  min-width: 0;
  width: 100%;
  border: 1px solid #dcdcdc;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 1px 5px #0000000a, 0 5px 26px #00000004;
  overflow: hidden;
}
.wb.wb-gpt .wb-composer:focus-within { border-color: #cecece; box-shadow: 0 1px 5px #0000000a, 0 5px 26px #00000004; }
.wb.wb-gpt textarea.wb-draft {
  display: block;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  max-height: min(36dvh, 260px);
  margin: 0;
  padding: 15px 18px 5px;
  border: 0;
  border-radius: 0;
  outline: none;
  resize: none;
  background: transparent;
  box-shadow: none;
  color: #252525;
  font-size: 16px !important;
  line-height: 24px;
  overflow-y: auto;
  overflow-wrap: anywhere;
}
.wb.wb-gpt .wb-draft::placeholder { color: #929292; }
.wb.wb-gpt .b-composer-tools,
.wb.wb-gpt .wb-composer-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 5px 9px 9px;
}
.wb.wb-gpt .b-composer-left,
.wb.wb-gpt .wb-composer-left,
.wb.wb-gpt .b-composer-right {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  flex-wrap: wrap;
}
.wb.wb-gpt .b-composer-left,
.wb.wb-gpt .wb-composer-left { flex: 1 1 auto; }
.wb.wb-gpt .b-composer-right { justify-content: flex-end; margin-left: auto; flex: 0 1 auto; }
.wb.wb-gpt .wb-composer-tools .wb-button,
.wb.wb-gpt .b-composer-tools .wb-button { min-height: 32px; padding: 5px 8px; border-radius: 18px; color: #585858; font-size: 13px !important; }
.wb.wb-gpt .wb-composer-tools .b-icon-button,
.wb.wb-gpt .b-composer-tools .b-icon-button { width: 34px; min-width: 34px; padding: 5px; font-size: 0 !important; }
.wb.wb-gpt .wb-button-attach { min-width: 34px; width: 34px; padding: 5px !important; color: #454545 !important; }
.wb.wb-gpt .wb-button-attach svg { width: 20px; height: 20px; }
.wb.wb-gpt .la-trigger { min-width: 0; max-width: 100%; min-height: 32px; padding: 5px 8px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.wb.wb-gpt .la-trigger svg { width: 16px; height: 16px; }
.wb.wb-gpt .wb-char-count { color: #929292; font-size: 11px !important; }
.wb.wb-gpt .wb-composer .wb-button-send,
.wb.wb-gpt .wb-composer .wb-button-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  min-width: 36px;
  margin-left: auto;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  font-size: 0 !important;
}
.wb.wb-gpt .wb-composer .wb-button-send:hover:enabled,
.wb.wb-gpt .wb-composer .wb-button-stop:hover:enabled { background: #343434; }
.wb.wb-gpt .wb-composer .wb-button-send:disabled { opacity: 1; background: #c8c8c8; color: #fff; }
.wb.wb-gpt .wb-button-send svg { width: 19px; height: 19px; }
.wb.wb-gpt .wb-button-send .b-icon { width: 20px; height: 20px; filter: invert(1); }
.wb.wb-gpt .wb-button-stop svg { width: 14px; height: 14px; }
.wb.wb-gpt .wb-attachments { min-width: 0; padding: 12px 12px 0; gap: 7px; }
.wb.wb-gpt .wb-attachments:empty { display: none; }
.wb.wb-gpt .wb-attachment { min-width: 0; border-radius: 12px; background: #f7f7f7; border-color: #e8e8e8; }
.wb.wb-gpt .wb-attachment summary { min-width: 0; padding: 8px 10px; font-size: 13px !important; }
.wb.wb-gpt .wb-attachment summary > span:first-child { min-width: 0; }
.wb.wb-gpt .wb-composer.b-composer-expanded,
.wb.wb-gpt .wb-composer:has(.wb-attachments:not(:empty)) { border-radius: 24px; }
/* A short draft shares one row with its tools, like the reference. The shell
   switches to .b-composer-expanded as soon as the draft needs a second line. */
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0;
  min-height: 52px;
  padding: 7px 9px;
}
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) textarea.wb-draft {
  grid-column: 2;
  grid-row: 1;
  height: 36px !important;
  min-height: 36px;
  padding: 6px 8px;
}
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) .b-composer-tools,
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) .wb-composer-tools { display: contents; }
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) .b-composer-left,
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) .wb-composer-left { grid-column: 1; grid-row: 1; }
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) .b-composer-right { grid-column: 3; grid-row: 1; }
.wb.wb-gpt:not(.wb-is-review) .wb-composer:not(.b-composer-expanded):not(:has(.wb-attachments:not(:empty))):has(.b-composer-right) .wb-slash-commands { grid-column: 1 / -1; }
.wb.wb-gpt .b-session-notes { margin: 10px 0 0; color: #777; font-size: 12px; line-height: 1.6; text-align: center; }
.wb.wb-gpt .b-session-notes > summary { cursor: pointer; font-size: 12px; }
.wb.wb-gpt .b-session-notes .wb-caption,
.wb.wb-gpt .b-session-notes .wb-cost-note,
.wb.wb-gpt .b-session-notes .wb-connection-note,
.wb.wb-gpt .b-session-notes .wb-send-note { color: #777; font-size: 12px !important; }
.wb.wb-gpt .b-disclaimer { position: absolute; right: 24px; bottom: 8px; left: 24px; margin: 0; color: #717171; font-size: 12px; line-height: 1.4; text-align: center; }
.wb.wb-gpt .wb-message { margin: 22px 0 30px; font-size: 16px; }
.wb.wb-gpt .wb-message-content { color: #292929; font-size: 16px; line-height: 1.7; }
.wb.wb-gpt .wb-message-heading { color: #777; font-size: 13px !important; }
.wb.wb-gpt .wb-message-user .wb-message-content { background: #f0f0f0; color: #292929; border-radius: 20px; padding: 12px 18px; }
.wb.wb-gpt .wb-message-assistant .wb-avatar { background: #171717; border-color: #171717; border-radius: 50%; }
.wb.wb-gpt .wb-code { background: #f7f7f7; border-color: #e4e4e4; border-radius: 14px; }
.wb.wb-gpt .wb-code pre { font-size: 13px; }
.wb.wb-gpt .wb-review { border-radius: 18px; background: #f8f8f8; border-color: #e2e2e2; }
.wb.wb-gpt .wb-review-warning { background: #fffbf5; border-color: #eddfc8; }

.wb.wb-gpt.b-chat-state .b-stage { padding: 0 48px 16px; overflow: hidden; }
.wb.wb-gpt.b-chat-state .b-stage > .wb-messages { flex: 1; min-height: 0; overflow: auto; padding: 12px 0 20px; }
.wb.wb-gpt.b-chat-state .b-stage > .wb-composer-area { max-height: 58%; margin-top: 10px; overflow: auto; flex-shrink: 0; }
.wb.wb-gpt.b-chat-state .b-disclaimer { position: static; margin-top: 8px; }
.wb.wb-gpt.wb-is-review .b-stage { padding-top: 20px; overflow: hidden; }
.wb.wb-gpt.wb-is-review .b-stage > .wb-composer-area { flex: 1; display: flex; flex-direction: column; min-height: 0; max-height: none; margin-top: 0; overflow: hidden; }
.wb.wb-gpt.wb-is-review .wb-review-host { min-height: 0; flex: 1; overflow: auto; }

@media (max-width: 1000px) {
  .wb.wb-gpt .b-main-header { padding-left: 18px; }
  .wb.wb-gpt .b-stage { padding-inline: 28px; }
  .wb.wb-gpt.b-chat-state .b-stage { padding-inline: 28px; }
  .wb.wb-gpt .b-main-header #wb-model { max-width: 160px; }
}
@media (max-width: 760px) {
  .wb.wb-gpt { grid-template-columns: minmax(0, 1fr); }
  .wb.wb-gpt .b-sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; max-width: 84vw; z-index: 20; height: 100dvh; }
  .wb.wb-gpt:not(.b-mobile-sidebar-open) .b-sidebar { display: none; }
  .wb.wb-gpt.b-mobile-sidebar-open .b-sidebar { display: flex; }
  .wb.wb-gpt .b-main-header { min-height: 56px; padding: 6px 12px; gap: 6px; }
  .wb.wb-gpt .b-header-start { gap: 5px; }
  .wb.wb-gpt .b-main-header .wb-model-pickers { flex-wrap: wrap; gap: 0 7px; }
  .wb.wb-gpt .b-main-header #wb-provider { max-width: 86px; font-size: 15px !important; }
  .wb.wb-gpt .b-main-header #wb-model { max-width: 155px; flex-basis: 115px; min-height: 25px; font-size: 12px !important; }
  .wb.wb-gpt .b-header-actions { gap: 3px; }
  .wb.wb-gpt .b-header-actions .wb-button { min-height: 32px; padding: 6px 8px; font-size: 12px !important; }
  .wb.wb-gpt .b-stage { padding: clamp(72px, 26dvh, 220px) 20px 40px; }
  .wb.wb-gpt .b-welcome-title { font-size: 24px; line-height: 1.4; letter-spacing: -.5px; }
  .wb.wb-gpt .b-stage > .wb-composer-area { margin-top: 30px; }
  .wb.wb-gpt .wb-composer { border-radius: 24px; }
  .wb.wb-gpt textarea.wb-draft { min-height: 48px; padding: 14px 16px 5px; font-size: 16px !important; }
  .wb.wb-gpt .b-composer-tools,
  .wb.wb-gpt .wb-composer-tools { padding: 5px 9px 9px; gap: 6px; }
  .wb.wb-gpt .b-composer-left,
  .wb.wb-gpt .wb-composer-left { flex-basis: auto; }
  .wb.wb-gpt .b-composer-right { flex-wrap: wrap; gap: 4px; }
  .wb.wb-gpt .wb-attachment summary { flex-wrap: wrap; gap: 3px 7px; }
  .wb.wb-gpt .wb-attachment summary > span:first-child { max-width: 100%; }
  .wb.wb-gpt .b-disclaimer { right: 16px; left: 16px; font-size: 11px; }
  .wb.wb-gpt.b-chat-state .b-stage { padding: 0 16px 12px; }
  .wb.wb-gpt.b-chat-state .b-stage > .wb-composer-area { max-height: 62%; }
}
@media (max-width: 440px) {
  .wb.wb-gpt { margin: 0; }
  .wb.wb-gpt .b-main-header { padding-inline: 9px; }
  .wb.wb-gpt .b-header-actions .b-header-optional { display: none; }
  .wb.wb-gpt .b-stage { padding-inline: 12px; padding-top: clamp(64px, 24dvh, 185px); }
  .wb.wb-gpt .b-main-header #wb-model { max-width: 115px; }
  .wb.wb-gpt .b-stage > .wb-composer-area { width: 100%; margin-top: 28px; }
  .wb.wb-gpt .b-welcome-title { font-size: 24px; }
  .wb.wb-gpt .wb-char-count { display: none; }
  .wb.wb-gpt .wb-composer-tools .wb-button,
  .wb.wb-gpt .b-composer-tools .wb-button { font-size: 12px !important; padding-inline: 6px; }
  .wb.wb-gpt .wb-composer-tools .b-icon-button,
  .wb.wb-gpt .b-composer-tools .b-icon-button,
  .wb.wb-gpt .wb-composer .wb-button-send,
  .wb.wb-gpt .wb-composer .wb-button-stop { font-size: 0 !important; }
  .wb.wb-gpt .b-composer-right { flex: 1 1 auto; justify-content: flex-end; }
  .wb.wb-gpt .la-trigger { font-size: 11px; padding-inline: 6px; }
  .wb.wb-gpt .b-session-notes { font-size: 11px; }
  .wb.wb-gpt .b-session-notes .wb-caption,
  .wb.wb-gpt .b-session-notes .wb-cost-note,
  .wb.wb-gpt .b-session-notes .wb-connection-note,
  .wb.wb-gpt .b-session-notes .wb-send-note { font-size: 11px !important; }
  .wb.wb-gpt.b-chat-state .b-stage { padding-inline: 12px; }
}