/* ============================================================
   AI Chat Assistant — floating widget (draggable + snap-to-edge)
   Mounted in index.php; lives outside Framework7 view stack.
   ============================================================ */

#ai-assistant-root {
    position: fixed;
    z-index: 13500;       /* เหนือ Framework7 popup (13000) แต่ต่ำกว่า toast (13600) */
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    touch-action: none;   /* กัน browser scroll ขณะลาก */
    -webkit-user-select: none;
    user-select: none;
}

/* ----- Floating Action Button (FAB) ----- */
#ai-assistant-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff7849, #ff5722);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 87, 34, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
#ai-assistant-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px rgba(255, 87, 34, 0.45),
                0 3px 8px rgba(0, 0, 0, 0.2);
}
#ai-assistant-fab:active {
    cursor: grabbing;
    transform: scale(0.96);
}
#ai-assistant-fab svg {
    width: 30px;
    height: 30px;
    pointer-events: none;
}

/* ----- Snap-to-edge peek state (half-hidden) ----- */
#ai-assistant-root.ai-peek-right #ai-assistant-fab {
    transform: translateX(50%);
    opacity: 0.6;
}
#ai-assistant-root.ai-peek-left #ai-assistant-fab {
    transform: translateX(-50%);
    opacity: 0.6;
}
#ai-assistant-root.ai-peek-right #ai-assistant-fab:hover,
#ai-assistant-root.ai-peek-left  #ai-assistant-fab:hover {
    transform: translateX(0);
    opacity: 1;
}

/* ระงับ peek ตอน panel เปิด */
#ai-assistant-root.ai-open.ai-peek-right #ai-assistant-fab,
#ai-assistant-root.ai-open.ai-peek-left  #ai-assistant-fab {
    transform: none;
    opacity: 1;
}

/* ----- Chat Panel ----- */
#ai-assistant-panel {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    height: 420px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18),
                0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid #ff5722;
    transform-origin: bottom right;
    animation: aiPanelIn 0.18s ease-out;
}
#ai-assistant-root[data-anchor="left"] #ai-assistant-panel {
    right: auto;
    left: 0;
    transform-origin: bottom left;
}
@keyframes aiPanelIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
#ai-assistant-panel[hidden] { display: none; }

.ai-panel-header {
    background: linear-gradient(135deg, #ff7849, #ff5722);
    color: #fff;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
}
.ai-panel-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-panel-btn {
    background: transparent;
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.ai-panel-btn:hover { background: rgba(255, 255, 255, 0.2); }

.ai-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    -webkit-overflow-scrolling: touch;
}

.ai-msg {
    margin-bottom: 8px;
    display: flex;
}
.ai-msg-bot {
    background: #fff;
    border: 1px solid #ffe0d6;
    border-radius: 12px;
    padding: 8px 10px;
    max-width: 85%;
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-msg-user {
    margin-left: auto;
    background: #ff7849;
    color: #fff;
    border-radius: 12px;
    padding: 8px 10px;
    max-width: 85%;
    word-break: break-word;
}
.ai-msg-bot .ai-msg-prefix { color: #ff5722; font-weight: 500; }

.ai-panel-input {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #eee;
    background: #fff;
}
.ai-panel-input input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    background: #f6f6f6;
    color: #333;
    -webkit-appearance: none;
}
.ai-panel-input input:focus {
    border-color: #ff7849;
    background: #fff;
}
.ai-panel-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff7849, #ff5722);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.ai-panel-send:hover { transform: scale(1.08); }
.ai-panel-send:active { transform: scale(0.94); }
.ai-panel-send svg { width: 16px; height: 16px; }

/* ----- Mobile tweaks ----- */
@media (max-width: 480px) {
    #ai-assistant-panel {
        width: calc(100vw - 24px);
        height: 60vh;
    }
}

/* Hide widget on print */
@media print {
    #ai-assistant-root { display: none !important; }
}

/* ----- Server-rendered bubble (HTML จาก ai_box engine) ----- */
.ai-msg-html { display: inline; }
.ai-msg-html b, .ai-msg-html strong { font-weight: 600; color: #d84315; }
.ai-msg-html small { font-size: 11px; }
.ai-msg-html .text-muted { color: #888 !important; }

/* Bootstrap-ish utility fallbacks (เผื่อ engine ส่ง class มา) */
.ai-msg-html .border-start { border-left: 3px solid #2196f3; padding-left: 8px; margin: 6px 0; }
.ai-msg-html .border-info  { border-color: #2196f3 !important; }
.ai-msg-html .ps-3 { padding-left: 12px; }
.ai-msg-html .mb-2 { margin-bottom: 6px; }

/* LLM block (output from llm_answer wrapper) */
.ai-msg-html .ai-llm-block {
    background: #fff8e1;
    border-left: 3px solid #ffa726;
    padding: 6px 10px;
    margin-bottom: 8px;
    border-radius: 6px;
}

/* "ข้อมูลดิบจากระบบ" collapsible — แสดงด้านล่างคำตอบ LLM */
.ai-msg-html .ai-raw-details {
    margin-top: 6px;
}
.ai-msg-html .ai-raw-details summary {
    cursor: pointer;
    font-size: 12px;
    color: #888;
    padding: 4px 0;
    user-select: none;
}
.ai-msg-html .ai-raw-details summary:hover { color: #ff5722; }
.ai-msg-html .ai-raw-details[open] summary { color: #ff5722; }

/* ITS fallback hint */
.ai-msg-html .ai-its-hint {
    background: #fff3e0;
    border: 1px dashed #ff9800;
    color: #e65100;
    padding: 6px 8px;
    border-radius: 8px;
    margin-top: 6px;
    font-size: 13px;
}

/* ----- Typing indicator (3 animated dots) ----- */
.ai-msg-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
}
.ai-msg-typing .ai-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7849;
    opacity: 0.4;
    animation: aiBlink 1.2s infinite;
}
.ai-msg-typing .ai-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-msg-typing .ai-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiBlink {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40%           { opacity: 1;   transform: scale(1.1); }
}

/* ----- Action button chips (quick_actions จาก engine) ----- */
.ai-msg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.ai-action-btn {
    background: #fff;
    border: 1px solid #ff7849;
    color: #ff5722;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ai-action-btn:hover {
    background: #ff7849;
    color: #fff;
}
.ai-action-btn:active {
    transform: scale(0.96);
}

/* disable input state ระหว่างรอ AI ตอบ */
.ai-panel-input input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}