/* ═══════════════════════════════════════════════
   SELL WEED ONLINE — styles.css
   happystoner5420 Games 2025
═══════════════════════════════════════════════ */

:root {
  --bg:        #0a0a0b;
  --panel:     #131315;
  --card:      #18181c;
  --border:    #2a2a30;
  --green:     #39ff14;
  --green-dim: #1d8a0a;
  --gold:      #f5a623;
  --red:       #ff3b30;
  --blue:      #4a9eff;
  --txt:       #e4e4e8;
  --txt2:      #80808a;
  --txt3:      #44444e;
  --r:         8px;
  --r2:        14px;
  --r3:        22px;
}

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

html { height:100%; }

body {
  background:#0a0a0b;
  font-family:'Segoe UI',system-ui,sans-serif;
  color:var(--txt);
  height:100vh;
  overflow:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* custom scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--panel); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--green-dim); }

/* buttons reset */
button { cursor:pointer; border:none; font-family:inherit; font-size:14px; }

input, textarea {
  font-family:inherit;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--txt);
  border-radius:var(--r);
  outline:none;
  transition:border-color .15s;
}
input:focus, textarea:focus { border-color:var(--green); }

/* ═══════════════════════════════════════════
   SCREEN SYSTEM
═══════════════════════════════════════════ */
#game-root { width:100vw; height:100vh; position:relative; overflow:hidden; }

.screen {
  position:absolute;
  inset:0;
  display:none;
  background:var(--bg);
}
.screen.active { display:flex; }

/* ═══════════════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════════════ */
.btn-pri {
  background:var(--green);
  color:#000;
  font-weight:700;
  font-size:14px;
  letter-spacing:.5px;
  padding:10px 24px;
  border-radius:var(--r);
  border:none;
  transition:all .15s;
}
.btn-pri:hover { background:#4fff28; transform:translateY(-1px); box-shadow:0 4px 16px rgba(57,255,20,.35); }
.btn-pri:active { transform:translateY(0); }

.btn-sec {
  background:transparent;
  color:var(--txt2);
  font-weight:600;
  font-size:14px;
  padding:10px 24px;
  border-radius:var(--r);
  border:1px solid var(--border);
  transition:all .15s;
}
.btn-sec:hover { border-color:var(--txt2); color:var(--txt); }

.btn-danger {
  background:#2a0a0a;
  color:var(--red);
  font-weight:600;
  font-size:13px;
  padding:8px 16px;
  border-radius:var(--r);
  border:1px solid #5a1a1a;
  transition:all .15s;
}
.btn-danger:hover { background:#3a1010; border-color:var(--red); }

.btn-sm {
  padding:6px 14px;
  font-size:12px;
}

/* ═══════════════════════════════════════════
   MAIN MENU
═══════════════════════════════════════════ */
#screen-mainmenu {
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#mm-bg {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, #0d1f0a 0%, #0a0a0b 70%);
  overflow:hidden;
}
#mm-bg::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%2339ff14' fill-opacity='0.03'%3E%3Cpath d='M60 10C46 16 36 30 38 44 44 36 52 32 60 34 68 32 76 36 82 44 84 30 74 16 60 10z'/%3E%3Cpath d='M60 34C48 26 34 28 32 42 40 38 50 38 60 42 70 38 80 38 88 42 86 28 72 26 60 34z'/%3E%3Cpath d='M60 42C54 38 48 42 46 50 52 46 56 46 60 50 64 46 68 46 74 50 72 42 66 38 60 42z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* animated floating leaves */
.mm-leaf {
  position:absolute;
  opacity:0.08;
  animation:leafFloat 7s ease-in-out infinite;
}

@keyframes leafFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-22px) rotate(8deg); }
}

#mm-content {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

#mm-logo {
  margin-bottom:16px;
  filter:drop-shadow(0 0 18px rgba(57,255,20,.5));
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { filter:drop-shadow(0 0 18px rgba(57,255,20,.4)); }
  50% { filter:drop-shadow(0 0 32px rgba(57,255,20,.8)); }
}

#mm-title {
  font-size:clamp(36px,6vw,72px);
  font-weight:900;
  letter-spacing:6px;
  color:var(--green);
  text-shadow:0 0 20px rgba(57,255,20,.6), 0 0 60px rgba(57,255,20,.3);
  line-height:1;
  text-align:center;
  font-family:'Impact','Arial Black',sans-serif;
  animation:titleGlow 3s ease-in-out infinite;
}
@keyframes titleGlow {
  0%,100% { text-shadow:0 0 20px rgba(57,255,20,.6),0 0 60px rgba(57,255,20,.3); }
  50% { text-shadow:0 0 30px rgba(57,255,20,.9),0 0 80px rgba(57,255,20,.5),0 0 120px rgba(57,255,20,.2); }
}

#mm-sub {
  color:var(--txt2);
  font-size:14px;
  letter-spacing:1px;
  margin-top:8px;
  margin-bottom:40px;
  text-align:center;
}

#mm-nav {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:320px;
}

.mm-btn {
  background:linear-gradient(135deg, #0e1c0e, #0a120a);
  color:var(--green);
  border:1px solid var(--green-dim);
  border-radius:var(--r);
  padding:14px 32px;
  font-size:15px;
  font-weight:700;
  letter-spacing:2px;
  text-align:center;
  transition:all .2s;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
.mm-btn:hover {
  background:linear-gradient(135deg, #152215, #0d180d);
  border-color:var(--green);
  box-shadow:0 0 20px rgba(57,255,20,.25), 0 4px 20px rgba(0,0,0,.5);
  transform:translateY(-2px);
  color:#fff;
}
.mm-btn:active { transform:translateY(0); }

.mm-btn-exit {
  color:var(--red);
  border-color:#5a1818;
  background:linear-gradient(135deg,#1a0808,#110505);
  margin-top:8px;
}
.mm-btn-exit:hover {
  border-color:var(--red);
  box-shadow:0 0 20px rgba(255,59,48,.2);
  color:#ff6b6b;
}

#mm-ver {
  margin-top:24px;
  font-size:11px;
  color:var(--txt3);
  letter-spacing:1px;
}

/* ═══════════════════════════════════════════
   FORM SCREENS (new game)
═══════════════════════════════════════════ */
#screen-newgame {
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse 70% 50% at 50% 40%, #0d1f0a, #0a0a0b);
}

.form-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:40px 44px;
  width:460px;
  max-width:96vw;
  box-shadow:0 16px 60px rgba(0,0,0,.7);
}
.form-title {
  font-size:24px;
  font-weight:800;
  letter-spacing:3px;
  color:var(--green);
  margin-bottom:6px;
}
.form-sub {
  color:var(--txt2);
  font-size:13px;
  margin-bottom:28px;
}

.field-label {
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--txt2);
  margin-bottom:6px;
  margin-top:20px;
  text-transform:uppercase;
}
.field-label:first-of-type { margin-top:0; }

.field-input {
  width:100%;
  padding:11px 14px;
  font-size:15px;
  border-radius:var(--r);
}

.field-hint {
  font-size:12px;
  color:var(--txt3);
  margin-top:5px;
  margin-bottom:8px;
}

#diff-row {
  display:flex;
  gap:8px;
  margin-top:6px;
}
.diff-btn {
  flex:1;
  padding:10px 6px;
  border-radius:var(--r);
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--txt2);
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  line-height:1.4;
  transition:all .15s;
  text-align:center;
}
.diff-btn small { font-weight:400; font-size:11px; color:var(--txt3); }
.diff-btn:hover { border-color:var(--green-dim); color:var(--txt); }
.diff-btn.diff-active {
  border-color:var(--green);
  color:var(--green);
  background:#0a1a08;
  box-shadow:0 0 10px rgba(57,255,20,.15);
}

.form-actions {
  display:flex;
  gap:10px;
  margin-top:28px;
}
.form-actions .btn-pri { flex:1; }
.form-actions .btn-sec { flex:0 0 auto; }

/* ═══════════════════════════════════════════
   INFO SCREENS (how to play, credits)
═══════════════════════════════════════════ */
#screen-howtoplay,
#screen-credits {
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  padding:32px 16px;
}

.info-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:40px 44px;
  width:820px;
  max-width:96vw;
  box-shadow:0 16px 60px rgba(0,0,0,.6);
}
.info-title {
  font-size:22px;
  font-weight:800;
  letter-spacing:3px;
  color:var(--green);
  margin-bottom:6px;
}
.info-sub {
  color:var(--txt2);
  font-size:13px;
  margin-bottom:28px;
}

.htp-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:28px;
}
.htp-step {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 18px;
}
.htp-step h3 { font-size:13px; font-weight:700; color:var(--green); margin-bottom:4px; }
.htp-step p { font-size:12px; color:var(--txt2); line-height:1.5; }
.htp-num {
  font-size:11px;
  font-weight:800;
  color:var(--green-dim);
  letter-spacing:1px;
  display:block;
  margin-bottom:4px;
}

/* credits */
.credits-card { text-align:center; width:560px; }
.credits-dev { color:var(--txt2); font-size:14px; margin-bottom:28px; }
.credits-block { margin:16px 0; padding:16px; background:var(--panel); border-radius:var(--r); border:1px solid var(--border); }
.credits-block p { font-size:13px; color:var(--txt2); margin:4px 0; }
.credits-big { font-size:18px; font-weight:800; color:var(--green); }
.credits-role { font-size:12px; color:var(--txt3); }
.credits-legal { font-style:italic; color:var(--txt3); font-size:12px; }
.credits-ver { font-size:11px; color:var(--txt3); margin:16px 0 20px; }
#credits-leaf { height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }

/* ═══════════════════════════════════════════
   HUB LAYOUT
═══════════════════════════════════════════ */
#screen-hub {
  flex-direction:column;
  height:100vh;
}

/* TOP BAR */
#hub-topbar {
  display:flex;
  align-items:center;
  height:52px;
  min-height:52px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:0 16px;
  gap:16px;
  z-index:10;
  flex-shrink:0;
}

#topbar-logo {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--green);
  font-weight:700;
  font-size:13px;
  letter-spacing:1px;
  flex-shrink:0;
}

#topbar-hud {
  display:flex;
  align-items:center;
  gap:6px;
  flex:1;
  flex-wrap:wrap;
}

.hud-chip {
  display:flex;
  align-items:center;
  gap:5px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:4px 10px;
  font-size:13px;
  font-weight:600;
  color:var(--txt);
  white-space:nowrap;
}
#chip-cash { border-color:#3a2e10; }
#chip-cash span { color:var(--gold); }
#chip-heat span { color:var(--green); }

#topbar-btns {
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.topbar-btn {
  background:var(--card);
  color:var(--green);
  border:1px solid var(--green-dim);
  border-radius:var(--r);
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  transition:all .15s;
}
.topbar-btn:hover { background:#0e1e0e; border-color:var(--green); box-shadow:0 0 10px rgba(57,255,20,.2); }
.topbar-btn-menu { color:var(--txt2); border-color:var(--border); }
.topbar-btn-menu:hover { color:var(--txt); border-color:var(--txt2); background:var(--panel); box-shadow:none; }

/* BODY = SIDEBAR + CONTENT */
#hub-body {
  display:flex;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* SIDEBAR */
#hub-sidebar {
  width:76px;
  min-width:76px;
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0;
  gap:4px;
  overflow:hidden;
}

.nav-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:60px;
  height:60px;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r);
  color:var(--txt3);
  font-size:10px;
  font-weight:600;
  letter-spacing:.3px;
  transition:all .15s;
}
.nav-btn span { line-height:1; }
.nav-btn:hover { background:var(--card); border-color:var(--border); color:var(--txt2); }
.nav-btn.active {
  background:#0a180a;
  border-color:var(--green-dim);
  color:var(--green);
  box-shadow:0 0 12px rgba(57,255,20,.1);
}

/* MAIN CONTENT */
#hub-content {
  flex:1;
  overflow-y:auto;
  padding:20px;
  background:var(--bg);
}

/* STATUS BAR */
#hub-statusbar {
  height:34px;
  min-height:34px;
  background:var(--panel);
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 16px;
  font-size:12px;
  color:var(--txt2);
  flex-shrink:0;
}
#hub-statusbar strong { color:var(--txt); }
#stat-clock { color:var(--txt3); margin-left:8px; }

/* ═══════════════════════════════════════════
   HUB TAB CONTENT
═══════════════════════════════════════════ */

/* tab header */
.tab-hdr {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.tab-hdr h2 {
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--txt);
}
.tab-hdr p { font-size:13px; color:var(--txt2); margin-top:2px; }

/* cards */
.game-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:20px;
  margin-bottom:14px;
}
.game-card:hover { border-color:var(--border-bright,#3a3a40); }

/* STORE TAB */
.store-banner {
  background:linear-gradient(135deg, #0a1e0a, #0d280d);
  border:1px solid var(--green-dim);
  border-radius:var(--r2);
  padding:20px 24px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.store-banner h2 { font-size:18px; font-weight:800; color:var(--green); letter-spacing:1px; }
.store-banner p { font-size:12px; color:var(--txt2); margin-top:2px; }
.store-status { display:flex; align-items:center; gap:8px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
.status-dot.closed { background:var(--red); box-shadow:0 0 8px var(--red); animation:none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
  margin-bottom:20px;
}

.product-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  overflow:hidden;
  transition:border-color .15s,transform .15s;
}
.product-card:hover { border-color:var(--green-dim); transform:translateY(-2px); }

.product-img {
  height:160px;
  background:#0a140a;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:10px;
}
.product-img svg { width:140px; height:140px; }

.product-info { padding:14px; }
.product-name { font-size:14px; font-weight:700; color:var(--green); margin-bottom:2px; }
.product-type { font-size:11px; color:var(--txt3); letter-spacing:.5px; text-transform:uppercase; }
.product-desc { font-size:12px; color:var(--txt2); margin:6px 0 10px; line-height:1.4; }
.product-stock { font-size:12px; color:var(--txt2); margin-bottom:8px; }
.product-stock strong { color:var(--gold); }

.price-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.price-row input {
  width:80px;
  padding:6px 8px;
  font-size:14px;
  font-weight:700;
  color:var(--gold);
  border-color:#3a2a10;
  text-align:center;
}
.price-row .btn-pri { padding:6px 12px; font-size:12px; flex:1; }

.empty-store {
  text-align:center;
  padding:60px 20px;
  color:var(--txt2);
}
.empty-store h3 { font-size:18px; color:var(--txt); margin-bottom:8px; }
.empty-store p { font-size:14px; margin-bottom:20px; }

/* PHONE TAB */
.phone-shell {
  display:flex;
  gap:0;
  height:calc(100vh - 52px - 34px - 40px);
  min-height:500px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  overflow:hidden;
}

.contact-list {
  width:260px;
  min-width:260px;
  border-right:1px solid var(--border);
  overflow-y:auto;
  background:var(--panel);
}
.contact-list-hdr {
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--txt2);
  text-transform:uppercase;
}
.contact-group-label {
  padding:8px 16px 4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--txt3);
  text-transform:uppercase;
}
.contact-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.contact-row:hover { background:var(--card); }
.contact-row.active { background:#0a1a0a; border-left:2px solid var(--green); }

.contact-avatar {
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:2px solid var(--border);
}
.contact-avatar-placeholder {
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
  color:var(--txt2);
  font-weight:700;
}

.contact-info { flex:1; min-width:0; }
.contact-name { font-size:13px; font-weight:600; color:var(--txt); }
.contact-preview {
  font-size:11px;
  color:var(--txt3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}
.contact-badge {
  background:var(--green);
  color:#000;
  font-size:10px;
  font-weight:700;
  padding:2px 6px;
  border-radius:10px;
  flex-shrink:0;
}

.chat-area {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.chat-hdr {
  height:52px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  background:var(--panel);
  flex-shrink:0;
}
.chat-hdr-name { font-size:15px; font-weight:700; color:var(--txt); }
.chat-hdr-sub { font-size:11px; color:var(--txt3); }
.chat-hdr-online { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; flex-shrink:0; }

.chat-messages {
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--bg);
}

.chat-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  color:var(--txt3);
  font-size:14px;
  gap:8px;
}

.msg-row { display:flex; flex-direction:column; }
.msg-row.from-player { align-items:flex-end; }
.msg-row.from-npc { align-items:flex-start; }

.msg-bubble {
  max-width:70%;
  padding:9px 13px;
  border-radius:16px;
  font-size:13px;
  line-height:1.45;
  word-break:break-word;
}
.msg-row.from-player .msg-bubble {
  background:var(--green);
  color:#000;
  border-bottom-right-radius:4px;
}
.msg-row.from-npc .msg-bubble {
  background:var(--card);
  color:var(--txt);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.msg-time { font-size:10px; color:var(--txt3); margin-top:2px; padding:0 4px; }

.typing-indicator {
  display:flex;
  gap:4px;
  align-items:center;
  padding:10px 14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  border-bottom-left-radius:4px;
  width:fit-content;
}
.typing-dot {
  width:6px; height:6px; border-radius:50%; background:var(--txt3);
  animation:typingBounce .9s infinite;
}
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.3s; }
@keyframes typingBounce { 0%,80%,100%{transform:scale(1);opacity:.5} 40%{transform:scale(1.3);opacity:1} }

.quick-replies {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 16px;
  border-top:1px solid var(--border);
  background:var(--panel);
}
.quick-reply-btn {
  background:var(--card);
  border:1px solid var(--border);
  color:var(--txt2);
  font-size:12px;
  padding:5px 12px;
  border-radius:20px;
  cursor:pointer;
  transition:all .12s;
}
.quick-reply-btn:hover { border-color:var(--green-dim); color:var(--txt); }

.chat-input-row {
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--panel);
  flex-shrink:0;
}
.chat-input {
  flex:1;
  padding:9px 14px;
  border-radius:20px;
  font-size:14px;
  resize:none;
  line-height:1.3;
  height:38px;
  overflow:hidden;
}
.chat-send-btn {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--green);
  color:#000;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .15s;
  font-weight:700;
}
.chat-send-btn:hover { background:#4fff28; transform:scale(1.05); }

.no-chat-selected {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--txt3);
  font-size:14px;
  gap:10px;
}

/* INVENTORY TAB */
.inv-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.inv-table th {
  text-align:left;
  padding:10px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--txt3);
  border-bottom:1px solid var(--border);
}
.inv-table td {
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  color:var(--txt);
  vertical-align:middle;
}
.inv-table tr:last-child td { border-bottom:none; }
.inv-table tr:hover td { background:rgba(255,255,255,.02); }

.strain-thumb { width:44px; height:44px; border-radius:var(--r); overflow:hidden; background:#0a140a; display:flex; align-items:center; justify-content:center; }
.strain-thumb svg { width:36px; height:36px; }

.inv-empty {
  text-align:center;
  padding:48px 20px;
  color:var(--txt2);
}
.inv-empty h3 { font-size:16px; color:var(--txt); margin-bottom:8px; }

/* shipments */
.shipment-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.shipment-card .ship-strain { font-size:14px; font-weight:600; color:var(--txt); }
.shipment-card .ship-meta { font-size:12px; color:var(--txt2); margin-top:2px; }
.ship-days { font-size:13px; font-weight:700; color:var(--gold); }

/* ADS TAB */
.ad-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.ad-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  overflow:hidden;
  transition:border-color .15s;
}
.ad-card:hover { border-color:var(--green-dim); }

.ad-preview {
  height:130px;
  background:linear-gradient(135deg,#0a1a0a,#0d2a0d);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  padding:12px;
}
.ad-preview-inner {
  text-align:center;
  color:var(--green);
}
.ad-preview-inner h4 { font-size:14px; font-weight:800; letter-spacing:1px; }
.ad-preview-inner p { font-size:11px; color:var(--txt2); margin-top:4px; }

.ad-info { padding:14px; }
.ad-name { font-size:14px; font-weight:700; color:var(--txt); margin-bottom:2px; }
.ad-desc { font-size:12px; color:var(--txt2); margin-bottom:10px; line-height:1.4; }
.ad-stats {
  display:flex;
  gap:12px;
  margin-bottom:10px;
  font-size:11px;
  color:var(--txt3);
}
.ad-stats span strong { color:var(--gold); font-size:13px; }
.ad-locked { opacity:.4; pointer-events:none; }
.ad-locked-msg { font-size:11px; color:var(--red); margin-bottom:8px; }

/* active campaigns */
.active-ad {
  background:var(--card);
  border:1px solid var(--green-dim);
  border-radius:var(--r);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.active-ad .ad-name2 { font-size:13px; font-weight:600; color:var(--txt); }
.active-ad .ad-days { font-size:12px; color:var(--txt2); }
.ad-progress-bar { height:4px; background:var(--border); border-radius:2px; margin-top:6px; overflow:hidden; }
.ad-progress-fill { height:100%; background:var(--green); border-radius:2px; transition:width .5s; }

/* FINANCES TAB */
.finance-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-bottom:24px;
}
.fin-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:18px 20px;
}
.fin-card .fin-label { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--txt3); text-transform:uppercase; margin-bottom:6px; }
.fin-card .fin-val { font-size:24px; font-weight:800; color:var(--txt); }
.fin-card .fin-val.green { color:var(--green); }
.fin-card .fin-val.gold { color:var(--gold); }
.fin-card .fin-val.red { color:var(--red); }

.fin-log { max-height:300px; overflow-y:auto; }
.fin-log-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.fin-log-row:last-child { border-bottom:none; }
.fin-log-day { color:var(--txt2); }
.fin-log-profit { font-weight:600; }
.fin-log-profit.pos { color:var(--green); }
.fin-log-profit.neg { color:var(--red); }

/* ═══════════════════════════════════════════
   NOTIFICATIONS
═══════════════════════════════════════════ */
#notifs {
  position:fixed;
  bottom:50px;
  right:16px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:340px;
  pointer-events:none;
}

.notif {
  background:var(--card);
  border-radius:var(--r);
  padding:12px 16px;
  font-size:13px;
  color:var(--txt);
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  border-left:3px solid var(--green);
  opacity:0;
  transform:translateX(20px);
  transition:all .25s;
  pointer-events:none;
}
.notif.show { opacity:1; transform:translateX(0); }
.notif.notif-success { border-left-color:var(--green); }
.notif.notif-info { border-left-color:var(--blue); }
.notif.notif-warning { border-left-color:var(--gold); }
.notif.notif-danger { border-left-color:var(--red); }

/* ═══════════════════════════════════════════
   MODAL
═══════════════════════════════════════════ */
#modal-wrap {
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
}

#modal-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
}

#modal-box {
  position:relative;
  z-index:1;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:28px 32px;
  width:480px;
  max-width:94vw;
  box-shadow:0 20px 60px rgba(0,0,0,.8);
  max-height:80vh;
  overflow-y:auto;
}

#modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

#modal-title {
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--green);
}

#modal-x {
  background:none;
  color:var(--txt2);
  font-size:22px;
  line-height:1;
  padding:0 4px;
  border-radius:4px;
  transition:color .12s;
}
#modal-x:hover { color:var(--txt); }

#modal-body { font-size:14px; color:var(--txt); line-height:1.6; }

#modal-foot {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

/* ═══════════════════════════════════════════
   UNBOXING
═══════════════════════════════════════════ */
#unbox-wrap {
  position:fixed;
  inset:0;
  z-index:6000;
  display:flex;
  align-items:center;
  justify-content:center;
}

#unbox-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:32px;
}

#unbox-info {
  position:relative;
  z-index:1;
  text-align:center;
  color:var(--txt);
}
#unbox-title {
  font-size:28px;
  font-weight:900;
  letter-spacing:3px;
  color:var(--green);
  text-shadow:0 0 20px rgba(57,255,20,.5);
  margin-bottom:8px;
}
#unbox-desc { font-size:14px; color:var(--txt2); margin-bottom:16px; }
#unbox-items {
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.unbox-item {
  background:var(--card);
  border:1px solid var(--green-dim);
  border-radius:var(--r2);
  padding:16px 20px;
  text-align:center;
  box-shadow:0 0 20px rgba(57,255,20,.15);
}
.unbox-item svg { width:80px; height:80px; }
.unbox-item span { display:block; font-size:13px; color:var(--txt); margin-top:8px; font-weight:600; }

#unbox-box-scene {
  perspective:600px;
  width:120px;
  height:120px;
}
#unbox-box {
  width:120px;
  height:100px;
  position:relative;
  transform-style:preserve-3d;
  animation:boxShake .5s ease-in-out;
}
@keyframes boxShake {
  0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)}
}
#unbox-lid {
  position:absolute;
  top:-30px;
  left:0;
  right:0;
  height:30px;
  background:linear-gradient(135deg,#b87030,#8a5020);
  border-radius:4px 4px 0 0;
  animation:lidOpen 1s .3s forwards;
  transform-origin:top center;
}
@keyframes lidOpen {
  0%{transform:rotateX(0)} 100%{transform:rotateX(-120deg)}
}
#unbox-body {
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#c07838,#8a5020);
  border-radius:0 0 4px 4px;
}

/* ═══════════════════════════════════════════
   SAVE LIST in MODAL
═══════════════════════════════════════════ */
.save-entry {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.save-entry:last-child { border-bottom:none; }
.save-name { font-size:14px; font-weight:600; color:var(--txt); }
.save-meta { font-size:12px; color:var(--txt3); margin-top:2px; }
.save-btns { display:flex; gap:8px; }

/* ═══════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════ */
.text-green { color:var(--green); }
.text-gold  { color:var(--gold); }
.text-red   { color:var(--red); }
.text-muted { color:var(--txt2); }

.badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
}
.badge-green { background:rgba(57,255,20,.12); color:var(--green); border:1px solid rgba(57,255,20,.3); }
.badge-red   { background:rgba(255,59,48,.12); color:var(--red); border:1px solid rgba(255,59,48,.3); }
.badge-gold  { background:rgba(245,166,35,.12); color:var(--gold); border:1px solid rgba(245,166,35,.3); }
.badge-blue  { background:rgba(74,158,255,.12); color:var(--blue); border:1px solid rgba(74,158,255,.3); }

.section-title {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--txt3);
  margin-bottom:12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}

/* CRT scanline overlay */
body::after {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px);
}

/* ═══════════════════════════════════════════
   STORE TAB (new renderStore classes)
═══════════════════════════════════════════ */
.tab-store { padding-bottom: 40px; }

.store-banner-inner {
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
}
.store-logo { flex-shrink:0; }
.store-banner-text { flex:1; }
.store-tagline { font-size:12px; color:var(--txt2); margin-top:2px; }
.store-stats {
  display:flex;
  gap:20px;
  flex-shrink:0;
}
.store-stat-item { text-align:center; }
.store-stat-val { display:block; font-size:16px; font-weight:800; color:var(--green); }
.store-stat-lbl { display:block; font-size:10px; color:var(--txt3); letter-spacing:.5px; text-transform:uppercase; }

.store-empty {
  text-align:center;
  padding:80px 20px;
  color:var(--txt2);
}
.store-empty-icon { margin-bottom:16px; }
.store-empty h3 { font-size:20px; color:var(--txt); margin-bottom:8px; }
.store-empty p { font-size:14px; margin-bottom:24px; line-height:1.6; }

.store-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}

.store-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .15s, transform .15s;
}
.store-card:hover { border-color:var(--green-dim); transform:translateY(-2px); }
.store-card-oos { opacity:.6; }
.store-card-oos:hover { opacity:.8; border-color:var(--border); transform:none; }

.strain-img-wrap {
  height:180px;
  background:#0a140a;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow:hidden;
}
.strain-img-wrap svg { width:160px; height:160px; }

.strain-info { padding:14px 14px 8px; flex:1; }
.strain-name { font-size:15px; font-weight:700; color:var(--green); margin-bottom:4px; }
.strain-type {
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:10px;
  margin-bottom:6px;
}
.strain-type-hybrid  { background:rgba(57,255,20,.12); color:var(--green); }
.strain-type-sativa  { background:rgba(74,158,255,.12); color:var(--blue); }
.strain-type-indica  { background:rgba(124,92,216,.12); color:#a78bfa; }
.strain-desc { font-size:12px; color:var(--txt2); line-height:1.4; margin:6px 0; }
.strain-stock { font-size:12px; font-weight:600; margin-top:4px; }
.strain-stock.in-stock { color:var(--green); }
.strain-stock.oos { color:var(--txt3); }

.strain-pricing {
  padding:12px 14px 14px;
  border-top:1px solid var(--border);
  background:#0f0f12;
}
.price-label { font-size:10px; font-weight:700; letter-spacing:1px; color:var(--txt3); text-transform:uppercase; display:block; margin-bottom:6px; }
.price-input-row { display:flex; align-items:center; gap:4px; margin-bottom:6px; }
.price-prefix { color:var(--gold); font-weight:700; font-size:15px; }
.price-input {
  width:80px;
  padding:7px 10px;
  font-size:15px;
  font-weight:700;
  color:var(--gold);
  border-color:#3a2a10;
  text-align:center;
}
.price-hints { margin-bottom:8px; }
.price-hint-total { font-size:11px; color:var(--txt3); }
.store-sell-btn { width:100%; margin-top:4px; }

/* buyer chips in sell modal */
.buyer-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.buyer-chip {
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:20px;
  padding:3px 10px 3px 4px;
  font-size:12px;
  color:var(--txt2);
}
.buyer-thumb { width:22px; height:22px; border-radius:50%; object-fit:cover; }

/* sell modal */
.sell-modal-inner { display:flex; gap:16px; align-items:flex-start; }
.sell-strain-preview { flex-shrink:0; width:120px; }
.sell-strain-preview svg { width:120px; height:120px; }
.sell-strain-info { flex:1; }
.sell-strain-info h3 { font-size:16px; font-weight:700; color:var(--green); margin-bottom:4px; }
.sell-strain-info p { font-size:13px; color:var(--txt2); margin-bottom:6px; }
.sell-form label { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--txt3); text-transform:uppercase; display:block; margin-bottom:6px; }

/* saves list in modal */
.saves-list { display:flex; flex-direction:column; gap:0; }
.save-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  gap:12px;
}
.save-row:last-child { border-bottom:none; }
.save-info { flex:1; }
.save-name { font-size:14px; font-weight:700; color:var(--txt); display:block; }
.save-meta { font-size:12px; color:var(--txt3); margin-top:2px; display:block; }
.save-actions { display:flex; gap:8px; flex-shrink:0; }

/* ═══════════════════════════════════════════
   INVENTORY TAB
═══════════════════════════════════════════ */
.tab-inventory { padding-bottom:40px; }
.inv-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.inv-header h2 { font-size:20px; font-weight:800; letter-spacing:1px; color:var(--txt); }
.inv-summary { display:flex; gap:20px; font-size:13px; color:var(--txt2); }
.inv-summary strong { color:var(--txt); }
.inv-section { margin-bottom:24px; }
.inv-section-title {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--txt3);
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.inv-strain-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.ship-status {
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--gold);
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════
   PHONE TAB (new renderPhone classes)
═══════════════════════════════════════════ */
.phone-shell {
  display:flex;
  height:calc(100vh - 52px - 34px - 40px);
  min-height:400px;
}
.phone-contacts {
  width:270px;
  min-width:270px;
  background:var(--panel);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.phone-contacts-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--txt2);
  text-transform:uppercase;
  flex-shrink:0;
}
#contact-list { flex:1; overflow-y:auto; }
.contact-group-label {
  padding:10px 16px 4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--txt3);
  text-transform:uppercase;
}
.contact-empty { padding:12px 16px; font-size:12px; color:var(--txt3); }
.contact-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .1s;
  position:relative;
}
.contact-row:hover { background:var(--card); }
.contact-row.active { background:#0a1a0a; border-left:2px solid var(--green); }
.contact-row.blocked { opacity:.4; }
.contact-avatar-wrap { position:relative; flex-shrink:0; }
.contact-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--border); display:block; }
.contact-badge {
  position:absolute;
  top:-2px;
  right:-2px;
  background:var(--green);
  color:#000;
  font-size:9px;
  font-weight:800;
  width:16px;
  height:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-info { flex:1; min-width:0; }
.contact-name { font-size:13px; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-sub { font-size:10px; color:var(--txt3); text-transform:capitalize; margin-top:1px; }
.contact-preview { font-size:11px; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.contact-blocked-icon { font-size:14px; flex-shrink:0; }

.phone-chat {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--bg);
}
.phone-chat-placeholder {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--txt3);
  gap:10px;
  font-size:14px;
}
#chat-area {
  display:flex;
  flex-direction:column;
  height:100%;
}
.phone-chat-header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
  flex-shrink:0;
}
.chat-hdr-avatar-wrap { flex-shrink:0; }
.chat-hdr-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--green-dim); display:block; }
.chat-hdr-info { flex:1; }
.chat-hdr-name { font-size:14px; font-weight:700; color:var(--txt); }
.chat-hdr-sub { font-size:11px; color:var(--txt3); text-transform:capitalize; }
.chat-blocked-banner { font-size:12px; color:var(--red); font-weight:700; padding:4px 10px; background:rgba(255,59,48,.1); border-radius:20px; }
.phone-messages {
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--bg);
}
.chat-empty-state {
  text-align:center;
  padding:40px;
  color:var(--txt3);
  font-size:13px;
  line-height:1.6;
}
.msg-row { display:flex; }
.msg-row-player { justify-content:flex-end; }
.msg-row-npc    { justify-content:flex-start; }
.msg-bubble {
  max-width:72%;
  padding:9px 13px;
  border-radius:16px;
  font-size:13px;
  line-height:1.45;
  word-break:break-word;
  position:relative;
}
.msg-bubble-player {
  background:var(--green);
  color:#000;
  border-bottom-right-radius:4px;
}
.msg-bubble-npc {
  background:var(--card);
  color:var(--txt);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.msg-ts {
  display:block;
  font-size:9px;
  opacity:.6;
  margin-top:3px;
  text-align:right;
}
.typing-bubble { padding:10px 14px; }
.typing-dot {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--txt3);
  margin:0 2px;
  animation:typingBounce .9s infinite;
}
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.3s; }

.phone-quick-replies {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:8px 12px;
  border-top:1px solid var(--border);
  background:var(--panel);
  flex-shrink:0;
  min-height:44px;
}
.quick-reply-btn {
  background:var(--card);
  border:1px solid var(--border);
  color:var(--txt2);
  font-size:11px;
  padding:5px 12px;
  border-radius:20px;
  cursor:pointer;
  transition:all .12s;
  white-space:nowrap;
}
.quick-reply-btn:hover { border-color:var(--green-dim); color:var(--txt); }

.phone-input-row {
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--panel);
  flex-shrink:0;
}
.phone-text-input {
  flex:1;
  padding:9px 14px;
  border-radius:20px;
  font-size:13px;
  height:38px;
}
.phone-send-btn {
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--green);
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all .15s;
}
.phone-send-btn:hover { background:#4fff28; transform:scale(1.08); }

/* dealer quote / fulfill bar */
.dealer-quote-bar {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  padding:4px 0;
}
.dealer-quote-info { flex:1; font-size:12px; color:var(--txt2); min-width:0; }
.btn-disabled { opacity:.4; cursor:not-allowed; }

/* ═══════════════════════════════════════════
   ADS TAB
═══════════════════════════════════════════ */
.tab-ads { padding-bottom:40px; }
.ads-header { margin-bottom:20px; }
.ads-header h2 { font-size:20px; font-weight:800; letter-spacing:1px; color:var(--txt); }
.ads-sub { font-size:13px; color:var(--txt2); margin-top:4px; }
.ads-active-section { margin-bottom:20px; }
.ads-section-title {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--txt3);
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.ads-active-list { display:flex; flex-direction:column; gap:6px; }
.ads-active-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(57,255,20,.06);
  border:1px solid var(--green-dim);
  border-radius:var(--r);
  padding:8px 14px;
}
.ads-active-name { font-size:13px; font-weight:600; color:var(--green); }
.ads-active-days { font-size:12px; color:var(--txt3); }
.ads-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
  margin-bottom:20px;
}
.ad-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .15s;
}
.ad-card:hover { border-color:var(--green-dim); }
.ad-card-active { border-color:var(--green-dim); background:#0a1a0a; }
.ad-card-broke { opacity:.55; }
.ad-preview {
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#080808;
}
.ad-info { padding:14px; flex:1; }
.ad-name { font-size:14px; font-weight:700; color:var(--txt); margin-bottom:4px; }
.ad-desc { font-size:12px; color:var(--txt2); line-height:1.4; margin-bottom:10px; }
.ad-stats { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--txt3); }
.ad-stat { display:flex; align-items:center; gap:4px; }
.ad-stat-icon { font-size:12px; }
.ad-stats strong { color:var(--gold); }
.ad-action { padding:0 14px 14px; }
.ad-btn { width:100%; padding:9px; font-size:12px; }
.ads-footer-stats {
  display:flex;
  gap:24px;
  font-size:12px;
  color:var(--txt3);
  padding-top:12px;
  border-top:1px solid var(--border);
}
.ads-footer-stats strong { color:var(--txt); }

/* ═══════════════════════════════════════════
   FINANCES TAB
═══════════════════════════════════════════ */
.tab-finances { padding-bottom:40px; }
.finances-header { margin-bottom:20px; }
.finances-header h2 { font-size:20px; font-weight:800; letter-spacing:1px; color:var(--txt); }
.finances-sub { font-size:13px; color:var(--txt2); margin-top:4px; }
.fin-stat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:24px;
}
.fin-stat-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:16px 18px;
  text-align:center;
}
.fin-stat-card.fin-stat-negative { border-color:#5a1a1a; background:#1a0a0a; }
.fin-stat-icon { font-size:20px; margin-bottom:6px; }
.fin-stat-val { font-size:18px; font-weight:800; color:var(--green); margin-bottom:4px; word-break:break-all; }
.fin-stat-negative .fin-stat-val { color:var(--red); }
.fin-stat-lbl { font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--txt3); }
.fin-log-section { margin-bottom:24px; }
.fin-log-title {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--txt3);
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.fin-table { width:100%; border-collapse:collapse; font-size:13px; }
.fin-table th {
  text-align:left;
  padding:10px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--txt3);
  border-bottom:1px solid var(--border);
}
.fin-table td { padding:11px 14px; border-bottom:1px solid var(--border); }
.fin-table tr:last-child td { border-bottom:none; }
.fin-table tr:hover td { background:rgba(255,255,255,.02); }
.fin-milestones { margin-bottom:24px; }
.milestone-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.milestone-item {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:12px 14px;
}
.milestone-item.milestone-done { border-color:var(--green-dim); background:#0a1a0a; }
.milestone-label { font-size:12px; font-weight:600; color:var(--txt); margin-bottom:6px; }
.milestone-bar-wrap { height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.milestone-bar { height:100%; background:var(--green); border-radius:2px; transition:width .5s; }
.milestone-prog { font-size:10px; color:var(--txt3); }
.milestone-done .milestone-prog { color:var(--green); font-weight:700; }

/* ═══════════════════════════════════════════
   UNBOXING (new structure)
═══════════════════════════════════════════ */
.unbox-item {
  display:flex;
  gap:16px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--green-dim);
  border-radius:var(--r2);
  padding:20px 24px;
  max-width:440px;
  box-shadow:0 0 30px rgba(57,255,20,.2);
}
.unbox-strain-svg svg { width:100px; height:100px; }
.unbox-item-info { flex:1; }
.unbox-strain-name { font-size:18px; font-weight:800; color:var(--green); margin-bottom:4px; }
.unbox-strain-type { font-size:11px; color:var(--txt3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.unbox-strain-grams { font-size:24px; font-weight:900; color:var(--gold); margin-bottom:4px; }
.unbox-strain-desc { font-size:12px; color:var(--txt2); line-height:1.4; }

/* ═══════════════════════════════════════════
   NOTIFICATION TYPES
═══════════════════════════════════════════ */
.notif-error  { border-left-color:var(--red) !important; }
.notif-warn   { border-left-color:var(--gold) !important; }
.notif-success{ border-left-color:var(--green) !important; }
.notif-info   { border-left-color:var(--blue) !important; }


/* ═══════════════════════════════════════════════════════════════════════════════
   PHONE DEVICE UI — photo-real phone shell
   Layout: phone-desk = contacts (left) + phone device (centre) + dealer hub (right)
═══════════════════════════════════════════════════════════════════════════════ */

.phone-desk {
  display: flex;
  gap: 16px;
  height: calc(100vh - 52px - 34px - 40px);
  min-height: 580px;
  align-items: flex-start;
}

/* LEFT PANEL — contacts list */
.phone-contacts-panel {
  width: 230px;
  min-width: 200px;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

/* RIGHT PANEL — dealer price guide hub */
.dealer-hub-panel {
  width: 310px;
  min-width: 280px;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
  scrollbar-color: #2a2a38 transparent;
}
.dealer-hub-panel::-webkit-scrollbar { width: 5px; }
.dealer-hub-panel::-webkit-scrollbar-track { background: transparent; }
.dealer-hub-panel::-webkit-scrollbar-thumb { background: #2a2a38; border-radius: 3px; }

/* Sticky header */
.dealer-hub-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--green);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

/* Dealer selector tabs — one row of 4 portrait buttons */
.dealer-hub-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dealer-hub-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 7px;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.dealer-hub-tab:last-child { border-right: none; }
.dealer-hub-tab:hover:not(:disabled) { background: rgba(57,255,20,.06); }
.dealer-hub-tab.active {
  background: rgba(57,255,20,.10);
  box-shadow: inset 0 -2px 0 var(--green);
}
.dealer-hub-tab.locked { opacity: 0.35; cursor: not-allowed; }
.dealer-hub-tab.blocked { opacity: 0.4; }
.dealer-hub-tab.blocked .dhub-tab-avatar,
.dealer-hub-tab.blocked .dhub-tab-avatar-fb { border-color: #ff4444; }

.dhub-tab-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #2a2a38;
}
.dhub-tab-avatar-fb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1e1e2a;
  border: 1.5px solid #2a2a38;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}
.dhub-tab-name {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}
.dealer-hub-tab.active .dhub-tab-name { color: var(--green); }
.dhub-tab-lock {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  line-height: 1;
}

/* Amounts reference strip */
.dealer-hub-tip {
  font-size: 10px;
  color: #666;
  line-height: 1.5;
  padding: 6px 12px 0;
}
.dealer-hub-amounts-ref {
  background: #0a0a0f;
  border: 1px solid #1e1e28;
  border-radius: 6px;
  margin: 6px 10px;
  padding: 5px 10px;
  font-size: 10px;
  color: #666;
}
.dealer-hub-amounts-ref strong { color: #999; }

.dealer-hub-card {
  margin: 8px 10px 4px;
  background: #0d0d14;
  border: 1px solid #222;
  border-radius: 8px;
  overflow: hidden;
}
.dealer-hub-card.dealer-hub-blocked {
  opacity: 0.45;
  border-color: #ff4444;
}

.dealer-hub-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #111118;
  border-bottom: 1px solid #1e1e28;
}
.dealer-hub-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #2a2a38;
  flex-shrink: 0;
}
.dealer-hub-avatar-fb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e1e2a;
  border: 1.5px solid #2a2a38;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
}
.dealer-hub-card-info { flex: 1; min-width: 0; }
.dealer-hub-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dealer-hub-meta {
  font-size: 10px;
  color: #555;
  margin-top: 1px;
}
.dealer-hub-blocked-tag {
  font-size: 9px;
  font-weight: 800;
  color: #ff4444;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.dealer-hub-mins {
  display: flex;
  gap: 12px;
  padding: 5px 12px;
  font-size: 10px;
  color: #666;
  background: #0a0a10;
  border-bottom: 1px solid #1a1a20;
}
.dealer-hub-mins strong { color: #aaa; }

/* Strain pricing table — no clipping, full names visible */
.dealer-hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}
.dealer-hub-table th {
  background: #0f0f18;
  color: #555;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid #1a1a20;
  white-space: nowrap;
}
.dealer-hub-table td {
  padding: 6px 8px;
  color: #ccc;
  border-bottom: 1px solid #141420;
  vertical-align: middle;
  white-space: nowrap;
}
.dealer-hub-table tr:last-child td { border-bottom: none; }
.dealer-hub-table tr:hover td { background: rgba(57,255,20,.04); }

.dhub-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.dhub-type {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.dhub-type-hybrid   { background: rgba(57,255,20,.12); color: #39ff14; }
.dhub-type-sativa   { background: rgba(255,200,0,.12); color: #ffc800; }
.dhub-type-indica   { background: rgba(160,100,255,.12); color: #a064ff; }
.dhub-thc  { color: #888; font-size: 9px; }
.dhub-ppg  { color: #39ff14; font-weight: 700; }
.dhub-price { color: #aaa; }

.dealer-hub-how {
  padding: 8px 12px;
  background: #0a0a0f;
  border-top: 1px solid #1a1a20;
  font-size: 9px;
  line-height: 1.7;
}
.dhub-hint-lbl { color: #555; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dhub-hint-ex { color: #3a7a3a; font-style: italic; }

.dealer-hub-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 10px 12px;
  padding: 8px 12px;
  background: #0a0a0f;
  border: 1px solid #1e1e28;
  border-radius: 6px;
  font-size: 10px;
  color: #555;
}
.contacts-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.contacts-panel-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
}
.contacts-unread-badge {
  background: var(--green);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
#dealer-contact-list,
#customer-contact-list {
  overflow-y: auto;
}
.contact-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.contact-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
}
.contact-blocked { opacity: 0.45; }
.contact-locked  { opacity: 0.38; cursor: default; pointer-events: none; }
.contact-lock-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 9px;
  line-height: 1;
}

/* RIGHT — phone device wrapper */
.phone-device-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4px;
  height: 100%;
}

/* THE PHONE */
.phone-device {
  width: 340px;
  min-width: 300px;
  max-width: 380px;
  height: 100%;
  max-height: 680px;
  background: #111216;
  border-radius: 40px;
  border: 2.5px solid #2a2a35;
  box-shadow:
    0 0 0 1px #3a3a44,
    0 20px 60px rgba(0,0,0,.8),
    inset 0 0 0 1px #1e1e28;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Side buttons (decorative) */
.phone-device::before {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 80px;
  width: 3px;
  height: 50px;
  background: #2a2a35;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 60px 0 #2a2a35;
}
.phone-device::after {
  content: '';
  position: absolute;
  left: -3.5px;
  top: 60px;
  width: 3px;
  height: 30px;
  background: #2a2a35;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 42px 0 #2a2a35, 0 80px 0 #2a2a35;
}

/* Notch */
.phone-notch {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #111216;
  z-index: 5;
}
.phone-notch-cam {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1e1e28;
  border: 1.5px solid #2a2a38;
  box-shadow: 0 0 0 2px #111216;
}

/* Status bar */
.phone-status-bar {
  height: 24px;
  background: #111216;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  flex-shrink: 0;
  z-index: 4;
}
.phone-status-time {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  font-family: -apple-system, 'SF Pro Display', sans-serif;
}
.phone-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}
.phone-signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.sig-bar {
  width: 3px;
  background: #fff;
  border-radius: 1px;
}
.sig-bar:nth-child(1) { height: 25%; }
.sig-bar:nth-child(2) { height: 50%; }
.sig-bar:nth-child(3) { height: 75%; }
.sig-bar:nth-child(4) { height: 100%; }

/* App bar — contact header inside phone */
.phone-app-bar {
  background: #1a1a22;
  border-bottom: 1px solid #2a2a35;
  flex-shrink: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
}
.phone-app-bar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
}
.phone-contact-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  width: 100%;
}
.phone-contact-hdr-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.phone-contact-hdr-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--green-dim);
}
.phone-contact-hdr-avatar-fb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  border: 2px solid var(--green-dim);
}
.phone-contact-hdr-online {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid #1a1a22;
  animation: pulse 2s infinite;
}
.phone-contact-hdr-info { flex: 1; min-width: 0; }
.phone-contact-hdr-name { font-size: 13px; font-weight: 700; color: #fff; }
.phone-contact-hdr-sub  { font-size: 10px; color: #666; text-transform: capitalize; }
.phone-blocked-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  background: rgba(255,59,48,.12);
  border-radius: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
}

/* Message scroll area inside phone */
.phone-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0d0d10;
}
.phone-chat-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: #333;
  font-size: 12px;
  text-align: center;
}

/* Quick replies inside phone — dealer strain-tab system */
.phone-quick-replies {
  display: flex;
  flex-direction: column;
  background: #13131a;
  border-top: 1px solid #2a2a35;
  flex-shrink: 0;
  max-height: 160px;
  overflow: hidden;
}

/* Strain tab row (scrollable horizontally) */
.qr-strain-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 8px 4px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.qr-strain-tabs::-webkit-scrollbar { display: none; }

.qr-strain-tab {
  background: #1a1a24;
  border: 1px solid #3a3a4a;
  color: #999;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
  text-transform: uppercase;
  flex-shrink: 0;
}
.qr-strain-tab:hover,
.qr-strain-tab.active {
  border-color: var(--green-dim);
  color: var(--green);
  background: rgba(57,255,20,.10);
}

/* Amount button row (scrollable horizontally) */
.qr-amounts-row {
  display: flex;
  gap: 4px;
  padding: 4px 8px 6px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.qr-amounts-row::-webkit-scrollbar { display: none; }

.qr-amount-btn {
  background: #1e1e2a;
  border: 1px solid #3a3a4a;
  color: #c0c0d0;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.qr-amount-btn:hover {
  border-color: var(--green-dim);
  color: var(--green);
  background: rgba(57,255,20,.07);
}

/* Customer quick-reply flat chip row (unchanged) */
.qr-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 8px;
}

.quick-reply-btn {
  background: #1e1e2a;
  border: 1px solid #3a3a4a;
  color: #c0c0d0;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.quick-reply-btn:hover {
  border-color: var(--green-dim);
  color: var(--green);
  background: rgba(57,255,20,.07);
}

/* Input bar at bottom of phone */
.phone-input-bar {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #1a1a22;
  border-top: 1px solid #2a2a35;
  align-items: center;
  flex-shrink: 0;
}
.phone-keyboard-input {
  flex: 1;
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 13px;
  height: 34px;
  background: #0d0d10;
  border: 1px solid #3a3a4a;
  color: #fff;
}
.phone-keyboard-input:focus { border-color: #555; }
.phone-keyboard-input::placeholder { color: #555; }
.phone-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  border: none;
}
.phone-send-btn:hover { background: #4fff28; transform: scale(1.08); }

/* Home bar */
.phone-home-bar {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111216;
  flex-shrink: 0;
}
.phone-home-bar::after {
  content: '';
  width: 100px;
  height: 4px;
  background: #3a3a48;
  border-radius: 2px;
}

/* ─────────────────────────────────────────
   DEAL ACTION BAR (dealer quote + fulfill)
───────────────────────────────────────── */
.deal-action-bar {
  width: 100%;
  background: #0f1a0f;
  border: 1px solid var(--green-dim);
  border-radius: var(--r);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.deal-action-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.deal-action-who {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.deal-action-what {
  font-size: 12px;
  color: var(--txt);
}
.deal-action-price {
  font-size: 12px;
  color: var(--gold);
}
.deal-action-price strong {
  font-size: 14px;
  font-weight: 800;
}
.deal-action-warn {
  font-size: 11px;
  color: var(--red);
  width: 100%;
}
.deal-action-btns {
  display: flex;
  gap: 6px;
}
.deal-confirm-btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}
.deal-decline-btn {
  padding: 7px 12px;
  font-size: 12px;
}
.deal-confirm-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Message bubbles — tightened for phone */
.msg-row { display: flex; margin-bottom: 2px; }
.msg-row-player { justify-content: flex-end; }
.msg-row-npc    { justify-content: flex-start; }
.msg-bubble {
  max-width: 78%;
  padding: 7px 11px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}
.msg-bubble-player {
  background: #248a3d;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble-npc {
  background: #2a2a38;
  color: #e8e8f0;
  border-bottom-left-radius: 4px;
}
.msg-ts {
  display: block;
  font-size: 8px;
  opacity: .55;
  margin-top: 3px;
  text-align: right;
}
.typing-bubble { display: flex; align-items: center; gap: 3px; padding: 8px 12px; }
.typing-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #666;
  margin: 0 1px;
  animation: typingBounce .9s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%,80%,100% { transform: scale(1); opacity: .5; }
  40%         { transform: scale(1.4); opacity: 1; }
}