/* =====================================================
دستیار هوشمند دانشگاه ایلام
نسخه پاپ‌آپ شناور
===================================================== */

:root {
--primary: #005BAC;
--background: #F5F7FA;
--user-bubble: #005BAC;
--bot-bubble: #ECECEC;
--text-dark: #1E293B;
--text-light: #FFFFFF;
--text-muted: #64748B;
--border: #E2E8F0;
}

/* ---------- تنظیمات عمومی ---------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html,
body {
width: 100%;
min-height: 100%;
}

body {
font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
color: var(--text-dark);
}

/* =====================================================
دکمه شناور باز کردن چت
===================================================== */

.chat-toggle {
position: fixed;


bottom: 24px;
right: 24px;

width: 64px;
height: 64px;

border: none;
border-radius: 50%;

background: var(--primary);
color: var(--text-light);

display: flex;
align-items: center;
justify-content: center;

font-size: 28px;

cursor: pointer;

box-shadow:
    0 8px 25px rgba(0, 91, 172, 0.35);

z-index: 9999;

transition:
    transform 0.2s,
    opacity 0.2s,
    box-shadow 0.2s;


}

.chat-toggle:hover {
transform: scale(1.08);


box-shadow:
    0 12px 30px rgba(0, 91, 172, 0.45);


}

.chat-toggle:active {
transform: scale(0.95);
}

.chat-icon {
line-height: 1;
}

/* =====================================================
پنجره پاپ‌آپ
===================================================== */

.chat-popup {
position: fixed;


bottom: 100px;
right: 24px;

width: 400px;
height: 600px;

max-height: calc(100vh - 130px);

background: var(--background);

border-radius: 20px;

overflow: hidden;

display: flex;
flex-direction: column;

box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.20);

border:
    1px solid var(--border);

z-index: 9998;


/* حالت اولیه: مخفی */
opacity: 0;

visibility: hidden;

transform:
    translateY(20px)
    scale(0.97);

transform-origin:
    bottom right;

pointer-events: none;

transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;


}

/* حالت باز */

.chat-popup.active {
opacity: 1;


visibility: visible;

transform:
    translateY(0)
    scale(1);

pointer-events: auto;


}

/* =====================================================
Header
===================================================== */

.header {
background: var(--primary);


color: var(--text-light);

padding: 14px 16px;

box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12);

flex-shrink: 0;


}

.header-content {
width: 100%;


display: flex;

align-items: center;

justify-content: space-between;

gap: 10px;


}

.header-info {
display: flex;


align-items: center;

gap: 10px;

min-width: 0;


}

.header-logo {
font-size: 26px;


line-height: 1;

flex-shrink: 0;


}

.header-title {
font-size: 1rem;


font-weight: 600;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;


}

.header-status {
display: inline-block;


margin-top: 4px;

font-size: 0.72rem;

background:
    rgba(255, 255, 255, 0.20);

padding: 3px 10px;

border-radius: 999px;


}

/* دکمه بستن */

.chat-close {
width: 36px;
height: 36px;


border: none;

border-radius: 50%;

background:
    rgba(255, 255, 255, 0.15);

color: var(--text-light);

font-size: 28px;

line-height: 1;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

flex-shrink: 0;

transition:
    background 0.2s,
    transform 0.2s;


}

.chat-close:hover {
background:
rgba(255, 255, 255, 0.25);


transform: rotate(90deg);


}

/* =====================================================
ناحیه گفتگو
===================================================== */

.chat-area {
flex: 1;


overflow-y: auto;

padding: 18px;

width: 100%;

display: flex;

flex-direction: column;

gap: 12px;


}

.message {
display: flex;


width: 100%;


}

/* کاربر سمت راست */

.message.user {
justify-content: flex-start;
}

/* ربات سمت چپ */

.message.bot {
justify-content: flex-end;
}

.bubble {
max-width: 80%;


padding: 11px 15px;

border-radius: 16px;

font-size: 0.92rem;

line-height: 1.8;

word-break: break-word;

white-space: pre-wrap;


}

/* پیام کاربر */

.message.user .bubble {
background: var(--user-bubble);


color: var(--text-light);

border-bottom-right-radius: 4px;


}

/* پیام ربات */

.message.bot .bubble {
background: var(--bot-bubble);


color: var(--text-dark);

border-bottom-left-radius: 4px;


}

/* =====================================================
در حال نوشتن
===================================================== */

.typing .bubble {
display: flex;


align-items: center;

gap: 4px;


}

.typing .dot {
width: 8px;
height: 8px;


border-radius: 50%;

background: var(--text-muted);

animation:
    blink 1.2s infinite;


}

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

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

@keyframes blink {


0%,
80%,
100% {
    opacity: 0.3;
}

40% {
    opacity: 1;
}


}

/* =====================================================
ناحیه ارسال پیام
===================================================== */

.input-area {
flex-shrink: 0;


padding: 12px;

background: var(--text-light);

border-top:
    1px solid var(--border);

width: 100%;

display: flex;

gap: 8px;


}

#message-input {
flex: 1;


min-width: 0;

padding: 11px 14px;

border:
    1px solid var(--border);

border-radius: 999px;

font-size: 0.9rem;

font-family: inherit;

outline: none;

background: var(--background);

transition:
    border-color 0.2s;


}

#message-input:focus {
border-color: var(--primary);
}

#send-button {
padding: 11px 18px;


background: var(--primary);

color: var(--text-light);

border: none;

border-radius: 999px;

font-size: 0.9rem;

font-family: inherit;

cursor: pointer;

transition:
    opacity 0.2s,
    transform 0.1s;


}

#send-button:hover {
opacity: 0.9;
}

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

#send-button:disabled {
opacity: 0.6;


cursor: not-allowed;


}

/* =====================================================
اسکرول بار
===================================================== */

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

.chat-area::-webkit-scrollbar-thumb {
background: #CBD5E1;


border-radius: 10px;


}

/* =====================================================
موبایل
در موبایل تمام صفحه
===================================================== */

@media (max-width: 600px) {


.chat-toggle {
    width: 58px;
    height: 58px;

    bottom: 18px;
    right: 18px;

    font-size: 24px;
}


.chat-popup {
    width: 100%;
    height: 100%;

    max-height: none;

    right: 0;
    bottom: 0;

    border-radius: 0;

    border: none;

    transform:
        translateY(100%);

    transform-origin: center;
}


.chat-popup.active {
    transform:
        translateY(0);
}


.header {
    padding: 12px 14px;
}


.header-title {
    font-size: 0.95rem;
}


.chat-area {
    padding: 14px;
}


.bubble {
    max-width: 85%;
}


.input-area {
    padding: 10px;
}


#send-button {
    padding:
        11px 15px;
}

}