/* Tema: Blue Fantastic (#2C3B4D) + emas (#FFB162) */

/* ============================
   BUTTON LAUNCHER FLOATING
============================ */
#nsf-livechat-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    background: #2C3B4D;
    color: #fff;
    border-radius: 999px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 600;
}

/* ============================
   PANEL POPUP
============================ */
#nsf-livechat-panel {
    position: fixed;
    right: 20px;
    bottom: 70px;
    width: 340px;
    max-height: 520px;
    background: #04070b;
    color: #f5f5f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.6);
    display: none;
    z-index: 9999;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================
   HEADER
============================ */
.nsf-lc-header {
    background: linear-gradient(135deg, #2C3B4D, #1B2632);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.nsf-lc-header-left{
    display:flex;
    align-items:center;
    gap:8px;
}
.nsf-lc-header-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#FFB162;
    color:#1B2632;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
}
.nsf-lc-header-title {
    font-size: 14px;
    font-weight: 700;
}
.nsf-lc-header-status {
    font-size: 11px;
    opacity: .9;
}
#nsf-lc-status-dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    margin-right:4px;
    background:#2ecc71; /* online */
}
#nsf-lc-status-dot.offline{
    background:#e74c3c; /* offline */
}
.nsf-lc-header-btn {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
}

/* ============================
   BODY (CONTAINER)
============================ */
.nsf-lc-body {
    padding: 12px;
    background: #000;
    height: 460px;
    display: flex;
    flex-direction: column;
}

/* ============================
   INTRO FORM (NAME/EMAIL/TOPIC)
============================ */
.nsf-lc-intro h5 {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 14px;
}
.nsf-lc-input,
.nsf-lc-select {
    width: 100%;
    border-radius: 8px;
    border: none;
    padding: 9px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    background: #141414;
    color: #fff;
}
.nsf-lc-input::placeholder {
    color: #8c8c8c;
}
.nsf-lc-select{
    color:#fff;
}
.nsf-lc-btn-primary {
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 10px;
    background: #FFB162;
    color: #1B2632;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.nsf-lc-offline {
    margin-top: 10px;
    font-size: 11px;
    color: #FFB162;
}

/* ============================
   CHAT VIEW
============================ */
.nsf-lc-chat {
    display: none;
    flex-direction: column;
    height: 100%;
}
.nsf-lc-messages {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 6px;
    padding-bottom:4px;
}

/* typing indicator */
.nsf-lc-typing {
    font-size: 11px;
    color: #FFB162;
    margin-bottom: 6px;
}

/* ============================
   CHAT BUBBLES
============================ */
.nsf-lc-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.4;
    background: transparent !important;
    display:flex;
    flex-direction:column;
}

/* USER: GOLD (kanan) */
.nsf-lc-msg-user {
    background: #FFB162 !important;
    color: #1B2632 !important;
    align-self: flex-end !important;
    border-bottom-right-radius: 3px;
}

/* ADMIN: DARK BLUE (kiri) */
.nsf-lc-msg-admin {
    background: #1B2632 !important;
    color: #ffffff !important;
    align-self: flex-start !important;
    border-bottom-left-radius: 3px;
}

/* ADMIN role accent */
.nsf-lc-msg-admin.nsf-lc-role-admin{
    border-left:3px solid #e53935; /* merah */
    padding-left:9px;
}
.nsf-lc-msg-admin.nsf-lc-role-agent{
    border-left:3px solid #1e88e5; /* biru */
    padding-left:9px;
}

/* SYSTEM: GREY (tengah) */
.nsf-lc-msg-system {
    background: #2b2b2b !important;
    color: #e8e8e8 !important;
    align-self: center !important;
    text-align: center;
}

/* nama & masa */
.nsf-lc-msg-sender{
    font-size:11px;
    font-weight:600;
    margin-bottom:2px;
}
.nsf-lc-msg-time {
    display: block;
    font-size: 10px;
    opacity: .7;
    margin-top: 4px;
    text-align:right;
}

/* ============================
   INPUT AREA
============================ */
.nsf-lc-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nsf-lc-input-text {
    flex: 1;
    border-radius: 999px;
    border: none;
    padding: 10px 14px;
    font-size: 13px;
    background: #141414;
    color: #fff;
}
.nsf-lc-input-text::placeholder {
    color: #777;
}
.nsf-lc-send-btn {
    border-radius: 999px;
    padding: 0 16px;
    height: 36px;
    border: none;
    background: #2C3B4D;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

/* NEW MESSAGES BADGE (optional) */
#nsf-lc-new-badge{
    position:absolute;
    right:36px;
    bottom:80px;
    background:#FFB162;
    color:#1B2632;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    display:none;
    cursor:pointer;
    z-index:10000;
}