/* ===== Base ===== */
*{ box-sizing:border-box; }
:root{
  --bg:#111b21;
  --panel:#ffffff;
  --panel2:#f7f7f7;
  --line: rgba(0,0,0,.08);
  --muted: rgba(0,0,0,.65);
  --brand:#00a884; /* WhatsApp-ish green */
  --brand2:#0b7b62;
  --bubbleIn:#ffffff;
  --bubbleOut:#d9fdd3;
  --shadow: 0 10px 40px rgba(0,0,0,.10);
}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:#111;
  background:#e9edef;
}
a{ color:inherit; }
.hidden{ display:none !important; }
.muted{ opacity:.75; }
hr{ border:0; border-top:1px solid var(--line); margin:12px 0; }

/* ===== Login page ===== */
.page-center{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.card{
  width:min(420px, 100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
}
.brand{ font-weight:900; font-size:18px; margin-bottom:4px; }
.form{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
label{ font-size:13px; opacity:.8; }
input, textarea, select{
  font:inherit;
  border:1px solid rgba(0,0,0,.14);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  width:100%;
}
textarea{ resize:none; }
.primary{
  border:0;
  background:var(--brand);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.primary.small{ padding:8px 10px; font-weight:800; }
.primary:hover{ filter: brightness(0.98); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.primary:active{ transform: translateY(1px); }
.primary:focus-visible{ outline: 3px solid rgba(0,168,132,.28); outline-offset: 2px; }
.primary:disabled{ opacity:.55; cursor:not-allowed; }
.error{ color:#b00020; margin-top:8px; font-size:13px; }
.hint{ margin-top:12px; font-size:12px; opacity:.75; }

.chip{
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.chip:hover{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.18); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.chip:active{ transform: translateY(1px); }
.chip:focus-visible{ outline: 3px solid rgba(0,0,0,.10); outline-offset: 2px; }
.chip:disabled{ opacity:.55; cursor:not-allowed; }

/* ===== App shell ===== */
.app{ height:100vh; display:flex; flex-direction:column; }
.topbar{
  height:60px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
}
.top-left{ display:flex; gap:10px; align-items:center; }
.logo{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  background: rgba(0,168,132,.12);
}
.title{ font-weight:900; }
.subtitle{ font-size:12px; opacity:.7; }
.top-right{ display:flex; gap:8px; align-items:center; }

.layout{
  flex:1;
  display:grid;
  grid-template-columns: 360px 1fr;
  min-height:0;
}

/* ===== Sidebar ===== */
.sidebar{
  background:#fff;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  min-height:0;
}
.tabs{
  display:flex;
  gap:6px;
  padding:10px;
}
.tab{
  flex:1;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.tab:hover{ background: rgba(0,0,0,.02); }
.tab:active{ transform: translateY(1px); }
.tab.active{
  border-color: rgba(0,168,132,.35);
  background: rgba(0,168,132,.10);
}
.tab-badge{
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: var(--brand);
  color:#fff;
  font-size:11px;
  display:grid;
  place-items:center;
}

.search{ padding:0 10px 10px; }
.search input{ width:100%; border-radius:999px; background: #f0f2f5; border-color: rgba(0,0,0,.08); }
.list{
  overflow:auto;
  padding:6px 6px 10px;
}
.item{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:14px;
  background:#fff;
  margin:6px 4px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.06);
}
.item:hover{ background:#f7f7f7; }
.item.active{ border-color: rgba(0,168,132,.35); background: rgba(0,168,132,.06); }
.item .avatar{
  width:42px; height:42px;
  border-radius:999px;
  display:grid; place-items:center;
  background:#eef2f5;
  flex:0 0 auto;
}
.item-mid{ flex:1; min-width:0; }
.item-top{ display:flex; justify-content:space-between; gap:8px; }
.item-name{ font-weight:900; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-time{ font-size:11px; opacity:.65; flex:0 0 auto; }
.item-sub{ font-size:12px; opacity:.72; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-bottom{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  font-size:11px;
  opacity:.85;
}
.unread{
  margin-left:auto;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: #25d366;
  color:#0b141a;
  font-size:11px;
  font-weight:900;
  display:grid;
  place-items:center;
}

/* ===== Chat ===== */
.chat{
  display:flex;
  flex-direction:column;
  min-height:0;
  background:#efeae2;
  position:relative;
}
.chat::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.25;
  pointer-events:none;
}
.chat-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1;
}
.chat-headbtn{
  border:0;
  background:transparent;
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 8px;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
}
.chat-headbtn:disabled{ cursor:default; opacity:.85; }
.chat-headbtn:not(:disabled):hover{ background:#f0f2f5; }

.avatar{ width:38px; height:38px; border-radius:999px; display:grid; place-items:center; background:#eef2f5; }
.avatar.big{ width:78px; height:78px; font-size:28px; }
.chat-headtext{ display:flex; flex-direction:column; gap:2px; }
.chat-title{ font-weight:950; }
.chat-meta{ font-size:12px; opacity:.7; }
.chat-actions{ display:flex; gap:8px; }

.messages{
  flex:1;
  overflow:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1;
}
.bubble{
  max-width:min(660px, 92%);
  padding:9px 12px;
  border-radius:10px;
  background: var(--bubbleIn);
  align-self:flex-start;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.bubble.me{
  align-self:flex-end;
  background: var(--bubbleOut);
}
.bubble .meta{
  font-size:11px;
  opacity:.6;
  margin-top:6px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.bubble .file{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,.06);
}
.file a{ text-decoration:none; font-weight:900; color: var(--brand2); }
.file small{ opacity:.7; }

.composer{
  display:flex;
  gap:10px;
  align-items:flex-end;
  padding:10px;
  border-top:1px solid var(--line);
  background:#f0f2f5;
  z-index:1;
}
.icon-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  padding:10px;
  border-radius:999px;
}
.icon-btn:hover{ background: rgba(0,0,0,.06); }
.icon-btn.small{ padding:8px; font-size:16px; }
.icon-btn.recording{
  background: rgba(176,0,32,.12);
  color:#b00020;
}
.input-wrap{ flex:1; display:flex; flex-direction:column; gap:8px; }
#msgInput{
  width:100%;
  resize:none;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  outline:none;
  font-size:14px;
  background:#fff;
}
.send-btn{
  border:0;
  background:var(--brand);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
}
.send-btn:disabled{ opacity:.55; cursor:not-allowed; }

.attachments-bar{ display:flex; flex-wrap:wrap; gap:8px; }
.attachment-chip{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  max-width:100%;
}
.attachment-name{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.attachment-meta{ font-size:12px; opacity:.7; }
.attachment-bad{ border-color: rgba(255,0,0,.25); background: rgba(255,0,0,.06); }
.attachment-bad .attachment-meta{ color:#b00020; opacity:1; font-weight:800; }
.attachment-remove{
  border:0; background:transparent; cursor:pointer;
  font-size:14px; padding:2px 6px; border-radius:999px;
}
.attachment-remove:hover{ background: rgba(0,0,0,.06); }

/* ===== Drawer ===== */
.drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  justify-content:flex-end;
  z-index:9998;
}
.drawer{
  width:min(420px, 100vw);
  height:100%;
  background:#fff;
  border-left:1px solid rgba(0,0,0,.12);
  padding:14px;
  overflow:auto;
}
.drawer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.drawer-title{ font-weight:950; }
.drawer-profile{
  margin-top:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.drawer-name{ font-weight:950; font-size:16px; }
.drawer-wa{ opacity:.7; font-size:13px; }
.drawer-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; justify-content:center; }
.drawer-section{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.sec-title{ font-weight:950; margin-bottom:8px; }
.sec-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.note{ width:100%; min-height:110px; }

/* ===== Toast ===== */
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  width:min(420px, calc(100vw - 32px));
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:18px;
  padding:12px 14px;
  box-shadow: var(--shadow);
  z-index:9999;
}
.toast-title{ font-weight:950; margin-bottom:4px; }
.toast-body{ font-size:13px; opacity:.92; line-height:1.35; }

/* ===== Modal ===== */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  z-index:9998;
}
.modal{
  width:min(720px, calc(100vw - 24px));
  background:#fff;
  border-radius:18px;
  padding:14px;
  border:1px solid rgba(0,0,0,.14);
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  max-height: calc(100vh - 24px);
  overflow:auto;
}
.modal.wide{ width:min(1060px, calc(100vw - 24px)); }
.modal-title{ font-weight:950; font-size:16px; margin-bottom:10px; }
.modal-row{ margin:10px 0; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.radio, .check{ display:flex; align-items:center; gap:8px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }

.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.panel{
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:#fff;
}
.panel-title{ font-weight:950; margin-bottom:10px; }
.panel-subtitle{ font-weight:900; opacity:.85; margin:10px 0 6px; }
.panel-body{ margin-bottom:10px; }
.panel-row{ display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.smalllabel{ font-size:12px; opacity:.75; }
.checks{ display:flex; gap:8px; flex-wrap:wrap; }
.checks label{ font-size:12px; display:flex; gap:6px; align-items:center; }
.triage-options{ display:flex; flex-direction:column; gap:8px; }
.triage-opt{
  display:grid;
  grid-template-columns: 60px 1fr 1fr;
  gap:8px;
  align-items:center;
}
.triage-opt input{ border-radius:12px; }
.triage-opt select{ border-radius:12px; }

.transfer-history{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
}
.transfer-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px;
  background:#fff;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .layout{ grid-template-columns: 320px 1fr; }
  .grid2{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ display:none; }
}


/* ===== DigiSac-like tweaks (Sprint 2) ===== */
.topbar-blue{
  background: #2f4b7c;
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.15);
}
.topbar-blue .title{ color:#fff; }
.topbar-blue .subtitle{ color: rgba(255,255,255,.85); }
.topbar-blue .chip{
  background: rgba(255,255,255,.12);
  color:#fff;
  border: 1px solid rgba(255,255,255,.22);
}
.topbar-blue .chip:hover{ background: rgba(255,255,255,.18); }

.digisac-tabs .tab{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
}
.digisac-tabs .tab.active{
  background: #e8f4f1;
  border-color: rgba(0,0,0,.08);
}

.subtabs{
  display:flex;
  gap:8px;
  padding: 10px 12px 0;
}
.subtabs .subtab{
  flex:1;
  padding:10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  cursor:pointer;
  font-weight:600;
}
.subtabs .subtab.active{
  background:#fff;
  border-color: rgba(0,0,0,.10);
}

.badge.mini{
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  font-size:12px;
}

/* Input bar: mic circular right */
.composer{
  display:flex;
  align-items:center;
  gap:10px;
}
.composer .left-actions{ display:flex; align-items:center; gap:8px; }
.composer .right-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn.circle{
  width:40px;
  height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: #2f4b7c;
  color:#fff;
  border:none;
}
.icon-btn.circle:hover{ filter: brightness(1.05); }
.icon-btn.circle.recording{ background:#c0392b; }


/* --- Sprint3 UI polish --- */
.grid2.tight { gap: 10px; }
.actions-row { display:flex; gap:10px; align-items:center; }
.tablebox { border:1px solid rgba(0,0,0,0.08); border-radius:12px; overflow:hidden; background:#fff; }
.tablebox table { width:100%; border-collapse:collapse; font-size:13px; }
.tablebox th, .tablebox td { padding:10px 12px; border-bottom:1px solid rgba(0,0,0,0.06); text-align:left; }
.tablebox th { background: rgba(19,41,74,0.06); font-weight:700; color:#1a2a44; }
.tablebox tr:last-child td { border-bottom:none; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:12px; background:rgba(19,41,74,0.08); color:#1a2a44; }
.badge.off { background: rgba(0,0,0,0.06); color:#444; }
.badge.ok { background: rgba(0,128,0,0.10); color:#0d5a24; }
.badge.warn { background: rgba(255,165,0,0.14); color:#7a4a00; }
.btn-mini { padding:6px 10px; border-radius:10px; font-size:12px; border:1px solid rgba(0,0,0,0.12); background:#fff; cursor:pointer; }
.btn-mini.danger { background: rgba(255,0,0,0.06); }
.btn-mini.primary { background: rgba(0,128,0,0.10); border-color: rgba(0,128,0,0.25); }
.cardsoft { border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:12px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92)); box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
.cardsoft-title { font-weight:800; margin-bottom:10px; color:#1a2a44; }
.dashlist { display:flex; flex-direction:column; gap:10px; }
.dashitem { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:14px; border:1px solid rgba(0,0,0,0.08); background:#fff; }
.dashitem .left { display:flex; flex-direction:column; gap:4px; }
.dashitem .title { font-weight:800; color:#1a2a44; }
.dashitem .meta { display:flex; gap:8px; flex-wrap:wrap; }
.dashitem .right { display:flex; gap:8px; align-items:center; }
.hint { font-size:12px; color:#42526e; line-height:1.35; }
.small { font-size:12px; }