/* chat.css */

/* [1. ПЕРЕМЕННЫЕ] */
:root {--bg-color:#1a1a1a;--sidebar-bg:#111;--accent-color:#388bfd;--text-main:#e1e1e1;--input-bg:#2a2a2a;--bot-accent:#4db6ac;}

/* [2. БАЗОВЫЕ СТИЛИ] */
body {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-main);margin:0;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;}
body.guest {overflow:hidden;}
@keyframes fadeIn {from {opacity:0;transform:translateY(10px);} to {opacity:1;transform:translateY(0);}}

/* [3. ШАПКА И НАВИГАЦИЯ] */
header {position:fixed;top:0;width:100%;height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;z-index:1000;box-sizing:border-box;background:none;}
.header-left {display:flex;align-items:center;gap:15px;}
.logo {font-size:1.4rem;font-weight:700;color:#fff;text-decoration:none;}
.sidebar-toggle-btn {background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;}
.model-select-modern {background:rgba(255,255,255,0.05);color:white;border:1px solid #444;border-radius:8px;padding:5px 10px;margin-right:10px;outline:none;cursor:pointer;font-size:0.85em;height:35px;transition:border-color 0.3s;}
.model-select-modern:focus {border-color:#007bff;}

/* [4. ВЫПАДАЮЩЕЕ МЕНЮ] */
.dropdown {position:relative;}
.dropdown-toggle {background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;}
.user-icon {width:35px;height:35px;border-radius:50%;cursor:pointer;object-fit:cover;display:block;}
.dropdown-menu {display:none;position:absolute;right:0;top:50px;background:#222;border:1px solid #333;border-radius:10px;min-width:150px;z-index:3000;box-shadow:0 4px 12px rgba(0,0,0,0.5);}
.dropdown.show .dropdown-menu {display:block;}
.dropdown-menu a {display:block;padding:10px 15px;color:#ccc;text-decoration:none;font-size:0.9rem;transition:0.2s;}
.dropdown-menu a:hover {background:#333;color:var(--accent-color);}

/* [5. САЙДБАР] */
.sidebar {position:fixed;left:-280px;top:0;width:280px;height:100vh;background:var(--sidebar-bg);z-index:2000;transition:0.3s ease;padding:20px 10px;box-sizing:border-box;display:flex;flex-direction:column;}
.sidebar.open {left:0;}
.sidebar-overlay {position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;z-index:1500;}
.sidebar-overlay.active {display:block;}
.sidebar-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:0 10px 10px;border-bottom:1px solid #333;}
.sidebar-header h4 {margin:0;color:var(--bot-accent);font-size:1.1rem;display:flex;align-items:center;gap:10px;}
.close-sidebar-btn {background:none;border:none;color:#888;font-size:1.4rem;cursor:pointer;}
.new-chat-btn {width:calc(100% - 20px);margin:0 10px 20px;padding:12px;background:#222;border:1px solid #333;color:#fff;border-radius:10px;cursor:pointer;flex-shrink:0;}
.chat-list {list-style:none;padding:0 10px;margin:0;flex:1;overflow-y:auto;}
.chat-list::-webkit-scrollbar {width:4px;}
.chat-list::-webkit-scrollbar-thumb {background:#333;border-radius:10px;}
.chat-item {display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;margin-bottom:4px;}
.chat-item:hover {background:#222;}
.chat-title {color:#ccc;text-decoration:none;font-size:0.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.delete-chat-btn {background:none;border:none;color:#555;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;padding-top:2px;}
.delete-chat-btn:hover {color:#ff4d4d;}

/* [6. ЧАТ И СООБЩЕНИЯ] */
.main-content {flex:1;display:flex;flex-direction:column;margin-top:60px;}
.chat-wrapper {max-width:800px;width:100%;margin:0 auto;display:flex;flex-direction:column;flex:1;}
.messages {padding:20px 20px 140px !important;display:flex;flex-direction:column;gap:15px;}
.message {width:100%;display:flex;animation:fadeIn 0.3s ease forwards;border-bottom:1px solid rgba(255,255,255,0.03);padding-bottom:15px;}
.message-inner {display:flex;gap:12px;max-width:100%;width:100%;align-items:flex-start;}
.avatar {width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;margin-top:4px;}
.message.user .avatar {background:var(--accent-color);color:#fff;}
.message.bot .avatar {background:var(--bot-accent);color:#fff;}
.message-content {display:flex;flex-direction:column;align-items:flex-start;width:100%;position:relative;}
.text {line-height:1.5;font-size:1.05rem;color:#ececec;width:100%;}
.text p {margin:0 0 10px 0;}
.text h1 {font-size:1.3rem;margin:10px 0;}
.text h2 {font-size:1.15rem;margin:8px 0;}
.text h3 {font-size:1.05rem;margin:5px 0;}

/* [7. ПОЛЕ ВВОДА] */
.input-area {position:fixed;bottom:0;width:100%;max-width:800px;padding:20px;box-sizing:border-box;z-index:100; }
.input-wrapper {
    background: var(--input-bg);
    border: 1px solid #444;
    border-radius: 24px;
    display: flex;
    align-items: center;
    padding: 6px 10px; /* Убрали 20px слева, сделали симметрично по 10px */
    transition: 0.3s;
}
.input-wrapper:focus-within {border-color:#666;box-shadow:0 0 15px rgba(0,0,0,0.3);}
#query {flex:1;background:none;border:none;color:#fff;font-size:1rem;padding:10px 0;outline:none;resize:none;max-height:200px;font-family:inherit;white-space:pre;line-height:1.5;display:block;overflow-x:auto;}
.input-controls {display:flex;align-items:center;gap:8px;}
.control-btn {background:none;border:none;color:#999;font-size:1.1rem;cursor:pointer;padding:8px;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:0.2s ease;}
.control-btn:not(#voice-mode-btn):hover {background:rgba(255,255,255,0.1);color:#fff;}
#send-btn {display:none;color:#999;transition:0.3s ease;border:none;background:none;cursor:pointer;}
#send-btn:hover {background:#8e9490;color:#fff;transform:scale(1.05);}
#send-btn i {font-size:20px;}
#voice-mode-btn {background:white!important;margin:0 8px;}
#voice-mode-btn:hover {transform:scale(1.05);background:#f0f0f0!important;}

/* Мобилки и PWA: тот самый "стеклянный" градиент */
@media (max-width: 768px) {
    .input-area {background:linear-gradient(to top, var(--bg-color) 0%, rgba(26,26,26,0.8) 40%, rgba(26,26,26,0) 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
}

/* [8. ПЛЕЕР И АНИМАЦИИ] */
@keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(360deg);}}
.spinning {animation:spin 2s linear infinite!important;}
.ticker-wrapper {overflow:hidden;white-space:nowrap;flex:1;display:flex;align-items:center;}
.ticker-text {display:inline-block;padding-left:20px;animation:ticker 12s linear infinite;}
@keyframes ticker {0% {transform:translateX(0);} 100% {transform:translateX(-100%);}}
@media (min-width:800px) {.ticker-text {animation:none;padding-left:5px;}}

/* [9. КОД И MARKDOWN] */
.text pre {background:#0d0d0d!important;padding:15px;border-radius:10px;margin:15px 0;border:1px solid #333;position:relative;width:100%;box-sizing:border-box;overflow:visible;}
.text code {font-family:'Consolas',monospace;font-size:0.95em;color:#e1e1e1;background:rgba(255,255,255,0.05);padding:2px 5px;border-radius:4px;}
.text pre code {display:block;overflow-x:auto;white-space:pre;background:none;padding:0;}
.copy-code-btn {position:sticky;top:65px;right:10px;float:right;z-index:40;background:#222;color:#fff;border:1px solid #444;padding:6px 12px;font-size:11px;border-radius:6px;cursor:pointer;}
.copy-btn {background:none;border:none;color:#666;cursor:pointer;font-size:0.8rem;padding:4px 8px;margin-top:8px;display:flex;align-items:center;gap:5px;transition:0.2s;}

/* [10. ДОПОЛНИТЕЛЬНО] */
.extra-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    margin-right: 2px; /* Уменьшили с 10px до 2px, чтобы кнопки стояли плотнее */
}
.extra-dropdown .dropdown-menu {display:none;position:absolute;left:0;bottom:calc(100% + 20px)!important;top:auto!important;background:#222;border:1px solid #333;border-radius:10px;min-width:150px;z-index:3000;box-shadow:0 4px 12px rgba(0,0,0,0.5);overflow:hidden;}
.extra-dropdown.show .dropdown-menu {display:block;}
.typing-indicator {display:flex;gap:5px;align-items:center;height:24px;}
.typing-indicator span {width:8px;height:8px;background:#888;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both;}
@keyframes bounce {0%,80%,100% {transform:scale(0);opacity:0.3;} 40% {transform:scale(1.0);opacity:1;}}

@media (max-width:600px) {.messages {padding:20px 15px 120px!important;}.input-area {padding:10px;width:100%;}}


/* [АНИМАЦИЯ ГОЛОСОВОГО РЕЖИМА] */
#voice-mode-btn.active-pulse {
    background-color: #ff4b4b !important;
    animation: voice-pulse 1.5s infinite ease-in-out !important;
}
#voice-mode-btn.active-pulse i {
    color: white !important;
}
@keyframes voice-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Общий стиль для всех кнопок скиллов в чате */
.skill-btn, .map-skill-btn {
    cursor: pointer; /* Тот самый указатель-пальчик */
    border: 1px solid #444;
    background: #2a2a2a;
    color: #fff;
    padding: 5px 12px;
    border-radius: 6px;
    margin-top: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

/* Эффект при наведении */
.skill-btn:hover, .map-skill-btn:hover {
    background: #3a3a3a;
    border-color: #007bff; /* Подсветим синим при наведении */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}