/* ========================================
 AI Educational Chatbot - Main Styles (Mobile First)
 ======================================== */

/* متغیرهای CSS */
:root {
 --chatbot-primary: #667eea;
 --chatbot-primary-dark: #5a67d8;
 --chatbot-secondary: #764ba2;
 --chatbot-success: #48bb78;
 --chatbot-danger: #f56565;
 --chatbot-warning: #ed8936;
 --chatbot-light: #f7fafc;
 --chatbot-dark: #2d3748;
 --chatbot-gray: #718096;
 --chatbot-border: #e2e8f0;
 --chatbot-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 --chatbot-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
 --chatbot-radius: 12px;
 --chatbot-radius-sm: 8px;
 --chatbot-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
 Container اصلی چت‌بات (Mobile First)
 ======================================== */
.ai-chatbot-container {
 position: fixed;
 bottom: 15px;
 right: 15px;
 left: auto;
 z-index: 999999;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 direction: rtl;
 text-align: right;
}

/* ========================================
 آیکون چت‌بات (Toggle Button)
 ======================================== */
.ai-chatbot-toggle {
 width: 56px;
 height: 56px;
 background: linear-gradient(135deg, var(--chatbot-primary) 0%, var(--chatbot-secondary) 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 box-shadow: var(--chatbot-shadow);
 transition: var(--chatbot-transition);
 position: relative;
 border: none;
 outline: none;
}

.ai-chatbot-toggle:hover {
 transform: translateY(-2px) scale(1.05);
 box-shadow: var(--chatbot-shadow-lg);
}

.ai-chatbot-toggle:active {
 transform: translateY(0) scale(0.98);
}

.ai-chatbot-toggle svg {
 width: 20px;
 height: 20px;
 transition: var(--chatbot-transition);
}

.ai-chatbot-toggle:hover svg {
 transform: scale(1.1);
}

/* نشان اعلان */
.ai-chatbot-notification {
 position: absolute;
 top: -5px;
 right: -5px;
 background: var(--chatbot-danger);
 color: white;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: bold;
 animation: pulse 2s infinite;
}

@keyframes pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
}

/* ========================================
 پنجره چت اصلی (Mobile First)
 ======================================== */
.ai-chatbot-window {
 position: fixed;
 top: 10px;
 left: 10px;
 right: 10px;
 bottom: 80px;
 background: white;
 border-radius: var(--chatbot-radius-sm);
 box-shadow: var(--chatbot-shadow-lg);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 opacity: 0;
 transform: translateY(20px) scale(0.95);
 transition: var(--chatbot-transition);
 border: 1px solid var(--chatbot-border);
 max-height: calc(100vh - 90px);
}

.ai-chatbot-window.show {
 opacity: 1;
 transform: translateY(0) scale(1);
}

/* ========================================
 هدر چت‌بات
 ======================================== */
.ai-chatbot-header {
 background: linear-gradient(135deg, var(--chatbot-primary) 0%, var(--chatbot-secondary) 100%);
 color: white;
 padding: 12px 16px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-radius: var(--chatbot-radius-sm) var(--chatbot-radius-sm) 0 0;
 flex-shrink: 0;
}

.ai-chatbot-header-info h4 {
 margin: 0;
 font-size: 16px;
 font-weight: 600;
}

.ai-chatbot-status {
 font-size: 11px;
 opacity: 0.9;
 display: flex;
 align-items: center;
 margin-top: 2px;
}

.ai-chatbot-status::before {
 content: '';
 width: 6px;
 height: 6px;
 background: var(--chatbot-success);
 border-radius: 50%;
 margin-left: 4px;
 animation: blink 2s infinite;
}

@keyframes blink {
 0%, 50% { opacity: 1; }
 51%, 100% { opacity: 0.3; }
}

.ai-chatbot-close {
 background: rgba(255, 255, 255, 0.2);
 border: none;
 color: white;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 transition: var(--chatbot-transition);
}

.ai-chatbot-close:hover {
 background: rgba(255, 255, 255, 0.3);
 transform: rotate(90deg);
}

/* ========================================
 منطقه پیام‌ها
 ======================================== */
.ai-chatbot-messages {
 flex: 1;
 overflow-y: auto;
 padding: 12px;
 background: var(--chatbot-light);
 scroll-behavior: smooth;
 -webkit-overflow-scrolling: touch;
 min-height: 0;
}

.ai-chatbot-messages::-webkit-scrollbar {
 width: 4px;
}

.ai-chatbot-messages::-webkit-scrollbar-track {
 background: transparent;
}

.ai-chatbot-messages::-webkit-scrollbar-thumb {
 background: var(--chatbot-gray);
 border-radius: 2px;
}

.ai-chatbot-messages::-webkit-scrollbar-thumb:hover {
 background: var(--chatbot-dark);
}

/* ========================================
 پیام‌های چت
 ======================================== */
.ai-chatbot-message {
 margin-bottom: 12px;
 display: flex;
 flex-direction: column;
 animation: messageSlideIn 0.3s ease-out;
}

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

.ai-chatbot-message-content {
 max-width: 90%;
 padding: 10px 12px;
 border-radius: var(--chatbot-radius-sm);
 font-size: 14px;
 line-height: 1.4;
 word-wrap: break-word;
 position: relative;
}

.ai-chatbot-message-time {
 font-size: 10px;
 color: var(--chatbot-gray);
 margin-top: 3px;
 opacity: 0.7;
}

/* پیام‌های ربات */
.ai-chatbot-message.ai-chatbot-bot {
 align-items: flex-start;
}

.ai-chatbot-bot .ai-chatbot-message-content {
 background: white;
 color: var(--chatbot-dark);
 border: 1px solid var(--chatbot-border);
 border-bottom-right-radius: 4px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ai-chatbot-bot .ai-chatbot-message-content::before {
 content: '';
 position: absolute;
 bottom: 0;
 right: -6px;
 width: 0;
 height: 0;
 border: 6px solid transparent;
 border-top-color: white;
 border-right: none;
}

/* پیام‌های کاربر */
.ai-chatbot-message.ai-chatbot-user {
 align-items: flex-end;
}

.ai-chatbot-user .ai-chatbot-message-content {
 background: linear-gradient(135deg, var(--chatbot-primary) 0%, var(--chatbot-secondary) 100%);
 color: white;
 border-bottom-left-radius: 4px;
 margin-right: auto;
}

.ai-chatbot-user .ai-chatbot-message-content::before {
 content: '';
 position: absolute;
 bottom: 0;
 left: -6px;
 width: 0;
 height: 0;
 border: 6px solid transparent;
 border-top-color: var(--chatbot-primary);
 border-left: none;
}

/* ========================================
 نشانگر تایپ
 ======================================== */
.ai-chatbot-typing {
 padding: 8px 12px;
 display: flex;
 align-items: center;
 background: rgba(0, 0, 0, 0.02);
 border-top: 1px solid var(--chatbot-border);
 flex-shrink: 0;
}

.ai-chatbot-typing-indicator {
 display: flex;
 align-items: center;
 margin-left: 6px;
}

.ai-chatbot-typing-indicator span {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--chatbot-gray);
 margin: 0 1px;
 animation: typing 1.4s infinite ease-in-out;
}

.ai-chatbot-typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.ai-chatbot-typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
 0%, 80%, 100% {
 transform: scale(0.8);
 opacity: 0.5;
 }
 40% {
 transform: scale(1);
 opacity: 1;
 }
}

.ai-chatbot-typing-text {
 font-size: 11px;
 color: var(--chatbot-gray);
 font-style: italic;
}

/* ========================================
 منطقه ورودی
 ======================================== */
.ai-chatbot-input-area {
 padding: 12px;
 background: white;
 border-top: 1px solid var(--chatbot-border);
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}

.ai-chatbot-input {
 flex: 1;
 border: 2px solid var(--chatbot-border);
 border-radius: 20px;
 padding: 10px 14px;
 font-size: 16px; /* جلوگیری از zoom در iOS */
 outline: none;
 transition: var(--chatbot-transition);
 background: var(--chatbot-light);
 min-height: 20px;
}

.ai-chatbot-input:focus {
 border-color: var(--chatbot-primary);
 background: white;
 box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.ai-chatbot-input:disabled {
 opacity: 0.6;
 cursor: not-allowed;
}

.ai-chatbot-send {
 width: 40px;
 height: 40px;
 min-width: 40px;
 background: linear-gradient(135deg, var(--chatbot-primary) 0%, var(--chatbot-secondary) 100%);
 border: none;
 border-radius: 50%;
 color: white;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: var(--chatbot-transition);
 outline: none;
}

.ai-chatbot-send:hover:not(:disabled) {
 transform: scale(1.05);
 box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.ai-chatbot-send:active:not(:disabled) {
 transform: scale(0.95);
}

.ai-chatbot-send:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 transform: none;
}

.ai-chatbot-send svg {
 width: 16px;
 height: 16px;
}

/* ========================================
 فوتر چت‌بات
 ======================================== */
.ai-chatbot-footer {
 padding: 6px 12px;
 background: rgba(0, 0, 0, 0.02);
 border-top: 1px solid var(--chatbot-border);
 text-align: center;
 flex-shrink: 0;
}

.ai-chatbot-footer small {
 color: var(--chatbot-gray);
 font-size: 10px;
}

/* ========================================
 Desktop Enhancement (min-width: 769px)
 ======================================== */
@media (min-width: 769px) {
 .ai-chatbot-container {
 bottom: 20px;
 right: 20px;
 left: auto;
 }
 
 .ai-chatbot-toggle {
 width: 64px;
 height: 64px;
 }
 
 .ai-chatbot-toggle svg {
 width: 24px;
 height: 24px;
 }
 
 .ai-chatbot-notification {
 width: 24px;
 height: 24px;
 font-size: 12px;
 }
 
 .ai-chatbot-window {
 position: relative;
 width: 380px;
 height: 550px;
 top: auto;
 left: auto;
 right: auto;
 bottom: auto;
 margin-bottom: 15px;
 border-radius: var(--chatbot-radius);
 max-height: none;
 }
 
 .ai-chatbot-header {
 padding: 20px;
 border-radius: var(--chatbot-radius) var(--chatbot-radius) 0 0;
 }
 
 .ai-chatbot-header-info h4 {
 font-size: 18px;
 }
 
 .ai-chatbot-status {
 font-size: 12px;
 margin-top: 4px;
 }
 
 .ai-chatbot-status::before {
 width: 8px;
 height: 8px;
 margin-left: 6px;
 }
 
 .ai-chatbot-close {
 width: 32px;
 height: 32px;
 font-size: 20px;
 }
 
 .ai-chatbot-messages {
 padding: 20px;
 }
 
 .ai-chatbot-messages::-webkit-scrollbar {
 width: 6px;
 }
 
 .ai-chatbot-message {
 margin-bottom: 16px;
 }
 
 .ai-chatbot-message-content {
 max-width: 85%;
 padding: 12px 16px;
 font-size: 14px;
 line-height: 1.5;
 }
 
 .ai-chatbot-message-time {
 font-size: 11px;
 margin-top: 4px;
 }
 
 .ai-chatbot-bot .ai-chatbot-message-content::before,
 .ai-chatbot-user .ai-chatbot-message-content::before {
 border-width: 8px;
 }
 
 .ai-chatbot-bot .ai-chatbot-message-content::before {
 right: -8px;
 }
 
 .ai-chatbot-user .ai-chatbot-message-content::before {
 left: -8px;
 }
 
 .ai-chatbot-typing {
 padding: 12px 20px;
 }
 
 .ai-chatbot-typing-indicator {
 margin-left: 8px;
 }
 
 .ai-chatbot-typing-indicator span {
 width: 8px;
 height: 8px;
 margin: 0 2px;
 }
 
 .ai-chatbot-typing-text {
 font-size: 12px;
 }
 
 .ai-chatbot-input-area {
 padding: 20px;
 gap: 12px;
 }
 
 .ai-chatbot-input {
 border-radius: 25px;
 padding: 12px 16px;
 font-size: 14px;
 }
 
 .ai-chatbot-send {
 width: 44px;
 height: 44px;
 min-width: 44px;
 }
 
 .ai-chatbot-send svg {
 width: 20px;
 height: 20px;
 }
 
 .ai-chatbot-footer {
 padding: 8px 20px;
 }
 
 .ai-chatbot-footer small {
 font-size: 11px;
 }
}

/* ========================================
 Tablet Enhancement (min-width: 481px and max-width: 768px)
 ======================================== */
@media (min-width: 481px) and (max-width: 768px) {
 .ai-chatbot-window {
 top: 20px;
 left: 20px;
 right: 20px;
 bottom: 90px;
 max-height: calc(100vh - 110px);
 }
 
 .ai-chatbot-header {
 padding: 16px;
 }
 
 .ai-chatbot-messages {
 padding: 16px;
 }
 
 .ai-chatbot-input-area {
 padding: 16px;
 gap: 10px;
 }
 
 .ai-chatbot-message-content {
 font-size: 14px;
 }
}

/* ========================================
 حالت‌های خاص
 ======================================== */
.ai-chatbot-container.ai-chatbot-minimized .ai-chatbot-toggle {
 animation: bounce 2s infinite;
}

@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {
 transform: translateY(0);
 }
 40% {
 transform: translateY(-5px);
 }
 60% {
 transform: translateY(-3px);
 }
}

/* حالت لودینگ */
.ai-chatbot-loading .ai-chatbot-input {
 opacity: 0.7;
}

.ai-chatbot-loading .ai-chatbot-send {
 animation: rotation 1s linear infinite;
}

@keyframes rotation {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

/* ========================================
 انیمیشن‌های اضافی
 ======================================== */
.ai-chatbot-fade-in {
 animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}

.ai-chatbot-slide-up {
 animation: slideUp 0.3s ease-out;
}

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

/* ========================================
 تم تیره (برای آینده)
 ======================================== */
.ai-chatbot-dark-theme {
 --chatbot-light: #2d3748;
 --chatbot-dark: #f7fafc;
 --chatbot-border: #4a5568;
}

.ai-chatbot-dark-theme .ai-chatbot-window {
 background: var(--chatbot-light);
 color: var(--chatbot-dark);
}

.ai-chatbot-dark-theme .ai-chatbot-messages {
 background: #1a202c;
}

.ai-chatbot-dark-theme .ai-chatbot-bot .ai-chatbot-message-content {
 background: #4a5568;
 color: white;
 border-color: #718096;
}

/* اضافه کردن به فایل chatbot.css */
.ai-chatbot-toggle.hidden {
 display: none !important;
 opacity: 0;
 visibility: hidden;
}

/* ========================================
 رفع مشکلات خاص موبایل
 ======================================== */
@media (max-width: 480px) {
 /* جلوگیری از اسکرول صفحه هنگام باز بودن چت */
 body.ai-chatbot-open {
 overflow: hidden;
 position: fixed;
 width: 100%;
 }
 
 /* بهبود تاچ اسکرولینگ */
 .ai-chatbot-messages {
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 }
 
 /* بهبود کیبورد موبایل */
 .ai-chatbot-input {
 -webkit-appearance: none;
 -webkit-border-radius: 20px;
 }
}

/* رفع مشکل iOS Safari */
@supports (-webkit-touch-callout: none) {
 .ai-chatbot-window {
 height: calc(100vh - 90px);
 height: calc(100dvh - 90px); /* Dynamic Viewport Height */
 }
}


/* اضافه کردن به انتهای فایل CSS موجود */

/* ========================================
 فرمت‌بندی پیشرفته پیام‌ها
 ======================================== */

/* لیست‌های عددی و نقطه‌ای */
.ai-chatbot-message-content ol,
.ai-chatbot-message-content ul {
 margin: 8px 0;
 padding-right: 20px;
 line-height: 1.6;
}

.ai-chatbot-message-content li {
 margin-bottom: 4px;
 position: relative;
}

.ai-chatbot-message-content ol li {
 list-style-type: decimal;
 font-weight: 500;
}

.ai-chatbot-message-content ul li {
 list-style-type: disc;
}

/* متن‌های فرمت شده */
.ai-chatbot-message-content strong,
.ai-chatbot-message-content b {
 font-weight: 700;
 color: var(--chatbot-primary);
}

.ai-chatbot-message-content em,
.ai-chatbot-message-content i {
 font-style: italic;
 color: var(--chatbot-secondary);
}

/* کد و code blocks */
.ai-chatbot-code-block {
 background: #f8f9fa;
 border: 1px solid #e9ecef;
 border-radius: 6px;
 padding: 12px;
 margin: 8px 0;
 font-family: 'Courier New', Consolas, Monaco, monospace;
 font-size: 13px;
 line-height: 1.4;
 position: relative;
 overflow-x: auto;
 direction: ltr;
 text-align: left;
}

.ai-chatbot-code-block::before {
 content: 'کد';
 position: absolute;
 top: -8px;
 right: 8px;
 background: var(--chatbot-primary);
 color: white;
 padding: 2px 8px;
 border-radius: 4px;
 font-size: 10px;
 font-family: inherit;
}

.ai-chatbot-inline-code {
 background: #f1f3f4;
 padding: 2px 6px;
 border-radius: 4px;
 font-family: 'Courier New', Consolas, Monaco, monospace;
 font-size: 0.9em;
 color: #d73a49;
 border: 1px solid #e1e4e8;
}

/* جداول */
.ai-chatbot-table {
 width: 100%;
 border-collapse: collapse;
 margin: 10px 0;
 font-size: 13px;
}

.ai-chatbot-table th,
.ai-chatbot-table td {
 border: 1px solid var(--chatbot-border);
 padding: 8px 12px;
 text-align: right;
}

.ai-chatbot-table th {
 background: var(--chatbot-light);
 font-weight: 600;
 color: var(--chatbot-primary);
}

.ai-chatbot-table tr:nth-child(even) {
 background: rgba(102, 126, 234, 0.05);
}

/* لینک‌ها */
.ai-chatbot-message-content a {
 color: var(--chatbot-primary);
 text-decoration: none;
 border-bottom: 1px solid transparent;
 transition: var(--chatbot-transition);
}

.ai-chatbot-message-content a:hover {
 border-bottom-color: var(--chatbot-primary);
}

/* نقل قول */
.ai-chatbot-blockquote {
 border-right: 4px solid var(--chatbot-primary);
 margin: 10px 0;
 padding: 10px 15px;
 background: rgba(102, 126, 234, 0.05);
 font-style: italic;
 border-radius: 0 6px 6px 0;
}

/* ========================================
 اکشن‌های پیام
 ======================================== */
.ai-chatbot-message-actions {
 display: flex;
 gap: 8px;
 margin-top: 8px;
 padding-top: 8px;
 border-top: 1px solid rgba(0, 0, 0, 0.1);
 opacity: 0;
 transition: var(--chatbot-transition);
}

.ai-chatbot-message:hover .ai-chatbot-message-actions {
 opacity: 1;
}

.ai-chatbot-action-btn {
 background: none;
 border: 1px solid var(--chatbot-border);
 border-radius: 15px;
 padding: 4px 8px;
 font-size: 11px;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 4px;
 color: var(--chatbot-gray);
 transition: var(--chatbot-transition);
}

.ai-chatbot-action-btn:hover {
 background: var(--chatbot-light);
 color: var(--chatbot-primary);
 border-color: var(--chatbot-primary);
}

.ai-chatbot-action-btn svg {
 width: 12px;
 height: 12px;
}

.ai-chatbot-action-btn.copied {
 background: var(--chatbot-success);
 color: white;
 border-color: var(--chatbot-success);
}

/* ========================================
 ایموجی و آیکون‌ها
 ======================================== */
.ai-chatbot-emoji {
 font-size: 1.2em;
 margin: 0 2px;
}

/* ========================================
 نوتیفیکیشن کپی
 ======================================== */
.ai-chatbot-copy-notification {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: var(--chatbot-success);
 color: white;
 padding: 8px 16px;
 border-radius: 6px;
 font-size: 12px;
 z-index: 1000000;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.ai-chatbot-copy-notification.show {
 opacity: 1;
}

/* ========================================
 Responsive برای اکشن‌ها
 ======================================== */
@media (max-width: 480px) {
 .ai-chatbot-message-actions {
 opacity: 1; /* همیشه نمایش در موبایل */
 flex-wrap: wrap;
 }
 
 .ai-chatbot-action-btn {
 font-size: 10px;
 padding: 3px 6px;
 }
 
 .ai-chatbot-code-block {
 font-size: 11px;
 padding: 8px;
 }
 
 .ai-chatbot-table {
 font-size: 11px;
 }
 
 .ai-chatbot-table th,
 .ai-chatbot-table td {
 padding: 6px 8px;
 }
}


/* اضافه کردن به انتهای فایل chatbot.css موجود */

/* ========================================
 دکمه‌های کنترل پنجره (تمام صفحه و بستن)
 ======================================== */
.ai-chatbot-header-controls {
 display: flex;
 align-items: center;
 gap: 8px;
}

.ai-chatbot-fullscreen,
.ai-chatbot-minimize {
 background: rgba(255, 255, 255, 0.2);
 border: none;
 color: white;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 16px;
 transition: var(--chatbot-transition);
}

.ai-chatbot-fullscreen:hover,
.ai-chatbot-minimize:hover {
 background: rgba(255, 255, 255, 0.3);
 transform: scale(1.1);
}

.ai-chatbot-fullscreen svg,
.ai-chatbot-minimize svg {
 width: 14px;
 height: 14px;
 fill: currentColor;
}

/* ========================================
 حالت تمام صفحه
 ======================================== */
.ai-chatbot-window.fullscreen {
 position: fixed !important;
 top: 10px !important;
 left: 10px !important;
 right: 10px !important;
 bottom: 10px !important;
 width: calc(100vw - 20px) !important;
 height: calc(100vh - 20px) !important;
 max-height: none !important;
 z-index: 999999 !important;
 border-radius: var(--chatbot-radius-sm) !important;
}

/* حالت تمام صفحه در دسکتاپ */
@media (min-width: 769px) {
 .ai-chatbot-window.fullscreen {
 border-radius: var(--chatbot-radius) !important;
 }
}

/* مخفی کردن دکمه چت‌بات در حالت تمام صفحه */
.ai-chatbot-container.fullscreen-mode .ai-chatbot-toggle {
 display: none !important;
}

/* انیمیشن برای تغییر حالت */
.ai-chatbot-window.transitioning {
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
 بهینه‌سازی موبایل برای تمام صفحه
 ======================================== */
@media (max-width: 480px) {
 .ai-chatbot-window.fullscreen {
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 bottom: 0 !important;
 width: 100vw !important;
 height: 100vh !important;
 height: 100dvh !important; /* Dynamic Viewport Height */
 border-radius: 0 !important;
 }
 
 /* جلوگیری از اسکرول صفحه در حالت تمام صفحه */
 body.ai-chatbot-fullscreen {
 overflow: hidden !important;
 position: fixed !important;
 width: 100% !important;
 height: 100% !important;
 }
}

/* ========================================
 تنظیمات اضافی برای حالت تمام صفحه
 ======================================== */
.ai-chatbot-window.fullscreen .ai-chatbot-messages {
 flex: 1;
 min-height: 0;
}

.ai-chatbot-window.fullscreen .ai-chatbot-header {
 flex-shrink: 0;
}

.ai-chatbot-window.fullscreen .ai-chatbot-input-area {
 flex-shrink: 0;
}

.ai-chatbot-window.fullscreen .ai-chatbot-footer {
 flex-shrink: 0;
}

/* نمایش دکمه minimize فقط در حالت تمام صفحه */
.ai-chatbot-minimize {
 display: none;
}

.ai-chatbot-window.fullscreen .ai-chatbot-minimize {
 display: flex;
}

/* مخفی کردن دکمه fullscreen در حالت تمام صفحه */
.ai-chatbot-window.fullscreen .ai-chatbot-fullscreen {
 display: none;
}

/* ========================================
 رفع مشکل خروج از صفحه در موبایل
 ======================================== */

/* تنظیمات کلی برای موبایل */
@media (max-width: 480px) {
 /* تنظیم container اصلی */
 .ai-chatbot-container {
 bottom: 10px;
 right: 10px;
 left: 10px;
 }
 
 /* تنظیم پنجره چت */
 .ai-chatbot-window {
 position: fixed !important;
 top: 10px !important;
 left: 10px !important;
 right: 10px !important;
 bottom: 10px !important;
 width: calc(100vw - 20px) !important;
 height: calc(100vh - 20px) !important;
 max-width: none !important;
 max-height: none !important;
 margin: 0 !important;
 padding: 0 !important;
 }
 
 /* تنظیم منطقه ورودی */
 .ai-chatbot-input-area {
 padding: 10px !important;
 gap: 8px !important;
 position: relative;
 flex-shrink: 0;
 width: 100%;
 box-sizing: border-box;
 }
 
 /* تنظیم input */
 .ai-chatbot-input {
 flex: 1;
 min-width: 0 !important;
 width: auto !important;
 max-width: none !important;
 font-size: 16px !important; /* جلوگیری از zoom */
 padding: 8px 12px !important;
 border-radius: 18px !important;
 box-sizing: border-box;
 }
 
 /* تنظیم دکمه ارسال */
 .ai-chatbot-send {
 width: 36px !important;
 height: 36px !important;
 min-width: 36px !important;
 flex-shrink: 0;
 }
 
 /* تنظیم هدر */
 .ai-chatbot-header {
 padding: 12px !important;
 flex-shrink: 0;
 }
 
 /* تنظیم منطقه پیام‌ها */
 .ai-chatbot-messages {
 flex: 1;
 min-height: 0;
 overflow-y: auto;
 padding: 10px !important;
 -webkit-overflow-scrolling: touch;
 }
 
 /* تنظیم فوتر */
 .ai-chatbot-footer {
 padding: 6px 10px !important;
 flex-shrink: 0;
 }
 
 /* حالت تمام صفحه در موبایل */
 .ai-chatbot-window.fullscreen {
 top: 0 !important;
 left: 0 !important;
 right: 0 !important;
 bottom: 0 !important;
 width: 100vw !important;
 height: 100vh !important;
 height: 100dvh !important; /* Dynamic Viewport Height */
 border-radius: 0 !important;
 }
 
 /* تنظیم input در حالت تمام صفحه */
 .ai-chatbot-window.fullscreen .ai-chatbot-input-area {
 padding: 12px !important;
 }
 
 .ai-chatbot-window.fullscreen .ai-chatbot-input {
 padding: 10px 14px !important;
 }
 
 .ai-chatbot-window.fullscreen .ai-chatbot-send {
 width: 40px !important;
 height: 40px !important;
 min-width: 40px !important;
 }
}

/* تنظیمات خاص برای صفحات خیلی کوچک */
@media (max-width: 360px) {
 .ai-chatbot-input-area {
 padding: 8px !important;
 gap: 6px !important;
 }
 
 .ai-chatbot-input {
 padding: 6px 10px !important;
 font-size: 14px !important;
 }
 
 .ai-chatbot-send {
 width: 32px !important;
 height: 32px !important;
 min-width: 32px !important;
 }
 
 .ai-chatbot-send svg {
 width: 14px !important;
 height: 14px !important;
 }
}

/* رفع مشکل keyboard در iOS */
@supports (-webkit-touch-callout: none) {
 @media (max-width: 480px) {
 .ai-chatbot-window {
 height: calc(100vh - 20px) !important;
 height: calc(100dvh - 20px) !important;
 }
 
 .ai-chatbot-window.fullscreen {
 height: 100vh !important;
 height: 100dvh !important;
 }
 
 /* تنظیم خاص برای هنگام باز شدن کیبورد */
 .ai-chatbot-input:focus {
 transform: translateZ(0); /* فعال‌سازی GPU acceleration */
 }
 }
}

/* تنظیمات viewport برای جلوگیری از overflow */
@media (max-width: 480px) {
 .ai-chatbot-window * {
 box-sizing: border-box;
 }
 
 /* جلوگیری از horizontal scroll */
 .ai-chatbot-window {
 overflow-x: hidden !important;
 }
 
 .ai-chatbot-input-area {
 overflow: visible !important;
 }
 
 /* تنظیم flex برای input area */
 .ai-chatbot-input-area {
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 }
}

/* تنظیمات اضافی برای safe area در موبایل‌های جدید */
@media (max-width: 480px) {
 .ai-chatbot-window {
 padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 .ai-chatbot-input-area {
 padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
 }
}

/* ========================================
 مخفی کردن دکمه فول‌اسکرین در موبایل
 ======================================== */

/* مخفی کردن دکمه‌های فول‌اسکرین در موبایل */
@media (max-width: 480px) {
 .ai-chatbot-fullscreen,
 .ai-chatbot-minimize {
 display: none !important;
 }
 
 /* تنظیم header controls برای موبایل */
 .ai-chatbot-header-controls {
 gap: 0 !important;
 }
 
 /* تنظیم دکمه بستن برای موبایل */
 .ai-chatbot-close {
 margin-right: auto;
 }
}

/* نمایش دکمه‌ها فقط در دسکتاپ */
@media (min-width: 481px) {
 .ai-chatbot-fullscreen,
 .ai-chatbot-minimize {
 display: flex !important;
 }
}

/* ========================================
 Quick Reply Buttons - دکمه‌های پاسخ سریع
 ======================================== */

.ai-chatbot-quick-replies {
 padding: 0 16px 12px;
 display: flex;
 overflow-x: auto;
 gap: 8px;
 scrollbar-width: thin; /* Firefox */
 scrollbar-color: var(--chatbot-border, #e0e0e0) transparent;
 -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}

/* مخفی کردن اسکرول‌بار در کروم و سافاری */
.ai-chatbot-quick-replies::-webkit-scrollbar {
 height: 4px;
}

.ai-chatbot-quick-replies::-webkit-scrollbar-track {
 background: transparent;
}

.ai-chatbot-quick-replies::-webkit-scrollbar-thumb {
 background-color: var(--chatbot-border, #e0e0e0);
 border-radius: 20px;
}

/* استایل دکمه‌های پاسخ سریع */
.ai-chatbot-quick-reply {
 background-color: #ffffff;
 border: 1px solid var(--chatbot-primary, #667eea);
 color: var(--chatbot-primary, #667eea);
 padding: 8px 16px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 500;
 cursor: pointer;
 transition: all 0.2s ease;
 white-space: nowrap;
 flex-shrink: 0;
 user-select: none;
 outline: none;
 font-family: inherit;
 line-height: 1.2;
}

/* حالت hover دکمه‌ها */
.ai-chatbot-quick-reply:hover {
 background-color: var(--chatbot-primary, #667eea);
 color: #ffffff;
 transform: translateY(-2px);
 box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

/* حالت active دکمه‌ها */
.ai-chatbot-quick-reply:active {
 transform: translateY(0);
 box-shadow: none;
}

/* انیمیشن ورود دکمه‌ها */
.ai-chatbot-quick-reply {
 animation: quickReplySlideIn 0.3s ease-out;
 animation-fill-mode: both;
}

.ai-chatbot-quick-reply:nth-child(1) { animation-delay: 0.1s; }
.ai-chatbot-quick-reply:nth-child(2) { animation-delay: 0.2s; }
.ai-chatbot-quick-reply:nth-child(3) { animation-delay: 0.3s; }
.ai-chatbot-quick-reply:nth-child(4) { animation-delay: 0.4s; }

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

/* تنظیمات موبایل */
@media (max-width: 480px) {
 .ai-chatbot-quick-replies {
 padding: 0 12px 10px;
 gap: 6px;
 }
 
 .ai-chatbot-quick-reply {
 padding: 6px 12px;
 font-size: 12px;
 border-radius: 16px;
 }
 
 .ai-chatbot-quick-reply:hover {
 transform: translateY(-1px);
 }
}

/* تنظیمات صفحات خیلی کوچک */
@media (max-width: 360px) {
 .ai-chatbot-quick-replies {
 padding: 0 10px 8px;
 gap: 4px;
 }
 
 .ai-chatbot-quick-reply {
 padding: 5px 10px;
 font-size: 11px;
 border-radius: 14px;
 }
}

/* حالت تمام صفحه */
.ai-chatbot-window.fullscreen .ai-chatbot-quick-replies {
 padding: 0 20px 16px;
 gap: 10px;
}

.ai-chatbot-window.fullscreen .ai-chatbot-quick-reply {
 padding: 10px 18px;
 font-size: 14px;
 border-radius: 22px;
}

/* تنظیمات تم تیره (اگر داری) */
.ai-chatbot-window.dark-theme .ai-chatbot-quick-reply {
 background-color: #2a2a2a;
 border-color: var(--chatbot-primary, #667eea);
 color: var(--chatbot-primary, #667eea);
}

.ai-chatbot-window.dark-theme .ai-chatbot-quick-reply:hover {
 background-color: var(--chatbot-primary, #667eea);
 color: #ffffff;
}