/* Codex Quantum theme
 *
 * An independent implementation inspired by calm AI playground layouts:
 * neutral canvas, real app shell, readable message column and a compact
 * composer. It is scoped to the injected Codex shell only.
 */

:root {
  --cq-bg: #f4f7fa;
  --cq-panel: #ffffff;
  --cq-panel-subtle: #fafafa;
  --cq-border: #e5e7eb;
  --cq-border-strong: #d1d5db;
  --cq-text: #111827;
  --cq-muted: #6b7280;
  --cq-primary: #2563eb;
  --cq-primary-dark: #1d4ed8;
  --cq-sidebar: 248px;
}

html[data-codex-quantum='1'] {
  background: var(--cq-bg) !important;
}

html[data-codex-quantum='1'] body {
  min-height: 100vh !important;
  background: var(--cq-bg) !important;
  color: var(--cq-text) !important;
  overflow-x: hidden !important;
}

/* Remove the anime wallpaper / sheen / floating site chrome from Codex only. */
html[data-codex-quantum='1'] .cq-hide {
  display: none !important;
}

html[data-codex-quantum='1'] #codex-quantum-sidebar {
  display: flex;
}

/* New API-like app rail. */
#codex-quantum-sidebar {
  display: none;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: var(--cq-sidebar);
  flex-direction: column;
  gap: 8px;
  padding: 18px 14px;
  background: #ffffff;
  border-right: 1px solid var(--cq-border);
  color: var(--cq-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
}

#codex-quantum-sidebar .cq-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#codex-quantum-sidebar .cq-brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: #111827;
  color: white;
  font-size: 13px;
}

#codex-quantum-sidebar .cq-section-label {
  padding: 12px 10px 6px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#codex-quantum-sidebar button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}

#codex-quantum-sidebar button:hover {
  background: #f3f4f6;
  color: var(--cq-text);
}

#codex-quantum-sidebar button[data-cq-active='1'] {
  background: #eff6ff;
  color: var(--cq-primary-dark);
  font-weight: 600;
}

#codex-quantum-sidebar .cq-spacer {
  flex: 1;
}

#codex-quantum-sidebar .cq-note {
  padding: 10px;
  border: 1px solid var(--cq-border);
  border-radius: 10px;
  background: var(--cq-panel-subtle);
  color: var(--cq-muted);
  font-size: 11px;
  line-height: 1.55;
}

html[data-codex-quantum='1'] > body > main.cq-main {
  min-height: 100vh !important;
  margin-left: var(--cq-sidebar) !important;
  padding: 0 !important;
  background: var(--cq-bg) !important;
}

html[data-codex-quantum='1'] > body > main.cq-main > div.mx-auto {
  max-width: 1480px !important;
  padding: 28px 34px 48px !important;
}

/* Quiet page heading, matching a modern playground rather than a blog hero. */
html[data-codex-quantum='1'] main.cq-main h1 {
  margin: 0 !important;
  color: var(--cq-text) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

html[data-codex-quantum='1'] main.cq-main h1 + p {
  margin-top: 6px !important;
  color: var(--cq-muted) !important;
}

html[data-codex-quantum='1'] main.cq-main > div.mx-auto > div:first-child {
  margin-bottom: 22px !important;
}

html[data-codex-quantum='1'] main.cq-main > div.mx-auto > div:first-child > div:first-child > div:first-child {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main > div.mx-auto > div:first-child > button {
  border: 1px solid var(--cq-border-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #374151 !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%) !important;
}

/* Main workspace and settings cards. */
html[data-codex-quantum='1'] main.cq-main .grid.gap-5 {
  grid-template-columns: minmax(0, 1fr) 304px !important;
  gap: 24px !important;
  align-items: start !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] {
  height: min(720px, calc(100dvh - 220px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--cq-border) !important;
  border-radius: 14px !important;
  background: var(--cq-panel) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%) !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > header {
  min-height: 68px !important;
  padding: 15px 20px !important;
  border-color: var(--cq-border) !important;
  background: #fff !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > header span.text-emerald-600 {
  color: #16a34a !important;
  font-size: 12px !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 24px !important;
  background: #fff !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 > div.flex.min-h-\[360px\] {
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 > div.flex.min-h-\[360px\] h2 {
  color: #1f2937 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 > div.flex.min-h-\[360px\] p {
  color: var(--cq-muted) !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer {
  padding: 14px 18px 16px !important;
  border-color: var(--cq-border) !important;
  background: #fff !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 {
  gap: 8px !important;
  padding: 6px !important;
  border: 1px solid var(--cq-border-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 2px 7px rgb(15 23 42 / 5%) !important;
}

html[data-codex-quantum='1'] main.cq-main textarea.apple-input {
  min-height: 48px !important;
  padding: 12px 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--cq-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer button {
  border-radius: 9px !important;
  box-shadow: none !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer button[class*='bg-sky-'] {
  background: var(--cq-primary) !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer button[class*='bg-sky-']:hover {
  background: var(--cq-primary-dark) !important;
}

html[data-codex-quantum='1'] main.cq-main aside.space-y-5 {
  gap: 14px !important;
}

html[data-codex-quantum='1'] main.cq-main aside.space-y-5 > section.apple-glass {
  padding: 18px !important;
  border: 1px solid var(--cq-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%) !important;
}

html[data-codex-quantum='1'] main.cq-main aside.space-y-5 select.apple-input {
  min-height: 42px !important;
  border: 1px solid var(--cq-border-strong) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: var(--cq-text) !important;
}

/* Conversation styles from the reference design, independently authored. */
html[data-codex-quantum='1'] section.min-h-\[620px\] > div.flex-1.space-y-4 > div.justify-end > div {
  max-width: 72% !important;
  border: 1px solid #dbeafe !important;
  border-radius: 16px 16px 6px 16px !important;
  background: #eff6ff !important;
  color: #1e3a8a !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 5%) !important;
}

html[data-codex-quantum='1'] section.min-h-\[620px\] > div.flex-1.space-y-4 > div.justify-start > div {
  max-width: min(100%, 78ch) !important;
  padding: 0.3rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #374151 !important;
  box-shadow: none !important;
}

@media (max-width: 1023px) {
  :root { --cq-sidebar: 0px; }
  #codex-quantum-sidebar { display: none !important; }
  html[data-codex-quantum='1'] > body > main.cq-main { margin-left: 0 !important; }
  html[data-codex-quantum='1'] > body > main.cq-main > div.mx-auto { padding: 20px 16px 34px !important; }
  html[data-codex-quantum='1'] main.cq-main .grid.gap-5 { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-codex-quantum='1'] main.cq-main aside.space-y-5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  html[data-codex-quantum='1'] main.cq-main h1 { font-size: 24px !important; }
  html[data-codex-quantum='1'] main.cq-main aside.space-y-5 { display: block; }
  html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] { height: auto !important; min-height: 560px !important; }
}

@media (max-width: 360px) {
  html[data-codex-quantum='1'] .cq-composer-toolbar {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  html[data-codex-quantum='1'] .cq-composer-tools {
    gap: 4px !important;
  }

  html[data-codex-quantum='1'] .cq-composer-tools .cq-tool-icon {
    display: none !important;
  }

  html[data-codex-quantum='1'] .cq-composer-right {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  html[data-codex-quantum='1'] .cq-model-pill small {
    display: none !important;
  }
}

/* Final visual pass: calmer hierarchy, tighter workspace and fewer floating distractions. */
html[data-codex-quantum='1'] [data-testid='music-bounds'] {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #f6fafe 100%) !important;
  box-shadow: 0 10px 35px rgba(2, 96, 145, 0.06) !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 {
  padding: 0 28px !important;
}

html[data-codex-quantum='1'] .cq-empty-icon {
  width: 52px !important;
  height: 52px !important;
  margin-bottom: 16px !important;
  border: 1px solid #edb3c1 !important;
  background: linear-gradient(145deg, #f2f8fd, #dbeafb) !important;
  color: #0369a1 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(0, 165, 239, 0.1) !important;
}

html[data-codex-quantum='1'] .cq-empty-icon + h2 {
  font-size: 28px !important;
  letter-spacing: -0.04em !important;
}

html[data-codex-quantum='1'] .cq-empty-icon + h2 + p {
  max-width: 520px !important;
  margin-top: 10px !important;
  margin-bottom: 24px !important;
  font-size: 14px !important;
}

html[data-codex-quantum='1'] .cq-prompt-grid {
  width: min(640px, 100%) !important;
  gap: 12px !important;
}

html[data-codex-quantum='1'] .cq-prompt-grid button {
  height: 50px !important;
  padding: 0 16px !important;
  border-color: #f0c5d0 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 8px rgba(2, 96, 145, 0.04) !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
}

html[data-codex-quantum='1'] .cq-prompt-grid button:hover {
  border-color: #da91a5 !important;
  background: #f2f8fd !important;
  box-shadow: 0 7px 16px rgba(2, 96, 145, 0.08) !important;
  transform: translateY(-1px);
}

html[data-codex-quantum='1'] .cq-prompt-grid button {
  justify-content: flex-start !important;
  gap: 11px !important;
  text-align: left !important;
}

html[data-codex-quantum='1'] .cq-prompt-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 8px;
  background: #e8f3fd;
  color: #0369a1;
  font-size: 13px;
}

html[data-codex-quantum='1'] .cq-prompt-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

html[data-codex-quantum='1'] .cq-prompt-copy strong {
  color: #12293d;
  font-size: 13px;
  font-weight: 650;
}

html[data-codex-quantum='1'] .cq-prompt-copy small {
  overflow: hidden;
  color: #a27d87;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-codex-quantum='1'] .cq-empty-detail {
  display: grid;
  width: min(640px, 100%);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px auto 0;
}

html[data-codex-quantum='1'] .cq-empty-detail > div {
  padding: 11px 12px;
  border: 1px solid #f4e3e7;
  border-radius: 12px;
  background: #ffffff;
}

html[data-codex-quantum='1'] .cq-empty-detail strong,
html[data-codex-quantum='1'] .cq-empty-detail span {
  display: block;
}

html[data-codex-quantum='1'] .cq-empty-detail strong {
  color: #2c4a63;
  font-size: 11px;
}

html[data-codex-quantum='1'] .cq-empty-detail span {
  margin-top: 3px;
  color: #a98a93;
  font-size: 10px;
}

html[data-codex-quantum='1'] .cq-composer-hint {
  margin-top: 5px;
  color: #8aa2b8;
  font-size: 10px;
  text-align: right;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer {
  padding-bottom: 20px !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 {
  width: min(820px, calc(100% - 40px)) !important;
  min-height: 132px !important;
  padding: 16px 16px 11px !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, #f2f8fd, #e6f2fd) !important;
  box-shadow: 0 10px 25px rgba(2, 96, 145, 0.08) !important;
}

html[data-codex-quantum='1'] main.cq-main textarea.apple-input {
  min-height: 68px !important;
  font-size: 14px !important;
}

html[data-codex-quantum='1'] .cq-composer-toolbar {
  min-height: 34px !important;
}

html[data-codex-quantum='1'] .cq-model-pill {
  border-color: #efc8d2 !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #2c4a63 !important;
}

html[data-codex-quantum='1'] .cq-composer-right > button[class*='bg-sky-'] {
  border-color: #edc0cc !important;
  background: #fbfdff !important;
  color: #9a6270 !important;
}

@media (max-width: 640px) {
  html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 {
    padding: 0 16px !important;
  }

  html[data-codex-quantum='1'] .cq-empty-icon + h2 {
    font-size: 23px !important;
  }

  html[data-codex-quantum='1'] .cq-empty-icon + h2 + p {
    max-width: 290px !important;
    font-size: 13px !important;
  }

  html[data-codex-quantum='1'] .cq-prompt-grid {
    gap: 8px !important;
  }

  html[data-codex-quantum='1'] .cq-prompt-grid button {
    height: 44px !important;
    padding: 0 11px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  html[data-codex-quantum='1'] .cq-prompt-copy small {
    display: none;
  }

  html[data-codex-quantum='1'] .cq-empty-detail {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 14px;
  }

  html[data-codex-quantum='1'] .cq-empty-detail > div {
    padding: 8px 10px;
  }

  html[data-codex-quantum='1'] .cq-empty-detail > div:nth-child(n+2) {
    display: none;
  }

  html[data-codex-quantum='1'] .cq-composer-hint {
    font-size: 9px;
  }
}

/* --------------------------------------------------------------------------
   Pixel API reference layout: narrow icon rail + pink workspace shell
   -------------------------------------------------------------------------- */
html[data-codex-quantum='1'] body {
  background: #f2f8fd !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif !important;
}

html[data-codex-quantum='1'] #codex-quantum-sidebar {
  inset: 56px auto 0 0 !important;
  width: 66px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 10px 14px !important;
  border-right: 1px solid #deebf9 !important;
  background: #f2f8fd !important;
}

html[data-codex-quantum='1'] #codex-quantum-sidebar .cq-rail-top {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-bottom: 2px;
  color: #3b2730;
  font-size: 18px;
}

html[data-codex-quantum='1'] #codex-quantum-sidebar button {
  width: 38px !important;
  min-height: 38px !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 12px !important;
  color: #3d2b32 !important;
  font-size: 17px !important;
}

html[data-codex-quantum='1'] #codex-quantum-sidebar button:hover,
html[data-codex-quantum='1'] #codex-quantum-sidebar button[data-cq-active='1'] {
  background: #ffe0e7 !important;
  color: #8f2f45 !important;
}

html[data-codex-quantum='1'] #codex-quantum-sidebar .cq-rail-spacer {
  flex: 1 !important;
}

html[data-codex-quantum='1'] #codex-reference-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 20px;
  border-bottom: 1px solid #deebf9;
  background: #f2f8fd;
  color: #12293d;
}

html[data-codex-quantum='1'] .cq-ref-brand,
html[data-codex-quantum='1'] .cq-ref-actions,
html[data-codex-quantum='1'] .cq-ref-nav {
  display: flex;
  align-items: center;
}

html[data-codex-quantum='1'] .cq-ref-brand {
  gap: 9px;
  min-width: 180px;
  font-size: 14px;
}

html[data-codex-quantum='1'] .cq-ref-logo {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #2d2530;
  color: #fff;
  font-size: 11px;
}

html[data-codex-quantum='1'] .cq-ref-nav {
  gap: 26px;
  margin-left: auto;
  margin-right: 22px;
  color: #612a37;
  font-size: 13px;
  font-weight: 600;
}

html[data-codex-quantum='1'] .cq-ref-nav span { white-space: nowrap; }
html[data-codex-quantum='1'] .cq-ref-nav .is-active { color: #2a1820; }

html[data-codex-quantum='1'] .cq-ref-actions {
  gap: 16px;
  color: #12293d;
  font-size: 16px;
}

html[data-codex-quantum='1'] .cq-ref-search {
  display: flex;
  width: 256px;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  border: 1px solid #f2ccd5;
  border-radius: 11px;
  background: #fbfdff;
  color: #6e4b56;
  font-size: 13px;
}

html[data-codex-quantum='1'] .cq-ref-search em {
  flex: 1;
  font-style: normal;
}

html[data-codex-quantum='1'] .cq-ref-search kbd {
  padding: 2px 6px;
  border: 1px solid #f1cbd4;
  border-radius: 6px;
  background: #fff;
  font-size: 10px;
}

html[data-codex-quantum='1'] .cq-ref-actions b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #35b58e;
  color: #fff;
  font-size: 12px;
}

html[data-codex-quantum='1'] > body > main.cq-main {
  min-height: 100vh !important;
  margin-left: 66px !important;
  padding-top: 56px !important;
  background: #f2f8fd !important;
}

html[data-codex-quantum='1'] > body > main.cq-main > div.mx-auto {
  max-width: none !important;
  padding: 12px !important;
}

html[data-codex-quantum='1'] main.cq-main > div.mx-auto > div:first-child {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main .grid.gap-5 {
  display: block !important;
}

html[data-codex-quantum='1'] main.cq-main aside.space-y-5 {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] {
  width: 100% !important;
  height: calc(100dvh - 82px) !important;
  min-height: 0 !important;
  border: 1px solid #dceafa !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgb(15 42 66 / 5%) !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > header {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 {
  min-height: 0 !important;
  padding: 0 24px !important;
  background: #fff !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > div.flex-1 > div.flex.min-h-\[360px\] {
  min-height: 0 !important;
  justify-content: center !important;
}

html[data-codex-quantum='1'] .cq-empty-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin: 0 auto 20px;
  border: 1px solid #f8bdca;
  border-radius: 50%;
  background: #fbfdff;
  color: #7f3044;
  font-size: 20px;
}

html[data-codex-quantum='1'] .cq-empty-icon + h2 {
  margin: 0 !important;
  color: #1e1318 !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

html[data-codex-quantum='1'] .cq-empty-icon + h2 + p {
  margin: 12px auto 22px !important;
  color: #7d4b58 !important;
  font-size: 14px !important;
}

html[data-codex-quantum='1'] .cq-prompt-grid {
  display: grid;
  width: min(674px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto;
}

html[data-codex-quantum='1'] .cq-prompt-grid button {
  display: flex;
  height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #cfe3f7;
  border-radius: 12px;
  background: #fff;
  color: #12293d;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

html[data-codex-quantum='1'] .cq-prompt-grid button:hover {
  border-color: #eaa6b5;
  background: #fff5f7;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer {
  padding: 0 0 16px !important;
  border: 0 !important;
  background: #fff !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.mb-3,
html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.flex-wrap {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div:nth-child(1),
html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div:nth-child(2) {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 {
  display: block !important;
  width: min(890px, calc(100% - 40px)) !important;
  min-height: 136px !important;
  margin: 0 auto !important;
  padding: 18px 14px 10px !important;
  border: 1px solid #f6d2da !important;
  border-radius: 20px !important;
  background: #fff3f5 !important;
  box-shadow: 0 12px 28px rgb(0 120 180 / 7%) !important;
}

html[data-codex-quantum='1'] main.cq-main textarea.apple-input {
  display: block !important;
  width: 100% !important;
  min-height: 74px !important;
  padding: 4px 8px 10px !important;
  color: #12293d !important;
  font-size: 14px !important;
}

html[data-codex-quantum='1'] main.cq-main textarea.apple-input::placeholder {
  color: #b58c98 !important;
}

html[data-codex-quantum='1'] .cq-composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}

html[data-codex-quantum='1'] .cq-composer-tools,
html[data-codex-quantum='1'] .cq-composer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-codex-quantum='1'] .cq-composer-tools > button,
html[data-codex-quantum='1'] .cq-tool-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #a87886 !important;
  font-size: 15px;
}

html[data-codex-quantum='1'] .cq-model-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #f2d1d8;
  border-radius: 10px;
  background: #fbfdff;
  color: #7c4c58;
  font-size: 11px;
}

html[data-codex-quantum='1'] .cq-model-pill small { color: #b28591; }

html[data-codex-quantum='1'] .cq-composer-right > button {
  min-width: 76px !important;
  height: 34px !important;
  border: 1px solid #d6e7f8 !important;
  border-radius: 12px !important;
  background: #fbfdff !important;
  color: #8aa2b8 !important;
  box-shadow: none !important;
}

html[data-codex-quantum='1'] .cq-composer-right > button[class*='bg-sky-'] {
  background: #fbfdff !important;
  color: #8aa2b8 !important;
  opacity: 0.82 !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 .cq-composer-right > button[class*='bg-sky-'] {
  background: #fbfdff !important;
  color: #8aa2b8 !important;
  border-color: #d6e7f8 !important;
}

@media (max-width: 900px) {
  html[data-codex-quantum='1'] .cq-ref-nav { display: none; }
  html[data-codex-quantum='1'] .cq-ref-brand { min-width: auto; }
  html[data-codex-quantum='1'] .cq-ref-search { width: 140px; }
  html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] { height: calc(100dvh - 76px) !important; }
}

/* Final site integration: use 鱼与瑜 branding and remove reference-only chrome. */
html[data-codex-quantum='1'] #codex-quantum-sidebar {
  display: none !important;
}

html[data-codex-quantum='1'] > body > main.cq-main {
  margin-left: 0 !important;
}

html[data-codex-quantum='1'] #codex-reference-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
  background: #f7fbfe !important;
  border-bottom-color: #dceafa !important;
}

html[data-codex-quantum='1'] .cq-ref-brand {
  min-width: 220px !important;
  color: #3f202a !important;
}

html[data-codex-quantum='1'] .cq-ref-logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  background: #f3d4dc !important;
  color: #0b5c8a !important;
  font-size: 15px !important;
}

html[data-codex-quantum='1'] .cq-ref-nav {
  gap: 14px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  color: #5b7186 !important;
  font-size: 12px !important;
}

html[data-codex-quantum='1'] .cq-ref-nav a,
html[data-codex-quantum='1'] .cq-ref-nav span {
  padding: 6px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

html[data-codex-quantum='1'] .cq-ref-nav .is-active {
  background: #ddecfb !important;
  color: #0b5c8a !important;
}

html[data-codex-quantum='1'] .cq-ref-actions {
  gap: 14px !important;
  color: #5b7186 !important;
  font-size: 14px !important;
}

html[data-codex-quantum='1'] .cq-ref-context {
  color: #0b5c8a;
  font-size: 12px;
  font-weight: 600;
}

html[data-codex-quantum='1'] > body > main.cq-main > div.mx-auto {
  padding: 12px 18px 18px !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] {
  border-color: #dceafa !important;
}

/* Use the site's real homepage navigation instead of a separate Codex header. */
html[data-codex-quantum='1'] #codex-reference-header {
  display: none !important;
}

html[data-codex-quantum='1'] > body > nav.mo-nav {
  display: flex !important;
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 90 !important;
  height: 58px !important;
  border: 0 !important;
  border-bottom: 1px solid #dceafa !important;
  border-radius: 0 !important;
  background: #f7fbfe !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-codex-quantum='1'] > body > main.cq-main {
  padding-top: 58px !important;
}

/* Keep the actual capability switch usable; hide only the redundant prompt row. */
html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.mb-3 {
  display: flex !important;
  width: min(890px, calc(100% - 40px)) !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 auto 8px !important;
  padding: 0 4px !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.mb-3 button {
  height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid #cfe3f7 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #5b7186 !important;
  font-size: 12px !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.mb-3 button[class*='bg-sky-'] {
  border-color: #e9a9b8 !important;
  background: #ddecfb !important;
  color: #0b5c8a !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.mb-3 button:nth-child(3) {
  display: none !important;
}

html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.flex-wrap {
  display: none !important;
}

html[data-codex-quantum='1'] .cq-model-pill {
  min-width: 0 !important;
  white-space: nowrap !important;
}

html[data-codex-quantum='1'] .cq-model-pill strong {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  html[data-codex-quantum='1'] > body > main.cq-main {
    min-height: 100dvh !important;
    height: auto !important;
    padding-bottom: 6px !important;
  }

  html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] {
    height: calc(100dvh - 104px) !important;
    min-height: 0 !important;
  }

  html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.mb-3 {
    width: calc(100% - 24px) !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
  }

  html[data-codex-quantum='1'] main.cq-main section.min-h-\[620px\] > footer > div.mb-3 button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  html[data-codex-quantum='1'] .cq-composer-toolbar {
    gap: 6px !important;
  }

  html[data-codex-quantum='1'] .cq-composer-right {
    gap: 5px !important;
    min-width: 0 !important;
  }

  html[data-codex-quantum='1'] .cq-model-pill {
    max-width: 126px !important;
    gap: 4px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  html[data-codex-quantum='1'] .cq-model-pill strong {
    max-width: 60px !important;
  }

  html[data-codex-quantum='1'] .cq-model-pill small {
    max-width: 48px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html[data-codex-quantum='1'] .cq-composer-right > button {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
  }
}