:root { --bg: #fffdf7; --surface: #ffffff; --surface-soft: #f8f2e6; --text: #221c2c; --muted: #786f7e; --line: #e9dec8; --gold: #ba8740; --violet: #7154a9; --accent: #4e3780; --shadow: 0 18px 45px #533d7114; }
    [data-theme="dark"] { --bg: #0d1022; --surface: #17142d; --surface-soft: #211c3d; --text: #f1edff; --muted: #b5accb; --line: #393154; --gold: #dcb76b; --violet: #ae91f7; --accent: #c0a5ff; --shadow: 0 18px 45px #00000045; }
:root {
    --bg: #f7f3ec;
    --surface: #fffdf8;
    --surface-soft: #f5eee2;

    --text: #302a24;
    --muted: #7b7065;
    --line: #e6d8c5;

    --gold: #b8863b;
    --gold-light: #d8b06a;

   
    --caramel: #a96f3d;
    --brown: #76502f;

    --hover-bg: #f4ead9;
    --hover-border: #c99a55;

    --shadow: 0 10px 30px #76502f18;
}


[data-theme="dark"] {
    --bg: #090714;
    --surface: #171224;
    --surface-soft: #21182f;

    --text: #eeeafb;
    --muted: #b5accb;
    --line: #332748;

    --gold: #dcb76b;
    --gold-light: #efd28f;

    --caramel: #c28a55;
    --brown: #9b6b3e;

    --hover-bg: #261e16;
    --hover-border: #c99a55;

    --shadow: 0 12px 35px #00000045;
}

[data-theme="dark"] {
    --bg: #090714;
    --surface: #171224;
    --surface-soft: #21182f;
    --text: #eeeafb;
    --muted: #b5accb;
    --line: #332748;

    --gold: #dcb76b;
    --violet: #ae91f7;
    --accent: #8e51df;

    --hover-bg: #25163d;
    --hover-border: #a966ff;

    --shadow: 0 12px 35px #00000045;
}
    * { box-sizing: border-box; }



    .auth-container {
    min-height: 100vh;
    display:grid;
    place-items: center;
    padding: 30px;
    background: radial-gradient(circle at 20% 20%, #a17f3a2e, transparent 30%), var(--bg); 
    }.auth-card {
   
    width: 450px;
    padding: 30px;
    color:rgb(128, 89, 12);
    border: 2px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow); 
}.auth-card:hover {
    border-color: #473505;
    box-shadow: 0 0 25px #4f340355;
    transform: translateY(-5px);
}.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; }.auth-logo span {
    color: var(--gold);
    font-size: 24px; }.auth-logo h1 {
    margin: 0;
    font-size: 30px; 
    }.auth-text {
    color: var(--muted);
    text-align: center;
    }.auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 28px 0 20px;
    border-radius: 12px;
    background: var(--surface-soft); 
    }.tab-btn { flex: 1;
    padding: 11px;
    color: var(--muted); 
    border: 12px;
    border-radius: 9px;
    background: transparent;
    transition:.3s ease; 
    }.tab-btn:hover {
    color:var(--accent);
    background:#ba874022;
}.tab-btn.active {
    color:var(--text);

    background:var(--surface);

    box-shadow:
    0 2px 7px #00000010,
    0 0 12px #ba874033;

    transform:translateY(-2px);
}.auth-form {
    display: grid;
    gap: 15px; 
    }.auth-form label {
    display: grid;
    gap: 7px;
    font-size: 14px;
    font-weight: bold;
    }.auth-form input { 
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    outline: none;
    padding: 12px;
    transition: 0.3s ease;
    }.auth-form input:hover {
    border-color: #ba8740;
}.auth-form input:focus {
    border-color:#ba8740;
    box-shadow:0 0 15px #ba874055;
    transform:translateY(-2px);
}
.primary-btn { 
    padding: 13px; 
    color: #fff;
    border: 0;
    border-radius: 10px;
    background: rgb(103, 71, 12);
    font-weight: bold;
    font-family:'Times New Roman';
    transition:.3s ease;
    }.primary-btn:hover {
    background:#ba8740;
    box-shadow:0 0 20px #ba874055;
    transform:scale(1.03);
}.hidden {
    display: none ;
    }
























    /* About page */
    .about-container {
    max-width: 800px;
    min-height: 100vh; 
    margin: auto;
    padding: 30px 20px;
    color: var(--text);
    }.about-container::before {
    content:none;
    position: fixed;
    z-index: -1;
    inset: 0;
    background: radial-gradient(circle at 90% 10%, #9671e524, transparent 32%), var(--bg);
    }.back-link {
    display:inline-flex;
    align-items:center;
    gap: 6px;
    
    padding:10px 18px;

    color:#010101;

    border:1px solid var(--line);
    border-radius:12px;

    background:var(--surface);

    text-decoration:none;

    font-weight:bold;
    font-family: Cambria;

    transition:.3s ease;
    margin-bottom:15px;
}

.back-link:hover {

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--violet),
        var(--accent)
    );

    border-color:var(--violet);

    box-shadow:
    0 0 20px #8b5cf655;

    transform:translateX(-5px);
} 

    .about-card {
    padding: clamp(25px, 7vw, 62px);
    border: 1px solid var(--line);
    border-radius: 25px;
    background: var(--surface);
    box-shadow: var(--shadow);
    }    .profile-image {
    width: 100px;
    height: 100px;
    border-radius:100%;
    overflow:hidden;
    border: 5px solid #ae7f18;
    transition: 0.35s ease;
    }.profile-image:hover {
    transform: scale(1.25) rotate(-3deg);
    box-shadow: 0 0 60px #ba874066;
}
    .eyebrow {
    margin: 28px 0px 8px 8px;
    color: var(--gold);
    font-size: 12px;
    letter-spacing: 2px; 
    }.about-card h1 {
    margin: 0;
    font-size: clamp(32px, 6vw, 50px);
    }.about-card h2 {
    margin-top: 35px;
    }.about-text {
    color: var(--muted);
    line-height: 1.75; 
    }.skill-list { 
    display: flex;
    flex-wrap: wrap;
    gap: 9px; 
    }.skill-list span {
    padding: 9px 12px;

    border: 1px solid var(--line);
    border-radius: 20px;

    color: var(--accent);
    background: var(--surface-soft);

    transition: .3s ease;
}


.skill-list span:hover {
    border-color: var(--gold);
    box-shadow: 0 0 15px #ba874055;
    transform: translateY(-3px);
}
    .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 35px;
    }.social-links a {
    padding: 10px 13px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
     transition: .3s ease;
    }.social-links a:hover {
    color: #fff;
    background: var(--accent);
        transform: translateY(-3px);
    }

    .auth-logo{
    font-family:Cambria;
    }

    .profile-image img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    }












body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;

    color: var(--text);
    background: var(--bg);

    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;

}
::selection {
    background: #4e4b49;
    color: #ffffff;
}


   .message-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.message-actions button {
    border: none;
    border-radius: 6px;

    background: transparent;
    color: var(--muted);

    cursor: pointer;
    font-size: 15px;
    opacity: .6;

    transition: 0.25s ease;
}

.message-actions button:hover {
    color: var(--accent);
    background: var(--hover-bg);
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
}
    .brand strong{
    font-family:Cambria;
    }

    .message-actions button:hover{
    opacity:1;
    transform:scale(1.1);
    }
    .app-header { 
    height: 64px;
    display: grid;
    grid-template-columns: 260px minmax(250px, 430px) 1fr;
    align-items: center;
    gap: 26px;
    padding: 0 20px;
    border-bottom: 1px solid #2a2142;
    background: linear-gradient(90deg, #0e0b1d, #0b0916); 
    }
    .brand {
    display: flex; 
    align-items: center;
    gap: 9px; 
    color: #f3cc8e;
    font-size: 22px;
    font-weight: bold; 
    text-decoration: none;
    letter-spacing: .4px; }
    .brand span { 
    color: #bd75ff;
    font-size: 34px;
    filter: drop-shadow(0 0 9px #903fff);
    }
    .header-search { 
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    color: #978fa9;
    border: 1px solid #241d36;
    border-radius: 10px; background: #191426; 
    }

    .header-search input {
    width: 100%;
    height: 36px;
    border: 0;
    outline: 0;
    color: #eeeafb;
    background: transparent;
    }

    .header-actions { 
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 14px;
    }.change-mode {
    padding: 8px 11px;
    color: #cfc5dc;
    border: 1px solid #332748; 
    border-radius: 8px;
    background: #191426;
    font-size: 12px;
    }.creator {
    color: #b7afc4;
    font-size: 13px;
    text-decoration: none;
    }.creator b { 
    color: #f0edf8;
    }.creator:hover b { 
    color: #d4a6ff; }

    .app-main {
    height: calc(100vh - 64px);
    display: grid;
    grid-template-columns: 258px minmax(0, 1fr) 278px;
    }
    .sidebar { 
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 20px 18px;
    overflow: hidden;
    border-right: 1px solid #2a2142;
    background: linear-gradient(180deg, #110c23, #0d0a18);
    }
    .new-chat {
    min-height: 42px;
    color: #fff;
    border: 1px solid #8150d8;
    border-radius: 9px;
    background: linear-gradient(110deg, #7138cf, #4e229a);
    box-shadow: 0 7px 20px #6927d74a;
    font-weight: bold; 
    }
    .new-chat:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px #782be275;
    }
    .sidebar-label {
    margin: 4px 3px -2px;
    color: #a79cb8;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .9px;
    }
    .chat-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
    }
    .chat-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    }
    .chat-item:hover {
    background: #1a132d; 
    }
    .chat-item.selected { 
    border-color: #7443c5;
    background: linear-gradient(90deg, #392167, #24163f);
    box-shadow: inset 3px 0 #b066ff;
    }
  
    .chat-title, .chat-menu, .chat-actions button {
    border: 0;
    color: #e9e2f5;
    background: transparent;
    }
    .chat-title { 
    min-width: 0;
    flex: 1;
    padding: 12px 8px 12px 12px;
    overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12px;
    }
    .chat-item .chat-title {
    width: 100%;
    }.chat-title.selected {
    color: #ffffff;
    border-radius: 8px;
    background: linear-gradient(90deg, #4d2782, #291946);
    box-shadow: inset 3px 0 #b066ff;
    }
    .chat-menu { 
    padding: 8px;
    color: #a198b2; 
    }
    .chat-actions {
    display: none;
    position: absolute;
    z-index: 7;
    right: 4px;
    top: 37px;
    min-width: 116px;
    padding: 5px;
    border: 1px solid #463263;
    border-radius: 8px;
    background: #21182f;
    box-shadow: 0 14px 30px #0008;
    }
    .menu-open .chat-actions {
    display: grid; 
    }
    .chat-actions button {
    padding: 8px;
    text-align: left;
    font-size: 12px; 
    }
    .sidebar-bottom {
    display: grid;
    gap: 3px; 
    padding-top: 12px;
    border-top: 1px solid #29203a;
    }
.sidebar-action {
    padding: 9px 7px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    text-align: left;
    font-size: 12px;
}
.sidebar-action:hover {
    color: var(--accent);
    border-color: var(--hover-border);
    background: var(--hover-bg);
    transform: translateX(3px);
}

    .chat-area { 
    min-width: 0;
    overflow-y: auto;
    padding: 20px 18px 164px;
    background: radial-gradient(circle at 48% 35%, #25144437, transparent 42%), #0c0918; 
    }
    .welcome-screen {
    max-width: 735px;
    margin: 0 auto 17px;
    padding: 42px 25px 27px;
    border: 1px solid #201934;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f0b20, #0b0915);
    text-align: center;
    }
    .welcome-icon {
    width: 57px; 
    height: 57px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border: 1px solid #6633ac;
    border-radius: 15px;
    color: #d9a2ff;
    background: #271440;
    font-size: 34px;
    box-shadow: 0 0 26px #8f3fff5c;
    }
    .welcome-screen h1 {
    margin: 0;
    color: #ecd1a1;
    font-size: 25px;
    }.welcome-screen p {
    margin: 7px 0;
    color: #e1dcec;
    font-size: 23px;
    font-weight: bold;
    }
    .suggestions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    max-width: 620px;
    margin: 27px auto 0;
    }
    .suggestions button { 
    padding: 17px 7px;
    color: #eeeafa;
    border: 1px solid #302742;
    border-radius: 10px;
    background: linear-gradient(145deg, #1c162b, #151020);
    }.suggestions button:hover {
    border-color: var(--hover-border);
    background: var(--hover-bg);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

    .message {
    max-width: 760px;

    display: flex;
    gap: 10px;

    margin: 0 auto 15px;
    padding: 16px 17px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--surface);
    
    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.message:hover {
    border-color: var(--hover-border);
    box-shadow: var(--shadow);
}
   .message.user {
    border-color: var(--accent);
    background: linear-gradient(
        105deg,
        var(--hover-bg),
        var(--surface)
    );
}.message-avatar { width: 28px; height: 28px; flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%; 
    color: #fff;
    background: linear-gradient(145deg, #9d57ef, #512397);
    font-size: 10px;
    font-weight: bold;
    }.user .message-avatar { background: #8f55e2; }
    .message-body {
    min-width: 0;
    flex: 1; }.message-content {
    color: #f0edf7;
    line-height: 1.65;
    font-size: 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    }.message-content pre { 
    padding: 13px;
    overflow: auto;
    border: 1px solid #36294d;
    border-radius: 8px;
    color: #eae2ff;
    background: #0b0913;
    }.message-meta { 
    margin-top: 8px; color: #948aa5;
    font-size: 11px;
    }.message-tools { 
    margin-top: 8px; 
    opacity: 0; 
    }.message:hover .message-tools {
    opacity: 1;
    }.message-tools button {
    padding: 0 8px 0 0;
    color: #b4a7c7;
    border: 0;
    background: transparent;
    font-size: 11px;
    }

    .details-panel 
    { overflow-y: auto;
    padding: 19px 13px;
    border-left: 1px solid #2a2142; 
    background: linear-gradient(180deg, #100b1f, #0c0917);
    }.detail-card {
    margin-bottom: 13px;
    padding: 15px;

    border: 1px solid var(--line);
    border-radius: 11px;

    background: var(--surface);
    box-shadow: var(--shadow);

    transition:
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}
.detail-card:hover {
    border-color: var(--hover-border);
    transform: translateY(-2px);
    box-shadow: 0 14px 35px color-mix(
        in srgb,
        var(--accent) 12%,
        transparent
    );
}.detail-card h3 {
    margin: 0 0 14px;
    color: #f0d7a5;
    font-size: 14px; 
    }.context-ring {
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    margin: 8px auto 10px;
    border: 9px solid #37264d;
    border-top-color: #b776ff;
    border-right-color: #6436ae;
    border-radius: 50%;
    transform: rotate(35deg);
    box-shadow: 0 0 16px #8a43e144;
    }.context-percent {
    color: #eee8f8;
    font-size: 22px;
    transform: rotate(-35deg); 
    }.context-panel-text {
    margin: 0 0 13px;
    color: #bdb3c9;
    text-align: center;
    font-size: 11px; 
    }.context-lines p, .chat-info p {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    color: #b8aec4;
    font-size: 11px;
    }.context-lines b, .chat-info b { 
    color: #f0edf7;
    font-weight: normal;
    }.context-warning {
    padding: 10px; 
    color: #f1c84f; 
    border-radius: 7px;
    background: #392b16;
    font-size: 10px;
    }.quick-card div { 
    display: grid;
    grid-template-columns:
    1fr 1fr; gap: 7px; 
    }.quick-card button {
    padding: 9px 4px;
    color: #ded7ec;
    border: 1px solid #2b233c;
    border-radius: 7px;
    background: #20182e;
    font-size: 10px;
    }.quick-card button:hover { 
    border-color: #7d44ce;
    }.chat-info {
    margin-bottom: 0;
    }

.input-area {
    position: fixed;
    z-index: 4;
    right: 291px;
    bottom: 0;
    left: 258px;
    padding: 10px 18px 19px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    backdrop-filter: blur(8px);
    transition: 0.3s ease;
}
.input-box {
    width: min(760px, 100%);
    margin: auto;

    display: flex;
    align-items: end;
    gap: 7px;

    padding: 8px;

    border: 1px solid var(--violet);
    border-radius: 12px;

    background: var(--surface);
    box-shadow: var(--shadow);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.input-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--violet) 30%, transparent);
}.context-info {
    width: min(760px, 100%);
    min-height: 18px;
    margin: auto;
    color: var(--muted);
    font-size: 10px;
}.input-box select {
    max-width: 145px;
    padding: 8px;

    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;

    background: var(--surface-soft);

    outline: none;
    cursor: pointer;

    transition: 0.25s ease;
}

.input-box select:hover {
    border-color: var(--hover-border);
    background: var(--hover-bg);
}
    .compare-label {
    padding-bottom: 9px;
    color: #b4a8c4;
    font-size: 10px;
    white-space: nowrap;
    }.input-box textarea {
    min-height: 39px;
    flex: 1;

    padding: 8px;

    color: var(--text);
    border: none;
    outline: none;

    background: transparent;

    resize: none;
}

.input-box textarea::placeholder {
    color: var(--muted);
}
    .input-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 18px #8f51d52e;
}
    .input-box button {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 9px;

    color: #fff;

    background: linear-gradient(
        135deg,
        var(--violet),
        var(--accent)
    );

    box-shadow: 0 4px 13px color-mix(
        in srgb,
        var(--accent) 45%,
        transparent
    );

    cursor: pointer;
}

.input-box button:hover {
    transform: translateY(-2px) scale(1.03);

    box-shadow: 0 7px 20px color-mix(
        in srgb,
        var(--violet) 55%,
        transparent
    );
}
#stopBtn {
    display: none;
    background: #6b3150;
}

#stopBtn:hover {
    background: #913d69;
}



    .modal {
    display: none;
    position: fixed;
    z-index: 20;
    inset: 0;
    place-items: center;
    padding: 20px;
    background: #00000085;
    }.modal.show {
    display: grid;
    }.modal-card {
    width: min(100%, 400px);
    padding: 24px;
    border: 1px solid #4b3470;
    border-radius: 15px;
    background: #191326;
    box-shadow: 0 20px 60px #000b;
    }.modal-card h2 {
    margin-top: 0;
    }.close-modal {
    float: right;
    color: #c4b9d4;
    border: 0;
    background: transparent;
    font-size: 25px; 
    }.setting_group {
    display: grid;
    gap: 7px;
    margin: 15px 0;
    color: #c7bdcf;
    font-size: 12px; 
    }.setting_group select, .setting_group input { 
    padding: 8px;
    color: #eee9f8;
    border: 1px solid #44345e;
    border-radius: 6px;
    background: #211a31;
    }.check-label { 
    display: block;
    margin: 12px 0;
    color: #c9c0d6;
    font-size: 12px;
    }.outline-btn { 
    padding: 9px 12px;
    color: #eee9f8;
    border: 1px solid #7147aa;
    border-radius: 7px;
    background: #2a1c43;
    }.typing-indicator {
    max-width: 760px;
    margin: 0 auto 15px;
    color: #baadce;
    font-size: 12px;
    }.typing-indicator i { 
    width: 4px;
    height: 4px;
    display: inline-block;
    margin-left: 3px;
    border-radius: 50%;
    background: #b86fff;
    animation: blink 1s infinite; 
    }.typing-indicator i:nth-child(3) {
    animation-delay: .2s;
    }.typing-indicator i:nth-child(4) {
    animation-delay: .4s;
    }.toast-container {
    position: fixed;
    z-index: 30;
    right: 20px;
    bottom: 20px;
    }.toast {
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    background: #312146;
    box-shadow: 0 12px 35px #0008;
    }.toast.error { background: #922e48;
    }::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #6f529c;
}




/* Ai support because i have a problem between dark and light  */



/* in this ---|  */




@keyframes blink {
    50% { opacity: .2; }
    }.no-animations *, .no-animations *::before {
    animation: none !important;
    transition: none !important; 
    }

    @media (max-width: 1080px) { .app-main { grid-template-columns: 220px minmax(0, 1fr); }.details-panel { display: none; }.input-area { right: 0; left: 220px; }.app-header { grid-template-columns: 220px minmax(170px, 390px) 1fr; }.sidebar { padding: 16px 12px; } }
    @media (max-width: 680px) { .app-header { grid-template-columns: 1fr auto; padding: 0 13px; }.header-search { display: none; }.creator { font-size: 0; }.creator b { font-size: 11px; }.app-main { grid-template-columns: 59px minmax(0, 1fr); }.sidebar { padding: 9px 6px; }.new-chat { font-size: 0; }.new-chat:first-letter { font-size: 22px; }.sidebar-label, .chat-list, .sidebar-action { display: none; }.input-area { left: 59px; padding: 8px; }.suggestions { grid-template-columns: 1fr; gap: 8px; }.welcome-screen { margin-top: 8px; padding: 26px 15px; }.welcome-screen p { font-size: 19px; }.compare-label { display: none; }.input-box select { max-width: 112px; }.chat-area { padding: 12px 10px 130px; } }


    :root:not([data-theme="dark"]) .app-header { border-color: #eadfcf; background: #fffdf8; }:root:not([data-theme="dark"]) .brand { color: #50328c; }:root:not([data-theme="dark"]) .brand span { color: #a565db; }:root:not([data-theme="dark"]) .header-search { border-color: #e6d9c6; background: #f7f1e7; }:root:not([data-theme="dark"]) .header-search input { color: #30283c; }:root:not([data-theme="dark"]) .creator, :root:not([data-theme="dark"]) .creator b { color: #5e5368; }:root:not([data-theme="dark"]) .change-mode { color: #4e3c5d; border-color: #e4d6c4; background: #f8f1e8; }
    :root:not([data-theme="dark"]) .sidebar { border-color: #e8dece; background: #fffdfa; }:root:not([data-theme="dark"]) .sidebar-label { color: #82758b; }:root:not([data-theme="dark"]) .chat-item:hover { background: #f4ecfa; }:root:not([data-theme="dark"]) .chat-item.selected { border-color: #bd91e3; background: linear-gradient(90deg, #eadbfa, #f8efff); box-shadow: inset 3px 0 #8c4cc5; }:root:not([data-theme="dark"]) .chat-title, :root:not([data-theme="dark"]) .chat-menu, :root:not([data-theme="dark"]) .sidebar-action { color: #4e4159; }:root:not([data-theme="dark"]) .sidebar-bottom { border-color: #eee4d8; }:root:not([data-theme="dark"]) .sidebar-action:hover { color: #51288b; background: #f4ecfa; }
    :root:not([data-theme="dark"]) .chat-title.selected { color: #4e2671; background: linear-gradient(90deg, #eadbfa, #f8efff); box-shadow: inset 3px 0 #8c4cc5; }
    :root:not([data-theme="dark"]) .chat-area { background: radial-gradient(circle at 48% 35%, #e7ceff88, transparent 42%), #fbf8f2; }:root:not([data-theme="dark"]) .welcome-screen, :root:not([data-theme="dark"]) .message, :root:not([data-theme="dark"]) .detail-card { border-color: #eadfce; background: linear-gradient(145deg, #fffefd, #fbf5ec); box-shadow: 0 8px 24px #5d447412; }:root:not([data-theme="dark"]) .welcome-screen h1 { color: #a66a22; }:root:not([data-theme="dark"]) .welcome-screen p, :root:not([data-theme="dark"]) .message-content { color: #30283c; }:root:not([data-theme="dark"]) .welcome-icon { color: #9b4fca; background: #f2ddff; }:root:not([data-theme="dark"]) .suggestions button { color: #42334d; border-color: #eadfce; background: #fffdf8; }:root:not([data-theme="dark"]) .message.user { border-color: #c8a5e6; background: linear-gradient(105deg, #f3e7ff, #fbf4ff); }:root:not([data-theme="dark"]) .message-meta, :root:not([data-theme="dark"]) .message-tools button { color: #85778e; }
    :root:not([data-theme="dark"]) .details-panel { border-color: #e8dece; background: #fffdfa; }:root:not([data-theme="dark"]) .detail-card h3 { color: #7a4b9e; }:root:not([data-theme="dark"]) .context-panel-text, :root:not([data-theme="dark"]) .context-lines p, :root:not([data-theme="dark"]) .chat-info p { color: #786b80; }:root:not([data-theme="dark"]) .context-lines b, :root:not([data-theme="dark"]) .chat-info b { color: #352b40; }:root:not([data-theme="dark"]) .quick-card button { color: #4d3d59; border-color: #eadfce; background: #faf4ff; }
    :root:not([data-theme="dark"]) .input-area { border-color: #eadfce; background: #fffdf8ee; }:root:not([data-theme="dark"]) .input-box { border-color: #ba83e0; background: #fff; box-shadow: 0 0 18px #9d59d22e; }:root:not([data-theme="dark"]) .input-box select { color: #3b2f46; background: #f5edfa; }:root:not([data-theme="dark"]) .input-box textarea { color: #2f2538; }:root:not([data-theme="dark"]) .compare-label, :root:not([data-theme="dark"]) .context-info { color: #7d6e88; }

    .about-container { height: 100vh; overflow-y: auto; }

    body[data-density="compact"] .message { margin-bottom: 8px; padding: 10px 12px; }






button,
a,
input,
textarea,
select,
.chat-item,
.message,
.detail-card,
.suggestions button {
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}




:root:not([data-theme="dark"]) .brand:hover {
    color: var(--accent);
}

:root:not([data-theme="dark"]) .brand:hover span {
    transform: scale(1.12) rotate(5deg);
    filter: drop-shadow(0 0 13px #9b5dcc);
}

:root:not([data-theme="dark"]) .header-search:focus-within {
    border-color: var(--violet);
    box-shadow: 0 0 12px #9b5dcc30;
}

:root:not([data-theme="dark"]) .change-mode:hover {
    color: var(--accent);
    border-color: var(--hover-border);
    background: var(--hover-bg);
    transform: translateY(-2px);
}

:root:not([data-theme="dark"]) .creator:hover {
    color: var(--accent);
}

:root:not([data-theme="dark"]) .creator:hover b {
    color: var(--violet);
}




:root:not([data-theme="dark"]) .new-chat:hover {
    border-color: #8c4cc5;
    background: linear-gradient(
        110deg,
        #8041d8,
        #5d2aad
    );

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px #7b3bd550;
}




:root:not([data-theme="dark"]) .chat-item:hover {
    background: #f4ecfa;
    border-color: #d5b8ec;
    transform: translateX(2px);
}

:root:not([data-theme="dark"]) .chat-item.selected {
    border-color: #bd91e3;
    background: linear-gradient(
        90deg,
        #eadbfa,
        #f8efff
    );
}

:root:not([data-theme="dark"]) .chat-title:hover {
    color: var(--accent);
}

:root:not([data-theme="dark"]) .chat-menu:hover {
    color: var(--accent);
    background: #f0e3fa;
}




:root:not([data-theme="dark"]) .sidebar-action:hover {
    color: var(--accent);
    background: #f4ecfa;
    border-color: #d8bceb;
    transform: translateX(3px);
}




:root:not([data-theme="dark"]) .suggestions button {
    border-color: var(--line);
    background: var(--surface);
}

:root:not([data-theme="dark"]) .suggestions button:hover {
    color: var(--accent);
    border-color: var(--hover-border);
    background: var(--hover-bg);

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px #76509c18;
}




:root:not([data-theme="dark"]) .message:hover {
    border-color: #c6a1df;

    box-shadow:
        0 8px 25px #76509c18;
}

:root:not([data-theme="dark"]) .message.user:hover {
    border-color: #a96fd1;
}




:root:not([data-theme="dark"]) .message-actions button:hover {
    color: var(--accent);
    background: #f2e6fa;
    opacity: 1;

    transform:
        translateY(-2px)
        scale(1.08);
}



:root:not([data-theme="dark"]) .quick-card button {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

:root:not([data-theme="dark"]) .quick-card button:hover {
    color: var(--accent);
    border-color: var(--hover-border);
    background: var(--hover-bg);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px #76509c18;
}



:root:not([data-theme="dark"]) .detail-card {
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

:root:not([data-theme="dark"]) .detail-card:hover {
    border-color: #d4b4e9;

    transform: translateY(-2px);

    box-shadow:
        0 12px 30px #76509c18;
}



:root:not([data-theme="dark"]) .input-box select:hover {
    color: var(--accent);
    border-color: var(--hover-border);
    background: var(--hover-bg);
}



:root:not([data-theme="dark"]) .input-box:hover {
    border-color: #a96fd1;
}

:root:not([data-theme="dark"]) .input-box:focus-within {
    border-color: var(--accent);

    box-shadow:
        0 0 20px #9b5dcc30;
}



:root:not([data-theme="dark"]) .input-box button:hover {
    background: linear-gradient(
        135deg,
        #9d63dc,
        #6338a5
    );

    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:
        0 8px 20px #7042b84d;
}



:root:not([data-theme="dark"]) #stopBtn:hover {
    background: #8f426d;
    transform: translateY(-2px);
}



:root:not([data-theme="dark"]) .context-warning {
    transition: 0.25s ease;
}

:root:not([data-theme="dark"]) .context-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px #a66a2220;
}