/* Asad Anjum Support Chat v3 - #07100c and its shades, white SVG lite icons, Inter
   Dark blueish colours replaced: main #07100C, header #0E1E15, panel #12271C,
   received #162E22, border #1E3329. Gold #C9A24B, sent dark gold #5C4514,
   text #E9EDEF, secondary #8FA398, read ticks blue #34B7F1 kept. */
:root{
  --bg:#07100C; --header:#0E1E15; --panel:#12271C; --border:#1E3329;
  --sent:#5C4514; --received:#162E22;
  --text:#E9EDEF; --muted:#8FA398; --gold:#C9A24B; --read:#34B7F1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--gold)}
button{cursor:pointer;border:0;border-radius:10px;padding:12px 16px;font-size:15px;font-weight:600;background:var(--gold);color:#111;width:100%}
button.secondary{background:var(--panel);color:var(--text)}
input,textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font-size:15px;background:var(--panel);color:var(--text);font-family:inherit}
input::placeholder{color:var(--muted)}
label{display:block;font-size:13px;color:var(--muted);margin:13px 0 6px}
.card{max-width:440px;margin:0 auto;background:var(--header);min-height:100dvh;padding:28px 22px}
.logo{font-size:26px;font-weight:800;color:var(--text);line-height:1.1;text-transform:uppercase;letter-spacing:.5px}
.logo span{color:var(--gold)}
.sub{color:var(--muted);margin:6px 0 18px}
.muted{color:var(--muted);font-size:13px;text-align:center;margin-top:14px}
.err{background:#3a1515;color:#ffb4b4;padding:10px 12px;border-radius:8px;font-size:14px;display:none;margin-bottom:10px}
.err.show{display:block}
.linkbtn{background:none;color:var(--gold);width:auto;padding:0;font-size:14px}
/* White SVG lite icons: all rail / header / composer icons are white line SVGs, never coloured emoji */
.icon{width:22px;height:22px;flex:none;display:block}
.icon svg{width:100%;height:100%;display:block}
.icon svg *{stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon.gold svg *{stroke:var(--gold)}
.icon.dark svg *{stroke:#111}
.icon.small{width:18px;height:18px}
/* ---- Full-width app shell: 50px rail + 300px list + rest chat ---- */
.app{display:flex;width:100vw;height:100dvh;overflow:hidden;background:var(--bg)}
.rail{width:50px;flex:none;background:var(--header);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:8px;z-index:3}
.rail button{width:38px !important;height:38px !important;border-radius:50% !important;padding:0 !important;background:transparent !important;color:#fff;font-size:19px;flex:none;display:grid;place-items:center}
.rail button:hover,.rail button.active{background:var(--panel);color:#fff}
.rail button.active .icon svg *{stroke:var(--gold)}
.rail .spacer{flex:1}
.dp{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex:none;background:var(--panel)}
.dp.big{width:44px;height:44px}
.listpanel{width:300px;flex:none;background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.listhead{background:var(--header);padding:14px;border-bottom:1px solid var(--border)}
.listhead b{font-size:16px}
.listhead p{color:var(--muted);font-size:13px;margin:4px 0 0}
.listsearch{padding:10px;border-bottom:1px solid var(--border)}
.listsearch input{border-radius:20px;background:var(--header)}
.convlist{flex:1;overflow-y:auto}
.conv{padding:13px 14px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;gap:11px;align-items:center}
.conv.active{background:var(--panel)}
.conv .unread{background:#e11d48;color:#fff;border-radius:12px;padding:2px 8px;font-size:12px;flex:none}
.conv small{color:var(--muted)}
.panelbody{flex:1;overflow-y:auto;padding:16px}
.panelbody h3{margin:0 0 10px;font-size:16px}
.panelbody p,.panelbody li{color:var(--muted);font-size:14px;line-height:1.5}
.chatpanel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{background:var(--header);color:var(--text);padding:11px 14px;display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--border);flex:none}
.topbar b{font-size:16px}
.topbar .subline{font-size:13px;color:var(--muted)}
.backbtn{display:none;width:36px !important;height:36px !important;border-radius:50% !important;padding:0 !important;background:var(--panel) !important;color:#fff;font-size:18px;flex:none}
.dot{width:10px;height:10px;border-radius:50%;background:#4ade80;display:inline-block}
.msgsWrap{flex:1;position:relative;overflow:hidden;background:var(--bg)}
.doodles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.doodle{position:absolute;line-height:1;pointer-events:none}
.msgs{position:relative;z-index:1;height:100%;overflow-y:auto;padding:18px 14px}
.msglist{display:flex;flex-direction:column;gap:8px}
.msg{max-width:78%;padding:9px 12px;border-radius:14px;font-size:15px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.3);word-wrap:break-word}
.msg.me{align-self:flex-end;background:var(--sent);color:var(--text);border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:var(--received);color:var(--text);border-bottom-left-radius:4px}
.msg small{display:block;font-size:11px;color:var(--muted);text-align:right;margin-top:4px}
.msg small .tick{color:var(--muted)}
.msg small .tick.read{color:var(--read)}
.msg img{max-width:100%;border-radius:8px}
.composer{display:flex;gap:8px;padding:10px;background:var(--header);align-items:center;border-top:1px solid var(--border);flex:none}
.composer input{border-radius:24px;background:var(--panel)}
.composer button{width:48px !important;height:48px !important;border-radius:50% !important;padding:0 !important;background:var(--gold);color:#111;flex:none;font-size:20px;display:grid;place-items:center}
.attach{background:none;color:#fff;width:auto;padding:6px;display:grid;place-items:center}
.pushbanner{display:none;align-items:center;gap:10px;background:var(--panel);border-bottom:1px solid var(--border);padding:10px 14px;font-size:14px;flex:none}
.pushbanner.show{display:flex}
.pushbanner button{width:auto !important;padding:8px 14px;font-size:13px}
.canned{display:flex;gap:6px;flex-wrap:wrap;padding:8px;background:var(--bg);border-top:1px solid var(--border)}
.canned button{width:auto;padding:7px 10px;font-size:13px;background:var(--panel);color:var(--text)}
@media(max-width:760px){
  .app{flex-direction:column}
  .rail{width:100%;height:50px;flex-direction:row;border-right:0;border-bottom:1px solid var(--border);padding:0 8px;overflow-x:auto}
  .rail .spacer{display:none}
  .listpanel{width:100%;flex:1}
  .chatpanel{width:100%;flex:1;display:none}
  body.mobile-chat .listpanel{display:none}
  body.mobile-chat .chatpanel{display:flex}
  .backbtn{display:grid}
  .msg{max-width:88%}
}