/* UI density uses CSS viewport space, independently of canvas zoom or device DPR. */
:root {
  --ui-body: .875rem;
  --ui-leading: 1.75;
  --ui-secondary: .75rem;
  --ui-icon: 18px;
  --ui-panel-header: 48px;
  --ui-panel-padding: 16px;
  --ui-message-gap: 22px;
  --ui-paragraph-gap: 12px;
  --ui-input-min: 94px;
  --ui-input-max: 190px;
  --ui-composer-padding: 12px;
  --ui-reference-max: 122px;
  --ui-conversation-default: 392px;
  --ui-library-width: 280px;
}
@media (max-width: 2199px), (max-height: 1199px) {
  :root:not([data-ui-density="comfortable"]) {
    --ui-body: .8125rem;
    --ui-leading: 1.5384615385;
    --ui-icon: 16px;
    --ui-panel-header: 40px;
    --ui-panel-padding: 12px;
    --ui-message-gap: 12px;
    --ui-paragraph-gap: 8px;
    --ui-input-min: 64px;
    --ui-input-max: 140px;
    --ui-composer-padding: 8px;
    --ui-reference-max: 84px;
    --ui-conversation-default: 360px;
    --ui-library-width: 256px;
  }
}
:root[data-ui-density="compact"] {
  --ui-body: .8125rem;
  --ui-leading: 1.5384615385;
  --ui-icon: 16px;
  --ui-panel-header: 40px;
  --ui-panel-padding: 12px;
  --ui-message-gap: 12px;
  --ui-paragraph-gap: 8px;
  --ui-input-min: 64px;
  --ui-input-max: 140px;
  --ui-composer-padding: 8px;
  --ui-reference-max: 84px;
  --ui-conversation-default: 360px;
  --ui-library-width: 256px;
}
/* Header wrapping consumes real layout height instead of overlapping a fixed workspace. */
#app { min-width: 0; }
#app:has(.workspace) { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.app-header { flex-shrink: 0; }
.workspace {
  --library-width: var(--ui-library-width);
  --conversation-width: var(--ui-conversation-default);
  --panel-inset: 12px;
  --panel-bottom: 40px;
  flex: 1;
  min-height: 0;
  height: auto;
  container-type: size;
}
.conversation-panel {
  top: auto;
  bottom: var(--panel-bottom);
  height: min(720px, calc(100% - var(--panel-bottom) - var(--panel-inset)));
  max-width: calc(100% - 32px);
}
.conversation-docked .conversation-panel {
  top: var(--panel-inset);
  bottom: var(--panel-bottom);
  height: auto;
}
.panel-header, .conversation-panel .panel-header {
  height: var(--ui-panel-header);
  padding: 0 var(--ui-panel-padding);
}
.panel-header h2, .workspace-tab, .device-tab-content, .device-tab-content h3,
.inspector-heading, .library-search, .chat-empty p, .chat-suggestion,
.report-summary, .clarification-form h3, .clarification-form .input,
.input-panel .field-label, .dialog-content > p, .dialog .input {
  font-size: var(--ui-body);
}
.desktop-icon { width: var(--ui-icon); height: var(--ui-icon); }
.ui-density-select {
  min-height: 32px;
  max-width: 76px;
  padding: 3px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--secondary);
  font-size: var(--ui-secondary);
}
.conversation-select {
  margin: 0 var(--ui-panel-padding) 6px;
  padding: 5px 8px;
  min-height: 32px;
  font-size: var(--ui-body);
}
.workspace-tabs { padding: 2px var(--ui-panel-padding); }
.workspace-tab { min-height: 32px; }
.message-list { padding: var(--ui-panel-padding) var(--ui-panel-padding) 2px; }
.message { margin-bottom: var(--ui-message-gap); }
.message-label, .message.user .message-label { margin-bottom: 6px; font-size: var(--ui-secondary); }
.message.user { padding: 8px 12px 6px; margin-left: 16px; }
.message-text, .message-text code, .intent-input {
  font-size: var(--ui-body);
  line-height: var(--ui-leading);
}
.message-text p { margin: 0; }
.message-text p + p, .message-text p + ul, .message-text p + ol { margin-top: var(--ui-paragraph-gap); }
.message-text ul, .message-text ol { margin: var(--ui-paragraph-gap) 0; }
.message-text li { margin: 3px 0; }
.message-text h3, .message-text h4, .message-text h5, .message-text h6 {
  font-size: var(--ui-body);
  margin: 12px 0 6px;
}
.message-actions { margin-top: 4px; }
.message-actions .button, .message-expand { min-height: 32px; }
.message-table th, .message-table td { padding: 6px 8px; }
.message-code pre { padding: var(--ui-panel-padding); }
.composer { padding: var(--ui-composer-padding) var(--ui-panel-padding); min-height: 0; }
.intent-input {
  height: var(--ui-input-min);
  min-height: min(var(--ui-input-min), 12cqh);
  max-height: min(var(--ui-input-max), 22cqh);
  padding: 8px 10px;
}
.composer-references { max-height: min(var(--ui-reference-max), 15cqh); overflow: auto; }
.composer-footer { flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.composer-footer .button, .send-button, .composer-stop { min-height: 32px; }
.composer-note { padding-top: 4px; font-size: var(--ui-secondary); }
.composer-hint { min-width: 0; font-size: var(--ui-secondary); }
.run-panel { margin: 2px var(--ui-panel-padding) var(--ui-message-gap); padding: var(--ui-panel-padding); }
.clarification-form { margin: 0 var(--ui-panel-padding) var(--ui-message-gap); padding: var(--ui-panel-padding); }
.chat-empty { padding: 12px 4px 20px; }
.chat-empty p { line-height: var(--ui-leading); }
.chat-suggestions { margin-top: 16px; }
.chat-suggestion { padding: 8px 10px; }
.library-panel { max-width: calc(100% - 32px); }
.inspector-page { padding: var(--ui-panel-padding); }
@media (max-width: 1100px) {
  .app-header { flex-wrap: wrap; height: auto; min-height: var(--topbar-height); gap: 4px 8px; padding: 6px 12px; }
  .header-identity, .header-tools { min-width: 0; flex-wrap: wrap; gap: 4px; }
  .header-tools { flex-shrink: 1; }
  .project-chip .project-select { max-width: 160px; }
  .header-tools .account-label { display: none; }
  .workspace { --ui-library-width: 232px; }
}
@container (max-height: 700px) {
  .conversation-panel { --ui-panel-header: 40px; --ui-input-min: 56px; --ui-composer-padding: 6px; }
  .composer-hint { display: none; }
  .composer-footer .send-button { margin-left: auto; }
}
@container (max-height: 520px) {
  .conversation-panel { --ui-input-min: 44px; }
  .composer-note { display: none; }
  .composer-references { max-height: 56px; }
}
@media (max-width: 700px) {
  .conversation-docked:not(.conversation-collapsed) .canvas-panel { right: 0; }
  .conversation-panel { right: 8px; max-width: calc(100% - 16px); }
  .conversation-panel .panel-header h2 { flex-shrink: 1; min-width: 0; }
  .conversation-panel .panel-heading-actions { gap: 0; }
  .ui-density-select { max-width: 64px; }
}