/* ═══════════════════════════════════════
   style.css — Jellyfish by Sarkar Tech Industries
   BUG FIXES applied:
   1. Message timestamps now visible (#ffffff44 → #9CA3AF)
   2. Sender username contrast improved (#7b2ff7 → #a78bfa)
   3. Incoming bubble background more distinct
   4. Input placeholder visible (#00d4ff33 → #6B7280)
   5. Input box bg slightly brighter
   6. Chat list preview text readable
   7. Story names readable
   8. Offline status color fixed (was green, now grey)
   9. Outgoing bubble text pure white
   10. Soft shadow on bubbles for depth
═══════════════════════════════════════ */

:root {
  --c: #00d4ff; --o: #ff6b35; --g: #ffd700; --p: #7b2ff7; --r: #ff2d55;
  --d: #020d1a; --d2: #041525; --d3: #061e35;
  --gc: 0 0 10px #00d4ff88, 0 0 30px #00d4ff33;
  --go: 0 0 10px #ff6b3588, 0 0 30px #ff6b3533;
  --gp: 0 0 10px #7b2ff788, 0 0 30px #7b2ff733;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--d);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,212,255,.006) 2px,
    rgba(0,212,255,.006) 4px
  );
  pointer-events: none;
  z-index: -1;
}

/* ── LOADER ── */
#ld {
  position: fixed; inset: 0; background: var(--d); z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; transition: opacity .5s;
}
#ld.hide { opacity: 0; pointer-events: none; }

.ll {
  font-family: 'Orbitron', monospace; font-size: 28px; font-weight: 900;
  letter-spacing: 8px;
  background: linear-gradient(90deg, var(--c), var(--p), var(--o));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: lg 2s ease-in-out infinite;
}

@keyframes lg {
  0%,100% { filter: drop-shadow(0 0 8px #00d4ff66) }
  50%      { filter: drop-shadow(0 0 20px #7b2ff799) }
}

.lr {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #00d4ff11; border-top-color: var(--c);
  animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg) } }

/* ── AUTH ── */
#auth {
  position: fixed; inset: 0; background: var(--d); z-index: 800;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px 22px;
}
#auth.show { display: flex; }

.al {
  font-family: 'Orbitron', monospace; font-size: 28px; font-weight: 900;
  letter-spacing: 6px;
  background: linear-gradient(90deg, var(--c), var(--p), var(--o));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: lg 3s ease-in-out infinite;
}

.as {
  font-size: 9px; letter-spacing: 5px; color: var(--c); opacity: .35;
  font-family: 'Share Tech Mono', monospace; margin-top: -8px;
}

.aarc {
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  box-shadow: var(--gc); position: relative; animation: ap 2.5s ease-in-out infinite;
}
@keyframes ap {
  0%,100% { box-shadow: var(--gc) }
  50%      { box-shadow: var(--gp) }
}
.aarc::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid #00d4ff22; animation: sp 4s linear infinite;
}

.ae {
  font-size: 11px; color: var(--r); text-align: center;
  min-height: 14px; font-family: 'Share Tech Mono', monospace;
}

/* ── GOOGLE BTN ── */
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; background: #ffffff; border: none; color: #1a1a1a;
  font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 600;
  padding: 14px 20px; cursor: pointer; letter-spacing: 1px;
  border-radius: 4px; box-shadow: 0 2px 12px #00000044; transition: all .2s;
}
.google-btn:active { transform: scale(.97); opacity: .9; }
.google-btn:disabled { opacity: .6; }

/* ── TOPBAR ── */
#tb {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px;
  background: linear-gradient(180deg, #020d1af0, #020d1a88);
  border-bottom: 1px solid #00d4ff1a; z-index: 10; backdrop-filter: blur(12px);
}

#logo {
  font-family: 'Orbitron', monospace; font-size: 17px; font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(90deg, var(--c), var(--p), var(--o));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: lg 3s ease-in-out infinite;
}
#logo span {
  font-size: 7px; display: block; letter-spacing: 5px; opacity: .4;
  font-family: 'Share Tech Mono', monospace;
  -webkit-text-fill-color: #00d4ff55; background: none;
}

.tr { display: flex; gap: 10px; align-items: center; }
#ht { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--c); opacity: .45; }

.tbtn {
  width: 28px; height: 28px; border: 1px solid #00d4ff22; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: #00d4ff06; cursor: pointer; position: relative;
}

.nd {
  position: absolute; top: -2px; right: -2px; width: 10px; height: 10px;
  background: var(--o); border-radius: 50%; box-shadow: var(--go);
  animation: bk 1.5s infinite; display: none; border: 1.5px solid var(--d);
}
@keyframes bk {
  0%,100% { opacity: 1; transform: scale(1) }
  50%      { opacity: .7; transform: scale(1.2) }
}

/* ── STORIES ── */
#storiesRow {
  flex-shrink: 0; display: flex; gap: 10px; padding: 8px 14px;
  overflow-x: auto; border-bottom: 1px solid #00d4ff0a;
}
#storiesRow::-webkit-scrollbar { display: none; }

.sv {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 3px; cursor: pointer;
}
.srng {
  width: 48px; height: 48px; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, var(--c), var(--p), var(--o));
}
.srng.add { background: linear-gradient(135deg, #00d4ff22, #7b2ff722); }
.savatar {
  width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--d);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--d2); overflow: hidden;
}
.savatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* FIX 7: Story names more readable (#00d4ff66 → #00d4ffbb) */
.snm {
  font-size: 8px; color: #00d4ffbb; font-family: 'Share Tech Mono', monospace;
  max-width: 48px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center;
}

/* ── STORY VIEWER ── */
#stView {
  position: fixed; inset: 0; z-index: 2000; background: #000;
  display: none; flex-direction: column;
}
#stView.show { display: flex; }

.sv-pg { height: 3px; background: #ffffff22; overflow: hidden; }
.sv-fill { height: 100%; background: var(--c); width: 0; }

.sv-hd {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  position: absolute; top: 3px; left: 0; right: 0; z-index: 3;
}
.sv-av {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--d2); overflow: hidden;
}
.sv-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sv-nm { font-family: 'Orbitron', monospace; font-size: 10px; color: #fff; }
.sv-tm { font-size: 8px; color: #ffffff66; font-family: 'Share Tech Mono', monospace; }
.sv-cl { margin-left: auto; font-size: 18px; cursor: pointer; color: #ffffff88; }

.sv-img {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.sv-img img { width: 100%; height: 100%; object-fit: cover; }

.sv-bot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 24px;
  background: linear-gradient(180deg, transparent, #000000cc);
}
.sv-like-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
}
.sv-like-icon { font-size: 28px; transition: transform .2s; }
.sv-like-icon.liked { filter: drop-shadow(0 0 6px #ff2d55); }
.sv-like-cnt { font-size: 10px; color: #ffffff88; font-family: 'Share Tech Mono', monospace; }

.sv-viewers-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
}
.sv-eye { font-size: 22px; }
.sv-view-cnt { font-size: 10px; color: #ffffff88; font-family: 'Share Tech Mono', monospace; }

/* ── STORY LIKE ICON ── */
.sv-like-icon svg { transition: all .2s; }
.sv-like-icon.liked svg {
  stroke: #ff2d55; fill: #ff2d5544;
  filter: drop-shadow(0 0 6px #ff2d55);
}

/* ── STORY VIEWERS SHEET ── */
#stViewersSheet { position: fixed; inset: 0; z-index: 2100; display: none; }
#stViewersSheet.show { display: block; }
#stViewersBg { position: absolute; inset: 0; background: #000000aa; }
#stViewersBox {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #041525, #020d1a);
  border-top: 1px solid #00d4ff22; border-radius: 16px 16px 0 0;
  max-height: 60vh; display: flex; flex-direction: column;
}
.stv-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid #00d4ff11;
}
.stv-t { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); letter-spacing: 2px; }
.stv-c { font-size: 16px; cursor: pointer; color: #00d4ff44; }
#stViewersList {
  flex: 1; overflow-y: auto; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
#stViewersList::-webkit-scrollbar { display: none; }
.stv-item { display: flex; align-items: center; gap: 10px; }
.stv-av {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--d2); overflow: hidden; flex-shrink: 0;
}
.stv-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.stv-nm { font-family: 'Orbitron', monospace; font-size: 10px; color: var(--c); }
.stv-tm { font-size: 8px; color: #00d4ff44; font-family: 'Share Tech Mono', monospace; }

/* ── STORY UPLOAD ── */
#stUpSc {
  position: fixed; inset: 0; background: var(--d); z-index: 1500;
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 24px;
}
#stUpSc.show { display: flex; }
.su-p {
  width: 160px; height: 280px; border: 2px dashed #00d4ff22;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; position: relative; overflow: hidden;
  background: #00d4ff04; border-radius: 8px;
}
.su-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.su-btn {
  width: 100%;
  background: linear-gradient(135deg, #00d4ff15, #7b2ff715);
  border: 1px solid var(--c); color: var(--c);
  font-family: 'Orbitron', monospace; font-size: 11px;
  padding: 13px; letter-spacing: 3px; cursor: pointer;
}
.su-can {
  background: transparent; border: 1px solid #ffffff0a; color: #ffffff22;
  font-family: 'Orbitron', monospace; font-size: 9px;
  padding: 10px; cursor: pointer; letter-spacing: 2px; width: 100%;
}

/* ── FEED ── */
#feedView { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; }
#feedView::-webkit-scrollbar { display: none; }
#feedWrap { min-height: 100%; }

.post {
  scroll-snap-align: start; position: relative;
  height: calc(100dvh - 220px); overflow: hidden;
  border-bottom: 1px solid #00d4ff0a;
}
.pph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pbg {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 90px;
  background: linear-gradient(135deg, #041528, #0a1a3a);
}
.pgr {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #020d1a11 0%, transparent 25%, transparent 55%, #020d1aee 100%);
  z-index: 1;
}

.hc { position: absolute; width: 16px; height: 16px; z-index: 3; opacity: .5; pointer-events: none; }
.hc.tl { top: 8px; left: 8px; border-top: 1.5px solid var(--c); border-left: 1.5px solid var(--c); }
.hc.tr { top: 8px; right: 8px; border-top: 1.5px solid var(--c); border-right: 1.5px solid var(--c); }
.hc.bl { bottom: 8px; left: 8px; border-bottom: 1.5px solid var(--c); border-left: 1.5px solid var(--c); }
.hc.br { bottom: 8px; right: 8px; border-bottom: 1.5px solid var(--c); border-right: 1.5px solid var(--c); }

.scan {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  z-index: 4; animation: scn 5s linear infinite; opacity: .2;
}
@keyframes scn { from { top: 0 } to { top: 100% } }

.pta {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  font-family: 'Share Tech Mono', monospace; font-size: 8px; color: var(--c); opacity: .45;
}
.pbot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5; padding: 10px 12px 12px;
}
.pur { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.pav {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--c);
  box-shadow: 0 0 8px #00d4ff44; display: flex; align-items: center;
  justify-content: center; font-size: 13px; background: var(--d2);
  flex-shrink: 0; overflow: hidden; cursor: pointer;
}
.pav img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pun { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); letter-spacing: 1px; cursor: pointer; }
.pcp { font-size: 12px; opacity: .7; margin-top: 1px; line-height: 1.4; max-width: 220px; }

.mpill {
  display: flex; align-items: center; gap: 7px;
  background: #020d1a99; border: 1px solid #00d4ff1a;
  padding: 5px 10px; margin-top: 6px; width: fit-content; max-width: 240px;
}
.mspin { font-size: 10px; animation: sp 3s linear infinite; flex-shrink: 0; }
.mnm {
  font-size: 10px; color: var(--c); opacity: .75; font-family: 'Share Tech Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.mvz { display: flex; gap: 2px; align-items: center; }
.mv { width: 2px; background: var(--c); border-radius: 1px; animation: vz .6s ease-in-out infinite alternate; }
.mv:nth-child(1) { height: 4px }
.mv:nth-child(2) { height: 8px; animation-delay: .1s }
.mv:nth-child(3) { height: 6px; animation-delay: .2s }
.mv:nth-child(4) { height: 10px; animation-delay: .3s }
.mv:nth-child(5) { height: 5px; animation-delay: .4s }
@keyframes vz { from { transform: scaleY(.3) } to { transform: scaleY(1.3) } }

.pa {
  position: absolute; right: 10px; bottom: 50px; z-index: 5;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.pac { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.pai {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ffffff1a;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: #020d1a66; backdrop-filter: blur(6px); transition: all .2s; color: #ffffff88;
}
.pai.liked { border-color: var(--o); box-shadow: var(--go); background: #ff6b3511; color: #ff2d55; filter: drop-shadow(0 0 6px #ff2d55); }
.pai:active { transform: scale(.88); }
.pac-n { font-size: 9px; opacity: .6; font-family: 'Share Tech Mono', monospace; }
.dm-btn { font-size: 12px; color: var(--p); font-family: 'Share Tech Mono', monospace; cursor: pointer; margin-top: 2px; letter-spacing: .5px; }

.ef {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: calc(100dvh - 220px); gap: 14px; padding: 40px; text-align: center;
}
.ef-i { font-size: 60px; animation: lg 3s ease-in-out infinite; }
.ef p { font-size: 13px; color: #00d4ff44; font-family: 'Share Tech Mono', monospace; line-height: 1.9; }

.load-more {
  text-align: center; padding: 16px; font-family: 'Share Tech Mono', monospace;
  font-size: 10px; color: var(--c); opacity: .5; letter-spacing: 2px; cursor: pointer;
  border-top: 1px solid #00d4ff0a;
}
.lr-sm {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #00d4ff11; border-top-color: var(--c);
  animation: sp .8s linear infinite; display: inline-block;
}

/* ── CHAT LIST ── */
#chatList {
  position: fixed; inset: 0; background: var(--d); z-index: 400;
  display: none; flex-direction: column;
}
#chatList.show { display: flex; }

.clh {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #00d4ff1a; flex-shrink: 0;
}
.clt { font-family: 'Orbitron', monospace; font-size: 12px; color: var(--c); letter-spacing: 3px; }
.clc { font-size: 16px; cursor: pointer; color: #00d4ff44; }

.chat-srch {
  display: flex; align-items: center; gap: 8px; background: #00d4ff06;
  border: 1px solid #00d4ff1a; padding: 8px 12px; margin: 8px 10px 0;
}
.chat-srch input { flex: 1; background: transparent; border: none; color: #b8eaff; font-family: 'Rajdhani', sans-serif; font-size: 14px; outline: none; }

/* FIX: Search placeholder more visible */
.chat-srch input::placeholder { color: #6B7280; font-size: 12px; }

.new-chat-btn {
  margin: 8px 10px 4px;
  background: linear-gradient(135deg, #00d4ff11, #7b2ff711);
  border: 1px solid #00d4ff33; color: var(--c);
  font-family: 'Orbitron', monospace; font-size: 10px;
  padding: 10px; cursor: pointer; letter-spacing: 2px; width: calc(100% - 20px);
}

#chatItems { flex: 1; overflow-y: auto; }
#chatItems::-webkit-scrollbar { display: none; }

.chi {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid #00d4ff08; cursor: pointer;
  background: transparent; transition: background .15s;
}
.chi:active { background: #00d4ff06; }
.chi-av {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--d2); flex-shrink: 0; overflow: hidden; position: relative;
}
.chi-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chi-online {
  position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px;
  background: #00ff88; border-radius: 50%; border: 2px solid var(--d);
}
.chi-body { flex: 1; min-width: 0; }
.chi-top { display: flex; align-items: center; justify-content: space-between; }
.chi-name { font-family: 'Orbitron', monospace; font-size: 11px; color: #e0e8ff; }
.chi-time { font-size: 9px; color: #00d4ff44; font-family: 'Share Tech Mono', monospace; flex-shrink: 0; }
.chi-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }

/* FIX 6: Chat list preview text more readable (#ffffff44 → #9ca3af) */
.chi-last { font-size: 12px; color: #9ca3af; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-last.unread-txt { color: #d1e8ff; }

.chi-badge {
  min-width: 18px; height: 18px; background: var(--c); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 9px;
  font-family: 'Share Tech Mono', monospace; color: #020d1a; font-weight: bold;
  padding: 0 4px; flex-shrink: 0;
}

/* ── NEW CHAT MODAL ── */
#newChatMod { position: fixed; inset: 0; z-index: 600; display: none; }
#newChatMod.show { display: block; }
#newChatBg { position: absolute; inset: 0; background: #000000aa; backdrop-filter: blur(4px); }
#newChatBox {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #041525, #020d1a);
  border-top: 1px solid #00d4ff22; max-height: 70vh;
  display: flex; flex-direction: column; border-radius: 16px 16px 0 0;
}
.nch {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid #00d4ff11;
}
.nct { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); letter-spacing: 2px; }
.ncc { font-size: 16px; cursor: pointer; color: #00d4ff44; }
.nc-s {
  display: flex; align-items: center; gap: 8px; background: #00d4ff06;
  border: 1px solid #00d4ff1a; padding: 10px 14px; margin: 10px 14px;
}
.nc-s input { flex: 1; background: transparent; border: none; color: #b8eaff; font-family: 'Rajdhani', sans-serif; font-size: 14px; outline: none; }
.nc-s input::placeholder { color: #6B7280; font-size: 12px; }
#ncRes { flex: 1; overflow-y: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
#ncRes::-webkit-scrollbar { display: none; }
.nc-u {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid #00d4ff0a; cursor: pointer; background: #00d4ff04;
}
.nc-av {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--d2); flex-shrink: 0; overflow: hidden;
}
.nc-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nc-nm { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); }

/* ── CHAT WINDOW ── */
#chatWin {
  position: fixed; inset: 0; background: var(--d); z-index: 500;
  display: none; flex-direction: column;
}
#chatWin.show { display: flex; }
#chatWin::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, #00d4ff04 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, #7b2ff704 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

.cwh {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid #00d4ff1a; flex-shrink: 0;
  background: linear-gradient(180deg, #020d1aff, #020d1acc);
  backdrop-filter: blur(12px); position: relative; z-index: 2;
}
.cwback { font-size: 22px; cursor: pointer; color: var(--c); }
.cwav-wrap { position: relative; }
.cwav {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: var(--d2); overflow: hidden; flex-shrink: 0;
}
.cwav img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cw-online-dot {
  position: absolute; bottom: 0; right: 0; width: 11px; height: 11px;
  background: #00ff88; border-radius: 50%; border: 2px solid var(--d);
}
.cwnm { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); }

/* FIX 8: Offline status uses grey, online uses green (JS sets class) */
.cwst { font-size: 9px; font-family: 'Share Tech Mono', monospace; }
.cwst.online  { color: #00ff88bb; }
.cwst.offline { color: #6B7280; }
/* Fallback if JS doesn't set class — default grey */
.cwst:not(.online):not(.offline) { color: #6B7280; }

.cw-actions { margin-left: auto; display: flex; gap: 8px; }
.cw-act-btn {
  width: 30px; height: 30px; border: 1px solid #00d4ff22; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  cursor: pointer; background: #00d4ff06;
}

#msgList {
  flex: 1; overflow-y: auto; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1;
}
#msgList::-webkit-scrollbar { display: none; }

.date-sep { text-align: center; margin: 6px 0; }
.date-sep span {
  background: #00d4ff11; border: 1px solid #00d4ff1a; color: #00d4ffcc;
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  padding: 3px 10px; border-radius: 10px; letter-spacing: 1px;
}

.msg { display: flex; max-width: 78%; margin-bottom: 2px; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.them { align-self: flex-start; }
.msg-inner { display: flex; flex-direction: column; }
.msg.me .msg-inner { align-items: flex-end; }
.msg.them .msg-inner { align-items: flex-start; }

/* FIX 3 & 9: Bubbles — distinct backgrounds, pure white text, soft shadow */
.mbub {
  padding: 8px 12px 6px; font-size: 14px; line-height: 1.5;
  word-break: break-word; position: relative; max-width: 100%;
}
.msg.me .mbub {
  background: linear-gradient(135deg, #006d8f, #004d6e);
  border: 1px solid #00d4ff44;
  border-radius: 18px 4px 18px 18px;
  color: #ffffff;                          /* FIX 9: pure white */
  box-shadow: 0 2px 8px #00000055;         /* FIX 10: soft shadow */
}
.msg.them .mbub {
  background: #0f2235;                     /* FIX 3: was near-transparent, now distinct */
  border: 1px solid #ffffff28;
  border-radius: 4px 18px 18px 18px;
  color: #e8eeff;
  box-shadow: 0 2px 8px #00000055;         /* FIX 10: soft shadow */
}
.mbub img { max-width: 200px; border-radius: 12px; display: block; margin-bottom: 4px; }

/* FIX 1: Timestamps visible (#ffffff44 → #9CA3AF) */
.mfoot { display: flex; align-items: center; gap: 4px; margin-top: 1px; padding: 0 4px; }
.mtime { font-size: 9px; color: #9CA3AF; font-family: 'Share Tech Mono', monospace; }
.mtick { font-size: 11px; color: #00d4ffaa; }
.mtick.seen { color: var(--c); }

/* FIX 2: Sender username readable (dark #7b2ff7 → soft #a78bfa) */
.msg.them .msender {
  font-family: 'Orbitron', monospace; font-size: 8px;
  color: #a78bfa;                          /* FIX 2: was var(--p)=#7b2ff7, now lighter */
  margin-bottom: 2px; padding-left: 4px;
}

.msg-ctx {
  display: none; background: #041525; border: 1px solid #00d4ff22;
  border-radius: 8px; padding: 6px 10px; font-size: 10px; color: var(--r);
  font-family: 'Share Tech Mono', monospace; cursor: pointer; margin-top: 4px;
}
.msg-ctx.show { display: block; }

/* FIX 4 & 5: Message input box & placeholder */
.cwir {
  display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #00d4ff1a;
  flex-shrink: 0; align-items: flex-end; background: #020d1aee;
  position: relative; z-index: 2;
}
.mibtn {
  width: 38px; height: 38px; border: 1px solid #00d4ff22; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  cursor: pointer; background: #00d4ff06; flex-shrink: 0;
}
#msgInp {
  flex: 1;
  background: #0d1f33;                     /* FIX 5: was #00d4ff08 (nearly invisible) */
  border: 1px solid #00d4ff33;
  border-radius: 20px;
  color: #ffffff;
  font-family: 'Rajdhani', sans-serif; font-size: 14px;
  padding: 10px 16px; outline: none; resize: none; max-height: 100px; min-height: 38px;
  overflow-y: auto;
}
#msgInp::placeholder { color: #6B7280; font-size: 13px; }  /* FIX 4: was #00d4ff33 */
#msgInp:focus { border-color: #00d4ff66; }
.msend {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--c), var(--p));
  border: none; border-radius: 50%; color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; box-shadow: var(--gc);
}

/* ── UPLOAD ── */
#upScreen {
  position: fixed; inset: 0; background: var(--d); z-index: 400;
  display: none; flex-direction: column; overflow-y: auto;
}
#upScreen.show { display: flex; }

.uph {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #00d4ff1a; flex-shrink: 0;
}
.upt { font-family: 'Orbitron', monospace; font-size: 13px; color: var(--c); letter-spacing: 3px; }
.upc { font-size: 18px; cursor: pointer; color: #00d4ff44; }
.upb { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.pzone {
  width: 100%; aspect-ratio: 1; max-height: 260px; border: 2px dashed #00d4ff22;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; position: relative; overflow: hidden; background: #00d4ff04;
}
.pzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pzi { font-size: 40px; z-index: 1; }
.pzt { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--c); opacity: .5; z-index: 1; letter-spacing: 1px; }

.ulab { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--c); opacity: .45; letter-spacing: 1px; margin-bottom: -8px; }
.uinp {
  width: 100%; background: #00d4ff05; border: 1px solid #00d4ff1a;
  border-bottom-color: var(--c); color: #b8eaff;
  font-family: 'Rajdhani', sans-serif; font-size: 14px;
  padding: 10px 12px; outline: none; resize: none;
}
.uinp::placeholder { color: #6B7280; font-size: 12px; }

.mops { display: flex; flex-direction: column; gap: 4px; }
.mop {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid #00d4ff0a; cursor: pointer; font-size: 12px;
  color: #b8eaffaa; transition: all .2s;
}
.mop.sel { border-color: var(--c); background: #00d4ff0a; color: #b8eaff; }

.pw { width: 100%; height: 2px; background: #00d4ff0a; overflow: hidden; }
.pr { height: 100%; background: linear-gradient(to right, var(--c), var(--p)); width: 0; transition: width .3s; }

.pbtn {
  width: 100%; background: linear-gradient(135deg, #00d4ff15, #7b2ff715);
  border: 1px solid var(--c); color: var(--c); font-family: 'Orbitron', monospace;
  font-size: 11px; padding: 13px; letter-spacing: 3px; cursor: pointer; box-shadow: var(--gc);
}
.cbtn {
  background: transparent; border: 1px solid #ffffff0a; color: #ffffff22;
  font-family: 'Orbitron', monospace; font-size: 9px; padding: 10px;
  cursor: pointer; letter-spacing: 2px; width: 100%;
}

/* ── PROFILE ── */
#profScreen {
  position: fixed; inset: 0; background: var(--d); z-index: 400;
  display: none; flex-direction: column; overflow-y: auto;
}
#profScreen.show { display: flex; }

.pcov { height: 80px; background: linear-gradient(135deg, #00d4ff11, #7b2ff711, #ff6b3511); flex-shrink: 0; }
.phd {
  padding: 0 16px 16px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; border-bottom: 1px solid #00d4ff0a; position: relative; margin-top: -36px;
}
.pcb {
  position: absolute; top: 46px; right: 10px; width: 28px; height: 28px;
  border: 1px solid #ffffff11; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; background: #ffffff06; z-index: 2;
}
.psb {
  position: absolute; top: 46px; left: 10px; width: 28px; height: 28px;
  border: 1px solid #00d4ff22; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; background: #00d4ff06; z-index: 2;
}
.pab {
  width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--c);
  box-shadow: var(--gc); display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: var(--d2); position: relative; z-index: 1;
  overflow: hidden; cursor: pointer;
}
.pab img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pab-ed {
  position: absolute; bottom: 0; left: 0; right: 0; background: #020d1a99;
  text-align: center; font-size: 7px; padding: 3px;
  font-family: 'Share Tech Mono', monospace; color: var(--c);
}
.pnm { font-family: 'Orbitron', monospace; font-size: 13px; letter-spacing: 2px; color: var(--c); }
.pem { font-size: 10px; opacity: .35; font-family: 'Share Tech Mono', monospace; }
.pst { display: flex; gap: 24px; }
.ps { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.psn { font-family: 'Orbitron', monospace; font-size: 14px; color: var(--c); }
.psl { font-size: 8px; opacity: .4; letter-spacing: 1px; font-family: 'Share Tech Mono', monospace; }

.pfb {
  border: 1px solid var(--c); color: var(--c); font-family: 'Orbitron', monospace;
  font-size: 9px; padding: 6px 20px; cursor: pointer; letter-spacing: 2px;
  background: #00d4ff0a; transition: all .2s;
}
.pfb.fing { border-color: #00d4ff44; color: #00d4ff44; background: transparent; }
.pdmb {
  border: 1px solid var(--p); color: var(--p); font-family: 'Orbitron', monospace;
  font-size: 9px; padding: 6px 16px; cursor: pointer; letter-spacing: 2px; background: #7b2ff70a;
}

#setPanel {
  display: none; width: 100%; border: 1px solid #00d4ff1a;
  background: #00d4ff04; padding: 12px; flex-direction: column; gap: 8px;
}
#setPanel.show { display: flex; }
.spi { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #00d4ff0a; cursor: pointer; }
.spil { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--c); letter-spacing: 1px; }
.lob {
  background: transparent; border: 1px solid #ff2d5522; color: var(--r);
  font-family: 'Orbitron', monospace; font-size: 9px; padding: 7px;
  cursor: pointer; letter-spacing: 2px; width: 100%; margin-top: 4px;
}

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.gi {
  aspect-ratio: 1; background: var(--d2); display: flex; align-items: center;
  justify-content: center; font-size: 28px; overflow: hidden;
  border: 1px solid #00d4ff06; position: relative; cursor: pointer;
}
.gi img { width: 100%; height: 100%; object-fit: cover; }
.gi .db {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  background: #ff2d5588; border-radius: 50%; display: none;
  align-items: center; justify-content: center; font-size: 10px; cursor: pointer;
}
.gi:active .db { display: flex; }

/* ── COMMENTS ── */
#cmtSheet { position: fixed; inset: 0; z-index: 600; display: none; }
#cmtSheet.show { display: block; }
#cmtBg { position: absolute; inset: 0; background: #000000aa; backdrop-filter: blur(4px); }
#cmtBox {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #041525, #020d1a);
  border-top: 1px solid #00d4ff22; max-height: 75vh;
  display: flex; flex-direction: column; border-radius: 16px 16px 0 0;
}
.cmth {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid #00d4ff11;
}
.cmtt { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); letter-spacing: 2px; }
.cmtc { font-size: 16px; cursor: pointer; color: #00d4ff44; }
#cmtList { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
#cmtList::-webkit-scrollbar { display: none; }

.ci { display: flex; gap: 8px; }
.cav {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: var(--d2); flex-shrink: 0; overflow: hidden;
}
.cav img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cn { font-family: 'Orbitron', monospace; font-size: 9px; color: var(--c); }
.ctx { font-size: 13px; color: #b8eaff; line-height: 1.5; margin-top: 2px; }
.ctm { font-size: 8px; color: #00d4ff33; font-family: 'Share Tech Mono', monospace; margin-top: 2px; }
.cacts { display: flex; gap: 10px; margin-top: 4px; align-items: center; }
.clk { font-size: 11px; cursor: pointer; color: #00d4ff44; }
.clk.liked { color: var(--o); }
.crb { font-size: 10px; color: #00d4ff44; cursor: pointer; font-family: 'Share Tech Mono', monospace; }
.cmt-del-btn { font-size: 10px; color: var(--r); cursor: pointer; font-family: 'Share Tech Mono', monospace; margin-left: auto; }

.rbox { margin-top: 6px; margin-left: 36px; display: none; }
.rbox.show { display: flex; gap: 6px; }
.rinp {
  flex: 1; background: #00d4ff06; border: 1px solid #00d4ff1a;
  color: #b8eaff; font-family: 'Rajdhani', sans-serif; font-size: 13px; padding: 6px 10px; outline: none;
}
.rsend {
  background: transparent; border: 1px solid var(--c); color: var(--c);
  font-family: 'Orbitron', monospace; font-size: 8px; padding: 6px 10px; cursor: pointer;
}
.reps { margin-left: 36px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.ri { display: flex; gap: 6px; }
.rav {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #7b2ff755;
  display: flex; align-items: center; justify-content: center; font-size: 9px; background: var(--d2); flex-shrink: 0;
}
.rn { font-family: 'Orbitron', monospace; font-size: 8px; color: #7b2ff7; }
.rtx { font-size: 12px; color: #b8eaffaa; line-height: 1.4; margin-top: 1px; }

.cir {
  display: flex; gap: 8px; padding: 10px 14px;
  border-top: 1px solid #00d4ff11; align-items: center;
}
#cmtInp {
  flex: 1; background: #0d1f33; border: 1px solid #00d4ff22;
  color: #ffffff; font-family: 'Rajdhani', sans-serif; font-size: 14px;
  padding: 9px 12px; outline: none;
}
#cmtInp::placeholder { color: #6B7280; font-size: 12px; }
#cmtSend {
  background: linear-gradient(135deg, var(--c), var(--p)); border: none;
  color: #fff; font-family: 'Orbitron', monospace; font-size: 9px;
  padding: 9px 14px; cursor: pointer;
}

/* ── SEARCH ── */
#srchScreen {
  position: fixed; inset: 0; background: var(--d); z-index: 400;
  display: none; flex-direction: column; padding: 16px; gap: 14px;
}
#srchScreen.show { display: flex; }
.sbar {
  display: flex; align-items: center; gap: 8px; background: #00d4ff06;
  border: 1px solid #00d4ff1a; padding: 10px 14px;
}
.sbar input { flex: 1; background: transparent; border: none; color: #b8eaff; font-family: 'Rajdhani', sans-serif; font-size: 15px; outline: none; }
.sbar input::placeholder { color: #6B7280; font-size: 12px; }
.sres { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.sres::-webkit-scrollbar { display: none; }
.ur {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid #00d4ff0a; cursor: pointer; background: #00d4ff04;
}
.ur .ua {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--d2); flex-shrink: 0; overflow: hidden;
}
.ur .ua img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ur .un { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); }
.ur .ue { font-size: 10px; color: #00d4ff44; font-family: 'Share Tech Mono', monospace; }

/* ── NOTIFICATIONS ── */
#notifSheet { position: fixed; inset: 0; z-index: 700; display: none; }
#notifSheet.show { display: block; }
#notifBg { position: absolute; inset: 0; background: #000000aa; backdrop-filter: blur(4px); }
#notifBox {
  position: absolute; top: 0; right: 0; bottom: 0; width: 85%; max-width: 320px;
  background: linear-gradient(180deg, #041525, #020d1a);
  border-left: 1px solid #00d4ff22; display: flex; flex-direction: column;
}
.nh {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #00d4ff11;
}
.nt { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); letter-spacing: 2px; }
.nc2 { font-size: 16px; cursor: pointer; color: #00d4ff44; }
#notifList { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
#notifList::-webkit-scrollbar { display: none; }
.nit {
  display: flex; gap: 10px; padding: 10px; border: 1px solid #00d4ff0a;
  background: #00d4ff04; align-items: flex-start;
}
.nav2 {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--d2); flex-shrink: 0; overflow: hidden;
}
.nav2 img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ntx { font-size: 12px; color: #b8eaffaa; line-height: 1.6; flex: 1; }
.ntx b { color: var(--c); font-family: 'Orbitron', monospace; font-size: 9px; }
.ntm { font-size: 8px; color: #00d4ff33; font-family: 'Share Tech Mono', monospace; flex-shrink: 0; }

/* ── PROFILE PHOTO MODAL ── */
#ppMod {
  position: fixed; inset: 0; z-index: 900; display: none;
  align-items: center; justify-content: center;
  background: #000000cc; backdrop-filter: blur(6px);
}
#ppMod.show { display: flex; }
.ppm {
  background: var(--d2); border: 1px solid #00d4ff22; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; align-items: center; width: 280px;
}
.ppm-t { font-family: 'Orbitron', monospace; font-size: 11px; color: var(--c); letter-spacing: 2px; }
.ppm-prev {
  width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--c);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  overflow: hidden; background: var(--d3);
}
.ppm-prev img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ppm-btn {
  width: 100%; background: linear-gradient(135deg, #00d4ff15, #7b2ff715);
  border: 1px solid var(--c); color: var(--c); font-family: 'Orbitron', monospace;
  font-size: 10px; padding: 10px; cursor: pointer;
}
.ppm-can {
  background: transparent; border: 1px solid #ffffff0a; color: #ffffff33;
  font-family: 'Orbitron', monospace; font-size: 9px; padding: 8px; cursor: pointer; width: 100%;
}

/* ── NAV ── */
#nav {
  flex-shrink: 0; display: flex;
  background: linear-gradient(0deg, #020d1aff, #020d1acc);
  border-top: 1px solid #00d4ff1a; position: relative; z-index: 10;
  backdrop-filter: blur(12px);
}
#nav::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  box-shadow: var(--gc);
}
.ni {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 8px 4px; gap: 2px; cursor: pointer; position: relative;
}
.ni-i { font-size: 20px; opacity: .35; transition: all .2s; }
.ni-l { font-size: 7px; opacity: .3; letter-spacing: 1px; font-family: 'Share Tech Mono', monospace; }
.ni.on .ni-i { opacity: 1; filter: drop-shadow(0 0 6px var(--c)); }
.ni.on .ni-l { opacity: .65; color: var(--c); }
.ni.on::after {
  content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  box-shadow: var(--gc);
}
.ni.upni .ni-i {
  width: 40px; height: 40px; background: linear-gradient(135deg, var(--c), var(--p));
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: var(--gc); opacity: 1; transform: translateY(-5px);
}
.ni .nbadge {
  position: absolute; top: 4px; right: 6px; min-width: 16px; height: 16px;
  background: var(--o); border-radius: 8px; display: none; box-shadow: var(--go);
  font-size: 8px; font-family: 'Share Tech Mono', monospace; color: #020d1a;
  align-items: center; justify-content: center; padding: 0 3px;
}

/* ── APP LAYOUT ── */
#app {
  height: 100%;
  max-height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#chatWin { padding-bottom: env(safe-area-inset-bottom, 0px); }
.cwir { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
#nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--d2), var(--d3));
  border: 1px solid var(--c); padding: 7px 16px;
  font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--c);
  letter-spacing: 1px; box-shadow: var(--gc); z-index: 5000;
  opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }