:root { --fg:#15202b; --muted:#5b6b7a; --bg:#f4f6f8; --card:#fff; --brand:#0b6b63; --line:#dde5ea; --accent:#0b5fff; }
@media (prefers-color-scheme: dark){ :root{ --fg:#e8edf2; --muted:#9fb0bf; --bg:#0f1113; --card:#17191c; --line:#2a2d31; } }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans KR",sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; background:var(--brand); color:#fff; }
header h1 { font-size:1.1rem; margin:0; }
#who { font-size:.85rem; opacity:.9; }
section, main { max-width:900px; margin:20px auto; padding:0 16px; }
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:9px 16px; font-size:.95rem; cursor:pointer; }
button.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
button.sm { padding:6px 12px; font-size:.85rem; }
button.danger { background:#c23b3b; }
input, select { padding:9px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font-size:.95rem; }
#login-form { display:flex; flex-direction:column; gap:10px; max-width:320px; }
.err { color:#c23b3b; font-size:.85rem; }
#status { color:var(--muted); font-size:.85rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.card h3 { margin:0 0 4px; font-size:1rem; }
.sub { color:var(--muted); font-size:.85rem; margin:0 0 10px; }
.tag { display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:20px; background:var(--line); color:var(--fg); margin-left:6px; }
.on { background:#1f9d55; color:#fff; } .off { background:#99a; color:#fff; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.kv { font-size:.85rem; color:var(--muted); }
.kv b { color:var(--fg); font-weight:600; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; }
details { margin-top:8px; } summary { cursor:pointer; color:var(--accent); font-size:.9rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-top:8px; }
.grid label { display:flex; flex-direction:column; gap:4px; font-size:.75rem; color:var(--muted); }
.grid input { min-width:0; width:100%; }
dialog { border:0; border-radius:12px; padding:18px; max-width:760px; width:92%; background:var(--card); color:var(--fg); }
dialog::backdrop { background:#0008; }
pre#out { background:#0b0e11; color:#d6e2ea; padding:12px; border-radius:8px; max-height:60vh; overflow:auto; font-size:.82rem; white-space:pre-wrap; }
.dialog-actions { text-align:right; margin-top:10px; }
#terminal-dlg { width:92vw; max-width:1100px; }
.terminal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.terminal-heading h3 { margin:0; }
#terminal-screen { height:min(60vh,580px); min-height:260px; background:#10191f; padding:12px; border-radius:8px; }
.product-web-note { margin:12px 0 0; font-size:.78rem; line-height:1.6; }
@media (max-width:560px){ input,select{ width:100%; } }
a.btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; border-radius:8px; padding:6px 12px; font-size:.85rem; }

/* Product tasks are the default surface; screen support is a separate workspace. */
:root { --brand:#122b36; --accent:#087f72; }
[hidden] { display:none !important; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #36bbaa; outline-offset:3px; }
.wordmark { font-size:.95rem; letter-spacing:.2em; margin-right:14px; }
header { min-height:70px; padding:18px 32px; }
main { max-width:1240px; margin:28px auto; }
#login { margin:70px auto; max-width:420px; padding:32px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
#login-form { max-width:none; }
.eyebrow { font-size:.66rem; font-weight:700; letter-spacing:.14em; color:var(--muted); margin:0 0 9px; }
.customer-heading,.support-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.customer-heading h3 { font-size:1.12rem; }
.console-heading h2 { font-size:1.45rem; margin:0 0 8px; }
.console-heading { margin-bottom:22px; }
.card h4 { font-size:.95rem; margin:0 0 7px; }
.section-heading,.pc-support { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.section-heading { flex-wrap:wrap; }
.section-heading .row { margin:0; }
.section-heading h4 { margin:0; }
.product-workspace { border-top:1px solid var(--line); padding-top:18px; margin-top:14px; }
.product-workspace > .sub { margin-top:9px; line-height:1.65; }
.product-card { margin:12px 0; padding:16px; background:var(--bg); box-shadow:none; }
.product-card .sub { overflow-wrap:anywhere; }
.adopt-form { margin-top:12px; }
.adopt-form .grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:14px; }
.adopt-form .grid label { font-size:.82rem; gap:7px; }
.adopt-form .err:empty { display:none; }
.added-product .sub { margin-bottom:0; }
.pc-support { border-top:1px solid var(--line); padding-top:18px; margin-top:18px; }
.pc-support .sub { margin-bottom:0; line-height:1.65; }
.start-support { min-height:44px; white-space:nowrap; }
.start-support span[aria-hidden] { margin-left:10px; }
.customer-assignment { margin:6px 0 14px; }
.browser-product-note { margin:12px 0 0; line-height:1.65; }
.card { padding:22px; box-shadow:0 4px 22px #07192205; }
.card details { border-top:1px solid var(--line); padding-top:16px; margin-top:20px; }
.support-heading { margin-bottom:22px; }
.support-heading h2 { font-size:1.6rem; margin:0 0 6px; }
#support-status { color:var(--muted); font-size:.86rem; margin:0; }
#support-status.connected { color:#15927e; }
#support-workspace { max-width:1600px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:stretch; }
.screen-panel { max-width:none; padding:0; margin:0; min-width:0; }
.screen-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px 12px 0 0; padding:12px; }
.mode-switch { display:flex; padding:3px; border-radius:8px; background:var(--bg); }
.mode-switch button { border-radius:5px; background:transparent; color:var(--muted); font-size:.8rem; padding:7px 13px; }
.mode-switch button[aria-pressed="true"] { background:var(--accent); color:white; }
#control-hint { color:var(--muted); font-size:.74rem; flex:1; min-width:150px; }
#screen-stage { background:#10222a; border:1px solid #213b44; min-height:430px; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; outline:none; }
#screen-stage.controlling { box-shadow:inset 0 0 0 3px #26c3a9; }
#screen-stage:focus-visible { outline:3px solid #26c3a9; outline-offset:2px; }
#screen-stage:fullscreen { aspect-ratio:auto; background:#10222a; }
#support-screen { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; user-select:none; touch-action:none; }
#screen-placeholder { text-align:center; color:#a7bec8; padding:32px; max-width:500px; }
#screen-placeholder h3 { font-size:1rem; color:#edf7f9; font-weight:500; margin:20px 0 10px; }
#screen-placeholder p { font-size:.8rem; line-height:1.8; }
.screen-symbol { font-size:3.5rem; color:#53747e; }
.text-entry { display:flex; gap:10px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:0 0 12px 12px; }
.text-entry input { flex:1; min-width:0; font-size:.8rem; }
.text-entry button { font-size:.8rem; white-space:nowrap; }
.conversation-panel { min-width:0; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; max-height:820px; min-height:520px; }
.conversation-tabs { display:flex; border-bottom:1px solid var(--line); }
.conversation-tabs button { flex:1; color:var(--muted); background:transparent; border-radius:0; padding:19px 8px; font-size:.85rem; border-bottom:2px solid transparent; }
.conversation-tabs button[aria-selected="true"] { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.conversation { flex:1; display:flex; flex-direction:column; min-height:0; }
.conversation-note { margin:0; padding:14px 18px; background:var(--bg); font-size:.76rem; color:var(--muted); line-height:1.6; }
.messages { flex:1; overflow-y:auto; min-height:180px; padding:18px; }
.message { margin:0 28px 18px 0; padding:12px; background:var(--bg); border-radius:0 10px 10px 10px; overflow-wrap:anywhere; }
.message.operator { margin:0 0 18px 28px; background:#e6f5f1; border-radius:10px 0 10px 10px; color:#174b42; }
.message strong { font-size:.67rem; color:var(--muted); }
.message p { font-size:.84rem; margin:6px 0 0; line-height:1.7; white-space:pre-wrap; }
.message.ai { border:1px solid #c4e7dd; }
.conversation form { padding:14px; border-top:1px solid var(--line); }
.conversation textarea { width:100%; resize:vertical; max-height:160px; padding:12px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:.84rem; color:var(--fg); background:var(--bg); }
.conversation form button { width:100%; margin-top:9px; font-size:.83rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-color-scheme:dark) { .message.operator { background:#193d36; color:#daeee8; } }
@media (max-width:1000px) { .workspace-grid { grid-template-columns:minmax(0,1fr) 290px; gap:12px; } #screen-stage { min-height:320px; } }
@media (max-width:760px) {
  header { padding:16px; } .wordmark { display:block; margin:0 0 5px; font-size:.72rem; }
  main { margin:18px auto; } .workspace-grid { grid-template-columns:1fr; }
  .support-heading { align-items:flex-start; } .support-heading .row { justify-content:flex-end; }
  .support-heading h2 { font-size:1.2rem; } .support-heading button { font-size:.75rem; padding:8px; }
  #screen-stage { min-height:230px; } .conversation-panel { min-height:430px; max-height:560px; }
  .start-support span[aria-hidden] { margin-left:6px; } .customer-heading h3 { font-size:.95rem; }
}

.header-actions { display:flex; align-items:center; gap:16px; }
.support-alert-banner { max-width:1180px; margin:22px auto 0; padding:18px 22px; border:1px solid #d7b75e; border-left:4px solid #b28415; border-radius:10px; background:#fff9e8; color:#473c22; }
.support-alert-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.support-alert-heading > strong { font-size:.92rem; line-height:1.6; }
.support-alert-heading .row { flex-wrap:wrap; }
#support-alert-note { font-size:.76rem; line-height:1.65; margin:9px 0; color:inherit; }
#support-alert-details summary { cursor:pointer; font-size:.79rem; padding:4px 0; }
#support-alert-list { list-style:none; padding:0; margin:9px 0 0; max-height:220px; overflow:auto; }
#support-alert-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid #d7b75e70; }
.support-alert-name { min-width:0; font-size:.82rem; overflow-wrap:anywhere; }
.support-alert-mute { flex-shrink:0; }
.support-alert-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; }
.support-alert-state { white-space:normal; font-size:.74rem; }
.support-alert-state.alert-waiting { color:#72540b; background:#fff1c6; }
@media (prefers-color-scheme:dark) {
  .support-alert-banner { background:#302b20; color:#f0dcad; border-color:#867041; }
  .support-alert-state.alert-waiting { background:#4d3e1c; color:#f0d88e; }
}
@media (max-width:1220px) { .support-alert-banner { margin-left:20px; margin-right:20px; } }
@media (max-width:560px) {
  .support-alert-banner { padding:14px; margin:16px 16px 0; }
  .support-alert-heading { gap:8px; }
  .support-alert-heading .row { gap:7px; }
  .support-alert-heading button,.support-alert-mute { font-size:.73rem; padding:8px; }
  .support-alert-row { align-items:flex-start; }
}
#language-select { width:auto; max-width:150px; background:#fff; color:#15202b; font-size:.85rem; padding:7px 9px; }
header h1 { min-width:0; }
@media (max-width:560px) {
  .adopt-form .grid { grid-template-columns:1fr; }
  header { gap:12px; align-items:flex-start; }
  .header-actions { flex-direction:column-reverse; align-items:flex-end; gap:6px; }
  #language-select { max-width:122px; }
  #who { font-size:.72rem; text-align:right; }
  .customer-heading,.pc-support { flex-wrap:wrap; }
}

.selected-target { margin:14px 0; padding:16px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; }
.target-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.target-heading > div { min-width:0; flex:1 1 220px; }
.target-heading h4,.target-details { overflow-wrap:anywhere; }
.target-heading .eyebrow { margin-bottom:6px; }
.target-details { margin:0; }
.target-note { margin:10px 0 0; line-height:1.6; }

.ai-manager-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; }
.ai-manager-heading h2 { font-size:1.2rem; margin:0; }
#ai-manager { max-width:940px; max-height:90vh; overflow-y:auto; }
#ai-manager > .sub { margin:14px 0; line-height:1.6; }
.ai-manager-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; }
.ai-directory { min-width:0; border-right:1px solid var(--line); padding-right:18px; }
#ai-agent-list { margin-top:14px; }
.ai-profile-item { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:6px; width:100%; margin-bottom:8px; overflow-wrap:anywhere; }
.ai-profile-item span { font-size:.75rem; }
.ai-profile-item[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
#ai-profile-form { min-width:0; }
#ai-profile-form h3 { margin:0 0 14px; font-size:1rem; }
#ai-profile-form .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ai-field { display:flex; flex-direction:column; gap:7px; margin:14px 0; font-size:.82rem; }
.ai-field input,.ai-field textarea { min-width:0; width:100%; }
.ai-field textarea { font:inherit; line-height:1.6; border:1px solid var(--line); border-radius:8px; padding:10px; color:var(--fg); background:var(--card); resize:vertical; }
.ai-field .sub { margin:0; font-size:.75rem; }
.check-label { display:flex; align-items:flex-start; gap:8px; font-size:.8rem; line-height:1.5; }
.check-label input { width:16px; height:16px; padding:0; flex:0 0 16px; margin:2px 0 0; accent-color:var(--accent); }
.danger-text { color:#c23b3b !important; }
.ai-selection { display:flex; flex-direction:column; gap:9px; padding:14px 18px; border-bottom:1px solid var(--line); }
.ai-selection > label:first-child { font-size:.75rem; color:var(--muted); }
.ai-selection select { min-width:0; width:100%; font-size:.82rem; }
#panel-ai .messages { min-height:100px; }
#ai-execution-note { margin:0; font-size:.75rem; line-height:1.55; }
#ai-run-panel { padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg); }
.ai-run-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; }
#ai-run-events { max-height:185px; overflow:auto; padding-left:20px; margin:10px 0 0; }
#ai-run-events:empty,#ai-run-error:empty { display:none; }
#ai-run-events li { padding:5px 0; font-size:.72rem; overflow-wrap:anywhere; }
#ai-run-events p { margin:4px 0; white-space:pre-wrap; font:inherit; line-height:1.5; }
#ai-run-capability { margin:8px 0 0; font-size:.72rem; }
.conversation-panel:has(#ai-run-panel:not([hidden])) { max-height:1100px; }
@media (max-width:640px) {
  .ai-manager-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .ai-directory { border-right:0; border-bottom:1px solid var(--line); padding:0 0 12px; }
  #ai-agent-list { display:flex; gap:8px; overflow-x:auto; max-height:160px; }
  .ai-profile-item { min-width:140px; flex:0 0 160px; }
  #ai-profile-form .grid { grid-template-columns:minmax(0,1fr); }
  .ai-manager-heading h2 { font-size:1.05rem; }
  .conversation-panel:has(#panel-ai:not([hidden])) { max-height:none; }
}