/* ═══════════════════════════════════════════════════════════
   CHAT — recalibrat
   ═══════════════════════════════════════════════════════════ */

/* ── TOPBAR ─────────────────────────────────────────────── */
.chat-topbar {
  height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--s2);
  padding:0 var(--s4);
  background:var(--bg-1);
  border-bottom:1px solid var(--b2);
  flex-shrink:0; z-index:var(--z1);
  backdrop-filter:blur(20px);
}
.chat-topbar-info {
  display:flex; align-items:center; gap:var(--s2); flex:1;
  cursor:pointer; padding:8px; margin:-8px;
  border-radius:var(--r-lg); transition:background var(--t-fast);
}
.chat-topbar-info:hover { background:var(--bg-hover); }
.chat-topbar-name   { font-size:15px; font-weight:700; color:var(--t1); letter-spacing:-.2px; }
.chat-topbar-status { font-size:12px; color:var(--t3); margin-top:1px; }
.chat-topbar-status.online { color:var(--green); font-weight:600; }
.chat-back { display:none; }

/* ── MESSAGES AREA ──────────────────────────────────────── */
.chat-messages {
  flex:1; overflow-y:auto;
  padding:var(--s3) var(--s4);
  display:flex; flex-direction:column; gap:2px;
}

.date-sep {
  display:flex; align-items:center; gap:var(--s2);
  margin:var(--s4) 0 var(--s3); color:var(--t3);
  font-size:12px; font-weight:600;
}
.date-sep::before,.date-sep::after { content:''; flex:1; height:1px; background:var(--b2); }
.date-sep-label {
  padding:3px 12px;
  background:var(--bg-2);
  border:1px solid var(--b2); border-radius:var(--r-full);
}

/* ── MSG ROW ────────────────────────────────────────────── */
.msg-row {
  display:flex; align-items:flex-end; gap:var(--s2);
  padding:1px 0; animation:msgIn .18s ease both;
}
.msg-row.out { flex-direction:row-reverse; }
.msg-row.consecutive .msg-avatar { visibility:hidden; }
.msg-avatar { flex-shrink:0; cursor:pointer; }
.msg-content { display:flex; flex-direction:column; max-width:60%; }
.msg-row.out .msg-content { align-items:flex-end; }
.msg-sender {
  font-size:12px; font-weight:700; color:var(--t-accent);
  margin-bottom:4px; padding-left:2px;
}

/* ── BUBBLE ─────────────────────────────────────────────── */
.msg-bubble {
  padding:10px 14px; border-radius:var(--r-xl);
  word-break:break-word; line-height:1.55; font-size:15px;
  position:relative; cursor:default;
  transition:all var(--t-fast); max-width:100%;
}

/* Incoming — distins față de fundal */
.msg-row.in .msg-bubble {
  background:var(--bg-2);
  border:1px solid var(--b2);
  color:var(--t1);
  border-bottom-left-radius:var(--r-sm);
}
.msg-row.in .msg-bubble:hover {
  background:var(--bg-3);
  border-color:var(--b3);
}

/* Outgoing — gradient violet clar */
.msg-row.out .msg-bubble {
  background:var(--grad-chat-out);
  border:1px solid rgba(124,58,237,.5);
  color:#fff;
  border-bottom-right-radius:var(--r-sm);
  box-shadow:var(--glow-sm);
}
.msg-row.out .msg-bubble:hover { box-shadow:var(--glow-md); }
.msg-row.out .msg-bubble::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(rgba(255,255,255,.08), transparent);
  pointer-events:none;
}

/* Consecutive */
.msg-row.consecutive .msg-bubble { border-radius:var(--r-xl); }
.msg-row.out.consecutive .msg-bubble { border-bottom-right-radius:var(--r-sm); }
.msg-row.in.consecutive  .msg-bubble { border-bottom-left-radius:var(--r-sm); }

.msg-bubble.deleted {
  background:transparent !important; border-style:dashed !important;
  border-color:var(--b2) !important; box-shadow:none !important;
  color:var(--t3); font-style:italic; font-size:14px;
}

/* ── META ───────────────────────────────────────────────── */
.msg-meta {
  display:flex; align-items:center; gap:4px;
  margin-top:4px; font-size:11px; color:var(--t3); padding:0 2px;
}
.msg-row.out .msg-meta { flex-direction:row-reverse; }
.msg-tick          { font-size:12px; letter-spacing:-.5px; }
.msg-tick.sent      { color:var(--t3); }
.msg-tick.delivered { color:var(--t2); }
.msg-tick.read      { color:var(--accent-light); }

/* ── REPLY ──────────────────────────────────────────────── */
.msg-reply-preview {
  background:rgba(255,255,255,.05);
  border-left:3px solid var(--accent-glow);
  border-radius:var(--r-sm);
  padding:7px 11px; margin-bottom:8px;
  cursor:pointer; transition:background var(--t-fast);
}
.msg-reply-preview:hover { background:rgba(255,255,255,.08); }
.msg-reply-author { font-size:12px; font-weight:700; color:var(--accent-glow); margin-bottom:2px; }
.msg-reply-text   { font-size:13px; color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }

/* ── MEDIA ──────────────────────────────────────────────── */
.msg-image { max-width:260px; border-radius:var(--r-lg); overflow:hidden; cursor:pointer; position:relative; }
.msg-image img { width:100%; display:block; transition:filter var(--t-mid); }
.msg-image:hover img { filter:brightness(.85); }
.msg-image-overlay {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.3);
  font-size:28px; opacity:0; transition:opacity var(--t-fast);
}
.msg-image:hover .msg-image-overlay { opacity:1; }

.msg-doc {
  display:flex; align-items:center; gap:var(--s2);
  min-width:200px; cursor:pointer; text-decoration:none; color:inherit; padding:4px 0;
}
.msg-doc-icon {
  width:44px; height:44px; border-radius:var(--r-lg);
  background:var(--bg-3); border:1px solid var(--b2);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; transition:all var(--t-fast);
}
.msg-doc:hover .msg-doc-icon { background:var(--accent); border-color:var(--accent); box-shadow:var(--glow-sm); }
.msg-doc-name { font-size:14px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.msg-doc-size { font-size:12px; color:var(--t3); margin-top:2px; }
.msg-system { text-align:center; font-size:12px; color:var(--t3); padding:4px var(--s3); font-style:italic; }

/* ── INPUT AREA ─────────────────────────────────────────── */
.chat-input-area {
  flex-shrink:0;
  background:var(--bg-1);
  border-top:1px solid var(--b2);
  padding:var(--s2) var(--s4) var(--s3);
  position:relative;
}

.reply-bar {
  display:flex; align-items:center; gap:var(--s2);
  padding:8px 12px;
  background:var(--bg-3);
  border:1px solid var(--b-accent);
  border-radius:var(--r-lg); border-bottom-left-radius:0; border-bottom-right-radius:0;
  margin-bottom:4px; animation:fadeInUp .15s ease;
}
.reply-bar.hidden { display:none; }
.reply-bar-info   { flex:1; overflow:hidden; }
.reply-bar-author { font-size:12px; font-weight:700; color:var(--accent-glow); }
.reply-bar-text   { font-size:12px; color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.input-row { display:flex; align-items:flex-end; gap:var(--s2); }

.input-wrap {
  flex:1; display:flex; align-items:flex-end;
  background:var(--bg-3);
  border:1.5px solid var(--b2);
  border-radius:var(--r-2xl);
  padding:10px 16px; gap:var(--s2);
  transition:all var(--t-mid);
}
.input-wrap:focus-within {
  border-color:var(--bfocus);
  background:var(--bg-4);
  box-shadow:0 0 0 3px rgba(124,58,237,.1);
}

.input-attach { color:var(--t2); font-size:18px; cursor:pointer; margin-bottom:2px; flex-shrink:0; transition:all var(--t-fast); }
.input-attach:hover { color:var(--t-accent); transform:scale(1.1); }
.input-text {
  flex:1; background:none; resize:none; outline:none;
  font-size:15px; color:var(--t1); caret-color:var(--accent-glow);
  max-height:140px; min-height:22px; line-height:1.5; padding:0;
}
.input-text::placeholder { color:var(--t3); }
.input-emoji { color:var(--t2); font-size:18px; cursor:pointer; margin-bottom:2px; flex-shrink:0; transition:all var(--t-fast); }
.input-emoji:hover { color:var(--t-accent); transform:scale(1.1); }

.send-btn {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--grad-brand); color:#fff; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
  box-shadow:var(--glow-md);
  transition:all var(--t-spring); position:relative;
}
.send-btn:hover  { transform:scale(1.08) rotate(-5deg); box-shadow:var(--glow-lg); }
.send-btn:active { transform:scale(.95); }
.send-btn:disabled { opacity:.3; cursor:default; transform:none; box-shadow:none; }

.typing-bar {
  min-height:20px; padding:0 var(--s1);
  font-size:12px; color:var(--t3); font-style:italic;
  display:flex; align-items:center; gap:6px; margin-top:4px;
}

/* ── ATTACH MENU ────────────────────────────────────────── */
.attach-menu {
  position:absolute; bottom:calc(100% + 8px); left:var(--s4);
  background:var(--bg-3); border:1px solid var(--b2);
  border-radius:var(--r-xl); padding:var(--s2);
  display:flex; gap:var(--s2);
  box-shadow:var(--shadow-lg); animation:fadeInUp .2s ease;
  z-index:var(--z2);
}
.attach-menu.hidden { display:none; }
.attach-opt {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:var(--s2) var(--s3);
  cursor:pointer; border-radius:var(--r-lg); transition:all var(--t-fast);
}
.attach-opt:hover { background:var(--bg-4); transform:translateY(-2px); }
.attach-opt-icon {
  width:46px; height:46px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; border:1px solid var(--b2); background:var(--bg-2);
  transition:all var(--t-fast);
}
.attach-opt:hover .attach-opt-icon { border-color:var(--accent); box-shadow:var(--glow-xs); }
.attach-opt-label { font-size:12px; color:var(--t2); font-weight:500; }

/* ── SCROLL BTN ─────────────────────────────────────────── */
.scroll-btn {
  position:absolute; bottom:calc(var(--topbar-h) + var(--s3)); right:var(--s4);
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-3); border:1px solid var(--b2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; color:var(--t2);
  box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(8px) scale(.9);
  transition:all var(--t-spring); z-index:var(--z1);
}
.scroll-btn.visible { opacity:1; transform:none; }
.scroll-btn:hover { border-color:var(--accent); color:var(--t-accent); box-shadow:var(--glow-xs); }

/* ── LIGHTBOX ───────────────────────────────────────────── */
.lightbox {
  position:fixed; inset:0;
  background:rgba(8,8,26,.97); backdrop-filter:blur(24px);
  z-index:var(--z5); display:flex; align-items:center;
  justify-content:center; animation:fadeIn .2s ease;
}
.lightbox.hidden { display:none; }
.lightbox-close {
  position:absolute; top:var(--s4); right:var(--s4);
  width:40px; height:40px; border-radius:var(--r-md);
  background:var(--bg-3); border:1px solid var(--b2);
  color:var(--t1); font-size:18px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--t-fast);
}
.lightbox-close:hover { background:var(--bg-4); box-shadow:var(--glow-xs); }
.lightbox-img {
  max-width:90vw; max-height:90vh; object-fit:contain;
  border-radius:var(--r-xl); box-shadow:var(--shadow-xl);
  animation:scaleIn .25s var(--t-spring);
}

/* ═══════════════════════════════════════════════════════════
   CHAT SHELL — fix height full page
   ═══════════════════════════════════════════════════════════ */
.chat-shell {
  display:flex; flex-direction:column;
  flex:1; height:100%; min-height:0; width:100%;
  overflow:hidden; position:relative;
  background:var(--bg-base);
}

/* ═══════════════════════════════════════════════════════════
   CHAT INFO PANEL — drawer lateral
   ═══════════════════════════════════════════════════════════ */
.cip {
  position:absolute; inset:0;
  z-index:var(--z3);
  pointer-events:none;
}
.cip.open { pointer-events:all; }

/* Overlay */
.cip-overlay {
  position:absolute; inset:0;
  background:rgba(8,8,26,.7);
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity var(--t-mid);
}
.cip.open .cip-overlay { opacity:1; }

/* Drawer */
.cip-drawer {
  position:absolute; top:0; right:0; bottom:0;
  width:340px; max-width:100%;
  background:var(--bg-2);
  border-left:1px solid var(--b2);
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateX(100%);
  transition:transform var(--t-spring);
  box-shadow:var(--shadow-xl);
}
.cip.open .cip-drawer { transform:translateX(0); }

/* Drawer header */
.cip-header {
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--b2);
  background:var(--bg-1); flex-shrink:0;
  height:var(--topbar-h);
}
.cip-header-title {
  font-size:15px; font-weight:700; flex:1; color:var(--t1);
}

/* Cover */
.cip-cover {
  height:110px; position:relative; overflow:hidden; flex-shrink:0;
}
.cip-cover img {
  width:100%; height:100%; object-fit:cover;
}
.cip-cover-fade {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 30%, var(--bg-2) 100%);
}

/* Avatar row */
.cip-avatar-row {
  display:flex; align-items:flex-end; gap:var(--s3);
  padding:0 var(--s4) var(--s3);
  margin-top:-38px; /* avatar floating over cover */
  flex-shrink:0; position:relative; z-index:1;
}
.cip-avatar {
  width:76px; height:76px; border-radius:50%;
  border:3px solid var(--bg-2);
  background:linear-gradient(135deg,var(--bg-3),var(--bg-4));
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; color:var(--t-accent);
  overflow:hidden; flex-shrink:0;
  box-shadow:0 4px 20px rgba(0,0,0,.5), var(--glow-xs);
}
.cip-avatar img { width:100%; height:100%; object-fit:cover; }
.cip-user-info  { flex:1; overflow:hidden; padding-bottom:var(--s1); }
.cip-name       { font-size:16px; font-weight:800; color:var(--t1); letter-spacing:-.3px; }
.cip-username   { font-size:13px; color:var(--t3); margin-top:2px; }
.cip-desc       { font-size:13px; color:var(--t2); margin-top:3px; line-height:1.5; }
.cip-status {
  font-size:12px; color:var(--t3); font-weight:600;
  display:flex; align-items:center; gap:5px; margin-top:4px;
}
.cip-status.online { color:var(--green); }

/* Body */
.cip-body {
  flex:1; overflow-y:auto;
  padding:var(--s2) var(--s2) var(--s5);
}

.cip-section { margin-bottom:var(--s1); }
.cip-section-title {
  font-size:12px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.7px;
  padding:var(--s2) var(--s3) var(--s1);
  display:flex; align-items:center; gap:6px;
}

.cip-sep { height:1px; background:var(--b2); margin:var(--s2) var(--s3); }

/* Items */
.cip-item {
  display:flex; align-items:center; gap:var(--s2);
  padding:10px var(--s3);
  border-radius:var(--r-lg);
  font-size:14px; font-weight:500; color:var(--t2);
  cursor:pointer; border:none; background:none;
  width:100%; text-align:left;
  transition:all var(--t-fast);
}
.cip-item:hover { background:var(--bg-hover); color:var(--t1); }
.cip-item-icon {
  width:34px; height:34px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--t-accent); flex-shrink:0;
}
.cip-item-label { flex:1; }
.cip-item-arrow { color:var(--t3); font-size:11px; }

/* Media tabs */
.cip-media-tabs {
  display:flex; gap:4px; padding:0 var(--s3) var(--s2);
  overflow-x:auto;
}
.cip-media-tab {
  display:flex; align-items:center; gap:5px;
  padding:6px 12px;
  border-radius:var(--r-full);
  font-size:12px; font-weight:600; color:var(--t2);
  background:var(--bg-3); border:1px solid var(--b2);
  cursor:pointer; white-space:nowrap; transition:all var(--t-fast);
}
.cip-media-tab:hover { color:var(--t1); border-color:var(--b3); }
.cip-media-tab.active {
  background:var(--accent-soft); color:var(--accent-glow);
  border-color:var(--b-accent); box-shadow:var(--glow-xs);
}

/* Media grid */
.cip-media-grid { padding:0 var(--s2); }

.cip-img-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  border-radius:var(--r-md); overflow:hidden;
}
.cip-img-thumb {
  aspect-ratio:1; overflow:hidden; cursor:pointer;
  background:var(--bg-3);
}
.cip-img-thumb img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-mid);
}
.cip-img-thumb:hover img { transform:scale(1.08); }

.cip-file-list { display:flex; flex-direction:column; gap:2px; }
.cip-file-item {
  display:flex; align-items:center; gap:var(--s2);
  padding:10px var(--s3); border-radius:var(--r-lg);
  text-decoration:none; color:var(--t1);
  transition:background var(--t-fast);
}
.cip-file-item:hover { background:var(--bg-hover); }
.cip-file-icon {
  width:36px; height:36px; border-radius:var(--r-md);
  background:var(--bg-3); border:1px solid var(--b2);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--t-accent); flex-shrink:0;
}
.cip-file-info  { flex:1; overflow:hidden; }
.cip-file-name  { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cip-file-time  { font-size:11px; color:var(--t3); margin-top:2px; }
.cip-file-dl    { color:var(--t3); font-size:12px; transition:color var(--t-fast); }
.cip-file-item:hover .cip-file-dl { color:var(--t-accent); }

/* Mobile */
@media(max-width:600px) {
  .cip-drawer { width:100%; border-left:none; }
}

/* ═══════════════════════════════════════════════════════════
   BLOCK BANNER + SEARCH BAR + SEARCH HIGHLIGHT
   ═══════════════════════════════════════════════════════════ */

/* Block banner */
.block-banner {
  display:flex; align-items:center; gap:var(--s2);
  padding:10px var(--s4);
  font-size:13px; font-weight:500;
  flex-shrink:0; border-bottom:1px solid;
  animation:fadeInDown .2s ease;
}
.block-banner.hidden { display:none; }

.block-banner--mine {
  background:rgba(124,58,237,.08);
  border-color:rgba(124,58,237,.2);
  color:var(--accent-glow);
}
.block-banner--mine i { color:var(--accent-glow); }

.block-banner--them {
  background:rgba(248,113,113,.07);
  border-color:rgba(248,113,113,.2);
  color:var(--red);
}
.block-banner--them i { color:var(--red); }

.block-banner-btn {
  margin-left:auto; padding:5px 12px;
  background:rgba(124,58,237,.15);
  border:1px solid var(--b-accent);
  border-radius:var(--r-full);
  font-size:12px; font-weight:700;
  color:var(--accent-glow); cursor:pointer;
  transition:all var(--t-fast); flex-shrink:0;
}
.block-banner-btn:hover { background:var(--accent-soft); box-shadow:var(--glow-xs); }

/* Chat search bar */
.chat-search-bar {
  display:flex; align-items:center; gap:var(--s2);
  padding:8px var(--s4);
  background:var(--bg-2);
  border-bottom:1px solid var(--b2);
  flex-shrink:0;
  animation:fadeInDown .2s ease;
}
.chat-search-bar.hidden { display:none; }

.chat-search-bar input {
  flex:1; font-size:14px; color:var(--t1);
  background:none; outline:none; border:none;
  caret-color:var(--accent-glow);
}
.chat-search-bar input::placeholder { color:var(--t3); }

.chat-search-cnt {
  font-size:12px; font-weight:600; color:var(--t3);
  white-space:nowrap; padding:0 var(--s2);
  min-width:60px; text-align:center;
}

/* Message highlight from search */
.msg-bubble.search-highlight {
  outline:2px solid rgba(124,58,237,.3);
  outline-offset:2px;
}
.msg-bubble.search-current {
  outline:2px solid var(--accent-glow) !important;
  outline-offset:2px;
  box-shadow:var(--glow-sm) !important;
}

/* ═══════════════════════════════════════════════════════════
   UPLOAD PREVIEW PANEL
   ═══════════════════════════════════════════════════════════ */
.upload-preview-panel {
  position:relative;
  background:var(--bg-2);
  border-top:1px solid var(--b2);
  border-bottom:1px solid var(--b2);
  flex-shrink:0;
  overflow:hidden;
  /* Animatie slide-up */
  max-height:0; opacity:0;
  transition:max-height .25s var(--t-spring), opacity .2s ease;
}
.upload-preview-panel.visible {
  max-height:380px; opacity:1;
}
.upload-preview-panel.done {
  max-height:0; opacity:0;
  transition:max-height .2s ease, opacity .15s ease;
}
.upload-preview-panel.error .up-progress-fill {
  background:var(--red) !important;
}

/* Preview row */
.up-preview {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4) var(--s2);
}

/* Image preview */
.up-img-wrap {
  width:72px; height:72px; border-radius:var(--r-lg);
  overflow:hidden; flex-shrink:0;
  background:var(--bg-3); border:1px solid var(--b2);
  position:relative;
}
.up-img-wrap img {
  width:100%; height:100%; object-fit:cover;
}

/* File icon for non-images */
.up-file-icon {
  width:60px; height:60px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; flex-shrink:0;
  border:1px solid var(--b2);
}
.up-file-icon--video    { background:rgba(239,68,68,.12);   color:#f87171; }
.up-file-icon--audio    { background:rgba(168,85,247,.12);  color:#c084fc; }
.up-file-icon--document { background:rgba(245,158,11,.12);  color:#fbbf24; }

/* File meta */
.up-file-meta { flex:1; overflow:hidden; }
.up-file-name {
  font-size:14px; font-weight:600; color:var(--t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  margin-bottom:4px;
}
.up-file-size { font-size:12px; color:var(--t3); }

/* Close button */
.up-close { color:var(--t3); flex-shrink:0; }
.up-close:hover { color:var(--red); background:var(--red-soft); }

/* Progress bar */
.up-progress {
  display:flex; align-items:center; gap:var(--s2);
  padding:0 var(--s4) var(--s2);
  animation:fadeIn .15s ease;
}
.up-progress.hidden { display:none; }
.up-progress-track {
  flex:1; height:4px; background:var(--b2);
  border-radius:var(--r-full); overflow:hidden;
}
.up-progress-fill {
  height:100%; background:var(--grad-h);
  border-radius:var(--r-full);
  transition:width .15s ease;
  min-width:4px;
}
.up-progress-pct {
  font-size:12px; font-weight:700; color:var(--t-accent);
  width:38px; text-align:right; flex-shrink:0;
}

/* Actions row (caption + send) */
.up-actions {
  display:flex; align-items:flex-end; gap:var(--s2);
  padding:0 var(--s4) var(--s3);
  border-top:1px solid var(--b1);
  padding-top:var(--s2);
}

/* ═══════════════════════════════════════════════════════════
   BOT CONVERSATION
   ═══════════════════════════════════════════════════════════ */

/* Conv item pinned bot */
.conv-item--bot {
  background:linear-gradient(90deg, rgba(124,58,237,.08), transparent) !important;
  border-left:3px solid var(--accent) !important;
}
.conv-item--bot .conv-item-name {
  background:var(--grad-h);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Separator vizual */
.conv-bot-separator {
  display:flex; align-items:center; gap:var(--s2);
  padding:6px var(--s4);
  font-size:10px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.8px;
}
.conv-bot-separator::before,
.conv-bot-separator::after {
  content:''; flex:1; height:1px; background:var(--b2);
}

/* Bot typing indicator row */
.bot-typing-row { animation:msgIn .2s ease; }

/* Feedback row */
.bot-feedback-row {
  display:flex; align-items:center; gap:var(--s2);
  padding:6px var(--s4) 6px 54px;
  animation:fadeInUp .2s ease;
}
.bot-feedback-label {
  font-size:12px; color:var(--t3); font-weight:500;
}
.bot-fb-btn {
  display:flex; align-items:center; gap:5px;
  padding:5px 12px;
  border-radius:var(--r-full);
  font-size:12px; font-weight:600;
  cursor:pointer; border:1px solid var(--b2);
  background:var(--bg-3); color:var(--t2);
  transition:all var(--t-fast);
}
.bot-fb-yes:hover { background:rgba(34,197,94,.12); color:var(--green); border-color:rgba(34,197,94,.3); }
.bot-fb-no:hover  { background:var(--red-soft); color:var(--red); border-color:rgba(248,113,113,.3); }
.bot-feedback-thanks {
  font-size:12px; color:var(--green); font-weight:600;
  display:flex; align-items:center; gap:5px;
}

/* ── Mobile Chat Fixes ──────────────────────────────────── */
@media(max-width:768px) {
  .chat-shell {
    /* Use dvh for dynamic viewport on mobile browsers */
    height:100dvh;
  }

  /* Chat topbar */
  .chat-topbar { height:54px; padding:0 var(--s2); gap:6px; }
  .chat-topbar-name { font-size:14px; }
  .chat-topbar-status { font-size:11px; }

  /* Messages */
  .chat-messages { padding:var(--s2) var(--s2); }

  /* Input area - stays above keyboard */
  .chat-input-area {
    padding:var(--s2) var(--s2);
    /* Prevent layout shift when keyboard opens */
    position:sticky; bottom:0;
    background:var(--bg-1);
  }

  /* Upload preview */
  .upload-preview-panel { max-height:280px; }
  .up-img-wrap { width:56px; height:56px; }

  /* Info panel */
  .cip-drawer { width:100%; border-radius:var(--r-2xl) var(--r-2xl) 0 0; top:auto; max-height:92vh; }
  .cip-body { padding-bottom:env(safe-area-inset-bottom, 20px); }

  /* Scroll button */
  .scroll-btn { right:var(--s2); bottom:72px; }

  /* Attach menu */
  .attach-menu { left:var(--s2); }

  /* Typing bar */
  .typing-bar { padding:0 var(--s2); font-size:11px; }
}

@media(max-width:480px) {
  .msg-bubble { font-size:14px; padding:8px 12px; }
  .chat-topbar { height:50px; }
  .send-btn { width:38px; height:38px; font-size:15px; }
  .input-text { font-size:14px; }
}