/* Mobile UX: ป้องกันการดึงหน้าจอเพื่อรีเฟรช (Pull-to-refresh) */
body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* ซ่อน Scrollbar ของ textarea แต่ยังเลื่อนได้ และจำกัดความสูงไม่เกิน 200px */
.auto-expand {
    overflow-y: auto;
    max-height: 200px;
}
.auto-expand::-webkit-scrollbar {
    width: 6px;
}
.auto-expand::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}

/* Loading Spinner กลางจอ */
.loader-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* History Card Animation */
.fade-in {
    animation: fadeIn 0.3s ease-in-out forwards;
}

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