/* ==========================================================================
   Stoat Web Client - late-2000s / early-2010s "Web 2.0" glossy styling.
   Aqua-ish beach cyan, candy gradient buttons, glass sheen on every bar.
   No frameworks. Themes are applied through body[data-theme="..."].
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEMES
   --bg      page background        --chrome1/2/3  title bar gloss stops
   --panel   window face            --panel2       soft inner face
   --line    hairline               --line2        stronger border
   --text    ink                    --dim          muted ink
   --accent  link / highlight ink   --accent2      pale highlight fill
   --btn1/2  button gloss stops     --btnEdge      button border
   --pri1/2  primary button gloss   --priEdge      primary border
   --sheen   glass highlight colour
   -------------------------------------------------------------------------- */
body[data-theme="msn"] {            /* "Beach Cyan" - the default */
  --bg1:#BDEBFA; --bg2:#8FD8F2; --bg3:#60C4E8;
  --chrome1:#8FE4FF; --chrome2:#2FB4E4; --chrome3:#1385BC;
  --panel:#F6FDFF; --panel2:#DFF4FC; --line:#9BD6EC; --line2:#58B4D8;
  --text:#0D3B4F; --dim:#4C7F95; --accent:#0A7FB0; --accent2:#D2F1FC;
  --btn1:#FFFFFF; --btn2:#CFEFFB; --btnEdge:#5FB8DC;
  --pri1:#7FE0FF; --pri2:#15A0D8; --priEdge:#0D7BA8;
  --ok:#2FA84F; --warn:#E8A317; --bad:#D9453D;
  --me-bubble:#E4FAFF; --peer-bubble:#FFFFFF; --input:#FFFFFF;
  --sheen:rgba(255,255,255,.75);
}
body[data-theme="olive"] {          /* "Lime Soda" */
  --bg1:#DCEFA8; --bg2:#BBDD72; --bg3:#9BC94C;
  --chrome1:#D5F08A; --chrome2:#8FC23F; --chrome3:#618F22;
  --panel:#FBFEF2; --panel2:#EDF7D6; --line:#C3DD93; --line2:#97BF57;
  --text:#2C3D10; --dim:#5F7A33; --accent:#4D7A12; --accent2:#EAF7CE;
  --btn1:#FFFFFF; --btn2:#E2F3BE; --btnEdge:#9CC45E;
  --pri1:#C4ED77; --pri2:#74AB24; --priEdge:#527D16;
  --ok:#2FA84F; --warn:#D59400; --bad:#CC4036;
  --me-bubble:#F2FBDE; --peer-bubble:#FFFFFF; --input:#FFFFFF;
  --sheen:rgba(255,255,255,.8);
}
body[data-theme="silver"] {         /* "Bubblegum" - pink candy */
  --bg1:#FFD9EC; --bg2:#FFB3D9; --bg3:#F58FC2;
  --chrome1:#FFC2E2; --chrome2:#F074B0; --chrome3:#C94686;
  --panel:#FFF8FC; --panel2:#FFE6F3; --line:#F3BBD8; --line2:#E68CBA;
  --text:#4A1430; --dim:#8C5574; --accent:#C43C83; --accent2:#FFE2F1;
  --btn1:#FFFFFF; --btn2:#FFDCEE; --btnEdge:#E892C0;
  --pri1:#FFA3D4; --pri2:#E2559B; --priEdge:#B63B79;
  --ok:#2FA84F; --warn:#D59400; --bad:#CC4036;
  --me-bubble:#FFEFF8; --peer-bubble:#FFFFFF; --input:#FFFFFF;
  --sheen:rgba(255,255,255,.8);
}
body[data-theme="midnight"] {       /* "Deep Sea" */
  --bg1:#13364B; --bg2:#0C2434; --bg3:#071825;
  --chrome1:#2E88B4; --chrome2:#15597C; --chrome3:#0A3A54;
  --panel:#163B52; --panel2:#1D4E6B; --line:#2A6C92; --line2:#2E7BA4;
  --text:#D6F2FF; --dim:#86B9D2; --accent:#5FD2FF; --accent2:#1E5C7E;
  --btn1:#3E8FB8; --btn2:#1C5D80; --btnEdge:#56A9CE;
  --pri1:#56D8FF; --pri2:#1189BE; --priEdge:#0C6B96;
  --ok:#54D17A; --warn:#F0BC4C; --bad:#F2695F;
  --me-bubble:#1E5C7E; --peer-bubble:#1A4961; --input:#0F2E42;
  --sheen:rgba(255,255,255,.35);
}
body[data-theme="c98"] {            /* "Sunset Orange" */
  --bg1:#FFD9A8; --bg2:#FFB45F; --bg3:#F2913A;
  --chrome1:#FFCB7A; --chrome2:#F08A23; --chrome3:#C25F0C;
  --panel:#FFFBF4; --panel2:#FFEBD2; --line:#F3C894; --line2:#E09B4F;
  --text:#4A2608; --dim:#8A5E2C; --accent:#C25F0C; --accent2:#FFEEDA;
  --btn1:#FFFFFF; --btn2:#FFE3C2; --btnEdge:#E8A760;
  --pri1:#FFC176; --pri2:#ED8118; --priEdge:#B9610B;
  --ok:#2FA84F; --warn:#D59400; --bad:#CC4036;
  --me-bubble:#FFF3E3; --peer-bubble:#FFFFFF; --input:#FFFFFF;
  --sheen:rgba(255,255,255,.8);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  font-size:11px; color:var(--text); overflow:hidden;
  background:var(--bg2);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--bg1), transparent 70%),
    linear-gradient(to bottom, var(--bg1), var(--bg2) 45%, var(--bg3));
  background-attachment:fixed;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------------- glossy window chrome ---------------- */
.win {
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:9px;
  box-shadow:
    0 3px 10px rgba(6,46,70,.3),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.win-title {
  position:relative; overflow:hidden;
  background:
    linear-gradient(to bottom,
      var(--chrome1) 0%, var(--chrome2) 48%,
      var(--chrome3) 52%, var(--chrome2) 100%);
  color:#FFF; font-weight:bold; font-size:12px;
  padding:6px 10px; letter-spacing:.2px;
  text-shadow:0 -1px 0 rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  border-bottom:1px solid var(--chrome3);
  box-shadow:inset 0 1px 0 var(--sheen);
  display:flex; align-items:center; gap:6px;
}
/* glass sweep across the top half of every title bar */
.win-title::after {
  content:""; position:absolute; left:0; right:0; top:0; height:50%;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.08));
  pointer-events:none; border-radius:0 0 60% 60% / 0 0 12px 12px;
}
.win-title > * { position:relative; z-index:1; }
.win-title .spacer { flex:1; }
.win-body { background:var(--panel); }

/* ---------------- candy gloss buttons ---------------- */
.btn {
  position:relative; overflow:hidden;
  display:inline-block; font-family:inherit; font-size:11px; cursor:pointer;
  color:var(--text); font-weight:bold;
  background:linear-gradient(to bottom,
    var(--btn1) 0%, var(--btn2) 49%, var(--btn2) 51%, var(--btn1) 100%);
  background-size:100% 200%; background-position:0 0;
  border:1px solid var(--btnEdge); border-radius:12px;
  padding:4px 13px;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 2px rgba(0,0,0,.07),
    0 1px 2px rgba(10,60,85,.22);
  -webkit-user-select:none; user-select:none;
  transition:background-position .15s linear, box-shadow .12s linear;
}
.btn::after {   /* top shine */
  content:""; position:absolute; left:1px; right:1px; top:0; height:45%;
  background:linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.12));
  border-radius:11px 11px 50% 50% / 11px 11px 8px 8px;
  pointer-events:none;
}
.btn:hover { background-position:0 100%; box-shadow:
  inset 0 1px 0 rgba(255,255,255,1), 0 2px 5px rgba(10,60,85,.3); }
.btn:active {
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28); top:1px;
  background-position:0 100%;
}
.btn.primary {
  color:#FFF;
  background:linear-gradient(to bottom,
    var(--pri1) 0%, var(--pri2) 49%, var(--pri2) 51%, var(--pri1) 100%);
  background-size:100% 200%;
  border-color:var(--priEdge);
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
}
.btn.danger {
  color:#FFF;
  background:linear-gradient(to bottom, #FF9A91 0%, #D23A30 49%, #C2302A 51%, #FF8077 100%);
  background-size:100% 200%;
  border-color:#9E241F; text-shadow:0 -1px 0 rgba(0,0,0,.35);
}
.btn.small { padding:2px 9px; font-size:10px; border-radius:10px; }
.btn:disabled { opacity:.5; cursor:default; }

/* ---------------- inputs ---------------- */
input[type="text"], input[type="password"], input[type="search"],
textarea, select {
  font-family:inherit; font-size:11px; color:var(--text);
  background:var(--input);
  border:1px solid var(--line2); border-radius:7px; padding:5px 8px;
  outline:none;
  box-shadow:inset 0 2px 4px rgba(10,60,85,.13);
}
input:focus, textarea:focus, select:focus {
  border-color:var(--chrome2);
  box-shadow:inset 0 2px 4px rgba(10,60,85,.1), 0 0 0 3px var(--accent2);
}
label { font-size:11px; color:var(--dim); display:block; margin:9px 0 3px; font-weight:bold; }

/* ---------------- auth screen ---------------- */
#auth-screen {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
}
#auth-win { width:350px; }
#auth-win .win-body { padding:18px 20px 16px; }
#auth-win h2 { font-size:16px; color:var(--accent); margin-bottom:2px; }
#auth-win .sub { color:var(--dim); margin-bottom:10px; }
#auth-win input { width:100%; }
.auth-btns { display:flex; gap:9px; margin-top:16px; align-items:center; }
.auth-switch { font-size:10px; margin-top:12px; color:var(--dim); text-align:center; }
#auth-error { color:var(--bad); min-height:14px; margin-top:8px; font-size:11px; font-weight:bold; }
.msn-badge {
  width:42px; height:42px; border-radius:50%; color:#FFF; font-weight:bold;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 52%),
    linear-gradient(to bottom, var(--chrome1), var(--chrome3));
  border:1px solid var(--chrome3);
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.18), 0 2px 5px rgba(10,60,85,.35);
}

/* ---------------- main layout ---------------- */
#app { position:fixed; inset:0; display:flex; padding:11px; gap:11px; }
#sidebar { width:252px; min-width:252px; display:flex; flex-direction:column; }
#sidebar .win { display:flex; flex-direction:column; height:100%; }
#me-card {
  display:flex; gap:9px; padding:9px; align-items:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, #FFFFFF, var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.pfp {
  width:40px; height:40px; border:1px solid var(--line2); background:#FFF;
  object-fit:cover; border-radius:7px;
}
/* Initial-letter avatars: emoji art is NEVER used as a profile picture. */
.ava {
  position:relative; overflow:hidden; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:1px solid rgba(0,0,0,.28); border-radius:8px;
  color:#FFF; font-weight:bold; text-shadow:0 -1px 0 rgba(0,0,0,.35);
  background:#6B7C96; -webkit-user-select:none; user-select:none;
  line-height:1; font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -4px 8px rgba(0,0,0,.2), 0 1px 2px rgba(10,60,85,.25);
}
.ava::after {
  content:""; position:absolute; left:0; right:0; top:0; height:48%;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,.05));
  border-radius:7px 7px 50% 50% / 7px 7px 10px 10px; pointer-events:none;
}
.ava .ava-img {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:0;
}
#me-ava { width:42px; height:42px; font-size:18px; border-radius:10px; }
#me-name { font-weight:bold; font-size:12px; }
#me-status { color:var(--dim); font-size:10px; }

/* tabs as glossy pills */
#sidebar-tabs {
  display:flex; gap:3px; padding:5px 5px 0;
  background:linear-gradient(to bottom, var(--panel2), var(--panel));
  border-bottom:1px solid var(--line);
}
#sidebar-tabs .tab {
  flex:1; text-align:center; padding:5px 0; cursor:pointer; font-size:10px;
  font-weight:bold; color:var(--dim);
  background:linear-gradient(to bottom, #FFFFFF, var(--panel2));
  border:1px solid var(--line); border-bottom:none;
  border-radius:8px 8px 0 0;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
#sidebar-tabs .tab:hover { background:linear-gradient(to bottom, #FFF, var(--accent2)); }
#sidebar-tabs .tab.active {
  color:#FFF; border-color:var(--priEdge);
  background:linear-gradient(to bottom, var(--pri1), var(--pri2));
  text-shadow:0 -1px 0 rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
#sidebar-list { flex:1; overflow-y:auto; background:var(--panel); }
#sidebar-foot {
  display:flex; gap:5px; padding:7px; border-top:1px solid var(--line);
  background:linear-gradient(to bottom, var(--panel2), var(--panel));
}
#sidebar-foot .btn { flex:1; padding:4px 4px; }

/* rows */
.row {
  display:flex; align-items:center; gap:8px; padding:6px 9px; cursor:pointer;
  border-bottom:1px solid var(--panel2);
}
.row:hover {
  background:linear-gradient(to bottom, #FFFFFF, var(--accent2));
}
.row.active {
  background:linear-gradient(to bottom, var(--accent2), var(--panel2));
  box-shadow:inset 3px 0 0 var(--chrome2);
}
.row .row-ava { position:relative; width:30px; height:30px; flex:0 0 30px; }
.row .row-ava > img {
  width:30px; height:30px; border:1px solid var(--line2);
  border-radius:8px; object-fit:cover; background:#FFF;
}
.dot {
  position:absolute; right:-3px; bottom:-3px; width:11px; height:11px;
  border-radius:50%; border:2px solid var(--panel);
  background:radial-gradient(circle at 35% 30%, #D8D8D8, #969696);
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.dot.on {
  background:radial-gradient(circle at 35% 30%, #B6FFC0, #23A83F);
  box-shadow:0 0 5px rgba(45,200,80,.85);
}
.row .row-main { flex:1; min-width:0; }
.row .row-name { font-weight:bold; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .row-sub { color:var(--dim); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.unread {
  color:#FFF; border-radius:10px; font-size:9px; font-weight:bold;
  min-width:18px; height:17px; line-height:16px; text-align:center; padding:0 5px;
  background:linear-gradient(to bottom, #FFB44F, #E8780C);
  border:1px solid #BB5C06; text-shadow:0 -1px 0 rgba(0,0,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.25);
}
.row .row-x {
  color:var(--dim); font-weight:bold; padding:1px 6px; border-radius:9px;
  visibility:hidden; border:1px solid transparent;
}
.row:hover .row-x { visibility:visible; }
.row .row-x:hover {
  color:#FFF; border-color:#9E241F;
  background:linear-gradient(to bottom, #FF8F86, #CC332B);
  text-shadow:0 -1px 0 rgba(0,0,0,.3);
}
.row-act { display:flex; gap:4px; }
.section-head {
  padding:4px 9px; font-size:9px; font-weight:bold; color:var(--dim);
  background:linear-gradient(to bottom, var(--panel2), var(--panel));
  border-top:1px solid rgba(255,255,255,.8);
  border-bottom:1px solid var(--line);
  text-transform:uppercase; letter-spacing:.6px;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* ---------------- chat window ---------------- */
#main { flex:1; display:flex; flex-direction:column; min-width:0; }
#main .win { display:flex; flex-direction:column; height:100%; }
#chat-head {
  display:flex; align-items:center; gap:8px; padding:7px 11px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom, #FFFFFF, var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
#chat-head .who { flex:1; min-width:0; }
#chat-title { font-weight:bold; font-size:13px; color:var(--accent); }
#chat-sub { color:var(--dim); font-size:10px; }
#messages {
  flex:1; overflow-y:auto; padding:9px 11px;
  background:
    linear-gradient(to bottom, var(--panel) 0%, var(--panel) 70%, var(--panel2) 100%);
}
#messages.has-bg { background-size:cover; background-position:center; }

.msg { margin:8px 0; max-width:78%; clear:both; }
.msg .meta { font-size:9px; color:var(--dim); margin-bottom:3px; font-weight:bold; }
.msg .body {
  border:1px solid var(--line2); border-radius:11px; padding:6px 10px;
  background:linear-gradient(to bottom, #FFFFFF, var(--peer-bubble));
  word-wrap:break-word; overflow-wrap:anywhere; position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(10,60,85,.16);
}
.msg.mine { margin-left:auto; }
.msg.mine .meta { text-align:right; }
.msg.mine .body {
  background:linear-gradient(to bottom, #FFFFFF, var(--me-bubble));
  border-color:var(--chrome2);
}
.msg .body .txt { white-space:pre-wrap; font-size:11px; }
.msg .body .txt.big {
  font-size:27px; font-weight:bold; line-height:1.25;
  color:var(--accent); text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.msg.system {
  max-width:100%; text-align:center; color:var(--dim); font-size:10px; font-style:italic;
}
.msg .quote {
  border-left:3px solid var(--chrome2);
  background:var(--accent2);
  padding:3px 7px; margin-bottom:5px; font-size:10px; color:var(--dim);
  border-radius:0 6px 6px 0;
}
.msg .quote .q-who { font-weight:bold; color:var(--accent); }
.msg img.inline-emoji { width:24px; height:24px; vertical-align:-7px; }
.msg img.big-emoji { width:52px; height:52px; }
.msg img.gif-msg {
  max-width:240px; border:1px solid var(--line2); border-radius:8px;
  display:block; margin-top:3px; box-shadow:0 1px 4px rgba(10,60,85,.25);
}
.msg .ink-img {
  display:block; background:#FFF; border:1px solid var(--line2);
  border-radius:8px; filter:blur(.4px);
  animation:inkfuzzy 3s ease-in-out infinite alternate;
}
@keyframes inkfuzzy { from { filter:blur(.3px); } to { filter:blur(.9px); } }
.msg .tools {
  display:none; position:absolute; top:-11px; right:6px; gap:2px;
  background:linear-gradient(to bottom, #FFFFFF, var(--panel2));
  border:1px solid var(--line2); border-radius:9px;
  padding:1px 3px; font-size:9px;
  box-shadow:0 1px 3px rgba(10,60,85,.3);
}
.msg .body:hover .tools { display:inline-flex; }
.msg .tools span {
  cursor:pointer; padding:1px 5px; color:var(--dim); border-radius:7px; font-weight:bold;
}
.msg .tools span:hover { color:#FFF; background:linear-gradient(to bottom, var(--pri1), var(--pri2)); }
.reacts { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.reacts .react-chip {
  display:inline-flex; align-items:center; gap:3px; cursor:pointer;
  border:1px solid var(--line2); border-radius:10px; padding:0 6px 0 3px;
  font-size:10px; font-weight:bold; color:var(--dim);
  background:linear-gradient(to bottom, #FFFFFF, var(--panel2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.reacts .react-chip:hover { background:linear-gradient(to bottom, #FFF, var(--accent2)); }
.reacts .react-chip.mine {
  border-color:var(--priEdge); color:#FFF;
  background:linear-gradient(to bottom, var(--pri1), var(--pri2));
  text-shadow:0 -1px 0 rgba(0,0,0,.3);
}
.reacts .react-chip img { width:15px; height:15px; }
.file-card {
  display:flex; align-items:center; gap:9px; margin-top:3px;
  background:linear-gradient(to bottom, #FFFFFF, var(--panel2));
  border:1px solid var(--line2); border-radius:9px; padding:7px 9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.file-card .fi { flex:1; min-width:0; }
.file-card .fn { font-weight:bold; word-break:break-all; }
.file-card .fs { color:var(--dim); font-size:10px; }
.prog {
  height:10px; border:1px solid var(--line2); background:var(--panel2);
  border-radius:6px; overflow:hidden; margin-top:4px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
}
.prog > div {
  height:100%; width:0%;
  background:linear-gradient(to bottom, var(--pri1), var(--pri2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

#typing-line {
  height:17px; padding:1px 11px; font-size:10px; color:var(--accent);
  background:var(--panel2); font-style:italic; font-weight:bold;
}
#composer {
  border-top:1px solid var(--line);
  background:linear-gradient(to bottom, var(--panel2), var(--panel));
}
#toolbar { display:flex; gap:3px; padding:6px 8px 0; align-items:center; }
.tbtn {
  border:1px solid transparent; border-radius:10px; padding:3px 9px; cursor:pointer;
  font-size:10px; font-weight:bold; color:var(--dim); background:transparent;
  font-family:inherit; text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.tbtn:hover {
  border-color:var(--btnEdge); color:var(--text);
  background:linear-gradient(to bottom, #FFFFFF, var(--btn2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.tbtn:active { box-shadow:inset 0 2px 4px rgba(0,0,0,.2); }
#reply-bar {
  display:none; margin:5px 9px 0; padding:4px 9px; font-size:10px;
  background:var(--accent2); border-left:3px solid var(--chrome2); color:var(--dim);
  border-radius:0 7px 7px 0;
}
#reply-bar .q-who { font-weight:bold; color:var(--accent); }
#reply-bar a { float:right; }
#input-row { display:flex; gap:7px; padding:7px 9px 9px; align-items:flex-end; }
#composer textarea { flex:1; resize:none; height:42px; font-size:12px; line-height:1.3; }
#send-btn { height:42px; min-width:78px; font-size:12px; border-radius:14px; }
.hold-hint { position:absolute; inset:auto 0 -14px 0; text-align:center; font-size:8px; color:var(--dim); }

/* ---------------- popups ---------------- */
.pop {
  position:absolute; z-index:60; background:var(--panel);
  border:1px solid var(--line2); border-radius:10px; display:none;
  box-shadow:0 4px 14px rgba(6,46,70,.4), inset 0 1px 0 rgba(255,255,255,.9);
}
#emoji-pop { width:312px; padding:7px; bottom:96px; left:8px; }
#emoji-pop .pop-head {
  font-size:10px; color:var(--dim); padding:2px 2px 6px;
  border-bottom:1px solid var(--line); margin-bottom:5px; font-weight:bold;
}
#emoji-pop .grid { display:flex; flex-wrap:wrap; gap:2px; max-height:220px; overflow-y:auto; }
#emoji-pop .grid img {
  width:28px; height:28px; cursor:pointer; border:1px solid transparent; border-radius:7px;
}
#emoji-pop .grid img:hover {
  border-color:var(--chrome2);
  background:linear-gradient(to bottom, #FFF, var(--accent2));
}
#gif-pop { width:362px; bottom:96px; left:8px; padding:9px; }
#gif-pop .grid { display:flex; flex-wrap:wrap; gap:5px; max-height:240px; overflow-y:auto; margin-top:7px; }
#gif-pop .grid img {
  width:112px; height:84px; object-fit:cover; cursor:pointer;
  border:1px solid var(--line2); border-radius:7px;
}
#gif-pop .grid img:hover { border-color:var(--chrome2); box-shadow:0 0 0 2px var(--accent2); }
#send-hold-menu { bottom:58px; right:9px; padding:5px; }
#send-hold-menu .btn { display:block; width:176px; margin:3px 0; text-align:left; }

/* ---------------- modals ---------------- */
.overlay {
  position:fixed; inset:0; background:rgba(8,46,66,.45); z-index:80;
  display:none; align-items:center; justify-content:center;
}
.overlay .win { min-width:324px; max-width:520px; max-height:86vh; display:flex; flex-direction:column; }
.overlay .win-body { padding:14px 16px; overflow-y:auto; }
.modal-close {
  float:right; cursor:pointer; color:#FFF; font-weight:bold;
  padding:0 6px; border-radius:50%; border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(to bottom, #FF9A91, #CC332B);
  text-shadow:0 -1px 0 rgba(0,0,0,.3); line-height:14px;
}
.modal-close:hover { background:linear-gradient(to bottom, #FFB3AB, #E04036); }
.kv { display:flex; gap:7px; margin:3px 0; }
.kv b { width:88px; color:var(--dim); font-weight:normal; flex:0 0 88px; }
.profile-head { display:flex; gap:11px; margin-bottom:9px; align-items:center; }
.profile-head .pfp, .profile-head .ava { width:64px; height:64px; font-size:28px; border-radius:14px; }
.btn-row { display:flex; gap:7px; flex-wrap:wrap; margin-top:13px; }
.presence-note { font-size:10px; color:var(--dim); }

/* ---------------- call bar + toasts ---------------- */
#call-bar {
  display:none; align-items:center; gap:9px; padding:7px 11px;
  color:#EAFFF0; font-size:11px; font-weight:bold;
  background:linear-gradient(to bottom, #6FD68A 0%, #2FA84F 48%, #22873E 52%, #51C271 100%);
  border-bottom:1px solid #1B6B32;
  text-shadow:0 -1px 0 rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
#call-bar .btn { font-size:10px; }
#toast-wrap { position:fixed; right:13px; bottom:13px; z-index:90; display:flex; flex-direction:column; gap:9px; }
.toast { width:286px; }
.toast .win-body { padding:9px 11px; }
.toast .t-title { font-weight:bold; margin-bottom:2px; }
.toast .btn-row { margin-top:9px; }

/* ---------------- scrollbars + misc ---------------- */
.scroll::-webkit-scrollbar { width:13px; }
.scroll::-webkit-scrollbar-thumb {
  border-radius:7px; border:3px solid var(--panel);
  background:linear-gradient(to right, var(--chrome1), var(--chrome2));
}
.scroll::-webkit-scrollbar-thumb:hover { background:linear-gradient(to right, var(--chrome2), var(--chrome3)); }
.scroll::-webkit-scrollbar-track { background:var(--panel2); border-radius:7px; }

.hint { font-size:10px; color:var(--dim); }
#empty-state {
  flex:1; display:flex; align-items:center; justify-content:center;
  color:var(--dim); flex-direction:column; gap:7px; text-align:center;
}
#empty-state .big {
  font-size:30px; font-weight:bold; letter-spacing:1px;
  color:var(--chrome2);
  text-shadow:0 1px 0 #FFF, 0 2px 3px rgba(10,60,85,.3);
}


.attachment-container {
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-width: 100%;
    background-color: rgba(0, 0, 0, 0.03);
}

.attachment-preview-image,
.attachment-preview-video {
    max-width: 100%;
    max-height: 360px;
    display: block;
    border-radius: 2px;
    margin-bottom: 6px;
}

.attachment-preview-audio {
    width: 100%;
    margin-bottom: 6px;
}

.attachment-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.attachment-actions button {
    padding: 4px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

.attachment-block {
  margin: 6px 0;
  padding: 8px;
  border: 1px solid var(--line2, #ccc);
  background: var(--panel, #fff);
  border-radius: 4px;
  max-width: 100%;
  word-break: break-word;
}
.attachment-block img, 
.attachment-block video {
  max-width: 100%;
  max-height: 240px;
  display: block;
  border-radius: 3px;
  margin-bottom: 6px;
  object-fit: contain;
}
.attachment-block audio {
  width: 100%;
  margin-bottom: 6px;
}