@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #f9f9f9;
  --muted: #868686;
  --panel: #100e0f;
  --panel-2: #181818;
  --line: rgba(255,255,255,.09);
  --acid: #00d2ff;
  --acid-soft: rgba(0,210,255,.14);
  --orange: #ff783d;
  --blue: #5aa8ff;
  --red: #ff5b61;
  --sidebar: 338px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: #100e0f; font-family: Inter, system-ui, sans-serif; }
button, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-columns: var(--sidebar) 1fr; }

.sidebar {
  min-width: 0; position: relative; z-index: 20; display: flex; flex-direction: column;
  background: linear-gradient(160deg, #181818 0%, #100e0f 75%); border-right: 1px solid var(--line);
  box-shadow: 14px 0 35px rgba(0,0,0,.22); padding: 28px 22px 20px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 0 2px 31px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 72px; height: 46px; flex: 0 0 auto; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand p { font-size: 17px; font-weight: 700; letter-spacing: .19em; margin: 0 0 1px; }
.brand span { color: var(--muted); text-transform: uppercase; font: 500 9px DM Mono, monospace; letter-spacing: .16em; }
.sidebar-heading { display: flex; justify-content: space-between; align-items: end; margin-top: 27px; }
.eyebrow { color: var(--acid); font: 500 9px DM Mono, monospace; letter-spacing: .17em; margin: 0 0 7px; }
.sidebar h1 { font-size: 24px; letter-spacing: -.04em; margin: 0; }
.asset-count { color: #aab3af; background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 20px; padding: 5px 9px; font: 500 9px DM Mono, monospace; text-transform: uppercase; }
.hint { color: #707a76; font-size: 11px; margin: 8px 0 18px; }

.resource-list { display: grid; gap: 8px; }
.resource-card {
  cursor: grab; user-select: none; display: grid; grid-template-columns: 43px 1fr; gap: 12px; align-items: center;
  padding: 11px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.026);
  transition: .2s ease; position: relative; overflow: hidden;
}
.resource-card::after { content: ''; position: absolute; inset: 0; border-left: 2px solid var(--resource-color); opacity: 0; transition: .2s; pointer-events: none; }
.resource-card:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.16); transform: translateX(3px); }
.resource-card:hover::after { opacity: 1; }
.resource-card:active { cursor: grabbing; }
.resource-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 8px; color: var(--resource-color); background: color-mix(in srgb, var(--resource-color) 13%, transparent); }
.resource-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.resource-name { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.resource-meta { display: block; color: #707a76; font: 400 9px DM Mono, monospace; text-transform: uppercase; letter-spacing: .04em; }
.drag-dots { color: #53605a; font-size: 17px; letter-spacing: -1px; writing-mode: vertical-lr; }

.activity-panel { flex: 1; margin-top: 27px; min-height: 110px; border-top: 1px solid var(--line); padding-top: 18px; }
.section-title { color: #7f8985; display: flex; justify-content: space-between; align-items: center; font: 500 9px DM Mono, monospace; letter-spacing: .14em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); }
.empty-events { text-align: center; margin-top: 27px; color: #626d68; }
.empty-events p { font-size: 11px; margin: 11px 0 3px; }
.empty-events small { font-size: 9px; }
.pulse-ring { display: inline-block; width: 24px; height: 24px; border: 1px solid #3a3a3a; border-radius: 50%; box-shadow: inset 0 0 0 6px #141414; position: relative; }
.pulse-ring::after { content: ''; position: absolute; width: 4px; height: 4px; background: #56615c; border-radius: 50%; inset: 9px; }
.event-card { padding: 11px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: start; }
.event-card i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin-top: 4px; box-shadow: 0 0 8px rgba(255,120,61,.5); }
.event-card strong { display:block; font-size: 10px; margin-bottom:4px; }.event-card span,.event-card time {color:#69736f;font:400 8px DM Mono,monospace}.event-card time{color:var(--acid)}
.system-status { border-top: 1px solid var(--line); padding-top: 17px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; }
.status-light { width: 6px; height: 6px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 8px rgba(0,210,255,.55); }
.system-status strong, .system-status small { display: block; }.system-status strong { font-size: 9px; margin-bottom: 3px; }.system-status small { color: #59635f; font-size: 8px; }
.system-status button { border: 0; background: transparent; color: #65706b; cursor: pointer; }

.map-panel { --call-panel-width: 520px; min-width: 0; position: relative; overflow: hidden; background: #d9ddd8; }
#map { position: absolute; inset: 0; z-index: 1; background: #cdd2cc; }
.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-bottom-right { right: 24px; bottom: 27px; transition: right .35s cubic-bezier(.2,.9,.25,1); }
.map-panel.call-open .maplibregl-ctrl-bottom-right { right: calc(var(--call-panel-width) + 30px); }
.map-panel.resizing .maplibregl-ctrl-bottom-right { transition: none; }
.maplibregl-ctrl-group { overflow: hidden; border: 0 !important; border-radius: 5px !important; background: rgba(15,20,18,.94) !important; box-shadow: 0 4px 16px rgba(0,0,0,.18) !important; }
.maplibregl-ctrl-group button { width: 35px; height: 35px; background-color: transparent !important; border-color: rgba(255,255,255,.1) !important; }
.maplibregl-ctrl-group button:hover { background-color: rgba(255,255,255,.08) !important; }
.maplibregl-ctrl-icon { filter: invert(1); opacity: .9; }
.maplibregl-ctrl-attrib { color: #56605c; font-size: 8px; background: rgba(238,241,236,.8) !important; }
.maplibregl-ctrl-attrib a { color: #56605c; }
.glass { background: rgba(12,17,15,.88); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,.11); box-shadow: 0 8px 30px rgba(0,0,0,.19); }
.map-header { position: absolute; z-index: 500; top: 22px; left: 24px; right: 24px; border-radius: 10px; height: 70px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.map-header h2 { font-size: 16px; margin: 0; letter-spacing: -.02em; }.map-header .eyebrow { margin-bottom: 4px; color: #8d9792; }
.map-header-actions { display: flex; align-items: center; gap: 16px; pointer-events: auto; }.time-block { text-align: right; border-right: 1px solid var(--line); padding-right: 17px; }.time-block span { display:block;color:#6f7a75;font:500 8px DM Mono,monospace;letter-spacing:.1em;margin-bottom:4px}.time-block strong{font:500 12px DM Mono,monospace;letter-spacing:.05em}
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.04); cursor: pointer; }.icon-button:hover{background:rgba(255,255,255,.09)}.icon-button svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.map-legend { position: absolute; z-index: 500; left: 24px; bottom: 25px; display: flex; gap: 16px; border-radius: 7px; padding: 9px 11px; color: #a0aaa5; font: 400 8px DM Mono,monospace; text-transform: uppercase; letter-spacing: .04em; }
.map-legend span { display:flex;align-items:center;gap:7px}.legend-line{display:inline-block;width:15px;border-top:2px dashed var(--acid)}.legend-call{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 6px var(--orange)}

.resource-marker { width: 52px; height: 68px; background: transparent !important; border: 0 !important; }
.marker-body { width: 41px; height: 41px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); background: #100e0f; border: 2px solid var(--marker-color); box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.72); display:grid;place-items:center; }
.marker-body span { transform: rotate(45deg); color: var(--marker-color); font: 700 13px DM Mono,monospace; }
.marker-label { position:absolute;top:46px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#0d1211;color:#e8eeeb;padding:4px 7px;border-radius:4px;font:500 8px DM Mono,monospace;box-shadow:0 2px 8px rgba(0,0,0,.25) }
.resource-action-popup .maplibregl-popup-content{min-width:210px;padding:12px;background:#100e0f;color:#f9f9f9;border:1px solid rgba(255,255,255,.13);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35)}.resource-action-popup .maplibregl-popup-tip{border-top-color:#100e0f!important;border-bottom-color:#100e0f!important}.resource-action-popup .maplibregl-popup-close-button{top:7px;right:8px;width:22px;height:22px;color:#868686;font-size:18px;line-height:20px;border-radius:4px}.resource-action-popup .maplibregl-popup-close-button:hover{background:rgba(255,255,255,.08);color:#fff}.resource-action-card>div span,.resource-action-card>div strong,.resource-action-card>div small{display:block}.resource-action-card>div span{color:var(--acid);font:500 7px DM Mono,monospace;letter-spacing:.14em;margin-bottom:5px}.resource-action-card>div strong{padding-right:18px;font-size:11px}.resource-action-card>div small{margin-top:4px;color:#868686;font:400 8px DM Mono,monospace;text-transform:uppercase}.resource-action-card button{width:100%;margin-top:11px;padding:8px;border:1px solid rgba(255,91,97,.45);border-radius:5px;background:rgba(255,91,97,.08);color:#ff7378;font-size:9px;font-weight:600;cursor:pointer}.resource-action-card button:hover{background:#ff5b61;color:#100e0f;border-color:#ff5b61}
.call-marker { width:20px;height:20px;background:transparent!important;border:0!important}.call-marker div{width:20px;height:20px;border-radius:50%;background:var(--orange);border:4px solid #fff;box-shadow:0 0 0 5px rgba(255,120,61,.25),0 3px 10px rgba(0,0,0,.3);animation:callPulse 2s infinite}@keyframes callPulse{50%{box-shadow:0 0 0 10px rgba(255,120,61,0),0 3px 10px rgba(0,0,0,.3)}}

.call-prompt { z-index: 600; position: absolute; width: 350px; min-height: 68px; display: grid; grid-template-columns: 36px 1fr auto 20px; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 9px; transform: translate(-50%, calc(-100% - 18px)); }
.call-prompt[hidden] { display:none; }.prompt-pin{width:34px;height:34px;border-radius:7px;background:rgba(255,120,61,.14);color:var(--orange);display:grid;place-items:center}.prompt-pin svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7}.call-prompt strong,.call-prompt span{display:block}.call-prompt strong{font-size:11px;margin-bottom:4px}.call-prompt span{color:#7c8681;font-size:8px}.call-prompt>button:not(.prompt-close){border:0;background:var(--acid);color:#11150e;border-radius:6px;padding:9px 11px;font-size:9px;font-weight:700;cursor:pointer}.prompt-close,.drawer-close{background:transparent;border:0;color:#6b7571;font-size:20px;cursor:pointer;padding:0}

.call-drawer { position: absolute; z-index: 700; top: 108px; right: 18px; bottom: 18px; width: min(var(--call-panel-width), calc(100% - 36px)); height: auto; overflow-y: auto; overscroll-behavior: contain; border-radius: 13px; background: rgba(16,14,15,.97); backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.12); box-shadow: none; padding: 19px 22px 21px; transform: translateX(calc(100% + 30px)); opacity: 0; visibility:hidden; transition: transform .35s cubic-bezier(.2,.9,.25,1), opacity .25s, visibility .35s; }
.drawer-resize-handle{position:absolute;z-index:3;left:0;top:0;bottom:0;width:10px;cursor:col-resize;touch-action:none}.drawer-resize-handle span{position:absolute;left:3px;top:50%;width:3px;height:46px;border-radius:3px;background:#484848;transform:translateY(-50%);transition:.2s}.drawer-resize-handle:hover span,.drawer-resize-handle:focus span,.map-panel.resizing .drawer-resize-handle span{height:64px;background:var(--acid);box-shadow:0 0 10px rgba(0,210,255,.35)}
.call-drawer.open { transform:translateX(0);opacity:1;visibility:visible}.drawer-handle{display:none;width:38px;height:3px;border-radius:3px;background:#46504c;margin:-9px auto 12px}.drawer-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}.call-title{display:flex;align-items:center;gap:12px}.call-badge{display:grid;place-items:center;width:35px;height:35px;background:var(--orange);color:#17120f;border-radius:7px;font:700 10px DM Mono,monospace}.call-title h3{font-size:14px;margin:0}.call-title .eyebrow{color:#75807b;margin-bottom:3px}.drawer-content{display:grid;grid-template-columns:1fr;gap:18px;padding-top:17px}.transcript-wrap{display:flex;flex-direction:column;min-height:0}.transcript-wrap label{color:#7b8681;font:500 8px DM Mono,monospace;letter-spacing:.1em;margin-bottom:8px}.transcript-wrap textarea{resize:vertical;height:118px;min-height:87px;max-height:190px;border:1px solid var(--line);border-radius:7px;background:#141414;color:#f9f9f9;padding:11px;font-size:11px;line-height:1.55;outline:none}.transcript-wrap textarea:focus{border-color:rgba(0,210,255,.5);box-shadow:0 0 0 3px rgba(0,210,255,.08)}.transcript-wrap textarea::placeholder{color:#535353}.suggestions{display:flex;align-items:center;gap:6px;margin:8px 0;flex-wrap:wrap}.suggestions span{color:#686868;font-size:8px}.suggestions button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#a4a4a4;border-radius:12px;font-size:8px;padding:4px 7px;cursor:pointer}.suggestions button:hover{border-color:#686868;color:#fff}.recommend-button{margin-top:3px;height:39px;border:0;border-radius:7px;background:var(--acid);color:#100e0f;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:700;cursor:pointer;transition:.2s}.recommend-button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.recommend-button:disabled{opacity:.25;cursor:not-allowed}.recommend-button svg{width:15px;fill:none;stroke:currentColor;stroke-width:2}.recommendation{min-width:0;border-left:0;border-top:1px solid var(--line);padding:17px 0 0;overflow:visible;min-height:220px}.recommendation-empty{height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#686868}.recommendation-empty p{font-size:10px;margin:13px 0 4px;color:#a4a4a4}.recommendation-empty span{font-size:8px}.radar-icon{position:relative;width:40px;height:40px;border:1px solid #3a3a3a;border-radius:50%}.radar-icon::before,.radar-icon::after{content:'';position:absolute;border:1px solid #3a3a3a;border-radius:50%;inset:7px}.radar-icon::after{inset:15px;background:var(--acid);border:0;box-shadow:0 0 8px var(--acid)}.radar-icon i{position:absolute;width:1px;background:#3a3a3a;height:100%;left:50%}.radar-icon i:nth-child(2){transform:rotate(60deg)}.radar-icon i:nth-child(3){transform:rotate(-60deg)}
.rec-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:11px}.rec-head p{margin:0 0 3px;color:var(--acid);font:500 8px DM Mono,monospace;letter-spacing:.12em}.rec-head h4{font-size:14px;margin:0}.confidence{border:1px solid rgba(0,210,255,.28);background:var(--acid-soft);color:var(--acid);border-radius:12px;padding:4px 7px;font:500 8px DM Mono,monospace}.deployment-row{display:grid;grid-template-columns:35px 1fr auto;gap:10px;align-items:center;padding:9px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:7px;margin-bottom:6px}.deployment-icon{width:35px;height:35px;border-radius:6px;display:grid;place-items:center;background:color-mix(in srgb,var(--deployment-color) 13%,transparent);color:var(--deployment-color);font:700 11px DM Mono,monospace}.deployment-row strong,.deployment-row span{display:block}.deployment-row strong{font-size:10px;margin-bottom:3px}.deployment-row span{color:#868686;font-size:8px}.eta{text-align:right}.eta b{display:block;color:var(--acid);font:600 13px DM Mono,monospace}.eta small{color:#686868;font-size:7px;text-transform:uppercase}.followup-label{color:#868686;font:500 7px DM Mono,monospace;letter-spacing:.1em;margin:9px 0 6px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.metric{background:#141414;border:1px solid var(--line);border-radius:7px;padding:9px}.metric strong{display:block;color:var(--acid);font:600 16px DM Mono,monospace;margin-bottom:2px}.metric span{color:#868686;font-size:7px;line-height:1.3;display:block}.deploy-button{width:100%;margin-top:9px;height:32px;border:1px solid var(--acid);border-radius:6px;background:transparent;color:var(--acid);font-size:9px;font-weight:700;cursor:pointer}.deploy-button:hover{background:var(--acid);color:#100e0f}.deploy-button.deployed{border-color:#484848;color:#868686;cursor:default}
.response-rationale{margin-bottom:10px;padding:10px 11px;border-left:2px solid var(--acid);border-radius:0 6px 6px 0;background:rgba(0,210,255,.065)}.response-rationale span{display:block;color:var(--acid);font:500 8px DM Mono,monospace;letter-spacing:.12em;margin-bottom:6px}.response-rationale p{margin:0;color:#d9d9d9;font-size:10px;line-height:1.6}
.response-rationale.time-impact{margin-top:10px;margin-bottom:0}
.response-rationale.time-impact p+p{margin-top:7px;padding-top:7px;border-top:1px solid rgba(0,210,255,.13)}
.transcript-wrap textarea:focus{box-shadow:0 0 0 3px rgba(0,210,255,.08)}
.metrics{grid-template-columns:1fr}
.toast{position:absolute;z-index:900;top:108px;right:25px;background:#100e0f;color:#f9f9f9;border:1px solid var(--line);border-left:3px solid var(--acid);border-radius:6px;padding:10px 13px;font-size:10px;box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}
.drop-overlay{position:absolute;z-index:800;inset:10px;border:2px dashed var(--acid);border-radius:12px;background:rgba(0,210,255,.08);pointer-events:none;display:grid;place-items:center}.drop-overlay span{background:#100e0f;color:var(--acid);padding:12px 18px;border-radius:7px;font:600 11px DM Mono,monospace;box-shadow:0 5px 20px rgba(0,0,0,.3)}

/* Compress vertical rhythm on shorter displays so the full dashboard stays in one viewport. */
@media (max-height: 900px) and (min-width: 591px) {
  .sidebar { padding-top: 18px; padding-bottom: 14px; }
  .brand { padding-bottom: 17px; }
  .sidebar-heading { margin-top: 17px; }
  .hint { margin: 6px 0 11px; }
  .resource-list { gap: 6px; }
  .resource-card { padding: 7px 9px; }
  .resource-icon { width: 37px; height: 37px; }
  .activity-panel { margin-top: 15px; padding-top: 12px; }
  .empty-events { margin-top: 15px; }
  .call-drawer { top: 100px; bottom: 10px; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .drawer-topline { padding-bottom: 10px; }
  .drawer-content { padding-top: 11px; }
}

@media (max-height: 720px) and (min-width: 591px) {
  .sidebar { padding-top: 12px; }
  .brand { padding-bottom: 10px; }
  .brand-mark { width: 58px; height: 36px; }
  .sidebar-heading { margin-top: 10px; }
  .sidebar-heading .eyebrow, .hint { display: none; }
  .resource-list { margin-top: 9px; gap: 4px; }
  .resource-card { padding: 5px 8px; }
  .resource-icon { width: 32px; height: 32px; }
  .activity-panel { margin-top: 9px; padding-top: 9px; }
  .empty-events { margin-top: 8px; }
  .empty-events small { display: none; }
  .system-status { padding-top: 9px; }
  .map-header { top: 12px; }
  .call-drawer { top: 84px; bottom: 8px; height: auto; }
}

@media (max-width: 820px) {
  :root{--sidebar:250px}.sidebar{padding:20px 14px 15px}.resource-card{grid-template-columns:36px 1fr;padding:8px;gap:8px}.resource-icon{width:36px;height:36px}.brand{padding-bottom:20px}.map-header{left:14px;right:14px}.call-drawer{left:auto;right:8px;top:100px;bottom:8px;width:min(var(--call-panel-width),calc(100% - 16px));height:auto;padding:15px}.drawer-content{grid-template-columns:1fr;height:auto;overflow:visible}.recommendation{border-left:0;border-top:1px solid var(--line);padding:14px 0 0;min-height:240px;overflow:visible}.drawer-handle{display:none}.call-prompt{width:310px}.map-legend{display:none}}
@media (max-width: 590px) {
  .app-shell{grid-template-columns:1fr}.sidebar{position:absolute;left:10px;top:103px;z-index:650;width:210px;max-height:calc(100% - 120px);border-radius:10px;padding:13px;transform:translateX(calc(-100% - 15px));transition:.25s}.sidebar.mobile-open{transform:translateX(0)}.brand,.sidebar-heading,.hint,.activity-panel,.system-status{display:none}.resource-list{gap:5px}.map-header{top:10px}.map-header::before{content:'ASSETS';pointer-events:auto;cursor:pointer;color:var(--acid);font:600 9px DM Mono,monospace;border:1px solid rgba(0,210,255,.3);padding:7px;border-radius:5px;margin-right:10px}.map-header>div:first-child{margin-right:auto}.time-block{display:none}.call-drawer{top:90px;right:8px;bottom:8px;width:calc(100% - 16px);height:auto}.drawer-resize-handle{display:none}.map-panel.call-open .maplibregl-ctrl-bottom-right{display:none}.call-prompt{width:290px;grid-template-columns:32px 1fr auto}.call-prompt .prompt-close{display:none}}