/* CITYENGINE_CHAT_FINISH_R1
   Self-contained approved Tomball density1 + density2 presentation cascade.
   Load after the existing widget and chat base/R2/R3 styles.
   Host scope is enforced by city-chat-finish1.js and the installation manifest.
   The original ce-density2 markers are retained for safe pilot compatibility. */

/* CITYENGINE_CHAT_FINISH_R1 — approved density1 foundation.
   Shared by the explicit 31-city allowlist and CityEngine.pro only.
   This keeps the approved fallback, subtitle, and responsive cascade. */

/* Desktop shell. Keep the existing full-screen mobile geometry and launcher. */
@media (min-width: 601px) {
  #ce-city-ask-dialog-r2 {
    width: min(400px, calc(100vw - 32px));
    height: min(700px, calc(var(--ceask-r2-vh, 100dvh) - 40px));
    border-radius: 14px;
    box-shadow: 0 12px 36px #0e254e33;
  }
  #ce-city-ask-dialog-r2 .ceask-r2-header {
    padding: 8px 12px;
    gap: 8px;
  }
  #ce-city-ask-dialog-r2 .ceask-r2-brand {
    gap: 8px;
  }
  #ce-city-ask-dialog-r2 .ceask-r2-brand img {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }
  #ce-city-ask-dialog-r2 .ceask-r2-brand strong {
    font-size: 15px;
    font-weight: 650;
  }
  #ce-city-ask-dialog-r2 .ceask-r2-close {
    border-radius: 9px;
    font-size: 24px;
  }
  #ce-city-ask-dialog-r2 .ceask-r2-links {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Fine-pointer footer density; retain the existing touch-first target size. */
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  #ce-city-ask-dialog-r2 .ceask-r2-links a {
    min-height: 32px;
  }
}

/* Retain the subtitle on short screens, where the older sheet hid it. */
#ce-city-ask-dialog-r2 .ceask-r2-brand span {
  display: block;
}

/* Preserve the existing high-contrast treatment. */
@media (forced-colors: active) {
  #ce-city-ask-dialog-r2 {
    box-shadow: none;
  }
}

/* Keep the app's normal single transcript scroller at the 596px target frame. */
body.embedded #chat {
  padding: 8px 12px 0;
}
body.embedded .message {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}

/* Match the existing winning :not(.widget-managed) selector. Do not declare
   display here: lead-open must continue to hide this navigation normally. */
body.embedded:not(.widget-managed) .next-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px 10px;
}
body.embedded:not(.widget-managed) .next-steps > .text-button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 5px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
}

body.embedded .panel-head .text-button {
  min-height: 32px;
  line-height: 1.4;
}
body.embedded .suggestions {
  gap: 5px;
  padding: 4px 12px 6px;
}
body.embedded .suggestions button {
  min-height: 32px;
  border-radius: 8px;
}

/* Explicit label/hint line heights and block textarea remove inherited leading
   and inline baseline space without reducing text or control hit areas. */
body.embedded #ask {
  padding: 6px 12px;
}
body.embedded #ask > label[for="question"] {
  display: block;
  margin: 0 0 3px;
  font-size: 11px;
  line-height: 1.4;
}
body.embedded #ask #question {
  display: block;
  width: 100%;
  height: 72px;
  min-height: 72px;
  max-height: 72px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 16px;
  line-height: 1.45;
  overflow-y: auto;
  resize: none;
}
body.embedded #ask .compose-bottom {
  margin-top: 4px;
}
body.embedded #ask .compose-bottom > span {
  display: block;
  line-height: 1.4;
}
body.embedded #ask .compose-bottom .button {
  min-height: 38px;
  border-radius: 9px;
}
body.embedded .request-shortcut {
  padding: 4px 12px;
}
body.embedded .request-shortcut .button {
  min-height: 36px;
  border-radius: 9px;
}

/* Device-based typography, not an iframe width proxy for the parent viewport.
   Fine-pointer desktop remains user-zoomable; touch-first inputs stay 16px. */
@media (hover: hover) and (pointer: fine) {
  body.embedded #ask #question {
    font-size: 15px;
  }
}

/* Reverse only height-based suppression of the NORMAL chat interface.
   The existing :has(.user-message) suggestion rule is more specific and still
   hides introductory suggestions after the conversation starts. No rule here
   reveals marketing sections, honeypots, or lead-open state-hidden controls. */
body.embedded:not(.lead-open) .panel-head {
  display: flex;
}
body.embedded:not(.lead-open) .suggestions {
  display: flex;
}
body.embedded:not(.lead-open) main > details.privacy {
  display: block;
}
body.embedded:not(.lead-open) main > footer {
  display: flex;
}

/* Height is the useful iframe measurement. Keep all normal-view controls
   reachable when the keyboard/zoom/short viewport leaves too little room.
   The transcript retains its own bounded scroller for existing JS autoscroll;
   the containing main scroller makes the composer and remaining controls
   reachable. Lead-open continues using its existing form scroller. */
@media (max-height: 520px) {
  body.embedded:not(.lead-open) main {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.embedded:not(.lead-open) .assistant {
    flex: 0 0 auto;
    min-height: calc(100% - 60px);
    overflow: visible;
  }
  body.embedded:not(.lead-open) #chat {
    flex: 0 0 auto;
    min-height: 120px;
    max-height: 240px;
    overflow-y: auto;
  }
}

/* CITYENGINE_CHAT_FINISH_R1 — approved density2 enhancement.
   The guarded presentation helper activates the 320 x 560 desktop shell
   and the separately docked composer. The foundation above is the fallback. */

/* Readiness signals used by the external presentation helper. */
#ce-city-ask-dialog-r2 {
  --ce-density2-shell: 2;
}
body.embedded {
  --ce-density2-css: 2;
}

/* Activate only after the guarded helper runs. Full-screen mobile geometry
   remains controlled by the original visualViewport-aware widget. */
@media (min-width: 601px) {
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] {
    width: min(320px, calc(100vw - 32px));
    height: min(560px, calc(var(--ceask-r2-vh, 100dvh) - 32px));
    inset: auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto;
    border-radius: 12px;
    box-shadow: 0 10px 28px #0e254e33;
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-header {
    padding: 4px 10px;
    gap: 6px;
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-brand {
    gap: 6px;
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-brand img {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-brand strong {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 650;
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-brand span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.3;
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-close {
    border-radius: 8px;
    font-size: 20px;
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-links {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-links {
    padding-top: 2px;
    padding-bottom: calc(2px + env(safe-area-inset-bottom));
  }
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] .ceask-r2-links a {
    min-height: 30px;
    padding: 3px 1px;
    font-size: 11px;
  }
}
@media (forced-colors: active) {
  #ce-city-ask-dialog-r2[data-ce-density-ready="2"] {
    box-shadow: none;
  }
}

/* The form has its own grid row. Only the content above it can scroll away.
   These rules deliberately replace the R1/R3 short-frame flow at EVERY height;
   there is no <=520px mode that puts the composer back into main. */
body.embedded.ce-density2-ready:not(.lead-open) {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.embedded.ce-density2-ready:not(.lead-open) > main {
  grid-row: 1;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.embedded.ce-density2-ready:not(.lead-open) main > .assistant {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* Keep the existing #chat node as a bounded transcript scroller, so the
   app's chat.scrollTop behavior continues to work without an app.js change.
   The cap does not force a short greeting to occupy the full 220px. */
body.embedded.ce-density2-ready:not(.lead-open) #chat {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  max-height: min(220px, 48dvh);
  padding: 6px 8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.embedded.ce-density2-ready:not(.lead-open) .message {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}
body.embedded.ce-density2-ready:not(.lead-open) .message p {
  margin-top: 6px;
}

/* Retain the normal-view controls even at short iframe heights. */
body.embedded.ce-density2-ready:not(.lead-open) .panel-head {
  display: flex;
  min-height: 32px;
  padding: 0 8px;
}
body.embedded.ce-density2-ready:not(.lead-open) .panel-head .text-button {
  min-height: 32px;
  padding: 4px 6px;
  font-size: 11px;
  line-height: 1.3;
}
body.embedded.ce-density2-ready:not(.lead-open):not(.widget-managed) .next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px 8px;
}
body.embedded.ce-density2-ready:not(.lead-open):not(.widget-managed) .next-steps > .text-button {
  min-width: 0;
  min-height: 44px;
  padding: 5px 4px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.embedded.ce-density2-ready:not(.lead-open) .next-steps .human-action span {
  font-size: 10px;
  line-height: 1.3;
}
body.embedded.ce-density2-ready:not(.lead-open) .suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-height: none;
  padding: 4px 8px 6px;
  overflow: visible;
}
body.embedded.ce-density2-ready:not(.lead-open) .suggestions button {
  min-width: 0;
  min-height: 32px;
  padding: 5px 6px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.embedded.ce-density2-ready:not(.lead-open) .suggestions button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* The readiness class raises specificity; retain the original post-message
   hide explicitly rather than relying on the older, less-specific rule. */
body.embedded.ce-density2-ready:not(.lead-open) .assistant:has(.user-message) .suggestions {
  display: none;
}
body.embedded.ce-density2-ready:not(.lead-open) .request-shortcut {
  padding: 4px 8px;
}
body.embedded.ce-density2-ready:not(.lead-open) .request-shortcut .button {
  min-height: 36px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.35;
}

/* Privacy and the small existing footer remain in the content scroller.
   Marketing sections, already-hidden footer items, and honeypots are not
   selected. An open privacy disclosure uses main's scroll area. */
body.embedded.ce-density2-ready:not(.lead-open) main > details.privacy {
  display: block;
  max-height: none;
  padding: 0 8px;
  overflow: visible;
}
body.embedded.ce-density2-ready:not(.lead-open) main > details.privacy > summary {
  min-height: 30px;
  padding: 5px 0;
  font-size: 10px;
  line-height: 1.4;
}
body.embedded.ce-density2-ready:not(.lead-open) main > footer {
  display: flex;
  gap: 0;
  padding: 0 8px;
}
body.embedded.ce-density2-ready:not(.lead-open) main > footer nav {
  min-width: 0;
  flex-wrap: wrap;
  gap: 0 12px;
}

/* About 100px for the normal composer: label + 54px input/Send row + the
   unchanged AI hint. A status message can add a bounded scrollable area. */
body.embedded.ce-density2-ready:not(.lead-open) > #ce-density2-composer {
  grid-row: 2;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #fff;
}
body.embedded.ce-density2-ready:not(.lead-open) #ce-density2-composer > #ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 54px auto;
  gap: 3px 6px;
  min-width: 0;
  margin: 0;
  padding: 5px 8px 6px;
}
body.embedded.ce-density2-ready:not(.lead-open) #ask > label[for="question"] {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
}
body.embedded.ce-density2-ready:not(.lead-open) #ask #question {
  grid-column: 1;
  grid-row: 2;
  display: block;
  width: 100%;
  min-width: 0;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.25;
  overflow-y: auto;
  resize: none;
}
body.embedded.ce-density2-ready:not(.lead-open) #ask .compose-bottom {
  display: contents;
  margin: 0;
}
body.embedded.ce-density2-ready:not(.lead-open) #ask .compose-bottom > span {
  grid-column: 1 / -1;
  grid-row: 3;
  display: block;
  max-width: none;
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.embedded.ce-density2-ready:not(.lead-open) #ask .compose-bottom > #send {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  min-width: 58px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
body.embedded.ce-density2-ready:not(.lead-open) #ce-density2-composer > #status {
  min-height: 0;
  max-height: 3.9em;
  margin: 0;
  padding: 0 8px 4px;
  font-size: 11px;
  line-height: 1.3;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

/* Fine-pointer reductions are selective; touch keeps at least the existing
   control minimums. Callback form input/textarea/select fonts stay 16px. */
@media (hover: hover) and (pointer: fine) {
  body.embedded.ce-density2-ready:not(.lead-open) .panel-head,
  body.embedded.ce-density2-ready:not(.lead-open) .panel-head .text-button {
    min-height: 28px;
  }
  body.embedded.ce-density2-ready:not(.lead-open):not(.widget-managed) .next-steps > .text-button {
    min-height: 36px;
  }
  body.embedded.ce-density2-ready:not(.lead-open) .suggestions button {
    min-height: 28px;
  }
  body.embedded.ce-density2-ready:not(.lead-open) .request-shortcut .button {
    min-height: 32px;
  }
  body.embedded.ce-density2-ready:not(.lead-open) main > details.privacy > summary {
    min-height: 28px;
  }
  body.embedded.ce-density2-ready:not(.lead-open) #ask #question {
    font-size: 14px;
    line-height: 1.4;
  }
  body.embedded.ce-density2-ready:not(.lead-open) #ask .compose-bottom > #send {
    min-height: 36px;
  }
}

/* Lead-open retains the existing body/main/assistant/lead-panel layout and
   independent form scroller. The moved normal-chat composer is absent. */
body.embedded.ce-density2-ready.lead-open > #ce-density2-composer {
  display: none;
}