/* 模块 02 · 开始用 Codex */

/* ===== opener emblem: the Codex window as three blocks ===== */
.opx { position: relative; aspect-ratio: 1.45; max-height: 46vh; margin-left: auto; display: grid; grid-template-columns: .32fr 1fr; grid-template-rows: 1fr auto; gap: 10px; padding: 14px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line-ink-2); }
.opx > div { position: relative; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-ink-2); transition: background-color .4s, box-shadow .4s; }
.opx span { position: absolute; left: 12px; bottom: 10px; font-size: .78rem; color: var(--on-ink-muted); transition: color .3s; }
.opx-side { grid-row: 1 / 3; display: grid; align-content: start; gap: 8px; padding: 16px 12px; }
.opx-side i { height: 8px; border-radius: 4px; background: rgba(241, 239, 233, .12); }
.opx-side i:first-child { width: 60%; background: rgba(241, 239, 233, .22); }
.opx-main { display: grid; place-content: center; gap: 10px; }
.opx-main b { display: block; width: 180px; height: 8px; border-radius: 4px; background: rgba(241, 239, 233, .12); }
.opx-main b:nth-child(2) { width: 130px; }
.opx-main b:nth-child(3) { width: 150px; }
.opx-input { height: 64px; }
.op.hl-0 .opx-side, .op.hl-1 .opx-main, .op.hl-2 .opx-input { background: rgba(255, 216, 77, .1); box-shadow: inset 0 0 0 2px var(--mark); }
.op.hl-0 .opx-side span, .op.hl-1 .opx-main span, .op.hl-2 .opx-input span { color: var(--mark); }

/* ===== codex-ui: the window, explained in place ===== */
.ui { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); grid-template-areas: "copy stage" "src stage"; column-gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.ui-copy { grid-area: copy; align-self: start; }
.ui-detail { margin-top: 22px; min-height: 9.5em; padding: 18px 20px; border-radius: 18px; background: rgba(12, 14, 50, .22); backdrop-filter: blur(6px); }
.ui-n { font: 600 .78rem/1 var(--mono); color: var(--mark); }
.ui-detail .sub { margin-top: 8px; }
.ui-detail p:last-child { margin-top: 6px; color: rgba(246, 246, 252, .9); }
.ui-list { margin-top: 16px; display: grid; gap: 2px; }
.ui-list button { display: flex; gap: 12px; align-items: center; width: 100%; padding: 6px 4px; text-align: left; font-size: .9rem; color: rgba(246, 246, 252, .82); border-radius: 8px; transition: color .2s, background-color .2s; }
.ui-list button i { font: 600 .74rem/1 var(--mono); font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.ui-list button:hover { color: #fff; }
.ui-list button[aria-pressed="true"] { color: #fff; font-weight: 600; }
.ui-list button[aria-pressed="true"] i { background: var(--mark); color: var(--ink); box-shadow: none; }
.ui-fix { margin-top: 14px; }
.ui-orig { margin-top: 12px; }
.ui .src { grid-area: src; align-self: end; }
.ui-stage { grid-area: stage; }
.ui-app { height: min(575px, calc(100dvh - var(--top) - var(--bottom) - 110px)); min-height: 440px; display: flex; flex-direction: column; }
.ui-app .cx-body { flex: 1; }
.ui-app .cx-main { display: block; padding: 0; }
.ui-body { display: flex; height: 100%; }
.ui-side { width: 196px; position: relative; }
.ui-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 26px clamp(18px, 3vw, 46px); }
.ui-part { position: relative; border-radius: 10px; transition: box-shadow .35s var(--ease), background-color .35s; }
.ui-part.lit { box-shadow: 0 0 0 2px var(--mark), 0 0 0 8px rgba(255, 216, 77, .32); }
.cx-brandrow.ui-part { display: flex; gap: 4px; }
.ui-hero { text-align: center; padding: 10px 0; }
.ui-q { font-size: clamp(1.15rem, 1.7vw, 1.55rem); font-weight: 500; letter-spacing: -.01em; }
.ui-cards { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ui-cards span { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; box-shadow: 0 0 0 1px var(--cx-line); font-size: 12px; text-align: left; color: #333; line-height: 1.35; }
.ui-cards .ic { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: #f1f1f4; color: #555; }
.ui-composer .cx-ctop { position: relative; }
.ui-composer .cx-input { position: relative; }
.ui-composer .cx-cbot { position: relative; }
.ui-app .spot { position: absolute; }
.ui-side .spot[data-spot="1"] { right: 14px; top: 18px; margin: 0; }
.cx-brandrow .spot { position: absolute; right: 4px; top: 50%; margin: -15px 0 0; }
.ui-hero .spot { left: 8px; top: 8px; margin: 0; }
.cx-ctop .spot { left: -12px; top: 50%; margin: -15px 0 0; }
.cx-input .spot { right: 14px; top: 50%; margin: -15px 0 0; }
.cx-cbot .spot { left: 46%; top: 50%; margin: -15px 0 0; }
.ui-cap { margin-top: 12px; font-size: .82rem; color: rgba(240, 242, 252, .85); }

/* ===== codex-project: Finder → Codex ===== */
.pj { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); grid-template-areas: "copy stage" "copy foot" "src src"; column-gap: clamp(24px, 3.6vw, 56px); row-gap: 18px; align-items: start; }
.pj-copy { grid-area: copy; }
.pj-steps { margin-top: 22px; display: grid; gap: 4px; }
.pj-s { display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; align-items: start; padding: 12px 14px; border-radius: 14px; transition: background-color .35s, opacity .35s; opacity: .5; }
.pj-s > b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 .78rem/1 var(--mono); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: all .3s; }
.pj-s > span { font-size: .93rem; line-height: 1.6; }
.pj-s .btn { grid-column: 2; justify-self: start; margin-top: 6px; }
.pj[data-state="0"] .s1, .pj[data-state="1"] .s2, .pj[data-state="2"] .s2, .pj[data-state="3"] .s3 { opacity: 1; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.pj:not([data-state="0"]) .s1 > b, .pj[data-state="3"] .s2 > b { background: var(--ok); color: #fff; box-shadow: none; }
.pj:not([data-state="0"]) .s1, .pj[data-state="3"] .s2 { opacity: .78; }
.pj-stage { grid-area: stage; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: 16px; align-items: stretch; height: clamp(320px, 46vh, 430px); }
.pj-finder, .pj-codex { height: 100%; }
.pj-finder { border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 24px 50px -30px rgba(0, 0, 0, .4); overflow: hidden; font-size: 12.5px; color: #1b1b1f; }
.pj-fbar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #f3f3f5; border-bottom: 1px solid #e4e4e8; }
.pj-fbar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d9de; }
.pj-fbar span { margin-left: 8px; color: #6b6b72; }
.pj-cols { display: grid; grid-template-columns: .74fr 1.3fr 1fr; height: calc(100% - 34px); }
.pj-col { border-right: 1px solid #ececef; padding: 6px; display: grid; align-content: start; gap: 1px; position: relative; }
.pj-col:last-child { border-right: 0; }
.pj-col li { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.pj-col li span { overflow: hidden; text-overflow: ellipsis; }
.pj-col li .ic { color: #4f8be8; }
.pj-col li.sel { background: #e6e6ea; }
.pj-col li.me { flex-wrap: wrap; background: #fff6cf; box-shadow: inset 0 0 0 1px #f0d36a; cursor: grab; }
.pj-pick { min-height: 24px; padding: 0 9px; font-size: .7rem; margin-left: auto; }
.pj-col li.me { flex-wrap: nowrap; }
.pj-files li { opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s var(--ease); }
.pj-files li .ic { color: #8a8a90; }
.pj-fence { position: absolute !important; left: 4px; right: 4px; top: 4px; bottom: 4px; border: 2px dashed var(--ok); border-radius: 10px; display: flex !important; align-items: flex-end !important; justify-content: center; padding-bottom: 8px !important; font-size: 11px; font-weight: 600; color: var(--ok); background: rgba(35, 149, 95, .05); pointer-events: none; }
.pj:not([data-state="0"]) .pj-files li { opacity: 1; transform: none; }
.pj:not([data-state="0"]) .pj-col li.me { background: #2b66d9; color: #fff; box-shadow: none; cursor: default; }
.pj:not([data-state="0"]) .pj-col li.me .ic { color: #fff; }
.pj:not([data-state="0"]) .pj-pick { display: none; }
.pj[data-state="0"] .pj-fence { opacity: 0; }
.pj-codex { position: relative; border-radius: 14px; transition: box-shadow .3s; }
.pj-codex.over { box-shadow: 0 0 0 3px var(--mark); }
.pj-codex .cx-app { height: 100%; display: flex; flex-direction: column; }
.pj-codex .cx-body { flex: 1; min-height: 0; }
.pj-codex .cx-side { width: 116px; padding: 10px 8px; }
.pj-codex .cx-main { padding: 12px; gap: 10px; justify-content: space-between; }
.pj-thread { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pj-empty { margin: auto; padding: 18px 22px; border: 1.5px dashed #c9c9cf; border-radius: 12px; color: #8e8e94; font-size: 12px; transition: opacity .3s; }
.pj.dragging .pj-empty { border-color: var(--mark); color: #6b5400; background: #fff8dc; }
.pj:not([data-state="0"]) .pj-empty { display: none; }
.pj-me { align-self: flex-end; max-width: 85%; padding: 7px 12px; border-radius: 12px 12px 4px 12px; background: #f1f1f4; font-size: 12.5px; }
.pj-me:empty { display: none; }
.pj-reply { font-size: 12.5px; line-height: 1.6; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s var(--ease); }
.pj-reply code { font-size: 11.5px; background: #f1f1f4; color: #111; }
.pj[data-state="3"] .pj-reply { opacity: 1; transform: none; }
.pj-codex .cx-composer { font-size: 12px; }
.pj-codex .cx-input { min-height: 34px; padding: 9px 12px 2px; }
.pj-chip { transition: background-color .4s; }
.pj:not([data-state="0"]) .pj-chip { background: #fff3c4; color: #111; }
.pj[data-state="0"] .cx-side .cx-sh + .cx-row { display: none; }
.pj:not([data-state="0"]) .cx-side .cx-sh + .cx-row { background: #e6e6ea; animation: log-in .6s var(--ease); }
.pj-foot { grid-area: foot; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: 16px; align-items: end; }
.pj-foot .prompt textarea { min-height: 4.6em; }
.pj .src { grid-area: src; }

/* ===== codex-context: a composer you can actually fill ===== */
.ctx { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); grid-template-areas: "copy stage" "src stage"; column-gap: clamp(24px, 3.6vw, 60px); align-items: start; }
.ctx-copy { grid-area: copy; }
.ctx-h { font-size: .78rem; letter-spacing: .04em; color: rgba(240, 242, 252, .82); margin-bottom: 8px; }
.ctx-mats { margin-top: 24px; display: grid; gap: 8px; }
.ctx-mat { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .94); color: #111; text-align: left; box-shadow: 0 10px 24px -14px rgba(10, 14, 60, .6); cursor: grab; transition: transform .2s var(--ease), box-shadow .2s; }
.ctx-mat:hover { transform: translateY(-2px) rotate(-.4deg); }
.ctx-mat .ic { width: 22px; height: 22px; color: #4c5bd8; }
.ctx-mat span { display: flex; flex-direction: column; line-height: 1.35; }
.ctx-mat b { font: 600 .88rem/1.3 var(--mono); }
.ctx-mat small { font-size: .74rem; color: #6b6b72; }
.ctx-mat.private .ic { color: var(--bad); }
.ctx-warn { min-height: 1.5em; font-size: .86rem; color: #ffe27a; font-weight: 600; }
.ctx-adds { margin-top: 14px; display: grid; gap: 6px; justify-items: start; }
.ctx-add { padding: 8px 14px; border-radius: 999px; font-size: .86rem; text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); color: #fff; transition: background-color .25s, color .25s; }
.ctx-add:hover { background: rgba(255, 255, 255, .12); }
.ctx-add[aria-pressed="true"] { background: #fff; color: #111; box-shadow: none; }
.ctx-stage { grid-area: stage; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .46fr); grid-template-areas: "comp checks" "chat fig"; gap: 16px; align-items: start; }
.ctx-composer { grid-area: comp; position: relative; border-radius: 22px; background: #fff; color: #111; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -28px rgba(10, 14, 60, .65); transition: box-shadow .3s; }
.ctx-composer.over { box-shadow: 0 0 0 3px var(--mark), 0 30px 60px -28px rgba(10, 14, 60, .65); }
.ctx-attach { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.ctx-attach:empty { display: none; }
.ctx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 10px; background: #f1f1f4; font: 500 12px/1 var(--mono); animation: log-in .4s var(--ease); }
.ctx-chip button { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #6b6b72; }
.ctx-chip button:hover { background: #e2e2e7; }
.ctx-chip .ic { width: 13px; height: 13px; }
.ctx-text { display: block; width: 100%; border: 0; outline: none; resize: none; background: transparent; padding: 14px 18px 4px; font-size: .95rem; line-height: 1.7; color: #111; min-height: 9em; }
.ctx-text::placeholder { color: #a2a2a8; }
.ctx-at { position: absolute; left: 14px; top: 64px; z-index: 3; min-width: 200px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 16px 34px -10px rgba(0, 0, 0, .35); display: grid; }
.ctx-at button { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 8px; font: 12.5px/1 var(--mono); text-align: left; }
.ctx-at button:hover, .ctx-at button:focus-visible { background: #f2f2f4; }
.ctx-checks { grid-area: checks; display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; background: rgba(12, 14, 50, .24); backdrop-filter: blur(6px); font-size: .92rem; }
.ctx-checks .tick.on { color: #fff; font-weight: 600; }
.ctx-checks .tick.on::before { box-shadow: inset 0 0 0 8px #3ddc8e; }
.ctx-chat { grid-area: chat; display: grid; gap: 8px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .1); }
.ctx-bubble { max-width: 86%; padding: 8px 14px; border-radius: 14px; font-size: .9rem; }
.ctx-bubble.codex { background: rgba(255, 255, 255, .92); color: #111; border-bottom-left-radius: 4px; }
.ctx-bubble.you { justify-self: end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.ctx-why { font-size: .82rem; color: rgba(240, 242, 252, .88); }
.ctx-fig { grid-area: fig; }
.ctx-thumb { display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); cursor: zoom-in; }
.ctx-fig figcaption { margin-top: 6px; font-size: .74rem; color: rgba(240, 242, 252, .8); line-height: 1.5; }
.ctx .src { grid-area: src; }

@media (max-width: 1100px) {
  .ui, .pj, .ctx { grid-template-columns: 1fr; grid-template-areas: none; }
  .ui > *, .pj > *, .ctx > * { grid-area: auto !important; }
  .ui-app { height: auto; min-height: 0; }
}
@media (max-width: 760px) {
  .ui-side { display: none; }
  .ui-cards { grid-template-columns: 1fr 1fr; }
  .pj-stage, .ctx-stage { grid-template-columns: 1fr; grid-template-areas: none; }
  .ctx-stage > * { grid-area: auto !important; }
  .pj-codex .cx-side { display: none; }
}

@media (max-width: 760px) {
  .ctx-stage > * { min-width: 0; }
  .ctx-composer .cx-cbot { flex-wrap: wrap; }
  .ctx-composer .cx-right { margin-left: auto; }
}