:root{
  --bg:#edf2ef;
  --paper:#fffdf8;
  --ink:#111315;
  --muted:#606866;
  --cyan:#4ed9cf;
  --cyan-soft:#c6f4ef;
  --violet:#6a31ff;
  --violet-soft:#ddd2ff;
  --peach:#ffddc2;
  --yellow:#fff3a9;
  --danger:#e84b65;
  --danger-soft:#ffe1e7;
  --line:3px solid var(--ink);
  --shadow:8px 8px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Cairo",Tahoma,Arial,sans-serif}
body{min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
.hidden{display:none!important}
::selection{background:var(--violet);color:#fff}

/* utility */
.eyebrow{margin:0 0 6px;font-size:10px;font-weight:900;letter-spacing:1.4px;color:var(--violet);direction:ltr;text-align:right}
.outline-btn,.compact-outline,.text-btn{background:#fff;border:2px solid var(--ink);font-weight:800}
.outline-btn{padding:9px 14px}
.outline-btn:hover,.compact-outline:hover{background:var(--yellow)}
.outline-btn.small{padding:6px 10px;font-size:11px}
.outline-btn.danger:hover{background:var(--danger-soft);color:#9f1731}
.primary-btn,.compact-primary,.send-btn,.new-chat-btn{border:2px solid var(--ink);background:var(--cyan);font-weight:900;box-shadow:var(--shadow-sm)}
.primary-btn{padding:12px 16px}
.primary-btn:hover,.new-chat-btn:hover,.send-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.compact-primary,.compact-outline{padding:8px 11px}
.text-btn{border:0;background:transparent;padding:8px;text-decoration:underline;color:var(--muted)}
.danger-fill{border:2px solid var(--ink);background:var(--danger);color:#fff;padding:9px 14px;font-weight:900;box-shadow:var(--shadow-sm)}
.setup-banner,.toast{position:fixed;z-index:1000;left:50%;transform:translateX(-50%);border:2px solid var(--ink);box-shadow:var(--shadow-sm);padding:10px 16px;font-size:12px;font-weight:800}
.setup-banner{top:18px;background:var(--yellow)}
.toast{bottom:20px;background:#fff}

/* login */
.login-view{min-height:100vh;padding:32px;display:grid;place-items:center}
.login-shell{width:min(1180px,100%);display:grid;grid-template-columns:1.2fr .8fr;border:var(--line);background:var(--paper);box-shadow:var(--shadow);min-height:650px}
.login-art{position:relative;overflow:hidden;padding:56px;background:linear-gradient(120deg,var(--cyan) 0%,#a9e9e4 54%,#9ed7ef 100%);border-left:var(--line);display:flex;flex-direction:column;justify-content:center}
.login-art:after{content:"AI";position:absolute;left:20px;bottom:-70px;font-size:210px;font-weight:900;color:rgba(17,19,21,.08);line-height:1}
.archive-label{position:absolute;top:28px;right:32px;font-size:11px;font-weight:900;letter-spacing:1.2px;direction:ltr}
.spark-mark{font-size:56px;color:var(--violet);line-height:1;margin-bottom:22px}
.login-art h1{font-size:clamp(42px,5vw,72px);line-height:1.22;margin:0;letter-spacing:-2px;font-weight:900}
.login-art h1 span{color:var(--violet)}
.login-art>p{font-size:16px;font-weight:700;line-height:2;margin:22px 0 0;max-width:650px}
.login-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;max-width:630px;position:relative;z-index:1}
.login-stats>div{background:rgba(255,255,255,.75);border:2px solid var(--ink);padding:14px}
.login-stats strong{display:block;font-size:28px}.login-stats span{font-size:10px;font-weight:800}
.login-card{padding:50px 42px;display:flex;flex-direction:column;justify-content:center;gap:14px;background:var(--paper)}
.brand-lockup{display:flex;align-items:center;gap:12px;direction:ltr;text-align:left}
.brand-lockup strong{display:block;font-size:14px;font-weight:900}.brand-lockup small{display:block;font-size:8px;letter-spacing:1.2px;color:var(--muted)}
.login-card h2{font-size:34px;margin:0 0 12px}.login-card label,.editor-card label{display:grid;gap:6px;font-size:11px;font-weight:800}
.login-card input,.editor-card input,.editor-card textarea,.rename-inline input,.search-box input,.composer textarea{width:100%;border:2px solid var(--ink);background:#fff;padding:11px 12px;outline:none}
.login-card input:focus,.editor-card input:focus,.editor-card textarea:focus,.rename-inline input:focus,.search-box:focus-within,.composer:focus-within{box-shadow:var(--shadow-sm)}
.error-box{border:2px solid var(--ink);background:var(--danger-soft);padding:10px 12px;font-size:11px;font-weight:700;color:#8e1b30}

/* top app shell */
.app-view{min-height:100vh;padding:22px 28px 28px}
.topbar{max-width:1600px;margin:0 auto 22px;background:var(--paper);border:var(--line);box-shadow:7px 7px 0 var(--ink);min-height:72px;padding:10px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.top-brand{justify-self:start}.topnav{display:flex;gap:8px}.nav-btn{border:2px solid var(--ink);background:#fff;padding:9px 15px;font-weight:900;font-size:11px}.nav-btn.active{background:var(--violet);color:#fff;box-shadow:var(--shadow-sm)}
.user-menu{justify-self:end;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800}

/* main chat */
.panel-shell{max-width:1600px;margin:0 auto;border:var(--line);background:var(--paper);box-shadow:var(--shadow);display:grid;grid-template-columns:320px minmax(0,1fr);direction:rtl;height:calc(100vh - 145px);min-height:680px;overflow:hidden}
.history-rail{border-left:var(--line);background:#f7f9f6;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.rail-head{padding:18px;border-bottom:2px solid var(--ink)}
.rail-head h2{margin:0 0 14px;font-size:26px}.new-chat-models{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;direction:ltr}.model-chip{border:2px solid var(--ink);background:#fff;padding:7px 5px;font-size:9px;font-weight:900}.model-chip.active{background:var(--violet);color:#fff}.model-chip:disabled{background:#eee;color:#999}
.new-chat-btn{width:100%;padding:11px 12px;background:var(--cyan)}
.search-box{margin:14px 14px 8px;border:2px solid var(--ink);background:#fff;display:flex;align-items:center;gap:8px;padding:0 9px}.search-box input{border:0;box-shadow:none!important;padding:9px 2px;font-size:11px;background:transparent}
.rail-count{margin:0 14px 8px;display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:800;color:var(--muted)}.rail-count strong{border:2px solid var(--ink);background:var(--violet-soft);color:var(--ink);min-width:34px;text-align:center;padding:3px 5px}
.conversation-list{padding:0 14px 20px;overflow:auto;display:grid;align-content:start;gap:8px}.conversation-row{border:2px solid var(--ink);background:#fff;display:grid;grid-template-columns:1fr auto;min-width:0}.conversation-row.active{background:var(--cyan-soft);box-shadow:var(--shadow-sm)}.conversation-open{border:0;background:transparent;text-align:right;padding:10px;min-width:0}.conversation-open strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-open small{display:block;margin-top:3px;color:var(--muted);font-size:8px}.conversation-provider{align-self:stretch;border-right:2px solid var(--ink);display:grid;place-items:center;padding:0 8px;font-size:8px;font-weight:900;color:var(--violet);direction:ltr;background:#faf9f4}.list-empty{border:2px dashed #9aa19f;padding:18px;text-align:center;color:var(--muted);font-size:10px;background:#fff}

.chat-workspace{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-width:0;overflow:hidden;background:var(--bg)}
.conversation-toolbar{background:var(--paper);border-bottom:var(--line);padding:15px 20px;display:flex;justify-content:space-between;gap:18px;align-items:center}.chat-heading{min-width:0}.title-view{display:flex;align-items:center;gap:10px;min-width:0}.title-view h1{margin:0;font-size:28px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-action{border:0;background:transparent;color:var(--violet);font-weight:900;font-size:10px;text-decoration:underline}.conversation-meta{font-size:9px;color:var(--muted);margin-top:6px;direction:ltr;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.provider-badge{border:2px solid var(--ink);background:var(--peach);padding:8px 12px;font-size:10px;font-weight:900;direction:ltr;min-width:58px;text-align:center}.rename-inline{display:flex;gap:7px;margin-top:4px}.rename-inline input{min-width:min(520px,55vw);padding:8px 10px}
.delete-confirm{background:var(--danger-soft);border-bottom:var(--line);padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:10px}.delete-confirm strong{font-size:12px}.delete-confirm span{color:#6f3d46}.delete-confirm>div{margin-right:auto;display:flex;gap:7px}
.messages-frame{position:relative;min-height:0;overflow:hidden}.messages{height:100%;overflow:auto;padding:26px clamp(20px,4vw,70px);display:flex;flex-direction:column;gap:18px}.empty-state{position:absolute;inset:0;padding:30px;display:grid;place-items:center;overflow:auto}.hero-card{width:min(1050px,95%);min-height:330px;border:var(--line);box-shadow:var(--shadow);background:linear-gradient(110deg,var(--cyan) 0%,#9ee9e3 55%,#a8d8ee 100%);padding:38px 42px;position:relative;overflow:hidden}.hero-card:after{content:"AI";position:absolute;left:10px;bottom:-55px;font-size:170px;font-weight:900;color:rgba(17,19,21,.08);line-height:1}.hero-code{font-size:10px;font-weight:900;letter-spacing:1px;direction:ltr;text-align:right}.hero-spark{position:absolute;left:34px;top:50px;color:var(--violet);font-size:48px}.hero-card h2{font-size:clamp(36px,5vw,62px);line-height:1.22;margin:30px 0 14px;font-weight:900;letter-spacing:-1.5px;position:relative;z-index:1}.hero-card h2 span{color:var(--violet)}.hero-card p{max-width:820px;font-size:13px;line-height:2;font-weight:700;position:relative;z-index:1}.hero-features{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1;margin-top:20px}.hero-features span{border:2px solid var(--ink);background:rgba(255,255,255,.76);padding:6px 9px;font-size:9px;font-weight:900}
.message{border:var(--line);background:#fff;padding:14px 16px;line-height:1.9;white-space:pre-wrap;word-break:break-word;unicode-bidi:plaintext;max-width:980px}.message.user{align-self:flex-start;background:var(--cyan-soft);width:min(680px,85%);box-shadow:var(--shadow-sm)}.message.assistant{align-self:stretch}.message.system{align-self:stretch;background:var(--danger-soft);color:#76182b}.message-meta{font-size:8px;font-weight:900;color:var(--violet);margin-bottom:8px;direction:ltr;text-align:right}.message.user .message-meta{color:#16645b}
.composer-zone{padding:14px 20px;background:#f6f8f5;border-top:var(--line)}.composer{background:#fff;border:var(--line);box-shadow:var(--shadow-sm)}.composer textarea{border:0;box-shadow:none!important;resize:none;min-height:70px;max-height:190px;padding:13px 15px;line-height:1.8}.composer-bar{border-top:2px solid var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px}.current-model{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted)}.current-model strong{border:2px solid var(--ink);background:var(--violet-soft);color:var(--ink);padding:5px 8px;direction:ltr}.send-wrap{display:flex;align-items:center;gap:10px}.send-wrap>span{font-size:8px;color:var(--muted)}.send-btn{padding:9px 17px}

/* content panels */
.content-panel{max-width:1600px;margin:0 auto}.section-hero{border:var(--line);box-shadow:var(--shadow);background:linear-gradient(110deg,var(--cyan) 0%,#a9e7e2 55%,#a8d8ee 100%);padding:32px 38px;display:flex;justify-content:space-between;align-items:center;gap:28px;min-height:230px}.section-hero h1{font-size:clamp(38px,5vw,60px);line-height:1.2;margin:6px 0 10px;font-weight:900}.section-hero h1 span{color:var(--violet)}.section-hero p:last-child{max-width:800px;font-size:12px;font-weight:700;line-height:1.9}.section-symbol{width:110px;height:110px;border:var(--line);background:var(--violet);color:#fff;display:grid;place-items:center;font-size:42px;font-weight:900;box-shadow:var(--shadow-sm);direction:ltr;flex-shrink:0}.content-grid{margin-top:24px}.memory-layout{display:grid;grid-template-columns:420px minmax(0,1fr);gap:24px;align-items:start}.editor-card,.memory-library{border:var(--line);background:var(--paper);box-shadow:var(--shadow);padding:22px}.editor-card{display:grid;gap:13px;position:sticky;top:20px}.editor-card h2,.library-head h2{margin:0;font-size:25px}.card-label{font-size:9px;font-weight:900;color:var(--violet);letter-spacing:1px;direction:ltr}.editor-card textarea{resize:vertical;line-height:1.8}.toggle-row{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px}.toggle-row input{width:18px;height:18px;accent-color:var(--violet)}.form-actions{display:flex;gap:8px;flex-wrap:wrap}.library-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:14px}.library-head strong{width:46px;height:46px;border:2px solid var(--ink);background:var(--violet-soft);display:grid;place-items:center;font-size:18px}.memory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}.memory-card{border:var(--line);background:#fff;padding:15px;display:grid;gap:11px;min-height:200px}.memory-card.disabled{opacity:.58;background:#efefeb}.memory-card h3{margin:0;font-size:17px}.memory-card p{margin:0;color:#4f5855;font-size:10px;line-height:1.9;white-space:pre-wrap}.memory-card .memory-top{display:flex;justify-content:space-between;gap:10px}.memory-state{border:2px solid var(--ink);padding:4px 7px;font-size:8px;font-weight:900;background:var(--cyan-soft)}.memory-card.disabled .memory-state{background:#ddd}.memory-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}.memory-actions button{border:2px solid var(--ink);background:#fff;padding:6px 8px;font-size:9px;font-weight:800}.memory-actions button:hover{background:var(--yellow)}.memory-actions .delete:hover{background:var(--danger-soft)}
.usage-hero{background:linear-gradient(110deg,var(--violet-soft),#d9eef0 60%,var(--peach))}.usage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}.usage-card{border:var(--line);background:var(--paper);box-shadow:var(--shadow-sm);padding:20px;min-height:180px}.usage-card .provider-name{font-size:10px;color:var(--violet);font-weight:900;direction:ltr}.usage-card .request-count{font-size:46px;font-weight:900;line-height:1.1;margin:16px 0 5px}.usage-card .label{font-size:10px;color:var(--muted)}.usage-card .tokens{border-top:2px solid var(--ink);padding-top:12px;margin-top:18px;font-size:10px;font-weight:800;direction:ltr;text-align:right}

@media(max-width:1100px){
  .login-shell{grid-template-columns:1fr}.login-art{border-left:0;border-bottom:var(--line);min-height:430px}.topbar{grid-template-columns:1fr auto}.topnav{grid-row:2;grid-column:1/-1;justify-content:center}.user-menu{justify-self:end}.panel-shell{grid-template-columns:275px minmax(0,1fr)}.memory-layout{grid-template-columns:340px minmax(0,1fr)}.usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  .app-view{padding:12px}.topbar{display:flex;flex-wrap:wrap}.top-brand{order:1}.user-menu{order:2;margin-right:auto}.topnav{order:3;width:100%;overflow:auto;justify-content:stretch}.nav-btn{flex:1;white-space:nowrap}.panel-shell{height:auto;min-height:calc(100vh - 170px);display:flex;flex-direction:column}.history-rail{border-left:0;border-bottom:var(--line);max-height:330px}.conversation-list{max-height:180px}.chat-workspace{min-height:760px}.conversation-toolbar{align-items:flex-start;flex-direction:column}.chat-actions{width:100%;flex-wrap:wrap}.rename-inline{width:100%;flex-wrap:wrap}.rename-inline input{min-width:100%}.memory-layout{grid-template-columns:1fr}.editor-card{position:static}.section-hero{align-items:flex-start}.section-symbol{width:80px;height:80px;font-size:28px}.hero-card{padding:28px}.hero-spark{display:none}
}
@media(max-width:520px){
  .login-view{padding:12px}.login-art{padding:34px 24px}.login-card{padding:34px 24px}.login-stats{grid-template-columns:1fr}.top-brand small{display:none}.user-menu>span{display:none}.topnav{gap:5px}.nav-btn{padding:8px 9px;font-size:9px}.new-chat-models{grid-template-columns:repeat(2,1fr)}.title-view h1{font-size:22px}.conversation-toolbar{padding:12px}.messages{padding:18px 12px}.message.user{width:94%}.composer-zone{padding:10px}.composer-bar{align-items:stretch;flex-direction:column}.send-wrap{justify-content:space-between}.section-hero{padding:24px;display:block}.section-symbol{margin-top:20px}.usage-grid{grid-template-columns:1fr}.memory-grid{grid-template-columns:1fr}.hero-card h2{font-size:34px}.hero-features{display:grid;grid-template-columns:1fr 1fr}
}