/* ============================================================
   VARDAN OS — SURFACE ENGINE P1 (Task 5)
   Overlay workspace above cockpit. Render-only. Human control wins.
   Tokens inherit vardan_os.html vars; fallbacks defined here.
   ============================================================ */

#surface-layer{position:absolute;inset:0;z-index:60;display:none;pointer-events:none}
#surface-layer.surface-active{display:block}

/* ---- surface chrome ---- */
.surface-view{position:absolute;inset:0;display:flex;flex-direction:column;
  pointer-events:auto;background:
    radial-gradient(1200px 600px at 50% 42%, rgba(212,175,55,.05), transparent 60%),
    color-mix(in srgb, var(--bg-deep,#070b14) 88%, transparent);
  backdrop-filter:blur(6px);animation:surfaceIn .28s ease-out}
@keyframes surfaceIn{from{opacity:0;transform:scale(.985) translateY(8px)}
  to{opacity:1;transform:none}}

.surface-topbar{display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid rgba(0,240,255,.14);background:rgba(7,11,20,.72)}
.surface-kind-badge{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan,#00F0FF);border:1px solid rgba(0,240,255,.35);border-radius:4px;
  padding:3px 8px;background:rgba(0,240,255,.06)}
.surface-title{font-size:15px;font-weight:600;color:var(--ink,#EAF2FF);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surface-state-chip{font-size:10px;padding:3px 8px;border-radius:999px;letter-spacing:.08em}
.surface-state-chip[data-state="LIVE"]{color:#22d3a5;border:1px solid rgba(34,211,165,.4);background:rgba(34,211,165,.07)}
.surface-state-chip[data-state="OPENING"]{color:var(--gold,#D4AF37);border:1px solid rgba(212,175,55,.4);background:rgba(212,175,55,.07);animation:pulseGold 1.2s ease-in-out infinite}
.surface-state-chip[data-state="BACKGROUND"]{color:#8aa0bf;border:1px solid rgba(138,160,191,.3);background:rgba(138,160,191,.06)}
@keyframes pulseGold{50%{opacity:.45}}

.surface-actions{display:flex;gap:8px}
.surface-btn{cursor:pointer;font:inherit;font-size:12px;color:var(--ink,#EAF2FF);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;padding:6px 12px;transition:border-color .15s,background .15s}
.surface-btn:hover{border-color:rgba(0,240,255,.5);background:rgba(0,240,255,.06)}

/* ---- body / universal viewer ---- */
.surface-body{flex:1;overflow:auto;padding:24px 28px;color:var(--ink,#EAF2FF)}
.surface-body h1,.surface-body h2,.surface-body h3{color:var(--gold,#D4AF37);margin:.2em 0 .4em}
.surface-body table{width:100%;border-collapse:collapse;margin:12px 0}
.surface-body th{color:var(--cyan,#00F0FF);text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.surface-body th,.surface-body td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.surface-body code{background:rgba(0,240,255,.08);border:1px solid rgba(0,240,255,.2);
  border-radius:4px;padding:2px 6px;font-family:ui-monospace,monospace;font-size:12px;color:#9fe9ff}
.surface-body pre{background:rgba(0,0,0,.45);border:1px solid rgba(0,240,255,.16);
  border-radius:8px;padding:14px;overflow:auto}

.demo-chip{position:absolute;top:64px;left:28px;font-size:10px;letter-spacing:.14em;
  color:#ffb84d;border:1px dashed rgba(255,184,77,.5);background:rgba(255,184,77,.07);
  padding:4px 10px;border-radius:999px;text-transform:uppercase}

/* ---- agent activity ---- */
.agent-task-row{display:flex;align-items:center;gap:12px;padding:9px 12px;
  border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--cyan,#00F0FF);
  border-radius:6px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.agent-task-row[data-status="RUNNING"]{border-left-color:#22d3a5}
.agent-task-row[data-status="FAILED"]{border-left-color:#ff5470}
.agent-task-row[data-status="COMPLETED"]{border-left-color:var(--gold,#D4AF37)}
.agent-task-id{font-family:ui-monospace,monospace;font-size:12px;color:var(--cyan,#00F0FF)}
.agent-task-line{flex:1;font-size:12px;color:#b8c6dd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- mission room & why layer styles ---- */
.mission-room-container, .why-layer-container { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.mission-card, .why-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(0,240,255,0.15); border-radius: 8px; padding: 14px 18px; backdrop-filter: blur(10px); }
.card-label { font-size: 10px; letter-spacing: 0.14em; color: var(--cyan, #00F0FF); text-transform: uppercase; margin-bottom: 6px; }
.card-value { font-size: 15px; color: #FFFFFF; font-weight: 500; }
.card-value-sm { font-size: 13px; color: #D4AF37; font-family: ui-monospace, monospace; }

/* Stage Pipeline */
.mission-stage-pipeline { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 12px 16px; margin: 8px 0; }
.stage-node { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.45; transition: opacity 0.2s; }
.stage-node.stage-active { opacity: 1; }
.stage-node.stage-completed { opacity: 0.85; }
.stage-dot { width: 10px; height: 10px; border-radius: 50%; background: #475569; border: 2px solid #0f172a; }
.stage-active .stage-dot { background: #00F0FF; box-shadow: 0 0 8px #00F0FF; }
.stage-completed .stage-dot { background: #22d3a5; }
.stage-name { font-size: 9.5px; letter-spacing: 0.1em; color: #e2e8f0; font-weight: 600; }

/* Task rows & log box */
.mission-task-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(255,255,255,0.02); border-left: 3px solid #38bdf8; border-radius: 4px; margin-bottom: 6px; font-size: 12px; }
.task-status-pill { font-size: 9px; padding: 2px 6px; border-radius: 4px; background: rgba(0,240,255,0.1); color: #00F0FF; border: 1px solid rgba(0,240,255,0.3); font-weight: 600; }
.task-agent { font-size: 11px; color: #D4AF37; margin-left: auto; }
.mission-log-box { background: rgba(0,0,0,0.6); border: 1px solid rgba(0,240,255,0.12); border-radius: 6px; padding: 10px; font-family: ui-monospace, monospace; font-size: 11px; color: #94a3b8; max-height: 180px; overflow-y: auto; }

/* Why layer */
.why-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(212,175,55,0.2); padding-bottom: 10px; }
.why-title { font-size: 16px; color: #D4AF37; margin: 0; }
.confidence-badge { font-size: 11px; font-weight: 700; color: #00F0FF; border: 1px solid #00F0FF; padding: 3px 8px; border-radius: 12px; background: rgba(0,240,255,0.08); }
.reasons-list { margin: 4px 0 0 18px; padding: 0; color: #e2e8f0; font-size: 13px; line-height: 1.6; }
.why-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.risk-pill { font-size: 11px; font-weight: 700; display: inline-block; padding: 3px 10px; border-radius: 4px; }
.risk-pill[data-risk="low"] { background: rgba(34,211,165,0.15); color: #22d3a5; border: 1px solid #22d3a5; }
.risk-pill[data-risk="medium"] { background: rgba(212,175,55,0.15); color: #D4AF37; border: 1px solid #D4AF37; }
.risk-pill[data-risk="high"] { background: rgba(255,84,112,0.15); color: #ff5470; border: 1px solid #ff5470; }

/* Control Handoff */
.why-control-handoff { display: flex; align-items: center; gap: 14px; background: rgba(212,175,55,0.06); border: 1px solid rgba(212,175,55,0.3); border-radius: 8px; padding: 12px 18px; margin-top: 8px; }
.control-label { font-size: 11px; font-weight: 700; color: #D4AF37; letter-spacing: 0.1em; }
.btn-approve { background: #22d3a5; color: #000; font-weight: 700; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; transition: transform 0.1s; }
.btn-approve:hover { transform: translateY(-1px); box-shadow: 0 0 10px rgba(34,211,165,0.4); }
.btn-reject { background: rgba(255,84,112,0.15); color: #ff5470; border: 1px solid #ff5470; font-weight: 600; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.btn-reject:hover { background: rgba(255,84,112,0.3); }

/* ---- return-to-Jerry hint ---- */
#surface-back-fab{position:absolute;top:18px;right:20px;z-index:61;display:none;
  cursor:pointer;font-size:11px;letter-spacing:.1em;color:var(--gold,#D4AF37);
  border:1px solid rgba(212,175,55,.45);background:rgba(7,11,20,.8);border-radius:999px;
  padding:7px 14px;text-transform:uppercase}
#surface-back-fab:hover{background:rgba(212,175,55,.1)}
#surface-back-fab.visible{display:block}

@media (max-width:760px){
  .surface-body{padding:16px}
  #surface-back-fab{top:auto;bottom:86px;right:14px}
}