/*
  Core stylesheet for the ChatMate web app scaffold.
  Colours and sizing are controlled by CSS variables; these are overridden
  at runtime via the configuration loader in app.js.  Layout is mobile
  first, with a fixed width container on larger screens to simulate an
  app look.  All screens are hidden by default; the `on` class toggles
  their visibility.  Comments in the JS point out which classes should
  not be modified when adding new features.
*/

:root {
  --bg: #0b2220;
  --bg2: #0f2e2b;
  --card: #0e2730aa;
  --accent: #1fd1a1;
  --accent2: #00b37a;
  --text: #e9f3f1;
  --muted: #8fb2ab;
  --danger: #992e2e;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --container-width: 420px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body > section {
  max-width: var(--container-width);
  margin: 0 auto;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.screen { display: none; height: 100%; }
.screen.on { display: block; }

/* Splash hidden in production */
#splash { display: none !important; }
#splash .splash-inner { text-align: center; }
#splash h1 { font-size: 2.2rem; letter-spacing: .03em; margin-bottom: .5rem; }
#splash p { font-size: 1rem; margin-bottom: 1.5rem; color: var(--muted); }
/* spinner */
.spinner { display: inline-block; position: relative; width: 64px; height: 16px; }
.spinner div { position: absolute; top:0; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); animation: spinner .8s infinite ease-in-out both; }
.spinner div:nth-child(1){left:0;animation-delay:-.16s;}
.spinner div:nth-child(2){left:16px;animation-delay:-.08s;}
.spinner div:nth-child(3){left:32px;animation-delay:0s;}
.spinner div:nth-child(4){left:48px;animation-delay:.08s;}
@keyframes spinner{0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}}

/* Panels / forms */
.panel{padding:1.5rem;background:var(--bg2);border-radius:20px;box-shadow:var(--shadow);border:1px solid #113b35;display:none;}
.panel.on{display:block;}
.btn-row{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem;}
.field{display:flex;flex-direction:column;margin-bottom:1rem;}
.field span{font-size:.85rem;margin-bottom:.3rem;color:var(--muted);}
.field input,.field select{padding:.75rem .9rem;border-radius:12px;border:1px solid #174c43;background:#0c2422;color:var(--text);outline:none;}
.check{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.85rem;color:var(--muted);}
.check input{accent-color:var(--accent);}
.btn{display:inline-block;padding:.8rem 1.2rem;border-radius:14px;border:1px solid #194f45;background:var(--bg2);color:var(--text);cursor:pointer;font-weight:600;text-align:center;transition:background-color .2s;}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#01261e;}
.btn.ghost{background:transparent;}
.btn:hover{opacity:.9;}
.msg{margin-top:.5rem;font-size:.8rem;color:#ffd1d1;}

/* Avatar picker */
.avatar-picker{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.avatar{width:68px;height:68px;border-radius:50%;overflow:hidden;position:relative;border:1px solid #1a5349;background:#0a1f1d;display:flex;align-items:center;justify-content:center;}
.avatar img{width:100%;height:100%;object-fit:cover;display:none;}
.avatar .avatar-hint{font-size:.75rem;color:#6fa79e;pointer-events:none;}

/* Top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg2);border-bottom:1px solid #123c34;}
.iconbtn{background:var(--bg2);border:1px solid #194f45;color:var(--text);padding:.4rem .8rem;border-radius:10px;cursor:pointer;}

/* Side menu */
.sidemenu{position:fixed;top:0;right:-320px;width:280px;height:100%;background:#0a1e1c;border-left:1px solid #12433a;box-shadow:var(--shadow);padding:1rem;transition:transform .25s ease;transform:translateX(0);z-index:999;}
.sidemenu.on{transform:translateX(-320px);}
.sidemenu .menu-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;}
.avatar.lg{width:84px;height:84px;border-radius:50%;overflow:hidden;border:1px solid #1a5349;background:#0a1f1d;}
.avatar.lg img{width:100%;height:100%;object-fit:cover;}
.editbtn{background:var(--bg2);border:1px solid #194f45;color:var(--text);padding:.4rem .6rem;border-radius:50%;cursor:pointer;}
.wallet{margin:.8rem 0 1.2rem;}
.wallet .label{font-size:.75rem;color:var(--muted);}
.wallet .value{font-size:1.8rem;font-weight:800;}
.menu{display:flex;flex-direction:column;gap:.6rem;}
.menu-item{display:block;padding:.7rem 1rem;border-radius:14px;background:#0b2421;border:1px solid #183c35;color:var(--text);text-decoration:none;font-size:.9rem;}
.menu-item.danger{background:#381818;border-color:#5a2a2a;}

/* Views */
.view{display:none;padding:1rem;height:calc(100% - 120px);overflow-y:auto;}
.view.on{display:block;}
.creator-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-bottom:4rem;}
.card{background:linear-gradient(180deg,#0b2730,#0a1e1c);border:1px solid #143f37;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative;}
.card .pic{width:100%;padding-top:100%;position:relative;}
.card .pic img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.card .meta{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem;}
.card .badge{font-size:.75rem;color:#9fd9cb;}
.card .smallbtn{background:var(--accent);border:none;color:#04231d;border-radius:14px;padding:.4rem .6rem;font-weight:700;cursor:pointer;}

/* Chat list + thread */
.chat-list{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.5rem;}
.chat-pill{min-width:70px;text-align:center;position:relative;}
.chat-pill .avatar{width:60px;height:60px;margin:0 auto .3rem;border-radius:50%;overflow:hidden;border:1px solid #1a5349;background:#0a1f1d;}
.unread-dot{position:absolute;top:0;right:10px;width:10px;height:10px;border-radius:50%;background:#ff4e4e;border:2px solid #0a1e1c;}

/* Empty text */
.empty{color:var(--muted);text-align:center;margin-top:2rem;}

/* Chat thread layout: no page scroll; input fixed bottom */
#viewChat.view{display:flex;flex-direction:column;overflow:hidden;}
#viewChat .chat-thread{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;}
#viewChat .messages{flex:1;overflow-y:auto;padding:.6rem .6rem 84px;}
#chatCloseBtn{position:absolute;top:8px;right:8px;z-index:3;border-radius:12px;padding:.2rem .6rem}
.chat-input{display:flex;padding:.4rem;border-top:1px solid #123c34;position:absolute;left:0;right:0;bottom:0;background:var(--bg2);}
.chat-input input{flex:1;padding:.5rem;border-radius:12px;border:1px solid #174c43;background:#0c2422;color:var(--text);outline:none;}
.chat-input button{margin-left:.5rem;padding:.5rem .8rem;border-radius:12px;border:1px solid #194f45;background:var(--accent);color:#01261e;cursor:pointer;}

/* Simple bubbles */
.msg-bubble{margin:.25rem 0;padding:.4rem .6rem;border-radius:12px;background:#0b2421;border:1px solid #163f37;max-width:90%;}
.msg-bubble.self{align-self:flex-end;background:#103b34;border-color:#1a6a5a;}

/* Profile */
.profile-card{margin:1rem 0;padding:1rem;border-radius:20px;border:1px solid #144238;}
.profile-head{display:flex;align-items:center;gap:.8rem;}
.profile-head .meta div:first-child{font-weight:600;}
.wallet .value{font-size:2rem;}
.actions{display:flex;gap:.6rem;margin-top:1rem;}
.actions .btn{flex:1;background:#0b2421;border:1px solid #163f37;color:var(--text);}

/* Webview */
.webview{width:100%;height:100%;border:none;}

/* Bottom bar */
.bottombar{position:fixed;left:0;right:0;bottom:0;height:56px;background:#0a1e1c;border-top:1px solid #123c34;display:flex;justify-content:space-around;align-items:center;z-index:998;}
.bt{flex:1;margin:0 .5rem;padding:.6rem .4rem;border-radius:14px;border:1px solid #163f37;background:#0b2421;color:var(--text);text-align:center;font-size:.85rem;cursor:pointer;}
.bt.active{background:var(--accent2);color:#04231d;border-color:var(--accent2);}

/* Responsive */
@media (min-width:720px){.creator-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}}

/* === Chat visibility helpers === */
.hidden { display: none !important; }
#chatThread.hidden { display: none !important; }

/* chat pills کی scrollbar نہ دکھائیں */
#chatList::-webkit-scrollbar { display: none; }

/* Unread badge (سرخ ننھا ڈاٹ) */
.unread-dot{
  position:absolute;
  top:4px; right:10px;
  width:10px; height:10px;
  border-radius:50%;
  background:red;
}












/* ==== CHAT LAYOUT FIX (copy-paste) ==== */

/* Chat view پورا عمودی اسٹیک رہے */
#viewChat {
  display: flex;
  flex-direction: column;
}

/* تھریڈ: اوپر میسجز، نیچے ان پٹ — اونچائی فکس تاکہ میسجز scroll ہوں */
#chatThread {
  display: flex !important;   /* inline style کو اوور رائیڈ کر دے */
  flex-direction: column;
  gap: 8px;
  height: 70vh;               /* ضرورت ہو تو 65–75vh پر ایڈجسٹ کریں */
  margin-top: 8px;
  background: var(--bg2);
  border-radius: 10px;
  padding: 8px;
}

/* میسجز والا حصّہ اسکرول ایبل */
#messageList {
  flex: 1;
  overflow-y: auto;
  padding: 6px 4px;
}

/* ان پٹ بار نیچے فکس رہے */
#chatForm.chat-input {
  display: flex;
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 8px;
}
#chatForm input[name="message"] {
  flex: 1;
  min-width: 0;
}





/* Chat list کو عمودی اور اسکرول ایبل بنائیں */
#chatList{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  max-height:calc(100vh - 220px);
  padding-right:6px;
}

/* ہر یوزر ایک قطار */
.chat-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:12px;
  background:var(--card,#0e2730aa);
  cursor:pointer;
}

/* گول اوتار نظر آئیں */
.chat-pill .avatar{ width:40px;height:40px;flex:0 0 40px;border-radius:50%;overflow:hidden;position:relative; }
.chat-pill .avatar img{ width:100%;height:100%;object-fit:cover;display:block; }

/* نام دائیں طرف */
.chat-pill .name-row{ display:flex;flex-direction:column; }
.chat-pill .uname{ font-weight:600; }

/* unread بیج کی جگہ ٹھیک */
.chat-pill .badge-unread{
  position:absolute;right:-4px;top:-4px;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--danger,#e53935);color:#fff;font-size:11px;line-height:18px;
  justify-content:center;align-items:center;padding:0 5px;display:none;
}


/* سسٹم نوٹ: ہلکے، چھوٹے، کم اسپیس */
.msg-bubble.system-note{
  font-size:12px;
  opacity:.65;
  background:transparent !important;
  border:0 !important;
  padding:2px 6px !important;
  margin:2px 0 !important;
  box-shadow:none !important;
}
.msg-bubble.system-note::before{ content:"— "; opacity:.5; }
#messageList .msg-bubble.system-note{ max-width:80%; }



/* ===== System message — compact & dim (SAFE CSS only) ===== */
/* اضافی hooks تاکہ JS/HTML چھیڑے بغیر مختلف مارک اپ میں بھی سسٹم ببلز مدھم ہو جائیں */
#messageList .msg-bubble.system,
#messageList .msg-bubble.from-system,
#messageList .msg-bubble.sender-0,
#messageList .msg-bubble[data-system="1"],
#messageList .msg-bubble[data-sender-id="0"] {
  font-size: 12px;
  line-height: 1.25;
  opacity: 0.65;
  filter: grayscale(70%);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
  margin: 2px 0 !important;
  max-width: 80%;
}

/* visual hint (چھوٹا ڈیش) */
#messageList .msg-bubble.system::before,
#messageList .msg-bubble.from-system::before,
#messageList .msg-bubble.sender-0::before,
#messageList .msg-bubble[data-system="1"]::before,
#messageList .msg-bubble[data-sender-id="0"]::before {
  content: "— ";
  opacity: .5;
}

/* سسٹم ببل کے اوتار/میٹا/ٹیل چھپا دیں (اگر موجود ہوں) */
#messageList .msg-bubble.system .avatar,
#messageList .msg-bubble.from-system .avatar,
#messageList .msg-bubble.sender-0 .avatar,
#messageList .msg-bubble[data-system="1"] .avatar,
#messageList .msg-bubble[data-sender-id="0"] .avatar,
#messageList .msg-bubble.system .meta,
#messageList .msg-bubble.from-system .meta,
#messageList .msg-bubble.sender-0 .meta,
#messageList .msg-bubble[data-system="1"] .meta,
#messageList .msg-bubble[data-sender-id="0"] .meta,
#messageList .msg-bubble.system .tail,
#messageList .msg-bubble.from-system .tail,
#messageList .msg-bubble.sender-0 .tail,
#messageList .msg-bubble[data-system="1"] .tail,
#messageList .msg-bubble[data-sender-id="0"] .tail {
  display: none !important;
}








/* online pill on photo corner */
#creatorGrid .card .online-pill{
  position:absolute;top:8px;left:8px;
  padding:2px 8px;border-radius:12px;
  background:rgba(0,180,120,.95);color:#fff;font-size:12px;line-height:18px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}





/* --- creator cards: image + badges --- */
#creatorGrid .card .pic{position:relative;border-radius:18px;overflow:hidden;}
#creatorGrid .card .pic img{display:block;width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}

/* online pill (left-top) */
#creatorGrid .card .online-pill{
  position:absolute;left:8px;top:8px;z-index:2;
  padding:2px 8px;border-radius:999px;
  background:rgba(0,180,140,.92);color:#fff;
  font-size:12px;line-height:18px;font-weight:600;
  border:1px solid rgba(255,255,255,.25);
}

/* verified badge (right-top) */
#creatorGrid .card .v-badge{
  position:absolute;right:8px;top:8px;z-index:2;
  padding:2px 8px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;
  font-size:12px;line-height:18px;font-weight:600;
  border:1px solid rgba(255,255,255,.25);
}


/* online badge top-left */
#creatorGrid .card .online-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,180,120,.92);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  border: 1px solid rgba(255,255,255,.25);
}


/* Video Call button fix */
#creatorGrid .card .meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#creatorGrid .card .meta .name{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#creatorGrid .card .meta .smallbtn{display:inline-flex;align-items:center;padding:6px 10px;font-size:12px;border-radius:10px}
#creatorGrid .card .meta .btn-video{display:block;margin-top:6px}  /* Chat کے نیچے آ جائے */
#creatorGrid .card .pic{position:relative}




/* --- Video Call button: 3D + stronger shimmer (blue theme) --- */
#creatorGrid .card .meta .btn-video{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.2px;
  color:#062539;background:linear-gradient(180deg,#6ae2ff,#3bb2f6);
  border:0;border-radius:12px;
  box-shadow:0 6px 0 #1a6ea3,0 10px 18px rgba(0,0,0,.25);
  transform:translateY(0);
  transition:transform .1s ease, box-shadow .1s ease, filter .15s ease;
  cursor:pointer;overflow:hidden;margin-top:6px;
}
#creatorGrid .card .meta .btn-video:hover{ filter:brightness(1.15) saturate(1.05); }
#creatorGrid .card .meta .btn-video:active{
  transform:translateY(2px); box-shadow:0 4px 0 #1a6ea3,0 6px 12px rgba(0,0,0,.2);
}
/* stronger + faster shimmer */
#creatorGrid .card .meta .btn-video::after{
  content:""; position:absolute; top:0; left:-140%;
  width:140%; height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 45%,transparent 75%);
  transform:skewX(-20deg);
  animation:vc-shimmer 1.6s infinite linear; pointer-events:none;
}
@keyframes vc-shimmer { 0%{left:-140%} 60%{left:150%} 100%{left:150%} }

/* Chat اور Video دونوں چھوٹے اور لائن میں رہیں */
#creatorGrid .card .meta{display:flex;flex-direction:column;gap:6px}
#creatorGrid .card .meta .smallbtn{padding:6px 10px;font-size:12px;border-radius:10px}