:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #28251f;
  background: #20242a;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, select, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-header {
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; color: #f8f3e9; background: #342d24; border-bottom: 1px solid #17130f;
}
.brand { display: flex; align-items: baseline; gap: .75rem; }
.brand span { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 700; }
.brand small { color: #d5bd9f; }
.picker-controls { display: flex; align-items: center; gap: .5rem; }
.picker-controls label { color: #d5bd9f; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
select, .picker-controls button { height: 34px; border: 1px solid #786957; border-radius: 5px; }
select { min-width: 240px; padding: 0 .6rem; background: #fffdf8; }
.picker-controls button { padding: 0 .9rem; color: white; background: #8a4f22; font-weight: 700; }

.status {
  position: fixed; z-index: 5; left: 50%; top: 65px; transform: translateX(-50%);
  margin: 0; padding: .35rem .7rem; border-radius: 999px; color: #4d463d;
  background: rgb(255 253 248 / 90%); box-shadow: 0 2px 10px rgb(0 0 0 / 16%); font-size: .75rem;
}
.status.error { color: #9b2525; }

.workspace {
  height: calc(100vh - 58px); display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(440px, 8fr) minmax(220px, 2fr);
  min-width: 0;
}
.panel { min-width: 0; overflow: auto; background: #f5f1e9; }
.tree-panel { border-right: 1px solid #aaa092; resize: horizontal; }
.properties-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-left: 1px solid #aaa092; resize: horizontal; direction: rtl; }
.properties-panel > * { direction: ltr; }
.panel-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #aaa092; background: #e9e2d7; }
.panel-tab { padding: .75rem .35rem; border: 0; border-bottom: 3px solid transparent; color: #70675b; background: transparent; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.panel-tab.active { color: #8a4f22; border-bottom-color: #8a4f22; background: #f5f1e9; }
.right-panel-view { min-height: 0; overflow-y: auto; }
.right-panel-view[hidden] { display: none; }
.panel-heading { padding: 1rem; border-bottom: 1px solid #d4c9b8; }
.panel-heading p { margin: 0 0 .35rem; color: #8a4f22; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.panel-heading h1, .panel-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 1.25rem; }
.panel-heading small { display: block; margin-top: .25rem; color: #70675b; }

.center-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.viewport-panel { position: relative; min-width: 0; min-height: 0; background: #d9dde0; }
.viewport { position: absolute; inset: 0; }
.viewport-canvas { display: block; width: 100%; height: 100%; }
.viewport-help { position: absolute; right: .75rem; bottom: .75rem; padding: .35rem .55rem; border-radius: 4px; color: #444b51; background: rgb(255 255 255 / 75%); font-size: .7rem; pointer-events: none; }

.conversation-panel { display: grid; grid-template-rows: auto auto; min-height: 0; padding: .55rem .75rem .65rem; gap: .4rem; color: #eee8df; background: #292b2d; border-top: 1px solid #111315; }
.conversation-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.conversation-heading strong { font-family: Georgia, serif; font-size: .88rem; }
.conversation-heading span { color: #bbb4aa; font-size: .67rem; text-align: right; }
.conversation-heading span.error { color: #f1a3a3; }
.conversation-view { position: relative; overflow: hidden; }
.conversation-history { height: 100%; min-height: 0; overflow-y: auto; padding: .75rem .7rem 3rem; }
.conversation-empty { margin: .2rem 0; color: #81786d; font-size: .75rem; line-height: 1.4; }
.conversation-message { margin: 0 0 .65rem; padding: .55rem .6rem; border-radius: 5px; font-size: .75rem; line-height: 1.4; }
.conversation-message.user { margin-left: .75rem; background: #e4d2b9; border-left: 3px solid #8a4f22; }
.conversation-message.assistant { margin-right: .75rem; background: #e1e5df; border-left: 3px solid #49644e; }
.conversation-message strong { display: block; margin-bottom: .15rem; color: #6f3e1b; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.conversation-message.assistant strong { color: #3f5945; }
.conversation-message p { margin: 0; overflow-wrap: anywhere; }
.jump-to-latest { position: absolute; right: .7rem; bottom: .65rem; padding: .35rem .55rem; border: 1px solid #786957; border-radius: 999px; color: #fff; background: #4d4943; font-size: .68rem; font-weight: 700; box-shadow: 0 2px 7px rgb(0 0 0 / 18%); }
.conversation-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .45rem; }
.conversation-compose textarea { min-width: 0; height: 74px; padding: .45rem .65rem; overflow-y: auto; resize: none; border: 1px solid #68635c; border-radius: 5px; color: #28251f; background: #fffdf8; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-compose button { align-self: end; height: 34px; padding: 0 .75rem; border: 1px solid #786957; border-radius: 5px; color: #fff; background: #4d4943; font-weight: 700; }
.conversation-compose .send-button { background: #8a4f22; }
.microphone-button.listening { color: #fff; background: #a52c2c; border-color: #dc7272; }
.microphone-button:disabled { cursor: not-allowed; opacity: .52; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.tree-column-heading { display: grid; grid-template-columns: 34px 1fr; padding: .5rem .6rem .3rem; color: #817668; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tree-column-heading span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); height: 38px; }
.hierarchy { padding: .25rem .45rem 2rem; }
.hierarchy ul { list-style: none; margin: 0; padding: 0; }
.hierarchy ul ul { margin-left: 28px; border-left: 1px solid #cbbda8; }
.tree-row { display: grid; grid-template-columns: 30px 22px minmax(0, 1fr); align-items: stretch; min-height: 36px; border-radius: 5px; }
.tree-row:hover { background: #ebe4d8; }
.tree-row.selected { background: #ddc8aa; box-shadow: inset 3px 0 #8a4f22; }
.tree-row.effectively-hidden .tree-label { opacity: .52; }
.visibility-toggle, .tree-expander, .tree-label { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; }
.visibility-toggle { position: relative; color: #49644e; font-size: .9rem; }
.visibility-toggle.is-hidden { color: #8e8376; opacity: .65; }
.visibility-toggle.inherited-hidden { color: #7d7266; opacity: .45; }
.visibility-toggle.is-hidden::after { content: ""; position: absolute; left: 7px; top: 17px; width: 16px; height: 1px; background: currentColor; transform: rotate(-42deg); }
.tree-expander { color: #6d6255; }
.tree-expander:disabled { cursor: default; }
.tree-label { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: .3rem .25rem; text-align: left; }
.tree-label span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 700; }
.tree-label small { color: #776d60; font-size: .62rem; text-transform: capitalize; }

#selection-details { padding: 1rem; }
#selection-details p { color: #71685d; font-size: .85rem; line-height: 1.45; }
.properties-list { margin: 0; }
.properties-list div { margin-bottom: 1rem; }
.properties-list dt { color: #8a4f22; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.properties-list dd { margin: .15rem 0 0; overflow-wrap: anywhere; font-size: .82rem; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(190px, 1fr) minmax(360px, 3fr); }
  .properties-panel { display: none; }
}

#version-select { min-width: 270px; }
/* Release 000-004: model-centered conversation and printable derived output. */
[hidden] { display: none !important; }
.app-header { height: auto; min-height: 58px; flex-wrap: wrap; gap: .5rem; padding-block: .5rem; }
.picker-controls { flex-wrap: wrap; }
.picker-controls select { min-width: 140px; max-width: 240px; }
.speech-toolbar { min-height: 56px; display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.4rem 1rem; background:#ece4d7; border-bottom:1px solid #aaa092; }
.speech-toolbar button, .design-tabs button, dialog button, #print-cut-list { padding:.5rem .7rem; border:1px solid #998672; border-radius:5px; background:#fffdf8; color:#342d24; }
.speech-toolbar button[aria-pressed="true"] { background:#d9c4a7; box-shadow:inset 0 -2px #8a4f22; }
.speech-toolbar .microphone-button.listening { background:#a52c2c; color:white; }
.personality-identity { display:flex; align-items:center; gap:.5rem; margin-left:.7rem; }
#personality-portrait { object-fit:cover; border-radius:50%; }
#personality-select { min-width:90px; }
#activity-state { min-width:65px; font-size:.8rem; }
#speech-status { margin-left:auto; font-size:.75rem; }
#speech-status.error { color:#9b2525; }
#personality-portrait[data-state="Thinking"], #personality-portrait[data-state="Speaking"], #personality-portrait[data-state="Listening"] { animation:personality-pulse 1.5s ease-in-out infinite; }
@keyframes personality-pulse { 50% { box-shadow:0 0 0 4px #a0804a55; } }
@media(prefers-reduced-motion:reduce){ #personality-portrait {animation:none!important;} }
body { display:flex; flex-direction:column; }
.workspace { height:auto; flex:1; min-height:0; width:100%; }
.status { position:static; transform:none; border-radius:0; padding:.25rem 1rem; box-shadow:none; font-size:.75rem; }
.center-panel { grid-template-rows:auto minmax(0,1fr) auto; }
.design-tabs { display:flex; gap:.3rem; padding:.3rem; background:#e9e2d7; }
.design-tabs [aria-selected="true"] { border-bottom:3px solid #8a4f22; }
.conversation-compose { grid-template-columns:minmax(0,1fr) auto auto; }
#clear-command:disabled { opacity:.5; cursor:not-allowed; }
#cut-list-view { overflow:auto; background:#fffdf8; padding:1rem; min-height:0; }
#cut-list-content table { width:100%; border-collapse:collapse; font-size:.8rem; }
#cut-list-content th, #cut-list-content td { border-bottom:1px solid #cfc6b8; padding:.55rem .3rem; text-align:left; }
#cut-list-content .assembly-heading { background:#eee8de; font-weight:700; }
#cut-list-content h2 { font-family:Georgia,serif; }
dialog { width:min(560px,90vw); max-height:85vh; overflow:auto; border:1px solid #8a7965; border-radius:8px; padding:1.4rem; background:#fffdf8; }
dialog::backdrop { background:#161a1e66; }
dialog h2 { margin-top:0; font-family:Georgia,serif; }
dialog label { display:block; margin:1rem 0 .4rem; }
dialog input, dialog textarea { width:100%; padding:.6rem; border:1px solid #a39786; border-radius:4px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.library-entry { border-bottom:1px solid #cfc6b8; padding:.8rem 0; }
.library-entry h3 { margin:.2rem 0; }
.library-entry p { margin:.4rem 0; }
.library-entry small { display:block; margin:.4rem 0; }
.library-entry button { margin:.2rem .4rem .2rem 0; }
@media(max-width:900px){.workspace {grid-template-columns:160px minmax(260px,1fr) 210px;}.properties-panel{display:grid;}.brand small:nth-child(2){display:none;}}
@media print {
 :root {background:white;color:black;}
 @page { size:letter landscape; margin:.45in; }
 html,body {height:auto;overflow:visible;background:white;color:black;display:block;}
 .app-header,.speech-toolbar,.status,.tree-panel,.properties-panel,.design-tabs,#design-view,#conversation,#print-cut-list,dialog {display:none!important;}
 #project-view,.center-panel,#cut-list-view {display:block!important;height:auto;overflow:visible;padding:0;background:white;}
 #project-view {min-width:0;}
 #cut-list-content {font-size:10pt;}
 #cut-list-content table {font-size:9pt;width:100%;table-layout:auto;}
 #cut-list-content th,#cut-list-content td {padding:5pt 3pt;color:black;border-color:#777;overflow-wrap:anywhere;}
 #cut-list-content thead {display:table-header-group;}
 #cut-list-content tr {break-inside:avoid;}
}
.cut-metadata {display:grid;gap:12px;margin-top:20px}.cut-metadata label {display:block}.cut-metadata textarea {width:100%;box-sizing:border-box}
#version-state {font-size:.7rem;font-weight:800;padding:.45rem;border-radius:4px;background:#dae8d4;color:#294120;white-space:nowrap}
#version-state[data-readonly="true"] {background:#ffe4a4;color:#513800;border:1px solid #c99827}
#library-dialog {width:min(780px,92vw)}
#library-entries {max-height:35vh;overflow:auto}
.library-entry {padding:.7rem;border:1px solid #cfc6b8;border-radius:5px;margin:.5rem 0}
.library-entry.selected {border:2px solid #8a4f22;background:#eee2d0}
.library-entry label {margin:0;font-weight:700;cursor:pointer}
.library-entry input[type="radio"] {width:auto;margin-right:.6rem}
.library-actions {border-top:1px solid #998672;margin-top:1rem}
.library-actions button {margin-top:.8rem}
#library-create {background:#8a4f22;color:white;font-weight:700}

.editing-properties { display:grid; gap:12px; margin-top:18px; }
.editing-properties label { display:grid; gap:4px; font-size:.85rem; }
.editing-properties input, .editing-properties select { width:100%; box-sizing:border-box; padding:6px; }
.editing-properties input[type=checkbox] { width:auto; justify-self:start; }
.editing-properties small { color:#71685d; }

#undo-design:disabled, #redo-design:disabled { opacity:.45; cursor:not-allowed; }

.conversation-message.note { background: #fff3cd; border-left: 3px solid #977622; }
.conversation-message.note p { white-space: pre-wrap; }
#diagnostic-status:empty { display: none; }

.draw-button { font-weight: 700; border: 2px solid currentColor; min-width: 7rem; }
#pending-design-status { font-size: .875rem; }

/* Dedicated design-status row keeps progress and pending text out of the control toolbar. */
.design-status-row { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1rem; min-height:2.5rem; padding:.35rem 1rem; background:#ece4d7; border-bottom:1px solid #aaa092; }
.design-status-row #review-pending-design { padding:.35rem .6rem; border:1px solid #998672; border-radius:5px; background:#fffdf8; color:#342d24; }
@media print { .design-status-row { display:none; } }
.draw-progress { display:inline-grid; grid-template-columns:2.25rem 1fr 6ch; align-items:center; gap:.45rem; width:23rem; flex:0 0 23rem; min-height:1.8rem; white-space:nowrap; }
.draw-progress[data-active="false"] { visibility:hidden; }
.draw-progress [data-draw-elapsed] { text-align:right; font-variant-numeric:tabular-nums; }
.draw-bubbles { display:inline-flex; gap:4px; align-items:center; height:1rem; }
.draw-bubbles i { display:block; width:7px; height:7px; border-radius:50%; background:currentColor; }
.draw-progress[data-active="true"] .draw-bubbles i { animation:draw-thinking 1.2s ease-in-out infinite; }
.draw-bubbles i:nth-child(2) { animation-delay:.15s !important; }
.draw-bubbles i:nth-child(3) { animation-delay:.3s !important; }
@keyframes draw-thinking { 0%,80%,100% { opacity:.35; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .draw-progress[data-active="true"] .draw-bubbles i { animation:none; } }