.genui-workspace {display:grid;gap:16px}
.genui-workspace p {margin:0}
.genui-toolbar {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
#genui-service {color:var(--muted);font-size:14px}
.genui-card {background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,3vw,28px);min-width:0}
.genui-card h2 {margin:0 0 16px;font-size:22px}
.genui-card details {margin-top:20px}
.genui-card summary {cursor:pointer;color:var(--green)}
.genui-card pre {padding:12px;background:var(--reference-card);overflow:auto}
#genui-compose,.genui-filters {display:grid;gap:12px}
.genui-card textarea {font:inherit;background:var(--surface);color:var(--text);border:1px solid var(--muted);border-radius:8px;padding:8px;min-width:0;width:100%}
.genui-card textarea {resize:vertical}
.genui-primary {background:var(--green);color:white;border:1px solid transparent;border-radius:999px;min-height:36px;padding:0 18px}
[data-theme="dark"] .genui-primary {color:var(--deep)}
.genui-card :focus-visible {outline:2px solid var(--green);outline-offset:3px}
.genui-card button:disabled,.genui-toolbar button:disabled {opacity:.55;cursor:default}
.genui-filters {grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));align-items:end;margin-bottom:12px}
.genui-field>label {display:block;font-size:14px}
.genui-filter-status {grid-column:1/-1}
.genui-table-scroll {overflow:auto}
.genui-table-scroll table {width:100%;min-width:450px;border-collapse:collapse;font-size:14px}
.genui-table-scroll :is(th,td) {padding:10px;text-align:left;border-bottom:1px solid var(--line)}
.genui-table-scroll th {background:var(--mint)}
.genui-pagination {margin-top:12px}
#genui-turns:empty,#genui-feedback:empty {display:none}
#genui-turns, .genui-compose-dock {
  width: min(700px, 100%);
  margin-inline: auto;
}
.genui-turn {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
  overflow-wrap: anywhere;
}
.genui-turn .genui-user-bubble {
  justify-self: end;
  width: fit-content;
  max-width: min(590px, 90%);
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--mint);
  white-space: pre-wrap;
  font-size: 14px;
}
.genui-turn-progress {
  color: var(--muted);
  font-size: 13px;
}
.genui-turn-progress summary {cursor:pointer;width:fit-content}
.genui-turn-progress ol {margin:8px 0 0;padding-inline-start:24px}
.genui-ai-reply {font-size:16px;line-height:1.7}
.genui-session-actions {justify-content:flex-end}
.genui-compose-dock {
  position: sticky;
  bottom: 12px;
  z-index: 1;
  display: grid;
  gap: 8px;
}
#genui-service {padding-inline:16px;text-align:end}
#genui-compose {padding:20px 16px 12px}
#genui-feedback {padding-inline:16px}

#genui-prompt {
  display: block;
  min-height: 52px;
  max-height: min(156px, 28vh);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: none;
}
#genui-prompt:focus {outline:none}
#genui-compose:has(#genui-prompt:focus-visible) {border-color:color-mix(in srgb, var(--green) 50%, transparent)}
.genui-toolbar.genui-compose-actions {
  justify-content: flex-end;
  gap: 10px;
}
.genui-compose-actions .genui-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.genui-send-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url('../assets/component-icons/icons/ic_send.svg') center / contain no-repeat;
}
.genui-workspace {scroll-margin-bottom:180px}
.genui-turn {scroll-margin-bottom:180px}

.genui-actions {display:flex;flex-wrap:wrap;gap:8px}
.genui-field>label {margin-bottom:4px}
.genui-table-scroll>.esun-form-list-wrapper {min-width:450px}
#genui-notes {margin-top:16px;white-space:pre-line;overflow-wrap:anywhere}
[data-theme="dark"] #genui-preview :is(.esun-select,.esun-date-input) {background:var(--surface);color:var(--text);color-scheme:dark}
.genui-filters .genui-date-toggle {display:flex;align-items:center;gap:6px;margin-top:6px}

.genui-query-form {padding:16px;border:1px solid var(--line);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.genui-query-form h3 {grid-column:1/-1;margin:0;font-size:16px}
#genui-preview>div>div>h3 {margin:16px 0 8px;font-size:16px}

#genui-preview .esun-form-tabs-wrapper > .legacy-form-tab-panel {
  margin: 0;
  padding: 0;
}
#genui-preview .genui-table-scroll {
  width: 100%;
}
#genui-preview .genui-table-scroll .legacy-list-table-row .formCell {
  font-size: 14px;
}
#genui-preview .esun-pager {
  justify-content: center;
  margin-top: 8px;
}

.genui-wireframe-card {
  display: grid;
  gap: 4px;
  justify-self: start;
  margin: 0;
  padding: 12px 16px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: start;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.genui-wireframe-card span {color:var(--muted);font-size:14px}
#genui-result {
  width: min(1120px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  color: var(--text);
  overflow: auto;
}
#genui-result::backdrop {background:rgb(0 0 0 / .48)}
.genui-preview-close {display:flex;justify-content:flex-end;margin-bottom:12px}
.genui-progress-scroll {overflow:auto;margin-bottom:16px}
.genui-progress-scroll .esun-progressbar {min-width:420px}

.genui-hero {
  position: sticky;
  top: var(--genui-header-height, 72px);
  z-index: 10;
  transition: min-height .22s ease, padding .22s ease;
}
.genui-hero h1 {transition:font-size .22s ease, margin .22s ease}
.genui-hero-description {
  max-height: 4em;
  overflow: hidden;
  transition: max-height .22s ease, opacity .16s ease;
}
.genui-hero.is-compact {
  min-height: 106px;
  padding-block: 16px 20px;
}
.genui-hero.is-compact h1 {font-size:clamp(24px, 4vw, 32px);margin:4px 0 0}
.genui-hero.is-compact .genui-hero-description {max-height:0;opacity:0}

#genui-model-version {
  min-width: 0;
  color: color-mix(in srgb, var(--green) 75%, var(--muted));
  font-size: 13px;
  overflow-wrap: anywhere;
}

#genui-add-sketch {
  width: 36px;
  height: 36px;
  margin-inline-end: auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--green);
  font-size: 20px;
  line-height: 1;
}
#genui-sketch-selection:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
#genui-sketch-name {min-width:0;overflow-wrap:anywhere}

[data-page="genui"] .app-header .header-tools {
  margin-inline-start: auto;
  min-width: 0;
}