/* BhenguChats — Complete CSS (themes, roles, UI) */

/* THEME ROOTS */
:root{
  --bg:#f6fbff;
  --panel:#ffffff;
  --muted:#6b7280;
  --accent:#25A9FF;
  --accent-2:#60B8FF;
  --radius:12px;
  --shadow:0 10px 30px rgba(2,6,23,0.06);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

/* WhatsApp green */
[data-theme="whatsapp"]{
  --accent:#128C7E; --accent-2:#2FCFAD; --bg:#eefdf9;
}

/* Military */
[data-theme="military"]{
  --accent:#3b5a38; --accent-2:#6fa06f; --bg:#eef6ee; --panel:#f6faf6;
}

/* Navy */
[data-theme="navy"]{
  --accent:#0b3b66; --accent-2:#2a5f9e; --bg:#f2f6fb; --panel:#fbfdff;
}

/* dark */
[data-theme="dark"]{
  --bg:#07121a; --panel:#0b1720; --muted:#9aa4b2; --accent:#4fa3ff; --accent-2:#74b9ff;
}

/* RESET & BASE */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#072129;-webkit-font-smoothing:antialiased}
.hidden{display:none}
.small{font-size:12px}
.muted{color:var(--muted)}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:0;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.ghost{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px;border-radius:8px;cursor:pointer}
.badge{background:#ff3b30;color:#fff;padding:2px 6px;border-radius:999px;font-size:12px;margin-left:6px}

/* topbar */
.topbar{position:fixed;top:0;left:0;right:0;padding:10px 14px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;z-index:60;box-shadow:var(--shadow)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.app-logo{width:44px;height:44px;border-radius:10px;background:#fff;color:var(--accent);display:grid;place-items:center;font-weight:800}
.app-title-area{display:flex;flex-direction:column}
.app-title{font-weight:800}
.top-actions{display:flex;gap:8px;align-items:center}

/* tabs */
.top-tabs{display:flex;gap:8px;margin-top:10px;overflow:auto}
.top-tab{background:transparent;border:0;color:rgba(255,255,255,0.95);padding:8px 12px;border-radius:8px;font-weight:700;border-bottom:3px solid transparent}
.top-tab.active{background:rgba(255,255,255,0.06);border-bottom-color:rgba(255,255,255,0.95)}

/* layout */
.app{display:flex;gap:12px;padding:92px 12px 92px;height:calc(100vh - 92px);overflow:hidden}
.left-sidebar{width:300px;min-width:220px;background:var(--panel);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.sidebar-header{display:flex;justify-content:space-between;align-items:center}
.role-filter-wrap select{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06)}
.search input{width:100%;padding:8px;border-radius:10px;border:1px solid rgba(0,0,0,0.06)}
.contact-list{overflow:auto;padding-right:6px}

/* contact item */
.contact-item{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:10px;border:1px solid rgba(0,0,0,0.04);background:var(--panel);gap:8px;margin-bottom:8px;cursor:pointer}
.contact-left{display:flex;gap:10px;align-items:center}
.contact-avatar{width:46px;height:46px;border-radius:10px;background:#e9f7ff;display:grid;place-items:center;font-weight:800;color:var(--accent)}
.contact-meta .name{font-weight:700}
.contact-meta .small{font-size:12px;color:var(--muted)}
.role-badge{display:inline-block;padding:3px 8px;border-radius:8px;font-size:11px;font-weight:700;color:#fff;margin-top:4px}

/* main */
.main-area{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden}

/* chat layout */
.chat-layout{display:flex;gap:12px;height:100%}
.chat-left{flex:1;display:flex;flex-direction:column;background:var(--panel);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);min-width:0}
.chat-header-compact{display:flex;flex-direction:column;margin-bottom:8px}
.chat-name{font-weight:800}
.chat-sub{font-size:13px}

/* messages */
.messages{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.02));border-radius:10px}
.messages.empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-style:italic}
.message{max-width:76%;padding:10px;border-radius:14px;box-shadow:0 6px 16px rgba(11,34,51,0.04);position:relative;word-wrap:break-word}
.message.in{align-self:flex-start;background:#fff}
.message.out{align-self:flex-end;background:#dff4ff}
.message .meta{font-size:12px;color:var(--muted);margin-bottom:6px}
.message img{max-width:220px;border-radius:8px;margin-top:8px}
.message .time{font-size:11px;color:var(--muted);position:absolute;right:8px;bottom:6px}

/* composer */
.composer{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(0,0,0,0.04);align-items:center;background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent)}
.composer input[type="text"]{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,0.06)}

/* chat right */
.chat-right{width:360px;min-width:260px;display:flex;flex-direction:column;gap:12px}
.panel{background:var(--panel);padding:12px;border-radius:10px;box-shadow:var(--shadow)}
.quick-row{display:flex;gap:8px;flex-wrap:wrap}
.quick{flex:1;padding:8px;border-radius:8px;background:var(--accent);color:#fff;border:0;cursor:pointer}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stat{background:linear-gradient(180deg,#fff,#fbfdff);padding:8px;border-radius:8px;text-align:center}
.stat .label{color:var(--muted);font-size:13px}
.stat .value{font-weight:800;color:var(--accent)}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
.timeline .item{padding:8px;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(0,0,0,0.04)}

/* records preview */
.record-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.record-photos img{width:90px;border-radius:8px;box-shadow:var(--shadow)}
.record-item{background:var(--panel);padding:10px;border-radius:10px;box-shadow:var(--shadow);margin-bottom:10px}
.record-item .title{font-weight:700}
.record-item .time{font-size:12px;color:var(--muted)}

/* modal */
.modal{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.45);display:grid;place-items:center;z-index:200}
.modal.hidden{display:none}
.modal-content{background:var(--panel);padding:14px;border-radius:10px;min-width:320px;box-shadow:0 12px 30px rgba(0,0,0,0.2)}

/* toast */
.toast{position:fixed;right:18px;bottom:120px;min-width:220px;padding:10px 14px;border-radius:10px;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,0.16);background:rgba(0,0,0,0.85);color:#fff}

/* responsive */
@media(max-width:1000px){
  .chat-right{display:none}
  .left-sidebar{display:none}
  .app{padding:120px 8px 120px}
  .bottom-bar{left:8px;right:8px}
}