.canvas-stage {
  --canvas-dialog-dock-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.canvas-stage .work-floats[data-work-panel]:has([data-canvas-dialog]) {
  bottom: max(var(--canvas-dialog-dock-bottom), calc(var(--canvas-dialog-keyboard-inset, 0px) + 8px));
  z-index: 42;
}

.canvas-stage .work-floats[data-work-panel] .canvas-dialog-wrap {
  width: min(560px, calc(100vw - 32px));
}

.work-float-panel .canvas-dialog {
  color: var(--appearance-ink);
  background: var(--appearance-surface);
  border: 1px solid var(--appearance-line);
  border-radius: 16px;
  box-shadow: 0 14px 36px #0003;
  font: 15px/1.55 var(--nov05-font-data, sans-serif);
  max-height: min(72vh, 620px);
  max-height: min(620px, calc(var(--canvas-dialog-visible-height, 100dvh) - var(--canvas-dialog-headroom, 76px)));
}

.canvas-shell .canvas-stage .canvas-toolbar:has(.canvas-dialog-tabs) {
  bottom: var(--canvas-dialog-dock-bottom);
}

.app-frame:has(.canvas-stage [data-canvas-dialog]) > .toast {
  top: 12px;
  bottom: auto;
  pointer-events: none;
}

.canvas-dialog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 10px;
  padding: 7px 10px;
  background: var(--appearance-chip);
  border-bottom: 1px solid var(--appearance-line);
}

.canvas-dialog-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.canvas-shell .canvas-dialog-tabs .canvas-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--appearance-secondary);
  font: 600 14px/1.2 var(--nov05-font-data, sans-serif);
  white-space: nowrap;
}

.canvas-shell .canvas-dialog-tabs .canvas-tab-btn:hover {
  color: var(--appearance-ink);
  background: var(--appearance-hover);
}

.canvas-shell .canvas-dialog-tabs .canvas-tab-btn.active {
  color: var(--appearance-ink);
  border-color: var(--appearance-line);
  background: var(--appearance-hover);
}

.canvas-dialog-tabs .canvas-tab-btn.active svg { color: var(--appearance-accent); }

.canvas-dialog svg,
.canvas-dialog-tabs svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.canvas-dialog-close,
.canvas-dialog-action,
.canvas-dialog-tools button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--appearance-line);
  border-radius: 8px;
  background: transparent;
  color: var(--appearance-ink);
  font: 600 14px/1.25 var(--nov05-font-data, sans-serif);
  cursor: pointer;
}

.canvas-dialog-close {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  padding: 0;
  border-color: transparent;
  color: var(--appearance-secondary);
}

.canvas-dialog :is(.canvas-dialog-close, .canvas-dialog-action, .canvas-dialog-tools button):hover:not(:disabled) {
  background: var(--appearance-hover);
  color: var(--appearance-ink);
}

.canvas-dialog-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.canvas-dialog-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px 8px;
}

.canvas-dialog-context-text { min-width: 0; }

.canvas-dialog-context h2 {
  margin: 0;
  color: var(--appearance-ink);
  font: 400 25px/1.2 var(--nov05-font-display, var(--nov05-font-data, sans-serif));
  font-synthesis: none;
}

.canvas-dialog-scope {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-top: 6px;
  color: var(--appearance-secondary);
  font-size: 14px;
}

.canvas-dialog-scope-name,
.canvas-dialog-scope-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-dialog-scope-name { font-weight: 600; }

.canvas-dialog-scope-meta {
  padding-inline-start: 7px;
  border-inline-start: 1px solid var(--appearance-line);
}

.canvas-dialog-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
}

.canvas-dialog-activity {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 20px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-color: var(--appearance-edge) transparent;
  overflow-wrap: anywhere;
}

.canvas-dialog-activity:empty { display: none; }

.canvas-dialog-empty {
  margin: 0;
  padding: 5px 0 12px;
  color: var(--appearance-secondary);
}

.canvas-dialog-record {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
}

.canvas-dialog-record + .canvas-dialog-record { border-top: 1px solid var(--appearance-line); }
.canvas-dialog-record-label { color: var(--appearance-secondary); font-size: 14px; font-weight: 650; }
.canvas-dialog-record-text { white-space: pre-wrap; }
.canvas-dialog-evidence-mode { display: block; margin-bottom: 4px; color: var(--appearance-secondary); font-size: 12px; }

.canvas-dialog-findings {
  grid-column: 2;
  display: grid;
  gap: 10px;
}

.canvas-dialog-finding {
  padding: 10px 11px;
  border: 1px solid var(--appearance-line);
  border-radius: 8px;
  background: var(--appearance-chip);
}

.canvas-dialog-finding-title { display: block; font-weight: 650; }
.canvas-dialog-finding p { margin: 4px 0 0; }

.canvas-dialog-finding-evidence {
  color: var(--appearance-secondary);
  white-space: pre-wrap;
}

.canvas-dialog-composer {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 12px 12px;
}

.canvas-dialog-input-frame {
  min-width: 0;
  border: 1px solid var(--appearance-edge);
  border-radius: 12px;
  background: var(--appearance-chip);
}

.canvas-dialog-input-frame:focus-within { border-color: var(--appearance-accent); }

.canvas-dialog-input-frame textarea[data-chat-input] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  max-height: 96px;
  padding: 9px 11px 2px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color: var(--appearance-ink);
  font: 16px/1.5 var(--nov05-font-data, sans-serif);
  resize: none;
}

.canvas-dialog-input-frame textarea[data-chat-input]:focus-visible { outline-offset: -2px; }

.canvas-dialog-composer-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  padding: 5px 7px 7px;
}

.canvas-dialog-attachments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 76px;
  overflow-y: auto;
  margin-bottom: 7px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

@media (prefers-reduced-motion: no-preference) {
  .canvas-dialog-attachment.is-discovered {
    animation: canvas-standard-discover 300ms cubic-bezier(.2,.75,.3,1) both;
  }
  .canvas-dialog-attachment.is-discovered:nth-child(2) { animation-delay: 75ms; }
  .canvas-dialog-attachment.is-discovered:nth-child(3) { animation-delay: 150ms; }
}

@keyframes canvas-standard-discover {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.canvas-dialog-attachment {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding-inline-start: 9px;
  border: 1px solid var(--appearance-line);
  border-radius: 8px;
  background: var(--appearance-chip);
}

.canvas-dialog-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-dialog-attachment .canvas-dialog-action { border-color: transparent; }

.canvas-dialog-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 1px 7px;
  color: var(--appearance-secondary);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.canvas-dialog-confirm-label { flex: 1 1 14ch; min-width: 0; }

.canvas-dialog-confirm .canvas-dialog-action {
  border-color: var(--appearance-edge);
  white-space: nowrap;
}

.canvas-dialog-confirm small {
  font-size: inherit;
}

.canvas-dialog-status {
  flex: 1 1 10ch;
  color: var(--appearance-secondary);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.canvas-dialog-status:empty { display: none; }

.canvas-dialog .canvas-dialog-action-primary,
.canvas-dialog .canvas-dialog-action-primary:hover:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: transparent;
  background: var(--appearance-accent);
  color: var(--appearance-accent-ink);
}

.canvas-dialog .canvas-dialog-action-primary:hover:not(:disabled) { opacity: .87; }

.canvas-dialog button:disabled {
  cursor: default;
  border-color: var(--appearance-line);
  background: var(--appearance-hover);
  color: var(--appearance-muted);
}

.canvas-dialog :is(.panel-body, .panel-section, .panel-list li, .panel-list li small, .panel-note, .argus-status) {
  padding-inline: 0;
  font-size: inherit;
}

.canvas-dialog :is(.argus-input, [data-argus-input]) { font-size: 16px; }
.canvas-dialog :is(.argus-run, .argus-option, .std-locate) { min-height: 40px; font-size: 14px; }

@media (max-width: 600px) {
  .canvas-stage { --canvas-dialog-dock-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .canvas-stage .work-floats[data-work-panel] .canvas-dialog-wrap { width: min(560px, calc(100vw - 20px)); }
  .work-float-panel .canvas-dialog {
    max-height: min(620px, calc(var(--canvas-dialog-visible-height, 100dvh) - var(--canvas-dialog-headroom, clamp(110px, 22.5dvh, 166px))));
  }
  .canvas-dialog-nav { padding: 5px 7px; }
  .canvas-dialog-context { padding: 12px 14px 6px; }
  .canvas-dialog-activity { padding-inline: 14px; }
  .canvas-dialog-findings { grid-column: 1 / -1; }
  .canvas-dialog-composer { padding: 7px 8px 8px; }
  .canvas-dialog-status { flex-basis: 5ch; }
  .canvas-shell .canvas-dialog-tabs .canvas-tab-btn { padding-inline: 8px; }
  .canvas-dialog-context:has(.canvas-dialog-tools) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 3px;
  }
  .canvas-dialog-context:has(.canvas-dialog-tools) .canvas-dialog-context-text { display: contents; }
  .canvas-dialog-context:has(.canvas-dialog-tools) .canvas-dialog-scope { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .canvas-dialog-context .canvas-dialog-tools { grid-column: 2; grid-row: 1; }
}

@media (min-width: 380px) and (max-width: 600px) {
  .canvas-shell .canvas-stage .canvas-toolbar:has(.canvas-dialog-tabs) { left: calc(50% + 31px); }
  .canvas-stage .work-floats[data-work-panel]:has([data-canvas-dialog]) {
    left: auto;
    right: 10px;
    transform: none;
  }
  .canvas-stage .work-floats[data-work-panel] .canvas-dialog-wrap { width: calc(100vw - 82px); }
}

@media (pointer: coarse) {
  .canvas-shell .canvas-dialog-tabs .canvas-tab-btn,
  .canvas-dialog :is(.canvas-dialog-close, .canvas-dialog-action, .canvas-dialog-tools button, .argus-run, .argus-option, .std-locate) {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-height: 480px) {
  .canvas-dialog-context { padding-top: 7px; }
  .canvas-dialog-context h2 { font-size: 22px; }
}

html[data-canvas-dialog-keyboard="compact"] .canvas-dialog-nav { display: none; }
html[data-canvas-dialog-keyboard="compact"] .canvas-dialog-context { padding-block: 4px; }
html[data-canvas-dialog-keyboard="compact"] .canvas-dialog-context h2 { font-size: 19px; }
html[data-canvas-dialog-keyboard="compact"] .canvas-dialog-context .canvas-dialog-scope { margin-top: 2px; }
html[data-canvas-dialog-keyboard="compact"] .canvas-dialog-input-frame textarea[data-chat-input] { min-height: 40px; max-height: 44px; }