:root{
  --wa-green:#25D366;
  --wa-teal:#008069;
  --wa-teal-dark:#00a884;
  --ios-blue:#0a84ff;
  --radius-bubble:18px;
}
:root[data-theme="light"]{
  --bg-app:#f5f5f5;
  --nav-bg: rgba(248,248,248,.94);
  --nav-border: rgba(0,0,0,.12);
  --nav-text:#000;
  --nav-sub:#3c3c43;
  --text-main:#000;
  --text-sub:#6d6d72;
  --text-faint:#8e8e93;
  --divider: rgba(60,60,67,.29);
  --chat-bg:#efe7de;
  --chat-bg-pattern-opacity:.06;
  --bubble-out:#d9fdd3;
  --bubble-in:#ffffff;
  --bubble-out-text:#000;
  --bubble-in-text:#000;
  --bubble-meta:#667781;
  --composer-bg:#f6f6f6;
  --composer-field:#ffffff;
  --sheet-bg:#f2f2f7;
  --card-bg:#ffffff;
  --input-border:#d1d1d6;
  --accent:#00a884;
  --link:#0a84ff;
  --status-online:#25D366;
  --check-read:#53bdeb;
  --shadow: 0 1px 2px rgba(0,0,0,.08);
  --overlay-scrim: rgba(0,0,0,.45);
  --statusbar-text:#000;
  --danger:#ff3b30;
  --tabbar-bg: rgba(248,248,248,.94);
}
:root[data-theme="dark"]{
  --bg-app:#000000;
  --nav-bg: rgba(0,0,0,.88);
  --nav-border: rgba(84,84,88,.62);
  --nav-text:#ffffff;
  --nav-sub:#aebac1;
  --text-main:#ffffff;
  --text-sub:#aebac1;
  --text-faint:#8e8e93;
  --divider: rgba(84,84,88,.48);
  --chat-bg:#0b141a;
  --chat-bg-pattern-opacity:.045;
  --bubble-out:#005c4b;
  --bubble-in:#1f2c34;
  --bubble-out-text:#f2f2f7;
  --bubble-in-text:#f2f2f7;
  --bubble-meta:#aebac1;
  --composer-bg:#0b141a;
  --composer-field:#1c1c1e;
  --sheet-bg:#1c1c1e;
  --card-bg:#1c1c1e;
  --input-border:#38383a;
  --accent:#00a884;
  --link:#53bdeb;
  --status-online:#25D366;
  --check-read:#53bdeb;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
  --overlay-scrim: rgba(0,0,0,.6);
  --statusbar-text:#fff;
  --danger:#ff453a;
  --tabbar-bg: rgba(0,0,0,.88);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#0d0d0d;
  color:var(--text-main);
  overflow:hidden;
  overscroll-behavior:none;
}
button{font-family:inherit;}
img{-webkit-user-drag:none;user-select:none;}
input,textarea{font-family:inherit;}

/* ===== Desktop stage / phone frame ===== */
#stage{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background: radial-gradient(circle at 30% 20%, #232323 0%, #0d0d0d 60%);
}
#phone-frame{
  position:relative;
  width:390px;height:844px;
  border-radius:55px;
  background:#000;
  padding:14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 2px #333;
  flex-shrink:0;
}
#phone-screen{
  position:relative;
  width:100%;height:100%;
  border-radius:42px;
  overflow:hidden;
  background:var(--bg-app);
  isolation:isolate;
}
#phone-frame::before{
  content:"";
  position:absolute;
  top:26px;left:50%;transform:translateX(-50%);
  width:120px;height:34px;background:#000;border-radius:20px;
  z-index:50;
}
.desktop-hint{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  color:#666;font-size:12px;letter-spacing:.3px;
}

@media (max-width: 780px){
  #stage{background:var(--bg-app);}
  #phone-frame{
    width:100vw;height:100vh;height:100dvh;border-radius:0;padding:0;box-shadow:none;
  }
  #phone-screen{border-radius:0;}
  #phone-frame::before{display:none;}
  .desktop-hint{display:none;}
}

/* ===== iOS status bar (fake) ===== */
.statusbar{
  position:absolute; top:0; left:0; right:0;
  height:47px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px 0 26px;
  font-size:15px; font-weight:600;
  color:var(--statusbar-text);
  z-index:40;
  pointer-events:none;
}
.statusbar .sb-time{font-variant-numeric:tabular-nums; letter-spacing:.3px;}
.statusbar .sb-icons{display:flex;align-items:center;gap:5px;}
.home-indicator{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:134px;height:5px;border-radius:3px;
  background: var(--text-main);
  opacity:.55;
  z-index:60;
}
:root[data-theme="light"] .home-indicator{background:#000;}
:root[data-theme="dark"] .home-indicator{background:#fff;}

/* ===== Screens / nav stack ===== */
#app-root{position:absolute;inset:0;overflow:hidden;}
.screen{
  position:absolute; inset:0;
  background:var(--bg-app);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
  z-index:1;
}
.screen.active{transform:translateX(0); z-index:5;}
.screen.base{transform:translateX(0); transition:none; z-index:1;}
.screen.push-hidden{transform:translateX(100%);}

.navbar{
  padding-top:47px;
  flex-shrink:0;
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:.5px solid var(--nav-border);
  position:relative; z-index:10;
}
.navbar-row{
  height:44px; display:flex; align-items:center; padding:0 8px;
  position:relative;
}
.navbar-row .nav-btn{
  display:flex;align-items:center;gap:2px;
  background:none;border:none;color:var(--link);
  font-size:17px;padding:6px 8px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
}
.navbar-row .nav-btn.text-only{min-width:auto;justify-content:flex-start;gap:0;}
.navbar-title{
  position:absolute;left:0;right:0;text-align:center;
  font-size:17px;font-weight:600;color:var(--nav-text);
  pointer-events:none;
}
.navbar-large-title{
  padding:2px 16px 10px;
  font-size:34px;font-weight:700;color:var(--nav-text);
}
.navbar-actions{margin-left:auto;display:flex;align-items:center;}
.searchbar-wrap{padding:0 16px 10px;}
.searchbar{
  display:flex;align-items:center;gap:6px;
  background:var(--input-border);
  background:rgba(118,118,128,.12);
  border-radius:10px; height:36px; padding:0 10px;
  color:var(--text-sub); font-size:16px;
}
.searchbar input{
  border:none;background:none;outline:none;color:var(--text-main);
  font-size:16px; width:100%;
}
.searchbar input::placeholder{color:var(--text-sub);}

.screen-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:34px;}
.screen-body.no-scroll{overflow:hidden;}