:root {
	color-scheme: light dark;
	--bg: #f3f4f6;
	--panel: #fff;
	--soft: #eef0f3;
	--ink: #1b1f27;
	--muted: #667085;
	--line: #e3e6eb;
	--accent: #2563eb;
	--live: #d92d20;
	--answer: #f2f6fc;
	--critical: #b42318;
	--critical-bg: #fef3f2;
	--high: #c4320a;
	--high-bg: #fff6ed;
	--medium: #b54708;
	--medium-bg: #fffaeb;
	--low: #475467;
	--good: #067647;
	--good-bg: #ecfdf3;
	--banner: #fff7e0;
	--chart: #2a78d6;
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", "Noto Sans Arabic", sans-serif;
	color: var(--ink);
	background: var(--bg);
	accent-color: var(--accent);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1116;
		--panel: #161a21;
		--soft: #1f242d;
		--ink: #e7e9ee;
		--muted: #98a2b3;
		--line: #272d37;
		--accent: #6aa1ff;
		--live: #ff5a4e;
		--answer: #1b2230;
		--critical: #ff6b5e;
		--critical-bg: #3a1714;
		--high: #ff9a5c;
		--high-bg: #33200f;
		--medium: #f5c451;
		--medium-bg: #2f2710;
		--low: #98a2b3;
		--good: #4ade80;
		--good-bg: #10291b;
		--banner: #2f2710;
		--chart: #3987e5;
	}
}

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.1rem; margin: 0; }
h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button {
	font: inherit;
	color: var(--ink);
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: .3rem .8rem;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
button:hover { border-color: var(--accent); }
button.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
button.small { font-size: .8rem; padding: .1rem .55rem; }
.icon {
	display: inline-grid;
	place-items: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .4rem;
	font-size: 1.1rem;
	color: var(--muted);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	list-style: none;
}
.icon:hover { background: var(--soft); color: var(--ink); }
input, textarea {
	font: inherit;
	color: inherit;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: .4rem .55rem;
}
textarea { width: 100%; resize: none; }

.grow { flex: 1; }
.row { display: flex; align-items: center; gap: .5rem; }
.muted { color: var(--muted); font-size: .85em; }
.conn { color: var(--critical); font-size: .8rem; }
.badge { min-width: 1.3rem; padding: 0 .4em; font-size: .72rem; font-weight: 700; line-height: 1.3rem; text-align: center; color: #fff; background: var(--critical); border-radius: 999px; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.none { padding: .35rem 1rem; color: var(--muted); font-size: .85rem; }

.menu { position: relative; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > div {
	position: absolute;
	top: calc(100% + 4px);
	inset-inline-end: 0;
	z-index: 10;
	display: grid;
	min-width: 12rem;
	padding: .3rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 10px 30px #0003;
}
.menu > div > * { display: flex; gap: .5rem; align-items: center; padding: .45rem .6rem; color: var(--ink); border-radius: 8px; }
.menu > div > a:hover, .menu > div > label:hover { background: var(--soft); }
.menu > div > .muted { color: var(--muted); }

/* layout: calls | call | situation (mirrored by RTL) */

body.app {
	display: grid;
	grid-template-columns: 18.5rem minmax(0, 1fr) 23rem;
	height: 100dvh;
	overflow: hidden;
}
.calls, .call, .side { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.calls { background: var(--panel); border-inline-end: 1px solid var(--line); }
.call { position: relative; background: var(--bg); }
.side { background: var(--panel); border-inline-start: 1px solid var(--line); }

header {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 3.25rem;
	padding: .4rem 1rem;
	padding-top: max(.4rem, env(safe-area-inset-top));
	white-space: nowrap;
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}

/* calls list */

.calls .scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.calls h2 { padding: 1rem 1rem .35rem; margin: 0; }
.calls h2 input { padding: .1rem .3rem; font-size: .8rem; }
.items { display: grid; gap: 1px; padding: 0 .4rem; }
.item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .65rem;
	padding: .55rem .6rem;
	color: var(--ink);
	border-radius: 10px;
}
#history .item { grid-template-columns: minmax(0, 1fr) auto; }
.item:hover { background: var(--soft); }
.item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.item .main { display: grid; min-width: 0; }
.item .main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.item .meta { display: grid; justify-items: end; gap: .15rem; font-size: .8rem; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; }
.dot.off { background: var(--line); animation: none; }
@keyframes pulse { 50% { opacity: .3; } }
.daypdf { display: block; padding: .75rem 1rem; font-size: .85rem; }

/* call */

.call header .title { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.status { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.status.on { color: var(--live); font-weight: 600; }
.status.on::before { content: "● "; }
.viewers { display: flex; padding-inline-start: .4rem; }
.who {
	display: inline-grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	margin-inline-start: -.4rem;
	font-size: .68rem;
	font-weight: 700;
	background: var(--soft);
	border: 2px solid var(--panel);
	border-radius: 50%;
}
.banner { padding: .5rem 1rem; background: var(--banner); border-bottom: 1px solid var(--line); }
.banner.down { color: #fff; background: var(--live); font-weight: 600; }

.stream { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 0 1.5rem; }
#msgs, #partials { max-width: 58rem; margin-inline: auto; }
.empty { margin-top: 30vh; text-align: center; color: var(--muted); }

.msg { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .75rem; padding: .45rem 1.25rem; border-radius: 10px; }
.msg:hover { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.msg .t {
	align-self: start;
	padding: .25rem 0 0;
	font: inherit;
	font-size: .75rem;
	color: var(--muted);
	text-align: start;
	background: none;
	border: 0;
	cursor: pointer;
}
.msg .t:hover { color: var(--accent); }
.msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .he { font-size: 1.06rem; line-height: 1.6; }
.msg .ar { margin-top: .1rem; font-size: .92rem; line-height: 1.65; color: var(--muted); }
.msg.pending .he, .typing { font-size: .8rem; color: var(--muted); animation: pulse 1.4s infinite; }
.msg.pending .he::after, .typing::after { content: "…"; }
.msg.pending .ar { font-size: 1.02rem; color: var(--ink); }
.msg.failed .he { color: var(--critical); animation: none; }
.msg.failed .he::after { content: ""; }
.msg.partial .ar { color: var(--muted); }
body.noar .msg:not(.pending) .ar { display: none; }
.msg.new { animation: enter .2s ease-out; }
.he.fresh { animation: fade .35s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }

.newer {
	position: absolute;
	bottom: 4.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	color: #fff;
	background: var(--accent);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 6px 18px #0004;
}
#player { width: 100%; background: var(--panel); border-top: 1px solid var(--line); }

/* alerts, in the stream and in the panel */

.alert {
	display: grid;
	gap: .2rem;
	padding: .55rem .7rem;
	font-size: .9rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-inline-start: 4px solid var(--low);
	border-radius: 10px;
}
.stream .alert { margin: .3rem 1.25rem; margin-inline-start: 5.2rem; }
.alert.critical { background: var(--critical-bg); border-inline-start-color: var(--critical); }
.alert.high { background: var(--high-bg); border-inline-start-color: var(--high); }
.alert.medium { border-inline-start-color: var(--medium); }
.alert.acked { opacity: .6; background: var(--panel); }
.alert .sev { font-size: .78rem; color: var(--muted); }
.alert .quote { padding-inline-start: .5rem; border-inline-start: 2px solid var(--line); }
.alert .advice { font-style: italic; }
.alert .ack { justify-self: start; }
.alert.new { animation: enter .25s ease-out, ring 1s .25s 2; }
@keyframes ring { 50% { box-shadow: 0 0 0 3px var(--high); } }

/* situation panel */

.sheethead { display: none; }
.side > section { display: flex; flex-direction: column; min-height: 0; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.list { display: grid; align-content: start; gap: .5rem; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#alerts:empty::before { content: "אין התרעות פתוחות"; color: var(--muted); font-size: .85rem; }
#acked summary, #sumhist summary { margin-top: .5rem; color: var(--muted); font-size: .8rem; cursor: pointer; }
#acked .list { margin-top: .5rem; }

.level { padding: .1rem .65rem; font-size: .8rem; font-weight: 600; border-radius: 999px; }
.level.bad { color: var(--critical); background: var(--critical-bg); }
.level.medium { color: var(--medium); background: var(--medium-bg); }
.level.good { color: var(--good); background: var(--good-bg); }
.summary .row { margin-bottom: .5rem; }
.summary .text { white-space: pre-wrap; font-size: .92rem; }
.summary .old { margin-top: .5rem; white-space: pre-wrap; font-size: .85rem; }

.q { display: grid; gap: .15rem; }
.q .qt { font-weight: 600; white-space: pre-wrap; }
.q .at { padding: .45rem .65rem; white-space: pre-wrap; background: var(--answer); border-radius: 10px; }
.q .at.pending { color: var(--muted); animation: pulse 1.4s infinite; }
.q .at.pending:empty::after, .q .at.pending::after { content: "…"; }
#ask { display: flex; align-items: end; gap: .5rem; margin-top: .6rem; }
#ask textarea { max-height: 10rem; }
.intel textarea { margin-bottom: .35rem; resize: vertical; }

/* dialogs and toasts */

dialog {
	width: min(36rem, 94vw);
	padding: 1rem 1.25rem;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 20px 60px #0005;
}
dialog::backdrop { background: #0007; }
dialog h2 { margin: 0; font-size: 1rem; color: var(--ink); }
.crit { list-style: none; margin: .75rem 0; padding: 0; }
.crit li { display: flex; align-items: start; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.crit input { margin-top: .3rem; }
.addcrit { display: grid; grid-template-columns: 10rem 1fr auto; gap: .5rem; }

.toasts { position: fixed; bottom: 1rem; inset-inline-end: 1rem; z-index: 30; display: grid; gap: .5rem; }
.toast { padding: .65rem 1rem; color: var(--panel); background: var(--ink); border-radius: 10px; box-shadow: 0 8px 24px #0004; animation: enter .2s ease-out; }

/* login */

body.login { display: grid; place-items: center; min-height: 100dvh; padding: 1rem; }
#login { display: grid; gap: .9rem; width: min(22rem, 100%); padding: 1.75rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
#login label { display: grid; gap: .3rem; color: var(--muted); font-size: .9em; }
#login input { color: var(--ink); }
.err { color: var(--critical); }

/* admin */

body.admin header { position: sticky; top: 0; z-index: 5; }
main.admin { display: grid; gap: 1rem; max-width: 80rem; margin: 0 auto; padding: 1rem; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
main.admin section { min-width: 0; padding: .9rem 1rem; overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
main.admin section > .muted { margin-top: .5rem; }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.tile { display: grid; align-content: start; gap: .25rem; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.tile .label { color: var(--muted); font-size: .8rem; font-weight: 600; }
.tile .value { font-size: 1.6rem; font-weight: 600; unicode-bidi: plaintext; text-align: right; }
.tile button { justify-self: start; margin-top: .3rem; }
.charts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); }
.chart { direction: ltr; }
svg.cols { display: block; }
svg.cols .grid { stroke: var(--line); stroke-width: 1; }
svg.cols .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
svg.cols .peak { fill: var(--ink); font-size: 11px; font-weight: 600; }
svg.cols .bar { fill: var(--chart); }
svg.cols .hit { fill: transparent; outline: none; cursor: default; }
svg.cols .hit.on { fill: color-mix(in srgb, var(--chart) 10%, transparent); }
.tip {
	position: absolute;
	z-index: 40;
	transform: translate(-50%, -100%);
	padding: .3rem .55rem;
	font-size: .8rem;
	white-space: nowrap;
	direction: ltr;
	color: var(--panel);
	background: var(--ink);
	border-radius: 6px;
	pointer-events: none;
}
main.admin table { width: 100%; border-collapse: collapse; font-size: .9rem; }
main.admin th, main.admin td { padding: .4rem .5rem; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--line); }
main.admin th { color: var(--muted); font-size: .78rem; font-weight: 600; }
main.admin tr:last-child td { border-bottom: 0; }
table.nums td { font-variant-numeric: tabular-nums; }
td.msg { white-space: normal; font: .8rem/1.4 ui-monospace, Menlo, Consolas, monospace; text-align: left; }
.state { display: inline-flex; align-items: center; gap: .4rem; }
.state::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--good); }
.state.bad::before { background: var(--critical); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.log { max-height: 22rem; margin: 0; overflow: auto; font: .75rem/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; text-align: left; }
.log .bad { color: var(--critical); }

/* wide screens hide the phone controls */

@media (min-width: 1000px) {
	.narrow, .scrim { display: none !important; }
	.side .summary { flex: 0 1 auto; max-height: 34%; overflow-y: auto; }
	.side .alerts { flex: 1 1 0; min-height: 8rem; }
	.side .qa { flex: 1.3 1 0; min-height: 10rem; }
	.side .intel { flex: 0 0 auto; border-bottom: 0; }
}

/* phones and tablets in portrait: list or call, panel as a bottom sheet */

@media (max-width: 999px) {
	body.app { display: block; }
	.calls, .call { position: fixed; inset: 0; }
	body[data-screen="list"] .call, body[data-screen="call"] .calls { display: none; }
	input, textarea { font-size: 16px; }
	header { padding-inline: .6rem; }
	.call header .title { flex-direction: column; gap: 0; line-height: 1.25; }
	.call header .title .muted { font-size: .75rem; }

	.chips { display: flex; gap: .4rem; padding: .45rem .6rem; overflow-x: auto; background: var(--panel); border-bottom: 1px solid var(--line); }
	.chip { flex: none; display: flex; align-items: center; gap: .35rem; padding: .3rem .85rem; font-size: .85rem; border-radius: 999px; }
	.chip.level { border: 0; }
	.askbar {
		margin: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
		padding: .65rem 1rem;
		color: var(--muted);
		text-align: start;
		background: var(--panel);
		border-radius: 999px;
	}
	.msg { grid-template-columns: 2.7rem minmax(0, 1fr); gap: .5rem; padding: .5rem .8rem; }
	.stream .alert { margin: .3rem .8rem; margin-inline-start: 4rem; }
	.newer { bottom: 5rem; }

	.side {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 20;
		max-height: min(85dvh, 44rem);
		padding-bottom: env(safe-area-inset-bottom);
		border: 1px solid var(--line);
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -10px 40px #0005;
		transform: translateY(105%);
		transition: transform .25s ease;
	}
	body[data-sheet] .side { transform: none; }
	body[data-sheet="qa"] .side { height: min(85dvh, 44rem); }
	.sheethead { display: block; position: absolute; top: .55rem; inset-inline-end: .6rem; z-index: 1; }
	.side > section { display: none; flex: 1 1 auto; max-height: none; padding-top: 1rem; border: 0; }
	.side > section > h2 { min-height: 2rem; padding-inline-end: 2.5rem; font-size: 1rem; color: var(--ink); }
	body[data-sheet="summary"] #s-summary,
	body[data-sheet="alerts"] #s-alerts,
	body[data-sheet="qa"] #s-qa,
	body[data-sheet="intel"] #s-intel { display: flex; }
	#s-summary .row:first-of-type { margin-top: .25rem; }
	.scrim { position: fixed; inset: 0; z-index: 15; background: #0006; opacity: 0; pointer-events: none; transition: opacity .25s; }
	body[data-sheet] .scrim { opacity: 1; pointer-events: auto; }
	.addcrit { grid-template-columns: 1fr; }
	.toasts { inset-inline: 1rem; top: calc(1rem + env(safe-area-inset-top)); bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}