/* Echo911 Guardian Angel Dispatch Console */
:root {
  --bg: #0b0b0f;
  --surface: #141419;
  --surface-2: #1c1c24;
  --border: #2a2a35;
  --text: #e8e8ed;
  --text-dim: #888;
  --text-muted: #555;
  --primary: #3b82f6;
  --primary-dim: rgba(59,130,246,0.15);
  --success: #22c55e;
  --success-dim: rgba(34,197,94,0.15);
  --danger: #ef4444;
  --danger-dim: rgba(239,68,68,0.15);
  --white: #fff;
  --radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; height:100vh; overflow:hidden; display:flex; flex-direction:column; }
.hidden { display:none !important; }

/* ===== Header ===== */
.header { display:flex; align-items:center; gap:1rem; padding:0.5rem 1rem; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
.logo-link { display:block; line-height:0; flex-shrink:0; }
.logo { display:block; width:120px; height:34px; object-fit:contain; }
.header-title { font-size:1rem; font-weight:600; color:var(--white); flex:1; }
.header-subtitle { font-weight:400; color:var(--text-dim); font-size:0.85rem; margin-left:0.4rem; }
.btn-icon { display:inline-flex; align-items:center; gap:0.3rem; }

/* ===== LOBBY ===== */
.lobby { flex:1; overflow-y:auto; padding:2rem; }
.lobby-title { margin:0 0 1.5rem; font-size:1.2rem; color:var(--text-dim); font-weight:500; }
.device-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.device-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:border-color 0.2s; }
.device-card:hover { border-color:var(--text-dim); }
.device-card.is-live { border-color:var(--success); }
.card-top { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 0.75rem; border-bottom:1px solid var(--border); }
.card-device-id { font-family:ui-monospace,monospace; font-size:0.85rem; font-weight:600; }
.card-status { font-size:0.65rem; padding:0.15rem 0.45rem; border-radius:3px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.card-status.offline { background:rgba(255,255,255,0.05); color:var(--text-muted); }
.card-status.online { background:var(--success-dim); color:var(--success); }
.card-status.streaming { background:var(--success-dim); color:var(--success); animation:pulse-glow 2s ease-in-out infinite; }
.card-status.starting { background:var(--primary-dim); color:var(--primary); }
@keyframes pulse-glow { 0%,100%{opacity:1} 50%{opacity:0.7} }
.card-body { flex:1; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:var(--bg); }
.card-trigger-btn { width:100%; padding:0.6rem; border:none; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.15s; border-radius:0; }
.card-trigger-btn.go-live { background:var(--success-dim); color:var(--success); border-top:1px solid var(--success); }
.card-trigger-btn.go-live:hover { background:var(--success); color:var(--bg); }
.card-trigger-btn.end-stream { background:var(--danger-dim); color:var(--danger); border-top:1px solid var(--danger); }
.card-trigger-btn.end-stream:hover { background:var(--danger); color:var(--white); }
.card-trigger-btn.view-live { background:var(--primary-dim); color:var(--primary); border-top:1px solid var(--primary); }
.card-trigger-btn.view-live:hover { background:var(--primary); color:var(--white); }
.card-trigger-btn:disabled { opacity:0.3; cursor:not-allowed; }

/* ===== LIVE VIEW ===== */
.live-view { flex:1; display:flex; overflow:hidden; min-height:0; }
.sidebar { width:180px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow-y:auto; }
.sidebar-title { padding:0.5rem 0.75rem; font-size:0.75rem; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--border); }
.sidebar-device { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; display:flex; justify-content:space-between; align-items:center; }
.sidebar-device:hover { background:var(--surface-2); }
.sidebar-device.active { background:var(--primary-dim); border-left:3px solid var(--primary); }
.sidebar-device-id { font-family:ui-monospace,monospace; font-size:0.75rem; }
.sidebar-device-status { font-size:0.6rem; padding:0.1rem 0.35rem; border-radius:3px; font-weight:600; text-transform:uppercase; }
.sidebar-device-status.offline { background:rgba(255,255,255,0.05); color:var(--text-muted); }
.sidebar-device-status.online { background:var(--success-dim); color:var(--success); }
.sidebar-device-status.streaming { background:var(--success-dim); color:var(--success); }

/* Sidebar toggle (mobile only) */
.sidebar-toggle { display:none; }

.live-main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.live-header { display:flex; align-items:center; gap:0.75rem; padding:0.35rem 0.75rem; background:var(--surface-2); border-bottom:1px solid var(--border); flex-shrink:0; }
.live-device-id { font-family:ui-monospace,monospace; font-size:0.9rem; font-weight:600; }
.live-status { font-size:0.65rem; padding:0.15rem 0.45rem; border-radius:3px; font-weight:600; text-transform:uppercase; }
.live-status.streaming { background:var(--success-dim); color:var(--success); }
.live-status.starting { background:var(--primary-dim); color:var(--primary); }
.live-header-right { margin-left:auto; display:flex; align-items:center; gap:0.5rem; }
.live-stream-status { font-size:0.75rem; color:var(--text-dim); }
.btn-end-stream { border-color:var(--danger); color:var(--danger); font-size:0.75rem; padding:0.25rem 0.6rem; }
.btn-end-stream:hover { background:var(--danger); color:var(--white); }

/* ===== Video (shared) ===== */
.video-wrap { position:relative; flex:1; min-height:0; background:#000; display:flex; align-items:center; justify-content:center; outline:none; }
.video-wrap:focus-visible { box-shadow:inset 0 0 0 2px var(--primary); }
.video { max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; display:block; }
.video-wrap .overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); z-index:2; }
.video-wrap .overlay.visible { display:flex; }
.overlay-content { display:flex; flex-direction:column; align-items:center; gap:0.75rem; color:var(--text-dim); font-size:0.9rem; }
.overlay.reconnecting .overlay-content { color:var(--primary); }
.spinner { width:28px; height:28px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.metrics-overlay { position:absolute; left:0.5rem; bottom:0.5rem; font-size:0.65rem; font-family:ui-monospace,monospace; color:rgba(255,255,255,0.85); background:rgba(0,0,0,0.7); padding:0.3rem 0.5rem; border-radius:3px; line-height:1.5; display:none; backdrop-filter:blur(4px); z-index:3; }
.metrics-overlay.visible { display:block; }

/* Replay video (fullscreen during replay) */
.replay-video { position:absolute; inset:0; z-index:1; object-fit:contain; }
.replay-video.hidden { display:none; }

/* PiP container (live video thumbnail during replay) */
.pip-container { position:absolute; bottom:0.75rem; left:0.75rem; width:220px; height:124px; border:2px solid var(--success); border-radius:var(--radius); overflow:hidden; cursor:pointer; z-index:10; background:#000; box-shadow:0 4px 20px rgba(0,0,0,0.6); transition:transform 0.2s, box-shadow 0.2s; }
.pip-container:hover { transform:scale(1.05); box-shadow:0 6px 28px rgba(0,0,0,0.8); }
.pip-container.hidden { display:none; }
.pip-canvas { width:100%; height:100%; object-fit:contain; display:block; }
.pip-label { position:absolute; top:4px; left:6px; font-size:0.55rem; font-weight:700; background:var(--danger); color:var(--white); padding:1px 5px; border-radius:2px; letter-spacing:0.05em; z-index:1; }

/* Replay bar */
.replay-bar { display:flex; align-items:center; gap:0.4rem; padding:0.3rem 0.75rem; background:var(--danger-dim); border-top:1px solid var(--danger); flex-shrink:0; }
.replay-bar.hidden { display:none; }

/* Replay 10s button */
.btn-replay-10 { border-color:var(--primary); color:var(--primary); font-size:0.75rem; font-weight:600; padding:0.3rem 0.65rem; }
.btn-replay-10:hover { background:var(--primary); color:var(--white); }

/* PTZ */
.ptz-overlay { position:absolute; right:0.5rem; bottom:0.5rem; display:flex; gap:0.4rem; align-items:flex-end; z-index:3; opacity:0.5; transition:opacity 0.2s; }
.video-wrap:hover .ptz-overlay, .video-wrap:focus-within .ptz-overlay { opacity:1; }
.ptz-dpad { display:grid; grid-template-columns:repeat(3,28px); grid-template-rows:repeat(3,28px); gap:2px; }
.btn-ptz { display:flex; align-items:center; justify-content:center; border:none; background:rgba(0,0,0,0.65); color:rgba(255,255,255,0.8); border-radius:3px; cursor:pointer; font-size:0.75rem; font-weight:700; backdrop-filter:blur(4px); transition:background 0.15s,color 0.15s; }
.btn-ptz:hover { background:var(--primary); color:var(--white); }
.btn-ptz:active { transform:scale(0.92); }
.ptz-up { grid-column:2; grid-row:1; } .ptz-left { grid-column:1; grid-row:2; } .ptz-center { grid-column:2; grid-row:2; }
.ptz-right { grid-column:3; grid-row:2; } .ptz-down { grid-column:2; grid-row:3; }
.ptz-zoom { display:flex; flex-direction:column; gap:2px; }
.ptz-zoom .btn-ptz { width:28px; height:28px; font-size:1rem; }
.ptz-ai { display:flex; flex-direction:column; gap:2px; }
.btn-ai { display:flex; align-items:center; justify-content:center; border:none; background:rgba(59,130,246,0.5); color:var(--white); border-radius:3px; cursor:pointer; font-size:0.55rem; font-weight:600; padding:0.25rem 0.35rem; backdrop-filter:blur(4px); transition:background 0.15s; white-space:nowrap; letter-spacing:0.02em; }
.btn-ai:hover { background:var(--primary); }
.btn-ai:active { transform:scale(0.93); }
.btn-ai-off { background:rgba(239,68,68,0.5); }
.btn-ai-off:hover { background:var(--danger); }

/* Scrubbar */
.scrubbar { display:flex; align-items:center; gap:0.4rem; padding:0.25rem 0.75rem; background:var(--surface-2); border-top:1px solid var(--border); flex-shrink:0; }
.scrub-time { font-size:0.65rem; font-family:ui-monospace,monospace; color:var(--text-dim); min-width:2.5rem; }
.scrub-elapsed { text-align:right; } .scrub-duration { text-align:left; }
.scrub-track { flex:1; position:relative; height:20px; display:flex; align-items:center; }
.scrub-fill { position:absolute; left:0; top:50%; transform:translateY(-50%); height:4px; background:var(--danger); border-radius:2px; pointer-events:none; width:100%; }
.scrub-range { width:100%; height:20px; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; position:relative; z-index:1; }
.scrub-range::-webkit-slider-runnable-track { height:4px; background:var(--border); border-radius:2px; }
.scrub-range::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--white); margin-top:-4px; }
.scrub-range::-moz-range-track { height:4px; background:var(--border); border-radius:2px; }
.scrub-range::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--white); border:none; }
.btn-live-badge { font-size:0.6rem; font-weight:700; padding:0.15rem 0.45rem; border-radius:3px; border:1px solid var(--danger); color:var(--danger); background:transparent; cursor:pointer; text-transform:uppercase; }
.btn-live-badge:hover, .btn-live-badge.at-live { background:var(--danger); color:var(--white); }

/* Toolbar */
.toolbar { flex-shrink:0; padding:0.4rem 0.75rem; border-top:1px solid var(--border); display:flex; gap:0.5rem; align-items:center; background:var(--surface-2); flex-wrap:wrap; }
.toolbar-left, .toolbar-center, .toolbar-right { display:flex; align-items:center; gap:0.35rem; }
.toolbar-left { flex-shrink:0; } .toolbar-center { flex:1; justify-content:center; } .toolbar-right { flex-shrink:0; }
.btn { padding:0.3rem 0.65rem; border:1px solid var(--border); border-radius:3px; font-size:0.75rem; font-weight:500; cursor:pointer; background:transparent; color:var(--text-dim); transition:all 0.15s; }
.btn:hover { color:var(--text); border-color:var(--text-dim); }
.btn:active { transform:scale(0.97); }
.btn-tool { border-color:var(--border); color:var(--text-dim); }
.btn-tool:hover { border-color:var(--primary); color:var(--primary); }
.resolution-select { padding:0.25rem 0.4rem; font-size:0.75rem; border:1px solid var(--border); border-radius:3px; background:var(--bg); color:var(--text); cursor:pointer; }
.recording-list { padding:0.25rem 0.4rem; background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-size:0.75rem; max-width:10rem; }

/* Audio meter */
.audio-meter { --level:0%; width:60px; height:8px; background:var(--border); border-radius:4px; overflow:hidden; flex-shrink:0; }
.audio-meter-fill { height:100%; width:var(--level); background:linear-gradient(90deg,#22c55e 0%,#eab308 60%,#ef4444 100%); border-radius:4px; transition:width 0.08s linear; }
.audio-meter:not(.has-audio) .audio-meter-fill { background:var(--border); }
/* Mute icons */
[data-action="mute"].muted .icon-unmute { display:inline !important; }
[data-action="mute"].muted .icon-muted { display:none !important; }
[data-action="mute"]:not(.muted) .icon-unmute { display:none !important; }
[data-action="mute"]:not(.muted) .icon-muted { display:inline !important; }

/* History panel */
.history-panel { position:fixed; top:0; right:0; width:320px; max-width:90vw; height:100vh; background:var(--surface); border-left:1px solid var(--border); box-shadow:-4px 0 24px rgba(0,0,0,0.5); transform:translateX(100%); transition:transform 0.25s ease-out; z-index:1000; display:flex; flex-direction:column; }
.history-panel.open { transform:translateX(0); }
.history-header { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; border-bottom:1px solid var(--border); }
.history-header h2 { margin:0; font-size:0.95rem; font-weight:600; }
.btn-close-history { font-size:1.5rem; line-height:1; padding:0.2rem 0.5rem; border:none; background:transparent; color:var(--text-dim); cursor:pointer; }
.btn-close-history:hover { color:var(--text); }
.history-device { padding:0.5rem 1rem; border-bottom:1px solid var(--border); }
.history-device input { width:100%; padding:0.4rem 0.6rem; background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-size:0.8rem; }
.history-list { list-style:none; margin:0; padding:0.5rem; overflow-y:auto; flex:1; min-height:0; }
.history-list li { margin-bottom:0.25rem; }
.history-list button { width:100%; text-align:left; padding:0.5rem 0.75rem; background:var(--bg); border:1px solid var(--border); border-radius:3px; color:var(--text); font-size:0.8rem; cursor:pointer; }
.history-list button:hover { border-color:var(--primary); color:var(--primary); }
.history-list .history-loading, .history-list .history-empty { padding:0.75rem; color:var(--text-dim); font-size:0.85rem; }

/* ===== Mobile / Responsive ===== */
@media (max-width: 768px) {
  body { overflow-y:auto; }

  /* Header: compact single row */
  .header { padding:0.3rem 0.5rem; gap:0.4rem; }
  .logo { width:80px; height:22px; }
  .header-title { font-size:0.8rem; }
  .header-subtitle { display:none; }
  .btn-history { font-size:0.65rem; padding:0.2rem 0.4rem; }
  .btn-history svg { display:none; }

  /* Lobby: full width cards */
  .lobby { padding:0.75rem; }
  .lobby-title { font-size:0.9rem; margin-bottom:0.75rem; }
  .device-cards { grid-template-columns:1fr; gap:0.5rem; }
  .card-top { padding:0.5rem 0.6rem; }
  .card-body { padding:0.75rem; }
  .card-trigger-btn { padding:0.7rem; font-size:0.9rem; }

  /* Live view: sidebar is a slide-out overlay on mobile */
  .live-view { position:relative; }
  .sidebar { display:none !important; position:fixed; left:0; top:0; bottom:0; z-index:100; width:200px; background:var(--surface); border-right:1px solid var(--border); box-shadow:4px 0 20px rgba(0,0,0,0.6); }
  .sidebar.open { display:flex !important; flex-direction:column; }
  .sidebar-toggle { display:flex; align-items:center; justify-content:center; position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:99; width:28px; height:52px; background:var(--surface-2); border:1px solid var(--border); border-left:none; border-radius:0 8px 8px 0; cursor:pointer; color:var(--text-dim); transition:left 0.2s ease; }
  .sidebar-toggle:active { background:var(--primary); color:var(--white); }
  .sidebar-toggle.open { left:200px; }
  .sidebar-toggle.open svg { transform:rotate(180deg); }
  .live-main { width:100%; }

  /* Live header: single compact row */
  .live-header { padding:0.25rem 0.5rem; gap:0.35rem; }
  .live-device-id { font-size:0.75rem; }
  .live-status { font-size:0.55rem; }
  .live-stream-status { font-size:0.65rem; }
  .live-header-right { gap:0.25rem; }
  .live-header-right .btn { font-size:0.6rem; padding:0.15rem 0.4rem; }
  #btn-back-lobby span { display:none; }

  /* Video: fill available space */
  .video-wrap { min-height:40vh; }

  /* Metrics: bottom-left, small */
  .metrics-overlay { font-size:0.5rem; padding:0.15rem 0.35rem; bottom:0.3rem; left:0.3rem; }

  /* PTZ: bottom-right, big touch targets, always visible */
  .ptz-overlay { opacity:1; right:0.3rem; bottom:0.3rem; }
  .ptz-dpad { grid-template-columns:repeat(3,40px); grid-template-rows:repeat(3,40px); gap:2px; }
  .btn-ptz { min-width:40px; min-height:40px; font-size:1rem; border-radius:6px; }
  .ptz-zoom .btn-ptz { width:40px; height:40px; font-size:1.3rem; }

  /* PiP: smaller */
  .pip-container { width:120px; height:68px; bottom:0.3rem; left:0.3rem; border-width:1px; }
  .pip-label { font-size:0.4rem; }
  .pip-canvas { border-radius:3px; }

  /* Replay bar */
  .replay-bar { padding:0.2rem 0.5rem; gap:0.2rem; }
  .replay-bar .scrub-time { font-size:0.55rem; min-width:1.8rem; }
  #btn-back-to-live { font-size:0.5rem; padding:0.1rem 0.3rem; white-space:nowrap; }

  /* Toolbar: single row, compact */
  .toolbar { padding:0.3rem 0.5rem; gap:0.25rem; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
  .toolbar-left, .toolbar-center, .toolbar-right { flex-shrink:0; gap:0.2rem; }
  .toolbar .btn, .toolbar .btn-tool, .toolbar .btn-replay-10 { font-size:0.65rem; padding:0.25rem 0.45rem; white-space:nowrap; }
  .resolution-select { font-size:0.65rem; padding:0.15rem 0.25rem; }
  .recording-list { display:none; }
  .toolbar-right [data-action="replay"] { display:none; }
  .audio-meter { width:35px; height:5px; }

  /* History panel full width */
  .history-panel { width:100vw; max-width:100vw; }
}

/* Extra small (iPhone SE, narrow phones) */
@media (max-width: 400px) {
  .live-header-right #btn-back-lobby { font-size:0; padding:0.15rem 0.3rem; }
  .live-header-right #btn-back-lobby svg { width:14px; height:14px; }
  .ptz-dpad { grid-template-columns:repeat(3,36px); grid-template-rows:repeat(3,36px); }
  .btn-ptz { min-width:36px; min-height:36px; }
  .ptz-zoom .btn-ptz { width:36px; height:36px; }
  .pip-container { width:100px; height:56px; }
}

/* Landscape phone */
@media (max-width: 768px) and (orientation: landscape) {
  .header { display:none; }
  .live-header { padding:0.15rem 0.4rem; }
  .video-wrap { min-height:60vh; }
  .toolbar { padding:0.2rem 0.4rem; }
}