/* ================================================================
   بديهة AI — royal ancient-palace visual system
   ================================================================ */

:root{
  --ink:#07040c;
  --royal:#0d0716;
  --purple-900:#170a2a;
  --purple-800:#241040;
  --purple-700:#331a56;
  --gold-50:#fff9e6;
  --gold-100:#fff6d9;
  --gold-200:#f4dda6;
  --gold-400:#e3c07b;
  --gold-600:#b8892f;
  --gold-700:#8f6a22;
  --ivory:#f7f1e3;
  --muted:#b6a6c9;
  --muted-2:#8d7aa6;
  --danger:#ffb4a6;
  --ok:#7ce0a4;
  --app-h:100dvh;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  font-family:'Tajawal','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--ink);
  color:var(--ivory);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

button{
  font-family:inherit;
  color:inherit;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
textarea{ font-family:inherit; }
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }

:focus-visible{
  outline:2px solid var(--gold-200);
  outline-offset:3px;
  border-radius:12px;
}

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.ic{ width:20px; height:20px; flex:0 0 auto; display:block; fill:url(#gGold); }
.ic-sm{ width:16px; height:16px; }
.ic-lg{ width:32px; height:32px; }
.ic-crest{ width:34px; height:34px; }

/* ---------------- background scene ---------------- */
.scene{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(circle at 50% 15%, #2a1345 0%, #0a0510 68%);
}
.scene-img{
  position:absolute; inset:-3%;
  background-color:#170a2a;
  background-image:url('assets/palace.png');
  background-position:center 30%;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.58;
  filter:saturate(.95) contrast(1.06) brightness(.92);
  transform:scale(1.05);
  animation:drift 30s ease-in-out infinite alternate;
  transition:opacity .7s ease;
}
body.in-chat .scene-img{ opacity:.3; }
@keyframes drift{
  from{ transform:scale(1.05) translate3d(0,0,0); }
  to{ transform:scale(1.14) translate3d(0,-1.6%,0); }
}
.scene-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 68% at 50% -6%, rgba(126,66,190,.36) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(88% 58% at 50% 104%, rgba(196,146,54,.22) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(8,4,14,.5) 0%, rgba(8,4,14,.8) 52%, rgba(6,3,10,.96) 100%);
}
#dust{ position:absolute; inset:0; width:100%; height:100%; }

/* ---------------- generic view ---------------- */
.view{
  position:fixed; top:0; left:0; right:0;
  height:var(--app-h,100dvh);
  z-index:2;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------------- HERO ---------------- */
.hero{ overflow-y:auto; -webkit-overflow-scrolling:touch; }

.hero-inner{
  min-height:100%;
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:26px 20px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  text-align:center;
}

.crest-top{
  display:grid; place-items:center;
  filter:drop-shadow(0 0 16px rgba(240,215,154,.45));
  animation:fadeUp .7s ease-out both;
}

.medallion{
  position:relative;
  width:clamp(132px,38vw,196px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  margin:2px 0 4px;
  border-radius:50%;
  overflow:visible;
  background:
    radial-gradient(circle at 38% 26%, #4a2570 0%, #2a1345 46%, #170a2a 78%, #0d0716 100%);
  box-shadow:0 0 0 1px rgba(244,221,166,.28) inset;
  animation:fadeUp .8s .05s ease-out both;
}
.medallion::before{
  content:"";
  position:absolute; inset:-10px; border-radius:50%;
  background:conic-gradient(from 0deg,#7d5a1c,#fff6d9,#e3c07b,#fff6d9,#8f6a22,#3a2350,#8f6a22);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:spin 20s linear infinite;
  opacity:.92;
}
.medallion::after{
  content:"";
  position:absolute; inset:-34px; border-radius:50%;
  background:radial-gradient(circle, rgba(227,192,123,.3) 0%, rgba(227,192,123,0) 66%);
  filter:blur(6px);
  z-index:0;
  animation:glowPulse 6s ease-in-out infinite;
}
.medallion img{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%;
  background:radial-gradient(circle at 42% 24%, #5a2f85 0%, #2a1345 48%, #170a2a 100%);
  border:2px solid rgba(244,221,166,.8);
  box-shadow:0 0 0 6px rgba(20,10,34,.92), 0 0 42px rgba(227,192,123,.3), 0 22px 48px rgba(0,0,0,.62);
}
.medallion .medallion-fallback{
  position:relative; z-index:1;
  width:100%; height:100%;
  border-radius:50%;
  display:grid; place-items:center;
  color:#f4dda6;
  font-family:'Aref Ruqaa',serif;
  font-size:clamp(38px,11vw,58px);
  border:2px solid rgba(244,221,166,.6);
  background:radial-gradient(circle at 40% 28%, #4a2570, #170a2a 72%);
}

.title{
  margin:0;
  font-family:'Aref Ruqaa',serif;
  font-weight:700;
  font-size:clamp(38px,11.5vw,56px);
  line-height:1.2;
  background:linear-gradient(180deg,#fff9e6 0%,#f4dda6 40%,#d3a856 72%,#8f6a22 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 5px 20px rgba(227,192,123,.3));
  animation:fadeUp .8s .1s ease-out both;
}
.title-ai{
  font-family:'Tajawal',sans-serif;
  font-weight:800;
  font-size:.4em;
  letter-spacing:.08em;
  vertical-align:middle;
  -webkit-text-fill-color:#f4dda6;
  color:#f4dda6;
}

.subtitle{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:#cbbcdd;
  max-width:300px;
  animation:fadeUp .8s .16s ease-out both;
}

.chips{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:2px 0 6px;
  animation:fadeUp .8s .22s ease-out both;
}
.chip{
  font-size:12.5px;
  padding:6px 13px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,246,217,.1), rgba(255,246,217,.03));
  border:1px solid rgba(227,192,123,.28);
  color:#ecd9a9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:999px;
  font-weight:700;
  font-size:16px;
  height:54px;
  padding:0 26px;
  position:relative;
  transition:transform .16s ease, box-shadow .22s ease, filter .2s ease, background .2s ease;
}
.btn:active{ transform:scale(.972); }
.btn-lg{ min-width:230px; }

.btn-gold{
  color:#20122f;
  background:linear-gradient(180deg,#fff9e6 0%,#f4dda6 28%,#ddb463 62%,#b8892f 100%);
  box-shadow:
    0 12px 28px rgba(184,137,47,.34),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 0 rgba(110,74,19,.42),
    0 0 0 1px rgba(255,246,217,.5);
}
.btn-gold:hover{ filter:brightness(1.05); }
.btn-gold:active{ box-shadow:0 6px 16px rgba(184,137,47,.32), inset 0 2px 6px rgba(110,74,19,.35); }
.btn-gold .ic{ fill:#20122f; }
.btn-gold:disabled{ opacity:.55; filter:grayscale(.4); box-shadow:none; }

.btn-ghost{
  height:46px;
  font-size:14.5px;
  font-weight:500;
  color:#e9d6a8;
  background:linear-gradient(180deg, rgba(255,246,217,.07), rgba(255,246,217,.02));
  border:1px solid rgba(227,192,123,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.btn-ghost:hover{ background:rgba(255,246,217,.1); }

/* ---------------- site footer ---------------- */
.site-footer{
  margin-top:16px;
  padding-top:14px;
  width:100%;
  border-top:1px solid rgba(227,192,123,.18);
  font-size:12.5px;
  line-height:1.9;
  color:#a596b8;
  animation:fadeUp .9s .3s ease-out both;
}
.site-footer strong{ color:#f0d79a; font-weight:700; }

.divider{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:10px;
  color:rgba(227,192,123,.7);
}
.divider span{
  height:1px; flex:1; max-width:80px;
  background:linear-gradient(90deg, rgba(227,192,123,0), rgba(227,192,123,.55));
}
.divider span:last-child{
  background:linear-gradient(90deg, rgba(227,192,123,.55), rgba(227,192,123,0));
}

/* ---------------- CHAT ---------------- */
.chat{
  background:linear-gradient(180deg, rgba(7,4,12,.42) 0%, rgba(7,4,12,.8) 42%, rgba(6,3,10,.95) 100%);
}

.chat-head{
  position:relative; z-index:3;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px;
  background:linear-gradient(180deg, rgba(24,12,40,.97), rgba(13,7,22,.88));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(227,192,123,.22);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.who{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
  width:42px; height:42px; border-radius:50%;
  object-fit:cover;
  object-position:50% 20%;
  border:1.5px solid rgba(244,221,166,.75);
  box-shadow:0 0 18px rgba(227,192,123,.26);
  flex:0 0 auto;
  background:radial-gradient(circle at 40% 28%, #4a2570, #170a2a 72%);
}
.who-txt{ min-width:0; }
.who-name{
  font-family:'Aref Ruqaa',serif;
  font-size:17px; line-height:1.25;
  color:#f4dda6;
  display:flex; align-items:center; gap:6px;
}
.live{
  width:7px; height:7px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 10px var(--ok);
  animation:dotPulse 2.6s ease-in-out infinite;
}
.who-status{ font-size:11.5px; color:var(--muted); margin-top:1px; }

.head-actions{ display:flex; gap:8px; flex:0 0 auto; }
.icon-btn{
  width:40px; height:40px;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,246,217,.08), rgba(255,246,217,.02));
  border:1px solid rgba(227,192,123,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .2s ease, transform .15s ease, opacity .2s ease;
}
.icon-btn:active{ transform:scale(.93); }
.icon-btn[aria-pressed="false"]{ opacity:.48; }

/* ---------------- messages ---------------- */
.messages{
  position:relative; z-index:2;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:16px 13px 10px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scrollbar-width:thin;
  scrollbar-color:rgba(227,192,123,.35) transparent;
}
.messages::-webkit-scrollbar{ width:6px; }
.messages::-webkit-scrollbar-thumb{ background:rgba(227,192,123,.32); border-radius:99px; }

.msg{
  display:flex;
  align-items:flex-end;
  gap:8px;
  max-width:86%;
  animation:rise .34s cubic-bezier(.2,.9,.3,1) both;
}
.msg.ai{ align-self:flex-start; }
.msg.user{ align-self:flex-end; }

.mini-av{
  width:26px; height:26px; border-radius:50%;
  object-fit:cover;
  object-position:50% 18%;
  border:1px solid rgba(244,221,166,.6);
  flex:0 0 auto;
  margin-bottom:3px;
  box-shadow:0 0 12px rgba(227,192,123,.22);
  background:radial-gradient(circle at 40% 28%, #4a2570, #170a2a 72%);
}

.msg-col{ display:flex; flex-direction:column; gap:6px; min-width:0; }

.bubble{
  padding:11px 14px;
  border-radius:18px;
  font-size:15.5px;
  line-height:1.72;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.msg.ai .bubble{
  background:linear-gradient(160deg, rgba(52,27,88,.94), rgba(19,10,32,.96));
  border:1px solid rgba(227,192,123,.26);
  color:var(--ivory);
  border-start-start-radius:6px;
  box-shadow:0 10px 26px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
.msg.user .bubble{
  background:linear-gradient(160deg,#fff2cd 0%,#f0d79a 42%,#d8b06a 74%,#bb8d38 100%);
  color:#1d1029;
  border:1px solid rgba(255,246,217,.62);
  border-start-end-radius:6px;
  box-shadow:0 10px 24px rgba(184,137,47,.26), inset 0 1px 0 rgba(255,255,255,.65);
  font-weight:500;
}
.bubble.err{
  background:linear-gradient(160deg, rgba(78,26,32,.95), rgba(38,12,18,.96));
  border-color:rgba(255,140,120,.45);
  color:#ffd9d0;
}

.badge{
  align-self:flex-start;
  font-size:10.5px;
  padding:4px 10px;
  border-radius:999px;
  color:#f6dfa8;
  background:rgba(227,192,123,.13);
  border:1px solid rgba(227,192,123,.45);
}

.msg-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.mini-btn{
  font-size:12.5px;
  font-weight:700;
  padding:8px 14px;
  min-height:36px;
  border-radius:999px;
  color:#20122f;
  background:linear-gradient(180deg,#fff6d9,#e3c07b 60%,#c39641);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 14px rgba(184,137,47,.25);
  transition:transform .15s ease;
}
.mini-btn:active{ transform:scale(.95); }
.mini-btn.alt{
  color:#f4dda6;
  background:rgba(255,246,217,.06);
  border:1px solid rgba(227,192,123,.38);
  box-shadow:none;
}

/* typing indicator */
.typing .bubble{
  display:flex; align-items:center; gap:5px;
  padding:14px 16px;
}
.tdot{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-400);
  opacity:.35;
  animation:tdot 1.25s infinite ease-in-out;
}
.tdot:nth-child(2){ animation-delay:.16s; }
.tdot:nth-child(3){ animation-delay:.32s; }
@keyframes tdot{
  0%,62%,100%{ opacity:.28; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}

/* ---------------- composer ---------------- */
.composer-wrap{
  position:relative; z-index:3;
  flex:0 0 auto;
  padding:6px 12px 12px;
  background:linear-gradient(180deg, rgba(13,7,22,.55) 0%, rgba(10,5,17,.96) 42%);
  border-top:1px solid rgba(227,192,123,.16);
}
.hint{
  min-height:16px;
  padding:0 8px 6px;
  font-size:11.5px;
  line-height:1.4;
  text-align:center;
  color:var(--muted-2);
  transition:color .2s ease;
}
.hint.warn{ color:var(--danger); }

.composer{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:7px;
  border-radius:24px;
  background:linear-gradient(160deg, rgba(51,26,86,.9), rgba(19,10,32,.95));
  border:1px solid rgba(227,192,123,.32);
  box-shadow:0 12px 32px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.07);
}

#input{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  color:var(--ivory);
  font-size:15.5px;
  line-height:1.6;
  padding:10px 4px;
  resize:none;
  max-height:118px;
  scrollbar-width:thin;
}
#input::placeholder{ color:var(--muted-2); }

.mic-btn{
  width:44px; height:44px;
  flex:0 0 auto;
  border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,246,217,.09), rgba(255,246,217,.02));
  border:1px solid rgba(227,192,123,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .15s ease, background .2s ease;
}
.mic-btn:active{ transform:scale(.92); }
.mic-btn.listening{
  background:linear-gradient(180deg,#fff6d9,#e3c07b 70%,#c39641);
  border-color:#fff6d9;
  animation:micPulse 1.5s ease-in-out infinite;
}
.mic-btn.listening .ic{ fill:#20122f; }

.send-btn{
  height:44px;
  flex:0 0 auto;
  padding:0 14px;
  border-radius:22px;
  display:inline-flex; align-items:center; gap:6px;
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  color:#20122f;
  background:linear-gradient(180deg,#fff9e6 0%,#f4dda6 34%,#d8b06a 72%,#b8892f 100%);
  box-shadow:0 8px 20px rgba(184,137,47,.32), inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .15s ease, opacity .2s ease, filter .2s ease;
}
.send-btn:active:not(:disabled){ transform:scale(.96); }
.send-btn .ic{ fill:#20122f; }
.send-btn:disabled{
  opacity:.42;
  filter:grayscale(.45);
  box-shadow:none;
  cursor:not-allowed;
}

/* ---------------- modal ---------------- */
.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(5,2,9,.8);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  animation:fadeIn .25s ease-out both;
}
.modal-card{
  position:relative;
  width:min(430px,100%);
  max-height:86vh;
  overflow-y:auto;
  padding:26px 20px 20px;
  border-radius:26px;
  text-align:center;
  background:linear-gradient(160deg,#1f1035 0%,#0d0716 58%,#170c28 100%);
  border:1px solid rgba(227,192,123,.38);
  box-shadow:0 30px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.08);
  animation:pop .3s cubic-bezier(.2,.9,.3,1) both;
  scrollbar-width:thin;
}
.modal-x{
  position:absolute; top:12px; left:12px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,246,217,.06);
  border:1px solid rgba(227,192,123,.28);
}
.modal-crest{ display:grid; place-items:center; margin-bottom:6px; filter:drop-shadow(0 0 14px rgba(240,215,154,.45)); }
.modal-title{
  font-family:'Aref Ruqaa',serif;
  font-size:30px;
  margin:0 0 10px;
  background:linear-gradient(180deg,#fff9e6,#f4dda6 46%,#c99a3f 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.modal-text{
  font-size:14px;
  line-height:1.85;
  color:#c3b3d6;
  margin:0 0 16px;
}

.founder-card{
  margin:0 0 18px;
  padding:16px 14px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(227,192,123,.18), rgba(227,192,123,.04));
  border:1px solid rgba(227,192,123,.44);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.founder-label{ font-size:11.5px; color:#c9b184; margin-bottom:4px; }
.founder-name{
  font-family:'Aref Ruqaa',serif;
  font-size:19px;
  line-height:1.65;
  color:#f6e2b0;
}
.founder-note{
  margin-top:8px;
  font-size:12px;
  line-height:1.7;
  color:#a596b8;
}

.feat{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  text-align:start;
}
.feat li{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px;
  color:#d7c8e6;
  padding:9px 12px;
  border-radius:14px;
  background:rgba(255,246,217,.045);
  border:1px solid rgba(227,192,123,.16);
}

.modal-actions{ display:flex; flex-direction:column; gap:9px; }
.modal-actions .btn{ width:100%; }

/* ---------------- toast ---------------- */
.toast{
  position:fixed;
  left:50%;
  bottom:104px;
  transform:translate(-50%,14px);
  z-index:80;
  max-width:86vw;
  padding:10px 18px;
  border-radius:999px;
  font-size:13px;
  text-align:center;
  color:#f6e2b0;
  background:rgba(24,12,40,.97);
  border:1px solid rgba(227,192,123,.42);
  box-shadow:0 14px 32px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------------- animations ---------------- */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes rise{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@keyframes pop{ from{ opacity:0; transform:scale(.94) translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes glowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.95; } }
@keyframes dotPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes micPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(227,192,123,.45), inset 0 1px 0 rgba(255,255,255,.8); }
  50%{ box-shadow:0 0 0 11px rgba(227,192,123,0), inset 0 1px 0 rgba(255,255,255,.8); }
}

/* ---------------- responsive tweaks ---------------- */
@media (max-height:700px){
  .crest-top{ display:none; }
  .hero-inner{ gap:10px; padding-top:18px; padding-bottom:16px; }
  .medallion{ width:clamp(112px,32vw,160px); }
  .title{ font-size:clamp(32px,9.5vw,44px); }
  .btn-lg{ height:50px; min-width:210px; }
}
@media (max-width:360px){
  .who-status{ display:none; }
  .avatar{ width:38px; height:38px; }
  .icon-btn{ width:36px; height:36px; }
  .send-btn{ padding:0 11px; font-size:12px; }
  .bubble{ font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ================================================================
   مركز القيادة — admin console (black & gold)
   ================================================================ */
.ap-full{ width:100%; }

.admin-entry{
  margin-top:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:42px; padding:9px 16px;
  border-radius:999px;
  font-size:12.5px; font-weight:600;
  color:#c9b184;
  background:rgba(255,246,217,.045);
  border:1px solid rgba(227,192,123,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:background .2s ease, transform .15s ease;
}
.admin-entry:active{ transform:scale(.97); }
.admin-entry .ic{ opacity:.9; }

/* --- login --- */
.admin-modal{
  position:fixed; inset:0; z-index:72;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
.admin-backdrop{
  position:absolute; inset:0;
  background:rgba(4,3,7,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  animation:fadeIn .25s ease both;
}
.admin-login-card{
  position:relative;
  width:min(380px,100%);
  padding:28px 22px 22px;
  border-radius:26px;
  text-align:center;
  background:linear-gradient(160deg,#181020 0%,#0a070f 58%,#130c1d 100%);
  border:1px solid rgba(227,192,123,.4);
  box-shadow:0 30px 80px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07);
  animation:pop .3s cubic-bezier(.2,.9,.3,1) both;
}
.admin-sub{ margin:0 0 18px; font-size:12.5px; color:#a596b8; }
.admin-label{ display:block; text-align:start; font-size:12.5px; color:#c9b184; margin-bottom:8px; }
.admin-pin{
  width:100%; height:56px; margin-bottom:4px;
  text-align:center;
  letter-spacing:.45em; text-indent:.45em;
  font-size:22px; font-weight:700;
  color:#fff6d9;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(227,192,123,.35);
  border-radius:16px;
  outline:none;
  font-family:inherit;
}
.admin-pin::placeholder{ color:rgba(201,177,132,.55); letter-spacing:.22em; }
.admin-pin:focus{ border-color:#e3c07b; box-shadow:0 0 0 3px rgba(227,192,123,.16); }
.admin-err{ min-height:20px; margin:4px 0 10px; font-size:12.5px; color:#ffb4a6; }
.admin-err.shake{ animation:shake .38s ease; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}

/* --- panel shell --- */
.admin-panel{
  position:fixed; inset:0; z-index:70;
  height:var(--app-h,100dvh);
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% -12%, #241834 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg,#08060c 0%,#050409 100%);
  color:#f7f1e3;
  overflow:hidden;
}
.ap-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px;
  background:linear-gradient(180deg, rgba(22,14,32,.98), rgba(9,6,14,.92));
  border-bottom:1px solid rgba(227,192,123,.26);
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.ap-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.ap-brand .ic-crest{ flex:0 0 auto; filter:drop-shadow(0 0 12px rgba(240,215,154,.4)); }
.ap-title{
  font-family:'Aref Ruqaa',serif;
  font-size:18px; line-height:1.25;
  color:#f4dda6;
}
.ap-sub{ font-size:11px; color:#a596b8; margin-top:1px; }
.ap-close{
  width:40px; height:40px; flex:0 0 auto;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,246,217,.06);
  border:1px solid rgba(227,192,123,.3);
}
.ap-close:active{ transform:scale(.93); }

.ap-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 13px 26px;
  display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(227,192,123,.32) transparent;
}
.ap-body::-webkit-scrollbar{ width:6px; }
.ap-body::-webkit-scrollbar-thumb{ background:rgba(227,192,123,.3); border-radius:99px; }

.ap-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.ap-stat{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 4px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,246,217,.07), rgba(255,246,217,.015));
  border:1px solid rgba(227,192,123,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.ap-stat-num{
  font-size:19px; font-weight:800; line-height:1.1;
  color:#f4dda6;
  font-variant-numeric:tabular-nums;
}
.ap-stat-lbl{ font-size:10.5px; color:#a596b8; }

.ap-tabs{
  display:flex; gap:6px;
  padding:5px;
  border-radius:16px;
  background:rgba(255,246,217,.045);
  border:1px solid rgba(227,192,123,.18);
}
.ap-tab{
  flex:1 1 0; min-width:0;
  min-height:42px;
  border-radius:12px;
  font-size:13px; font-weight:700;
  color:#b6a6c9;
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 6px;
}
.ap-tab.active{
  color:#20122f;
  background:linear-gradient(180deg,#fff6d9,#e3c07b 62%,#c39641);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(184,137,47,.24);
}

.ap-view{ display:flex; flex-direction:column; gap:12px; min-height:0; }

.ap-search{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:14px;
  font-family:inherit;
  font-size:14px;
  color:#f7f1e3;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(227,192,123,.24);
  outline:none;
  margin-bottom:10px;
}
.ap-search::placeholder{ color:#8d7aa6; }
.ap-search:focus{ border-color:#e3c07b; box-shadow:0 0 0 3px rgba(227,192,123,.14); }

.ap-users{ display:flex; flex-direction:column; gap:8px; }
.ap-user{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:start;
  padding:11px 12px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,246,217,.06), rgba(255,246,217,.015));
  border:1px solid rgba(227,192,123,.2);
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.ap-user:active{ transform:scale(.985); }
.ap-user.active{
  border-color:#e3c07b;
  background:rgba(227,192,123,.14);
}
.ap-av{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:800; font-size:15px;
  color:#20122f;
  background:linear-gradient(180deg,#fff6d9,#e3c07b 62%,#c39641);
  box-shadow:0 0 0 1px rgba(255,246,217,.45);
}
.ap-user-info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.ap-user-name{
  font-size:14px; font-weight:700; color:#f7f1e3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ap-user-meta{
  font-size:11px; color:#a596b8;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ap-tag{
  flex:0 0 auto;
  font-size:10.5px; font-weight:700;
  padding:4px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.ap-tag.pause{ color:#ffd9d0; background:rgba(255,120,100,.16); border:1px solid rgba(255,140,120,.42); }
.ap-tag.new{
  color:#20122f;
  background:linear-gradient(180deg,#fff6d9,#e3c07b);
  min-width:22px; text-align:center;
}

.ap-empty{
  padding:22px 12px;
  text-align:center;
  font-size:13px;
  color:#8d7aa6;
  border-radius:16px;
  border:1px dashed rgba(227,192,123,.22);
}

/* --- conversation --- */
.ap-chat{ display:flex; flex-direction:column; gap:10px; }
.ap-chat-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,246,217,.07), rgba(255,246,217,.015));
  border:1px solid rgba(227,192,123,.24);
}
.ap-back{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,246,217,.07);
  border:1px solid rgba(227,192,123,.3);
}
.ap-back:active{ transform:scale(.93); }
.ap-chat-who{ min-width:0; flex:1 1 auto; }
.ap-chat-name{ font-size:15px; font-weight:700; color:#f4dda6; }
.ap-chat-meta{ font-size:10.5px; color:#a596b8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ap-pause-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ap-pill{
  min-height:42px;
  padding:8px 14px;
  border-radius:999px;
  font-size:12.5px; font-weight:700;
  color:#f4dda6;
  background:rgba(255,246,217,.06);
  border:1px solid rgba(227,192,123,.34);
}
.ap-pill.on{
  color:#20122f;
  background:linear-gradient(180deg,#fff6d9,#e3c07b 62%,#c39641);
  border-color:#f4dda6;
}
.ap-pill.danger{ color:#ffd9d0; border-color:rgba(255,140,120,.45); background:rgba(255,120,100,.12); }
.ap-pill.armed{ color:#20122f; background:linear-gradient(180deg,#ffd9d0,#ff9f8e); border-color:#ffd9d0; }
.ap-pill:active{ transform:scale(.97); }

.ap-msgs{
  display:flex; flex-direction:column; gap:9px;
  min-height:150px; max-height:42vh;
  overflow-y:auto;
  padding:12px 10px;
  border-radius:16px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(227,192,123,.16);
  scrollbar-width:thin;
}
.ap-msgs::-webkit-scrollbar{ width:5px; }
.ap-msgs::-webkit-scrollbar-thumb{ background:rgba(227,192,123,.28); border-radius:99px; }

.ap-msg{ display:flex; }
.ap-msg.from-user{ justify-content:flex-start; }
.ap-msg.from-ai{ justify-content:flex-end; }
.ap-msg-col{ display:flex; flex-direction:column; gap:3px; max-width:88%; min-width:0; }
.ap-msg.from-user .ap-msg-col{ align-items:flex-start; }
.ap-msg.from-ai .ap-msg-col{ align-items:flex-end; }
.ap-bubble{
  padding:9px 12px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.65;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.ap-msg.from-user .ap-bubble{
  color:#f7f1e3;
  background:linear-gradient(160deg, rgba(52,27,88,.94), rgba(19,10,32,.96));
  border:1px solid rgba(227,192,123,.24);
}
.ap-msg.from-ai .ap-bubble{
  color:#1d1029;
  background:linear-gradient(160deg,#fff2cd 0%,#f0d79a 46%,#d8b06a 100%);
  border:1px solid rgba(255,246,217,.6);
  font-weight:500;
}
.ap-bubble.admin{ box-shadow:0 0 0 1px rgba(227,192,123,.7) inset; }
.ap-time{ font-size:9.5px; color:#8d7aa6; padding:0 4px; }

.ap-reply{ display:flex; flex-direction:column; gap:8px; }
.ap-reply textarea{
  width:100%;
  min-height:70px;
  padding:11px 13px;
  border-radius:16px;
  font-family:inherit;
  font-size:14px;
  line-height:1.6;
  resize:vertical;
  color:#f7f1e3;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(227,192,123,.28);
  outline:none;
}
.ap-reply textarea::placeholder{ color:#8d7aa6; }
.ap-reply textarea:focus{ border-color:#e3c07b; box-shadow:0 0 0 3px rgba(227,192,123,.14); }
.ap-send{ width:100%; }

/* --- cards / broadcast / log --- */
.ap-card{
  padding:14px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(255,246,217,.055), rgba(255,246,217,.012));
  border:1px solid rgba(227,192,123,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.ap-card-title{
  font-size:13.5px; font-weight:700; color:#f4dda6;
  margin-bottom:10px;
}
.ap-textarea{
  width:100%;
  min-height:92px;
  padding:11px 13px;
  border-radius:16px;
  font-family:inherit;
  font-size:14px;
  line-height:1.6;
  resize:vertical;
  color:#f7f1e3;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(227,192,123,.28);
  outline:none;
}
.ap-textarea::placeholder{ color:#8d7aa6; }
.ap-textarea:focus{ border-color:#e3c07b; box-shadow:0 0 0 3px rgba(227,192,123,.14); }
.ap-note{ margin:8px 0 12px; font-size:11.5px; line-height:1.7; color:#a596b8; }

.ap-bc-list, .ap-log{ display:flex; flex-direction:column; gap:8px; }
.ap-bc-item, .ap-log-item{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(227,192,123,.16);
  font-size:12.5px;
  line-height:1.65;
  color:#e6dcef;
}
.ap-bc-item .ap-bc-text{ color:#ffd9d0; }
.ap-log-item .ap-log-act{ color:#f4dda6; font-weight:700; }
.ap-log-item .ap-log-det{ color:#c3b3d6; }
.ap-item-time{ display:block; margin-top:4px; font-size:10px; color:#8d7aa6; }

.ap-toast{
  position:fixed;
  left:50%; bottom:22px;
  transform:translate(-50%,16px);
  z-index:76;
  max-width:88vw;
  padding:10px 18px;
  border-radius:999px;
  font-size:12.5px;
  text-align:center;
  color:#f6e2b0;
  background:rgba(24,12,40,.98);
  border:1px solid rgba(227,192,123,.44);
  box-shadow:0 14px 32px rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.ap-toast.show{ opacity:1; transform:translate(-50%,0); }

/* --- public admin broadcast banner --- */
.admin-broadcast{
  position:fixed;
  top:10px; left:10px; right:10px;
  z-index:90;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(160deg,#ff5a4d 0%,#e03131 52%,#c92a2a 100%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 18px 44px rgba(200,40,40,.42), inset 0 1px 0 rgba(255,255,255,.5);
  color:#0a0a0a;
  pointer-events:none;
  opacity:0;
  transform:translateY(-135%) scale(.98);
  transition:opacity .45s cubic-bezier(.2,.9,.3,1), transform .45s cubic-bezier(.2,.9,.3,1);
}
.admin-broadcast.show{
  opacity:1;
  transform:translateY(0) scale(1);
}
.admin-broadcast::before{
  content:"من الإدارة";
  display:inline-block;
  margin-bottom:5px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  color:#0a0a0a;
  background:rgba(255,255,255,.55);
  padding:3px 10px;
  border-radius:999px;
}
.bc-text{
  font-size:14.5px;
  font-weight:700;
  line-height:1.6;
  color:#000;
  white-space:pre-wrap;
  word-break:break-word;
}

@media (max-width:360px){
  .ap-stat-num{ font-size:16px; }
  .ap-stat-lbl{ font-size:9.5px; }
  .ap-tab{ font-size:12px; }
  .ap-msgs{ max-height:38vh; }
}

@media (min-width:720px){
  .ap-body{ max-width:760px; width:100%; margin:0 auto; padding-inline:20px; }
  .ap-msgs{ max-height:48vh; }
}

@media (prefers-reduced-motion:reduce){
  .admin-backdrop,.admin-login-card,.admin-err.shake{ animation:none !important; }
  .admin-broadcast,.ap-toast{ transition-duration:.001ms !important; }
}