:root{font-family:Tahoma,"Segoe UI",Arial,sans-serif;color-scheme:light;--bg:#fff;--side:#f7f7f8;--line:#e7e7e9;--text:#202123;--muted:#6b6c70;--soft:#f4f4f5;--accent:#111827;--danger:#b42318}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
button,textarea{font:inherit}
button{cursor:pointer}
.chat-app{height:100dvh;display:grid;grid-template-columns:280px minmax(0,1fr);direction:ltr;overflow:hidden}
.chat-sidebar,.chat-main{direction:rtl}
.chat-sidebar{background:var(--side);border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0;padding:10px}
.brand-row{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:2px 6px 8px}
.brand{text-decoration:none;color:var(--text);font-weight:800;font-size:15px}
.icon-btn{border:0;background:transparent;border-radius:9px;width:36px;height:36px;font-size:21px;color:var(--muted)}
.icon-btn:hover{background:#e9e9eb;color:var(--text)}
.new-chat-btn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;text-align:right;font-weight:700}
.new-chat-btn:hover{background:#f1f1f2}
.sidebar-label{font-size:12px;color:var(--muted);padding:18px 10px 8px}
.conversation-list{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1;min-height:0}
.conversation-item{border:0;background:transparent;border-radius:9px;padding:9px 10px;text-align:right;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversation-item:hover,.conversation-item.active{background:#e9e9eb}
.sidebar-user{border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:11px 7px 3px;margin-top:8px}
.user-avatar{width:34px;height:34px;border-radius:50%;background:#222;color:#fff;display:grid;place-items:center;font-weight:800}
.user-copy{display:flex;min-width:0;flex-direction:column;font-size:13px}
.user-copy span{color:var(--muted);font-size:11px;direction:ltr;text-align:right}
.chat-main{position:relative;min-width:0;height:100dvh;display:flex;flex-direction:column;background:#fff}
.chat-topbar{height:58px;border-bottom:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex:0 0 auto;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:4}
.topbar-title{display:flex;flex-direction:column;gap:1px;font-size:14px}
.topbar-title span{font-size:11px;color:var(--muted);font-weight:400}
.memory-btn{border:0;background:transparent;border-radius:9px;padding:8px 10px;color:var(--muted)}
.memory-btn:hover{background:var(--soft);color:var(--text)}
.messages{width:min(820px,calc(100% - 32px));margin:0 auto;flex:1;overflow-y:auto;padding:28px 0 170px;scroll-behavior:smooth}
.message{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:17px 4px}
.message-avatar{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:12px;background:#111827;color:#fff}
.message.user .message-avatar{border-radius:50%;background:#e8e8ea;color:#333}
.message-body{font-size:15px;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.message.user .message-body{background:#f4f4f5;border-radius:18px 18px 5px 18px;padding:10px 14px;width:fit-content;max-width:90%}
.message.assistant .message-body{padding-top:2px}
.message.error .message-body{color:var(--danger)}
.typing{display:inline-flex;gap:4px;align-items:center;height:24px}
.typing i{width:6px;height:6px;border-radius:50%;background:#999;animation:pulse 1.1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.empty-state{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 40px));text-align:center}
.empty-state[hidden]{display:none}
.empty-mark{width:48px;height:48px;border-radius:16px;background:#111827;color:#fff;display:grid;place-items:center;margin:0 auto 16px;font-size:22px;font-weight:900}
.empty-state h1{font-size:24px;margin:0 0 10px}.empty-state p{margin:0 auto;max-width:540px;color:var(--muted);line-height:1.9;font-size:14px}
.composer-wrap{position:absolute;bottom:0;right:0;left:0;padding:18px 18px 12px;background:linear-gradient(0deg,#fff 72%,rgba(255,255,255,0));z-index:3}
.composer{width:min(820px,100%);margin:0 auto;display:flex;direction:rtl;align-items:flex-end;gap:8px;border:1px solid #d8d8da;border-radius:25px;background:#fff;padding:8px 9px 8px 12px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.composer:focus-within{border-color:#b9b9bc;box-shadow:0 2px 15px rgba(0,0,0,.08)}
.composer textarea{flex:1;min-height:36px;max-height:190px;resize:none;border:0;outline:0;background:transparent;padding:7px 6px;line-height:1.7;color:var(--text);overflow-y:auto}
.composer textarea::placeholder{color:#8b8c91}
.send-btn{width:36px;height:36px;border-radius:50%;border:0;background:#111827;color:#fff;font-size:20px;display:grid;place-items:center;flex:0 0 auto}
.send-btn:disabled{background:#d3d3d5;color:#888;cursor:default}
.composer-note{text-align:center;color:#929398;font-size:10.5px;margin-top:7px}
.boot-state{position:fixed;inset:0;background:#fff;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;color:var(--muted);font-size:13px;z-index:20}
.boot-spinner{width:28px;height:28px;border:3px solid #e3e3e5;border-top-color:#333;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.memory-dialog{width:min(520px,calc(100% - 28px));border:1px solid var(--line);border-radius:16px;padding:0;box-shadow:0 22px 65px rgba(0,0,0,.22);direction:rtl}
.memory-dialog::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(2px)}
.dialog-head{height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 14px}
.memory-dialog>p{color:var(--muted);font-size:12px;line-height:1.8;margin:13px 16px}
.memory-list{max-height:55vh;overflow:auto;padding:0 12px 14px}
.memory-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 11px;margin-top:8px}
.memory-copy{font-size:13px;line-height:1.7;white-space:pre-wrap}.memory-meta{font-size:10px;color:var(--muted);margin-top:4px}.memory-delete{border:0;background:transparent;color:var(--danger);padding:4px 6px}
.mobile-only{display:none}
@media (max-width:760px){
  .chat-app{grid-template-columns:1fr}
  .mobile-only{display:grid;place-items:center}
  .chat-sidebar{position:fixed;inset:0 auto 0 0;width:min(86vw,310px);z-index:15;transform:translateX(-105%);transition:transform .18s ease;box-shadow:12px 0 36px rgba(0,0,0,.16)}
  .chat-sidebar.open{transform:translateX(0)}
  .chat-topbar{padding:0 10px;height:54px}
  .messages{width:calc(100% - 24px);padding-top:18px;padding-bottom:155px}
  .message{grid-template-columns:28px minmax(0,1fr);gap:9px;padding:13px 1px}
  .message-avatar{width:27px;height:27px}
  .message-body{font-size:14px;line-height:1.9}
  .empty-state{top:39%}.empty-state h1{font-size:21px}
  .composer-wrap{padding:12px 10px 9px}.composer{border-radius:21px}.composer-note{font-size:9.5px}
}
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark;--bg:#212121;--side:#171717;--line:#333;--text:#ececec;--muted:#a8a8ad;--soft:#2c2c2e;--accent:#ececec}
  html,body,.chat-main{background:#212121}.chat-topbar{background:rgba(33,33,33,.92)}
  .new-chat-btn,.composer{background:#2f2f2f;border-color:#474747}.new-chat-btn:hover{background:#353535}
  .conversation-item:hover,.conversation-item.active,.icon-btn:hover{background:#2b2b2b}
  .user-avatar,.empty-mark{background:#ececec;color:#171717}
  .message.user .message-avatar{background:#3a3a3a;color:#eee}.message.user .message-body{background:#2f2f2f}
  .composer-wrap{background:linear-gradient(0deg,#212121 72%,rgba(33,33,33,0))}.composer textarea{color:#eee}.send-btn{background:#ececec;color:#171717}
  .boot-state{background:#212121}.memory-dialog{background:#212121;color:#ececec}.memory-item{background:#262626}
}