/* ================================================================
 * ORION FAB SOURCES - STYLES
 * ================================================================
 * Style untuk button original yang di-inject orion-fab.js:
 * - .wa-float → WhatsApp floating button
 * - #caBtn → Chat Asisten button
 * - #caPanel → Chat Asisten panel UI
 *
 * Original button akan disembunyikan oleh body.fab-active dari
 * fab-orchestrator.css ketika FAB aktif. Tampil sendiri sebagai
 * fallback kalau orchestrator gagal load.
 * ================================================================ */

/* WHATSAPP FLOAT */
.wa-float {
 position: fixed;
 bottom: 25px;
 right: 25px;
 width: 60px;
 height: 60px;
 background: #25D366;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 1.8rem;
 box-shadow: 0 5px 20px rgba(37, 211, 102, .4);
 z-index: 9999;
 text-decoration: none;
 animation: wa-pulse 2s infinite;
 transition: transform .3s;
}
.wa-float:hover {
 background: #128C7E;
 color: #fff;
 transform: scale(1.1) rotate(8deg);
}
@keyframes wa-pulse {
 0%, 100% { box-shadow: 0 5px 20px rgba(37, 211, 102, .4); }
 50% { box-shadow: 0 5px 40px rgba(37, 211, 102, .8); }
}

/* CHAT ASISTEN BUTTON */
.ca-btn-float, #caBtn {
 position: fixed;
 bottom: 95px;
 right: 25px;
 width: 56px;
 height: 56px;
 background: linear-gradient(135deg, #10b981, #06b6d4);
 border-radius: 50%;
 border: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-size: 1.4rem;
 box-shadow: 0 5px 18px rgba(16, 185, 129, .4);
 z-index: 9998;
 cursor: pointer;
 transition: transform .25s, box-shadow .25s;
}
.ca-btn-float:hover, #caBtn:hover {
 transform: scale(1.1);
 box-shadow: 0 8px 24px rgba(16, 185, 129, .6);
}

/* CHAT PANEL */
.ca-panel {
 position: fixed;
 bottom: 95px;
 right: 25px;
 width: 360px;
 max-width: calc(100vw - 50px);
 height: 480px;
 max-height: calc(100vh - 130px);
 background: var(--orion-card, #fff);
 border-radius: 18px;
 box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
 z-index: 10000;
 display: none;
 flex-direction: column;
 overflow: hidden;
 border: 1px solid var(--orion-border, #e2e8f0);
}
.ca-panel.is-open { display: flex; }

.ca-panel-head {
 background: linear-gradient(135deg, #10b981, #06b6d4);
 color: #fff;
 padding: 14px 18px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-weight: 700;
}
.ca-panel-head button {
 background: rgba(255, 255, 255, .2);
 border: 0;
 color: #fff;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 cursor: pointer;
 font-size: 1.2rem;
 line-height: 1;
}
.ca-panel-head button:hover { background: rgba(255, 255, 255, .35); }

.ca-messages {
 flex: 1;
 overflow-y: auto;
 padding: 16px;
 background: var(--orion-bg, #f9fafb);
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.ca-msg {
 max-width: 80%;
 padding: 10px 14px;
 border-radius: 14px;
 font-size: .92rem;
 line-height: 1.5;
 word-wrap: break-word;
}
.ca-msg.role-assistant {
 background: var(--orion-light, #f0f4f8);
 color: var(--orion-text, #1a1a2e);
 align-self: flex-start;
 border-bottom-left-radius: 4px;
}
.ca-msg.role-user {
 background: linear-gradient(135deg, #10b981, #06b6d4);
 color: #fff;
 align-self: flex-end;
 border-bottom-right-radius: 4px;
}

.ca-input {
 display: flex;
 gap: 8px;
 padding: 12px;
 background: var(--orion-card, #fff);
 border-top: 1px solid var(--orion-border, #e2e8f0);
}
.ca-input input {
 flex: 1;
 padding: 10px 14px;
 border-radius: 20px;
 border: 1px solid var(--orion-border, #e2e8f0);
 background: var(--orion-bg, #fff);
 color: var(--orion-text, #1a1a2e);
 font-size: .9rem;
 outline: none;
}
.ca-input input:focus { border-color: #10b981; }
.ca-input button {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: linear-gradient(135deg, #10b981, #06b6d4);
 color: #fff;
 border: 0;
 cursor: pointer;
}
.ca-input button:hover { transform: scale(1.05); }

/* MOBILE */
@media (max-width: 768px) {
 .wa-float { width: 52px; height: 52px; font-size: 1.5rem; bottom: 18px; right: 18px; }
 .ca-btn-float, #caBtn { width: 50px; height: 50px; font-size: 1.2rem; bottom: 82px; right: 18px; }
 .ca-panel { right: 12px; left: 12px; width: auto; bottom: 80px; }
}