/* ============================================
   PRIMATHIXAI — FULL EMBEDDED CHATBOT PANEL
   Fixed on right side, always visible
   ============================================ */

#chatbot-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 360px;
    background: #fff;
    box-shadow: -4px 0 32px rgba(0,0,0,0.13);
    display: flex;
    flex-direction: column;
    z-index: 8000;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}

#chatbot-panel.hidden {
    transform: translateX(100%);
}

body.chatbot-open {
    padding-right: 360px;
    transition: padding-right 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ===== TOGGLE TAB ===== */
#chatbot-tab {
    position: fixed;
    right: 360px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8001;
    background: linear-gradient(135deg, #ff5e14, #ff8c42);
    color: #fff;
    border: none;
    border-radius: 12px 0 0 12px;
    padding: 14px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: -4px 4px 16px rgba(255,94,20,0.4);
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    writing-mode: vertical-rl;
    font-family: 'Syne', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

#chatbot-tab:hover { background: linear-gradient(135deg,#e0500d,#ff7a3a); }

#chatbot-tab.panel-hidden {
    right: 0;
    border-radius: 12px 0 0 12px;
}

#chatbot-tab .tab-icon {
    font-size: 1.1rem;
    writing-mode: horizontal-tb;
}

.tab-notif {
    width: 10px; height: 10px;
    background: #22d3ee;
    border-radius: 50%;
    border: 2px solid #ff5e14;
    animation: bounceDot 1.4s ease infinite;
    writing-mode: horizontal-tb;
}

@keyframes bounceDot {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ===== HEADER ===== */
.chat-header {
    background: linear-gradient(135deg, #060f1e 0%, #0b2e59 100%);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.chat-header-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255,94,20,0.6);
    flex-shrink: 0;
    position: relative;
}

.chat-header-avatar img { width:100%; height:100%; object-fit:cover; }

.online-dot {
    position: absolute; bottom:1px; right:1px;
    width:10px; height:10px;
    background:#22c55e; border-radius:50%;
    border:2px solid #060f1e;
}

.chat-header-info { flex:1; min-width:0; }
.chat-header-info h4 {
    font-family:'Syne',sans-serif; font-size:0.9rem;
    font-weight:700; color:#fff; margin:0 0 2px;
}

.chat-header-info .status {
    font-size:0.67rem; color:#22c55e;
    display:flex; align-items:center; gap:5px;
}

.chat-header-info .status::before {
    content:''; width:6px; height:6px;
    border-radius:50%; background:#22c55e;
    animation:pgr 2s infinite;
}

@keyframes pgr { 0%,100%{opacity:1} 50%{opacity:0.4} }

.chat-header-actions { display:flex; gap:6px; }

.chat-hdr-btn {
    width:28px; height:28px;
    background:rgba(255,255,255,0.1); border:none;
    border-radius:8px; color:rgba(255,255,255,0.7);
    font-size:0.78rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s;
}

.chat-hdr-btn:hover { background:rgba(255,255,255,0.2); color:#fff; }

/* ===== WELCOME BANNER ===== */
.chat-welcome {
    background:linear-gradient(135deg,#fff5f0,#fff8f5);
    border-bottom:1px solid #ffe4d6;
    padding:10px 14px;
    display:flex; align-items:flex-start; gap:9px;
    flex-shrink:0;
}

.chat-welcome .wb-icon { font-size:1.3rem; flex-shrink:0; margin-top:2px; }

.chat-welcome p {
    font-size:0.76rem; color:#7a4030;
    line-height:1.5; margin:0;
}

.chat-welcome p strong { color:#ff5e14; font-weight:700; }

/* ===== SUGGESTIONS ===== */
.chat-suggestions {
    display:flex; gap:7px;
    padding:9px 12px;
    overflow-x:auto; flex-shrink:0;
    background:#f9fafb;
    border-bottom:1px solid #f0f0f0;
    scrollbar-width:none;
}

.chat-suggestions::-webkit-scrollbar { display:none; }

.suggestion-chip {
    background:#fff; border:1.5px solid #e0e7ff;
    color:#0b2e59; font-size:0.7rem; font-weight:600;
    padding:5px 12px; border-radius:50px;
    white-space:nowrap; cursor:pointer;
    transition:all 0.2s; flex-shrink:0;
    font-family:'DM Sans',sans-serif;
}

.suggestion-chip:hover {
    background:#ff5e14; border-color:#ff5e14;
    color:#fff; transform:translateY(-1px);
}

/* ===== MESSAGES ===== */
.chat-messages {
    flex:1; overflow-y:auto;
    padding:14px 12px;
    display:flex; flex-direction:column; gap:13px;
    scrollbar-width:thin; scrollbar-color:#e0e0e0 transparent;
    background:#f9fafb;
}

.chat-messages::-webkit-scrollbar { width:4px; }
.chat-messages::-webkit-scrollbar-thumb { background:#e0e0e0; border-radius:4px; }

.chat-date-sep {
    text-align:center; font-size:0.63rem; color:#bbb;
    font-weight:600; letter-spacing:0.05em; text-transform:uppercase;
    position:relative;
}

.chat-date-sep::before, .chat-date-sep::after {
    content:''; position:absolute; top:50%;
    width:35%; height:1px; background:#e5e5e5;
}
.chat-date-sep::before { left:0; }
.chat-date-sep::after { right:0; }

.chat-msg {
    display:flex; gap:8px; align-items:flex-end;
    max-width:93%;
    animation:msgIn 0.22s ease;
}

@keyframes msgIn {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
}

.chat-msg.user { align-self:flex-end; flex-direction:row-reverse; }
.chat-msg.bot { align-self:flex-start; }

.msg-avatar {
    width:28px; height:28px; border-radius:50%;
    overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:0.75rem; font-weight:700; color:#fff;
}

.msg-avatar.bot-av { background:linear-gradient(135deg,#ff5e14,#ff8c42); display:flex; align-items:center; justify-content:center; }
.msg-avatar.bot-av img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.msg-avatar.user-av { background:linear-gradient(135deg,#0b2e59,#1a5296); }

.msg-content { display:flex; flex-direction:column; gap:2px; min-width:0; }

.msg-name { font-size:0.63rem; color:#bbb; font-weight:600; padding:0 4px; }
.chat-msg.user .msg-name { text-align:right; }

.msg-bubble {
    padding:10px 13px; border-radius:18px;
    font-size:0.82rem; line-height:1.6;
    color:#1a1a2e; word-wrap:break-word; max-width:100%;
}

.chat-msg.bot .msg-bubble {
    background:#fff; border-bottom-left-radius:4px;
    box-shadow:0 1px 4px rgba(0,0,0,0.07);
    border:1px solid #f0f0f0;
}

.chat-msg.user .msg-bubble {
    background:linear-gradient(135deg,#ff5e14,#ff7a3a);
    color:#fff; border-bottom-right-radius:4px;
}

.msg-bubble p { margin:0 0 6px; }
.msg-bubble p:last-child { margin:0; }
.msg-bubble ul { margin:6px 0 6px 4px; padding-left:14px; }
.msg-bubble li { margin-bottom:3px; }
.msg-bubble strong { font-weight:700; }

.msg-time { font-size:0.6rem; color:#bbb; padding:0 4px; align-self:flex-end; }
.chat-msg.user .msg-time { text-align:right; }

/* Typing */
.typing-indicator {
    display:flex; gap:5px; align-items:center;
    padding:11px 15px; background:#fff;
    border-radius:18px; border-bottom-left-radius:4px;
    width:fit-content;
    box-shadow:0 1px 4px rgba(0,0,0,0.07);
    border:1px solid #f0f0f0;
}

.typing-indicator span {
    width:7px; height:7px; border-radius:50%;
    background:#ff5e14;
    animation:tdot 1.2s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay:0.2s; }
.typing-indicator span:nth-child(3) { animation-delay:0.4s; }

@keyframes tdot {
    0%,80%,100% { transform:scale(0.7); opacity:0.4; }
    40% { transform:scale(1.1); opacity:1; }
}

/* ===== INPUT ===== */
.chat-input-wrap {
    padding:11px 12px;
    border-top:1px solid #f0f0f0;
    background:#fff; flex-shrink:0;
}

.chat-input-row {
    display:flex; gap:8px; align-items:flex-end;
    background:#f4f6fb; border:1.5px solid #e0e7ff;
    border-radius:14px; padding:8px 10px;
    transition:border-color 0.2s;
}

.chat-input-row:focus-within {
    border-color:#ff5e14; background:#fff;
}

.chat-input-row textarea {
    flex:1; border:none; background:transparent;
    font-size:0.83rem; font-family:'DM Sans',sans-serif;
    resize:none; outline:none;
    min-height:22px; max-height:88px;
    line-height:1.5; color:#1a1a2e; padding:0;
}

.chat-input-row textarea::placeholder { color:#b0b8cc; }

.chat-send-btn {
    width:34px; height:34px; border-radius:10px;
    background:linear-gradient(135deg,#ff5e14,#ff7a3a);
    border:none; color:#fff; font-size:0.88rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all 0.2s;
    box-shadow:0 3px 10px rgba(255,94,20,0.3);
}

.chat-send-btn:hover { transform:scale(1.08); }
.chat-send-btn:active { transform:scale(0.95); }
.chat-send-btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; box-shadow:none; }

.chat-input-hint {
    font-size:0.61rem; color:#c5ccd8;
    margin-top:5px; padding-left:2px;
}

/* ===== FOOTER ===== */
.chat-footer {
    text-align:center; padding:6px;
    font-size:0.61rem; color:#c0c8d8;
    background:#fff; border-top:1px solid #f5f5f5;
    flex-shrink:0;
}

.chat-footer span { color:#ff5e14; font-weight:700; }

/* ===== RESPONSIVE ===== */
@media (max-width:900px) {
    #chatbot-panel { width:320px; }
    body.chatbot-open { padding-right:320px; }
    #chatbot-tab { right:320px; }
    #chatbot-tab.panel-hidden { right:0; }
}

@media (max-width:600px) {
    #chatbot-panel {
        width:100vw; top:auto;
        height:78vh; border-radius:20px 20px 0 0;
        box-shadow:0 -8px 32px rgba(0,0,0,0.15);
        transform:translateY(100%);
    }
    #chatbot-panel.hidden { transform:translateY(100%); }
    #chatbot-panel:not(.hidden) { transform:translateY(0); }
    body.chatbot-open { padding-right:0; }
    #chatbot-tab {
        right:20px; top:auto; bottom:20px;
        transform:none; border-radius:50px;
        padding:12px 18px; writing-mode:horizontal-tb;
        flex-direction:row; gap:8px;
    }
    #chatbot-tab.panel-hidden { right:20px; }
}