/* ─────────────────────────────────────────────────────────────
   CST Design System — applied to the باقة package assistant.
   Tokens mirror the CST design-system project (tokens/*.css).
   Loew Next Arabic is the single CST typeface. Fonts and logo are
   served from ../cst_assets (see BRAND_FILES in app.py). Only
   Medium and Heavy are licensed — there is no Light or Regular,
   so 400 maps to Medium and 700 to Heavy rather than synthesising
   a weight.
   ───────────────────────────────────────────────────────────── */

@font-face{font-family:"Loew Next Arabic";src:url("/assets/fonts/LoewNextArabic-Medium.otf") format("opentype");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Loew Next Arabic";src:url("/assets/fonts/LoewNextArabic-Heavy.otf") format("opentype");font-weight:700 800;font-style:normal;font-display:swap}

:root{
  /* Brand core — authoritative CST hexes */
  --cst-navy:#000062;
  --cst-periwinkle:#7f92ff;
  --cst-purple:#5e1ad5;
  --cst-cyan:#00d2ff;
  --cst-blue:#0800ff;

  /* Tints */
  --cst-navy-75:#404089;
  --cst-navy-50:#8080b1;
  --cst-navy-25:#bfbfd8;
  --cst-navy-06:#eeeff5;
  --cst-cyan-25:#bff4ff;

  /* Neutrals */
  --neutral-000:#ffffff;
  --neutral-050:#f7f8fb;
  --neutral-200:#e2e3ee;
  --neutral-300:#c9cbdc;
  --neutral-400:#9a9db8;
  --neutral-600:#5b5f80;

  /* Semantic — surfaces */
  --surface-page:var(--neutral-000);
  --surface-subtle:var(--cst-navy-06);
  --surface-card:var(--neutral-000);
  --surface-inverse:var(--cst-navy);
  --surface-overlay:rgba(0,0,98,.72);

  /* Semantic — text */
  --text-heading:var(--cst-navy);
  --text-body:var(--cst-navy);
  --text-muted:var(--neutral-600);
  --text-on-inverse:var(--neutral-000);

  /* Semantic — lines */
  --border-subtle:var(--neutral-200);
  --border-default:var(--cst-navy-25);
  --rule-accent:var(--cst-cyan);

  /* Semantic — interactive */
  --action-primary:var(--cst-navy);
  --action-primary-hover:#00004a;
  --action-primary-active:#000038;
  --action-disabled-bg:var(--neutral-200);
  --action-disabled-text:var(--neutral-400);

  /* Status — additions, not brand colours */
  --status-warning:#b26a00;
  --status-danger:#c62828;

  --gradient-brand:linear-gradient(90deg,var(--cst-cyan) 0%,var(--cst-blue) 38%,var(--cst-purple) 72%,var(--cst-periwinkle) 100%);

  /* Type */
  --font-sans:"Loew Next Arabic",Tahoma,"Segoe UI",system-ui,sans-serif;
  --weight-text:500;
  --weight-heavy:800;
  --text-3xl:40px; --lh-3xl:46px;
  --text-2xl:32px; --lh-2xl:38px;
  --text-xl:24px;  --lh-xl:30px;
  --text-lg:20px;  --lh-lg:28px;
  --text-md:16px;  --lh-md:24px;
  --text-sm:14px;  --lh-sm:20px;
  --text-xs:12px;  --lh-xs:16px;
  --tracking-tight:-0.01em;
  --tracking-label:0.08em;

  /* Space — 4px base step */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:48px; --space-10:64px; --space-11:80px;

  /* Radius — CST is geometric; nothing softer than 8px */
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --radius-pill:999px; --radius-circle:50%;

  /* Elevation — separation is a rule, not a shadow */
  --shadow-sm:0 1px 2px rgba(0,0,98,.06);
  --shadow-md:0 2px 6px rgba(0,0,98,.10);
  --shadow-lg:0 6px 24px rgba(0,0,98,.14);
  --shadow-focus:0 0 0 3px rgba(0,210,255,.55);
  --blur-glass:blur(14px);

  /* Motion — calm and institutional; no bounce */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --transition-interactive:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}

@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:0ms;--duration-base:0ms}
}

/* ── Base ─────────────────────────────────────────────────── */
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-weight:var(--weight-text);
  font-size:var(--text-sm);
  line-height:var(--lh-sm);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  display:flex;
  min-height:100vh;
}

h1,h2,h3,h4{
  font-family:var(--font-sans);
  font-weight:var(--weight-heavy);
  color:var(--text-heading);
  letter-spacing:var(--tracking-tight);
  margin:0;
}

p{line-height:1.8;margin:0}

button,textarea,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;transition:var(--transition-interactive)}
button:disabled{cursor:wait;background:var(--action-disabled-bg);color:var(--action-disabled-text);border-color:transparent}

button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar{
  width:305px;
  flex-shrink:0;
  background:var(--surface-subtle);
  border-left:1px solid var(--border-subtle);
  padding:var(--space-8) var(--space-7);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

/* Logo use: never distorted or recoloured — width scales, height follows. */
.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
  text-decoration:none;
  color:var(--text-heading);
}

.brand-lockup{
  display:block;
  width:100%;
  height:auto;
}

.brand-caption{
  display:block;
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
  color:var(--text-muted);
}

.intro{margin:var(--space-11) 0 var(--space-8)}

.eyebrow{
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
  letter-spacing:var(--tracking-label);
  color:var(--text-muted);
}

h1{font-size:var(--text-2xl);line-height:var(--lh-2xl);margin:var(--space-3) 0}
.intro p{color:var(--text-muted);font-size:var(--text-sm);line-height:1.9}

.needs{border-top:1px solid var(--border-default);padding-top:var(--space-6)}
.section-title{display:flex;align-items:center;justify-content:space-between}
h2{font-size:var(--text-lg);line-height:var(--lh-lg)}
.section-title h2{font-size:var(--text-sm);line-height:var(--lh-sm)}

.dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:var(--radius-circle);
  background:var(--rule-accent);
}

.muted{color:var(--text-muted);font-size:var(--text-xs);line-height:var(--lh-xs)}

.need-chip{
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
  padding:var(--space-3);
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  margin-top:var(--space-2);
}

.sidebar-bottom{margin-top:auto;padding-top:var(--space-7)}

.catalogue-status{
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

#snapshot{font-size:var(--text-xs);line-height:var(--lh-xs);color:var(--text-muted);margin-top:var(--space-1)}

/* Secondary button: navy outline, hover darkens */
.reset{
  width:100%;
  border:1px solid var(--action-primary);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  background:transparent;
  color:var(--action-primary);
  font-weight:var(--weight-heavy);
  margin-top:var(--space-3);
}
.reset:hover:not(:disabled){background:var(--action-primary);color:var(--text-on-inverse)}

/* ── Main ─────────────────────────────────────────────────── */
main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  max-width:1400px;
  margin:auto;
  height:100vh;
}

header{
  padding:var(--space-7) var(--space-9);
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
header h2{margin-top:var(--space-2)}

.mode{
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--border-default);
  border-radius:var(--radius-pill);
  background:var(--surface-card);
  color:var(--text-body);
}

.workspace{
  overflow-y:auto;
  flex:1;
  padding:var(--space-8) var(--space-9) var(--space-6);
  scroll-behavior:smooth;
}

.conversation{max-width:860px;margin:auto}

/* ── Conversation ─────────────────────────────────────────── */
.message{
  display:flex;
  direction:ltr;
  gap:var(--space-3);
  margin-bottom:var(--space-6);
  align-items:flex-start;
}

.avatar{
  flex-shrink:0;
  width:33px;
  height:33px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-subtle);
  background:var(--surface-card);
  overflow:hidden;
}

.avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.bubble{
  direction:rtl;
  text-align:right;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding:var(--space-4) var(--space-5);
  max-width:86%;
  line-height:1.9;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.message.user{justify-content:flex-end}
.message.user .bubble{
  background:var(--surface-inverse);
  color:var(--text-on-inverse);
  border-color:var(--surface-inverse);
  border-radius:var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
}

.choices{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  justify-content:flex-end;
  margin:var(--space-1) 0 var(--space-6) 45px;
}

.choice{
  border:1px solid var(--border-default);
  color:var(--action-primary);
  background:transparent;
  border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
}
.choice:hover:not(:disabled){background:var(--surface-subtle);border-color:var(--action-primary)}

.budget-control{width:100%;min-width:0;flex-wrap:wrap;margin:0;padding:var(--space-4)}
.budget-control label,.budget-control p{width:100%}
.budget-control input[type=number]{width:130px;max-width:100%;padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-body);background:var(--surface-card)}
.budget-control input[type=range]{flex:1;min-width:100px;accent-color:var(--action-primary)}

/* ── Results ──────────────────────────────────────────────── */
.results{max-width:1000px;margin:var(--space-7) auto}
.results h3{font-size:var(--text-lg);line-height:var(--lh-lg);margin-bottom:var(--space-4)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}

/* Cards separate with the 1px navy-25% rule, not shadows. */
.card{
  position:relative;
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}

/* Lead card takes the 3px brand gradient rail. */
.card:first-child{border-color:var(--action-primary)}
.card:first-child::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--gradient-brand);
}

.card-tag{
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
  letter-spacing:var(--tracking-label);
  color:var(--action-primary);
  font-weight:var(--weight-heavy);
  margin-bottom:var(--space-4);
}

.provider{color:var(--text-muted);font-size:var(--text-xs);line-height:var(--lh-xs)}

.card h4{
  line-height:1.6;
  margin:var(--space-2) 0 var(--space-4);
  font-size:var(--text-md);
  min-height:50px;
}

.price{
  font-size:var(--text-2xl);
  line-height:var(--lh-2xl);
  font-weight:var(--weight-heavy);
  color:var(--text-heading);
  letter-spacing:var(--tracking-tight);
}

.price-unit{
  font-size:var(--text-xs);
  font-weight:var(--weight-text);
  color:var(--text-muted);
  letter-spacing:0;
  margin-right:var(--space-2);
}

.price-note{font-size:var(--text-xs);line-height:var(--lh-xs);color:var(--text-muted);margin-top:var(--space-1)}

.benefits{
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  margin:var(--space-5) 0;
  padding:var(--space-3) 0;
  display:grid;
  gap:var(--space-3);
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
}

.reason{font-size:var(--text-xs);line-height:var(--lh-xs);color:var(--cst-purple);margin:var(--space-1) 0}
.warning{font-size:var(--text-xs);line-height:var(--lh-xs);color:var(--status-warning)}

.details-button{
  border:0;
  background:var(--surface-subtle);
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:var(--action-primary);
  font-weight:var(--weight-heavy);
  margin-top:auto;
  width:100%;
}
.details-button:hover:not(:disabled){background:var(--action-primary);color:var(--text-on-inverse)}

/* ── Composer ─────────────────────────────────────────────── */
footer{
  padding:var(--space-5) var(--space-9);
  background:var(--surface-page);
  border-top:1px solid var(--border-subtle);
}

form{
  max-width:960px;
  margin:auto;
  display:flex;
  gap:var(--space-4);
  padding:var(--space-3);
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  align-items:center;
  transition:var(--transition-interactive);
}
form:focus-within{border-color:var(--action-primary);box-shadow:var(--shadow-focus)}

textarea{
  resize:none;
  border:0;
  background:transparent;
  outline:none;
  width:100%;
  line-height:1.8;
  min-height:30px;
  max-height:100px;
  color:var(--text-body);
  padding:var(--space-1) var(--space-2);
}
textarea::placeholder{color:var(--neutral-400)}
textarea:focus-visible{box-shadow:none}

/* Primary action: navy, hover darkens, press does not scale. */
#send{
  border:0;
  background:var(--action-primary);
  color:var(--text-on-inverse);
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:var(--radius-md);
  font-size:var(--text-xl);
  line-height:1;
}
#send:hover:not(:disabled){background:var(--action-primary-hover)}
#send:active:not(:disabled){background:var(--action-primary-active)}

.footnote{
  text-align:center;
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
  color:var(--text-muted);
  margin:var(--space-3) 0 0;
}

.error{
  max-width:960px;
  margin:0 auto var(--space-3);
  padding:var(--space-3);
  background:#fdf1f1;
  border:1px solid var(--status-danger);
  border-radius:var(--radius-md);
  color:var(--status-danger);
  font-size:var(--text-xs);
  line-height:var(--lh-xs);
}

/* ── Dialog ───────────────────────────────────────────────── */
dialog{
  position:relative;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  max-width:720px;
  width:92%;
  max-height:80vh;
  padding:0 var(--space-8) var(--space-8);
  color:var(--text-body);
  background:var(--surface-card);
  box-shadow:var(--shadow-lg);
  overflow:hidden auto;
}
/* Capped by the 3px brand gradient rail. */
dialog::before{
  content:"";
  display:block;
  position:sticky;
  top:0;
  z-index:1;
  height:3px;
  margin:0 calc(var(--space-8) * -1) var(--space-6);
  background:var(--gradient-brand);
}
dialog::backdrop{background:var(--surface-overlay);backdrop-filter:var(--blur-glass)}
dialog h3{font-size:var(--text-xl);line-height:var(--lh-xl)}
dialog h4{font-size:var(--text-md);line-height:var(--lh-md);margin-top:var(--space-6)}
dialog p,dialog li{font-size:var(--text-sm);line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
dialog ul{margin:var(--space-3) 0;padding-inline-start:var(--space-5)}
dialog li{margin-bottom:var(--space-2)}

.close{
  border:1px solid var(--border-default);
  background:var(--surface-card);
  border-radius:var(--radius-circle);
  width:32px;
  height:32px;
  font-size:var(--text-lg);
  line-height:1;
  color:var(--text-body);
  float:left;
}
.close:hover{background:var(--action-primary);color:var(--text-on-inverse);border-color:var(--action-primary)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden]{display:none!important}

/* ── Responsive ───────────────────────────────────────────── */
@media(min-width:701px){
  .sidebar{height:100dvh;overflow-y:auto}
  .sidebar>*{flex-shrink:0}
}

@media(min-width:1600px){
  .workspace{padding-top:var(--space-10)}
  .sidebar{width:340px}
}

@media(max-width:1100px){
  .sidebar{width:250px;padding:var(--space-7) var(--space-6)}
  .cards{grid-template-columns:1fr}
  .card h4{min-height:0}
  .card{display:block}
  .workspace{padding:var(--space-6)}
  header,footer{padding:var(--space-5) var(--space-6)}
  .intro{margin-top:var(--space-8)}
}

@media(max-width:700px){
  body{display:block}
  .sidebar{
    position:static;
    width:100%;
    height:auto;
    padding:var(--space-4) var(--space-5);
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    border-left:0;
    border-bottom:1px solid var(--border-subtle);
  }
  .brand-lockup{max-width:164px}
  .intro,.needs,.catalogue-status,#snapshot,.brand-caption{display:none}
  .sidebar-bottom{padding:0;margin:0}
  .reset{margin:0;font-size:var(--text-xs);width:auto;padding:var(--space-2) var(--space-3)}
  main{height:calc(100dvh - 80px)}
  header{padding:var(--space-4) var(--space-5)}
  .workspace{padding:var(--space-6) var(--space-4)}
  .bubble{padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}
  .message{gap:var(--space-2)}
  .avatar{width:28px;height:28px}
  .choices{margin-right:0;margin-left:36px;gap:var(--space-2)}
  .choice{padding:var(--space-2) var(--space-3)}
  footer{padding:var(--space-3)}
  .mode{font-size:10px;padding:var(--space-2)}
  textarea{font-size:var(--text-xs)}
  dialog{padding:0 var(--space-6) var(--space-6)}
  dialog::before{margin:0 calc(var(--space-6) * -1) var(--space-5)}
}

.demo-banner { flex-shrink: 0; padding: 12px 20px; background: #fff3cd; color: #593e00; border-bottom: 1px solid #dfba55; font-size: 13px; line-height: 1.7; }
.demo-banner strong, .demo-banner span { display: block; }
.demo-notice { padding: 10px; background: #fff3cd; color: #593e00; border-radius: 8px; }