@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--bg:#fff;--panel:#f7f7f8;--text:#18181b;--muted:#71717a;--line:#e7e7ea;--soft:#f4f4f5;--accent:#111;--bubble:#f4f4f5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Cairo,system-ui,sans-serif;height:100vh;overflow:hidden}.app-shell{height:100%;display:flex}
.sidebar{width:292px;background:var(--panel);border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:13px;transition:.25s;z-index:5}.side-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 10px}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px}.brand-mark,.hero-icon{display:grid;place-items:center;background:#111;color:#fff}.brand-mark{width:32px;height:32px;border-radius:10px}.icon{border:0;background:transparent;width:36px;height:36px;border-radius:9px;font-size:19px;cursor:pointer}.icon:hover{background:#e9e9eb}.new-chat{height:46px;border:1px solid #dcdce0;background:#fff;border-radius:11px;text-align:right;padding:0 13px;font:600 13px Cairo;display:flex;align-items:center;gap:8px;cursor:pointer}.new-chat span{font-size:20px}.new-chat kbd{margin-right:auto;background:#f0f0f1;border:1px solid #ddd;border-radius:5px;padding:1px 6px;font:11px system-ui;color:#777}.search{height:40px;border:1px solid #dddde1;background:#fff;border-radius:10px;display:flex;align-items:center;padding:0 10px;gap:7px;color:#888}.search input{border:0;outline:0;background:transparent;width:100%;font:12px Cairo}.label{font-size:11px;color:#999;padding:6px 9px 0}.history-item{padding:10px 11px;border-radius:9px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.history-item:hover,.history-item.active{background:#e9e9eb}.side-footer{margin-top:auto;border-top:1px solid #e5e5e6;padding-top:10px}.profile{border:0;background:transparent;width:100%;display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;text-align:right;cursor:pointer;font-family:inherit}.profile:hover{background:#e9e9eb}.avatar{display:grid;place-items:center;border-radius:9px}.user-avatar{width:32px;height:32px;background:#ddd;color:#333}.profile small{display:block;color:#888;font-size:9px}.profile b{font-size:12px}.more{margin-right:auto;color:#888}
.main{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px}.model-picker{display:flex;align-items:center;gap:8px;font-size:13px}.status{width:8px;height:8px;border-radius:50%;background:#31a24c;box-shadow:0 0 0 3px #31a24c18}.model-picker .muted{color:#999;font-size:10px;background:var(--soft);padding:2px 7px;border-radius:20px}.top-actions{margin-right:auto;display:flex;gap:2px}.mobile-menu,#closeSide{display:none}
.chat{flex:1;overflow:auto}.welcome{max-width:860px;margin:10vh auto 0;padding:25px}.hero-icon{width:62px;height:62px;border-radius:19px;font-size:27px;margin:0 auto 20px;box-shadow:0 10px 35px #00000012}.welcome h1{text-align:center;font-size:32px;margin:0 0 8px;font-weight:800}.welcome h1 span{background:linear-gradient(90deg,#111,#777);-webkit-background-clip:text;color:transparent}.welcome>p{text-align:center;color:var(--muted);font-size:13px;margin:0 0 34px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:11px}.cards button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:16px;text-align:right;cursor:pointer;transition:.2s;font-family:inherit}.cards button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00000009;border-color:#ccc}.cards b{display:block;font-size:13px;margin-bottom:4px}.cards small{color:#888;font-size:10px}.messages{max-width:860px;margin:auto;padding:25px 25px 150px}.msg{display:flex;gap:12px;margin:24px 0;line-height:1.8;font-size:14px}.msg .avatar{width:34px;height:34px;flex:0 0 34px;background:#111;color:#fff}.msg.user .avatar{background:#e8e8e9;color:#222}.bubble{max-width:calc(100% - 46px);white-space:pre-wrap}.msg.user .bubble{background:var(--bubble);padding:9px 14px;border-radius:15px 15px 4px 15px}.msg.ai .bubble{padding-top:3px}
.composer-area{padding:12px 20px 18px;background:linear-gradient(transparent,#fff 22%)}.composer{max-width:860px;margin:auto;border:1px solid #d5d5d9;border-radius:17px;padding:7px 8px;display:flex;align-items:flex-end;background:#fff;box-shadow:0 5px 25px #00000008}.composer:focus-within{border-color:#aaa;box-shadow:0 7px 30px #0000000c}.composer textarea{flex:1;border:0;outline:0;resize:none;font:13px Cairo;line-height:1.6;padding:9px 7px;max-height:150px}.attach,.send{width:38px;height:38px;border:0;border-radius:11px;cursor:pointer}.attach{background:transparent;font-size:22px}.send{background:#111;color:#fff;font-size:19px}.counter{font:9px system-ui;color:#aaa;align-self:center;margin-left:5px}.disclaimer{text-align:center;color:#999;font-size:9px;margin-top:7px}
.typing{display:flex;gap:4px;padding:10px 0}.dot{width:6px;height:6px;border-radius:50%;background:#999;animation:d 1s infinite}.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}@keyframes d{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}body.dark{--bg:#18181b;--panel:#111113;--text:#f5f5f5;--muted:#a1a1aa;--line:#2b2b2f;--soft:#242428;--accent:#fff;--bubble:#29292d}body.dark .new-chat,body.dark .search,body.dark .cards button,body.dark .composer{background:#202023}body.dark .new-chat kbd{background:#2b2b2f;border-color:#3b3b40}body.dark .composer-area{background:linear-gradient(transparent,#18181b 22%)}body.dark .brand-mark,body.dark .hero-icon{background:#fff;color:#111}
@media(max-width:780px){.sidebar{position:fixed;right:-305px;top:0;bottom:0;box-shadow:-15px 0 35px #0002}.sidebar.open{right:0}.mobile-menu,#closeSide{display:block}.topbar{padding:0 10px}.model-picker{margin:auto}.top-actions{margin-right:0}.welcome{margin-top:5vh;padding:15px}.welcome h1{font-size:24px}.cards{grid-template-columns:1fr}.messages{padding-inline:12px}.composer-area{padding-inline:9px}.new-chat kbd{display:none}}