/* ═══ CHAT — clean, fast, distraction-free ═══ */

#chatArea{flex:1;display:flex;flex-direction:column;background:var(--bg);min-width:0;position:relative}

/* ── Header — minimal, functional ── */
.chat-top{
  padding:var(--sp-3) var(--sp-4);
  padding-top:calc(var(--sp-3) + var(--st));
  background:var(--bg2);
  border-bottom:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  flex-shrink:0;
}
.chat-title{display:flex;align-items:center;gap:var(--sp-3);min-width:0;flex:1}
#sidebarToggle{display:none;background:none;border:none;color:var(--muted);font-size:var(--text-lg);cursor:pointer;padding:var(--sp-1);min-width:36px;min-height:36px;align-items:center;justify-content:center;flex-shrink:0}
.chat-icon{
  width:30px;height:30px;border-radius:var(--r-md);
  background:var(--surface-1);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--weight-bold);
  overflow:hidden;flex-shrink:0;
}
.chat-name{font-size:var(--text-md);font-weight:var(--weight-bold);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:var(--tracking-tight)}
.chat-desc{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Top actions — grouped pill ── */
.top-actions{display:flex;gap:2px;flex-shrink:0;background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);padding:2px}
.top-btn{
  width:30px;height:30px;border-radius:var(--r-md);
  background:transparent;border:none;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast);
}
.top-btn:hover{background:var(--surface-hover);color:var(--text)}
.top-btn:active{transform:scale(.92)}
.top-btn svg{width:15px;height:15px}

/* ── Search panel ── */
.search-panel{display:none;border-bottom:1px solid var(--border);background:var(--bg2);overflow:hidden;animation:fadeUp .15s var(--ease-out)}
.search-panel.open{display:block}
.search-input-wrap{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4)}
.search-icon{width:15px;height:15px;stroke:var(--muted);flex-shrink:0}
.search-field{flex:1;background:transparent;border:none;color:var(--text);font-family:var(--font);font-size:var(--text-md);outline:none;padding:var(--sp-2) 0}
.search-field::placeholder{color:var(--muted)}
.search-close{background:none;border:none;color:var(--muted);font-size:var(--text-lg);cursor:pointer;padding:var(--sp-1);min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center}
.search-close:hover{color:var(--text)}
.search-results{max-height:280px;overflow-y:auto;border-top:1px solid var(--border2)}
.search-results:empty{display:none}
.sr-item{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border2);cursor:pointer;transition:background var(--dur-fast)}
.sr-item:hover{background:var(--surface-hover)}
.sr-author{font-size:var(--text-xs);font-weight:var(--weight-semi);color:var(--text-secondary)}
.sr-time{font-size:var(--text-2xs);color:var(--text-faint);margin-left:var(--sp-2)}
.sr-text{font-size:var(--text-sm);color:var(--muted);margin-top:2px;line-height:var(--leading-normal)}
.sr-text mark{background:var(--primary-dim);color:var(--primary);border-radius:var(--r-xs);padding:0 2px}
.sr-empty{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--text-faint);font-size:var(--text-sm)}
.sr-count{padding:var(--sp-2) var(--sp-4);font-size:var(--text-2xs);color:var(--text-faint);letter-spacing:.5px}

/* ── Messages container ── */
#msgsWrap{
  flex:1;overflow-y:auto;
  padding:var(--sp-4) var(--sp-4);
  display:flex;flex-direction:column;gap:0;
  -webkit-overflow-scrolling:touch;
  contain:layout style;
  overscroll-behavior:contain;
}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);text-align:center;gap:var(--sp-2);padding:var(--sp-5)}
.empty-icon{font-size:clamp(36px,7vw,48px);opacity:.12;filter:grayscale(1)}
.empty-title{font-size:var(--text-md);font-weight:var(--weight-semi);color:var(--text-faint)}
.empty-sub{font-size:var(--text-xs);color:var(--text-faint)}

/* ── Message — clean, scannable ── */
.msg{
  display:flex;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md);
  transition:background var(--dur-fast) var(--ease-out);
  animation:msgSlideIn .25s var(--ease-out) both;
  position:relative;
}
.msg:hover{background:var(--surface-hover)}
.msg-av{
  width:32px;height:32px;border-radius:var(--r-full);
  background:var(--surface-1);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--weight-bold);font-size:var(--text-xs);
  flex-shrink:0;overflow:visible;position:relative;
  border:1px solid var(--border);
}
.msg-av img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full);position:absolute;inset:0}
.msg-body{flex:1;min-width:0}
.msg-meta{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:2px}
.msg-author{font-weight:var(--weight-semi);font-size:var(--text-sm);color:var(--text-secondary)}
.msg-time{font-size:var(--text-2xs);color:var(--text-faint)}

/* Message text — clean left accent, no background noise */
.msg-text{
  font-size:var(--text-base);line-height:var(--leading-relaxed);
  color:var(--text);word-break:break-word;
  padding:var(--sp-1) var(--sp-3);
  border-left:2px solid var(--border2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.msg:hover .msg-text{border-left-color:var(--border-hover)}
.msg-own .msg-text{border-left-color:var(--primary-dim)}

/* Media in messages */
.msg-img{
  max-width:100%;max-height:280px;border-radius:var(--r-lg);
  display:block;margin-top:var(--sp-2);cursor:pointer;
  object-fit:contain;background:var(--bg);
  border:1px solid var(--border);
  transition:box-shadow var(--dur-fast),border-color var(--dur-fast);
  content-visibility:auto;contain-intrinsic-size:280px 200px;
}
.msg-img:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover)}
.msg-vid{max-width:100%;max-height:360px;border-radius:var(--r-lg);display:block;margin-top:var(--sp-2);background:var(--bg);border:1px solid var(--border);outline:none}
.msg-vid::-webkit-media-controls-panel{background:linear-gradient(transparent,rgba(0,0,0,.6))}
.msg-audio{width:100%;max-width:340px;margin-top:var(--sp-2);border-radius:var(--r-full);height:38px;outline:none}
.msg-file{
  display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-lg);
  color:var(--text-secondary);text-decoration:none;
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  transition:background var(--dur-fast),color var(--dur-fast);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msg-file:hover{background:var(--surface-hover);color:var(--text);box-shadow:var(--shadow-sm)}
.msg-file-icon{font-size:16px;flex-shrink:0}
.upload-progress{height:2px;background:var(--surface-1);border-radius:1px;overflow:hidden;margin-top:var(--sp-1);display:none}
.upload-progress-bar{height:100%;background:var(--primary);border-radius:1px;transition:width var(--dur-normal);width:0%}

/* DM banner */
.dm-banner{display:flex;flex-direction:column;align-items:center;padding:var(--sp-8) var(--sp-5) var(--sp-5);text-align:center;border-bottom:1px solid var(--border2);margin-bottom:var(--sp-2)}
.dm-banner-av{
  width:clamp(52px,10vw,64px);height:clamp(52px,10vw,64px);
  border-radius:var(--r-full);background:var(--surface-1);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(18px,4vw,24px);font-weight:var(--weight-bold);
  margin-bottom:var(--sp-3);border:1px solid var(--border);overflow:hidden;
}
.dm-banner-av img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-full)}
.dm-banner-name{font-size:clamp(15px,3.5vw,18px);font-weight:var(--weight-bold);margin-bottom:var(--sp-1);letter-spacing:var(--tracking-tight)}
.dm-banner-sub{font-size:var(--text-xs);color:var(--muted)}

/* ── Input area — clean, compact ── */
#inputArea{
  padding:var(--sp-2) var(--sp-4) calc(var(--sp-3) + var(--sb));
  background:var(--bg2);border-top:1px solid var(--border2);flex-shrink:0;
}
.input-row{display:flex;gap:var(--sp-2);align-items:flex-end}
.input-tools{display:flex;gap:var(--sp-1)}
#msgInput{
  flex:1;padding:10px var(--sp-4);
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-xl);
  color:var(--text);font-size:var(--text-md);font-family:var(--font);
  resize:none;max-height:100px;min-height:40px;outline:none;
  transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);-webkit-appearance:none;
}
#msgInput::placeholder{color:var(--text-faint)}
#msgInput:focus{background:var(--surface-1);border-color:var(--primary);box-shadow:var(--shadow-ring)}
.tool-btn{
  width:38px;height:38px;border-radius:var(--r-lg);
  background:var(--surface-0);border:1px solid var(--border);
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast),transform var(--dur-normal) var(--ease-spring);flex-shrink:0;
}
.tool-btn:hover{background:var(--surface-hover);color:var(--text)}
.tool-btn:active{transform:scale(.9);transition-duration:80ms}
.tool-btn svg{width:16px;height:16px}
.send-btn{
  width:40px;height:40px;border-radius:var(--r-lg);
  background:var(--primary);border:none;color:#fff;
  font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal),transform var(--dur-normal) var(--ease-spring);
  box-shadow:var(--shadow-sm);flex-shrink:0;
  will-change:transform;
}
.send-btn:hover{background:var(--primary-hover);box-shadow:var(--shadow-md),var(--shadow-glow);transform:translateY(-1px)}
.send-btn:active{transform:scale(.88);transition-duration:80ms}
.send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ═══ MESSAGE ACTIONS ═══ */
.msg-acts{display:none;gap:2px;margin-top:var(--sp-1);align-items:center;flex-wrap:wrap}
.msg:hover .msg-acts{display:flex}
.msg-act{
  background:none;border:none;color:var(--muted);
  font-size:var(--text-xs);cursor:pointer;
  padding:2px var(--sp-2);border-radius:var(--r-sm);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast);
  min-height:22px;display:flex;align-items:center;line-height:1;
  font-family:var(--font);
}
.msg-act:hover{background:var(--surface-hover);color:var(--text)}
.msg-act:active{transform:scale(.93)}
.msg-act.del:hover{color:var(--error)}

/* Reply quote inside message */
.reply-quote{background:var(--surface-0);border-left:2px solid var(--primary-dim);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--sp-1) var(--sp-2);margin-bottom:var(--sp-1);cursor:pointer;max-width:100%}
.rq-who{font-size:var(--text-xs);font-weight:var(--weight-semi);color:var(--text-secondary);margin-bottom:1px}
.rq-text{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Reactions */
.msg-reactions{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.rxn{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-full);
  padding:2px var(--sp-2);font-size:var(--text-sm);cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-normal) var(--ease-spring);color:var(--text-secondary);line-height:1.4;
}
.rxn:hover{background:var(--surface-hover);border-color:var(--border-hover)}
.rxn:active{transform:scale(.88);transition-duration:80ms}
.rxn.me{background:var(--primary-subtle);border-color:var(--border-active)}
.rxn-count{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--text-secondary)}

/* Reply strip above textarea */
#replyStrip{display:none;padding:var(--sp-2) var(--sp-4) var(--sp-1);border-top:1px solid var(--border);align-items:center;gap:var(--sp-2);background:var(--bg2);flex-shrink:0}
#replyStrip.show{display:flex}
.rs-bar{flex:1;border-left:2px solid var(--primary);padding:var(--sp-1) var(--sp-2);min-width:0}
.rs-who{font-size:var(--text-xs);font-weight:var(--weight-semi);color:var(--text-secondary);margin-bottom:1px}
.rs-txt{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-close{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:var(--sp-1);flex-shrink:0;line-height:1}
.rs-close:hover{color:var(--text)}

/* Typing indicator */
#typingBar{padding:0 var(--sp-5) 2px;font-size:var(--text-xs);color:var(--muted);background:var(--bg2);flex-shrink:0;min-height:0;overflow:hidden}
.t-dot{display:inline-block;animation:typDot 1.4s var(--ease-out) infinite;margin:0 .5px}
.t-dot:nth-child(2){animation-delay:.2s}.t-dot:nth-child(3){animation-delay:.4s}
@keyframes typDot{0%,80%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-2px);opacity:1}}

/* Reaction picker */
#reactPicker{
  position:fixed;
  background:var(--bg3);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-2);gap:3px;z-index:var(--z-popover);
  box-shadow:var(--shadow-lg);
  display:none;flex-wrap:wrap;max-width:240px;
  animation:bubblePop .2s var(--ease-out);
}
#reactPicker.open{display:flex}
.rp-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:var(--sp-1);border-radius:var(--r-md);transition:background var(--dur-fast),transform var(--dur-normal) var(--ease-spring);line-height:1}
.rp-btn:hover{background:var(--surface-hover);transform:scale(1.2)}
.rp-btn:active{transform:scale(.85);transition-duration:80ms}

/* ═══ LIVE TRADE FEED ═══ */
.msg-trade{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);border-radius:var(--r-lg);
  margin-top:var(--sp-1);
  transition:background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast);
  cursor:default;
}
.msg-trade:hover{background:rgba(255,255,255,.04);border-color:var(--border-hover);box-shadow:var(--shadow-sm)}
.msg-trade.fresh{animation:tradeCardSlide .35s var(--ease-out) both}
.msg-trade.buy{border-left:3px solid var(--success)}
.msg-trade.sell{border-left:3px solid var(--error)}

.trade-badge{
  padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);
  font-size:var(--text-2xs);font-weight:var(--weight-bold);
  letter-spacing:.8px;line-height:1;flex-shrink:0;
  text-transform:uppercase;
}
.trade-badge.buy{background:var(--up-dim);color:var(--up)}
.trade-badge.sell{background:var(--down-dim);color:var(--down)}

.trade-info{flex:1;min-width:0}
.trade-stock{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:1px}
.trade-sym{font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text);letter-spacing:.3px}
.trade-name{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trade-details{font-size:var(--text-xs);color:var(--text-secondary)}
.trade-pnl{font-size:var(--text-xs);margin-top:2px;font-weight:var(--weight-semi)}
.trade-pnl.up{color:var(--up)}
.trade-pnl.down{color:var(--down)}

.trade-total{
  font-size:var(--text-sm);font-weight:var(--weight-bold);
  color:var(--text);white-space:nowrap;flex-shrink:0;
  text-align:right;
}

/* ── Clickable stock symbols in chat ── */
.chat-stock-sym{
  color:var(--primary);font-weight:var(--weight-semi);
  cursor:pointer;padding:var(--sp-0) var(--sp-px);border-radius:var(--r-sm);
  background:var(--up-subtle);
  transition:background var(--dur-normal) var(--ease-out),color var(--dur-normal),transform var(--dur-normal) var(--ease-spring),box-shadow var(--dur-normal);
  white-space:nowrap;display:inline-block;
}
.chat-stock-sym:hover{
  background:var(--up-dim);color:var(--primary-hover);
  box-shadow:0 2px 8px var(--primary-dim);
  transform:translateY(-1px);
}
.chat-stock-sym:active{
  transform:scale(.95);transition-duration:80ms;
}

/* Drop overlay */
.drop-overlay{position:absolute;inset:0;background:rgba(56,161,105,.06);border:2px dashed var(--primary);border-radius:var(--r-lg);display:none;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(4px);pointer-events:none}
.drop-overlay.show{display:flex}
.drop-zone{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);color:var(--primary);animation:fadeUp .15s var(--ease-out)}
.drop-text{font-size:var(--text-md);font-weight:var(--weight-semi);letter-spacing:var(--tracking-wide)}