/* ══════════════════════════════════════════════════════════════
   custom.css — ChatsGenZ site-specific overrides
   LAST file loaded — highest CSS priority
   Yahan koi bhi override likho jo baaki CSS ke upar apply ho
   ══════════════════════════════════════════════════════════════ */

/* ── Core React fixes ── */
#root { width:100%; height:100%; }

/* ── Scrollbar (already in main.css but ensure React pages get it) ── */
* { scrollbar-width:thin; scrollbar-color:rgba(136,136,136,.3) transparent; }
*::-webkit-scrollbar { width:5px; height:5px; background:transparent; }
*::-webkit-scrollbar-track { background:transparent !important; }
*::-webkit-scrollbar-thumb { background-color:rgba(136,136,136,.4); border-radius:4px; }

/* ── Fix: React input/textarea border reset ── */
input, textarea, select { transition:border 0.2s, background-color 0.2s; }
input:focus, textarea:focus, select:focus { outline:0; }

/* ── React modal body lock ── */
body.modal_open { overflow:hidden; }

/* ── Full height for chat layout ── */
html, body, #root { height:100%; }
.chat_page_wrap { height:100%; min-height:100vh; }
#global_chat { height:calc(100% - 50px - 36px); } /* minus header minus footer */

/* ── Theme bg image applied via var set in ThemeLoader ── */
/* back_chat::before uses url() from theme CSS directly — no need for var here */
/* This var is backup for components that use inline style */
.back_chat { background-color:var(--chat-bg, #fff); }

/* ── mbubble default (theme CSS overrides this) ── */
.mbubble { background:#f8f8f8; }

/* ── Fix: React avatar_profile ── */
.avatar_profile, .avatar_pstyle { border:2px solid #fff; }

/* ── Active theme indicator ── */
.theme_active { outline:3px solid #03add8; outline-offset:2px; }

/* ── Spinner for React loading states ── */
.react_spinner {
  width:28px; height:28px;
  border:3px solid rgba(3,173,216,.2);
  border-top-color:#03add8;
  border-radius:50%;
  animation:rspin .7s linear infinite;
  margin:0 auto;
}
@keyframes rspin { to { transform:rotate(360deg); } }

/* ── Alert box base style ── */
.alert_box { padding:10px 14px; border-radius:8px; font-size:13px; margin:6px 0; border:1px solid transparent; }

/* ══ ADD YOUR CUSTOM OVERRIDES BELOW THIS LINE ══ */