:root {
  color: #222;
  background: #fff;
  font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }

.topbar,
.topbar-actions,
.header-actions,
.chat-title-group,
.composer-footer,
.canvas-toolbar,
.render-history-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.topbar {
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #ddd;
}

.topbar-actions,
.header-actions { flex-wrap: wrap; }
.topbar form,
.header-actions form { margin: 0; }
.brand { color: inherit; font-weight: 700; text-decoration: none; }
.button-primary { background: #0078e7; color: #fff; }
.button-quiet { background: transparent; }
.dashboard-shell { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem; }
.dashboard-shell > h1 { margin-top: 0; }
.card-grid { margin: -.5rem; }
.card-cell { padding: .5rem; }

.design-card {
  border: 1px solid #ddd;
  padding: .75rem;
  cursor: pointer;
}

.design-card img {
  display: block;
  width: 100%;
  height: 16rem;
  margin-bottom: .75rem;
  object-fit: contain;
}

.card-title { margin: 0 0 .75rem; font-size: 1rem; }
.card-actions { display: flex; gap: .5rem; }

.empty-state,
.welcome-message {
  max-width: 36rem;
  margin: 4rem auto;
  text-align: center;
}

.empty-icon,
.sparkle { font-size: 2rem; }

.chat-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.chat-topbar { min-height: 0; }
.back-link { color: inherit; font-size: 1.5rem; text-decoration: none; }
.chat-title-group h1 { margin: 0; font-size: 1.15rem; }
.eyebrow { margin: 0; color: #666; font-size: .8rem; }
.account-name { color: #666; font-size: .9rem; }

.chat-layout {
  display: grid;
  grid-template-columns: minmax(20rem, .8fr) minmax(28rem, 1.2fr);
  min-height: 0;
  overflow: hidden;
}

.conversation-pane {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid #ddd;
}

.message-list { min-height: 0; overflow-y: auto; padding: .75rem; }
.message { max-width: 85%; margin: 0 0 1rem; }
.message.user { margin-left: auto; }
.message-label { display: block; margin-bottom: .25rem; color: #666; font-size: .8rem; }
.message-content { margin: 0; padding: .75rem; border: 1px solid #ddd; white-space: pre-wrap; }
.message.user .message-content { background: #f5f5f5; }
.message.error .message-content { border-color: #b00; color: #b00; }
.markdown-body { line-height: 1.45; white-space: normal; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p,
.markdown-body ul,
.markdown-body ol { margin: .45rem 0; }
.markdown-body code { padding: .1rem .25rem; background: #f3f3f3; }
.markdown-body pre { overflow: auto; padding: .65rem; background: #f3f3f3; }
.markdown-body pre code { padding: 0; }
.tool-event { margin: 0 0 .4rem; padding: .35rem .5rem; border: 1px solid #ddd; font-size: .82rem; }
.tool-event-heading { display: flex; align-items: center; gap: .35rem; }
.tool-event details { margin-top: .2rem; }
.tool-event summary { cursor: pointer; }
.tool-event pre { max-height: 14rem; margin: .35rem 0 0; overflow: auto; white-space: pre-wrap; }

.composer { margin: 1rem; }
.pure-form.composer textarea { width: 100%; resize: vertical; }
.composer-footer { justify-content: space-between; margin-top: .5rem; }
#turn-status { color: #666; font-size: .85rem; }

.canvas-pane { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; overflow: hidden; }
.canvas-toolbar { justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid #ddd; }
.canvas-stage { display: grid; min-width: 0; min-height: 0; overflow: hidden; padding: 1rem; place-items: center; background: #f5f5f5; }
#canvas-preview { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; background: #fff; }
#canvas-preview.is-loading { opacity: .5; }
.render-history { min-width: 0; padding: .5rem .75rem; border-top: 1px solid #ddd; }
.render-history:not(.has-renders) { display: none; }
.render-history-heading { justify-content: space-between; }
.render-track { display: flex; gap: .5rem; overflow-x: auto; }
.render-thumb { position: relative; flex: 0 0 5rem; padding: 0; border: 2px solid transparent; background: #fff; opacity: .68; }
.render-thumb:hover { opacity: 1; }
.render-thumb.is-selected { border-color: #0078e7; opacity: 1; box-shadow: 0 0 0 2px rgba(0, 120, 231, .2); }
.render-thumb.is-selected::after { position: absolute; top: .2rem; right: .2rem; padding: .05rem .25rem; border-radius: 999px; color: #fff; background: #0078e7; content: "Selected"; font-size: .55rem; }
.render-thumb img { display: block; width: 100%; height: 4rem; object-fit: contain; }
.render-thumb span { display: block; overflow: hidden; padding: .2rem; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #2a8; }

.auth-shell { display: grid; min-height: 100vh; padding: 1rem; place-items: center; }
.auth-card { width: min(100%, 24rem); }
.auth-card h1 { margin-top: 1.5rem; }
.auth-card input { width: 100%; margin-bottom: 1rem; }
.auth-card .pure-button { width: 100%; }
.form-error { padding: .75rem; border: 1px solid #b00; color: #b00; }
.form-help { color: #666; font-size: .85rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 850px) {
  .chat-page { display: block; height: auto; overflow: auto; }
  .chat-layout { grid-template-columns: 1fr; grid-template-rows: 60vh 70vh; height: auto; }
  .conversation-pane { border-right: 0; border-bottom: 1px solid #ddd; }
  .account-name { display: none; }
}