/* ==========================================================================
   ScholarHub Chat UI — chat.css
   Floating Widget + Student Dashboard Panel + Toast + Typing Indicator
   ========================================================================== */

:root {
    --sh-chat-primary    : #1E3A8A;
    --sh-chat-primary-d  : #1e40af;
    --sh-chat-accent     : #6366f1;
    --sh-chat-success    : #22c55e;
    --sh-chat-danger     : #ef4444;
    --sh-chat-border     : #E2E8F0;
    --sh-chat-bg         : #F8FAFC;
    --sh-chat-dark       : #1E293B;
    --sh-chat-muted      : #94A3B8;
    --sh-chat-radius     : 20px;
    --sh-chat-radius-sm  : 12px;
    --sh-chat-shadow     : 0 20px 60px rgba(0,0,0,0.18);
    --sh-chat-font       : 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --sh-chat-z          : 9999;
}

/* ── Launcher ──────────────────────────────────────────────────────────── */
.sh-chat-launcher {
    position       : fixed;
    bottom         : 28px;
    right          : 28px;
    z-index        : var(--sh-chat-z);
    display        : flex;
    align-items    : center;
    gap            : 10px;
    background     : linear-gradient(135deg, #1E3A8A 0%, #6366f1 100%);
    color          : white;
    padding        : 13px 20px;
    border-radius  : 50px;
    cursor         : pointer;
    box-shadow     : 0 8px 28px rgba(30,58,138,.45);
    transition     : all .25s cubic-bezier(.4,0,.2,1);
    user-select    : none;
    font-family    : var(--sh-chat-font);
    border         : none;
}
.sh-chat-launcher:hover, .sh-chat-launcher:focus-visible {
    transform  : translateY(-3px);
    box-shadow : 0 14px 36px rgba(30,58,138,.55);
    outline    : none;
}
.sh-chat-launcher.active { background: linear-gradient(135deg, #1e40af 0%, #4f46e5 100%); }

.sh-chat-icon { position:relative; font-size:20px; line-height:1; }

.sh-chat-badge {
    position        : absolute;
    top             : -8px;
    right           : -8px;
    background      : var(--sh-chat-danger);
    color           : white;
    border-radius   : 50%;
    min-width       : 18px;
    height          : 18px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 10px;
    font-weight     : 700;
    border          : 2px solid white;
    padding         : 0 3px;
    animation       : sh-badge-pop .3s cubic-bezier(.4,0,.2,1);
}

@keyframes sh-badge-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.sh-chat-label { font-size:13.5px; font-weight:600; white-space:nowrap; }

@media (max-width: 420px) {
    .sh-chat-label { display:none; }
    .sh-chat-launcher { padding:14px; border-radius:50%; }
}

/* ── Window ────────────────────────────────────────────────────────────── */
.sh-chat-window {
    position       : fixed;
    bottom         : 96px;
    right          : 28px;
    z-index        : calc(var(--sh-chat-z) - 1);
    width          : 385px;
    max-height     : 590px;
    display        : flex;
    flex-direction : column;
    background     : white;
    border-radius  : var(--sh-chat-radius);
    box-shadow     : var(--sh-chat-shadow);
    overflow       : hidden;
    animation      : shChatSlideUp .3s cubic-bezier(.4,0,.2,1);
    font-family    : var(--sh-chat-font);
    border         : 1px solid rgba(30,58,138,.08);
}

@keyframes shChatSlideUp {
    from { opacity:0; transform:translateY(16px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}

.sh-chat-window.sh-chat-minimized { max-height:62px; overflow:hidden; }

@media (max-width: 480px) {
    .sh-chat-window {
        width  : calc(100vw - 24px);
        right  : 12px;
        bottom : 90px;
    }
}

/* ── Header ────────────────────────────────────────────────────────────── */
.sh-chat-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    background      : linear-gradient(135deg, #1E3A8A 0%, #4f46e5 100%);
    color           : white;
    padding         : 14px 16px;
    flex-shrink     : 0;
}
.sh-chat-header-info { display:flex; align-items:center; gap:10px; }
.sh-chat-avatar { position:relative; }
.sh-chat-avatar img {
    width:38px; height:38px; border-radius:50%; object-fit:cover;
    border:2px solid rgba(255,255,255,.35);
}
.sh-online-dot {
    position:absolute; bottom:0; right:0;
    width:10px; height:10px;
    background:var(--sh-chat-success);
    border-radius:50%; border:2px solid white;
    animation: sh-pulse-dot 2s infinite;
}
@keyframes sh-pulse-dot {
    0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
    50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.sh-chat-header-name { font-weight:700; font-size:13.5px; }
.sh-chat-header-sub  { font-size:11px; opacity:.8; margin-top:1px; }
.sh-chat-header-actions { display:flex; gap:6px; }
.sh-chat-btn-icon {
    background:rgba(255,255,255,.15); border:none; color:white;
    width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:12px;
    transition:background .2s; display:flex; align-items:center; justify-content:center;
}
.sh-chat-btn-icon:hover { background:rgba(255,255,255,.3); }

/* ── Context Bar ───────────────────────────────────────────────────────── */
.sh-chat-context-bar {
    display:flex; align-items:center; gap:7px;
    padding:8px 16px; font-size:12px; font-weight:500;
    flex-shrink:0; border-bottom:1px solid;
}
.sh-ctx-scholarship { background:#EFF6FF; color:#1D4ED8; border-color:#BFDBFE; }
.sh-ctx-service     { background:#FFFBEB; color:#92400E; border-color:#FDE68A; }
.sh-ctx-blog        { background:#ECFDF5; color:#065F46; border-color:#A7F3D0; }
.sh-ctx-order       { background:#F5F3FF; color:#5B21B6; border-color:#DDD6FE; }
.sh-ctx-general     { background:var(--sh-chat-bg); color:var(--sh-chat-dark); border-color:var(--sh-chat-border); }
.sh-chat-context-bar a { color:inherit; font-weight:600; }

/* ── Messages ──────────────────────────────────────────────────────────── */
.sh-chat-messages {
    flex:1; overflow-y:auto; padding:20px 16px;
    display:flex; flex-direction:column; gap:14px;
    background:#FAFBFF;
}
.sh-chat-messages::-webkit-scrollbar { width:4px; }
.sh-chat-messages::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:4px; }

.sh-msg { display:flex; flex-direction:column; max-width:82%; }
.sh-msg-mine  { align-self:flex-end;   align-items:flex-end; }
.sh-msg-admin { align-self:flex-start; align-items:flex-start; }

.sh-msg-bubble {
    padding:10px 14px; border-radius:16px;
    font-size:13.5px; line-height:1.55; word-break:break-word;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.sh-msg-admin .sh-msg-bubble {
    background:#fff; color:#1e293b;
    border-bottom-left-radius:4px;
    border:1px solid #E2E8F0;
}
.sh-msg-mine .sh-msg-bubble {
    background:linear-gradient(135deg,#1E3A8A,#6366f1);
    color:white; border-bottom-right-radius:4px;
}

.sh-msg-loading { opacity:.6; }

.sh-msg-system { align-self:center; max-width:90%; margin:6px 0; }
.sh-msg-system-text {
    font-size:11.5px; color:#64748b; background:#f1f5f9;
    padding:4px 12px; border-radius:12px; text-align:center;
}

.sh-msg-meta { font-size:11px; color:#94a3b8; margin-top:4px; display:flex; gap:8px; align-items:center; }
.sh-msg-tick { color:#a5b4fc; font-size:10px; }

/* ── File / Image messages ─────────────────────────────────────────────── */
.sh-msg-image { max-width:200px; border-radius:10px; display:block; cursor:pointer; transition:opacity .2s; }
.sh-msg-image:hover { opacity:.9; }
.sh-msg-file {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:10px;
    background:#f8fafc; border:1px solid #e2e8f0;
    color:#1e293b; text-decoration:none; transition:background .2s;
}
.sh-msg-file:hover { background:#f1f5f9; }
.sh-msg-file span { display:flex; flex-direction:column; }
.sh-msg-file strong { font-size:13px; }
.sh-msg-file small  { font-size:11px; color:#64748b; }

/* ── Typing Indicator ──────────────────────────────────────────────────── */
.sh-typing-indicator {
    display:flex; align-items:center; gap:5px;
    padding:10px 16px; flex-shrink:0;
    font-size:12px; color:#64748b;
}
.sh-typing-indicator span:not(.sh-typing-text) {
    width:6px; height:6px; background:#94a3b8;
    border-radius:50%; animation:sh-bounce .8s infinite ease-in-out;
}
.sh-typing-indicator span:nth-child(2) { animation-delay:.15s; }
.sh-typing-indicator span:nth-child(3) { animation-delay:.3s; }
@keyframes sh-bounce {
    0%,60%,100% { transform:translateY(0); }
    30%         { transform:translateY(-5px); }
}

/* ── Guest Form ────────────────────────────────────────────────────────── */
.sh-guest-form {
    padding:20px 16px; display:flex; flex-direction:column; gap:10px;
    border-top:1px solid #e2e8f0; background:#fafbff;
}
.sh-guest-intro { margin:0; font-size:13px; color:#475569; font-weight:500; }
.sh-guest-form input {
    width:100%; padding:10px 12px; border:1px solid #cbd5e1;
    border-radius:8px; font-size:13px;
    transition:border-color .2s;
    box-sizing:border-box;
}
.sh-guest-form input:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.sh-guest-privacy { font-size:11.5px; color:#94a3b8; margin:0; }
.sh-btn-start-chat {
    width:100%; padding:11px; background:linear-gradient(135deg,#1E3A8A,#6366f1);
    color:white; border:none; border-radius:8px; font-size:14px; font-weight:600;
    cursor:pointer; transition:opacity .2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.sh-btn-start-chat:hover { opacity:.9; }
.sh-btn-start-chat:disabled { opacity:.6; cursor:not-allowed; }

/* ── Input Area ────────────────────────────────────────────────────────── */
.sh-chat-input-area {
    border-top:1px solid #e2e8f0; padding:12px 14px;
    background:#fff; display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.sh-file-preview-strip { }
.sh-file-chip {
    display:inline-flex; align-items:center; gap:6px;
    background:#eff6ff; border:1px solid #bfdbfe;
    padding:4px 10px; border-radius:16px; font-size:12px; color:#1d4ed8;
}
.sh-file-chip-remove { background:none; border:none; color:#60a5fa; cursor:pointer; padding:0; }
.sh-input-row { display:flex; align-items:flex-end; gap:8px; }
.sh-attach-btn {
    width:34px; height:34px; border-radius:50%; background:#f1f5f9;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:#64748b; flex-shrink:0; transition:background .2s;
}
.sh-attach-btn:hover { background:#e2e8f0; }
#sh-message-input {
    flex:1; border:1px solid #e2e8f0; border-radius:20px;
    padding:9px 14px; font-size:13.5px; resize:none;
    min-height:38px; max-height:120px; overflow-y:auto;
    font-family:var(--sh-chat-font); line-height:1.45;
    transition:border-color .2s;
}
#sh-message-input:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.sh-send-btn {
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg,#1E3A8A,#6366f1);
    color:white; border:none; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; transition:opacity .2s, transform .2s;
}
.sh-send-btn:hover { opacity:.9; transform:scale(1.05); }
.sh-input-hint { font-size:10.5px; color:#94a3b8; text-align:right; }

/* ── Toast Notifications ───────────────────────────────────────────────── */
.sh-toast {
    position:fixed; bottom:110px; right:28px; z-index:calc(var(--sh-chat-z) + 10);
    padding:12px 18px; border-radius:10px; font-size:13px; font-family:var(--sh-chat-font);
    color:white; max-width:300px; transform:translateY(20px); opacity:0;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.sh-toast-show { transform:translateY(0); opacity:1; }
.sh-toast-success { background:#16a34a; }
.sh-toast-error   { background:#dc2626; }
.sh-toast-info    { background:#2563eb; }

/* ── Status Dots ───────────────────────────────────────────────────────── */
.sh-conv-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.sh-status-open     { background:#2563eb; }
.sh-status-pending  { background:#f59e0b; }
.sh-status-resolved { background:#22c55e; }
.sh-status-closed   { background:#94a3b8; }

/* ── Dashboard Panel (My Chats tab) ────────────────────────────────────── */
.sh-dash-chat-panel { display:flex; gap:24px; min-height:540px; }

.sh-conv-sidebar {
    width:300px; flex-shrink:0; border:1px solid #e2e8f0;
    border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
    background:#f8fafc;
}

.sh-conv-sidebar-header {
    padding:16px; border-bottom:1px solid #e2e8f0;
    display:flex; justify-content:space-between; align-items:center;
}
.sh-conv-sidebar-header h5 { margin:0; font-size:15px; font-weight:600; }

.sh-conv-filters { padding:12px 16px; display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid #e2e8f0; }
.sh-conv-filter {
    padding:4px 10px; border-radius:16px; border:1px solid #e2e8f0;
    font-size:12px; cursor:pointer; background:#fff; transition:all .2s;
}
.sh-conv-filter.active { background:#1E3A8A; color:#fff; border-color:#1E3A8A; }

#sh-conv-items { flex:1; overflow-y:auto; }

.sh-conv-item {
    padding:14px 16px; border-bottom:1px solid #f1f5f9;
    cursor:pointer; transition:background .2s;
}
.sh-conv-item:hover { background:#f1f5f9; }
.sh-conv-item.active { background:#e0e7ff; border-left:3px solid #4f46e5; }
.sh-conv-item.has-unread { background:#fff; }

.sh-conv-item-top { display:flex; justify-content:space-between; margin-bottom:5px; }
.sh-conv-title { font-size:13px; font-weight:600; color:#1e293b; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-conv-preview { font-size:12px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sh-conv-meta { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:#94a3b8; }
.sh-conv-unread { background:#ef4444; color:#fff; font-size:11px; padding:1px 6px; border-radius:10px; font-weight:bold; }

.sh-conv-empty-list { text-align:center; padding:40px 16px; color:#94a3b8; }
.sh-conv-empty-list i { font-size:32px; margin-bottom:12px; }

.sh-conv-main {
    flex:1; border:1px solid #e2e8f0; border-radius:12px;
    overflow:hidden; display:flex; flex-direction:column; background:#fff;
}

#sh-conv-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#94a3b8; gap:16px; }
#sh-conv-header { padding:16px 20px; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; gap:12px; background:#f8fafc; }
.sh-conv-ctx-info { display:flex; flex-direction:column; gap:2px; flex:1; }
.sh-conv-ctx-title-text { font-size:15px; font-weight:600; color:#1e293b; }

#sh-dash-messages {
    flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px;
    background:#fafbff;
}

#sh-dash-input { border-top:1px solid #e2e8f0; padding:14px; background:#fff; display:flex; flex-direction:column; gap:8px; }
#sh-dash-msg-input {
    flex:1; border:1px solid #e2e8f0; border-radius:20px;
    padding:9px 14px; font-size:13.5px; resize:none; font-family:var(--sh-chat-font);
}
#sh-dash-msg-input:focus { outline:none; border-color:#6366f1; }
.sh-dash-input-row { display:flex; align-items:flex-end; gap:8px; }

/* Priority tags */
.sh-priority-tag { font-size:10px; padding:2px 6px; border-radius:4px; font-weight:700; }
.sh-priority-tag.high   { background:#fef3c7; color:#92400e; }
.sh-priority-tag.urgent { background:#fee2e2; color:#991b1b; }

/* New Chat Modal */
.sh-new-chat-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sh-new-chat-option {
    padding:16px; border:2px solid #e2e8f0; border-radius:12px;
    background:#fff; cursor:pointer; text-align:left; transition:all .2s;
    display:flex; flex-direction:column; gap:6px;
}
.sh-new-chat-option:hover { border-color:#6366f1; background:#f5f3ff; }
.sh-new-chat-option i { font-size:24px; margin-bottom:4px; }
.sh-new-chat-option strong { font-size:14px; color:#1e293b; }
.sh-new-chat-option span { font-size:12px; color:#64748b; }