/* AI Chat Widget Styles - RTL Support */

.chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
font-family: 'Assistant', Arial, sans-serif;
direction: rtl;
}

[dir="ltr"] .chat-widget {
right: auto;
left: 20px;
}

/* Chat Button */
.chat-button {
width: 60px;
height: 60px;
border-radius: 50%;
background: #111827;
color: white;
border: none;
cursor: pointer;
box-shadow: 0 4px 20px rgba(17, 24, 39, 0.25);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

.chat-button:hover {
background: #1f2937;
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(17, 24, 39, 0.35);
}

.chat-button .icon {
width: 26px;
height: 26px;
position: relative;
z-index: 1;
}

/* Chat Window */
.chat-window {
position: absolute;
bottom: 80px;
right: 0;
width: 380px;
height: 550px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0) translateY(50px);
opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: bottom right;
}

[dir="ltr"] .chat-window {
right: auto;
left: 0;
transform-origin: bottom left;
}

.chat-window.open {
transform: scale(1) translateY(0);
opacity: 1;
}

/* Chat Header */
.chat-header {
background: white;
color: #111827;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #f3f4f6;
}

.chat-header h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
color: #111827;
}

.chat-header h3 .icon {
width: 20px;
height: 20px;
color: #6b7280;
}

.chat-close {
background: #f3f4f6;
border: none;
color: #6b7280;
cursor: pointer;
padding: 8px;
border-radius: 10px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.chat-close:hover {
background: #e5e7eb;
color: #111827;
}

.chat-close .icon {
width: 18px;
height: 18px;
}

/* Chat Messages */
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
background: #fafafa;
}

.chat-messages::-webkit-scrollbar {
width: 6px;
}

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

.chat-messages::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}

/* Message Bubbles */
.message {
max-width: 75%;
padding: 12px 16px;
border-radius: 18px;
font-size: 14.5px;
line-height: 1.5;
position: relative;
animation: messageSlide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.message.user {
background: #111827;
color: white;
align-self: flex-end;
border-bottom-right-radius: 6px;
}

[dir="ltr"] .message.user {
align-self: flex-end;
border-bottom-right-radius: 18px;
border-bottom-left-radius: 6px;
}

.message.bot {
background: white;
color: #374151;
align-self: flex-start;
border: 1px solid #e5e7eb;
border-bottom-left-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[dir="ltr"] .message.bot {
border-bottom-left-radius: 18px;
border-bottom-right-radius: 6px;
}

/* Typing Indicator */
.typing-indicator {
background: white;
border: 1px solid #e5e7eb;
border-radius: 18px;
border-bottom-left-radius: 6px;
padding: 14px 18px;
align-self: flex-start;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[dir="ltr"] .typing-indicator {
border-bottom-left-radius: 18px;
border-bottom-right-radius: 6px;
}

.typing-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #6b7280;
animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
animation-delay: 0.4s;
}

@keyframes typingBounce {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.5;
}
30% {
transform: translateY(-8px);
opacity: 1;
}
}

/* Chat Input */
.chat-input {
padding: 18px 20px;
border-top: 1px solid #f3f4f6;
background: white;
}

.input-container {
display: flex;
gap: 10px;
align-items: flex-end;
}

.chat-textarea {
flex: 1;
min-height: 44px;
max-height: 100px;
padding: 12px 14px;
border: 1px solid #e5e7eb;
border-radius: 14px;
font-family: inherit;
font-size: 14.5px;
line-height: 1.5;
resize: none;
background: #fafafa;
transition: all 0.2s ease;
direction: rtl;
}

[dir="ltr"] .chat-textarea {
direction: ltr;
}

.chat-textarea:focus {
outline: none;
border-color: #9ca3af;
background: white;
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1);
}

.chat-textarea::placeholder {
color: #9ca3af;
}

.send-button {
width: 44px;
height: 44px;
border-radius: 12px;
background: #111827;
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
flex-shrink: 0;
}

.send-button:hover {
background: #1f2937;
transform: scale(1.03);
}

.send-button:active {
transform: scale(0.97);
}

.send-button:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}

.send-button .icon {
width: 18px;
height: 18px;
}

/* Welcome Message */
.welcome-message {
text-align: center;
color: #6b7280;
font-size: 14.5px;
padding: 24px 20px;
background: white;
border-radius: 16px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
line-height: 1.6;
}

.welcome-message .icon {
width: 36px;
height: 36px;
margin: 0 auto 14px;
color: #111827;
}

/* Responsive Design */
@media (max-width: 768px) {
.chat-widget {
bottom: 16px;
right: 16px;
left: auto;
}

[dir="ltr"] .chat-widget {
right: auto;
left: 16px;
}

.chat-window {
width: calc(100vw - 32px);
height: calc(100vh - 160px);
max-height: 500px;
right: 0;
left: auto;
}
.chat-button {
width: 50px;
height: 50px;
}

[dir="ltr"] .chat-window {
left: 0;
right: auto;
}
}

/* Error States */
.error-message {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 14px 16px;
border-radius: 12px;
font-size: 14.5px;
text-align: center;
margin: 8px 0;
line-height: 1.5;
}

/* Success States */
.success-message {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #15803d;
padding: 14px 16px;
border-radius: 12px;
font-size: 14.5px;
text-align: center;
margin: 8px 0;
line-height: 1.5;
}

/* Markdown Styling for Chat Messages */

/* Headings */
.chat-h1 {
font-size: 18px;
font-weight: 700;
color: #374151;
margin: 12px 0 8px 0;
line-height: 1.3;
}

.chat-h2 {
font-size: 16px;
font-weight: 600;
color: #374151;
margin: 10px 0 6px 0;
line-height: 1.3;
}

.chat-h3 {
font-size: 15px;
font-weight: 600;
color: #4b5563;
margin: 8px 0 4px 0;
line-height: 1.3;
}

/* Text Formatting */
.chat-bold {
font-weight: 600;
color: #1f2937;
}

.chat-italic {
font-style: italic;
color: #4b5563;
}

.chat-strikethrough {
text-decoration: line-through;
color: #6b7280;
}

/* Code */
.chat-inline-code {
background: #f3f4f6;
color: #111827;
padding: 3px 7px;
border-radius: 6px;
font-family: 'Courier New', Monaco, monospace;
font-size: 13px;
font-weight: 500;
border: 1px solid #e5e7eb;
}

.chat-code-block {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px;
margin: 10px 0;
overflow-x: auto;
direction: ltr; /* Code is always LTR */
}

.chat-code-block code {
font-family: 'Courier New', Monaco, monospace;
font-size: 13px;
line-height: 1.5;
color: #374151;
white-space: pre;
}

/* Links */
.chat-link {
color: #111827;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid #d1d5db;
transition: all 0.2s ease;
}

.chat-link:hover {
color: #000000;
border-bottom-color: #111827;
background: #f3f4f6;
padding: 2px 4px;
border-radius: 4px;
}

/* Lists */
.chat-list {
margin: 8px 0;
padding-right: 20px;
padding-left: 0;
}

[dir="ltr"] .chat-list {
padding-left: 20px;
padding-right: 0;
}

.chat-ordered-list {
list-style-type: decimal;
}

.chat-list:not(.chat-ordered-list) {
list-style-type: disc;
}

.chat-list-item {
margin: 4px 0;
line-height: 1.5;
color: #374151;
}

.chat-list-item::marker {
color: #111827;
}

/* Paragraphs */
.chat-paragraph {
margin: 8px 0;
line-height: 1.6;
}

.chat-paragraph:first-child {
margin-top: 0;
}

.chat-paragraph:last-child {
margin-bottom: 0;
}

/* Message Content Wrapper */
.message-content {
word-wrap: break-word;
overflow-wrap: break-word;
}

/* Special formatting for Hebrew/RTL content */
[dir="rtl"] .message-content {
text-align: right;
}

[dir="ltr"] .message-content {
text-align: left;
}

/* Blockquotes (for future use) */
.chat-blockquote {
border-right: 3px solid #111827;
padding: 10px 14px;
margin: 10px 0;
background: #f9fafb;
border-radius: 0 8px 8px 0;
font-style: italic;
color: #4b5563;
}

[dir="ltr"] .chat-blockquote {
border-right: none;
border-left: 3px solid #111827;
border-radius: 8px 0 0 8px;
}

/* Tables (for future use) */
.chat-table {
border-collapse: collapse;
margin: 8px 0;
font-size: 13px;
width: 100%;
}

.chat-table th,
.chat-table td {
border: 1px solid #e2e8f0;
padding: 6px 10px;
text-align: right;
}

[dir="ltr"] .chat-table th,
[dir="ltr"] .chat-table td {
text-align: left;
}

.chat-table th {
background: #f8fafc;
font-weight: 600;
color: #374151;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.chat-h1 {
font-size: 16px;
}

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

.chat-h3 {
font-size: 14px;
}

.chat-code-block {
font-size: 12px;
padding: 8px;
}

.chat-inline-code {
font-size: 12px;
}
}