:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-secondary: #f0f2f7;
    --sidebar: #11131a;
    --sidebar-hover: #1d2130;
    --text: #171923;
    --text-secondary: #707586;
    --sidebar-text: #f5f7ff;
    --sidebar-muted: #9ea5ba;
    --border: rgba(25, 31, 48, 0.12);
    --accent: linear-gradient(135deg, #9c49ff, #1683ff);
    --accent-solid: #7657ff;
    --accent-soft: rgba(118, 87, 255, 0.13);
    --shadow: 0 18px 55px rgba(22, 27, 45, 0.12);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
    display: flex;
    overflow: hidden;
    color: var(--text);
    background: var(--bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
button { border: 0; }

body.dark {
    --bg: #0b0d13;
    --surface: #151821;
    --surface-secondary: #1b1f2a;
    --text: #f2f4fa;
    --text-secondary: #a2a8b8;
    --border: rgba(255, 255, 255, 0.10);
    --shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
}

.sidebar {
    width: 282px;
    min-width: 282px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    color: var(--sidebar-text);
    background:
        radial-gradient(circle at 10% 0%, rgba(120, 56, 255, .22), transparent 34%),
        #11131a;
    border-right: 1px solid rgba(255,255,255,.07);
}
.sidebar-header { padding: 2px 8px 10px; }
.brand { display: flex; align-items: center; gap: 12px; }
.sidebar-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(105, 65, 255, .32);
}
.brand-text h1 { margin: 0; font-size: 18px; line-height: 1.2; }
.brand-text p { margin: 4px 0 0; color: var(--sidebar-muted); font-size: 12px; }
.divider { height: 1px; margin: 10px 7px; background: rgba(255,255,255,.08); }
.sidebar-menu, .account-menu { display: flex; flex-direction: column; gap: 5px; }
.menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    color: var(--sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
}
.menu-button:hover { background: var(--sidebar-hover); border-color: rgba(255,255,255,.07); }
.menu-icon { width: 20px; display: inline-grid; place-items: center; font-size: 17px; }
.signup-button { background: rgba(118, 87, 255, .15); }

.chat-history-section { display: flex; flex: 1; min-height: 0; flex-direction: column; padding: 0 2px; }
.chat-history-title { padding: 7px 10px; color: var(--sidebar-muted); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.chat-history-list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding-right: 3px; }
.chat-history-list::-webkit-scrollbar { width: 5px; }
.chat-history-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 10px; }
.chat-history-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    color: var(--sidebar-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
}
.chat-history-item:hover { background: rgba(124,78,255,.12); border-color: rgba(124,78,255,.16); }
.chat-history-item.active { background: rgba(124,78,255,.22); border-color: rgba(124,78,255,.34); }
.chat-history-icon { color: #a38cff; }
.chat-history-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
}
.user-avatar, .message-avatar, .about-icon {
    display: grid;
    place-items: center;
    color: white;
    background: var(--accent);
    font-weight: 800;
}
.user-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; }
.user-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.user-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-info span { margin-top: 2px; color: var(--sidebar-muted); font-size: 11px; }
.logout-button { padding: 7px; color: var(--sidebar-muted); background: transparent; cursor: pointer; font-size: 18px; }
.logout-button:hover { color: white; }

.main-content { min-width: 0; height: 100vh; flex: 1; display: flex; flex-direction: column; }
.topbar {
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
}
.topbar-title { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #28c76f; box-shadow: 0 0 0 4px rgba(40,199,111,.12); }
.mobile-menu-button, .topbar-settings {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--text);
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
}
.mobile-menu-button { display: none; }
.mobile-menu-button:hover, .topbar-settings:hover { background: var(--surface-secondary); }

.chat-area { flex: 1; min-height: 0; overflow-y: auto; position: relative; }
.welcome-screen {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 28px;
    text-align: center;
}
.welcome-logo {
    width: 105px;
    height: 105px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 18px 55px rgba(100, 69, 255, .28);
}
.welcome-screen h2 { margin: 24px 0 8px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; }
.welcome-screen > p { margin: 0; color: var(--text-secondary); font-size: 15px; }
.suggestion-grid { width: min(720px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 34px; }
.suggestion-grid button {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(22,27,45,.04);
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
}
.suggestion-grid button:hover { transform: translateY(-2px); border-color: rgba(118,87,255,.38); box-shadow: var(--shadow); }
.suggestion-grid button > span { font-size: 23px; }
.suggestion-grid strong, .suggestion-grid small { display: block; }
.suggestion-grid strong { font-size: 14px; }
.suggestion-grid small { margin-top: 4px; color: var(--text-secondary); font-size: 12px; }

.chat-box { width: min(860px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 140px; }
.message-row { display: flex; width: 100%; gap: 11px; margin: 17px 0; }
.user-row { justify-content: flex-end; }
.ai-row { justify-content: flex-start; align-items: flex-start; }
.message-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; font-size: 13px; }
.message { max-width: min(680px, 82%); padding: 12px 15px; border-radius: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.user-message { color: white; background: linear-gradient(135deg, #8d4cff, #397bff); border-bottom-right-radius: 5px; }
.ai-message { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: 0 7px 20px rgba(22,27,45,.04); }
.typing-indicator { display: flex; gap: 5px; align-items: center; min-height: 44px; }
.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); animation: bounce 1.15s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity:.45; } 30% { transform: translateY(-5px); opacity:1; } }

.composer-wrapper {
    flex: 0 0 auto;
    padding: 12px 22px 14px;
    background: linear-gradient(to top, var(--bg) 72%, transparent);
}
.composer {
    width: min(860px, 100%);
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin: 0 auto;
    padding: 10px 10px 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.composer textarea { flex: 1; max-height: 170px; resize: none; padding: 8px 0; color: var(--text); background: transparent; border: 0; outline: none; line-height: 1.45; }
.composer textarea::placeholder { color: var(--text-secondary); }
.send-button { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 13px; cursor: pointer; font-size: 20px; }
.send-button:disabled { opacity: .55; cursor: default; }
.composer-note { margin: 8px 0 0; color: var(--text-secondary); font-size: 11px; text-align: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,7,12,.66); backdrop-filter: blur(8px); }
.modal { width: min(430px, 100%); position: relative; padding: 28px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; color: var(--text-secondary); background: var(--surface-secondary); border-radius: 10px; cursor: pointer; font-size: 22px; }
.modal-logo { width: 70px; height: 70px; display: block; margin: 0 auto 16px; object-fit: cover; border-radius: 20px; }
.modal h2 { margin: 0; }
.modal > p { margin: 8px 0 22px; color: var(--text-secondary); line-height: 1.5; }
.modal label { display: block; margin: 14px 0 7px; font-size: 13px; font-weight: 700; }
.modal input[type="text"], .modal input[type="password"] { width: 100%; padding: 12px 13px; color: var(--text); background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 12px; outline: none; }
.modal input:focus { border-color: var(--accent-solid); box-shadow: 0 0 0 3px var(--accent-soft); }
.full-button { width: 100%; margin-top: 20px; }
.primary-button, .secondary-button { padding: 11px 17px; border-radius: 12px; cursor: pointer; font-weight: 700; }
.primary-button { color: white; background: var(--accent); }
.secondary-button { color: var(--text); background: var(--surface-secondary); border: 1px solid var(--border); }
.settings-modal { width: min(500px, 100%); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 15px; }
.setting-row strong, .setting-row span { display: block; }
.setting-row span { margin-top: 4px; color: var(--text-secondary); font-size: 12px; }
.switch { position: relative; width: 48px; height: 27px; flex: 0 0 48px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #aeb3c0; border-radius: 99px; cursor: pointer; transition: .2s; }
.slider::before { content:""; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: .2s; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.switch input:checked + .slider { background: var(--accent-solid); }
.switch input:checked + .slider::before { transform: translateX(21px); }
.about-card { display: flex; gap: 13px; margin-top: 14px; padding: 16px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 15px; }
.about-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; }
.about-content h3 { margin: 0; font-size: 15px; }
.about-content p { margin: 6px 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.about-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--text-secondary); font-size: 11px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }

@media (max-width: 760px) {
    .sidebar { position: fixed; z-index: 40; left: 0; top: 0; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 22px 0 60px rgba(0,0,0,.35); }
    .sidebar.open { transform: translateX(0); }
    .mobile-menu-button { display: grid; }
    .topbar { padding: 0 12px; }
    .suggestion-grid { grid-template-columns: 1fr; }
    .welcome-screen { justify-content: flex-start; padding-top: 55px; }
    .chat-box { width: calc(100% - 24px); }
    .composer-wrapper { padding: 10px 10px 12px; }
    .message { max-width: 88%; }
}

/* Chat rename/delete controls */
.chat-history-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 11px;
    transition: background .18s ease, border-color .18s ease;
}
.chat-history-row:hover {
    background: rgba(124, 78, 255, .10);
    border-color: rgba(124, 78, 255, .16);
}
.chat-history-row.active {
    background: rgba(124, 78, 255, .18);
    border-color: rgba(124, 78, 255, .30);
}
.chat-history-row .chat-history-item {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
}
.chat-history-row .chat-history-item:hover,
.chat-history-row.active .chat-history-item {
    background: transparent;
    border-color: transparent;
}
.chat-history-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}
.chat-history-row:hover .chat-history-actions,
.chat-history-row.active .chat-history-actions {
    opacity: 1;
    pointer-events: auto;
}
.chat-action-button {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}
.chat-action-button:hover {
    color: var(--text);
    background: rgba(124, 78, 255, .17);
}
.delete-chat-button:hover {
    color: #ff5f6d;
    background: rgba(255, 75, 92, .14);
}

/* EU privacy controls */
.cookie-banner{position:fixed;z-index:3000;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;background:var(--surface,#fff);color:var(--text,#171717);border:1px solid var(--border,#ddd);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.22)}
.cookie-banner[hidden]{display:none}.cookie-banner p{margin:5px 0 0;color:var(--text-secondary,#666);font-size:13px}.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}.privacy-modal{width:min(620px,100%)}.privacy-intro{line-height:1.55}.privacy-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.legal-modal{width:min(760px,100%);max-height:88vh;overflow:auto}.legal-modal h2{margin-top:0}.legal-modal h3{margin-top:22px}.legal-modal p,.legal-modal li{line-height:1.6;color:var(--text-secondary,#555)}.legal-footer{position:fixed;z-index:20;right:16px;bottom:6px;display:flex;gap:10px}.legal-footer button{border:0;background:transparent;color:var(--text-secondary,#777);font:inherit;font-size:11px;cursor:pointer}.legal-footer button:hover{text-decoration:underline}.danger-button{background:#b42318!important;color:#fff!important}
@media(max-width:700px){.cookie-banner{flex-direction:column;align-items:stretch}.cookie-actions>*{flex:1}.legal-footer{position:static;justify-content:center;padding:8px}}


/* Version 2 account, age and privacy controls */
.age-confirmation { display:flex; align-items:flex-start; gap:10px; margin-top:16px !important; padding:12px; background:var(--surface-secondary); border:1px solid var(--border); border-radius:12px; font-weight:500 !important; line-height:1.4; }
.age-confirmation input { width:18px; height:18px; margin-top:1px; flex:0 0 18px; }
.age-confirmation span { color:var(--text-secondary); font-size:12px; }
.settings-data-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.settings-data-actions .danger-button { grid-column:1 / -1; }
.danger-button { padding:11px 17px; color:#fff; background:#d83a4b; border-radius:12px; cursor:pointer; font-weight:700; }
.danger-button:hover { background:#bd2e3e; }
.cookie-banner[hidden] { display:none !important; }
.cookie-banner { position:fixed; z-index:80; left:18px; right:18px; bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.28); }
.cookie-banner p { margin:5px 0 0; color:var(--text-secondary); font-size:12px; }
.cookie-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.privacy-modal { width:min(600px,100%); max-height:90vh; overflow:auto; }
.privacy-modal .setting-row + .setting-row { margin-top:10px; }
.privacy-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.legal-modal { width:min(720px,100%); max-height:88vh; overflow:auto; }
.legal-modal h3 { margin:22px 0 7px; }
.legal-modal p { color:var(--text-secondary); line-height:1.65; }
.legal-footer { position:fixed; right:16px; bottom:6px; z-index:20; display:flex; gap:9px; }
.legal-footer button { padding:4px; color:var(--text-secondary); background:transparent; cursor:pointer; font-size:10px; }
.legal-footer button:hover { color:var(--text); }
@media (max-width:760px) { .cookie-banner { flex-direction:column; align-items:stretch; } .cookie-actions { justify-content:stretch; } .cookie-actions button { flex:1; } .settings-data-actions { grid-template-columns:1fr; } .settings-data-actions .danger-button { grid-column:auto; } }

/* Image upload */
.image-preview {
    width: min(860px, 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto 10px;
    padding: 10px 12px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(22, 27, 45, .08);
}
.image-preview[hidden] { display: none; }
.image-preview img {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: cover;
    border-radius: 12px;
}
.image-preview-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.image-preview-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.image-preview-info span { color: var(--text-secondary); font-size: 11px; }
.remove-image-button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    background: var(--surface-secondary);
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
}
.remove-image-button:hover { color: #ff5f6d; }
.attach-button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    color: var(--text);
    background: var(--surface-secondary);
    border: 1px solid var(--border);
    border-radius: 13px;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}
.attach-button:hover { border-color: rgba(118, 87, 255, .45); background: var(--accent-soft); }
.chat-uploaded-image {
    display: block;
    max-width: min(420px, 100%);
    max-height: 420px;
    object-fit: contain;
    margin-bottom: 9px;
    border-radius: 12px;
}
.message-text { white-space: pre-wrap; }
.user-message:has(.chat-uploaded-image) { padding: 8px; }
.user-message:has(.chat-uploaded-image) .message-text { padding: 2px 6px 5px; }
@media (max-width: 760px) {
    .image-preview { width: 100%; }
    .chat-uploaded-image { max-height: 320px; }
}


/* AI answer word-by-word animation */
.streaming-text::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -0.12em;
    background: currentColor;
    animation: streaming-caret 0.75s steps(1) infinite;
}

@keyframes streaming-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}


/* Account recovery, admin and message controls */
.forgot-password-button{display:block;margin:12px 0 0 auto;background:transparent;color:var(--accent-solid);cursor:pointer;font-size:12px}.message-actions{display:flex;gap:5px;align-self:flex-end;opacity:.55}.message-row:hover .message-actions{opacity:1}.message-actions button{padding:5px 7px;border-radius:8px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:11px}.message-actions button:hover{background:var(--surface-secondary);color:var(--text)}.admin-modal{width:min(760px,100%);max-height:88vh;overflow:auto}.admin-stats{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:7px 12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-secondary)}.admin-stats strong{font-size:20px}.admin-stats span{align-self:center;color:var(--text-secondary)}.admin-users{display:flex;flex-direction:column;gap:8px;margin-top:15px}.admin-user{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:12px}.admin-user div{display:flex;flex-direction:column;min-width:0}.admin-user small{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis}.admin-user button{padding:7px 10px;border-radius:9px;background:var(--surface-secondary);color:var(--text);cursor:pointer}@media(max-width:600px){.admin-stats{grid-template-columns:auto 1fr}.message-actions{opacity:1}}


.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    width: 100%;
    padding-right: 46px;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 17px;
    opacity: 0.75;
}

.password-toggle:hover {
    opacity: 1;
}

.password-box {
    position: relative;
    width: 100%;
}

.password-box input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 48px;
}

.show-password-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    width: 24px;
    height: 24px;
    padding: 0;
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.show-password-btn:hover {
    opacity: 1;
}