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

:root {
    --bg: #080a12;
    --sidebar: #0c0e18;
    --panel: rgba(255,255,255,0.035);
    --border: rgba(255,255,255,0.075);
    --text: #f4f5ff;
    --muted: #85899e;
    --blue: #638cff;
    --purple: #a36aff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
button { font-family: inherit; color: inherit; cursor: pointer; border: none; }
.app-container {
    display: flex; width: 100%; height: 100vh;
    background: radial-gradient(ellipse at 70% 35%, rgba(71,83,180,.10), transparent 45%),
                radial-gradient(ellipse at 45% 90%, rgba(116,65,190,.07), transparent 40%), var(--bg);
}

/* SIDEBAR */
.sidebar { width: 265px; min-width: 265px; background: rgba(11,13,23,.88); backdrop-filter: blur(25px); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 27px 18px 16px; z-index: 2; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 800; letter-spacing: 2px; padding: 0 8px; margin-bottom: 38px; }
.brand-icon { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg,#548aff,#a36aff); box-shadow: 0 0 22px rgba(106,119,255,.4); font-size: 22px; }
.brand-light { color: #8c9fff; font-weight: 500; }
.new-chat { width: 100%; padding: 13px; border-radius: 12px; background: linear-gradient(110deg,rgba(85,119,255,.17),rgba(151,93,255,.12)); border: 1px solid rgba(117,132,255,.23); text-align: left; font-size: 13px; font-weight: 600; transition: .25s; }
.new-chat span { font-size: 18px; margin-right: 9px; }
.new-chat:hover { background: rgba(107,125,255,.25); box-shadow: 0 0 20px rgba(105,120,255,.12); }
.sidebar-section { margin-top: 35px; }
.section-title { color: #686d83; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; padding: 0 10px; margin-bottom: 13px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; background: transparent; border-radius: 10px; color: #9da1b3; font-size: 12px; text-align: left; margin-bottom: 5px; transition: .2s; }
.nav-item > span:first-child { font-size: 17px; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.055); color: white; }
.nav-item.active { border: 1px solid rgba(255,255,255,.055); }
.soon { margin-left: auto; font-size: 8px; color: #a98aff; letter-spacing: 1px; }
.history { flex: 1; overflow-y: auto; }
.history-item { padding: 11px; color: #888da1; font-size: 11px; border-radius: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.history-item:hover { background: rgba(255,255,255,.05); color: white; }
.sidebar-bottom { border-top: 1px solid var(--border); padding-top: 17px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 8px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(135deg,#6c8cff,#a46bff); border-radius: 11px; font-weight: 700; }
.profile strong { display: block; font-size: 11px; }
.profile small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.settings { margin-left: auto; color: var(--muted); cursor: pointer; }

/* MAIN */
.main-content { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; position: relative; }
.topbar { height: 76px; min-height: 76px; padding: 0 35px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.012); }
.model-selector { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); background: rgba(255,255,255,.035); border-radius: 10px; font-size: 12px; font-weight: 600; }
.status-dot { width: 7px; height: 7px; background: #70e8b2; border-radius: 50%; box-shadow: 0 0 9px #70e8b2; }
.arrow { color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 14px; }
.online-status { font-size: 9px; letter-spacing: 1px; color: #70dca9; }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; color: #aeb2c4; }

/* WELCOME */
.welcome-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; overflow-y: auto; }
.orb-container { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: 32px; }
.orb { width: 72px; height: 72px; border-radius: 25px; display: grid; place-items: center; font-size: 37px; background: linear-gradient(135deg,#6399ff,#9871ff 65%,#c184ff); box-shadow: 0 0 30px rgba(101,127,255,.4), 0 0 75px rgba(140,91,255,.18); animation: float 4s ease-in-out infinite; }
.orb-ring { position: absolute; border: 1px solid rgba(130,144,255,.2); border-radius: 50%; inset: 0; animation: rotate 12s linear infinite; }
.ring-two { inset: -13px; border-style: dashed; border-color: rgba(167,119,255,.16); animation-direction: reverse; animation-duration: 20s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes rotate { to { transform: rotate(360deg); } }
.welcome-label { display: flex; align-items: center; gap: 9px; color: #9299bc; font-size: 9px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 22px; }
.welcome-label span { width: 6px; height: 6px; background: #8d81ff; border-radius: 50%; box-shadow: 0 0 9px #8d81ff; }
.welcome-screen h1 { font-size: clamp(34px,4vw,51px); line-height: 1.17; letter-spacing: -2px; font-weight: 700; }
.welcome-screen h1 span { background: linear-gradient(90deg,#78a6ff,#a987ff,#d19aff); background-clip: text; -webkit-background-clip: text; color: transparent; }
.welcome-description { color: #858a9e; font-size: 12px; line-height: 1.8; max-width: 410px; margin-top: 18px; }
.suggestions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 35px; width: min(520px,100%); }
.suggestion { display: flex; align-items: center; gap: 11px; padding: 15px; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 12px; text-align: left; color: #b7bbce; font-size: 10px; transition: .25s; }
.suggestion span { color: #9e8aff; font-size: 17px; }
.suggestion:hover { border-color: rgba(143,131,255,.45); background: rgba(120,104,255,.08); transform: translateY(-3px); }

/* INPUT */
.input-container { width: min(760px,90%); margin: 0 auto 20px; z-index: 1; }
.input-box { background: rgba(20,23,38,.88); backdrop-filter: blur(25px); border: 1px solid rgba(255,255,255,.12); border-radius: 17px; padding: 17px 17px 12px; box-shadow: 0 12px 45px rgba(0,0,0,.22); transition: .25s; }
.input-box:focus-within { border-color: rgba(126,133,255,.5); box-shadow: 0 0 25px rgba(107,114,255,.09); }
.input-box textarea { width: 100%; resize: none; background: transparent; border: none; outline: none; color: white; font-family: inherit; font-size: 13px; min-height: 35px; max-height: 150px; }
.input-box textarea::placeholder { color: #777c91; }
.input-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.input-tools { display: flex; align-items: center; gap: 10px; }
.input-tools button { background: rgba(255,255,255,.07); width: 29px; height: 29px; border-radius: 9px; color: #aeb3ca; font-size: 19px; }
.tool-label { color: #858ba2; font-size: 10px; }
.send-button { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg,#638eff,#a16aff); font-size: 22px; font-weight: 600; box-shadow: 0 0 17px rgba(112,115,255,.28); transition: .2s; }
.send-button:hover { transform: scale(1.08); box-shadow: 0 0 24px rgba(112,115,255,.5); }
.send-button:disabled { opacity: .55; cursor: not-allowed; }
.disclaimer { text-align: center; color: #5f6478; font-size: 9px; margin-top: 12px; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.attachment-chip { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 10px; border: 1px solid rgba(130,145,255,.25); border-radius: 9px; background: rgba(100,120,255,.10); color: #cbd3ff; font-size: 11px; }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { flex-shrink: 0; background: transparent; color: inherit; font-size: 16px; }

/* CHAT */
.chat-area { display: none; flex: 1; overflow-y: auto; padding: 35px 20px; flex-direction: column; align-items: center; gap: 24px; }
.message { width: min(760px,100%); display: flex; gap: 13px; line-height: 1.8; font-size: 13px; white-space: pre-wrap; }
.message-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.message.user { padding: 17px; background: rgba(255,255,255,.035); border: 1px solid var(--border); border-radius: 14px; }
.message-avatar { width: 29px; height: 29px; min-width: 29px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg,#638eff,#a16aff); font-size: 13px; }
.message.assistant { color: #d5d8e7; padding: 10px 3px; }
.message.assistant .message-avatar { background: rgba(129,117,255,.15); color: #b8a4ff; }

/* LIGHT THEME */
body[data-theme="light"] { background: #f5f7fc; color: #202438; }
body[data-theme="light"] .app-container { background: radial-gradient(ellipse at 70% 35%,rgba(99,140,255,.09),transparent 45%), radial-gradient(ellipse at 45% 90%,rgba(163,106,255,.07),transparent 40%),#f5f7fc; }
body[data-theme="light"] .sidebar { background: rgba(255,255,255,.88); border-right-color: #e5e8f1; }
body[data-theme="light"] .section-title { color: #858ba0; }
body[data-theme="light"] .nav-item { color: #626b82; }
body[data-theme="light"] .nav-item:hover, body[data-theme="light"] .nav-item.active { background: rgba(99,140,255,.09); color: #35436b; }
body[data-theme="light"] .nav-item.active { border-color: rgba(99,140,255,.12); }
body[data-theme="light"] .history-item { color: #626b82; }
body[data-theme="light"] .history-item:hover { background: rgba(99,140,255,.08); color: #283552; }
body[data-theme="light"] .sidebar-bottom { border-top-color: #e5e8f1; }
body[data-theme="light"] .settings { color: #737b91; }
body[data-theme="light"] .topbar { background: rgba(255,255,255,.65); border-bottom-color: #e5e8f1; }
body[data-theme="light"] .model-selector { background: rgba(255,255,255,.8); border-color: #e1e5ef; color: #303750; }
body[data-theme="light"] .arrow { color: #727b91; }
body[data-theme="light"] .icon-button { background: #fff; border-color: #e1e5ef; color: #59647c; }
body[data-theme="light"] .welcome-label { color: #68738f; }
body[data-theme="light"] .welcome-description { color: #687087; }
body[data-theme="light"] .suggestion { background: rgba(255,255,255,.8); border-color: #e3e7f0; color: #48516a; box-shadow: 0 4px 15px rgba(30,45,90,.025); }
body[data-theme="light"] .suggestion:hover { background: #fff; border-color: rgba(143,131,255,.55); }
body[data-theme="light"] .input-box { background: rgba(255,255,255,.94); border-color: #e1e5ef; box-shadow: 0 12px 40px rgba(30,45,90,.09); }
body[data-theme="light"] .input-box:focus-within { border-color: rgba(99,140,255,.55); box-shadow: 0 0 25px rgba(107,114,255,.10); }
body[data-theme="light"] .input-box textarea { color: #202438; }
body[data-theme="light"] .input-box textarea::placeholder { color: #9299aa; }
body[data-theme="light"] .input-tools button { background: #eef1f8; color: #66718a; }
body[data-theme="light"] .tool-label { color: #7c8499; }
body[data-theme="light"] .disclaimer { color: #9299aa; }
body[data-theme="light"] .message.user { background: rgba(255,255,255,.85); border-color: #e4e8f1; color: #293149; }
body[data-theme="light"] .message.assistant { color: #303850; }
body[data-theme="light"] .message.assistant .message-avatar { background: rgba(129,117,255,.12); color: #8068df; }
body[data-theme="light"] .profile strong { color: #303850; }
body[data-theme="light"] .profile small { color: #7d8599; }
body[data-theme="light"] .new-chat { color: #35436b; background: linear-gradient(110deg,rgba(85,119,255,.13),rgba(151,93,255,.10)); border-color: rgba(117,132,255,.25); }
body[data-theme="light"] .attachment-chip { background: #eef1ff; border-color: #dce2ff; color: #405080; }

/* MOBILE */
@media(max-width:750px) {
    .sidebar { width: 65px; min-width: 65px; padding: 20px 9px; }
    .brand { justify-content: center; padding: 0; margin-bottom: 30px; }
    .brand > span, .section-title { display: none; }
    .new-chat { text-align: center; padding: 12px 0; font-size: 0; }
    .new-chat span { margin: 0; font-size: 18px; }
    .sidebar-section { margin-top: 22px; }
    .nav-item { justify-content: center; padding: 13px 0; font-size: 0; }
    .nav-item > span:first-child { font-size: 19px; }
    .nav-item .soon, .history, .sidebar-bottom { display: none; }
    .topbar { padding: 0 15px; }
    .online-status { display: none; }
    .welcome-screen h1 { font-size: 35px; }
    .welcome-description { font-size: 11px; }
    .suggestions { grid-template-columns: 1fr; max-width: 340px; }
    .input-container { width: 94%; }
    .tool-label { display: none; }
    .chat-area { padding: 24px 12px; }
}
@media(max-height:650px) {
    .welcome-screen { justify-content: flex-start; padding-top: 20px; }
    .orb-container { transform: scale(.75); margin-bottom: 10px; }
}