:root { color-scheme: dark; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: "Inter Variable", Inter, sans-serif; background: var(--background); color: var(--foreground); }
.demo-shell { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; background: var(--background); }
.demo-sidebar { display: flex; flex-direction: column; flex: 0 0 188px; width: 188px; min-width: 0; background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--border-seam); }
.demo-sidebar-top { flex: 0 0 auto; }
.demo-project { min-height: 0; flex: 1; padding: 24px 8px 8px; overflow: hidden; }
.demo-thread-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.demo-thread-list > div { flex-shrink: 0; }
.demo-sidebar-footer { flex-shrink: 0; }
.demo-workspace { display: flex; flex-direction: column; min-width: 0; flex: 1; height: 100%; }
.demo-brand { position: relative; z-index: 50; display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 48px; padding: 4px 16px; background: var(--background); }
.demo-panels { display: flex; min-width: 0; min-height: 0; flex: 1; }
.demo-chat { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; }
.demo-chat > #thread-detail-timeline-panel { flex: 1 !important; width: 100%; height: 100%; min-width: 0; }
.demo-chat.is-skills > main { height: 100%; width: 100%; }
.demo-chat.is-skills [data-sidebar="inset"] { translate: none; }
.demo-chat .thread-scrollbar { scroll-behavior: smooth; }
.demo-chat [data-timeline-row-list] { gap: 8px; }
.demo-chat [data-timeline-row-list] > [data-appearing] { animation: message-arrive 260ms cubic-bezier(.16,1,.3,1); }
.demo-chat [data-scroll-overlay] { display: none; }
.demo-chat [data-unread-divider], .demo-chat [data-testid="thread-unread-divider"] { display: none; }
.demo-browser { display: flex; flex-direction: column; flex: 1.12; min-width: 0; min-height: 0; border-left: 1px solid var(--border-seam); overflow: hidden; }
.demo-browser > div { min-width: 0; height: 100%; }
.demo-site { display: block; width: 100%; height: 100%; border: 0; background: #f6f3e9; }
.demo-shell.is-collapsed .demo-sidebar { display: none; }
.demo-pointer { position: absolute; left: 0; top: 0; z-index: 60; width: 22px; height: 27px; pointer-events: none; transition: left 600ms cubic-bezier(.16,1,.3,1), top 600ms cubic-bezier(.16,1,.3,1), scale 140ms; }
.demo-pointer svg { width: 100%; height: 100%; }
.demo-pointer[data-clicking="true"] { scale: .85; }
.demo-chat [data-demo-focus="true"] { outline: 1px solid var(--primary); outline-offset: 2px; }
.demo-native-sidebar-toggle { position: absolute; z-index: 20; inset-inline-start: 12px; top: 50%; translate: 0 -50%; }
.demo-browser-sidebar-toggle { display: none; position: static; flex-shrink: 0; translate: none; }
.demo-shell[data-paused="true"] *, body[data-paused="true"] * { animation-play-state: paused !important; }
.demo-shell[data-paused="true"] [data-appearing] { animation: none; }
.demo-skills { flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.demo-skills > main { height: 100%; }
[hidden] { display: none !important; }
@keyframes message-arrive { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px), (max-height: 500px) and (max-width: 1024px) {
  .demo-sidebar { display: none; }
  .demo-brand { display: none; }
  .demo-browser-sidebar-toggle { display: inline-flex; }
  .demo-chat [data-message-column] { padding-inline: 12px; }
  .demo-chat [class~="group/message"] { width: 100%; max-width: 100%; }
  .demo-chat [class~="group/message"] > div:first-child { width: 100%; }
  .demo-chat [data-markdown-preview] { font-size: 16px; line-height: 1.5; }
  .demo-chat [data-markdown-preview] a { white-space: normal; }
  .demo-chat [data-image-gallery-clipped] { max-height: none; }
  .demo-shell[data-scene="plan-request"] [data-markdown-preview] > p ~ p { display: none; }
  .demo-chat [class~="group/message"] > div:last-child:not(:first-child) { display: none; }
  .demo-chat .chat-prompt-box { padding: 8px 12px 12px; }
  .demo-chat [data-follow-up-composer-anchor] { font-size: 14px; }
  .demo-chat.is-skills [data-resource-detail-section="includes"] { display: none; }
  .demo-chat.is-skills [data-resource-detail-section="definition"] { padding-top: 0; border: 0; }
  .demo-chat.is-skills [data-markdown-preview] > :not(p:first-of-type) { display: none; }
  .demo-chat.is-skills [data-skill-content-viewport] { max-height: none; }
  .demo-shell[data-browser-focus="true"] .demo-chat { display: none; }
  .demo-shell[data-browser-focus="true"] .demo-browser { border-left: 0; }
  .demo-shell:not([data-browser-focus="true"]) .demo-browser { display: none; }
  .demo-browser [data-testid="browser-tab-nav-controls"] { padding-inline: 12px; }
  .demo-browser input { font-size: 14px; }
  .demo-menu [role="menuitem"] { min-height: 36px; font-size: 15px; }
  .demo-skills { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.demo-menu { position: absolute; z-index: 70; bottom: 43px; left: max(18px, calc((100% - 728px) / 2 + 116px)); width: max-content; max-width: calc(100% - 36px); }

.demo-menu [role="menu"] { animation: none !important; opacity: 1; transform: none; }