/* Report 157 (Joseph 2026-09-29, ~18:55): the quote page as ONE page. Structure only; the looks (maplook_<name>.css)
   are skins that re-point the --mnm-q-* tokens below and style the hooks listed in F:\tmp\juno_workers\onepage\HOOK2.md.
     1. Contact and the maps live in ONE panel (#quotePanel). Continue collapses the contact fields to a one-line summary
        (Edit reopens them in place), opens the maps in the same panel and scrolls to them.
     3. The maps take ~80% of the window's width (--mnm-q-map-w); the contact fields keep their width.
     4. The estimator chat floats: docked bottom-right on a computer (collapsible to a tab), a bottom sheet on a phone
        (collapsed to a bar by default).
     5. After a building is selected no tool is active until "This is my house" (#propConfirmSel).
     2. Every colour here is a --mnm-q-* token with a neutral default, so a look owns the page background, the panel, the
        map panes' frames and the chat. Tokens only (lint gate). */

body {
  /* the skin contract: a look redefines these on body.maplook-<name> */
  --mnm-q-page-bg: var(--mnm-bg);             /* the page behind everything (no white under a dark look) */
  --mnm-q-panel-bg: var(--mnm-surface);       /* the one panel: contact + maps */
  --mnm-q-panel-ink: var(--mnm-ink);
  --mnm-q-panel-muted: var(--mnm-muted);
  --mnm-q-panel-line: var(--mnm-line);
  --mnm-q-panel-radius: var(--mnm-radius-container);
  --mnm-q-panel-shadow: var(--mnm-shadow-md);
  --mnm-q-pane-bg: var(--mnm-surface);        /* each map pane's frame (Street View, aerial) */
  --mnm-q-pane-line: var(--mnm-line);
  --mnm-q-field-bg: var(--mnm-surface);       /* contact inputs */
  --mnm-q-field-ink: var(--mnm-ink);
  --mnm-q-summary-bg: var(--mnm-bg);          /* the collapsed contact line */
  --mnm-q-chat-bg: var(--mnm-surface);        /* the floating chat */
  --mnm-q-chat-ink: var(--mnm-ink);
  --mnm-q-chat-line: var(--mnm-line);
  --mnm-q-chat-head-bg: var(--mnm-surface);
  --mnm-q-chat-head-ink: var(--mnm-ink);
  --mnm-q-chat-shadow: var(--mnm-shadow-lg);
  --mnm-q-accent: var(--mnm-accent);          /* "This is my house", the unread dot */
  --mnm-q-accent-ink: var(--mnm-brand-ink);
  /* sizes (a look may change them too) */
  --mnm-q-pad: 20px;
  --mnm-q-map-w: 80vw;                        /* Joseph: "make the maps take up like 80% of the available space" */
  --mnm-q-panel-max: 1440px;
  --mnm-q-form-w: 612px;                      /* the contact fields keep the form column's width */
  --mnm-q-chat-w: 380px;
  --mnm-q-chat-h: min(720px, calc(100svh - 230px));   /* clear of the bars and the summary line above the maps */
  --mnm-q-sheet-bar: 56px;                    /* phone: the collapsed chat bar */
  --mnm-q-sheet-h: 64svh;                     /* phone: the opened chat sheet */
  background: var(--mnm-q-page-bg);
}

/* ---- 1 + 3: the one panel ---- */
.mnm-q-panel { background: var(--mnm-q-panel-bg); color: var(--mnm-q-panel-ink); border: 1px solid var(--mnm-q-panel-line);
               border-radius: var(--mnm-q-panel-radius); box-shadow: var(--mnm-q-panel-shadow); padding: var(--mnm-q-pad);
               margin-bottom: 14px; }
.mnm-q-panel.is-hidden { display: none; }
.mnm-q-panel.is-open {
  --mnm-q-panel-w: min(var(--mnm-q-panel-max), calc(var(--mnm-q-map-w) + 2 * var(--mnm-q-pad)), calc(100vw - 32px));
  width: var(--mnm-q-panel-w); margin-left: calc(50% - var(--mnm-q-panel-w) / 2);
}
.mnm-q-contact { max-width: var(--mnm-q-form-w); margin: 0 auto; scroll-margin-top: 72px; }
.mnm-q-panel .mnm-q-contact .card { background: transparent; box-shadow: none; color: inherit; margin-bottom: 10px; }
.mnm-q-panel .mnm-q-contact .card-header { background: transparent; color: var(--mnm-q-panel-ink); padding-left: 0; padding-right: 0;
                                          border-bottom-color: var(--mnm-q-panel-line); }
.mnm-q-panel .mnm-q-contact .card-body { padding-left: 0; padding-right: 0; }
.mnm-q-panel .mnm-q-contact .form-label { color: var(--mnm-q-panel-muted); }
.mnm-q-panel .mnm-q-contact .form-control { background: var(--mnm-q-field-bg); color: var(--mnm-q-field-ink); border-color: var(--mnm-q-panel-line); }
.mnm-q-panel .mnm-q-contact .sms-consent-row { color: var(--mnm-q-panel-muted); }
/* collapsed: one line with the details and an Edit button */
.mnm-q-contact-summary { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: var(--mnm-q-summary-bg);
                         border: 1px solid var(--mnm-q-panel-line); border-radius: var(--mnm-radius-control);
                         font-size: var(--mnm-fs-sm); color: var(--mnm-q-panel-ink); }
.mnm-q-contact-summary i { color: var(--mnm-q-accent); }
#contactSummaryText { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnm-q-contact.is-collapsed .mnm-q-contact-summary { display: flex; }
.mnm-q-contact.is-collapsed .mnm-q-contact-form { display: none; }
.mnm-q-panel #s2 { margin-top: var(--mnm-q-pad); scroll-margin-top: 72px; }
/* the map card now sits inside the panel: no breaking out of the form column any more (report 130/155 did) */
.mnm-q-panel .mnm-prop-map, .mnm-q-panel #s2.is-map-folded .mnm-prop-map { width: auto; margin-left: 0; }
.mnm-q-panel .mnm-prop-card { background: var(--mnm-q-pane-bg); border-color: var(--mnm-q-pane-line); }
.mnm-q-panel #s2 .mnm-confirm-view { background: var(--mnm-q-pane-bg); border-color: var(--mnm-q-pane-line); }

/* ---- 5: the selection handoff ---- */
.mnm-sel-bar { display: none; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 3;
                width: max-content; max-width: calc(100% - 110px); flex-wrap: wrap; justify-content: center; align-items: center;
                gap: 6px 8px; }
.mnm-sel-bar .mnm-pick-btn, .mnm-sel-bar .mnm-map-toolbtn { width: auto; margin: 0; min-height: 44px; box-shadow: var(--mnm-shadow-lg); }
#s2.has-selection .mnm-sel-bar { display: none; }   /* Joseph ~19:57: "remove the this is my house button, the continue button does that" */
/* the placed split line (report 157) keeps "This is my house" up: it applies whatever the line shows */
#s2:not(.has-selection) .mnm-s2-toolbar [data-tool="split"] { display: none; }
/* Joseph 19:5x: "needs to be more noticable, larger at least": the page's primary call to action, big */
.mnm-sel-bar .mnm-sel-confirm { background: var(--mnm-q-accent); color: var(--mnm-q-accent-ink); font-size: var(--mnm-fs-lg);
                                font-weight: 800; min-height: 56px; padding: 12px 30px; letter-spacing: .2px; }
.mnm-sel-bar .mnm-sel-confirm i { font-size: var(--mnm-fs-xl); margin-right: 8px !important; }
#s2.is-sel-confirmed .mnm-sel-bar { display: none; }
/* after the handoff the way back sits in the send bar under the map, where "Send to AI" was (never over a corner) */
.mnm-sel-change { display: none; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--mnm-radius-control);
                  border: 1.5px solid var(--mnm-q-panel-line); background: var(--mnm-q-pane-bg); color: var(--mnm-q-panel-ink);
                  font-size: var(--mnm-fs-sm); font-weight: 700; cursor: pointer; }
/* Joseph 19:5x: "the send to ai button is back, it needs to be gone" */
.mnm-q-panel #s2MapSendBtn, .mnm-q-panel #s2MapUnsent { display: none !important; }
#s2.has-selection.is-sel-confirmed .mnm-sel-change { display: inline-flex; }
#s2MapPanel[data-map-mode="cut"] .mnm-sel-change { display: none; }
/* before "This is my house" the drawing tools stay out of reach: a click can only select, reselect or split */
#s2.has-selection:not(.is-sel-confirmed) .mnm-s2-toolbar :is([data-tool="polygon"], [data-tool="line"], [data-tool="rectangle"],
  [data-tool="marker"], [data-tool="cursor"], [data-tool="deletecorner"], [data-tool="finish"], [data-tool="snap"]) { display: none; }

/* ---- 4: the floating chat ---- */
#s2 .mnm-q-chat { position: fixed; right: 16px; bottom: 16px; z-index: 1030; width: min(var(--mnm-q-chat-w), calc(100vw - 32px));
                  height: var(--mnm-q-chat-h); display: flex; flex-direction: column; overflow: hidden;
                  background: var(--mnm-q-chat-bg); color: var(--mnm-q-chat-ink); border: 1px solid var(--mnm-q-chat-line);
                  border-radius: var(--mnm-radius-container); box-shadow: var(--mnm-q-chat-shadow); }
#s2 .mnm-q-chat .mnm-prop-chat-head { flex: 0 0 auto; border: none; border-bottom: 1px solid var(--mnm-q-chat-line); border-radius: 0;
                                      background: var(--mnm-q-chat-head-bg); color: var(--mnm-q-chat-head-ink); cursor: pointer;
                                      min-height: 48px; user-select: none; }
.mnm-q-chat-handle { display: none; }
/* the resize grip: the chat's top-left corner (desktop, open only) */
.mnm-q-chat-grip { position: absolute; left: 0; top: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 2; touch-action: none;
                   border-top: 3px solid var(--mnm-q-chat-head-ink); border-left: 3px solid var(--mnm-q-chat-head-ink);
                   border-top-left-radius: var(--mnm-radius-container); opacity: .55; }
.mnm-q-chat-grip:hover { opacity: 1; }
#s2 .mnm-q-chat.is-collapsed .mnm-q-chat-grip { display: none; }
#s2 .mnm-q-chat .mnm-prop-chat-head { position: relative; }
.mnm-q-chat-toggle { border: none; background: transparent; color: inherit; padding: 4px 8px; font-size: var(--mnm-fs-md);
                     line-height: 1; cursor: pointer; border-radius: var(--mnm-radius-control); }
.mnm-q-chat-unread { display: none; width: 10px; height: 10px; border-radius: var(--mnm-radius-50); background: var(--mnm-q-accent); }
#s2 .mnm-q-chat.has-unread .mnm-q-chat-unread { display: inline-block; }
#s2:not(.is-chat-started) #chatEditMapBtn { display: none; }
#s2.is-chat-started #chatEditMapBtn { display: inline-flex; }
.mnm-q-chat-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 10px; }
.mnm-q-chat-body .mnm-q-chat-talk { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 8px; }
#s2 .mnm-q-chat .chat-area { flex: 1 1 auto; height: auto; min-height: 140px; }
/* collapsed: the head alone, a tab in the corner */
#s2 .mnm-q-chat.is-collapsed { height: auto; width: auto; min-width: 240px; }
#s2 .mnm-q-chat.is-collapsed .mnm-q-chat-body { display: none; }
#s2 .mnm-q-chat.is-collapsed .mnm-prop-chat-head { border-bottom: none; }

@media (max-width: 560px) {
  body { --mnm-q-pad: 12px; }
  .mnm-q-panel.is-open { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; border-left: none; border-right: none; }
  .mnm-q-panel .mnm-prop-map, .mnm-q-panel #s2.is-map-folded .mnm-prop-map { width: auto; margin: 0 calc(-1 * var(--mnm-q-pad)); }
}
/* the bottom sheet: phones AND tablets (overnight review 2026-09-30: between 561 and 899px the chat had no rule, floated open
   over the map step and covered Continue at 768x1024). Up to 899px the chat is the phone's sheet; from 900px the column. */
@media (max-width: 899px) {
  #s2 .mnm-q-chat { left: 0; right: 0; bottom: 0; width: auto; height: var(--mnm-q-sheet-h);
                    border-radius: var(--mnm-radius-container) var(--mnm-radius-container) 0 0; border-bottom: none; }
  #s2 .mnm-q-chat.is-collapsed { height: var(--mnm-q-sheet-bar); width: auto; min-width: 0; }
  .mnm-q-chat-grip { display: none; }
  .mnm-q-chat-handle { display: block; position: absolute; top: 5px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
                       border-radius: var(--mnm-radius-pill); background: var(--mnm-q-chat-line); }
  #s2 .mnm-q-chat .mnm-prop-chat-head { min-height: var(--mnm-q-sheet-bar); padding-top: 12px; }
  /* room under the page so nothing ends under the bar */
  body.mnm-q-sheet-on { padding-bottom: var(--mnm-q-sheet-bar); }
  body.mnm-q-sheet-on .mnm-tap-toggles { bottom: calc(var(--mnm-q-sheet-bar) + 8px); }
}
#s2:not(.is-chat-started) .mnm-q-chat-toggle { margin-left: auto; }
/* the maps fill the screen under the sticky step bar once scrolled to (and the page can always scroll that far) */
.mnm-q-panel.is-open #s2 { min-height: calc(100svh - 90px); }
.mnm-q-panel #s2 #mapConfirm.is-big .mnm-confirm-view-body { height: clamp(300px, calc(100svh - 330px), 900px); }
@media (max-width: 560px) {
  .mnm-q-panel.is-open #s2 { min-height: 0; }
  .mnm-q-panel #s2 #mapConfirm.is-big .mnm-confirm-view-body { height: max(260px, 43svh); }

}
/* the step bar sticks UNDER the sticky top bar (it slid behind it before); quote.js measures the top bar */
.step-bar { top: var(--mnm-q-nav-h, 0px); }
/* the map first, Street View second: the chat docks bottom-right, over Street View, never over the map you work on */
.mnm-q-panel #s2 #aerialConfirmView { order: 1; }
.mnm-q-panel #s2 #svView { order: 2; }
/* Joseph 2026-09-29 (19:5x): "street view needs to be 3x larger by default". The two views stack, each the panel's full
   width: the map first (it has the tools), Street View right under it at about 60% of the screen's height. At 1280x800
   that is 1024 x 496 px against 1014/5*2 x 470 before (about 2.6x the area; more on taller screens). */
@media (min-width: 561px) {
  .mnm-q-panel #s2 #mapConfirm.is-big .mnm-confirm-views { flex-direction: column; align-items: stretch; }
  .mnm-q-panel #s2 #mapConfirm.is-big #aerialConfirmView, .mnm-q-panel #s2 #mapConfirm.is-big #svView { flex: none; width: 100%; }
  body { --mnm-q-sv-h: clamp(360px, 62svh, 820px); }
}
@media (max-width: 560px) {
  body { --mnm-q-sv-h: max(200px, 30svh); }   /* phone: 19 -> 30svh */
}
/* Joseph 19:5x: "only have the controls that are absolutely needed displayed at default ... the polygon tool and the line
   tool". Polygon, Line and "More tools" show; Finish only while a shape is being drawn (it is how a shape ends);
   everything else (Select, Adjust, Undo, Rectangle, Marker, Snap 90, Delete corner, Reset, Expand) is under More tools.
   Adjust still switches on by itself after "This is my house" for the services that measure the house. */
.mnm-q-panel .mnm-s2-toolbar .mnm-map-more { display: inline-flex; }
.mnm-q-panel .mnm-s2-toolbar:not(.more-open) .mnm-map-toolbtn:not([data-tool="polygon"]):not([data-tool="line"]):not([data-tool="more"]):not([data-tool="finish"]),
.mnm-q-panel .mnm-s2-toolbar .mnm-map-toolbtn[data-tool="finish"]:disabled { display: none; }
.mnm-q-panel .mnm-s2-toolbar .mnm-map-more { margin-left: auto; }
.mnm-s2-toolbar .mnm-map-toolbtn.is-off { display: none !important; }   /* a preview toggle switched this tool off */
/* Joseph ~19:57 (1): "the expanded view is the right size if you get rid of the white space". Street View's box is its
   picture: ONE size token (--mnm-q-sv-h) on the box's body, the picture always fills it, so no look can leave a white
   area under the picture. A look that wants another size sets --mnm-q-sv-h (on #svView, or on a state class of it). */
.mnm-q-panel #s2 #mapConfirm.is-big #svView .mnm-confirm-view-body { height: var(--mnm-q-sv-h) !important; }
.mnm-q-panel #s2 #mapConfirm #svView .mnm-confirm-view-media,
.mnm-q-panel #s2 #mapConfirm #svView .mnm-confirm-view-unavail { height: 100% !important; }
/* the preview toggle 'layout' off (report 125's small panes, in the form column): as it was */
.mnm-q-panel .mnm-prop-map:has(#mapConfirm:not(.is-big)) { margin: 0; }

/* Joseph ~19:57 (2)+(3): on a computer the chat is the column to the RIGHT of the map, filling the rest of the panel's width
   ("the ai panel should fill up the space available to the right of the map"), and it stays vertically centred on the
   screen while the page scrolls past the map ("vertically centered on screen, to contrast with the normal ai chat
   window"), its height fitted to the screen. The panel takes the window's width (less the gutters) for the two columns. */
@media (min-width: 900px) {
  body { --mnm-q-chat-col: clamp(340px, 28vw, 460px); --mnm-q-chat-h: min(780px, calc(100svh - var(--mnm-q-bars, 120px) - 32px)); }
  .mnm-q-panel.is-open { --mnm-q-panel-w: min(var(--mnm-q-panel-max), calc(100vw - 48px)); }
  #s2 #propLayout { display: grid; grid-template-columns: minmax(0, 1fr) var(--mnm-q-chat-col); gap: 16px; align-items: start; }
  #s2 .mnm-q-chat, #s2 .mnm-q-chat.is-collapsed {
    position: sticky; right: auto; bottom: auto; z-index: 5; width: auto; min-width: 0; height: var(--mnm-q-chat-h);
    top: max(calc(var(--mnm-q-bars, 120px) + 8px), calc(50svh + var(--mnm-q-bars, 120px) / 2 - var(--mnm-q-chat-h) / 2));
  }
  #s2 .mnm-q-chat.is-collapsed .mnm-q-chat-body { display: flex; }
  #s2 .mnm-q-chat .mnm-prop-chat-head { cursor: default; }
  #s2 .mnm-q-chat .mnm-q-chat-toggle, #s2 .mnm-q-chat .mnm-q-chat-grip { display: none; }
}

/* Joseph 2026-09-30 (~05:45): "make sure the chat never takes up more then 50%, maybe it needs to be redesigned to be tighter
   and more compact for mobile". The open sheet is at most half the screen, and everything in it is tighter: a thinner bar,
   less padding, the Street View / aerial cards cut to a short strip, smaller photo row, a small Back button. */
@media (max-width: 899px) {
  body { --mnm-q-sheet-bar: 48px; --mnm-q-sheet-h: min(50svh, 50vh); }
  #s2 .mnm-q-chat { max-height: 50vh; }
  #s2 .mnm-q-chat .mnm-prop-chat-head { padding-top: 8px; padding-bottom: 4px; }
  #s2 .mnm-q-chat .mnm-q-chat-body { padding: 6px 8px; }
  #s2 .mnm-q-chat .mnm-q-chat-talk { margin-bottom: 4px; }
  #s2 .mnm-q-chat .chat-area { min-height: 0; padding: 8px; gap: 6px; }
  #s2 .mnm-q-chat .chat-msg { max-width: 92%; }
  #s2 .mnm-q-chat .chat-msg span { padding: 6px 10px; line-height: 1.4; }
  #s2 .mnm-q-chat .chat-msg img { max-height: 88px; object-fit: cover; }
  #s2 .mnm-q-chat .photo-strip { min-height: 0; padding: 4px 8px; gap: 6px; }
  #s2 .mnm-q-chat .strip-thumb, #s2 .mnm-q-chat .photo-add-btn { width: 32px; height: 32px; font-size: var(--mnm-fs-md); }
  #s2 .mnm-q-chat .photo-add-hint { font-size: var(--mnm-fs-xs); }
  #s2 .mnm-q-chat .chat-input-row { padding: 6px 8px; }
  #s2 .mnm-q-chat .mt-2 { margin-top: 4px !important; }
  #s2 .mnm-q-chat .btn-back { padding: 6px 12px; font-size: var(--mnm-fs-sm); }
}