/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero (زبون) + Workbench (لوحة) · theme: custom amber-night · enrichment: none · nav: N5 · footer: Ft5 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background:
    radial-gradient(38rem 30rem at 85% -5%, var(--color-bloom-1), transparent 70%) fixed,
    radial-gradient(34rem 26rem at 5% 105%, var(--color-bloom-2), transparent 70%) fixed,
    var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  min-height: 100svh;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; font-style: normal; line-height: 1.15; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: var(--color-accent); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* N5 floating pill */
.pill-nav {
  position: sticky; top: var(--space-md); z-index: 5; margin: var(--space-md) auto 0; width: min(760px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-pill);
}
.pill-nav .brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; padding-inline-start: var(--space-sm); }
.pill-nav .brand span { color: var(--color-accent); }
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; padding: var(--space-xs) var(--space-md); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-live); }

main.center { width: min(760px, calc(100% - 32px)); margin: 0 auto; }

/* Marquee hero: the call is the page */
.hero { text-align: center; padding: var(--space-3xl) 0 var(--space-2xl); display: grid; justify-items: center; gap: var(--space-lg); }
.hero h1 { font-size: var(--text-display); letter-spacing: -0.02em; }
.hero h1 u { text-decoration: none; background: linear-gradient(transparent 78%, var(--color-accent-soft) 78%); color: var(--color-accent); }
.hero .lede { color: var(--color-ink-2); max-width: 34rem; font-size: var(--text-lg); }

.call {
  --size: clamp(150px, 34vw, 196px);
  width: var(--size); height: var(--size); border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-accent); color: var(--color-accent-ink);
  display: grid; place-content: center; gap: var(--space-2xs); text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  box-shadow: 0 0 0 10px var(--color-accent-soft), 0 18px 60px var(--color-bloom-1);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
}
.call small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); opacity: .8; }
.call:hover { transform: translateY(-2px); box-shadow: 0 0 0 16px var(--color-accent-soft), 0 24px 70px var(--color-bloom-1); }
.call:active { transform: translateY(1px); }
.call:disabled { cursor: progress; opacity: .7; }
.call[data-state="live"] { background: var(--color-danger); color: var(--color-ink); box-shadow: 0 0 0 calc(10px + var(--level, 0) * 26px) oklch(66% 0.19 25 / 0.18); transition: box-shadow 80ms linear; }
.call[data-state="error"] { background: var(--color-paper-3); color: var(--color-ink); }

.captions { min-height: 3.4em; max-width: 36rem; color: var(--color-ink); font-size: var(--text-lg); }
.captions .who { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-sm); display: block; }
.note { color: var(--color-ink-3); font-size: var(--text-xs); max-width: 32rem; }
.alert { color: var(--color-danger); font-size: var(--text-sm); min-height: 1.4em; }

/* Chat panel */
.chat { margin: var(--space-xl) 0 var(--space-3xl); background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.chat header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-line); display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.chat header h2 { font-size: var(--text-lg); }
.chat header p { font-size: var(--text-xs); color: var(--color-ink-3); }
.log { height: min(52svh, 420px); overflow-y: auto; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.msg { max-width: 82%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); white-space: pre-wrap; animation: in var(--dur-med) var(--ease-out); }
.msg.model { background: var(--color-paper-3); align-self: flex-start; border-start-start-radius: 4px; }
.msg.user { background: var(--color-accent); color: var(--color-accent-ink); align-self: flex-end; border-start-end-radius: 4px; }
.msg.system { align-self: center; background: transparent; color: var(--color-live); font-size: var(--text-xs); }
.msg.typing { color: var(--color-ink-3); }
@keyframes in { from { opacity: 0; } to { opacity: 1; } }
.composer { display: flex; gap: var(--space-xs); padding: var(--space-sm); border-top: 1px solid var(--color-line); }
.composer input { flex: 1; min-width: 0; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); }
.composer input:focus-visible { outline-offset: 0; border-color: var(--color-focus); }

.btn { border: 1px solid transparent; border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); cursor: pointer; white-space: nowrap;
  background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-focus); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn[data-state="loading"] { cursor: progress; opacity: .8; }
.btn.ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line); }
.btn.ghost:hover { background: var(--color-paper-3); }

/* Ft5 statement */
.statement { text-align: center; padding: var(--space-2xl) var(--space-md) var(--space-3xl); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-lg); }

/* ───────── لوحة المدير (Workbench) ───────── */
.wb { width: min(1180px, calc(100% - 32px)); margin: var(--space-xl) auto var(--space-3xl); display: grid; gap: var(--space-xl); }
.wb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); }
.wb-head h1 { font-size: var(--text-2xl); }
.wb-head p { color: var(--color-ink-3); font-size: var(--text-sm); }
.tabs { display: flex; gap: var(--space-2xs); background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-2xs); overflow-x: auto; max-width: 100%; }
.tabs button { border: 0; background: transparent; padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; color: var(--color-ink-2); }
.tabs button[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.kpi { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); }
.kpi b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.kpi span { color: var(--color-ink-3); font-size: var(--text-xs); }
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.agent { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; }
.agent h3 { font-size: var(--text-lg); display: flex; justify-content: space-between; gap: var(--space-sm); }
.agent h3 small { font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--color-live); }
.agent p { color: var(--color-ink-2); font-size: var(--text-sm); }
.agent .out { white-space: pre-wrap; background: var(--color-paper); border-radius: var(--radius-sm); padding: var(--space-md); font-size: var(--text-sm); max-height: 360px; overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: start; color: var(--color-ink-3); font-weight: 500; padding: var(--space-sm); border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.table td { padding: var(--space-sm); border-bottom: 1px solid var(--color-line); vertical-align: top; }
.table-wrap { overflow-x: auto; background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.table select { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-2xs) var(--space-xs); }
.row-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.row-actions .btn { padding: var(--space-2xs) var(--space-md); font-size: var(--text-xs); }
.convo { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); display: grid; gap: var(--space-xs); }
.convo summary { cursor: pointer; font-family: var(--font-display); }
.convo .line { font-size: var(--text-sm); }
.convo .line b { color: var(--color-accent); font-weight: 500; }
.kb textarea { width: 100%; min-height: 380px; background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-lg); line-height: 1.8; resize: vertical; }
.gate { width: min(420px, calc(100% - 32px)); margin: 18svh auto; display: grid; gap: var(--space-md); text-align: center; }
.gate input { background: var(--color-paper-2); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); text-align: center; }
.empty { color: var(--color-ink-3); padding: var(--space-xl); text-align: center; }

/* ───────── من أعمالنا ───────── */
.works { margin: var(--space-xl) 0 0; display: grid; gap: var(--space-md); }
.works-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.works-head h2 { font-size: var(--text-xl); }
.works-head p { color: var(--color-ink-3); font-size: var(--text-sm); }
.chips { display: flex; gap: var(--space-xs); overflow-x: auto; padding-bottom: var(--space-2xs); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { border: 1px solid var(--color-line); background: var(--color-paper-2); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-md); cursor: pointer; white-space: nowrap; color: var(--color-ink-2); font-size: var(--text-sm); transition: background var(--dur-fast) var(--ease-out); }
.chips button:hover { background: var(--color-paper-3); }
.chips button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.work { display: grid; gap: var(--space-2xs); align-content: start; }
.work .thumb, .work iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper-3); display: block; }
.work .thumb { padding: 0; cursor: pointer; position: relative; }
.work .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-med) var(--ease-out); }
.work .thumb::after { content: ""; position: absolute; inset: auto 50% 50% auto; transform: translate(50%, 50%); width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--color-ink); filter: drop-shadow(0 2px 8px oklch(0% 0 0 / .5)); }
.work .thumb:hover img { transform: scale(1.03); }
.work h3 { font-size: var(--text-sm); font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.work p { color: var(--color-ink-3); font-size: var(--text-xs); }
.progress { height: 10px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--color-accent); }
.brief dl { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-xs) var(--space-md); margin: 0; font-size: var(--text-sm); }
.brief dt { color: var(--color-ink-3); }
.brief dd { margin: 0; white-space: pre-wrap; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.form-grid input, .form-grid select, .form-grid textarea, .field { background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); width: 100%; }
.form-grid textarea { grid-column: 1 / -1; min-height: 140px; }
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .brief dl { grid-template-columns: minmax(0, 1fr); }
}

/* وجه سارة الحي: مقطع استماع دائم + مقطع كلام يظهر لما صوتها طالع */
.face { position: relative; margin: 0; width: clamp(150px, 42vw, 210px); aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; background: var(--color-paper-2);
  box-shadow: 0 0 0 1px var(--color-line), 0 24px 70px var(--color-bloom-1); }
.face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-med) var(--ease-in-out); }
.face .v-talk { opacity: 0; }
.face[data-talk="1"] .v-talk { opacity: 1; }
.face::after { content: ""; position: absolute; inset-inline-end: 12px; bottom: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-live); box-shadow: 0 0 0 3px var(--color-paper-2); }
.works { scroll-margin-top: 96px; }

[hidden] { display: none !important; }

@media (max-width: 760px) {
  .pill-nav { padding-inline-start: var(--space-md); }
  .pill-nav .brand { padding-inline-start: 0; font-size: var(--text-sm); }
  .status { padding: var(--space-xs); gap: var(--space-2xs); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: minmax(0, 1fr); }
  .chat header { flex-direction: column; align-items: flex-start; }
  .hero { padding-top: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}