/* =========================================================
   SkillSutra Connect — WhatsApp-inspired theme
   ========================================================= */
:root{
  --ss-darkx:      #075E54;
  --ss-tealx:     #128C7E;

  --ss-dark:      #052b78;
  --ss-teal:      #ff7927;

  --ss-green:     #25D366;
  --ss-green-lt:  #DCF8C6;
  --ss-blue:      #34B7F1;
  --ss-bg-chat:   rgb(247, 245, 243); /*#F3F1EC;*/
  --ss-bg-panel:  #F7F7F5;
  --ss-text-dark: #111B21;
  --ss-text-muted:#667781;
  --ss-border:    #E9EDEF;
  --ss-danger:    #E53935;
  color-scheme: light; /* stop Android/Chrome "Force Dark" from auto-inverting our colors */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme: light; }
body{
  background:var(--ss-bg-panel);
  color:var(--ss-text-dark);
  font-family:"Segoe UI",Helvetica,Arial,sans-serif;
  overflow:hidden;
  /* Dynamic viewport height keeps the composer above mobile browser chrome
     (address bar / toolbar) that eats into a plain 100vh. Falls back to
     100vh on older browsers that don't support dvh. */
  height:100vh;
  height:100dvh;
}

a{ color:var(--ss-teal); text-decoration:none; }
a:hover{ color:var(--ss-dark); }

.form-label { margin-bottom: .25rem; }

/* ---------- Buttons ---------- */
.btn-ss{
  background:var(--ss-teal); border:none; color:#fff;
  border-radius:8px; padding:.5rem 1.1rem; font-weight:600;
  transition:background .15s ease;
}
.btn-ss:hover{ background:var(--ss-dark); color:#fff; }
.btn-ss-outline{
  background:#fff; border:1.5px solid var(--ss-teal); color:var(--ss-teal);
  border-radius:8px; padding:.45rem 1rem; font-weight:600;
}
.btn-ss-outline:hover{ background:var(--ss-teal); color:#fff; }
.btn-ss-green{ background:var(--ss-green); border:none; color:#03301f; font-weight:700; border-radius:8px; }
.btn-ss-green:hover{ background:#1fb457; color:#03301f; }
.btn-icon{
  width:28px;height:28px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.15);
  border:none;
}
.btn-icon:hover{ backgroundx:rgba(255,255,255,.28); background-color: white; color: var(--ss-dark); }
/* Higher-specificity override: send button (and any other .btn-ss-green.btn-icon)
   must always keep dark, readable icon color on its bright green background —
   .btn-icon alone would otherwise win (equal specificity, later in source) and
   leave a near-invisible white-on-green icon until hovered. */
.btn-ss-green.btn-icon,
.btn-ss-green.btn-icon:hover{ color:#03301f; }

/* ---------- Top App Bar ---------- */
.topbar{
  background:var(--ss-dark); color:#fff; height:46px; /*height:56px;*/
  display:flex; align-items:center; padding:0 14px; gap:12px;
}
.topbar .brand{ font-weight:700; font-size:1.15rem; letter-spacing:.2px; white-space:nowrap; }
.topbar .brand:hover{ color:#fff; opacity:.9; }
.topbar .brand small{ display:block; font-weight:400; font-size:.68rem; opacity:.8; }

/* ---------- Batches / CRM switcher (topbar) ---------- */
.nav-switch{
  display:flex; background:rgba(255,255,255,.14); border-radius:20px; padding:3px;
  margin-left:18px; flex-shrink:0;
}
.nav-switch-item{
  color:rgba(255,255,255,.85); text-decoration:none; font-size:.82rem; font-weight:600;
  padding:5px 14px; border-radius:16px; white-space:nowrap; transition:background .15s;
}
.nav-switch-item:hover{ color:#fff; }
.nav-switch-item.active{ background:#fff; color:var(--ss-dark); }
@media (max-width:600px){
  .nav-switch{ margin-left:8px; }
  .nav-switch-item{ padding:5px 10px; font-size:.76rem; }
}

/* ---------- Layout shell ---------- */
.app-shell{
  height:calc(100vh - 56px);
  height:calc(100dvh - 56px);
  display:flex;
  overflow:hidden;
}
.sidebar-list{
  width:380px; min-width:300px; background:#fff; border-right:1px solid var(--ss-border);
  display:flex; flex-direction:column; height:100%;
}
.main-panel{ flex:1; display:flex; flex-direction:column; 
  background:var(--ss-bg-chat);
  /*background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23000000' fill-opacity='0.015'%3E%3Cpath d='M30 0L0 30l30 30 30-30z'/%3E%3C/g%3E%3C/svg%3E");*/
  min-width:0;
}

@media (max-width: 860px){
  .sidebar-list{ width:100%; min-width:0; }
  .app-shell{ overflow-x:hidden; }
  .app-shell.chat-open .sidebar-list{ display:none !important; }
  .app-shell:not(.chat-open) .main-panel{ display:none !important; }
  .main-panel{ width:100%; }
}

/* ---------- Batch (group) list ---------- */
.search-wrap{ padding:10px; border-bottom:1px solid var(--ss-border); }
.search-wrap input{
  background:var(--ss-bg-panel); border:none; border-radius:20px; padding:.5rem 1rem;
  width:100%; font-size:.92rem;
}
.batch-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer;
  border-bottom:1px solid #f0f0f0; transition:background .1s;
}
.batch-item:hover, .batch-item.active{ background:#f2f2f2; }
.avatar{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.05rem;flex-shrink:0;
}
.avatar.sm{ width:34px;height:34px;font-size:.85rem; }
.batch-item .meta{ flex:1; min-width:0; }
.batch-item .meta .name-row{ display:flex; justify-content:space-between; align-items:baseline; }
.batch-item .meta .bname{ font-weight:600; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.batch-item .meta .btime{ font-size:.72rem; color:var(--ss-text-muted); flex-shrink:0; margin-left:6px; }
.batch-item .meta .preview-row{ display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.batch-item .meta .bpreview{ font-size:.83rem; color:var(--ss-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; }
.unread-badge{
  background:var(--ss-green); color:#03301f; font-weight:700; font-size:.72rem;
  min-width:20px; height:20px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
}
.course-tag{
  font-size:.65rem; font-weight:700; padding:1px 7px; border-radius:10px; color:#fff; display:inline-block; margin-right:6px;
}

/* ---------- Chat header ---------- */
.chat-header{
  background:#fff; border-bottom:1px solid var(--ss-border); height:60px;
  display:flex; align-items:center; padding:0 14px; gap:12px;
}
.chat-header .title{ font-weight:600; }
.chat-header .subtitle{ font-size:.76rem; color:var(--ss-text-muted); }

/* ---------- Message feed ---------- */
.feed{ flex:1; overflow-y:auto; padding:18px 5% 10px; }
.day-sep{ text-align:center; margin:14px 0; }
.day-sep span{ background:#E1F0EC; color:#4d5b58; font-size:.72rem; padding:4px 12px; border-radius:8px; }

/* Auto-generated log entries (e.g. "Converted to Batch") — centered, distinct
   from both day separators and chat bubbles so they read as a system event. */
.system-msg{ text-align:center; margin:10px 0; }
.system-msg span{ background:#FFF3CD; color:#8a6d00; font-size:.74rem; font-weight:600; padding:5px 14px; border-radius:10px; display:inline-block; max-width:90%; }

/* ---------- ToDo list ---------- */
.todo-row{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-bottom:1px solid #f0f0f0; }
.todo-row:last-child{ border-bottom:none; }
.todo-row.todo-done{ background:#fafafa; }
.todo-row.todo-done .link-title{ text-decoration:line-through; opacity:.7; }
.todo-check{ background:none; border:none; padding:0; font-size:1.5rem; color:#c9d0ce; cursor:pointer; flex-shrink:0; line-height:1; margin-top:1px; }
.todo-check.checked{ color:#25D366; }
.todo-check:hover:not(.checked){ color:var(--ss-teal); }
.todo-check:disabled{ opacity:.5; cursor:default; }

.bubble-row{ display:flex; margin-bottom:10px; }
.bubble-row.mine{ justify-content:flex-end; }
.bubble{
  max-width:72%; background:#fff; border-radius:8px; padding:8px 10px 6px; position:relative;
  box-shadow:0 1px .5px rgba(0,0,0,.13);
}
.bubble-row.mine .bubble{ background:var(--ss-green-lt); }
.bubble .sender{ font-size:.78rem; font-weight:700; margin-bottom:2px; }
.bubble .btext{ font-size:.92rem; white-space:pre-wrap; word-break:break-word; }
.bubble .btime{ font-size:.68rem; color:var(--ss-text-muted); text-align:right; margin-top:3px; }
.bubble .bfile{ display:flex; align-items:center; gap:8px; background:#f5f5f5; border-radius:6px; padding:8px; margin-top:4px; }

.badge-type{
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  padding:2px 8px; border-radius:6px; display:inline-flex; align-items:center; gap:4px; margin-bottom:5px;
}
.badge-homework{ background:#FFF3CD; color:#8a6d00; }
.badge-task{ background:#E2E3FF; color:#3730a3; }
.badge-schedule{ background:#D1F0FF; color:#075985; }
.badge-link{ background:#E7F7EC; color:#0f6b34; }
.badge-submission{ background:#DCF8C6; color:#256029; }
.badge-announcement{ background:#FDE2E2; color:#a12626; }

.due-chip{ font-size:.72rem; background:#fff8e1; color:#8a6d00; border:1px solid #ffe1a8; border-radius:6px; padding:2px 8px; display:inline-flex; align-items:center; gap:6px; margin-top:4px; }
.due-chip-done{ background:#e8f7f0; color:#0f6b34; border-color:#bdeed4; cursor:pointer; }
.mark-done-btn{ background:#8a6d00; color:#fff; border:none; border-radius:4px; font-size:.66rem; padding:1px 7px; cursor:pointer; }
.mark-done-btn:hover{ background:#6b5400; }

/* ---------- Composer ---------- */
.composer{ background:#F0F0F0; padding:10px 14px; border-top:1px solid var(--ss-border); }
.composer .type-pills{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.type-pill{
  border:1px solid #cfd8d6; background:#fff; border-radius:16px; padding:3px 12px; font-size:.78rem;
  cursor:pointer; user-select:none;
}
.type-pill.active{ background:var(--ss-teal); color:#fff; border-color:var(--ss-teal); }
.composer textarea{
  border-radius:20px; border:none; padding:.6rem 1rem; resize:none; width:100%; font-size:.92rem;
}
.composer-row{ display:flex; align-items:flex-end; gap:8px; }

/* ---------- Bell / notifications ---------- */
.bell-wrap{ position:relative; }
.bell-dot{
  position:absolute; top:2px; right:2px; background:var(--ss-danger); color:#fff; font-size:.62rem;
  min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.bell-ring{ animation:ring 0.6s ease-in-out 2; }
@keyframes ring{
  0%,100%{ transform:rotate(0); }
  20%{ transform:rotate(18deg); }
  40%{ transform:rotate(-16deg); }
  60%{ transform:rotate(10deg); }
  80%{ transform:rotate(-6deg); }
}
.notif-panel{
  position:absolute; right:0; top:46px; width:340px; max-height:420px; overflow-y:auto;
  background:#fff; color:var(--ss-text-dark); border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.18); z-index:1050;
}
.notif-item{ padding:12px 14px; border-bottom:1px solid #f0f0f0; cursor:pointer; color:var(--ss-text-dark); }
.notif-item:hover{ background:#f7f7f7; }
.notif-item.unread{ background:#f0fbf7; }
.notif-item .n-title{ font-weight:600; font-size:.86rem; color:var(--ss-text-dark); }
.notif-item .n-body{ font-size:.8rem; color:var(--ss-text-muted); }
.notif-item .n-time{ font-size:.7rem; color:#9aa5a2; }

/* ---------- Cards / generic panels ---------- */
.ss-card{ background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.08); padding:1.1rem; }
.stat-card{ border-radius:14px; padding:1.1rem 1.3rem; color:#fff; }

/* ---------- Assessment builder ---------- */
.q-card{ border:1px solid var(--ss-border); border-radius:10px; padding:14px; margin-bottom:12px; background:#fafefd; }
.q-card .q-num{ background:var(--ss-teal); color:#fff; width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700; }

/* ---------- Add Member modal (searchable candidate list) ---------- */
.member-search-row{
  display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:8px;
  margin-bottom:2px; transition:background .1s;
}
.member-search-row:hover{ background:var(--ss-bg-panel); }

/* ---------- New Contact toggle (CRM) — plain CSS, no Bootstrap collapse ----------
   Deliberately NOT using Bootstrap's .collapse component here: combining it with
   responsive display utilities (collapse + d-lg-block) is a known-fragile pattern
   that fought our own toggle JS. This is fully self-contained and predictable:
   hidden by default, shown automatically on desktop widths, toggled by JS on
   narrower ones — no framework state to get out of sync. */
#newContactToggleBtn{ display:block; }
#newContactFormWrap{ display:none; }
@media (min-width: 992px){
  #newContactToggleBtn{ display:none; }
  #newContactFormWrap{ display:block; }
}

/* ---------- Install button (mobile only, injected by JS) ---------- */
#pwaInstallBtn{
  display:none; position:fixed; bottom:18px; right:18px; z-index:1030;
  background:var(--ss-green); color:#03301f; border:none; border-radius:26px;
  padding:.7rem 1.2rem; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.25);
  align-items:center; gap:8px;
}
/* On the chat screen, float above the composer so it never covers the
   attach/send controls that live at the very bottom of the viewport. */
#pwaInstallBtn.above-composer{ bottom:104px; }

/* ---------- Login page ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  /*background:linear-gradient(135deg,var(--ss-dark),var(--ss-teal)); */
  background: linear-gradient(135deg, #c1d5ffb0, #feece0);
  overflow-y:auto; }
.login-card{ background:#fff; border-radius:16px; padding:2.2rem; width:100%; max-width:400px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.demo-chip{ font-size:.72rem; background:var(--ss-bg-panel); border:1px solid var(--ss-border); border-radius:8px; padding:6px 8px; cursor:pointer; }
.demo-chip:hover{ background:#eef7f4; }

/* ---------- Misc ---------- */
.text-ss-teal{ color:var(--ss-teal); }
.link-title{ color:var(--ss-text-dark); text-decoration:none; }
.link-title:hover{ color:var(--ss-teal); text-decoration:underline; }
.badge-role{ font-size:.68rem; padding:2px 8px; border-radius:10px; font-weight:700; }
.scroll-y{ overflow-y:auto; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#c9d0ce; border-radius:4px; }

@media (max-width: 600px){
  /* Anchor to the viewport (not the bell icon) on mobile — the bell isn't the
     rightmost element in the topbar (the avatar dropdown sits after it), so
     position:absolute anchored to it pushed the wide popover off-screen left. */
  .notif-panel{ position:fixed; top:60px; left:4vw; right:4vw; width:auto; max-height:70vh; }
}

@media (max-width: 480px){
  .bubble{ max-width:86%; }
  .chat-header{ padding:0 8px; gap:6px; }
  .chat-header .subtitle{ display:none; }
  .btn-icon{ width:34px; height:34px; flex-shrink:0; }
}