/* ========================================
   RESPONSIVE DESIGN & MOBILE STYLES
   ======================================== */
 
/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1001;
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
}

.mobile-menu-toggle svg {
    width: 20px;
    height: 20px;
    color: #e4e4e7;
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.mobile-overlay.show {
    display: block;
}

/* ========================================
   TABLET & MOBILE (768px and below)
   ======================================== */

@media (max-width: 768px) {
    .logo-section {
        padding: 8px 16px;
    }

    .company-logo {
        width: 40px;
        height: 40px;
    }

    .app-title {
        font-size: 12px;
    }

    .export-btn,
    .manual-btn {
        font-size: 13px;
        padding: 8px;
    }
    /* Layout Adjustments */
    .app-container {
        position: relative;
    }

    /* Sidebar Mobile Behavior */
    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    .sidebar.mobile-open {
        left: 0;
    }

    /* Hide Desktop Toggle on Mobile */
    .sidebar-toggle {
        display: none !important;
    }

    /* Mobile Menu */
    .mobile-menu-toggle {
        display: block;
    }

    /* Header - Single Row Layout */
    .chat-header {
        padding: 10px 15px;
        padding-left: 60px;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 1fr;
        gap: 10px;
        align-items: center;
    }

    /* Model Info - Left (Status Light + Text) */
    .model-info {
        font-size: 11px;
        padding: 0;
        justify-content: flex-start;
        white-space: nowrap;
    }

    .model-info span {
        display: inline;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .status-indicator {
        width: 10px;
        height: 10px;
    }

    /* Session Info - Center (Compact Two Lines) */
    .session-info-badge {
        justify-self: center;
        font-size: 9px;
        padding: 4px 8px;
        line-height: 1.3;
        max-width: 140px;
    }

    #sessionInfoText {
        flex-direction: column;
        gap: 2px;
        align-items: center;
        text-align: center;
    }

    #sessionInfoText span {
        display: block;
        white-space: nowrap;
    }

    /* Language Selector - Right */
    .language-selector {
        justify-self: end;
    }

    .language-selector select {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Messages - Reduce right padding */
    .message-wrapper {
        padding-right: 16px;
    }
    
    .message {
        padding: 0 16px;
    }

    .message-content {
        font-size: 15px;
    }

    /* Message Actions - Adjust copy button position */
    .message-actions {
        top: 8px;
        right: 8px;
        opacity: 1; /* Always visible on mobile */
    }

    .copy-btn {
        padding: 3px 6px;
        font-size: 11px;
    }

    /* Input */
    .input-wrapper {
        padding: 0 16px;
    }

    .chat-input {
        font-size: 15px;
    }

    /* Scroll to Top */
    .scroll-to-top {
        bottom: 70px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    /* Training Status - 移動設備時側邊欄隱藏，所以居中 */
    .training-status {
        top: 50%;
        left: 50% !important; /* 覆蓋桌面版的 calc */
        width: 240px;
        padding: 30px 20px;
    }

    .training-logo {
        width: 70px;
        height: 70px;
    }

    .training-percentage-large {
        font-size: 40px;
    }

    /* Language Splash */
    .language-splash-branding {
        gap: 16px;
        margin-bottom: 40px;
    }

    .brand-title {
        font-size: 28px;
    }

    .brand-logo {
        width: 70px;
        height: 70px;
    }

    .brand-slogan {
        font-size: 14px;
    }

    .language-options {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        gap: 12px;
    }

    .language-option {
        padding: 16px 20px;
    }

    .language-option-name {
        font-size: 16px;
    }

    .language-option-native {
        font-size: 12px;
    }
}

/* ========================================
   SMALL MOBILE (480px and below)
   ======================================== */

@media (max-width: 480px) {
    /* Avatar & Messages */
    .message-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .message {
        gap: 12px;
        padding: 0 12px;
    }

    /* Ultra small screen optimization */
    .message-wrapper {
        padding-right: 12px;
    }
    
    /* Input */
    .input-wrapper {
        padding: 0 12px;
    }

    .action-btn {
        width: 28px;
        height: 28px;
    }

    .action-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Training Status */
    .training-status {
        top: 50%;
        left: 50% !important; /* 覆蓋桌面版的 calc */
        width: 200px;
        padding: 25px 15px;
    }

    .training-logo {
        width: 60px;
        height: 60px;
    }

    .training-percentage-large {
        font-size: 36px;
    }

    /* Language Splash */
    .brand-title {
        font-size: 24px;
    }

    .brand-logo {
        width: 60px;
        height: 60px;
    }

    .brand-slogan {
        font-size: 13px;
    }
}

/* ========================================
   RTL SUPPORT (ARABIC)
   ======================================== */

/* Input & Textarea RTL */
html[lang="ar"] .chat-input,
html[lang="ar"] textarea {
    direction: rtl;
    text-align: right;
}

/* Message Content RTL */
html[lang="ar"] .message-content {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .message-content ul,
html[lang="ar"] .message-content ol {
    padding-right: 1.5em;
    padding-left: 0;
}

html[lang="ar"] .message-content blockquote {
    border-left: none !important;
    border-right: 3px solid #4a4a4a;
    padding-left: 0;
    padding-right: 1em;
}

html[lang="ar"] .message-content table {
    direction: rtl;
}

html[lang="ar"] .message-content th,
html[lang="ar"] .message-content td {
    text-align: right;
}

/* Message Border Colors RTL */
html[lang="ar"] .message-wrapper.system {
    border-left: none !important;
    border-right: 3px solid #fbbf24 !important;
}

html[lang="ar"] .message-wrapper.di-personal {
    border-left: none !important;
    border-right: 3px solid #8b5cf6 !important;
}

/* Message Layout RTL */
html[lang="ar"] .message {
    flex-direction: row-reverse;
}

html[lang="ar"] .message-avatar {
    margin-left: 16px;
    margin-right: 0;
}

/* Copy Button RTL */
html[lang="ar"] .message-actions {
    left: 10px;
    right: auto;
}

/* Typing Indicator RTL */
html[lang="ar"] .typing-indicator {
    flex-direction: row-reverse;
}

html[lang="ar"] .typing-indicator .message-avatar {
    margin-left: 16px;
    margin-right: 0;
}

/* File Attachment RTL */
html[lang="ar"] .file-attachment {
    direction: rtl;
    text-align: right;
}

/* Warning Messages RTL */
html[lang="ar"] .limit-warning {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .trial-message {
    direction: rtl;
    text-align: right;
    border-left: none !important;
    border-right: 3px solid #60a5fa;
}

/* File Staging RTL */
html[lang="ar"] .file-staging-area {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .staged-file {
    direction: rtl;
}

/* Session Info RTL */
html[lang="ar"] .session-info-badge {
    direction: rtl;
}

html[lang="ar"] #sessionInfoText {
    direction: rtl;
    text-align: right;
}

/* Sidebar RTL */
html[lang="ar"] .sidebar {
    right: 0;
    left: auto;
    border-left: 1px solid #262626;
    border-right: none;
}

html[lang="ar"] .sidebar-toggle {
    right: 245px;
    left: auto;
}

html[lang="ar"] .sidebar.collapsed ~ .main-content .sidebar-toggle {
    right: 15px;
    left: auto;
}

/* Logo Section RTL */
html[lang="ar"] .logo-section {
    flex-direction: row-reverse;
}

/* Language Options RTL */
html[lang="ar"] .language-option {
    text-align: right;
}

/* Export Buttons RTL */
html[lang="ar"] .export-btn,
html[lang="ar"] .manual-btn {
    flex-direction: row-reverse;
}

/* ========================================
   ANIMATIONS FOR RESPONSIVE
   ======================================== */

@keyframes breathingGlow {
    0%, 100% {
        border-color: rgba(59, 130, 246, 0.8);
        box-shadow: 
            0 0 20px rgba(59, 130, 246, 0.3),
            0 0 40px rgba(59, 130, 246, 0.2),
            0 0 60px rgba(59, 130, 246, 0.1),
            inset 0 0 20px rgba(59, 130, 246, 0.05);
    }
    50% {
        border-color: rgba(96, 165, 250, 1);
        box-shadow: 
            0 0 30px rgba(96, 165, 250, 0.6),
            0 0 60px rgba(96, 165, 250, 0.4),
            0 0 90px rgba(96, 165, 250, 0.2),
            inset 0 0 30px rgba(96, 165, 250, 0.1);
    }
}

@keyframes fadeOutShrink {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        filter: blur(5px);
    }
}

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

@keyframes percentagePulse {
    0%, 100% {
        color: #60a5fa;
        text-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
    }
    50% {
        color: #93c5fd;
        text-shadow: 0 0 30px rgba(147, 197, 253, 0.8);
    }
}

@keyframes shrinkExit {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .sidebar,
    .sidebar-toggle,
    .mobile-menu-toggle,
    .input-container,
    .scroll-to-top,
    .message-actions,
    .training-status,
    .language-splash {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    .message-wrapper {
        page-break-inside: avoid;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus Visible for Keyboard Navigation */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Reduce Motion for Users with Preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .message-wrapper {
        border-width: 2px;
    }
    
    .action-btn,
    .export-btn,
    .manual-btn {
        border-width: 2px;
    }
}