/* ------------ базовые переменные ------------ */
:root{
    --bg          : #F5F6F8;
    --panel       : #FFFFFF;
    --text        : #2B2B2B;
    --border      : #E2E3E6;
    --accent      : #FFCC00;
    --accent-dark : #E6B800;
    --user-bubble : #DCF6FF;
    --bot-bubble  : #FFF7D6;
    --radius      : 16px;
    --shadow      : 0 4px 18px rgba(0,0,0,.05);
    font-size     : 16px;
    line-height   : 1.4;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
    background : var(--bg);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color      : var(--text);
    display    : flex;
    flex-direction: column;
    min-height : 100vh;
}

/* ------------ шапка ------------ */
nav{
    background : var(--panel);
    box-shadow : var(--shadow);
}
nav .container{
    max-width : 880px;
    margin    : 0 auto;
    display   : flex;
    align-items:center;
    justify-content:space-between;
    padding   : 14px 24px;
}
.logo{
    font-size : 1.35rem;
    font-weight: 700;
    color     : var(--text);
}
.btn-logout{
    background : none;
    border : none;
    color  : var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}
.btn-logout:hover{opacity:.6}

/* ------------ главное содержимое ------------ */
main{flex:1}
.chat-container{
    background : var(--panel);
    max-width  : 880px;
    margin     : 32px auto;
    border-radius: var(--radius);
    box-shadow : var(--shadow);
    padding    : 32px;
    display    : flex;
    flex-direction: column;
    gap        : 24px;
}

/* ------------ окно сообщений ------------ */
.chat-box{
    max-height : 500px;
    overflow-y : auto;
    padding-right: 4px;      /* тонкий скролл */
}
.chat-box::-webkit-scrollbar{
    width:6px;
}
.chat-box::-webkit-scrollbar-thumb{
    background:#ccc;border-radius:3px;
}

.message{
    padding : 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    width : fit-content;
    max-width : 85%;
    font-size : 0.95rem;
}
.message b{font-weight:600}
.user{background:var(--user-bubble); margin-left:auto}
.assistant{background:var(--bot-bubble);}

/* ------------ форма ввода ------------ */
form#bot-form{
    display:flex;
    gap:12px;
}
#message{
    flex:1;
    padding:12px 16px;
    border:1.5px solid var(--border);
    border-radius: var(--radius);
    background:#fff;
    font-size:1rem;
    transition:border .2s, box-shadow .2s;
}
#message:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(255,204,0,.25);
}
form#bot-form button{
    background:linear-gradient(145deg,var(--accent),var(--accent-dark));
    color:#000;
    font-weight:600;
    border:none;
    border-radius:var(--radius);
    padding:0 26px;
    cursor:pointer;
    transition:opacity .2s, transform .15s;
}
form#bot-form button:hover{opacity:.85}
form#bot-form button:active{transform:scale(.96)}
form#bot-form button:disabled{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
}

/* ------------ telegram button ------------ */
.tg-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    padding:0 20px;
    border-radius:var(--radius);
    font-weight:600;
    background:#0088cc;
    color:#fff;
    transition:opacity .2s, transform .15s;
}
.tg-btn:hover{opacity:.85}
.tg-btn:active{transform:scale(.96)}

/* ------------ карточка auth ------------ */
.auth-card{
    background:var(--panel);
    max-width:400px;
    margin:64px auto;
    border-radius:var(--radius);
    padding:40px 36px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:18px;
}
.auth-card h1{
    font-size:1.55rem;
    font-weight:700;
    text-align:center;
}
.auth-card input{
    padding:12px 16px;
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    font-size:1rem;
}
.auth-card form{
    display: flex;
    flex-direction: column;
    gap: 14px;          /* ← вертикальный отступ между всеми элементами формы */
}
.auth-card input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(255,204,0,.25);
}
.auth-card button{
    background:linear-gradient(145deg,var(--accent),var(--accent-dark));
    color:#000;
    font-weight:700;
    border:none;
    border-radius:var(--radius);
    padding:12px;
    cursor:pointer;
    transition:opacity .2s, transform .15s;
}
.auth-card button:hover{opacity:.85}
.auth-card button:active{transform:scale(.96)}
.auth-card .link{
    text-align:right;
    font-size:.92rem;
    color:#0088cc;
}
.auth-card .error{color:#c0392b;font-size:.9rem}