/* ===================== Токены ===================== */
:root{
    --green:#21BF8B;
    --green-d:#1aa97a;
    --green-grad:linear-gradient(135deg,#22cf85,#19b389);
    --bg:#f6f7fb;
    --panel:#ffffff;
    --line:#eef0f5;
    --text:#2b2f38;
    --muted:#9aa3b2;
    --sent:#e8f1ff;
    --recv:#eef0f6;
    --active:#f3f5f9;
    --shadow:0 10px 30px rgba(30,40,70,.08);
    --radius:14px;
}
[data-theme="dark"]{
    --bg:#10141b;
    --panel:#171c25;
    --line:#222a36;
    --text:#e8ecf3;
    --muted:#7b8595;
    --sent:#1f3b5c;
    --recv:#222a36;
    --active:#1d2430;
    --shadow:0 10px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
    overflow-x:hidden;
}
.chat__back{display:none}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.hidden{display:none !important}

/* ===================== Каркас ===================== */
.app{
    display:grid;
    grid-template-columns:360px 1fr;
    width:100%;
    height:100vh;
    height:100dvh;
    background:var(--panel);
    overflow:hidden;
}

/* ===================== Сайдбар ===================== */
.sidebar{
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--line);
    background:var(--panel);
    min-height:0;
    min-width:0;
    overflow:hidden;
}
.sidebar__head{
    background:var(--green-grad);
    color:#fff;
    padding:20px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.sidebar__title{font-size:20px;font-weight:600}

.panel{flex:1;display:flex;flex-direction:column;min-height:0}

/* Поиск + фильтр */
.searchbar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    border-bottom:1px solid var(--line);
    position:relative;
}
.searchbar__icon{color:var(--muted);flex:none}
.searchbar input{
    flex:1;
    border:none;
    background:transparent;
    color:var(--text);
    font-size:14px;
    outline:none;
}
.searchbar input::placeholder{color:var(--muted)}
.filter{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.filter select{
    border:none;background:transparent;color:var(--text);
    font-size:12px;font-weight:600;cursor:pointer;outline:none;
}

/* Список бесед */
.conv-list,.contact-list{list-style:none;overflow-y:auto;flex:1}
.conv{
    display:flex;
    gap:12px;
    padding:14px 16px;
    cursor:pointer;
    border-bottom:1px solid var(--line);
    transition:background .15s;
    position:relative;
}
.conv:hover{background:var(--active)}
.conv.is-active{background:var(--active)}
.conv.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.conv__body{flex:1;min-width:0;overflow:hidden}
.conv__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.conv__name{flex:1 1 auto;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv__time{font-size:11px;color:var(--muted);flex:none}
.conv__preview{
    color:var(--muted);font-size:13px;margin-top:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:6px;
}
.conv__preview.is-unread{color:var(--text);font-weight:500}
.badge{
    background:var(--green);color:#fff;font-size:11px;font-weight:700;
    min-width:18px;height:18px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex:none;
}
.tag-resolved{
    font-size:10px;font-weight:700;color:var(--green);
    border:1px solid var(--green);border-radius:6px;padding:1px 5px;flex:none;
}

/* Аватары */
.avatar{
    width:46px;height:46px;border-radius:50%;
    background:var(--c,#bbb);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:600;font-size:15px;flex:none;border:none;cursor:default;
    position:relative;
}
.avatar--me{cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.avatar--sm{width:30px;height:30px;font-size:11px}
.avatar--lg{width:64px;height:64px;font-size:22px}
.avatar.is-online::after{
    content:"";position:absolute;right:1px;bottom:1px;
    width:11px;height:11px;border-radius:50%;background:#27c281;
    border:2px solid var(--panel);
}

/* Контакты */
.contact{
    display:flex;align-items:center;gap:12px;padding:12px 16px;
    border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s;
}
.contact:hover{background:var(--active)}
.contact__name{font-weight:600;font-size:14px}
.contact__role{font-size:12px;color:var(--muted)}
.contact__btn{margin-left:auto;font-size:12px;color:var(--green);font-weight:600;background:none;border:none;cursor:pointer}

/* Настройки */
.settings{padding:18px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.settings__profile{display:flex;align-items:center;gap:14px;padding:8px 0 16px}
.settings__name{font-weight:600;font-size:16px}
.settings__status{color:var(--green);font-size:13px}
.setting-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 4px;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;
}
.settings__note{font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5}
.btn-ghost{
    margin-top:14px;padding:11px;border:1px solid var(--line);background:transparent;
    color:var(--text);border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;
}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* Переключатель */
.switch{position:relative;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch__slider{
    position:absolute;inset:0;background:var(--line);border-radius:24px;transition:.2s;
}
.switch__slider::before{
    content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;
    background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .switch__slider{background:var(--green)}
.switch input:checked + .switch__slider::before{transform:translateX(18px)}

/* Нижняя навигация */
.bottom-nav{
    display:flex;background:var(--green-grad);
}
.nav-btn{
    flex:1;padding:16px;border:none;background:transparent;color:rgba(255,255,255,.75);
    cursor:pointer;display:flex;justify-content:center;transition:.15s;position:relative;
}
.nav-btn:hover{color:#fff}
.nav-btn.is-active{color:#fff}
.nav-btn.is-active::after{content:"";position:absolute;top:0;left:20%;right:20%;height:3px;background:#fff;border-radius:0 0 3px 3px}

/* ===================== Чат ===================== */
.chat{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.chat__empty{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:var(--muted);text-align:center;gap:6px;
}
.chat__empty-art{font-size:64px;margin-bottom:10px}
.chat__empty h2{color:var(--text);font-weight:600}
.chat__active{display:flex;flex-direction:column;min-height:0;flex:1}

.chat__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);
}
.chat__peer{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.chat__peer-name{font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__peer-status{font-size:12px;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat__peer-status.is-off{color:var(--muted)}
.chat__actions{display:flex;align-items:center;gap:8px;flex:none}
.icon-btn{
    border:none;background:transparent;color:var(--muted);cursor:pointer;
    width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;transition:.15s;
}
.icon-btn:hover{background:var(--active);color:var(--text)}
.pill{
    border:1.5px solid #ff8a8a;color:#ff7676;background:transparent;
    padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;
}
.pill:hover{background:#ff7676;color:#fff}
.pill.is-resolved{border-color:var(--green);color:var(--green)}
.pill.is-resolved:hover{background:var(--green);color:#fff}

/* Сообщения */
.messages{
    flex:1;overflow-y:auto;padding:24px 22px;
    display:flex;flex-direction:column;gap:14px;
}
.msg{display:flex;gap:10px;max-width:min(78%,640px)}
.msg__bubble{
    background:var(--recv);padding:11px 15px;border-radius:4px 16px 16px 16px;
    font-size:14px;line-height:1.45;position:relative;
    word-wrap:break-word;overflow-wrap:anywhere;
}
.msg__time{font-size:10px;color:var(--muted);margin-top:5px;display:block}
.msg--me{align-self:flex-end;flex-direction:row-reverse}
.msg--me .msg__bubble{background:var(--sent);border-radius:16px 4px 16px 16px}
.msg--me .msg__time{text-align:right}
.msg__day{align-self:center;font-size:11px;color:var(--muted);background:var(--panel);padding:4px 12px;border-radius:10px;margin:4px 0}
.msg__tick{color:var(--green);font-weight:700}
mark{background:#ffe27a;color:#222;border-radius:2px}

/* Индикатор печати */
.typing{display:flex;align-items:center;gap:8px;padding:0 22px 6px}
.typing__dots{background:var(--recv);border-radius:14px;padding:12px 14px;display:inline-flex;gap:4px}
.typing__dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing__dots i:nth-child(2){animation-delay:.2s}
.typing__dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Поле ввода */
.composer{
    display:flex;align-items:center;gap:8px;padding:14px 18px;
    background:var(--panel);border-top:1px solid var(--line);position:relative;
}
.composer input{
    flex:1;border:none;background:transparent;color:var(--text);
    font-size:14px;outline:none;padding:10px 4px;
}
.composer input::placeholder{color:var(--muted)}
.composer__emoji{font-size:20px}
.send-btn{
    width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
    background:var(--green-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px rgba(33,191,139,.4);transition:.15s;flex:none;
}
.send-btn:hover{transform:scale(1.05)}
.send-btn:active{transform:scale(.95)}
.send-btn svg{width:22px;height:22px}

/* Эмодзи-попап */
.emoji-pop{
    position:absolute;bottom:72px;left:18px;background:var(--panel);
    border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
    padding:10px;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;z-index:5;
}
.emoji-pop button{border:none;background:none;font-size:20px;cursor:pointer;padding:5px;border-radius:8px}
.emoji-pop button:hover{background:var(--active)}

/* Тост */
.toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
    background:#2b2f38;color:#fff;padding:12px 22px;border-radius:24px;font-size:13px;
    box-shadow:var(--shadow);opacity:0;transition:.3s;z-index:50;pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Скроллбар */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ===================== Адаптив ===================== */

/* Планшеты: чуть уже сайдбар */
@media (max-width:1024px){
    .app{grid-template-columns:300px 1fr}
    .msg{max-width:85%}
}

/* Узкие планшеты */
@media (max-width:768px){
    .app{grid-template-columns:270px 1fr}
    .chat__head{padding:12px 16px}
    .messages{padding:18px 16px}
    .pill{padding:6px 12px;font-size:12px}
    .sidebar__head{padding:16px 14px}
}

/* Телефоны: одна колонка, чат выезжает поверх списка */
@media (max-width:640px){
    .app{
        grid-template-columns:1fr;
        max-width:100%;
        box-shadow:none;
        position:relative;
    }
    .sidebar{border-right:none}

    .chat{
        position:absolute;
        inset:0;
        z-index:20;
        transform:translateX(100%);
        transition:transform .25s ease;
    }
    .app.show-chat .chat{transform:translateX(0)}
    .app.show-chat .sidebar{visibility:hidden}

    .chat__back{display:inline-flex}
    .msg{max-width:88%}
    .messages{padding:16px 12px;gap:12px}
    .chat__head{padding:10px 12px}
    .chat__peer-name{font-size:15px}

    /* в шапке остаётся только кнопка «Решено» */
    #searchInChat,#infoBtn{display:none}
    .pill{padding:6px 12px;font-size:12px}

    .composer{padding:10px 12px;gap:6px}
    .send-btn{width:46px;height:46px}
    .composer__emoji{font-size:18px}

    .sidebar__head{padding:14px 16px}
    .sidebar__title{font-size:18px}
    .conv{padding:12px 14px}
    .avatar{width:42px;height:42px;font-size:14px}

    .emoji-pop{
        left:8px;right:8px;
        grid-template-columns:repeat(8,1fr);
        bottom:66px;
    }
}

/* Очень маленькие экраны */
@media (max-width:360px){
    .filter__label{display:none}
    .conv__name{font-size:14px}
    .emoji-pop{grid-template-columns:repeat(6,1fr)}
}

/* Альбомная ориентация на низких экранах */
@media (max-height:480px) and (orientation:landscape){
    .sidebar__head{padding:10px 16px}
    .messages{padding:10px 16px}
    .composer{padding:8px 14px}
    .send-btn{width:42px;height:42px}
}