```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #07111f;
    --bg-deep: #050c16;
    --surface: #0b1829;
    --surface-2: #0e1d31;
    --surface-3: #12243a;

    --white: #ffffff;
    --text: #f3f6fa;
    --text-2: #c7d0dc;
    --text-3: #8b98aa;
    --text-4: #657286;

    --primary: #7c5cff;
    --primary-2: #5e8dff;
    --primary-soft: rgba(124, 92, 255, .14);

    --cyan: #68dfff;
    --green: #3ed598;
    --red: #ff6f86;
    --yellow: #ffd166;

    --line: rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .12);

    --glass: rgba(10, 24, 42, .78);
    --glass-strong: rgba(8, 19, 33, .94);

    --sidebar-width: 290px;
    --topbar-height: 72px;
    --content-width: 920px;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --shadow-xl: 0 35px 100px rgba(0, 0, 0, .40);
    --shadow-lg: 0 20px 55px rgba(0, 0, 0, .28);

    --ease: cubic-bezier(.2, .75, .25, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    color-scheme: dark;
    background: var(--bg);
}

body {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(99, 102, 241, .11),
            transparent 26%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(56, 189, 248, .09),
            transparent 27%
        ),
        radial-gradient(
            circle at 55% 100%,
            rgba(124, 92, 255, .075),
            transparent 34%
        ),
        var(--bg);

    color: var(--text);
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

button,
a,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
}

::selection {
    background: rgba(124, 92, 255, .28);
    color: #fff;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .11);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .17);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================
   GLOBAL
========================================================= */

a {
    color: inherit;
}

button {
    font-family: inherit;
}

input,
textarea {
    font-family: inherit;
}

.hidden {
    display: none !important;
}

/* =========================================================
   LANDING
========================================================= */

.landing {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.landing::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    right: -240px;
    top: -320px;
    border-radius: 50%;
    background: rgba(124, 92, 255, .13);
    filter: blur(110px);
    pointer-events: none;
}

.landing::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    left: -300px;
    bottom: -350px;
    border-radius: 50%;
    background: rgba(56, 189, 248, .08);
    filter: blur(110px);
    pointer-events: none;
}

.landing-top {
    width: min(1450px, calc(100% - 52px));
    min-height: 84px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 20;
}

.landing-logo,
.sb-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.045em;
}

.landing-logo .dot,
.sb-brand .dot,
.dot {
    flex: 0 0 auto;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255,255,255,.95) 0 13%,
            transparent 14%
        ),
        linear-gradient(
            135deg,
            #7f6aff,
            #5e91ff
        );

    box-shadow:
        0 0 0 5px rgba(124, 92, 255, .08),
        0 0 30px rgba(124, 92, 255, .30);
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-ghost,
.btn-white,
.btn-primary {
    border: 0;
    cursor: pointer;
    font-weight: 700;
    transition:
        transform .18s var(--ease),
        background .18s ease,
        border-color .18s ease,
        opacity .18s ease,
        box-shadow .18s ease;
}

.btn-ghost {
    padding: 11px 16px;
    color: #dbe3ed;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
}

.btn-ghost:hover {
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.13);
}

.btn-white {
    padding: 12px 18px;
    color: #0a1220;
    background: #fff;
    border-radius: 12px;
    box-shadow:
        0 12px 30px rgba(255,255,255,.08);
}

.btn-white:hover {
    transform: translateY(-1px);
    box-shadow:
        0 16px 34px rgba(255,255,255,.13);
}

.landing-center {
    width: min(1000px, calc(100% - 30px));
    min-height: calc(100vh - 84px);
    margin: 0 auto;
    padding: 32px 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 5;
    animation: landingEnter .55s var(--ease);
}

@keyframes landingEnter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    margin-bottom: 23px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    color: #99a7b8;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .025em;
    backdrop-filter: blur(14px);
}

.landing-eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow:
        0 0 16px rgba(62,213,152,.50);
}

.landing-center h1 {
    width: 100%;
    max-width: 900px;
    font-size: clamp(46px, 7vw, 84px);
    line-height: .98;
    letter-spacing: -.075em;
    font-weight: 800;
    background:
        linear-gradient(
            110deg,
            #ffffff 9%,
            #e7e4ff 39%,
            #96b4ff 73%,
            #ffffff 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-center h2 {
    margin-top: 20px;
    color: #edf2f8;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 750;
    letter-spacing: -.05em;
}

.hero-description {
    width: min(730px, 100%);
    margin-top: 13px;
    color: var(--text-3);
    line-height: 1.75;
    font-size: 14px;
}

.landing-box {
    width: min(780px, 100%);
    margin-top: 31px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(
            180deg,
            rgba(16,34,56,.90),
            rgba(8,19,33,.90)
        );

    box-shadow:
        0 24px 80px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter: blur(24px);
}

.landing-box:focus-within {
    border-color: rgba(124,92,255,.35);
    box-shadow:
        0 24px 80px rgba(0,0,0,.28),
        0 0 0 4px rgba(124,92,255,.06);
}

.landing-box input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 16px 15px;
    color: #fff;
    font-size: 14px;
}

.landing-box input::placeholder {
    color: #6f7d90;
}

.round-btn {
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-2)
        );

    box-shadow:
        0 12px 30px rgba(95,140,255,.22);

    transition:
        transform .18s var(--ease),
        box-shadow .18s ease;
}

.round-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 17px 35px rgba(95,140,255,.29);
}

.landing-features {
    width: min(780px, 100%);
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.landing-feature {
    padding: 15px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.065);
    background: rgba(255,255,255,.025);
    border-radius: 15px;
    backdrop-filter: blur(12px);
    transition:
        transform .18s var(--ease),
        background .18s ease,
        border-color .18s ease;
}

.landing-feature:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.10);
}

.landing-feature-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e9f1;
    font-size: 12px;
    font-weight: 750;
}

.landing-feature-text {
    margin-top: 6px;
    color: #68788c;
    line-height: 1.5;
    font-size: 11px;
}

/* =========================================================
   MODAL
========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(2, 8, 16, .78);
    backdrop-filter: blur(18px);
}

.modal-overlay.show,
.modal-overlay.open,
.modal-overlay.active {
    display: flex;
}

.modal-card {
    width: min(470px, 100%);
    position: relative;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    background:
        linear-gradient(
            180deg,
            rgba(17,35,58,.98),
            rgba(7,18,31,.98)
        );

    box-shadow: var(--shadow-xl);
    animation: modalEnter .25s var(--ease);
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(255,255,255,.03);
    color: #8795a7;
    font-size: 19px;
    cursor: pointer;
    transition:
        color .15s ease,
        background .15s ease;
}

.modal-close:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.modal-card h2 {
    color: #fff;
    text-align: left;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.05em;
}

.modal-card p.sub {
    margin-top: 8px;
    margin-bottom: 22px;
    color: #8090a3;
    font-size: 13px;
    line-height: 1.65;
}

.modal-card form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-card label {
    margin-top: 8px;
    color: #aeb9c7;
    font-size: 11px;
    font-weight: 700;
}

.modal-card input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 12px;
    outline: 0;
    padding: 13px 14px;
    background: rgba(255,255,255,.035);
    color: #fff;
    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.modal-card input:hover {
    background: rgba(255,255,255,.05);
}

.modal-card input:focus {
    border-color: rgba(124,92,255,.55);
    background: rgba(124,92,255,.045);
    box-shadow:
        0 0 0 4px rgba(124,92,255,.09);
}

.modal-card .btn-primary {
    margin-top: 14px;
    padding: 14px;
    border-radius: 13px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-2)
        );

    box-shadow:
        0 14px 28px rgba(95,140,255,.16);
}

.modal-card .btn-primary:hover {
    transform: translateY(-1px);
}

.modal-switch {
    margin-top: 19px;
    text-align: center;
    color: #708095;
    font-size: 12px;
}

.modal-switch a {
    margin-left: 4px;
    color: #a99aff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

/* =========================================================
   APP SHELL
========================================================= */

.app {
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    flex: 0 0 var(--sidebar-width);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 80;
    padding: 12px;
    border-right: 1px solid rgba(255,255,255,.065);
    background:
        linear-gradient(
            180deg,
            rgba(9,24,41,.97),
            rgba(5,15,27,.99)
        );

    box-shadow:
        20px 0 50px rgba(0,0,0,.10);

    transition:
        transform .24s var(--ease),
        width .24s var(--ease);
}

.sidebar::before {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 220px;
    height: 220px;
    left: -130px;
    top: -100px;
    border-radius: 50%;
    background: rgba(124,92,255,.07);
    filter: blur(70px);
}

.sb-top {
    min-height: 53px;
    display: flex;
    align-items: center;
    padding: 0 8px 13px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.sb-brand {
    font-size: 18px;
}

.sb-brand .dot {
    width: 11px;
    height: 11px;
}

.new-chat-btn {
    width: 100%;
    margin: 14px 0 10px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    border: 1px solid rgba(124,92,255,.21);
    border-radius: 13px;
    color: #f6f7fb;
    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.15),
            rgba(95,140,255,.105)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

    font-size: 13px;
    font-weight: 750;
    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s var(--ease);
}

.new-chat-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(124,92,255,.38);
    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.21),
            rgba(95,140,255,.15)
        );
}

.conv-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    padding: 5px 2px 12px;
}

.conv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 40px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #b7c1cf;
    font-size: 12px;
    cursor: pointer;
    transition:
        background .16s ease,
        color .16s ease,
        border-color .16s ease;
}

.conv-item:hover {
    color: #eef2f7;
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.045);
}

.conv-item.active {
    color: #fff;
    background: rgba(124,92,255,.105);
    border-color: rgba(124,92,255,.15);
}

.conv-item span.title {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.conv-del {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    opacity: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6e7b8c;
    cursor: pointer;
    transition:
        opacity .15s ease,
        color .15s ease,
        background .15s ease;
}

.conv-item:hover .conv-del {
    opacity: 1;
}

.conv-del:hover {
    color: #ff8195;
    background: rgba(255,111,134,.08);
}

.sb-footer {
    margin-top: 7px;
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.sb-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 11px;
    color: #dfe5ed;
    font-size: 12px;
    font-weight: 650;
    overflow: hidden;
}

.sb-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
    background:
        linear-gradient(
            135deg,
            #7d64ff,
            #5595ff
        );

    box-shadow:
        0 10px 25px rgba(90,90,220,.19);
}

.sb-user > div:last-child,
.sb-user {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sb-logout {
    display: block;
    margin-top: 2px;
    padding: 7px 8px;
    border-radius: 9px;
    color: #69778a;
    font-size: 11px;
    text-decoration: none;
    transition:
        color .15s ease,
        background .15s ease;
}

.sb-logout:hover {
    color: #e8edf4;
    background: rgba(255,255,255,.035);
}

/* =========================================================
   MAIN / TOPBAR
========================================================= */

.main {
    width: calc(100% - var(--sidebar-width));
    min-width: 0;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(
            circle at 50% -15%,
            rgba(91,113,255,.065),
            transparent 30%
        );
}

.topbar {
    width: 100%;
    height: var(--topbar-height);
    flex: 0 0 var(--topbar-height);
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,.055);
    background:
        rgba(5,16,29,.64);
    backdrop-filter: blur(20px);
}

.icon-btn {
    width: 39px;
    height: 39px;
    position: absolute;
    left: 15px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: #bdc7d4;
    cursor: pointer;
    transition:
        background .16s ease,
        border-color .16s ease;
}

.icon-btn:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.11);
}

.model-select-wrap {
    position: relative;
}

.model-select-btn {
    min-width: 250px;
    max-width: min(420px, 70vw);
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    color: #edf2f7;
    cursor: pointer;
    font-size: 12px;
    font-weight: 750;
    overflow: hidden;
    transition:
        background .16s ease,
        border-color .16s ease;
}

.model-select-btn:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(124,92,255,.23);
}

.model-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 330px;
    padding: 7px;
    display: none;
    z-index: 100;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 15px;
    background:
        rgba(9,23,40,.97);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(25px);
    animation: dropdownIn .15s var(--ease);
}

.model-dropdown.active,
.model-dropdown.show,
.model-dropdown.open {
    display: block;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.model-option {
    width: 100%;
    min-height: 41px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 10px;
    color: #aab6c5;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
    transition:
        background .14s ease,
        color .14s ease;
}

.model-option:hover {
    color: #fff;
    background: rgba(255,255,255,.05);
}

.model-option.selected {
    color: #d7d0ff;
    background: rgba(124,92,255,.11);
}

.model-check {
    color: #a799ff;
    font-weight: 900;
}

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

.chat-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.chat-inner {
    width: min(var(--content-width), calc(100% - 36px));
    min-height: 100%;
    margin: 0 auto;
    padding: 35px 0 180px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.empty-state {
    min-height: calc(100vh - 290px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: emptyIn .45s var(--ease);
}

@keyframes emptyIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.empty-state .big-dot {
    width: 54px;
    height: 54px;
    margin-bottom: 19px;
    border-radius: 18px;
    position: relative;
    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255,255,255,.75) 0 7%,
            transparent 8%
        ),
        linear-gradient(
            135deg,
            #7563ff,
            #5c91ff
        );

    box-shadow:
        0 0 0 11px rgba(124,92,255,.055),
        0 0 50px rgba(124,92,255,.21);
}

.empty-state h3 {
    color: #eef2f7;
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 780;
    letter-spacing: -.055em;
}

.empty-state p {
    margin-top: 9px;
    color: #748297;
    font-size: 12px;
    line-height: 1.6;
}

/* =========================================================
   MESSAGE SYSTEM
========================================================= */

.msg {
    width: 100%;
    display: flex;
    animation: messageIn .28s var(--ease);
}

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msg-user {
    flex-direction: column;
    align-items: flex-end;
}

.msg-assistant {
    align-items: flex-start;
    gap: 11px;
}

.msg-user-meta,
.msg-assistant-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    color: #748297;
    font-size: 10px;
    font-weight: 700;
}

.msg-user-meta {
    padding-right: 3px;
}

.msg-assistant-meta {
    padding-left: 2px;
}

.assistant-model {
    max-width: 270px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #59687b;
    font-weight: 500;
}

.assistant-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-top: 1px;
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #7e67ff,
            #5c91ff
        );

    box-shadow:
        0 10px 25px rgba(84,91,226,.18);
}

.assistant-avatar-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.90);
    box-shadow:
        0 0 12px rgba(255,255,255,.35);
}

.msg-assistant-content {
    min-width: 0;
    width: min(820px, calc(100% - 45px));
}

.msg-bubble {
    min-width: 0;
    word-break: break-word;
}

.msg-user .msg-bubble {
    max-width: min(760px, 84%);
    padding: 13px 16px;
    border: 1px solid rgba(124,92,255,.18);
    border-radius: 17px 17px 5px 17px;
    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.18),
            rgba(95,140,255,.14)
        );

    color: #f3f6fb;
    font-size: 14px;
    line-height: 1.65;

    box-shadow:
        0 9px 25px rgba(0,0,0,.10);
}

.assistant-bubble {
    padding: 2px 0;
    color: #ccd5df;
    font-size: 14px;
    line-height: 1.72;
}

.assistant-bubble a {
    color: #9eafff;
    text-decoration: underline;
    text-decoration-color: rgba(158,175,255,.3);
    text-underline-offset: 3px;
}

.assistant-bubble strong {
    color: #f4f7fb;
    font-weight: 750;
}

.assistant-bubble ul {
    margin: 8px 0 10px 21px;
}

.assistant-bubble li {
    margin: 5px 0;
    padding-left: 3px;
}

.md-line {
    min-height: 1.55em;
}

.md-spacer {
    height: 8px;
}

.assistant-bubble h4 {
    margin: 13px 0 7px;
    color: #edf2f7;
    font-size: 15px;
    letter-spacing: -.02em;
}

.assistant-bubble > code,
.assistant-bubble code:not(pre code) {
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    color: #c9bcff;
    font-family:
        'Fira Code',
        Consolas,
        Monaco,
        monospace;
    font-size: .88em;
}

/* =========================================================
   LOADING
========================================================= */

.loading-bubble {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 12px 15px 15px 4px;
    background: rgba(255,255,255,.025);
    color: #8795a7;
    font-size: 12px;
}

.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots i {
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 50%;
    background: #7f8da0;
    animation: loadingPulse 1.15s infinite ease-in-out;
}

.loading-dots i:nth-child(2) {
    animation-delay: .16s;
}

.loading-dots i:nth-child(3) {
    animation-delay: .32s;
}

@keyframes loadingPulse {
    0%,
    80%,
    100% {
        opacity: .25;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow:
        0 0 9px rgba(62,213,152,.45);
}

/* =========================================================
   THINKING / REASONING
========================================================= */

.reasoning-box {
    width: min(820px, 100%);
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid rgba(124,92,255,.13);
    border-radius: 13px;
    background:
        linear-gradient(
            180deg,
            rgba(124,92,255,.055),
            rgba(255,255,255,.018)
        );

    overflow: hidden;
}

.reasoning-box summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #b6acff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    user-select: none;
}

.reasoning-box summary::-webkit-details-marker {
    display: none;
}

.reasoning-box summary::after {
    content: "⌄";
    margin-left: auto;
    color: #737f94;
    transition: transform .18s ease;
}

.reasoning-box[open] summary::after {
    transform: rotate(180deg);
}

.reasoning-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: rgba(124,92,255,.10);
    color: #a999ff;
}

.reasoning-content {
    padding: 0 12px 12px;
    border-top: 1px solid rgba(124,92,255,.08);
    color: #8794a7;
    font-family:
        'Fira Code',
        Consolas,
        Monaco,
        monospace;
    font-size: 11px;
    line-height: 1.65;
}

/* =========================================================
   ASSISTANT ACTIONS
========================================================= */

.assistant-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding-left: 1px;
}

.assistant-action {
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #5e6c7f;
    font-size: 10px;
    cursor: pointer;
    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.assistant-action:hover {
    color: #c3cbd5;
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.055);
}

.assistant-action.copied {
    color: #70e3ab;
}

/* =========================================================
   CODE BLOCKS
========================================================= */

.code-wrapper {
    width: 100%;
    margin: 14px 0;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    overflow: hidden;
    background: #08111d;
    box-shadow:
        0 14px 35px rgba(0,0,0,.18);
}

.code-header {
    min-height: 40px;
    padding: 8px 10px 8px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.017)
        );
}

.code-language {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8d9bad;
    font-family:
        'Fira Code',
        Consolas,
        monospace;
    font-size: 10px;
    text-transform: lowercase;
}

.code-language-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7385ff;
    box-shadow:
        0 0 9px rgba(115,133,255,.35);
}

.copy-btn {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: #aab5c2;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.copy-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.13);
}

.copy-btn.copied {
    color: #6ce1a7;
    border-color: rgba(62,213,152,.20);
    background: rgba(62,213,152,.055);
}

.code-wrapper pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    background: #07101b !important;
}

.code-wrapper code {
    font-family:
        'Fira Code',
        'SFMono-Regular',
        Consolas,
        Monaco,
        'Courier New',
        monospace;

    font-size: 12px;
    line-height: 1.65;
}

/* Highlight.js */
.hljs {
    background: transparent !important;
}

/* =========================================================
   FILE CHIP
========================================================= */

#fileChipWrap {
    padding: 3px 2px 0;
}

.file-chip {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
}

.file-chip-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #aaa0ff;
    background: rgba(124,92,255,.10);
}

.file-chip-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-chip-info strong {
    max-width: 330px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #dce4ed;
    font-size: 10px;
    font-weight: 700;
}

.file-chip-info span {
    color: #69778b;
    font-size: 9px;
}

.file-chip-remove {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6d7b8d;
    cursor: pointer;
    font-size: 17px;
    transition:
        color .15s ease,
        background .15s ease;
}

.file-chip-remove:hover {
    color: #ff7e92;
    background: rgba(255,111,134,.08);
}

/* =========================================================
   COMPOSER
========================================================= */

.composer-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding:
        26px
        20px
        13px;

    background:
        linear-gradient(
            180deg,
            rgba(7,17,31,0),
            rgba(7,17,31,.76) 24%,
            rgba(7,17,31,.97) 62%,
            rgba(7,17,31,1) 100%
        );
}

.composer {
    width: min(var(--content-width), calc(100% - 0px));
    margin: 0 auto;
    padding: 10px 10px 9px 14px;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 20px;
    background:
        linear-gradient(
            180deg,
            rgba(15,31,50,.90),
            rgba(9,20,34,.93)
        );

    box-shadow:
        0 25px 65px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.03);

    backdrop-filter: blur(22px);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.composer:focus-within {
    border-color: rgba(124,92,255,.27);
    box-shadow:
        0 25px 65px rgba(0,0,0,.30),
        0 0 0 4px rgba(124,92,255,.045);
}

.composer-row {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.composer textarea,
#messageInput {
    width: 100%;
    flex: 1;
    min-height: 51px;
    max-height: 220px;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eef3f8;
    padding: 12px 2px;
    font-size: 13px;
    line-height: 1.6;
}

.composer textarea::placeholder,
#messageInput::placeholder {
    color: #6e7e91;
}

.send-btn {
    width: 43px;
    height: 43px;
    min-width: 43px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-2)
        );

    cursor: pointer;

    box-shadow:
        0 11px 27px rgba(95,140,255,.20);

    transition:
        transform .18s var(--ease),
        opacity .18s ease,
        box-shadow .18s ease;
}

.send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 15px 32px rgba(95,140,255,.29);
}

.send-btn:active:not(:disabled) {
    transform: translateY(0) scale(.98);
}

.send-btn:disabled {
    opacity: .30;
    cursor: not-allowed;
    box-shadow: none;
}

.composer-tools {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 1px 1px;
    overflow-x: auto;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 31px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #77869a;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition:
        color .16s ease,
        background .16s ease,
        border-color .16s ease;
}

.tool-btn:hover {
    color: #d9e1e9;
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.06);
}

.tool-btn.active {
    color: #c9bfff;
    background: rgba(124,92,255,.10);
    border-color: rgba(124,92,255,.20);
}

.thinking-active-icon {
    color: #aa9cff;
    text-shadow:
        0 0 12px rgba(170,156,255,.32);
}

.hint {
    width: min(var(--content-width), 100%);
    margin: 8px auto 0;
    text-align: center;
    color: #566579;
    font-size: 9px;
    line-height: 1.4;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
    :root {
        --sidebar-width: 265px;
    }

    .landing-center h1 {
        font-size: clamp(44px, 7vw, 72px);
    }

    .msg-user .msg-bubble {
        max-width: 90%;
    }
}

@media (max-width: 860px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--sidebar-width);
        transform: translateX(-105%);
        box-shadow:
            25px 0 70px rgba(0,0,0,.36);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main {
        width: 100%;
    }

    .icon-btn {
        display: grid;
    }

    .topbar {
        justify-content: flex-start;
        padding-left: 68px;
        padding-right: 12px;
    }

    .model-select-btn {
        max-width: calc(100vw - 90px);
    }

    .landing-features {
        grid-template-columns: 1fr;
        width: min(680px, 100%);
    }

    .landing-feature {
        padding: 13px 14px;
    }
}

@media (max-width: 620px) {
    .landing-top {
        width: calc(100% - 24px);
        min-height: 68px;
    }

    .landing-logo {
        font-size: 16px;
    }

    .landing-logo .dot {
        width: 10px;
        height: 10px;
    }

    .landing-actions {
        gap: 4px;
    }

    .btn-ghost {
        padding: 9px 10px;
        font-size: 10px;
    }

    .btn-white {
        padding: 10px 12px;
        font-size: 10px;
    }

    .landing-center {
        width: calc(100% - 24px);
        min-height: calc(100vh - 68px);
        padding-top: 22px;
    }

    .landing-eyebrow {
        margin-bottom: 17px;
        padding: 7px 11px;
        font-size: 9px;
    }

    .landing-center h1 {
        font-size: clamp(41px, 13.5vw, 62px);
        letter-spacing: -.08em;
    }

    .landing-center h2 {
        margin-top: 17px;
        font-size: 23px;
    }

    .hero-description {
        max-width: 440px;
        margin-top: 9px;
        font-size: 11px;
        line-height: 1.65;
    }

    .landing-box {
        margin-top: 22px;
        border-radius: 17px;
        padding: 7px;
    }

    .landing-box input {
        padding: 14px 11px;
        font-size: 12px;
    }

    .round-btn {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .landing-features {
        margin-top: 13px;
        gap: 7px;
    }

    .landing-feature {
        padding: 11px 12px;
    }

    .landing-feature-title {
        font-size: 10px;
    }

    .landing-feature-text {
        font-size: 9px;
    }

    .modal-card {
        padding: 24px 17px 20px;
        border-radius: 19px;
    }

    .modal-card h2 {
        font-size: 24px;
    }

    .modal-card p.sub {
        font-size: 11px;
    }

    .topbar {
        height: 64px;
        min-height: 64px;
        padding-left: 59px;
    }

    .icon-btn {
        left: 10px;
        width: 38px;
        height: 38px;
    }

    .model-select-btn {
        min-width: 0;
        width: calc(100vw - 79px);
        max-width: 320px;
        font-size: 10px;
    }

    .model-dropdown {
        width: min(330px, calc(100vw - 24px));
    }

    .chat-inner {
        width: calc(100% - 22px);
        padding-top: 22px;
        padding-bottom: 165px;
        gap: 21px;
    }

    .empty-state {
        min-height: calc(100vh - 270px);
    }

    .empty-state .big-dot {
        width: 47px;
        height: 47px;
        border-radius: 15px;
        margin-bottom: 16px;
    }

    .empty-state h3 {
        font-size: 25px;
        max-width: 340px;
    }

    .empty-state p {
        max-width: 320px;
        font-size: 10px;
    }

    .assistant-avatar {
        width: 31px;
        height: 31px;
        border-radius: 10px;
    }

    .msg-assistant {
        gap: 8px;
    }

    .msg-assistant-content {
        width: calc(100% - 39px);
    }

    .assistant-bubble,
    .msg-user .msg-bubble {
        font-size: 12px;
        line-height: 1.67;
    }

    .msg-user .msg-bubble {
        max-width: 93%;
    }

    .composer-wrap {
        padding:
            17px
            10px
            9px;
    }

    .composer {
        border-radius: 17px;
        padding-left: 11px;
    }

    .composer textarea,
    #messageInput {
        min-height: 47px;
        font-size: 12px;
    }

    .send-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
    }

    .tool-btn {
        font-size: 9px;
        min-height: 29px;
    }

    .hint {
        font-size: 8px;
        margin-top: 6px;
    }

    .code-wrapper {
        margin: 11px 0;
        border-radius: 12px;
    }

    .code-header {
        min-height: 37px;
    }

    .code-wrapper pre {
        padding: 12px;
    }

    .code-wrapper code {
        font-size: 10px;
    }

    .file-chip {
        max-width: 100%;
    }

    .file-chip-info strong {
        max-width: 220px;
    }
}

@media (max-width: 420px) {
    .landing-actions .btn-ghost {
        display: none;
    }

    .landing-top {
        justify-content: space-between;
    }

    .landing-center h1 {
        font-size: 39px;
    }

    .landing-center h2 {
        font-size: 21px;
    }

    .hero-description {
        font-size: 10px;
    }

    .landing-feature-text {
        display: none;
    }

    .landing-feature {
        padding: 10px;
    }

    .landing-feature-title {
        justify-content: center;
    }

    .model-select-btn {
        width: calc(100vw - 75px);
    }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

:focus-visible {
    outline: 2px solid rgba(124,92,255,.65);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}
```