/* ==========================================================================
   Codex 输入区外观增强
   ==========================================================================
   目标：让输入区呈现「一体化外壳」的观感 —— 输入框与发送键共处一个圆角容器，
   外缘一道柔和描边 + 分层投影，聚焦时边框转为强调色并浮现光环。

   参考对象是 New API（QuantumNous，AGPL-3.0）的 playground 输入区。
   注意：这里是**借鉴设计思路后自行实现**，未复制对方任何代码。
   它那边的做法是：
     PromptInput groupClassName =
       bg-background/95 border-border/70 rounded-xl
       shadow-[0_18px_60px_-32px_rgba(0,0,0,0.65)] ring-1 ring-foreground/5
       transition-all duration-200
       focus-within:border-primary/45 focus-within:ring-primary/15
       focus-within:shadow-[0_22px_70px_-34px_rgba(0,0,0,0.75)]
   本文件把同一套观感翻译到本站的浅/深双主题与天蓝强调色（#00a5ef）上。

   ── 与上一次翻车的区别（重要）──────────────────────────────────────────
   上一版给玻璃卡片加了 overflow:hidden + isolation:isolate，结果裁剪了
   宿主原有的 10 个子元素、并把高 z-index 子元素困在层叠上下文里。

   本版**不碰任何宿主的 overflow / isolation / position / z-index**，
   只设置 background / border / border-radius / box-shadow / padding
   这些「外观属性」—— 它们不会改变子元素的定位基准或层叠归属。

   ── 关闭方式 ─────────────────────────────────────────────────────────
   URL 加 ?codexui=off 无效（纯 CSS 无法读 query），改用两个开关：
     · <html data-motion="off"> —— 与动效层共用一个总开关
     · 删除 nginx 注入行里的 codex-ui.css 引用
   ========================================================================== */

/* --------------------------------------------------------------------------
   令牌：全部对齐本站既有取值
   -------------------------------------------------------------------------- */
:root {
  /* 与站内 18px / 24px 的圆角层级一致，取 16px 作为输入区尺度 */
  --cx-radius: 16px;

  /* 描边：沿用站点浅色主题下的 slate 半透明边 */
  --cx-border: rgba(148, 163, 184, 0.28);
  --cx-border-focus: rgba(0, 165, 239, 0.45);

  /* 投影：大范围低透明度，避免「贴纸感」 */
  --cx-shadow-rest: 0 18px 60px -32px rgba(2, 8, 23, 0.42);
  --cx-shadow-focus:
    0 22px 70px -34px rgba(2, 8, 23, 0.52),
    0 0 0 3px rgba(0, 165, 239, 0.16);

  --cx-bg: rgba(255, 255, 255, 0.62);
  --cx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 深色主题：底色换为深蓝半透明，描边改用冷白 */
.dark {
  --cx-border: rgba(190, 222, 255, 0.16);
  --cx-bg: rgba(15, 23, 42, 0.5);
}

/* --------------------------------------------------------------------------
   外壳
   --------------------------------------------------------------------------
   选择器说明：Codex 页脚内、承载 textarea 与发送键的那一行是
     <div class="flex items-end gap-2">
   用 `footer` 限定作用域，避免误伤页面其他位置的同类 flex 行。

   已实测：footer 内符合条件的元素唯一，不会波及别处。
   -------------------------------------------------------------------------- */
section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 {
  background: var(--cx-bg);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow-rest);
  /* 左侧留窄、右侧留宽：右宽是为了让发送键有呼吸空间 */
  padding: 8px 8px 8px 4px;
  transition:
    border-color 0.2s var(--cx-ease),
    box-shadow 0.2s var(--cx-ease),
    background-color 0.2s var(--cx-ease);
}

/* 聚焦态：整块外壳一起响应，而不是只有输入框自己变 */
section.min-h-\[620px\] > footer > div.flex.items-end.gap-2:focus-within {
  border-color: var(--cx-border-focus);
  box-shadow: var(--cx-shadow-focus);
}

/* --------------------------------------------------------------------------
   输入框：让位给外壳
   --------------------------------------------------------------------------
   原样式来自站点自身的 .apple-input（自带底色与描边）。
   这里把底色与描边置空，视觉上的「框」交给外层外壳承担，
   形成 New API 那种「一个容器、内部无分隔」的效果。

   只改外观属性，不动尺寸与定位。
   -------------------------------------------------------------------------- */
section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > textarea {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  /* 左侧内缩，与外壳圆角对齐，避免文字贴边 */
  padding-left: 12px;
}

/* 聚焦时不要在原输入框上再叠一层光环（外壳已经有了） */
section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > textarea:focus,
section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > textarea:focus-visible {
  outline: none;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* --------------------------------------------------------------------------
   发送键
   --------------------------------------------------------------------------
   实测外壳内有 2 个按钮：
     · BUTTON ...rounded-2xl border ...   ← 附件/插入按钮
     · BUTTON ...rounded-2xl bg-sky-600   ← 发送键
   只给发送键加投影与按压缩放；附件按钮仅统一圆角，
   否则两个都发光会显得杂乱。

   用 [class*="bg-sky-"] 而非 .bg-sky-600：类名可能随构建变化，
   前缀匹配更耐受。
   -------------------------------------------------------------------------- */
section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > button {
  border-radius: 12px;
  transition: transform 0.18s var(--cx-ease), box-shadow 0.18s var(--cx-ease);
}

section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > button[class*='bg-sky-'] {
  box-shadow: 0 10px 26px -14px rgba(0, 165, 239, 0.7);
}

section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > button[class*='bg-sky-']:active {
  transform: scale(0.94);
}

/* --------------------------------------------------------------------------
   降级与总开关
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  section.min-h-\[620px\] > footer > div.flex.items-end.gap-2,
  section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > button {
    transition: none !important;
  }
  section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > button:active {
    transform: none !important;
  }
}

/* 与动效层共用总开关：?motion=off 或 window.__motion.off() 时回到原样 */
[data-motion="off"] section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}
[data-motion="off"] section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > textarea {
  background: rgba(255, 255, 255, 0.52) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  padding-left: 0;
}
[data-motion="off"] section.min-h-\[620px\] > footer > div.flex.items-end.gap-2 > button {
  border-radius: 16px;
  box-shadow: none;
}