html, body { height: 100%; }
body { font-size: 14px; line-height: 1.55; display: flex; flex-direction: column; }
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--text); }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.err { min-height: 1em; }
.err:empty { display: none; }
.ok-text { color: var(--primary-700); font-weight: 500; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
kbd { font: 11px ui-monospace, monospace; padding: 0 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }

/* ---------- top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1000;
}
.topbar::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--primary); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand h1 { font-size: 18px; color: var(--primary-700); line-height: 1.3; }
.brand p { font-size: 13px; color: var(--muted); }
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--danger);
  background: var(--danger-50);
  border: 1px solid var(--danger-border);
  padding: 4px 12px;
  border-radius: 99px;
}
.beacon { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .55); }
  70% { box-shadow: 0 0 0 9px rgba(217, 45, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}

/* ---------- layout */
.app { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; }
.sidebar { background: var(--surface); border-inline-end: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
main { overflow: auto; min-width: 0; }

.form-card { padding: 16px; display: grid; gap: 12px; box-shadow: none; background: var(--primary-25); border-color: var(--primary-50); }
.result { font-size: 13px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; word-break: break-all; }
.result code { font-size: 12px; color: var(--text-3); }

.list-title { color: var(--text-3); font-size: 13px; margin-top: 4px; }
.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.session-list li { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; background: var(--surface); display: grid; gap: 2px; transition: border-color .15s, background .15s; }
.session-list li:hover { border-color: var(--border-strong); background: var(--bg); }
.session-list li.active { border-color: var(--primary); background: var(--primary-25); box-shadow: inset -3px 0 0 var(--primary); }
.session-list li.empty-item { cursor: default; }
.session-list .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.session-list .id { font: 600 12.5px ui-monospace, monospace; color: var(--text-2); }
.session-list .phone { font-weight: 500; }
.status { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); white-space: nowrap; }
.status.pending { color: var(--warning); background: var(--warning-50); border-color: var(--warning-border); }
.status.active { color: var(--primary-700); background: var(--primary-50); border-color: #a6f4c5; }
.status.ended { color: var(--muted); background: var(--bg); }

.empty { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; padding: 24px; }
.empty-icon { width: 64px; height: 64px; display: grid; place-items: center; font-size: 28px; border-radius: 50%; background: var(--primary-50); margin-bottom: 8px; }

/* ---------- incident view */
#incident { padding: 16px; display: grid; gap: 14px; }
.incident-head { padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; }
.incident-title h2 { font-size: 18px; }
.incident-title .id { font-family: ui-monospace, monospace; color: var(--primary-700); }
.pills { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.pill { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); background: var(--bg); }
.pill.ok { color: var(--primary-700); border-color: #a6f4c5; background: var(--primary-50); }
.pill.warn { color: var(--warning); border-color: var(--warning-border); background: var(--warning-50); }
.pill.bad { color: var(--danger); border-color: var(--danger-border); background: var(--danger-50); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }

.video-wrap { position: relative; background: #0d121c; aspect-ratio: 16 / 10; }
#remoteVideo { width: 100%; height: 100%; object-fit: contain; display: block; }
.placeholder { position: absolute; inset: 0; border: 0; border-radius: 0; background: #0d121c; color: #9da4ae; font-size: 15px; cursor: default; }
.placeholder:hover { background: #0d121c !important; }
.placeholder.clickable { cursor: pointer; color: #fff; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .25s; }
.flash.on { opacity: .8; transition: none; }
.toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; flex-wrap: wrap; border-top: 1px solid var(--border); }
button[aria-pressed="true"]:not(.primary) { border-color: var(--primary); color: var(--primary-700); background: var(--primary-25); }
.meter-wrap { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }
#audioMeter { width: 80px; height: 10px; }

.map-panel { min-height: 360px; }
#map { flex: 1; min-height: 300px; background: #eef0f2; }
.loc-info { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 13px; display: grid; gap: 4px; }
.loc-info .coords { font: 600 15px ui-monospace, monospace; color: var(--text); text-align: start; }
.loc-info .row { gap: 4px 14px; }
.loc-info a { color: var(--primary); font-weight: 500; }
.loc-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--danger); border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(217, 45, 32, .8); animation: pulse 1.6s infinite; }

.snaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 12px 14px 14px; }
.snap { display: grid; gap: 4px; font-size: 12px; }
.snap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); cursor: zoom-in; background: #0d121c; }
.snap input { font-size: 12.5px; padding: 6px 8px; }

.log { list-style: none; margin: 0; padding: 8px 14px 14px; display: grid; gap: 0; max-height: 300px; overflow-y: auto; font-size: 13px; }
.log li { padding: 6px 0; border-bottom: 1px solid var(--bg); display: flex; gap: 10px; }
.log time { font: 12px ui-monospace, monospace; color: var(--muted); flex: none; unicode-bidi: isolate; }

/* ---------- dialogs */
.overlay { position: fixed; inset: 0; background: rgba(13, 18, 28, .55); display: grid; place-items: center; z-index: 2000; padding: 16px; }
.dialog { width: min(420px, 100%); padding: 20px; display: grid; gap: 14px; }
.dialog .logo { height: 44px; }
.lightbox-card { margin: 0; max-width: min(1100px, 100%); display: grid; gap: 10px; padding: 12px; }
.lightbox-card img { max-width: 100%; max-height: 75vh; border-radius: var(--radius); justify-self: center; }
.lightbox-card figcaption { font-size: 12.5px; color: var(--muted); }

/* Leaflet controls keep their LTR layout inside the RTL page */
.leaflet-container { font-family: var(--font); }

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .incident-head { grid-template-columns: 1fr; }
}