:root{
    --primary:#0088ff;
    --accent:#00ff88;
    --bg:#f7f9fc;
    --text:#111111;
    --muted:#7b8794;
    --glass:rgba(255,255,255,.22);
    --glass-border:rgba(255,255,255,.35);
    --shadow:0 20px 60px rgba(0,136,255,.08);
}

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

html,
body{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    font-family:Inter, Arial, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 10% 15%, rgba(0,136,255,.10), transparent 28%),
        radial-gradient(circle at 92% 88%, rgba(0,255,136,.10), transparent 28%),
        var(--bg);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,.22), transparent 55%);
    opacity:.45;
}

/* УБРАЛИ padding и gap — теперь всё прилегает к краям */
.app{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-columns:300px 1fr;
    gap:0; /* Убрали отступ между панелями */
    padding:0; /* Убрали внешние отступы */
}

/* ===========================
   SIDEBAR — ТЕПЕРЬ ЦЕЛЬНАЯ ПАНЕЛЬ
   =========================== */

.sidebar{
    display:flex;
    flex-direction:column;
    padding:18px;
    border-radius:0; /* Убрали скругления */
    background:rgba(255,255,255,.16);
    border:none; /* Убрали рамку */
    border-right: 1px solid rgba(0,0,0,0.08); /* Тонкая линия-разделитель */
    backdrop-filter:blur(34px) saturate(180%);
    -webkit-backdrop-filter:blur(34px) saturate(180%);
    box-shadow:none; /* Убрали тень */
    transition:
        width .28s cubic-bezier(.2,.8,.2,1),
        padding .28s cubic-bezier(.2,.8,.2,1);
}

.sidebar-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.sidebar-top-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.sidebar-icon-btn{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:10px;
    background:transparent;
    cursor:pointer;
    transition:.18s ease;
}

.sidebar-icon-btn:hover{
    background:rgba(0,0,0,.06);
}

.sidebar-icon-btn:active{
    transform:scale(.95);
}

.sidebar-item{
    width:100%;
    height:46px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 14px;
    border:none;
    background:transparent;
    border-radius:14px;
    cursor:pointer;
    font-size:17px;
    font-weight:500;
    color:#111;
    transition:.15s;
}

.sidebar-item:hover{
    background:rgba(0,0,0,.06);
}

#searchBtn::before{
    content:"";
    width:18px;
    height:18px;
    display:block;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

#collapseSidebarBtn::before{
    content:"";
    width:18px;
    height:18px;
    display:block;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E");
}

#searchBtn{
    margin-left:auto;
}

.sidebar-action-btn{
    width:100%;
    height:46px;
    border:none;
    background:transparent;
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 14px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    color:#111;
    transition:background .18s ease, color .18s ease;
}

.sidebar-action-btn:hover{
    background:#ececec;
}

.sidebar-action-icon{
    color:#0088ff;
    font-size:24px;
    font-weight:300;
}

.sidebar-divider{
    height:1px;
    margin:18px 0;
    background:rgba(255,255,255,.28);
}

.sidebar-history-title{
    padding:0 14px;
    margin-bottom:14px;
    font-size:13px;
    font-weight:700;
    color:#6f7b8b;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.chat-list{
    margin-top:22px;
    flex:1;
    overflow-y:auto;
}

.sidebar-content{
    transition:opacity .18s ease, transform .18s ease;
}

.sidebar.collapsed{
    width:82px !important;
    min-width:82px;
    padding:16px 12px;
}

.sidebar.collapsed .sidebar-content{
    opacity:0;
    transform:translateX(-12px);
    pointer-events:none;
}

.sidebar.collapsed .sidebar-logo{
    margin:0 auto;
}

.sidebar-mini-new{
    display:none;
}

.sidebar.collapsed .sidebar-mini-new{
    display:flex;
    margin-top:18px;
    width:44px;
    height:44px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.16);
    backdrop-filter:blur(20px);
    color:var(--primary);
    font-size:28px;
    font-weight:300;
    transition:.18s;
}

.sidebar.collapsed .sidebar-mini-new:hover{
    background:rgba(255,255,255,.28);
}

.sidebar-logo-area{
    position:relative;
    width:34px;
    height:34px;
    flex-shrink:0;
}

.sidebar-logo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:10px;
    transition:opacity .18s ease, transform .18s ease;
}

.sidebar-expand-btn{
    position:absolute;
    inset:0;
    border:none;
    border-radius:10px;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(.85);
    transition:opacity .18s ease, transform .18s ease;
}

.sidebar-expand-btn::before{
    content:"❯";
    font-size:20px;
    color:#111;
}

.sidebar.collapsed #searchBtn,
.sidebar.collapsed #collapseSidebarBtn{
    display:none;
}

.sidebar.collapsed .sidebar-logo-area:hover .sidebar-logo{
    opacity:0;
    transform:scale(.8);
}

.sidebar.collapsed .sidebar-logo-area:hover .sidebar-expand-btn{
    opacity:1;
    transform:scale(1);
}

.sidebar:not(.collapsed) .sidebar-expand-btn{
    display:none;
}

.sidebar.collapsed .sidebar-top{
    justify-content:center;
}

.sidebar.collapsed .sidebar-top-actions{
    display:none;
}

.sidebar-item-icon{
    width:20px;
    height:20px;
    display:block;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* ===========================
   MAIN CONTAINER
   =========================== */

.main{
    position:relative;
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
    overflow:hidden;
    border-radius:0; /* Убрали скругления */
}

/* ===========================
   HEADER + DIVIDER
   =========================== */

.chat-header{
    width: 100%;
    padding: 20px 26px 16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.chat-ai-title{
    display:flex;
    align-items:center;
    gap:8px;
    line-height:1;
}

.wordmark{
    font-family:Inter, "OpenAI Sans", sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.02em;
    color:#111;
}

.wordmark-ai{
    font-family:Inter, "OpenAI Sans", sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.02em;
    background:linear-gradient(90deg, #0088ff, #00ff88, #0088ff);
    background-size:300% 300%;
    animation:aiGradientMove 5s linear infinite;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

@keyframes aiGradientMove{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}

.chat-ai-subtitle{
    margin-top:4px;
    margin-left:2px;
    font-size:12px;
    font-weight:500;
    color:#7b8794;
}

/* ===========================
   CHAT BODY
   =========================== */

.chat-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.ai-orb-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:100%;
    display:flex;
    justify-content:center;
    transition:opacity .35s ease, transform .35s ease;
}

.ai-orb-wrap.hidden{
    display: none !important;
}

.ai-orb{
    position:relative;
    width:320px;
    height:320px;
    border-radius:44% 56% 51% 49% / 46% 42% 58% 54%;
    overflow:hidden;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    animation:
        orbMorph 10s ease-in-out infinite,
        orbFloat 9s ease-in-out infinite;
}

.orb-gradient{
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg, #0088ff, #3ca8ff, #00ff88, #0088ff);
    background-size:400% 400%;
    animation:orbGradient 12s linear infinite;
}

.orb-highlight{
    position:absolute;
    width:180px;
    height:180px;
    left:40px;
    top:35px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.12), transparent);
    filter:blur(18px);
}

.orb-reflection{
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(to bottom, rgba(255,255,255,.28), transparent 28%, transparent 70%, rgba(255,255,255,.08));
}

.orb-shadow{
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -30px 60px rgba(0,0,0,.08),
        0 35px 90px rgba(0,136,255,.18),
        0 0 120px rgba(0,255,136,.12);
}

@keyframes orbGradient{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

@keyframes orbMorph{
    0%{ border-radius:44% 56% 51% 49% / 46% 42% 58% 54%; }
    25%{ border-radius:57% 43% 63% 37% / 39% 61% 44% 56%; }
    50%{ border-radius:39% 61% 48% 52% / 58% 39% 61% 42%; }
    75%{ border-radius:54% 46% 40% 60% / 63% 38% 62% 37%; }
    100%{ border-radius:44% 56% 51% 49% / 46% 42% 58% 54%; }
}

@keyframes orbFloat{
    0%{ transform:translateY(0px) rotate(0deg); }
    50%{ transform:translateY(-16px) rotate(4deg); }
    100%{ transform:translateY(0px) rotate(0deg); }
}

/* ===========================
   MESSAGES
   =========================== */

.messages {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 10px 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.messages.hidden{
    display:none;
}

.message-row{
    display:flex;
    width: 100%;
    max-width: 760px;
}

.message-row.mine{
    justify-content:flex-end;
}

.message-bubble{
    max-width:70%;
    padding:14px 18px;
    border-radius:22px;
    background:#0088ff;
    color:#fff;
    font-size:16px;
    line-height:1.45;
    word-break:break-word;
    box-shadow:0 10px 26px rgba(0,136,255,.18);
}

/* ===========================
   PROMPT — LIQUID GLASS
   =========================== */

.prompt-wrap{
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    
    display:flex;
    align-items:flex-end;
    gap:14px;
    width: min(760px, calc(100% - 40px));
    min-height:58px;
    padding:8px;
    
    border-radius:28px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.35);
    backdrop-filter:blur(32px) saturate(180%);
    -webkit-backdrop-filter:blur(32px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 18px 60px rgba(0,0,0,.08);
    transition:.18s ease;
}

.prompt-wrap:focus-within{
    border-color:rgba(0,136,255,.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 0 0 3px rgba(0,136,255,.08),
        0 20px 70px rgba(0,136,255,.10);
}

#promptInput{
    flex:1;
    font-size:16px;
    padding:8px 6px;
    min-height:40px;
    max-height:220px;
    resize:none;
    border:none;
    outline:none;
    background:transparent;
    color:#111;
    font-family:inherit;
    line-height:1.5;
    overflow-y:auto;
}

#promptInput::placeholder{
    color:#8d96a4;
}

#sendBtn{
    width:44px;
    height:44px;
    min-width:44px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:linear-gradient(135deg, #0088ff, #39a8ff);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.18s ease;
    box-shadow:0 10px 24px rgba(0,136,255,.24);
}

#sendBtn:hover{
    transform:translateY(-2px);
}

#sendBtn:active{
    transform:scale(.96);
}

#sendBtn::before{
    content:"";
    width:18px;
    height:18px;
    display:block;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='M22 2 15 22 11 13 2 9 22 2z'/></svg>");
}
/* Стили для пузыря ИИ */
.message-row .ai-bubble {
    background: #f0f2f5 !important;
    color: #111 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border-bottom-left-radius: 6px !important;
}

/* Анимация точек при "печатает..." */
#typing-indicator .ai-bubble {
    display: flex;
    align-items: center;
    gap: 4px;
}