/* ==========================================================================
   ANONIUM — "Cipher" theme overlay  ·  2026-09-29
   Loaded AFTER styles.css. Cosmetic only — remaps the app's --tg-* tokens and
   polishes key components. No layout logic, no JS deps. Revert = remove the
   <link> in index.html. Direction: stealth-luxe · obsidian base · a single jade
   signal accent · monospace numerals · restrained depth · fine grain.
   ========================================================================== */

:root{
  /* --- signature palette (remaps the app-wide --tg-* system) --- */
  --tg-primary:             #1fbf8f;
  --tg-primary-dark:        #148f6b;
  --tg-primary-light:       #35d6a3;
  --tg-primary-transparent: rgba(31,191,143,.42);

  --tg-bg-primary:   #080b0e;
  --tg-bg-secondary: #0a0f12;
  --tg-bg-tertiary:  #0e151a;
  --tg-bg-chat:      #080b0e;

  --tg-text-primary:   #eef3f1;
  --tg-text-secondary: #c2cec9;
  --tg-text-muted:     #7c8b85;

  --tg-border:  #1a262b;
  --tg-hover:   #12201d;
  --tg-success: #1fbf8f;
  --tg-danger:  #e5484d;
  --tg-warning: #d9a441;
  --tg-online:  #35d6a3;

  --tg-message-out: #16a377;
  --tg-message-in:  #101a1e;
  --tg-input-bg:    #0c1317;
  --tg-scrollbar:   #1f3b34;
  --tg-gradiant-primary:   #0e1a1f;
  --tg-gradiant-secondary: #080b0e;

  /* --- new tokens --- */
  --anon-accent:   #1fbf8f;
  --anon-accent-2: #35d6a3;
  --anon-brass:    #b08a3e;              /* rare premium note; ties to the report */
  --anon-glass:    rgba(14,21,26,.62);
  --anon-hair:     rgba(255,255,255,.07);
  --anon-glow:     rgba(31,191,143,.16);
  --font-ui:   "Space Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---- typography ---- */
body, button, input, textarea, select, .form-input { font-family: var(--font-ui); }
/* crypto-authentic mono for addresses, balances, amounts, codes */
.balance-amount, .wallet-address, .available-balance, .wallet-last-updated,
#userwalletBalance, .word-input, code, .mono,
#confirmSwapRate, #confirmSwapExpected, #confirmSwapMinOut, #confirmSwapPay, #confirmSwapFee {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ---- ambient: clean obsidian depth (no spotlight orb — read as premium, not a blob) ---- */
.Anonium-app, body{
  background: linear-gradient(160deg, #0b1013 0%, #070a0c 100%) !important;
  background-attachment: fixed;
}
/* film-grain overlay — tactile detail generated UIs never add */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-container{ background: transparent !important; }

/* ---- auth screens = glass cards (the first impression) ---- */
.auth-form, .wlc-container, #forgotPasswordModal, #qrCodeForm{
  background: var(--anon-glass) !important;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid var(--anon-hair) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045);
}
.auth-header h1{ font-weight:600; letter-spacing:-.02em; }

/* ---- inputs ---- */
.form-input, .word-input, .search-input-wrapper input{
  background: var(--tg-input-bg) !important;
  border: 1px solid var(--anon-hair) !important;
  border-radius: 12px !important;
  transition: border-color .18s, box-shadow .18s;
}
.form-input:focus, .word-input:focus, .search-input-wrapper input:focus{
  border-color: var(--anon-accent) !important;
  box-shadow: 0 0 0 3px rgba(31,191,143,.16) !important;
  outline: none !important;
}

/* ---- buttons: jade, hover-lift ---- */
.btn-primary-custom, .btn-success-custom, .send-wallet-btn, .send-btn{
  background: linear-gradient(135deg, var(--anon-accent-2), var(--anon-accent)) !important;
  color:#06110d !important; font-weight:600 !important;
  border:none !important; border-radius:12px !important;
  box-shadow: 0 10px 24px -10px rgba(31,191,143,.55);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-primary-custom:hover, .btn-success-custom:hover, .send-wallet-btn:hover, .send-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -10px rgba(31,191,143,.65);
  filter: brightness(1.05);
}
.btn-primary-custom:active, .btn-success-custom:active,
.send-wallet-btn:active, .send-btn:active{ transform: translateY(0); }

/* ---- wallet hero card ---- */
.wallet-balance-card{
  background:
     radial-gradient(120% 150% at 100% 0%, rgba(31,191,143,.14), transparent 55%),
     linear-gradient(160deg, #0f181c, #0a1013) !important;
  border:1px solid var(--anon-hair) !important;
  border-radius:18px !important;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.05),
              inset 0 0 0 1px rgba(31,191,143,.06);
  position:relative; overflow:hidden;
}
.wallet-balance-card::before{
  content:""; position:absolute; top:-45%; right:-18%; width:60%; height:130%;
  background: radial-gradient(circle, rgba(31,191,143,.18), transparent 70%);
  filter: blur(8px); pointer-events:none;
}
.balance-label{ text-transform:uppercase; letter-spacing:.22em; font-size:10px !important; color:var(--tg-text-muted) !important; line-height:1 !important; }
/* big mono digits: comfortable line-height so the rounded 0-bottoms aren't clipped
   by the card's overflow:hidden, and generous bottom padding so they don't kiss the edge */
.balance-amount, #userwalletBalance{ font-size:2.1rem !important; font-weight:600 !important; color:#ffffff !important; line-height:1.2 !important; }
.wallet-balance-card{ gap:8px !important; padding:20px 18px 24px !important; justify-content:center !important; }
.wallet-balance-card .balance-amount{ justify-content:flex-start !important; align-items:center !important; margin:0 !important; padding:0 !important; overflow:visible !important; }
.balance-currency{ color:var(--anon-accent) !important; font-weight:600; }
/* currency selector: pin to the card's top-right so the big balance sits alone
   (was floating mid-height next to the number; also fixes dark-on-dark text) */
.currency-select{
  position:absolute !important; top:16px; right:16px; z-index:2;
  color: var(--anon-accent) !important;
  background: rgba(31,191,143,.10) !important;
  border: 1px solid rgba(31,191,143,.32) !important;
  border-radius: 10px !important;
  padding: 5px 10px !important;
  font-family: var(--font-ui) !important; font-weight:600; font-size:.78rem !important;
  height: fit-content; cursor:pointer; appearance:auto;
}
.currency-select:focus{ box-shadow:0 0 0 3px rgba(31,191,143,.16) !important; outline:none !important; }
.currency-select option{ background:#0f181c; color:#eef3f1; }

/* ---- wallet address + brass chain badge ---- */
.wallet-chain-badge{
  background: rgba(176,138,62,.12) !important; color: var(--anon-brass) !important;
  border:1px solid rgba(176,138,62,.36) !important; border-radius:8px !important;
  letter-spacing:.06em; text-transform:uppercase;
}
.wallet-address{ color:var(--tg-text-secondary) !important; }
.wallet-address-box{ border:1px solid var(--anon-hair) !important; border-radius:12px !important; background:rgba(255,255,255,.02) !important; }

/* ---- bottom nav: glass + active jade pill ---- */
.anonium-footer{
  background: rgba(8,12,14,.82) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top:1px solid var(--anon-hair) !important;
}
.anonium-footer-btn{ color:var(--tg-text-muted) !important; transition: color .18s, transform .18s; position:relative; }
.anonium-footer-btn:hover{ color:var(--tg-text-secondary) !important; transform: translateY(-1px); }
.anonium-footer-btn.active{ color:var(--anon-accent) !important; }
.anonium-footer-btn.active::after{
  content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:24px; height:3px; border-radius:3px; background:var(--anon-accent);
  box-shadow:0 0 12px 1px rgba(31,191,143,.7);
}

/* ---- message bubbles ---- */
.message.outgoing .message-bubble{
  background: linear-gradient(135deg, var(--anon-accent-2), var(--anon-accent)) !important;
  color:#06110d !important; border-radius:16px 16px 4px 16px !important;
  box-shadow: 0 6px 16px -8px rgba(31,191,143,.45);
}
.message.incoming .message-bubble{
  background: var(--anon-glass) !important; border:1px solid var(--anon-hair) !important;
  border-radius:16px 16px 16px 4px !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ---- avatars ---- */
.avatar-placeholder, .avatar-placeholder-group{
  background: linear-gradient(135deg, var(--anon-accent), var(--anon-accent-2)) !important;
  color:#06110d !important; font-weight:600;
}

/* ---- loader: obsidian blur ---- */
.screen-loader-overlay{ background: rgba(6,9,11,.72) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---- scrollbars + selection ---- */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--tg-scrollbar); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
::selection{ background: rgba(31,191,143,.28); color:#fff; }

/* ==========================================================================
   MOBILE VIEWPORT + SCROLL FIX (2026-09-30)
   The app sized its full-height containers with 100vh. On mobile 100vh is TALLER
   than the visible screen (it ignores the browser address bar), so the fixed
   bottom nav (Chats/Wallet/…) sat below the fold and content couldn't scroll to
   it. Fix: 100dvh (dynamic = actual visible height) + make each panel's content
   scroll + clear the fixed 54px nav with bottom padding.
   ========================================================================== */
@media (max-width: 768px) {
  html, body, .Anonium-app, .auth-container, .main-container { height: 100dvh !important; }
  .sidebar { height: 100dvh !important; }

  /* each panel's inner content scrolls and clears the fixed bottom nav */
  .wallet-sidebar-wrapper, .channels-sidebar-wrapper,
  .calls-sidebar-wrapper, .activitys-sidebar-wrapper {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .chat-list, .wallet-sidebar-wrapper, .channels-sidebar-wrapper,
  .calls-sidebar-wrapper, .activitys-sidebar-wrapper {
    padding-bottom: 78px !important;   /* clear the fixed ~54px bottom nav + breathing room */
  }
}

/* ---- dismiss "×" on the new-contact (add / block) prompt ---- */
.new-contact-prompt { position: relative; }
.new-contact-close {
  position: absolute; top: 8px; right: 10px; z-index: 3;
  background: none; border: none; color: var(--tg-text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.new-contact-close:hover { color: var(--tg-text-primary); background: rgba(255,255,255,.06); }