*,
*::before,
*::after{box-sizing:border-box}

:root{
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#202123;
  background:#fff;
}

html,body{height:100%;margin:0;padding:0}
body{font-size:14px;background:#fff;overflow:hidden}
button,input,textarea{font:inherit}
button{font-family:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid #999;
  outline-offset:1px;
}

.app{height:100dvh;min-height:100vh;display:flex;overflow:hidden}

.sidebar{
  width:272px;
  height:100%;
  background:#f7f7f8;
  border-right:1px solid #e8e8e8;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
.side-top{padding:12px;min-height:0;display:flex;flex-direction:column;flex:1}
.brand{height:42px;display:flex;align-items:center;gap:9px;padding:0 9px;font-weight:650;font-size:14px;flex-shrink:0}
.brand-icon{height:27px;width:27px;border-radius:7px;background:#111;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.new-chat{
  height:42px;width:100%;border:1px solid #dedede;background:#fff;border-radius:9px;
  text-align:left;padding:0 13px;font-size:13px;cursor:pointer;margin:5px 0 10px;flex-shrink:0
}
.new-chat span{font-size:18px;vertical-align:-1px;margin-right:5px}
.new-chat:hover,.search-wrap:hover{background:#fff;border-color:#cfcfcf}
.search-wrap{
  height:37px;border:1px solid transparent;border-radius:8px;background:#ededee;
  display:flex;align-items:center;padding:0 10px;color:#777;flex-shrink:0
}
.search-wrap span{font-size:20px;margin-right:6px;line-height:1}
.search-wrap input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:12px;color:#222}
.section-label{text-transform:uppercase;color:#9a9a9a;font-size:10px;font-weight:650;letter-spacing:.07em;padding:17px 9px 7px;flex-shrink:0}
.chat-list{overflow:auto;min-height:0;flex:1}
.chat-row{display:flex;align-items:center;gap:8px;min-height:37px;border-radius:7px;padding:0 9px;cursor:pointer;color:#4b4b4b;position:relative}
.chat-row:hover{background:#e9e9ea}
.chat-row.active{background:#e5e5e6;color:#171717}
.chat-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:12px}
.chat-more{display:none;border:0;background:transparent;color:#666;cursor:pointer;font-size:14px;padding:4px}
.chat-row:hover .chat-more,.chat-row:focus-within .chat-more{display:block}
.empty-history{color:#999;font-size:11px;padding:10px}
.side-bottom{margin-top:auto;border-top:1px solid #e5e5e5;padding:8px;flex-shrink:0}
.account{width:100%;border:0;background:transparent;border-radius:8px;display:flex;align-items:center;gap:9px;text-align:left;padding:8px;cursor:pointer}
.account:hover{background:#e9e9ea}
.avatar{width:28px;height:28px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:10px;flex:none}
.account-text{flex:1;min-width:0}.account-text b,.account-text small{display:block}
.account-text b{font-size:12px}.account-text small{color:#999;font-size:10px;margin-top:2px}

.main{min-width:0;min-height:0;flex:1;display:flex;flex-direction:column;background:#fff}
.topbar{height:54px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #f0f0f0;position:relative;flex-shrink:0}
.model-btn{border:0;background:transparent;font-weight:600;color:#333;font-size:13px;padding:7px 10px;border-radius:7px;cursor:pointer}
.model-btn:hover{background:#f5f5f5}
.model-btn span{color:#888;margin-left:3px}
.mobile-menu,.mobile-title{display:none}

.chat-area{
  width:min(820px,calc(100% - 32px));
  flex:1;min-height:0;overflow-y:auto;margin:0 auto;
  padding:20px 0 10px;
  scrollbar-width:thin;
}
.empty-state{
  min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 10px 80px;text-align:center
}
.empty-logo{width:46px;height:46px;border-radius:13px;background:#111;color:#fff;display:grid;place-items:center;font-weight:700;font-size:19px;margin-bottom:20px}
.empty-state h1{font-size:27px;letter-spacing:-.025em;margin:0 0 8px;font-weight:650}
.empty-state p{color:#777;max-width:600px;line-height:1.55;margin:0}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:28px;width:min(650px,100%)}
.examples button{background:#fff;border:1px solid #e1e1e1;border-radius:9px;padding:12px;text-align:left;color:#555;cursor:pointer;font-size:12px}
.examples button:hover{background:#fafafa;border-color:#cfcfcf}

#messages{width:100%}
.message{display:flex;gap:13px;margin:24px 0}
.message-avatar{width:29px;height:29px;border-radius:7px;display:grid;place-items:center;flex:none;font-size:10px;font-weight:650}
.message.user .message-avatar{background:#111;color:#fff}
.message.assistant .message-avatar{background:#eee;color:#333}
.message-body{min-width:0;flex:1;line-height:1.65;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.message.user .message-body{padding-top:3px}

.composer-zone{width:min(820px,calc(100% - 32px));margin:0 auto;padding:7px 0 16px;background:#fff;flex-shrink:0}
.composer{
  border:1px solid #d9d9d9;border-radius:15px;min-height:54px;display:flex;align-items:flex-end;
  padding:8px 9px;box-shadow:0 2px 10px rgba(0,0,0,.03)
}
.composer:focus-within{border-color:#bbb;box-shadow:0 2px 13px rgba(0,0,0,.05)}
.composer textarea{
  flex:1;min-width:0;border:0;outline:0;resize:none;font:inherit;line-height:1.45;
  padding:7px 6px;max-height:180px;min-height:35px;background:transparent;color:#202123
}
.attach,.send{border:0;width:35px;height:35px;border-radius:9px;cursor:pointer;flex:none}
.attach{background:#f4f4f4;color:#555;font-size:20px}.send{background:#111;color:#fff;font-size:18px}
.attach:hover{background:#e9e9e9}.send:hover:not(:disabled){background:#2a2a2a}
.send:disabled{opacity:.35;cursor:default}
.composer-note{text-align:center;font-size:9px;color:#999;padding-top:7px;line-height:1.4}

.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.2);display:grid;place-items:start center;padding-top:70px}
.modal.hidden{display:none}
.modal-card{background:#fff;width:min(340px,calc(100vw - 24px));border:1px solid #ddd;border-radius:12px;box-shadow:0 10px 35px rgba(0,0,0,.12);padding:10px}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:7px 8px 10px}
.modal-head button{border:0;background:transparent;font-size:20px;color:#777;cursor:pointer}
.model-option{width:100%;border:1px solid #ddd;background:#fafafa;border-radius:9px;padding:11px;display:flex;justify-content:space-between;text-align:left;cursor:pointer}
.model-option b,.model-option small{display:block}.model-option small{color:#999;margin-top:3px}.model-option.selected{border-color:#bbb}
.modal-card p{color:#888;font-size:10px;line-height:1.5;padding:4px 8px}

@media (max-width:760px){
  .sidebar{
    position:fixed;z-index:20;left:-280px;top:0;bottom:0;height:100dvh;
    transition:left .2s;box-shadow:8px 0 25px rgba(0,0,0,.12)
  }
  .sidebar.open{left:0}
  .topbar{justify-content:center}
  .mobile-menu{display:block;position:absolute;left:10px;border:0;background:transparent;font-size:20px;color:#555;cursor:pointer;padding:5px}
  .mobile-title{display:block;font-weight:600;font-size:13px}
  .model-btn{font-size:12px}
  .examples{grid-template-columns:1fr}
  .empty-state h1{font-size:24px}
  .chat-area,.composer-zone{width:calc(100% - 20px)}
  .message{gap:9px;margin:20px 0}
  .message-body{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .sidebar{transition:none}
}