/* commander.css — Agent 指揮官 (/agent-commander) on top of agent-play.css.
   Left: the demo company's desktop (CRM / inbox / calendar / LINE / report / routing board).
   Right: the agent panel (mission, log, controls). All console surfaces, dark in both themes. */

/* company picker */
.cm-cos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,820px);margin-top:10px}
.cm-co{display:grid;gap:6px;text-align:left;padding:16px;border-radius:14px;border:1px solid var(--c-line2);background:rgba(7,18,31,.72);color:var(--c-fg2);cursor:pointer;font:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.cm-co:hover{border-color:var(--c-accent);transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(60,198,242,.55)}
.cm-co .em{font-size:30px;line-height:1}
.cm-co b{color:var(--c-fg);font-size:17px}
.cm-co small{font:600 11.5px var(--font-mono);color:var(--c-accent)}
.cm-co span{font-size:13.5px;line-height:1.65}

/* layout */
.cm-game{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);min-height:640px}
.cm-game[hidden]{display:none}
.cm-desk{min-width:0;padding:14px;border-right:1px solid var(--c-line);background:radial-gradient(70% 60% at 20% 0%,rgba(60,198,242,.08),transparent 60%),#081524}
.cm-win{display:flex;flex-direction:column;height:100%;min-height:600px;border-radius:12px;border:1px solid var(--c-line2);background:#0A1726;overflow:hidden}
.cm-apps{display:flex;gap:2px;padding:6px 6px 0;background:#0B1B2C;border-bottom:1px solid var(--c-line);overflow-x:auto;scrollbar-width:none}
.cm-app{position:relative;display:flex;align-items:center;gap:6px;padding:8px 12px;border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--c-muted);font:600 13px var(--font-sans);white-space:nowrap;cursor:pointer}
.cm-app svg{width:15px;height:15px}
.cm-app.on{background:#0A1726;color:var(--c-fg);box-shadow:inset 0 2px 0 var(--c-accent)}
.cm-app .dot{min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--c-gold);color:#1B1300;font:800 10.5px/17px var(--font-mono);text-align:center}
.cm-app .dot:empty{display:none}
.cm-screen{position:relative;flex:1;min-height:0;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:var(--c-line2) transparent}
.cm-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:700 12px var(--font-mono);letter-spacing:.12em;color:var(--c-muted)}
.cm-h .ap-demo-tag{margin-left:auto}

/* CRM table */
.cm-crm{width:100%;border-collapse:separate;border-spacing:0 5px;font-size:13.5px}
.cm-crm th{font:600 11.5px var(--font-mono);color:var(--c-muted);text-align:left;padding:0 10px 2px;white-space:nowrap}
.cm-crm td{padding:8px 10px;background:#0D2034;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);color:var(--c-fg2);vertical-align:middle;transition:background .3s,border-color .3s}
.cm-crm td:first-child{border-left:1px solid var(--c-line);border-radius:8px 0 0 8px;color:var(--c-fg);font-weight:600}
.cm-crm td:last-child{border-right:1px solid var(--c-line);border-radius:0 8px 8px 0}
.cm-crm tr.found td{background:rgba(60,198,242,.1);border-color:rgba(60,198,242,.45)}
.cm-crm tr.skipped td{background:rgba(245,185,66,.08);border-color:rgba(245,185,66,.4);color:var(--c-muted)}
.cm-crm .note{font-size:12px;color:var(--c-gold)}
.cm-tag{display:inline-block;margin:1px 3px 1px 0;padding:1px 7px;border-radius:99px;font:600 11px var(--font-sans);background:rgba(45,212,191,.16);color:var(--c-teal);animation:ap-pop .4s cubic-bezier(.3,1.6,.5,1)}
.cm-tag.skip{background:rgba(245,185,66,.18);color:var(--c-gold)}

/* inbox */
.cm-folders{display:flex;gap:6px;margin-bottom:10px}
.cm-folders span{padding:3px 10px;border-radius:99px;border:1px solid var(--c-line2);font-size:12.5px;color:var(--c-muted)}
.cm-folders span.on{border-color:var(--c-accent);color:var(--c-fg)}
.cm-mail{display:grid;gap:3px;padding:10px 12px;margin-bottom:6px;border-radius:9px;background:#0D2034;border:1px solid var(--c-line)}
.cm-mail .top{display:flex;gap:8px;font-size:12.5px;color:var(--c-muted)}
.cm-mail .top .st{margin-left:auto;font:700 11px var(--font-mono)}
.cm-mail .top .st.draft{color:var(--c-gold)}
.cm-mail .top .st.sent{color:var(--c-ok)}
.cm-mail b{color:var(--c-fg);font-size:14px}
.cm-mail p{margin:0;font-size:13px;color:var(--c-fg2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-empty{padding:22px;text-align:center;color:var(--c-muted);font-size:13.5px;border:1px dashed var(--c-line2);border-radius:10px}

/* calendar */
.cm-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cm-day{display:grid;align-content:start;gap:5px;min-height:260px;padding:8px;border-radius:9px;background:#0D2034;border:1px solid var(--c-line)}
.cm-day>b{font:700 12px var(--font-mono);color:var(--c-muted);text-align:center;margin-bottom:2px}
.cm-ev{padding:6px 7px;border-radius:7px;font-size:12px;line-height:1.45;background:rgba(148,197,230,.08);border:1px solid var(--c-line2);color:var(--c-fg2)}
.cm-ev small{display:block;font:700 10.5px var(--font-mono);color:var(--c-muted)}
.cm-ev.new{background:rgba(45,212,191,.12);border-color:rgba(45,212,191,.5);color:var(--c-fg);animation:ap-pop .45s cubic-bezier(.3,1.6,.5,1)}
.cm-ev.free{border-style:dashed;color:var(--c-muted);background:transparent}

/* LINE */
.cm-line{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:#8CABD9;min-height:100%}
.cm-bub{max-width:85%;display:grid;gap:2px}
.cm-bub small{font-size:11px;color:#1E3350;font-weight:600}
.cm-bub p{margin:0;padding:7px 11px;border-radius:4px 14px 14px 14px;background:#fff;color:#1A2633;font-size:13.5px;line-height:1.6}
.cm-bub.agent{align-self:flex-end;text-align:right}
.cm-bub.agent p{background:#86E07A;border-radius:14px 4px 14px 14px;text-align:left}
.cm-bub.boss p{background:#FFE4E4;border:1px solid #F5A3A3}

/* report */
.cm-rep{display:grid;gap:6px;padding:12px 14px;margin-bottom:10px;border-radius:10px;background:#0D2034;border:1px solid var(--c-line)}
.cm-mail.nw,.cm-bub.nw,.cm-rep.nw{animation:ap-rise .35s ease both}
.cm-rep h4 .ap-ic{width:16px;height:16px;color:var(--c-accent)}
.cm-rep h4{margin:0;display:flex;gap:8px;align-items:center;font-size:14.5px;color:var(--c-fg)}
.cm-rep h4 small{margin-left:auto;font:600 11px var(--font-mono);color:var(--c-muted)}
.cm-rep li{font-size:13px;color:var(--c-fg2)}
.cm-rep ul{margin:0;padding-left:1.1em;display:grid;gap:3px}
.cm-rep li.alert{color:var(--c-gold);font-weight:600}
.cm-rep li.alert::marker{content:"⚠ "}

/* routing board (L2) */
.cm-queue{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;margin-bottom:10px}
.cm-card{position:relative;display:grid;gap:3px;width:100%;padding:8px 10px;border-radius:9px;background:#0F2439;border:1px solid var(--c-line2);font-size:12.5px;color:var(--c-fg2);animation:ap-rise .3s ease both}
.cm-queue .cm-card{width:calc(50% - 3px)}
.cm-card .ch{font:700 10.5px var(--font-mono);color:var(--c-accent)}
.cm-card .why{font-size:11.5px;color:var(--c-teal)}
.cm-card .why b{color:var(--c-muted);font-weight:600;margin-left:4px}
.cm-card.ok{border-color:rgba(74,222,128,.55)}
.cm-card.ok::after{content:"✓";position:absolute;right:8px;top:6px;color:var(--c-ok);font-weight:800}
.cm-card.bad{border-color:rgba(248,113,113,.6)}
.cm-card.bad::after{content:"✕";position:absolute;right:8px;top:6px;color:var(--c-red);font-weight:800}
.cm-card .fix{font-size:11.5px;color:var(--c-red)}
.cm-card .pick{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.cm-card .pick button{border:1px solid var(--c-line2);background:transparent;color:var(--c-fg);border-radius:6px;padding:2px 7px;font:600 11.5px var(--font-sans);cursor:pointer}
.cm-card .pick button:hover{border-color:var(--c-gold)}
.cm-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cm-lane{display:grid;align-content:start;gap:6px;min-height:110px;padding:8px;border-radius:10px;border:1px dashed var(--c-line2);background:rgba(7,18,31,.5)}
.cm-lane>b{font:700 11.5px var(--font-mono);color:var(--c-muted)}
.cm-lane.pending{border-color:rgba(245,185,66,.55);background:rgba(245,185,66,.05)}
.cm-lane.pending>b{color:var(--c-gold)}
.cm-lane.block>b{color:var(--c-red)}

/* L3 schedule */
.cm-clock{display:flex;align-items:center;gap:14px;padding:12px 14px;margin-bottom:12px;border-radius:12px;background:#0D2034;border:1px solid var(--c-line2)}
.cm-clock .dial{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid rgba(60,198,242,.5)}
.cm-clock .dial::before{content:"";position:absolute;left:50%;top:14%;width:2px;height:36%;margin-left:-1px;background:var(--c-accent);transform-origin:50% 100%}
.cm-clock.run .dial::before{animation:ap-spin .6s linear infinite}
.cm-clock b{font:800 22px var(--font-mono);color:var(--c-fg)}
.cm-clock small{display:block;font-size:12.5px;color:var(--c-muted)}

/* panel */
.cm-panel{display:flex;flex-direction:column;min-width:0;height:680px}
.cm-mission{padding:14px 16px 12px;border-bottom:1px solid var(--c-line)}
.cm-mission .lv{font:700 11.5px var(--font-mono);letter-spacing:.14em;color:var(--c-gold)}
.cm-mission h3{margin:3px 0 4px;font-size:16px;color:var(--c-fg)}
.cm-mission p{margin:0;font-size:13.5px;line-height:1.65;color:var(--c-fg2)}
.cm-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:14px 16px;scrollbar-width:thin;scrollbar-color:var(--c-line2) transparent}
.cm-log>*{flex-shrink:0}
.cm-me{align-self:flex-end;max-width:88%;background:#0A74AE;color:#fff;border-radius:14px 4px 14px 14px;padding:7px 12px;font-size:14px;animation:ap-rise .3s ease}
.cm-sum{font:600 13px var(--font-mono);color:var(--c-ok)}
.cm-sum.gold{color:var(--c-gold)}
.cm-sum.bad{color:var(--c-red)}
.cm-ctrl{display:grid;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--c-line)}
.cm-ctrl:empty{display:none}
.cm-ctrl textarea{min-height:64px}
.cm-ctrl .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cm-ctrl .ap-chip{font-size:12.5px;padding:5px 9px}
.cm-opts{display:grid;gap:8px}
.cm-opts fieldset{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cm-opts legend{float:left;width:100%;font:600 12px var(--font-mono);color:var(--c-muted);margin-bottom:4px}
.cm-opts label{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;border:1px solid var(--c-line2);font-size:13px;color:var(--c-fg);cursor:pointer}
.cm-opts label:has(input:checked){border-color:var(--c-accent);background:rgba(60,198,242,.1)}
.cm-opts input{accent-color:#3CC6F2}

/* final (page theme) */
.cm-final-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cm-final-grid div{padding:14px;border-radius:12px;background:var(--editor);border:1px solid var(--line)}
.cm-final-grid small{display:block;font:600 11.5px var(--font-mono);color:var(--muted);letter-spacing:.08em}
.cm-final-grid b{display:block;font:900 26px/1.3 var(--font-sans);color:var(--fg)}
.cm-final-grid span{font-size:13.5px;color:var(--fg-2)}
.cm-rank{font:900 clamp(1.4rem,1rem + 1.6vw,2.1rem)/1.25 var(--font-sans);color:var(--fg)}

@media (max-width:1100px){
  .cm-game{grid-template-columns:1fr}
  .cm-desk{border-right:0;border-bottom:1px solid var(--c-line);padding:10px}
  .cm-win{min-height:0;height:460px}
  .cm-panel{height:auto}
  .cm-log{max-height:380px}
}
@media (max-width:719px){
  .cm-cos{grid-template-columns:1fr}
  .cm-cal{grid-template-columns:repeat(5,minmax(96px,1fr));overflow-x:auto}
  .cm-crm .hide-s{display:none}
  .cm-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-queue .cm-card{width:100%}
  .cm-final-grid{grid-template-columns:1fr}
}