/* ============================================================
   Codex 教程 · App 窗口模拟（定稿：design/app-window.html 方案 A + C）
   A = 高保真窗口 .aw（侧栏 / 对话 / 审阅三栏）
   C = 局部特写 .awc（放大一块 + 编号说明 + 位置缩略图）
   每个窗口外面包一层 .aw-host（容器查询以它的宽度为准）
   ============================================================ */

.aw-host { container-type: inline-size; margin: 18px 0; }
.aw-host.wide { margin-top: 18px; margin-bottom: 18px; }

/* ---------- A：窗口外框 ---------- */
.aw { position: relative; border-radius: 11px; overflow: hidden; overflow: clip; background: var(--window-bg); font-size: 12.5px; line-height: 1.5; color: var(--label);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 10px 32px rgba(0, 0, 0, .16); }
:root[data-theme="dark"] .aw { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .8), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 32px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aw { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .8), inset 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 32px rgba(0, 0, 0, .5); } }
.aw svg, .awc svg { width: 14px; height: 14px; flex: none; }
.aw code, .awc code { font-family: var(--mono); font-size: .92em; }

.aw-bar { position: relative; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; background: var(--toolbar-bg); border-bottom: .5px solid var(--sep); }
.aw-bar .ttl { flex: 1; min-width: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-bar .ttl span { font-weight: 400; color: var(--label-3); }
.aw-note { flex: none; font-size: 10.5px; font-weight: 500; color: var(--label-3); border: .5px solid var(--sep); border-radius: 5px; padding: 1px 6px; }
.aw-ibtn { flex: none; height: 24px; min-width: 24px; padding: 0 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--label-2); background: none; border: 0; font: inherit; font-size: 12px; }
.aw-menu { display: none; }

.aw-body { display: grid; grid-template-columns: 148px minmax(0, 1fr) 216px; height: 430px; }
.aw.no-rev .aw-body { grid-template-columns: 148px minmax(0, 1fr); }
.aw.tall .aw-body { height: 470px; }
.aw.solo .aw-body { grid-template-columns: minmax(0, 1fr); }
.aw.solo:not(.no-rev) .aw-body { grid-template-columns: minmax(0, 1fr) 216px; }

/* 侧栏 */
.aw-side { background: var(--group); border-right: .5px solid var(--sep); padding: 8px 7px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aw-li { height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 7px; border-radius: 6px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.aw-li svg { color: var(--label-2); width: 13px; height: 13px; }
.aw-li.on { background: var(--fill-2); font-weight: 500; }
.aw-li.sub { padding-left: 27px; color: var(--label-2); }
.aw-li.sub.on { color: var(--label); }
.aw-li .run { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: none; box-shadow: 0 0 0 3px var(--accent-soft); animation: aw-pulse 1.4s ease-in-out infinite; }
.aw-sec { font-size: 10.5px; font-weight: 600; color: var(--label-3); padding: 10px 7px 3px; letter-spacing: .03em; flex: none; }
.aw-prod { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; margin-bottom: 4px; border-radius: 7px; font-weight: 600; flex: none; }
.aw-prod .cv { width: 9px; height: 9px; color: var(--label-3); }
@keyframes aw-pulse { 50% { box-shadow: 0 0 0 5px transparent; } }

/* 对话区 */
.aw-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.aw-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 9px; }
.aw-scroll > * { flex-shrink: 0; }
.aw-diff, .cx-code { font-variant-ligatures: none; }
.aw-empty { margin: auto; text-align: center; color: var(--label-3); font-size: 12.5px; }
.aw-empty b { display: block; color: var(--label-2); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.aw-user { align-self: flex-end; max-width: 86%; background: var(--fill-2); border-radius: 14px 14px 4px 14px; padding: 7px 11px; white-space: pre-wrap; }
.aw-step { display: flex; align-items: center; gap: 7px; color: var(--label-2); font-size: 12px; min-width: 0; }
.aw-step svg { width: 13px; height: 13px; color: var(--label-3); }
.aw-step .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aw-step .ok { color: var(--green-text); }
.aw-step .ok svg { color: var(--green-text); }
.aw-add { color: var(--green-text); font-family: var(--mono); font-size: 11.5px; }
.aw-del { color: var(--red); font-family: var(--mono); font-size: 11.5px; }
.aw-say { color: var(--label); }
.aw-say ul { margin: 4px 0 0; padding-left: 1.2em; }
.aw-work { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--label-3); }
.aw-work i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--fill-3); border-top-color: var(--accent); animation: aw-spin .8s linear infinite; }
@keyframes aw-spin { to { transform: rotate(360deg); } }

.aw-appr { border: .5px solid var(--control-border); border-radius: 11px; background: var(--control); box-shadow: var(--control-shadow); padding: 10px 12px 11px; }
.aw-appr .h { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.aw-appr .h svg { color: var(--orange); }
.aw-appr .cmd { display: block; margin: 7px 0 5px; padding: 5px 9px; border-radius: 6px; background: var(--fill); font-family: var(--mono); font-size: 12px; overflow-x: auto; white-space: nowrap; }
.aw-appr .why { color: var(--label-2); font-size: 12px; }
.aw-appr .acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.aw-appr .res { font-size: 12px; font-weight: 500; }
.aw-appr .res.yes { color: var(--green-text); }
.aw-appr .res.no { color: var(--red); }
.aw-appr.wait { box-shadow: 0 0 0 2px var(--accent), var(--control-shadow); }
.aw-b { height: 26px; padding: 0 11px; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 500; border: .5px solid var(--control-border); background: var(--control); color: var(--label); box-shadow: var(--control-shadow); cursor: pointer; }
.aw-b.pri { background: var(--accent); border-color: transparent; color: #fff; }
.aw-b:disabled { cursor: default; }

/* 输入框（可以真的输入） */
.aw-comp { margin: 6px 12px 12px; border: .5px solid var(--control-border); border-radius: 14px; background: var(--control); box-shadow: var(--control-shadow); padding: 8px 8px 7px 12px; }
.aw-comp .ph { color: var(--label-3); padding: 1px 0 8px; min-height: 19px; white-space: pre-wrap; }
.aw-comp .ph.typing { color: var(--label); }
.aw-in { display: block; width: 100%; border: 0; background: none; padding: 1px 0 8px; font: inherit; color: var(--label); outline: none; }
.aw-in::placeholder { color: var(--label-3); }
.aw-in:disabled { cursor: default; }
.aw-comp .tools { display: flex; align-items: center; gap: 4px; min-width: 0; }
.aw-pill { flex: none; height: 22px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 11px; font-size: 11.5px; color: var(--label-2); background: var(--fill); white-space: nowrap; }
.aw-pill svg { width: 12px; height: 12px; }
.aw-pill .cv { width: 8px; height: 8px; opacity: .6; }
.aw-send { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-3); color: var(--window-bg); border: 0; padding: 0; }
.aw-send svg { width: 12px; height: 12px; }
.aw-comp.live .aw-send { background: var(--label); }

/* 审阅面板 */
.aw-rev { border-left: .5px solid var(--sep); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.aw-rev .rh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 6px; padding: 9px 10px 8px 12px; border-bottom: .5px solid var(--sep); font-weight: 600; }
.aw-rev .rb { flex: 1; min-height: 0; overflow: auto; }
.aw-rev .none { padding: 30px 12px; text-align: center; color: var(--label-3); font-size: 12px; }
.aw-mseg { display: inline-flex; background: var(--seg-bg); border-radius: 6px; padding: 1.5px; font-size: 10.5px; font-weight: 500; }
.aw-mseg span { padding: 1px 6px; border-radius: 5px; color: var(--label-2); white-space: nowrap; }
.aw-mseg span.on { background: var(--seg-on); color: var(--label); box-shadow: 0 .5px 1.5px rgba(0, 0, 0, .15); }
.aw-file { display: flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; min-width: 0; }
.aw-file .fn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.aw-file svg { width: 13px; height: 13px; color: var(--label-3); }
.aw-file .aw-add, .aw-file .aw-del { font-size: 11px; }
.aw-file.on { background: var(--fill); }
.aw-diff { margin: 6px 10px; border-radius: 7px; border: .5px solid var(--sep); overflow: hidden; font-family: var(--mono); font-size: 10.5px; line-height: 1.65; }
.aw-diff div { padding: 0 7px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.aw-diff .a { background: var(--green-soft); }
.aw-diff .d { background: var(--red-soft); }
.aw-diff .c { color: var(--label-3); }
.aw-rev .ra { display: flex; gap: 6px; padding: 8px 10px; border-top: .5px solid var(--sep); }
.aw-rev .ra .aw-b { height: 24px; padding: 0 9px; font-size: 11.5px; }
.aw-revbar { display: none; }

/* 高亮某一块（讲解时用） */
.aw .hl { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.aw .aw-comp.hl, .aw .aw-appr.hl { box-shadow: 0 0 0 2px var(--accent); }
.aw .aw-pill.hl { box-shadow: 0 0 0 1.5px var(--accent); color: var(--accent); background: var(--accent-soft); }
.aw-mk { position: absolute; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 11px/19px var(--font); text-align: center; box-shadow: 0 0 0 2.5px var(--window-bg); z-index: 2; pointer-events: none; }

/* 手机宽度：收起侧栏，审阅面板缩成底部一条 */
@container (max-width: 560px) {
  .aw-body, .aw.no-rev .aw-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .aw-body > .aw-side, .aw-body > .aw-rev { display: none; }
  .aw-main { height: 420px; }
  .aw.tall .aw-main { height: 460px; }
  .aw-menu { display: inline-flex; }
  .aw-bar .ttl { text-align: left; }
  .aw-revbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-top: .5px solid var(--sep); background: var(--group); font-size: 12px; }
  .aw-revbar b { font-weight: 600; }
  .aw-revbar .go { margin-left: auto; color: var(--label-3); }
  .aw-scroll { padding: 12px 12px 6px; }
  .aw-comp { margin: 6px 10px 10px; }
  .aw-pill.hide-m { display: none; }
}

/* ---------- C：局部特写 + 编号 ---------- */
.awc { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 20px; align-items: start; font-size: 12.5px; line-height: 1.5; }
.awc-crop { position: relative; border-radius: 12px; background: var(--group); border: .5px solid var(--group-border); padding: 26px 22px 20px; }
.awc-crop .zoom { font-size: 13.5px; display: grid; gap: 12px; }
.awc-crop .aw-appr .cmd { font-size: 12.5px; }
.awc-crop .aw-comp { margin: 0; }
.awc-fade { color: var(--label-3); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.awc-rel { position: relative; }
.awc-crop .aw-mk { box-shadow: 0 0 0 2.5px var(--group); }
.awc-side { display: grid; gap: 14px; }
.awc-thumb { border-radius: 8px; border: .5px solid var(--control-border); background: var(--window-bg); height: 92px; display: grid; grid-template-columns: 22% 1fr 28%; overflow: hidden; position: relative; }
.awc-thumb > div { border-right: .5px solid var(--sep); }
.awc-thumb > div:first-child { background: var(--group); }
.awc-thumb > div:last-child { border: 0; }
.awc-thumb .hl { position: absolute; border: 1.5px solid var(--accent); border-radius: 4px; background: var(--accent-soft); }
.awc-cap { font-size: 11px; color: var(--label-3); margin-top: 4px; }
.awc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.awc li { display: grid; grid-template-columns: 19px 1fr; gap: 8px; color: var(--label-2); }
.awc li b { color: var(--label); font-weight: 600; display: block; }
.awc li .n { width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 11px/19px var(--font); text-align: center; }
/* 特写里的"菜单" */
.awc-menu { background: var(--popover); border: .5px solid var(--control-border); border-radius: 9px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); padding: 5px; min-width: 190px; }
.awc-menu div { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 6px; }
.awc-menu div small { color: var(--label-3); margin-left: auto; font-size: 11px; }
.awc-menu div.on { background: var(--accent); color: #fff; }
.awc-menu div.on small { color: rgba(255, 255, 255, .75); }
@container (max-width: 560px) {
  .awc { grid-template-columns: minmax(0, 1fr); }
  .awc-crop { padding: 22px 14px 16px; }
  .awc-crop .zoom { font-size: 13px; }
  .awc-thumb { height: 64px; width: 150px; }
}

/* ---------- App 演练布局（窗口 + 右侧步骤说明，沿用终端演练的 .guide） ---------- */
.app-run { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.app-run .aw-host { margin: 0; }
@container (max-width: 1000px) {
  .app-run { grid-template-columns: minmax(0, 1fr); }
  .app-run .guide { position: static; }
}

/* 演练时输入框里的字不变灰 */
.aw-in:disabled { color: var(--label); -webkit-text-fill-color: var(--label); opacity: 1; }