/* Custom styles for DWR NetSuite AI Assistant */

/* Smooth scrolling for messages */
#app [ref="messagesContainer"] {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
#app [ref="messagesContainer"]::-webkit-scrollbar {
    width: 8px;
}

#app [ref="messagesContainer"]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#app [ref="messagesContainer"]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

#app [ref="messagesContainer"]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Fade-in animation for messages */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-enter {
    animation: fadeIn 0.3s ease-out;
}

/* Loading dots animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading-dots span {
    animation: pulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    /* Adjust header padding on mobile */
    header .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Make messages container shorter on mobile */
    #app [ref="messagesContainer"] {
        height: 400px;
    }

    /* Stack buttons vertically on very small screens */
    @media (max-width: 480px) {
        form button[type="submit"] {
            min-width: 80px;
        }
    }
}

/* Focus styles for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Prevent layout shift */
img, video {
    max-width: 100%;
    height: auto;
}

/* Toast animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fixed.bottom-4.right-4 {
    animation: slideInRight 0.3s ease-out;
}

/* ===================================
   Sidebar Quick Actions Layout
   =================================== */

/* Sidebar positioning */
.sidebar-left {
    position: relative;
}

/* Prevent chat overflow in flexbox */
.chat-area-wrapper {
    min-width: 0;
    overflow: hidden;
}

/* Mobile: Prevent horizontal scroll */
@media (max-width: 1023px) {
    .sidebar-left {
        max-width: 100%;
    }
}

/* ===================================
   Markdown content in assistant messages
   =================================== */

.prose ul { list-style-type: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
.prose ol { list-style-type: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
.prose li { margin: 0.25rem 0; }
.prose p { margin: 0.5rem 0; }
.prose p:first-child { margin-top: 0; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose h1, .prose h2, .prose h3 { font-weight: 600; margin: 0.75rem 0 0.25rem; }
.prose h1 { font-size: 1.1rem; }
.prose h2 { font-size: 1rem; }
.prose h3 { font-size: 0.9rem; }
.prose code { font-family: monospace; background: rgba(0,0,0,0.08); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85em; }
.prose pre { background: rgba(0,0,0,0.08); padding: 0.75rem; border-radius: 6px; overflow-x: auto; margin: 0.5rem 0; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: 0.85rem; }
.prose th { background: rgba(0,0,0,0.06); font-weight: 600; text-align: left; padding: 0.4rem 0.6rem; border: 1px solid rgba(0,0,0,0.15); }
.prose td { padding: 0.4rem 0.6rem; border: 1px solid rgba(0,0,0,0.15); }
.prose tr:nth-child(even) { background: rgba(0,0,0,0.03); }
.prose a { color: #2563eb; text-decoration: underline; }
.prose blockquote { border-left: 3px solid rgba(0,0,0,0.2); padding-left: 0.75rem; margin: 0.5rem 0; opacity: 0.8; }

/* Split assistant bubble: prevent long unbroken strings from overflowing */
.whitespace-pre-wrap {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Desktop: Subtle visual separator */
@media (min-width: 1024px) {
    aside[aria-label="Quick Actions"]::after {
        content: '';
        position: absolute;
        right: -12px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(229, 231, 235, 0.5) 20%,
            rgba(229, 231, 235, 0.5) 80%,
            transparent
        );
    }
}

/* ===================================
   Print styles (PDF via browser print)
   =================================== */
@media print {
    * {
        visibility: hidden;
    }

    .rendered-output-panel,
    .rendered-output-panel * {
        visibility: visible;
    }

    .rendered-output-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto !important;
        box-shadow: none !important;
        padding: 15mm 10mm;
        box-sizing: border-box;
    }

    /* Inner card: overflow-hidden clips content at card boundary */
    .rendered-output-panel > div {
        overflow: visible !important;
        height: auto !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    /* Scroll container: overflow-y-auto + flex-1 lock the height */
    .rendered-output-panel .overflow-y-auto {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .rendered-output-panel button {
        display: none !important;
    }

    .rendered-output-header {
        display: none !important;
    }
}