/* ArchiTask Studio UI Quality · Atelier / production interface layer
 * Scope: additive stylesheet for app/static/index.html. It intentionally preserves
 * the renderer's existing tokens and DOM contracts while improving hierarchy,
 * touch targets, responsive panels, and high-risk actions.
 */
:root {
  --studio-ui-line: color-mix(in srgb, var(--t) 16%, transparent);
  --studio-ui-line-strong: color-mix(in srgb, var(--t) 28%, transparent);
  --studio-ui-accent-quiet: color-mix(in srgb, var(--a) 18%, transparent);
  --studio-ui-surface: color-mix(in srgb, var(--s1) 92%, transparent);
  --studio-ui-gap: clamp(12px, 1.5vw, 18px);
}

/* Studio is an operating surface: less decorative glass, clearer layers. */
:root[data-theme="dark"] { --a:#44735a; --a2:#a9c8b3; --a-deep:#355d49; --a-soft:#44735a26; --glow:#44735a33; --t3:#96a499; }
:root[data-theme="light"] { --a:#355d49; --a2:#355d49; --a-deep:#284a39; --a-soft:#355d491a; --glow:#355d4926; --t3:#616e65; }
#header { padding: 2px 4px; }
.btn:not(.btn-o):not(.btn-danger), .logo-icon, .tool.active, #cmd-send { background:var(--a); box-shadow:none; }
.logo .logo-suffix, .hero-title em { background:none; -webkit-text-fill-color:currentColor; color:var(--a2); }
.hero-title { font-family:var(--font); font-weight:600; }
#header .logo-badge { border-radius: 5px; letter-spacing: .1em; }
#header .btn { min-height: 38px; }
.panel { border-color: var(--studio-ui-line); background: var(--studio-ui-surface); }

/* Keep the 3D viewport visually dominant and controls legible over it. */
#viewer { background: var(--canvas-bg); }
#ui { isolation: isolate; }
#toolbar {
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--studio-ui-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--s1) 82%, transparent);
  box-shadow: var(--e2);
}
.tool { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
.tool[data-tooltip]:focus-visible::after { content: attr(data-tooltip); position: absolute; left: 48px; top: 50%; transform: translateY(-50%); z-index: 100; white-space: nowrap; padding: 7px 10px; border: 1px solid var(--studio-ui-line-strong); border-radius: 7px; background: var(--s1); color: var(--t); box-shadow: var(--e2); font-size: 11px; }

/* Text controls do not depend on system emoji fonts. Keep every tool reachable. */
#toolbar { max-height: calc(100dvh - 160px); overflow-y: auto; width: 96px; }
#toolbar .tool { width: 76px; min-height: 36px; flex: 0 0 36px; font: 600 11px var(--font); color: var(--t); }
#toolbar .tool-sep { flex-shrink: 0; }
#tool-copilot { order: -1; background: var(--a-soft); }
#copilot-panel:not(.hidden) { display: flex; }
#copilot-panel.hidden { display: none !important; }
#copilot-messages { min-height: 60px !important; }
@media (max-width: 760px) {
  #header { flex-wrap: wrap; gap: 6px; }
  #header > div { flex-wrap: wrap; }
  #toolbar { width: auto; max-height: 58px; overflow-y: hidden; }
  #toolbar .tool { flex: 0 0 76px; }
  #copilot-panel { bottom: 180px !important; max-height: calc(100dvh - 300px) !important; overflow-y: auto; }
}

/* Upload state: calm architectural brief rather than a generic AI splash. */
#upload-zone { width: min(540px, calc(100vw - 32px)); padding: 32px 30px 26px; }
#upload-zone.panel { box-shadow: var(--e3); }
.hero-eyebrow { color: var(--a2); }
.hero-title { text-wrap: balance; }
.drop-area { min-height: 154px; display: grid; place-content: center; }
.drop-area:focus-within, .drop-area:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
.hero-chip { border-radius: 6px; }

/* Action hierarchy in the designer: choose remains the first, visible action. */
.dz-card { border-radius: 10px; border-color: var(--studio-ui-line); }
.dz-head .dz-choose, .dz-choose { min-height: 50px; border-radius: 8px; }
.dz-choose:focus-visible, .designer-close:focus-visible, .drag-close:focus-visible, .modal-close:focus-visible { outline: 2px solid var(--a2); outline-offset: 3px; }
#designer-panel .designer-close { min-width: 92px; background: var(--danger); }
.dz-render { border-color: var(--studio-ui-line); }

/* Draggable panels have a stable header and predictable reading order. */
.drag-handle { min-height: 40px; letter-spacing: .1em; }
.drag-close, .modal-close, .drag-min { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; border-radius: 7px; }
.drag-close:hover, .modal-close:hover, .drag-min:hover { background: var(--s2); }
.sidebar-section { border-color: var(--studio-ui-line); }
.metric { min-height: 26px; align-items: center; }

/* Forms and native controls must remain readable in both themes. */
.field input, .field select, input[type=text], input[type=number], select, textarea { min-height: 38px; }
input::placeholder, textarea::placeholder { color: var(--t3); opacity: 1; }
:where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--a2); outline-offset: 3px; }

/* Bottom controls stay clear of the canvas and thumb-reachable on mobile. */
#bottombar { padding: 5px; }
.mode-btn { min-height: 36px; }
#stats { min-height: 34px; align-items: center; }
#room-selector select { min-height: 42px; }

/* Responsive studio: bottom tool rail + full-width sheets, with canvas exposed. */
@media (max-width: 760px) {
  #header { left: 8px; right: 8px; padding: 5px 7px; background: color-mix(in srgb, var(--s1) 78%, transparent); border: 1px solid var(--studio-ui-line); border-radius: 12px; backdrop-filter: blur(16px); }
  #header .logo-badge { display: none; }
  #header .header-actions { gap: 4px; }
  #header .header-actions .btn { min-width: 36px; padding-inline: 9px; }
  #toolbar { left: 8px; right: 8px; bottom: 112px; top: auto; max-width: none; overflow-x: auto; flex-direction:row; flex-wrap: nowrap; border-radius: 12px; scrollbar-width: none; }
  .tool-sep { flex:0 0 1px; height:28px; margin:6px 3px; }
  #toolbar::-webkit-scrollbar { display: none; }
  .tool { flex: 0 0 40px; }
  #sidebar, #furniture-panel, #layers-panel, #views-panel, #proviews-panel, #architect-panel, #copilot-panel, #designer-panel, #production-panel { left: 8px !important; right: 8px !important; top: auto !important; bottom: 122px !important; width: auto !important; max-width: none !important; max-height: min(62vh, 600px) !important; }
  #designer-panel.journey { bottom: 8px !important; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px) !important; }
  #designer-panel.journey .drag-handle { margin-inline: -12px; padding-inline: 14px; }
  #designer-panel.journey #designer-body { grid-template-columns: 1fr; }
  #cmd-bar { left: 8px; right: 8px; bottom: 62px; width: auto; transform:none; }
  #cmd-input { min-width: 0; }
  #bottombar { left: 8px; right: 8px; bottom: 8px; justify-content: center; }
  #stats { left: 8px; right: 8px; bottom: 176px; }
  #room-selector { left: 8px; right: 8px; bottom: 12px; transform:none; }
  #room-selector select { width: 100%; max-width: none; }
  .modal-inner { width: calc(100vw - 24px); max-height: calc(100dvh - 32px); }
  .dz-actions { flex-direction: column; }
}

@media (max-width: 760px) {
  #ui #copilot-panel { bottom: 180px !important; max-height: calc(100dvh - 300px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .skeleton, .toast, .ai-orb, .dz-card { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}