/* ================================================================
   ARADA NETWORK — Master Design System v4.0
   ================================================================ */

/* Inter font — loaded non-blocking via link in HTML head */

/* ── TOKENS ── */
:root {
  --gold:#c5a059; --gold-l:#e0be7a;
  --gold-dim:rgba(197,160,89,.13);
  --gold-brd:rgba(197,160,89,.26);

  /* Dark surfaces */
  --bg0:#0f0b08; --bg1:#1a140f; --bg2:#231810; --bg3:#2d2016; --bg4:#3a2a1a;
  --t1:#f0e6d0;  --t2:#c4b59a;  --t3:#8a7a66;
  --brd:rgba(197,160,89,.17); --brd2:#4a3d32;
  --chat-bg:#0c0906;
  --nav-bg:rgba(15,11,8,.97);

  /* Light surfaces */
  --l-bg0:#f8f4ef; --l-bg1:#ffffff; --l-bg2:#f0ebe4; --l-bg3:#e4dbd2; --l-bg4:#d8cfc4;
  --l-t1:#1a0f06;  --l-t2:#4a3622;  --l-t3:#7a6048;
  --l-brd:rgba(0,0,0,.08); --l-brd2:#d8cfc4;
  --l-chat-bg:#e4dbd2;
  --l-nav-bg:rgba(255,255,255,.97);

  /* Semantic — dark default */
  --bg-base:    var(--bg0);
  --bg-surf:    var(--bg1);
  --bg-card:    var(--bg2);
  --bg-input:   var(--bg0);
  --bg-hover:   var(--bg3);
  --bg-chat:    var(--chat-bg);
  --bg-nav:     var(--nav-bg);
  --text-1:     var(--t1);
  --text-2:     var(--t2);
  --text-3:     var(--t3);
  --border:     var(--brd);
  --border-2:   var(--brd2);
  --accent:     var(--gold);
  --accent-h:   var(--gold-l);
  --accent-dim: var(--gold-dim);
  --accent-brd: var(--gold-brd);
  --bsent:      var(--gold);
  --bsent-txt:  #1a0f06;
  --brecv:      var(--bg3);
  --brecv-txt:  var(--t1);
  /* Aliases for compatibility */
  --bg-surface:      var(--bg1);
  --bubble-out:      var(--gold);
  --bubble-out-text: #1a0f06;
  --bubble-in:       var(--bg3);
  --bubble-in-text:  var(--t1);
  --border-2:        var(--brd2);
  /* Legacy aliases — old pages may still use these */
  --bg-primary:      var(--bg0);
  --bg-secondary:    var(--bg2);
  --bg-input:        var(--bg0);
  --text-primary:    var(--t1);
  --text-secondary:  var(--t2);
  --text-muted:      var(--t3);
  --text-meta:       var(--t3);
  --accent-border:   var(--gold-brd);
  --accent-hover:    var(--gold-l);
  --card-shadow:     0 8px 32px rgba(0,0,0,.55);
  --input-color:     var(--t1);
  --nav-bg:          var(--nav-bg);
  --error:           #e05555;
  --danger:          #e05555;
  --success:         #3dce6e;
  --online:          #3dce6e;
  --divider:         rgba(197,160,89,.10);
  --green:#3dce6e; --red:#e05555; --blue:#4a90d9; --orange:#f0a742;
  --sh-sm:0 2px 8px rgba(0,0,0,.35);
  --sh-md:0 6px 24px rgba(0,0,0,.5);
  --sh-lg:0 16px 56px rgba(0,0,0,.7);
  --sh-glow:0 0 0 3px var(--gold-dim);
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-full:9999px;
  --nav-h:60px; --tab-h:64px; --rail-w:64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 24px);
}

/* Light mode */
body.lm, html.lm body {
  --bg-base:  var(--l-bg0); --bg-surf: var(--l-bg1); --bg-card: var(--l-bg1);
  --bg-input: var(--l-bg2); --bg-hover:var(--l-bg3);
  --bg-chat:  var(--l-chat-bg); --bg-nav: var(--l-nav-bg);
  --text-1:   var(--l-t1); --text-2: var(--l-t2); --text-3: var(--l-t3);
  --border:   var(--l-brd); --border-2:var(--l-brd2);
  --accent:   #9a7228; --accent-h:#c5a059;
  --accent-dim:rgba(154,114,40,.1); --accent-brd:rgba(154,114,40,.28);
  --bsent:#9a7228; --bsent-txt:#fff;
  --brecv:#fff;    --brecv-txt:var(--l-t1);
  --bg-surface:     var(--l-bg1);
  --bubble-out:     #9a7228; --bubble-out-text:#fff;
  --bubble-in:      #ffffff; --bubble-in-text:var(--l-t1);
  /* Legacy aliases */
  --bg-primary:     var(--l-bg0);
  --bg-secondary:   var(--l-bg1);
  --text-primary:   var(--l-t1);
  --text-secondary: var(--l-t2);
  --text-muted:     var(--l-t3);
  --text-meta:      var(--l-t3);
  --accent-border:  rgba(154,114,40,.28);
  --accent-hover:   #c5a059;
  --input-color:    var(--l-t1);
  --error:          #c0392b;
  --danger:         #c0392b;
  --success:        #27ae60;
  --online:         #27ae60;
}



/* Prevent flash — apply bg to html element immediately when lm class is set */
html.lm { background: #f8f4ef; color: #1a0f06; }

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg-base); color:var(--text-1);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100%; transition:background .25s,color .25s;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;font-family:inherit;}
input,textarea,select{font-family:inherit;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px;}
::-webkit-scrollbar-track{background:transparent;}

/* ── MOBILE TOUCH FIXES ── */
/* Remove tap flash on all interactive elements */
a, button, input, select, textarea,
.menu-item, .s-row, .chat-row, .bt-item,
.ci-btn, .send-btn, .ab-play-btn, .nav-link,
.rl-item, .u-card, .nc-row, .fwd-row {
    -webkit-tap-highlight-color: transparent;
}
/* Minimum 44px tap target for all buttons */
button, .btn, .ci-btn, .send-btn, .ab-play-btn,
.nav-link, .rl-item, .bt-item, .mob-icon-btn,
.ch-btn, .ch-back, .topnav-back {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}
/* Exception: small inline buttons keep their visual size but expand hit area */
.ci-btn { min-height: 36px; min-width: 36px; }
.prev-rm { min-height: 32px; min-width: 32px; }
/* Select elements on mobile */
select, .form-select {
    font-size: 16px; /* prevents iOS auto-zoom */
    min-height: 40px;
    touch-action: manipulation;
}
/* Inputs — prevent iOS zoom */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
    font-size: 16px;
}
@media (max-width: 839px) {
    /* Ensure scroll body doesn't overflow on small screens */
    .scroll-body { overflow-x: hidden; }
    /* Prevent double-tap zoom on buttons */
    button, a { touch-action: manipulation; }
    /* Full-width forms on mobile */
    .form-select { width: 100% !important; max-width: 100%; }
}
.page-shell {
  display:flex; min-height:100vh;
  margin:0; padding:0;
}
/* Rail placeholder — actual rail is position:fixed */
.page-shell::before {
  content:''; flex-shrink:0; width:0;
  display:none; /* only on desktop */
}
@media(min-width:840px){
  .page-shell::before { display:block; width:var(--rail-w); }
}
.page-content {
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  margin:0; padding:0;
}

/* ── TOP NAV ── */
.topnav {
  position:fixed; top:0; right:0; left:0;
  height:calc(var(--nav-h) + var(--safe-top));
  padding-top:var(--safe-top);
  padding-left:16px; padding-right:16px; padding-bottom:0;
  background:var(--bg-nav);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  z-index:500;
  margin:0; box-sizing:border-box;
}
@media(min-width:840px){
  .topnav { left:var(--rail-w); }
}
.topnav-title {
  font-size:20px; font-weight:800; color:var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topnav-back {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  color:var(--accent); font-size:16px; text-decoration:none;
  transition:background .15s; flex-shrink:0;
}
.topnav-back:hover { background:var(--accent-dim); }

/* ── BOTTOM TAB BAR (mobile only) ── */
.bot-tabs {
  position:fixed; bottom:0; left:0; right:0;
  height:calc(var(--tab-h) + var(--safe-bottom));
  background:var(--bg-nav);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--border);
  display:flex; z-index:500;
  padding-bottom:var(--safe-bottom);
  margin:0; box-sizing:border-box;
}
@media(min-width:840px){ .bot-tabs{display:none;} }
.bt-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  text-decoration:none; color:var(--text-3);
  font-size:10px; font-weight:600; transition:color .15s;
  position:relative;
}
.bt-item.on { color:var(--accent); }
.bt-icon { font-size:20px; line-height:1; } /* kept for legacy emoji fallback */
.bt-fa   { font-size:18px; line-height:1; } /* FA icon size in tabs */
.bt-ava  { width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid transparent; }
.bt-item.on .bt-ava { border-color:var(--accent); }
.bt-badge {
  position:absolute; top:5px; right:calc(50% - 22px);
  background:var(--red); color:#fff;
  font-size:9px; font-weight:800;
  padding:1px 5px; border-radius:99px; min-width:16px; text-align:center;
}

/* ── SCROLL BODY ── */
.scroll-body {
  flex:1; overflow-y:auto;
  padding-top:calc(var(--nav-h) + var(--safe-top));
  padding-bottom:calc(var(--tab-h) + var(--safe-bottom) + 4px);
  /* No extra margin/padding that creates gaps */
  margin:0;
  box-sizing:border-box;
}
@media(min-width:840px){
  .scroll-body { padding-bottom:16px; }
}

/* ── CARD ── */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
}
.card-p { padding:20px; }
.card-hover{transition:transform .15s,box-shadow .15s;}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border-radius:var(--r-md);
  font-size:14px; font-weight:600; font-family:inherit;
  border:none; transition:all .15s; white-space:nowrap; cursor:pointer;
}
.btn-lg  { padding:13px 24px; font-size:15px; border-radius:var(--r-lg); }
.btn-sm  { padding:7px 14px;  font-size:12px; border-radius:var(--r-sm); }
.btn-xs  { padding:5px 10px;  font-size:11px; border-radius:var(--r-xs); }
.btn-full{ width:100%; }
.btn-primary {
  background:linear-gradient(135deg,var(--accent) 0%,#8a5c20 100%);
  color:#fff; box-shadow:0 4px 14px rgba(197,160,89,.3);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(197,160,89,.45); }
.btn-secondary { background:var(--bg-card); color:var(--text-1); border:1px solid var(--border); }
.btn-secondary:hover{ border-color:var(--accent); background:var(--bg-hover); }
.btn-ghost { background:transparent; color:var(--accent); border:1px solid var(--accent-brd); }
.btn-ghost:hover{ background:var(--accent-dim); }
.btn-danger { background:rgba(224,85,85,.15); color:var(--red); border:1px solid rgba(224,85,85,.25); }
.btn-danger:hover{ background:rgba(224,85,85,.25); }
.btn-icon {
  width:38px; height:38px; padding:0; border-radius:50%;
  background:transparent; border:none; color:var(--accent); font-size:18px;
}
.btn-icon:hover{ background:var(--accent-dim); }

/* ── FORM ── */
.form-field{ margin-bottom:18px; }
.form-label {
  display:block; font-size:12px; font-weight:600;
  color:var(--text-3); margin-bottom:7px; letter-spacing:.3px; text-transform:uppercase;
}
.input-wrap{ position:relative; }
.input-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--accent); opacity:.7; pointer-events:none; font-size:14px;
}
.form-input,.form-select,.form-textarea {
  width:100%; padding:12px 14px;
  background:var(--bg-input); border:1.5px solid var(--border);
  border-radius:var(--r-md); color:var(--text-1);
  font-size:15px; font-family:inherit; outline:none;
  transition:border .2s,box-shadow .2s;
}
.form-input.has-icon{ padding-left:42px; }
.form-input:focus,.form-select:focus,.form-textarea:focus {
  border-color:var(--accent); box-shadow:var(--sh-glow);
}
.form-input::placeholder,.form-textarea::placeholder{ color:var(--text-3); }
.form-input[type=date]{ color-scheme:dark; }
body.lm .form-input[type=date]{ color-scheme:light; }
.form-textarea{ resize:vertical; min-height:90px; line-height:1.5; }
.form-select {
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c5a059' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}

/* Toggle */
.toggle-label{ position:relative; width:50px; height:28px; display:inline-block; }
.toggle-label input{ opacity:0; width:0; height:0; }
.toggle-track {
  position:absolute; inset:0; background:var(--border-2);
  border-radius:99px; cursor:pointer; transition:.3s;
}
.toggle-track::before {
  content:''; position:absolute; width:22px; height:22px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.3s; box-shadow:0 1px 4px rgba(0,0,0,.3);
}
input:checked+.toggle-track{ background:var(--accent); }
input:checked+.toggle-track::before{ transform:translateX(22px); }

/* ── ALERTS ── */
.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:var(--r-sm);
  font-size:13px; font-weight:500; margin-bottom:16px;
}
.alert-error  { background:rgba(224,85,85,.1);  color:var(--red);    border:1px solid rgba(224,85,85,.2); }
.alert-success{ background:rgba(61,206,110,.1); color:var(--green);  border:1px solid rgba(61,206,110,.2); }
.alert-info   { background:rgba(74,144,217,.1); color:var(--blue);   border:1px solid rgba(74,144,217,.2); }
.alert-warning{ background:rgba(240,167,66,.1); color:var(--orange); border:1px solid rgba(240,167,66,.2); }

/* ── AVATAR ── */
.avatar { border-radius:50%; object-fit:cover; border:2px solid var(--accent-brd); flex-shrink:0; }
.av-xs  { width:28px; height:28px; }
.av-sm  { width:38px; height:38px; }
.av-md  { width:50px; height:50px; }
.av-lg  { width:64px; height:64px; }
.av-xl  { width:86px; height:86px; }
.av-xxl { width:110px; height:110px; border-width:3px; }
.av-wrap{ position:relative; display:inline-block; flex-shrink:0; }
.online-pip {
  position:absolute; bottom:1px; right:1px;
  width:11px; height:11px; background:var(--green);
  border-radius:50%; border:2px solid var(--bg-base);
}

/* ── BADGE / UNREAD DOT ── */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--r-full); font-size:11px; font-weight:700; }
.badge-green { background:rgba(61,206,110,.18); color:var(--green); border:1px solid rgba(61,206,110,.3); }
.badge-red   { background:rgba(224,85,85,.18);  color:var(--red);   border:1px solid rgba(224,85,85,.3); }
.badge-gold  { background:var(--accent-dim);     color:var(--accent);border:1px solid var(--accent-brd); }
.badge-gray  { background:rgba(255,255,255,.07); color:var(--text-2);border:1px solid var(--border); }
.u-dot {
  background:var(--accent); color:var(--bg-base);
  font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:99px; min-width:20px; text-align:center;
}

/* ── BOTTOM SHEET ── */
.sheet-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  z-index:800; align-items:flex-end; justify-content:center;
}
.sheet-backdrop.open{ display:flex; animation:bdIn .18s ease; }
@keyframes bdIn{ from{opacity:0} to{opacity:1} }
.sheet {
  width:100%; max-width:620px;
  background:var(--bg-card);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:10px 20px calc(28px + env(safe-area-inset-bottom));
  max-height:88vh; overflow-y:auto;
  animation:shUp .26s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
}
@keyframes shUp{ from{transform:translateY(100%)} to{transform:translateY(0)} }
.sh-handle{ width:40px; height:4px; background:var(--border-2); border-radius:99px; margin:0 auto 16px; }
.sh-title { font-size:17px; font-weight:700; color:var(--accent); margin-bottom:14px; }

/* ── SPINNER ── */
.spinner{
  width:24px; height:24px;
  border:2.5px solid var(--border-2); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{transform:rotate(360deg)} }

/* ── EMPTY STATE ── */
.empty-state{
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:60px 24px; text-align:center; gap:10px;
}
.es-icon { font-size:60px; opacity:.35; }
.es-title{ font-size:18px; font-weight:700; color:var(--text-2); }
.es-sub  { font-size:14px; color:var(--text-3); max-width:260px; line-height:1.6; }

/* ── FAB ── */
.fab {
  position:fixed; right:18px;
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 14px);
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--bg-base);
  border:none; font-size:20px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(197,160,89,.5);
  z-index:200; cursor:pointer; transition:transform .2s;
}
.fab:hover{ transform:scale(1.08); }
.fab:active{ transform:scale(.95); }
@media(min-width:840px){ .fab{ bottom:20px; } }

/* ── UTILITY ── */
.truncate{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w-full  { width:100%; }
.flex    { display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.flex-1  { flex:1; }
.min-w-0 { min-width:0; }
.gap-2   { gap:8px; }
.gap-3   { gap:12px; }
.gap-4   { gap:16px; }
.items-center  { align-items:center; }
.justify-between{ justify-content:space-between; }
.text-center   { text-align:center; }
.pointer       { cursor:pointer; }
.select-none   { user-select:none; -webkit-user-select:none; }
.overflow-hidden{ overflow:hidden; }

/* ── DESKTOP LAYOUT OFFSET ── */
@media (min-width: 840px) {
  body:not(.chat-page):not(.auth-page) .topnav {
    left: var(--rail-w);
  }
}
/* Chat & auth pages — never add any padding/margin */
body.chat-page, body.auth-page {
  padding: 0 !important;
  margin:  0 !important;
}

/* ── Custom confirm dialog ── */
#customConfirmOverlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);z-index:99999;
  align-items:center;justify-content:center;padding:20px;
}
#customConfirmOverlay.open{display:flex;}
.custom-confirm-box{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 20px 16px;
  max-width:320px;width:100%;text-align:center;
  box-shadow:0 16px 48px rgba(0,0,0,.6);
  animation:panelIn .2s ease;
}
.custom-confirm-icon{font-size:36px;margin-bottom:10px;}
.custom-confirm-title{font-size:16px;font-weight:700;margin-bottom:6px;}
.custom-confirm-msg{font-size:13px;color:var(--text-3);line-height:1.6;margin-bottom:18px;}
.custom-confirm-btns{display:flex;gap:8px;}
.custom-confirm-btns button{flex:1;padding:11px;border-radius:var(--r-md);
  border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;}
.cc-cancel{background:var(--bg-hover);color:var(--text-2);}
.cc-ok{background:var(--red);color:#fff;}
.cc-ok.safe{background:var(--accent);color:#1a0f06;}