:root{
  --red:#000000;          /* خلفية صفحة الكود */
  --card:#ffffff;         /* بوكس الكود */
  --ink:#333;             /* سهم > */
  --muted:#111;           /* كلام الخانة الباهت في صفحة الكود */
  --field-ink:#222;       /* الكتابة في خانة الكود */

  --page:#000000;         /* خلفية صفحة الشات */
  --chat-bg:#000000;      /* خلفية الشات */
  --bubble-in:#363434;    /* رسايل الطرف التاني */
  --bubble-in-ink:#ffffff;
  --blue:#05005f;         /* رسايلك */
  --line:#ffffff;         /* الخط اللي فوق خانة الكتابة */
  --chat-ink:#ffffff;     /* الكتابة في خانة الشات */
  --name:#ffffff;         /* اسم الشخص */
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--page);min-height:100vh}
.hidden{display:none!important}

/* ---------- Page 1: code ---------- */
#gate{min-height:100vh;background:var(--red);display:flex;align-items:center;justify-content:center;padding:16px}
.box{width:100%;max-width:465px;background:var(--card);border-radius:15px;display:flex;align-items:center;
  padding:0 20px;height:68px;box-shadow:0 30px 30px -20px rgba(0,0,0,.35)}
.box svg{flex:none}
.box input{flex:1;border:0;outline:0;background:transparent;font-size:18px;color:var(--field-ink);padding:0 18px;min-width:0}
.box input::placeholder{color:var(--muted)}
.box button{border:0;background:none;cursor:pointer;padding:6px;color:var(--ink);display:flex}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-6px)}}

/* ---------- Page 2: chat ---------- */
#chat{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--page)}
.phone{width:100%;max-width:570px;height:min(720px,94vh);background:var(--chat-bg);display:flex;flex-direction:column}
#msgs{flex:1;overflow-y:auto;padding:10px 10px;display:flex;flex-direction:column;gap:4px}
.m{max-width:80%;padding:8px 14px;border-radius:10px;font-size:16px;line-height:1.3;word-wrap:break-word}
.in{align-self:flex-start;background:var(--bubble-in);color:var(--bubble-in-ink);border-top-left-radius:10px;border-bottom-left-radius:4px}
.out{align-self:flex-end;background:var(--blue);color:#fff;border-top-right-radius:10px;border-bottom-right-radius:4px}
.who{align-self:flex-start;font-size:13px;color:var(--name);margin:10px 0 0 10px}
.bar{display:flex;align-items:center;border-top:1px solid var(--line);padding:0 24px 0 38px;height:76px}
.bar input{flex:1;border:0;outline:0;background:transparent;font-size:20px;color:var(--chat-ink);min-width:0}
.bar input::placeholder{color:#888}
.bar button{border:0;background:none;cursor:pointer;padding:6px;display:flex}
.big{font-size:25px;line-height:1}