/* ---------- ریست و متغیرهای اصلی ---------- */
*{
    margin:0; padding:0; box-sizing:border-box;
}
:root{
    --bg-primary:#0a0a0a;          /* رنگ پس‌زمینه تاریک */
    --bg-secondary:#151515;       /* رنگ کادر چت */
    --text-primary:#e0e0e0;      /* متن روشن */
    --accent-red:#ff4c4c;        /* رنگ قرمز برای سایه */
    --radius:8px;
    --shadow:0 4px 12px var(--accent-red);
    --font-main:'Tahoma',Arial,Helvetica,sans-serif;
}

/* ---------- بدنه صفحه ---------- */
body{
    font-family:var(--font-main);
    background:var(--bg-primary);
    color:var(--text-primary);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ---------- هدر ---------- */
.header{
    text-align:center;
    padding:1.5rem 0;
    background:linear-gradient(135deg,var(--bg-secondary),var(--bg-primary));
    box-shadow:var(--shadow);
}
.header h1{
    font-size:2.2rem;
    margin-bottom:0.4rem;
}
.header p{
    font-size:1rem;
    opacity:0.8;
}

/* ---------- بخش چت ---------- */
.chat-container{
    flex:1;
    overflow-y:auto;
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:0.8rem;
}

/* پیام‌های کاربر و روبات */
.message{
    max-width:70%;
    padding:0.8rem 1rem;
    border-radius:var(--radius);
    line-height:1.4;
    word-wrap:break-word;
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.message.user{
    align-self:flex-end;
    background:rgba(255,76,76,0.15);
    color:#fff;
}
.message.bot{
    align-self:flex-start;
    background:rgba(255,255,255,0.07);
}

/* ---------- ورودی کاربر ---------- */
.input-area{
    display:flex;
    gap:0.5rem;
    padding:1rem;
    background:var(--bg-secondary);
    box-shadow:var(--shadow);
}
.input-area input{
    flex:1;
    padding:0.8rem 1rem;
    border:none;
    border-radius:var(--radius);
    background:#222;
    color:var(--text-primary);
    font-size:1rem;
}
.input-area button{
    padding:0 1.5rem;
    border:none;
    border-radius:var(--radius);
    background:var(--accent-red);
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    transition:background .2s;
}
.input-area button:hover{
    background:#e04343;
}

/* ---------- اسکرول بار سفارشی ---------- */
.chat-container::-webkit-scrollbar{
    width:8px;
}
.chat-container::-webkit-scrollbar-thumb{
    background:var(--accent-red);
    border-radius:4px;
}