body{
  font-family:var(--font-family-base);
  font-size:var(--font-size-md);
  line-height:var(--line-height-base);
  background:radial-gradient(circle at top,rgba(124,92,255,.22),transparent 28%),linear-gradient(180deg,var(--color-bg),var(--color-bg-elevated));
  color:var(--color-text);
}
#app{min-height:100vh}
.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:18px;border-right:1px solid var(--color-border);background:color-mix(in srgb,var(--color-panel-solid) 84%,transparent);backdrop-filter:blur(var(--backdrop-blur));overflow:auto}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.brand__logo{display:flex;align-items:center;gap:12px}.brand__badge{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,var(--color-primary),#41b6ff);box-shadow:var(--shadow-panel)}.brand__title{font-size:16px;font-weight:700}.brand__desc{font-size:12px;color:var(--color-text-soft)}
.sidebar__section{margin-top:18px}.sidebar__section-title{margin-bottom:10px;font-size:12px;color:var(--color-text-soft);text-transform:uppercase;letter-spacing:.08em}
.nav-btn,.list-item,.action-btn,.icon-btn,.primary-btn,.ghost-btn,.tag-btn{transition:.22s ease;border-radius:var(--radius-sm)}
.nav-btn,.action-btn,.ghost-btn,.tag-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:1px solid transparent;color:var(--color-text)}
.nav-btn:hover,.action-btn:hover,.ghost-btn:hover,.tag-btn:hover,.list-item:hover,.icon-btn:hover{background:rgba(255,255,255,.06);border-color:var(--color-border)}
.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 15px;background:var(--color-primary);color:#fff;border:1px solid transparent;box-shadow:0 10px 24px rgba(124,92,255,.25)}.primary-btn:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.ghost-btn{border:1px solid var(--color-border);background:var(--color-panel)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--color-border);background:var(--color-panel)}
.list{display:flex;flex-direction:column;gap:8px}.history-item{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:8px;align-items:center}.history-item__delete{width:36px;height:36px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-panel);color:var(--color-text-soft)}.history-item.active .history-item__delete{border-color:rgba(124,92,255,.28)}.list-item{padding:12px 14px;border:1px solid transparent;background:transparent;text-align:left;min-width:0}.list-item.active{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.28)}.list-item__title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-item__meta{margin-top:6px;font-size:12px;color:var(--color-text-soft);display:flex;align-items:center;gap:8px}
.app-main{display:grid;grid-template-rows:var(--header-height) 1fr auto;min-width:0}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--color-border);background:color-mix(in srgb,var(--color-bg-elevated) 86%,transparent);backdrop-filter:blur(var(--backdrop-blur));position:sticky;top:0;z-index:15}.header__title{display:flex;align-items:center;gap:10px;font-weight:700}.header__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-panel);font-size:12px;color:var(--color-text-soft)}
.chat-stage{position:relative;min-height:0;overflow:hidden}.message-list{max-width:var(--chat-max-width);height:100%;overflow:auto;margin:0 auto;padding:26px 18px 160px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth;overscroll-behavior:contain}.empty-state{min-height:60vh;display:grid;place-items:center;padding:28px}.empty-card{width:min(100%,720px);padding:24px;border-radius:var(--radius-xl);background:var(--color-panel);border:1px solid var(--color-border);box-shadow:var(--shadow-panel)}.empty-card h2{margin:0 0 8px;font-size:28px}.empty-card p{margin:0 0 18px;color:var(--color-text-soft)}.prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.message{display:flex;gap:12px;align-items:flex-start}.message.user{justify-content:flex-end}.message__avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--color-panel);border:1px solid var(--color-border);color:var(--color-text-soft);flex:0 0 auto}.message.user .message__avatar{order:2;background:color-mix(in srgb,var(--color-user-bubble) 20%,transparent);color:#fff}.message__body{max-width:var(--bubble-max-width);display:flex;flex-direction:column;gap:8px}.message__bubble{padding:14px 16px;border-radius:var(--radius-lg);box-shadow:var(--shadow-bubble);border:1px solid var(--color-border);background:var(--color-assistant-bubble);color:var(--bubble-assistant-text);overflow:hidden}.message.user .message__bubble{background:var(--color-user-bubble);color:var(--bubble-user-text);border-color:transparent}.message__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--color-text-soft);padding:0 4px}.message.user .message__meta{justify-content:flex-end}.message__actions{display:flex;gap:8px;flex-wrap:wrap}.message__action{padding:7px 10px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-panel);font-size:12px;color:var(--color-text-soft)}
.md{min-width:0;overflow-wrap:anywhere;word-break:break-word}.md :where(h1,h2,h3,h4,h5,h6){margin:1.05em 0 .55em;font-weight:700}.md :where(h1){font-size:1.45em}.md :where(h2){font-size:1.25em}.md p{margin:.6em 0}.md ul,.md ol{padding-left:1.25em;list-style:revert}.md blockquote{margin:.8em 0;padding:.85em 1em;border-left:3px solid var(--color-primary);background:rgba(255,255,255,.04);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-soft)}.md table{width:100%;max-width:100%;margin:.8em 0;overflow:auto;display:block}.md th,.md td{border:1px solid var(--color-border);padding:10px 12px;text-align:left}.md a{color:var(--color-primary);overflow-wrap:anywhere}.md hr{border:none;border-top:1px solid var(--color-border);margin:1.1em 0}.md code:not(pre code){padding:.18em .4em;border-radius:8px;background:rgba(255,255,255,.08);overflow-wrap:anywhere}.code-block{margin:.9em 0;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-code-bg);max-width:100%}.code-block__header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--color-border);font-size:12px;color:var(--color-text-soft)}.code-block__header span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-block pre{margin:0;overflow:auto;padding:14px;max-width:100%;-webkit-overflow-scrolling:touch}.code-block code{display:block;min-width:max-content}.code-copy{padding:6px 10px;border:1px solid var(--color-border);border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;flex:0 0 auto}
.composer-wrap{position:sticky;bottom:0;padding:16px calc(18px + env(safe-area-inset-right,0px)) calc(16px + var(--safe-bottom)) calc(18px + env(safe-area-inset-left,0px));background:linear-gradient(180deg,var(--composer-fade-start),var(--composer-fade-mid) 20%,var(--composer-fade-end) 100%);backdrop-filter:blur(10px)}.composer{max-width:var(--chat-max-width);margin:0 auto;padding:12px;border-radius:calc(var(--radius-xl) + 4px);border:1px solid var(--color-border);background:var(--color-panel);backdrop-filter:blur(var(--backdrop-blur));box-shadow:var(--shadow-panel)}.composer__inner{display:flex;align-items:flex-end;gap:12px}.composer textarea{width:100%;min-height:var(--input-min-height);max-height:var(--input-max-height);padding:15px 16px;border-radius:var(--radius-lg);border:1px solid transparent;background:var(--color-input-bg);outline:none;overflow:auto}.composer textarea:focus{border-color:color-mix(in srgb,var(--color-primary) 38%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 12%,transparent)}.composer__actions{display:flex;align-items:center;gap:10px}.composer__footer{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:12px;color:var(--color-text-soft)}
.panel-overlay{position:fixed;inset:0;background:var(--color-overlay);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:.22s ease;z-index:40}.panel-overlay.open{opacity:1;pointer-events:auto}.panel{position:fixed;right:0;top:0;height:100vh;width:min(100vw,460px);background:color-mix(in srgb,var(--color-bg-elevated) 92%,transparent);border-left:1px solid var(--color-border);box-shadow:var(--shadow-panel);transform:translateX(100%);transition:.22s ease;z-index:41;display:flex;flex-direction:column}.panel.open{transform:translateX(0)}.panel__header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--color-border)}.panel__title{font-size:18px;font-weight:700}.panel__body{padding:18px;overflow:auto;display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:13px;color:var(--color-text-soft)}.field input,.field textarea,.field select{padding:12px 14px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-input-bg);outline:none}.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-panel)}.card__row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.card__title{font-weight:700}.card__desc{margin-top:6px;color:var(--color-text-soft);font-size:13px}.card__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.toast-stack{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60}.toast{min-width:280px;max-width:min(92vw,380px);padding:14px;border-radius:var(--radius-lg);border:1px solid var(--color-border);background:color-mix(in srgb,var(--color-bg-elevated) 90%,transparent);box-shadow:var(--shadow-panel);display:flex;gap:12px;align-items:flex-start}.toast__content{flex:1}.toast__title{font-weight:700}.toast__message{font-size:13px;color:var(--color-text-soft);margin-top:4px}.toast__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mobile-menu{display:none}.drawer{position:fixed;left:0;top:0;height:100vh;width:min(86vw,340px);background:color-mix(in srgb,var(--color-bg-elevated) 94%,transparent);border-right:1px solid var(--color-border);transform:translateX(-100%);transition:.22s ease;z-index:42;overflow:auto;padding:18px}.drawer.open{transform:translateX(0)}
@media (max-width:1023px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.mobile-menu{display:inline-flex}.message__body{max-width:min(86vw,var(--bubble-max-width))}.prompt-grid{grid-template-columns:1fr}.panel{width:100vw;max-width:none;height:min(88vh,760px);top:auto;bottom:0;border-left:none;border-top:1px solid var(--color-border);border-radius:24px 24px 0 0;transform:translateY(100%)}.panel.open{transform:translateY(0)}}
@media (max-width:767px){.app-main{grid-template-rows:auto 1fr auto}.header{padding:10px 12px;gap:8px}.header__title{font-size:14px}.message-list{padding:14px 10px 138px;gap:14px}.composer-wrap{padding:10px 10px calc(10px + var(--safe-bottom))}.composer{padding:10px;border-radius:20px}.composer__inner{gap:8px}.composer textarea{padding:13px 14px;font-size:16px}.composer__footer{font-size:11px}.header__meta{display:none}.message__avatar{display:none}.message__body{max-width:100%}.message__bubble{padding:13px 14px;border-radius:16px}.field-row{grid-template-columns:1fr}.toast-stack{left:12px;right:12px;bottom:12px}.toast{max-width:none;min-width:0}.history-item{grid-template-columns:minmax(0,1fr) 32px}.history-item__delete{width:32px;height:32px}.code-block__header{padding:8px 10px}.code-block pre{padding:12px}}
