/* ════════════════════════════════════════════════════════════
   FUJAIRAWIA v4 — "Basalt Mountains & Deep Blue Sea"
   Palette: Deep Charcoal · Oceanic Teal · Heritage Gold
   Font: IBM Plex Sans Arabic — ultra-premium Arabic rendering
   ════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Core Palette */
  --charcoal-0:  #0d1117;
  --charcoal-1:  #111820;
  --charcoal-2:  #161e2a;
  --charcoal-3:  #1e2935;
  --charcoal-4:  #253040;
  --charcoal-5:  #2e3d52;

  --teal-0:      #003d4d;
  --teal-1:      #005f73;
  --teal-2:      #0a8fa8;
  --teal-3:      #18b4ce;
  --teal-4:      #5dd4e8;
  --teal-glow:   rgba(0, 95, 115, 0.20);
  --teal-rim:    rgba(24, 180, 206, 0.20);

  --gold-0:      #6b4808;
  --gold-1:      #9a6c1a;
  --gold-2:      #c5a059;
  --gold-3:      #d4b878;
  --gold-4:      #e8d09a;
  --gold-glow:   rgba(197, 160, 89, 0.16);
  --gold-rim:    rgba(197, 160, 89, 0.22);

  /* Text */
  --t-0:  rgba(255,255,255,0.96);
  --t-1:  rgba(255,255,255,0.80);
  --t-2:  rgba(255,255,255,0.55);
  --t-3:  rgba(255,255,255,0.32);
  --t-4:  rgba(255,255,255,0.15);

  /* Glass surfaces */
  --glass-bg:    rgba(18, 24, 36, 0.68);
  --glass-hdr:   rgba(13, 17, 23, 0.85);
  --glass-input: rgba(20, 28, 42, 0.75);
  --glass-msg:   rgba(16, 22, 34, 0.60);
  --rim:         rgba(255,255,255,0.07);
  --rim-gold:    rgba(197,160,89,0.15);
  --rim-teal:    rgba(24,180,206,0.12);

  /* Fonts */
  --ff-ar:  'IBM Plex Sans Arabic', sans-serif;
  --ff-dis: 'Playfair Display', Georgia, serif;
  --ff-mon: 'DM Mono', monospace;

  /* Layout */
  --col-w:    760px;
  --hdr-h:    64px;
  --ibar-h:   80px;

  /* Radius */
  --r-s:  6px;
  --r-m:  12px;
  --r-l:  18px;
  --r-xl: 24px;
  --r-f:  9999px;

  /* Easing */
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  min-height:100dvh;
  background:var(--charcoal-0);
  color:var(--t-0);
  font-family:var(--ff-ar);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
button { cursor:pointer; border:none; background:none; color:inherit; font:inherit; }
textarea { font:inherit; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--charcoal-5); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--teal-1); }

/* ── GLASS UTILITY ───────────────────────────────────────── */
.glass {
  background:var(--glass-bg);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--rim);
}

/* ── SCENE ────────────────────────────────────────────────── */
.scene {
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

.scene__base {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 50% at 50% -5%, rgba(0,95,115,0.22) 0%,transparent 55%),
    radial-gradient(ellipse 80%  60% at 0%  80%, rgba(0,63,80,0.16)  0%,transparent 50%),
    radial-gradient(ellipse 60%  40% at 100% 90%,rgba(30,18,8,0.20)  0%,transparent 50%),
    linear-gradient(180deg, #0d1117 0%, #0a0f18 60%, #0d1520 100%);
}

.scene__mountains {
  position:absolute; bottom:0; left:0; right:0;
  width:100%; height:55%;
}

.scene__ocean {
  position:absolute; bottom:0; left:0; right:0; height:22%;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(0,45,60,0.18) 40%,
    rgba(0,60,80,0.30) 100%
  );
}

.scene__shimmer {
  position:absolute; bottom:0; left:0; right:0; height:12%;
  background:linear-gradient(90deg,
    transparent,
    rgba(24,180,206,0.07) 20%,
    rgba(24,180,206,0.13) 50%,
    rgba(24,180,206,0.07) 80%,
    transparent
  );
  animation:shimmer 9s ease-in-out infinite alternate;
}
@keyframes shimmer {
  from { transform:scaleX(0.85) translateX(-4%); opacity:0.5; }
  to   { transform:scaleX(1.1)  translateX(4%);  opacity:1; }
}

.scene__grain {
  position:absolute; inset:0; opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

.scene__glow {
  position:absolute; border-radius:50%;
  filter:blur(90px); animation:glowDrift 18s ease-in-out infinite alternate;
}
.scene__glow--sea {
  width:500px; height:300px;
  bottom:5%; left:-5%;
  background:radial-gradient(ellipse,rgba(0,95,115,0.18) 0%,transparent 70%);
}
.scene__glow--gold {
  width:360px; height:220px;
  top:8%; right:5%;
  background:radial-gradient(ellipse,rgba(197,160,89,0.08) 0%,transparent 70%);
  animation-delay:-9s;
}
@keyframes glowDrift {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(20px,-25px) scale(1.08); }
}

/* ── APP SHELL ────────────────────────────────────────────── */
.app {
  position:relative; z-index:10;
  display:flex; flex-direction:column;
  align-items:center;
  min-height:100dvh;
  width:100%;
}

/* ── HEADER ──────────────────────────────────────────────── */
.hdr {
  width:100%;
  position:sticky; top:0; z-index:100;
  box-shadow:0 1px 0 var(--rim-gold), 0 4px 24px rgba(0,0,0,0.4);
  flex-shrink:0;
}

/* Teal line along top edge */
.hdr::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--teal-1) 25%,
    var(--teal-2) 50%,
    var(--teal-1) 75%,
    transparent 100%
  );
  opacity:0.7;
}

.hdr__inner {
  max-width:var(--col-w);
  margin:0 auto;
  padding:0 24px;
  height:var(--hdr-h);
  display:flex; align-items:center; gap:14px;
}

/* Logo */
.logo {
  width:44px; height:44px; flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(197,160,89,0.25));
  transition:filter 0.3s;
}
.logo:hover { filter:drop-shadow(0 0 20px rgba(197,160,89,0.45)); }
.logo svg { width:100%; height:100%; }

/* Brand */
.brand { display:flex; flex-direction:column; flex-shrink:0; }
.brand__ar {
  font-family:var(--ff-ar); font-size:1.22rem; font-weight:700;
  color:var(--gold-2);
  text-shadow:0 0 20px rgba(197,160,89,0.30);
  line-height:1.2; letter-spacing:0.02em;
}
.brand__en {
  font-family:var(--ff-dis); font-size:0.7rem; font-style:italic;
  color:var(--t-3); letter-spacing:0.14em;
}

/* Tagline */
.hdr__tagline {
  flex:1; text-align:center;
  font-family:var(--ff-dis); font-size:0.8rem; font-style:italic;
  color:var(--t-2); letter-spacing:0.07em;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.hdr__sep { color:var(--gold-2); font-style:normal; font-size:0.55rem; opacity:0.6; }

/* Header end */
.hdr__end { display:flex; align-items:center; gap:14px; flex-shrink:0; }

.hdr__status { display:flex; align-items:center; gap:6px; }
.status-pip {
  display:block; width:7px; height:7px; border-radius:50%;
  background:#2de887;
  box-shadow:0 0 0 0 rgba(45,232,135,0.4);
  animation:pip 3s ease-in-out infinite;
}
.status-pip.thinking { background:var(--gold-2); animation:none; box-shadow:0 0 10px rgba(197,160,89,0.5); }
.status-pip.offline  { background:#e84040; animation:none; }
@keyframes pip {
  0%,100% { box-shadow:0 0 0 0 rgba(45,232,135,0.4); }
  50%      { box-shadow:0 0 0 5px rgba(45,232,135,0); }
}
.status-lbl {
  font-family:var(--ff-mon); font-size:0.68rem; color:var(--t-3);
}

.hdr__icon-btn {
  width:34px; height:34px; border-radius:var(--r-s);
  border:1px solid var(--rim);
  background:rgba(255,255,255,0.03);
  color:var(--t-3);
  display:flex; align-items:center; justify-content:center;
  transition:all 0.18s var(--ease);
}
.hdr__icon-btn svg { width:15px; height:15px; }
.hdr__icon-btn:hover {
  border-color:rgba(232,80,80,0.3);
  background:rgba(232,80,80,0.08);
  color:rgba(240,100,100,0.9);
}

/* ── MAIN COLUMN ─────────────────────────────────────────── */
.col {
  width:100%; max-width:var(--col-w);
  padding:0 20px;
  flex:1; display:flex; flex-direction:column;
  /* Space for sticky input bar */
  padding-bottom:calc(var(--ibar-h) + 32px);
}

/* ── WELCOME ─────────────────────────────────────────────── */
.welcome {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:48px 16px 32px; text-align:center;
  animation:fadeUp 0.55s var(--ease) both;
}
.welcome.gone { display:none; }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}

.welcome__arch {
  width:260px; margin-bottom:-16px;
  animation:fadeUp 0.4s 0s var(--ease) both;
}

.welcome__khat {
  font-family:var(--ff-ar); font-size:0.9rem; font-weight:500;
  color:var(--teal-3); letter-spacing:0.10em;
  text-transform:uppercase; margin-bottom:12px;
  animation:fadeUp 0.4s 0.10s var(--ease) both; opacity:0;
}
.welcome__h {
  font-family:var(--ff-ar); font-size:2rem; font-weight:700;
  color:var(--t-0); line-height:1.45;
  text-shadow:0 2px 30px rgba(0,0,0,0.5);
  animation:fadeUp 0.4s 0.18s var(--ease) both; opacity:0;
}
.welcome__sub {
  font-family:var(--ff-dis); font-size:0.95rem; font-style:italic;
  color:var(--t-2); margin-top:10px; letter-spacing:0.05em;
  animation:fadeUp 0.4s 0.26s var(--ease) both; opacity:0;
}

.welcome__rule {
  display:flex; align-items:center; gap:12px;
  margin:24px 0 20px; width:100px;
  animation:fadeUp 0.4s 0.34s var(--ease) both; opacity:0;
}
.welcome__rule span { flex:1; height:1px; background:var(--rim); }
.welcome__rule i { font-style:normal; font-size:0.55rem; color:var(--gold-2); opacity:0.6; }

/* Chips */
.chips {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; width:100%; max-width:660px;
  animation:fadeUp 0.4s 0.40s var(--ease) both; opacity:0;
}

.chip {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 10px 12px;
  background:var(--glass-msg);
  border:1px solid var(--rim);
  border-radius:var(--r-l);
  text-align:center;
  transition:all 0.24s var(--spring);
  position:relative; overflow:hidden;
}
.chip::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,95,115,0.07),rgba(197,160,89,0.04));
  opacity:0; transition:opacity 0.24s;
}
.chip:hover {
  border-color:var(--teal-rim);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px var(--rim-teal);
}
.chip:hover::after { opacity:1; }
.chip:active { transform:translateY(-1px) scale(0.98); }

.chip__ic { font-size:1.3rem; }
.chip__ar {
  font-family:var(--ff-ar); font-size:0.82rem; font-weight:600;
  color:var(--t-1); display:block; white-space:nowrap;
}
.chip__en {
  font-family:var(--ff-dis); font-size:0.68rem; font-style:italic;
  color:var(--t-3); white-space:nowrap;
}

/* ── MESSAGES ────────────────────────────────────────────── */
.msgs { display:flex; flex-direction:column; gap:0; }

/* ── MESSAGE ─────────────────────────────────────────────── */
.msg {
  display:flex; gap:14px;
  padding:22px 0;
  border-bottom:1px solid var(--rim);
  animation:msgIn 0.4s var(--spring) both;
}
.msg:last-child { border-bottom:none; }

@keyframes msgIn {
  from { opacity:0; transform:translateY(14px) scale(0.99); }
  to   { opacity:1; transform:none; }
}

.msg--user { flex-direction:row-reverse; }

/* Avatar */
.msg__av {
  width:36px; height:36px; border-radius:10px;
  flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
}
.msg--user .msg__av {
  background:var(--gold-glow);
  border:1px solid var(--gold-rim);
  font-family:var(--ff-ar); font-size:0.72rem; font-weight:700;
  color:var(--gold-2);
}
.msg--ai .msg__av {
  background:var(--teal-glow);
  border:1px solid var(--teal-rim);
}
.msg--ai .msg__av svg { width:22px; height:22px; }

/* Body */
.msg__body { flex:1; min-width:0; }
.msg--user .msg__body { display:flex; flex-direction:column; align-items:flex-end; }

/* Text content */
.msg__text {
  font-family:var(--ff-ar); font-size:0.95rem; line-height:1.85;
  color:var(--t-0); word-break:break-word;
}

.msg--user .msg__text {
  background:var(--glass-msg);
  border:1px solid var(--gold-rim);
  border-radius:var(--r-l) var(--r-s) var(--r-l) var(--r-l);
  padding:13px 17px;
  display:inline-block;
  max-width:88%;
  text-align:right;
}

/* Horizontal rule between Arabic/English sections */
.msg__text .section-rule {
  border:none; border-top:1px solid var(--rim);
  margin:14px 0;
}

/* Headings inside AI response */
.msg__text h3 {
  font-family:var(--ff-ar); font-size:1.05rem; font-weight:700;
  color:var(--gold-2); margin:12px 0 6px;
}
.msg__text h4 {
  font-family:var(--ff-ar); font-size:0.95rem; font-weight:600;
  color:var(--teal-3); margin:10px 0 5px;
}

.msg__text strong { color:var(--gold-2); font-weight:700; }
.msg__text em     { color:var(--teal-3); font-style:italic; }
.msg__text code {
  background:rgba(255,255,255,0.06);
  border:1px solid var(--rim);
  padding:2px 7px; border-radius:4px;
  font-family:var(--ff-mon); font-size:0.84em;
  color:var(--gold-3);
}
.msg__text p { margin-bottom:0.6em; }
.msg__text p:last-child { margin-bottom:0; }
.msg__text ul { padding-right:20px; margin:6px 0; }
.msg__text li { margin-bottom:4px; color:var(--t-1); }

/* Timestamp */
.msg__time {
  display:block; margin-top:6px;
  font-family:var(--ff-mon); font-size:0.65rem; color:var(--t-3);
}
.msg--user .msg__time { text-align:right; }

/* ── ACTION CARDS ─────────────────────────────────────────── */
.msg__text .action-cards {
  display:flex; flex-direction:column; gap:8px;
  margin:16px 0 4px;
}

.msg__text .action-card {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px;
  background:rgba(0,95,115,0.10);
  border:1px solid var(--teal-rim);
  border-radius:var(--r-l);
  text-decoration:none; color:inherit;
  transition:all 0.22s var(--spring);
  position:relative; overflow:hidden;
}
.msg__text .action-card::before {
  content:''; position:absolute;
  right:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--teal-2),var(--gold-2));
  opacity:0.6;
}
.msg__text .action-card:hover {
  background:rgba(0,95,115,0.18);
  border-color:rgba(24,180,206,0.35);
  transform:translateX(-3px);
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.msg__text .action-card[data-blocked="true"] {
  opacity:0.4; pointer-events:none; cursor:default;
}

.msg__text .ac-icon {
  font-size:1.4rem; flex-shrink:0; line-height:1;
}
.msg__text .ac-body {
  display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;
}
.msg__text .ac-name {
  font-family:var(--ff-ar); font-size:0.9rem; font-weight:700;
  color:var(--t-0); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg__text .ac-desc {
  font-family:var(--ff-dis); font-size:0.72rem; font-style:italic;
  color:var(--teal-3); white-space:nowrap;
}
.msg__text .ac-arrow {
  font-size:0.9rem; color:var(--gold-2); flex-shrink:0;
  opacity:0.7; transition:opacity 0.18s, transform 0.18s;
}
.msg__text .action-card:hover .ac-arrow {
  opacity:1; transform:translate(-2px,-2px);
}

/* ── TYPING INDICATOR ────────────────────────────────────── */
.typing-dots {
  display:inline-flex; gap:5px; align-items:center; padding:4px 0;
}
.typing-dots span {
  width:6px; height:6px; border-radius:50%;
  background:var(--teal-2); opacity:0.4;
  animation:tdot 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(1) { animation-delay:0s; }
.typing-dots span:nth-child(2) { animation-delay:0.2s; }
.typing-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes tdot {
  0%,60%,100% { transform:translateY(0); opacity:0.3; }
  30%          { transform:translateY(-7px); opacity:1; }
}

/* ── INPUT BAR ───────────────────────────────────────────── */
.ibar-shell {
  width:100%; max-width:var(--col-w);
  padding:12px 20px 20px;
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  z-index:50;
  background:linear-gradient(to top, var(--charcoal-0) 55%, transparent);
}

/* Gold shimmer top of input area */
.ibar-shell::before {
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(197,160,89,0.25),transparent);
  pointer-events:none;
}

.ibar {
  display:flex; align-items:flex-end; gap:12px;
  padding:12px 14px 12px 18px;
  border-radius:var(--r-xl);
  box-shadow:0 4px 30px rgba(0,0,0,0.5), 0 1px 0 var(--rim-teal) inset;
  transition:border-color 0.25s, box-shadow 0.25s;
}
.ibar:focus-within {
  border-color:rgba(0,95,115,0.50) !important;
  box-shadow:0 0 0 3px rgba(0,95,115,0.12),
             0 8px 32px rgba(0,0,0,0.5),
             0 1px 0 var(--rim-teal) inset;
}

.ibar__ta {
  flex:1; background:none; border:none; outline:none; resize:none;
  font-family:var(--ff-ar); font-size:0.96rem;
  color:var(--t-0); line-height:1.65;
  min-height:28px; max-height:180px; overflow-y:auto;
  direction:auto; caret-color:var(--teal-3);
}
.ibar__ta::placeholder { color:var(--t-3); font-style:italic; }

.ibar__end { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.ibar__cnt {
  font-family:var(--ff-mon); font-size:0.67rem;
  color:var(--t-3); white-space:nowrap; transition:color 0.18s;
}
.ibar__cnt.near { color:var(--gold-2); }
.ibar__cnt.full { color:#e84040; }

/* Send button */
.send-btn {
  width:42px; height:42px; border-radius:var(--r-m);
  background:linear-gradient(135deg, var(--teal-2), var(--teal-0));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,95,115,0.40);
  transition:all 0.22s var(--spring);
  flex-shrink:0;
}
.send-btn svg { width:16px; height:16px; }
.send-btn:disabled {
  opacity:0.28; cursor:not-allowed;
  box-shadow:none; transform:none;
  background:var(--charcoal-5);
}
.send-btn:not(:disabled):hover {
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 8px 24px rgba(0,95,115,0.55);
  background:linear-gradient(135deg, var(--teal-3), var(--teal-1));
}
.send-btn:not(:disabled):active { transform:scale(0.95); }

.ibar__hint {
  font-family:var(--ff-mon); font-size:0.66rem;
  color:var(--t-3); text-align:center;
  padding-top:7px; letter-spacing:0.04em;
}
kbd {
  display:inline-block; padding:1px 5px;
  background:var(--charcoal-3); border:1px solid var(--rim);
  border-radius:3px;
  font-family:var(--ff-mon); font-size:0.66rem; color:var(--t-2);
}

/* ── TOAST ────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:90px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--charcoal-2); border:1px solid var(--rim);
  color:var(--t-0); padding:10px 22px;
  border-radius:var(--r-f);
  font-family:var(--ff-ar); font-size:0.83rem;
  opacity:0; pointer-events:none; z-index:9999;
  white-space:nowrap;
  backdrop-filter:blur(16px);
  box-shadow:0 6px 28px rgba(0,0,0,0.5);
  transition:all 0.25s var(--ease);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.ok   { border-color:rgba(45,232,135,0.3); color:#50e89a; }
.toast.err  { border-color:rgba(232,80,80,0.3);  color:#f08080; }

/* ── MODAL ────────────────────────────────────────────────── */
.modal-bg {
  position:fixed; inset:0;
  background:rgba(5,8,14,0.75);
  backdrop-filter:blur(10px);
  z-index:8000; display:flex;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.25s;
}
.modal-bg.open { opacity:1; pointer-events:all; }

.modal {
  width:min(380px,92vw);
  border-radius:var(--r-xl);
  padding:32px 28px; text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset;
  transform:scale(0.9) translateY(18px);
  transition:transform 0.3s var(--spring);
}
.modal-bg.open .modal { transform:none; }

.modal__orn { display:block; font-size:0.72rem; color:var(--gold-2); opacity:0.55; margin-bottom:14px; }
.modal__title { font-family:var(--ff-ar); font-size:1.2rem; font-weight:700; color:var(--t-0); margin-bottom:10px; }
.modal__body { font-family:var(--ff-ar); font-size:0.87rem; color:var(--t-2); line-height:1.8; margin-bottom:24px; }
.modal__body em { font-family:var(--ff-dis); font-style:italic; color:var(--t-3); }
.modal__btns { display:flex; gap:10px; justify-content:center; }
.modal__no,
.modal__yes {
  flex:1; max-width:148px; padding:10px 16px;
  border-radius:var(--r-m); font-family:var(--ff-ar);
  font-size:0.9rem; font-weight:600;
  border:1px solid; cursor:pointer; transition:all 0.18s;
}
.modal__no  { background:var(--charcoal-3); border-color:var(--rim); color:var(--t-1); }
.modal__no:hover  { background:var(--charcoal-4); }
.modal__yes { background:rgba(232,80,80,0.12); border-color:rgba(232,80,80,0.28); color:#f09090; }
.modal__yes:hover { background:rgba(232,80,80,0.22); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 780px) {
  :root { --col-w:100%; }
  .hdr__tagline { display:none; }
  .hdr__inner { padding:0 16px; }
  .col { padding:0 12px; }
  .chips { grid-template-columns:repeat(2,1fr); }
  .ibar-shell { padding:10px 12px 16px; }
  .welcome { padding:36px 12px 28px; }
  .welcome__h { font-size:1.65rem; }
}
@media (max-width: 480px) {
  .chips { gap:8px; }
  .chip { padding:12px 8px; }
  .ibar__hint { display:none; }
  .welcome__h { font-size:1.4rem; }
  .msg__text .action-card { gap:10px; padding:11px 12px; }
}