/* Support stack (chatbot + live agent + presence) for the legacy HRMS site.
   Accent matches the site navy (#002663). Scoped under .scb-/.lcc- to avoid collisions. */

#supportOnlineList { max-height: 360px; overflow-y: auto; }
.scb-menu-head { padding: 8px 14px; font-weight: 700; color: #002663; border-bottom: 1px solid #eee; }
.scb-online-row { padding: 6px 14px; color: #333; }
.scb-online-row .scb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #28a745; margin-right: 8px; }

/* ---- chatbot / live widget ---- */
#scbLauncher {
    position: fixed; right: 22px; bottom: 22px; z-index: 99998;
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
    background: #002663; color: #fff; font-size: 26px; line-height: 56px; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
#scbLauncher:hover { background: #013a8f; }
#scbPanel {
    position: fixed; right: 22px; bottom: 88px; z-index: 99999;
    width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 120px);
    background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
    display: none; flex-direction: column; overflow: hidden;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}
#scbPanel.scb-open { display: flex; }
#scbHeader { background: #002663; color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
#scbHeader .scb-title { font-weight: 600; font-size: 15px; }
#scbHeader .scb-sub { font-size: 11px; opacity: .8; display: block; }
#scbClose { background: transparent; border: 0; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
#scbActions { padding: 6px 12px; border-bottom: 1px solid #e2e8f0; background: #fff; text-align: right; }
#scbActions a { font-size: 12px; color: #002663; font-weight: 600; text-decoration: none; }
#scbActions a:hover { text-decoration: underline; }
#scbMessages { flex: 1; overflow-y: auto; padding: 14px; background: #f4f6fa; }
.scb-msg { margin-bottom: 10px; display: flex; }
.scb-msg .scb-bubble { padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; max-width: 84%; white-space: pre-wrap; word-wrap: break-word; }
.scb-msg.user { justify-content: flex-end; }
.scb-msg.user .scb-bubble { background: #002663; color: #fff; border-bottom-right-radius: 3px; }
.scb-msg.bot .scb-bubble { background: #fff; color: #222; border: 1px solid #e2e8f0; border-bottom-left-radius: 3px; }
.scb-msg.bot.typing .scb-bubble { color: #888; font-style: italic; }
.scb-msg.agent { justify-content: flex-start; }
.scb-msg.agent .scb-bubble { background: #e6f7f1; color: #08543c; border: 1px solid #b7e3d4; border-bottom-left-radius: 3px; }
#scbInputRow { display: flex; border-top: 1px solid #e2e8f0; padding: 8px; gap: 8px; background: #fff; }
#scbInput { flex: 1; resize: none; border: 1px solid #cdd5e0; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; height: 38px; max-height: 96px; }
#scbSend { border: 0; background: #002663; color: #fff; border-radius: 8px; padding: 0 16px; font-weight: 600; cursor: pointer; }
#scbSend:disabled { opacity: .5; cursor: default; }
#scbDisclaimer { font-size: 10.5px; color: #8a93a3; padding: 0 10px 8px; background: #fff; text-align: center; }

/* ---- agent console ---- */
.lcc-wrap { display: flex; gap: 14px; max-width: 1100px; margin: 16px auto; height: 70vh; }
.lcc-list { width: 320px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.lcc-head, .lcc-chathead { background: #002663; color: #fff; padding: 10px 14px; font-weight: 600; }
#lccConvs { overflow-y: auto; flex: 1; }
.lcc-conv { padding: 10px 14px; border-bottom: 1px solid #eef1f5; cursor: pointer; }
.lcc-conv:hover { background: #f4f6fa; }
.lcc-conv.active { background: #eef4ff; }
.lcc-conv .lcc-cu { font-weight: 600; color: #002663; }
.lcc-conv .lcc-cs { font-size: 11px; color: #fff; border-radius: 3px; padding: 1px 6px; }
.lcc-conv .lcc-cs.waiting { background: #d9822b; }
.lcc-conv .lcc-cs.active { background: #1a7f37; }
.lcc-conv .lcc-cl { font-size: 12px; color: #6a7280; display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcc-chat { flex: 1; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
#lccMessages { flex: 1; overflow-y: auto; padding: 14px; background: #f4f6fa; }
.lcc-m { margin-bottom: 10px; display: flex; }
.lcc-m .lcc-b { padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; max-width: 78%; white-space: pre-wrap; word-wrap: break-word; }
.lcc-m.user { justify-content: flex-start; }
.lcc-m.user .lcc-b { background: #fff; border: 1px solid #e2e8f0; color: #222; }
.lcc-m.agent { justify-content: flex-end; }
.lcc-m.agent .lcc-b { background: #002663; color: #fff; }
.lcc-reply { display: flex; gap: 8px; padding: 8px; border-top: 1px solid #e2e8f0; }
.lcc-reply textarea { flex: 1; resize: none; height: 40px; border: 1px solid #cdd5e0; border-radius: 8px; padding: 8px; font-family: inherit; }
.lcc-reply button { border: 0; border-radius: 8px; padding: 0 16px; font-weight: 600; cursor: pointer; }
#lccSend { background: #002663; color: #fff; }
#lccClose { background: #fff; color: #c0392b; border: 1px solid #e0b4ad !important; }