/* ASEE live chat (website portal and admin). Works with both colour sets: every colour has a fallback. */
.chat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#D5E3F0);border-radius:18px;box-shadow:0 8px 24px rgba(11,26,58,.08);overflow:hidden;height:min(72vh,680px);min-height:420px;position:relative}
.chat-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line,#D5E3F0);background:#FAFCFF}
.chat-avatar{width:40px;height:40px;border-radius:50%;background:var(--navy,#0B1A3A);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.chat-title{font-weight:800;line-height:1.2}
.chat-status{font-size:13px;color:var(--muted,#4A5D78)}
.chat-status.on{color:#0B6B3A}
.chat-status.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#2BBE6B;margin-right:6px}
.chat-head .grow{flex:1;min-width:0}
.chat-tool{background:transparent;border:0;font-size:20px;cursor:pointer;padding:4px 8px;border-radius:8px}
.chat-tool:hover{background:#EEF3F9}
.chat-list{flex:1;overflow-y:auto;padding:14px 16px;background:#F4F8FC;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.chat-day{align-self:center;background:#E3EAF3;color:var(--muted,#4A5D78);font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;margin:8px 0}
.chat-row{display:flex}
.chat-row.me{justify-content:flex-end}
.chat-bubble{max-width:min(78%,520px);padding:9px 13px;border-radius:16px;background:#fff;border:1px solid #E3EAF3;word-wrap:break-word;overflow-wrap:anywhere}
.chat-row.me .chat-bubble{background:#DCEBFF;border-color:#C5DBFA;border-bottom-right-radius:5px}
.chat-row.them .chat-bubble{border-bottom-left-radius:5px}
.chat-bubble.sending{opacity:.6}
.chat-bubble.failed{background:#FDE8E8;border-color:#F3B6B6;cursor:pointer}
.chat-who{display:block;font-size:12px;color:var(--accent-d,#0A7BA6);margin-bottom:2px}
.chat-text a{color:#1A56C4}
.chat-img{display:block;max-width:240px;max-height:240px;border-radius:12px;margin-bottom:4px;background:#EAF1F8}
.chat-meta{font-size:11.5px;color:var(--muted,#4A5D78);text-align:right;margin-top:3px}
.chat-ticks{letter-spacing:-2px;font-weight:800;margin-left:2px}
.chat-ticks.read{color:#1A8CFF}
.chat-typing{padding:0 16px 8px;background:#F4F8FC;font-size:13px;color:var(--muted,#4A5D78);min-height:0}
.chat-typing[hidden]{display:none}
.chat-dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.chat-dots i{width:6px;height:6px;border-radius:50%;background:#8AA0BD;animation:chatDot 1.1s infinite ease-in-out}
.chat-dots i:nth-child(2){animation-delay:.15s}.chat-dots i:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}
.chat-pill{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;background:var(--navy,#0B1A3A);color:#fff;border:0;border-radius:999px;padding:7px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:2}
.chat-pill[hidden]{display:none}
.chat-compose{border-top:1px solid var(--line,#D5E3F0);padding:10px 12px;background:#fff;position:relative}
.chat-attach{display:inline-block;position:relative;margin:0 0 8px}
.chat-attach[hidden]{display:none}
.chat-attach img{width:84px;height:84px;object-fit:cover;border-radius:12px;display:block}
.chat-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:0;background:#0B1A3A;color:#fff;cursor:pointer;line-height:24px;padding:0}
.chat-emojis{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--line,#D5E3F0);border-radius:12px;background:#fff;margin-bottom:8px}
.chat-emojis[hidden]{display:none}
.chat-emojis button{border:0;background:transparent;font-size:22px;cursor:pointer;border-radius:8px;padding:2px 6px}
.chat-emojis button:hover{background:#EEF3F9}
.chat-bar{display:flex;gap:8px;align-items:flex-end}
.chat-bar textarea{flex:1;resize:none;font:inherit;padding:10px 14px;border:1px solid #C3D2E5;border-radius:14px;min-height:44px;max-height:140px;line-height:1.4;margin:0}
.chat-bar textarea:focus{outline:none;border-color:#1A56C4;box-shadow:0 0 0 4px rgba(26,86,196,.14)}
.chat-icon{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid #C3D2E5;background:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center}
.chat-icon:hover{background:#EEF3F9}
.chat-send{flex:none;height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--orange,#F5A623);color:#0B1A3A;font:inherit;font-weight:800;cursor:pointer}
.chat-hint{font-size:12px;color:var(--muted,#4A5D78);margin:6px 4px 0}
.chat-badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:#E5484D;color:#fff;font-size:12px;font-weight:800;line-height:20px;text-align:center;margin-left:6px}
.chat-badge[hidden]{display:none}
@media (max-width:600px){.chat-card{height:calc(100vh - 150px);border-radius:14px}.chat-bubble{max-width:88%}}
@media (prefers-reduced-motion:reduce){.chat-dots i{animation:none}.chat-list{scroll-behavior:auto}}

/* ---- shared documents, big picture viewer, drop target ---- */
.chat-file{display:flex;align-items:center;gap:10px;min-width:210px;max-width:320px;padding:8px 10px;margin-bottom:4px;border:1px solid #D3DEEC;border-radius:12px;background:#fff;color:inherit;text-decoration:none}
.chat-file:hover{border-color:#2563EB}
.chat-file-ic{flex:none;width:42px;height:42px;border-radius:10px;color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.chat-file-info{display:flex;flex-direction:column;min-width:0}
.chat-file-info b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-file-info small{color:#6B7C93;font-size:12px}
.chat-attach .chat-file{margin:0;padding-right:34px}
.chat-viewer{position:fixed;inset:0;z-index:200;background:rgba(5,12,26,.92);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.chat-viewer img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:8px;cursor:default}
.chat-viewer-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.chat-card.chat-drop,.chat-drop{outline:3px dashed #F5A623;outline-offset:-6px;background:#FFFBEF}

/* ---- compact, nicer chat (Messages page and the pop-up) ---- */
.chat-card.compact{max-width:720px;margin:0 auto;height:min(66vh,600px);min-height:380px;border:0;border-radius:22px;box-shadow:0 18px 50px rgba(11,31,58,.16)}
.chat-card.compact .chat-head{background:linear-gradient(135deg,#0B1F3A,#1D4D8A);border:0;color:#fff;padding:13px 16px}
.chat-card.compact .chat-avatar{background:#fff;color:#0B1F3A;width:44px;height:44px}
.chat-card.compact .chat-title{color:#fff}
.chat-card.compact .chat-status{color:#C7D8EE}
.chat-card.compact .chat-status.on{color:#8FF0B8}
.chat-card.compact .chat-tool,.chat-card.compact .chat-hl{color:#fff;font-size:15px}
.chat-card.compact .chat-tool:hover{background:rgba(255,255,255,.16)}
.chat-hl{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;text-decoration:none;background:transparent;border:0;cursor:pointer}
.chat-hl:hover{background:rgba(255,255,255,.16)}
.chat-card.compact .chat-list{background-color:#EEF3FA;background-image:radial-gradient(#DCE6F3 1px,transparent 1px);background-size:18px 18px;padding:14px 14px}
.chat-card.compact .chat-typing{background:transparent}
.chat-card.compact .chat-bubble{font-size:14.5px;max-width:84%;box-shadow:0 1px 2px rgba(11,31,58,.08)}
.chat-card.compact .chat-row.me .chat-bubble{background:linear-gradient(135deg,#2F6BF0,#1D4ED8);color:#fff;border:0}
.chat-card.compact .chat-row.me .chat-text a{color:#D6E5FF}
.chat-card.compact .chat-row.me .chat-meta{color:#CFE0FF}
.chat-card.compact .chat-row.me .chat-ticks.read{color:#9FE7FF}
.chat-card.compact .chat-compose{padding:10px 12px 8px}
.chat-card.compact .chat-hint{display:none}
.chat-pop{position:fixed;right:68px;bottom:22px;width:380px;height:min(580px,calc(100vh - 100px));z-index:60;border-radius:22px;box-shadow:0 26px 70px rgba(11,31,58,.4);overflow:hidden;background:#fff;transform-origin:bottom right;animation:chatPopIn .18s ease-out}
.chat-pop[hidden]{display:none}
.chat-pop .chat-card{height:100%;min-height:0;max-width:none;border-radius:0;box-shadow:none}
@keyframes chatPopIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (max-width:600px){.chat-pop{inset:0;width:auto;height:auto;border-radius:0}}
.chat-video{display:block;width:100%;max-width:260px;max-height:260px;border-radius:12px;margin-bottom:4px;background:#000}
.chat-attach video{width:84px;height:84px;object-fit:cover;border-radius:12px;display:block;background:#000}
/* voice call card (call.js) */
.acall{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:12px;width:min(380px,calc(100vw - 24px));padding:12px 14px;background:#0B1A3A;color:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.acall[hidden]{display:none}
.acall-ico{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:50%;background:#1FA971;font-size:20px;animation:acallPulse 1.6s infinite}
.acall-main{flex:1;min-width:0;display:grid;gap:1px}
.acall-title{font-size:15px}
.acall-sub{color:#B9C9DE;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acall-btns{display:flex;gap:6px;flex:none}
.acall-b{border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;background:#2B3F66;color:#fff}
.acall-b.ok{background:#1FA971}
.acall-b.end{background:#D8433A}
.acall-b.mute.on{background:#F5A623;color:#0B1A3A}
@keyframes acallPulse{0%,100%{box-shadow:0 0 0 0 rgba(31,169,113,.55)}50%{box-shadow:0 0 0 10px rgba(31,169,113,0)}}
@media (max-width:520px){.acall{right:8px;left:8px;bottom:70px;width:auto}}
@media (prefers-reduced-motion:reduce){.acall-ico{animation:none}}
/* voice messages */
.chat-icon[data-chat-mic]{font-size:19px}
.chat-voice{display:flex;align-items:center;gap:8px;min-width:230px;max-width:300px;padding:2px 0}
.chat-vp{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:#1A56C4;color:#fff;font-size:14px;cursor:pointer}
.chat-row.me .chat-vp{background:#fff;color:#1A56C4}
.chat-vbar{flex:1;min-width:60px;height:4px;accent-color:#1A56C4;cursor:pointer}
.chat-row.me .chat-vbar{accent-color:#fff}
.chat-vt{flex:none;font-size:12px;font-variant-numeric:tabular-nums;opacity:.85;min-width:34px;text-align:right}
.chat-vs{flex:none;border:0;border-radius:999px;background:rgba(0,0,0,.12);color:inherit;font:inherit;font-size:11px;font-weight:700;padding:3px 7px;cursor:pointer}
.chat-voice.on .chat-vp{box-shadow:0 0 0 4px rgba(26,86,196,.25)}
.chat-rec{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid #E2EAF3;background:#FFF5F5}
.chat-rec-dot{width:11px;height:11px;border-radius:50%;background:#E5484D;animation:recPulse 1s infinite}
.chat-rec-time{font-variant-numeric:tabular-nums;color:#B42318}
.chat-rec-hint{color:#6B7B93;font-size:13px}
.chat-rec-x,.chat-rec-send{border:0;border-radius:50%;width:38px;height:38px;font-size:17px;cursor:pointer}
.chat-rec-x{background:#fff;border:1.5px solid #E2EAF3}
.chat-rec-send{background:#1A56C4;color:#fff}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.chat-rec-dot{animation:none}}

.chat-ai{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;background:#E6EEFC;color:#1A56C4;font-size:10px;font-weight:800;letter-spacing:.04em;vertical-align:1px}