/* Micah AI chat page (/micah/) — card modelled on Jonah's reference:
   navy header with the supplied MICAH AI art, greeting bubble,
   four starting-point rows, then the repair guide and follow-up form. */
.micah-chat-section{background:#edf2f9;padding:52px 0 70px}
.micah-chat-container{max-width:760px}
.micah-chat-card{background:#fff;border:1px solid #d9e3f2;border-radius:20px;box-shadow:0 24px 60px #10294b26;overflow:hidden}
.micah-chat-head{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#0d2c58,#091e3d);border-bottom:3px solid #efbd3e;padding:18px 24px}
.micah-chat-face{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #ffffff55;flex:0 0 56px}
.micah-chat-ident{min-width:0}
.micah-chat-name{height:36px;width:auto;display:block}
.micah-chat-ident p{margin:3px 0 0;color:#c9d9f2;font-size:13px;line-height:1.4}
.micah-greet{background:#e9f1fe;border-radius:14px;padding:16px 18px;margin:24px 0 6px}
.micah-greet-title{font-size:20px;font-weight:700;color:#0a2249;line-height:1.3;margin:0 0 3px}
.micah-greet p{margin:0;color:#17365c;font-size:15px}
.micah-choose{font-size:13px;font-weight:700;letter-spacing:.04em;color:#0a2249;margin:18px 0 10px}
.micah-paths{display:grid;gap:10px;margin-bottom:8px}
.micah-path{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1.5px solid #d5e0f2;border-radius:12px;padding:14px 16px;font-size:16px;font-weight:600;color:#17365c;cursor:pointer}
.micah-path svg{width:26px;height:26px;flex:0 0 26px;color:#2f6df6}
.micah-path:hover{border-color:#2f6df6;background:#f4f8ff}
.micah-path-arrow{margin-left:auto;font-size:24px;line-height:1;color:#7a8db0}
.micah-guided{background:#e9f1fe;border-radius:14px;padding:16px 18px;margin:14px 0 4px}
.micah-guided-text{margin:0 0 12px;color:#17365c;font-size:15px;line-height:1.6}
.micah-guided-link{display:inline-flex;align-items:center;gap:8px;background:#2f6df6;color:#fff;font-weight:600;font-size:14px;border-radius:8px;padding:10px 16px;text-decoration:none}
.micah-guided-link:hover{background:#2253ae}
.micah-chat-note{font-size:11px;line-height:1.6;color:#7286a3;text-align:center;margin:18px 0 2px}
.micah-powered{text-align:center;color:#7286a3;font-size:12px;margin:16px 0 0}
@media(max-width:600px){
  .micah-chat-section{padding:26px 0 44px}
  .micah-chat-head{padding:14px 16px;gap:12px}
  .micah-chat-face{width:46px;height:46px;flex-basis:46px}
  .micah-chat-name{height:30px}
  .micah-greet{margin-top:18px}
  .micah-path{font-size:15px;padding:13px 14px}
}

.micah-thread{display:grid;gap:10px;margin:14px 0 4px}
.micah-msg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.55;white-space:pre-wrap;overflow-wrap:break-word}
.micah-msg-micah{background:#e9f1fe;color:#17365c;justify-self:start;border-bottom-left-radius:4px}
.micah-msg-user{background:#2f6df6;color:#fff;justify-self:end;border-bottom-right-radius:4px}
.micah-msg .micah-guided-link{margin-top:10px}


/* Embed mode (chat shown inside the pop-up window): strip the site
   chrome so the chat card fills the window. */
.micah-embed .topbar,.micah-embed header,.micah-embed footer,.micah-embed .quick-support,.micah-embed #page-dialog,.micah-embed .skip{display:none!important}
html.micah-embed,html.micah-embed body{height:100%}
.micah-embed .micah-chat-section{padding:0;background:#fff;height:100dvh;overflow-y:auto}
.micah-embed .micah-chat-container{max-width:none;padding:0}
.micah-embed .micah-chat-card{border:0;border-radius:0;box-shadow:none}
.micah-embed .micah-powered{display:none}


/* v4 — official header, compact topic grid, centred presentation. */
.micah-chat-head{padding:16px 20px}
.micah-chat-face{box-shadow:0 0 0 2px #efbd3e,0 0 0 5px #ffffff2b}
.micah-chat-admark{margin-left:auto;height:30px;width:auto;background:#fff;border-radius:7px;padding:4px 8px;flex:0 0 auto}
.micah-chat-section{display:flex;align-items:center;padding:40px 0 56px}
.micah-embed .micah-chat-section{align-items:flex-start}
.micah-paths{grid-template-columns:1fr 1fr;gap:9px;margin:20px 0 6px}
.micah-path{padding:12px 13px;font-size:14.5px;border-radius:11px;gap:10px}
.micah-path svg{width:22px;height:22px;flex-basis:22px}
.micah-path-active{background:linear-gradient(120deg,#0d3fae,#0a2f86)!important;border-color:#0a2f86!important;color:#fff!important}
.micah-path-active svg{color:#fff}
.micah-path-active .micah-path-arrow{color:#ffffffb3}
.micah-query-label{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
@media(max-width:480px){.micah-paths{grid-template-columns:1fr}.micah-chat-admark{height:25px}}


/* Embed hardening: in the pop-up window, nothing but the chat shows. */
.micah-embed body>*:not(main){display:none!important}
.micah-embed main>*:not(.micah-chat-section){display:none!important}
.micah-embed .micah-chat-section{display:block}


/* v5 — rounded everywhere, wider box, options set in a row. */
.micah-chat-card{border-radius:24px}
.micah-chat-container{max-width:840px}
.micah-embed .micah-chat-card{border-radius:24px}
@media(min-width:700px){
  .micah-paths{grid-template-columns:repeat(4,1fr)}
  .micah-path{flex-direction:column;justify-content:center;text-align:center;gap:8px;padding:15px 8px 13px}
  .micah-path svg{width:26px;height:26px;flex-basis:26px}
  .micah-path-arrow{display:none}
}


/* In-chat close (pop-up embed only; hidden on the full page). */
.micah-embed-close{display:none}
.micah-embed .micah-embed-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;margin-left:10px;border-radius:50%;border:1.5px solid #ffffff70;background:#ffffff1f;color:#fff;font-size:15px;cursor:pointer}
.micah-embed .micah-embed-close:hover{background:#ffffff38}


/* v6 — Jonah's design mockup: text lockup + white AutoDrive logo in the
   header, tall topic tiles with side chevrons, Micah avatar beside his
   messages, suggestion chips, gold input outline, bottom info strip. */
.micah-chat-name-text{font-size:26px;font-weight:800;letter-spacing:.05em;color:#fff;line-height:1.1;display:block}
.micah-chat-admark{height:40px;background:none;border-radius:0;padding:0}
.micah-path{border-radius:14px}
.micah-path-active{background:linear-gradient(150deg,#3a6cdc,#1e46a3)!important;border-color:#1e46a3!important}
.micah-msg-row{display:flex;gap:9px;align-items:flex-start;justify-self:start;max-width:96%}
.micah-msg-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px;box-shadow:0 0 0 2px #efbd3e;margin-top:2px}
.micah-msg-row .micah-msg{max-width:100%}
.micah-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.micah-chips:empty{display:none}
.micah-chip{border:1.5px solid #b7cdf2;background:#fff;color:#2456c4;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.micah-chip:hover{background:#eef3fd;border-color:#2f6df6}
#micah-question{border:2px solid #e2ac2c!important;border-radius:12px!important}
.micah-strip{display:flex;gap:4px;background:#f5f8fd;border-top:1px solid #e2eaf5;padding:15px 26px}
.micah-strip-item{flex:1;display:flex;gap:9px;align-items:flex-start;padding:2px 14px;min-width:0}
.micah-strip-item:first-child{padding-left:0}
.micah-strip-item + .micah-strip-item{border-left:1px solid #dde6f2}
.micah-strip .micah-strip-ic{font-size:16px;line-height:1.35;color:#2f5fd0}
.micah-strip b{display:block;font-size:13px;color:#12294d;line-height:1.3}
.micah-strip-item span{font-size:11.5px;color:#5d6f88;line-height:1.45;display:block}
@media(min-width:700px){
  .micah-path{flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;min-height:100px;padding:14px 36px 12px 14px;position:relative;gap:9px}
  .micah-path-arrow{display:block;position:absolute;right:12px;top:50%;transform:translateY(-50%);margin:0;font-size:20px}
}
@media(max-width:640px){
  .micah-strip{flex-direction:column;gap:10px}
  .micah-strip-item{padding:0}
  .micah-strip-item + .micah-strip-item{border-left:0}
  .micah-chat-admark{height:30px}
  .micah-chat-name-text{font-size:21px}
}


/* v7 — framed card: defined navy border + deeper shadow so the chat
   reads as a polished card with a border around its edges. */
.micah-chat-card{border:2px solid #10315f;box-shadow:0 24px 60px #10294b33}


/* v7 — Jonah's mobile mockup: "How can I help?" heading on small screens,
   2x2 icon-beside-label tiles, short repair chips in a 2-col grid with a
   "Popular repair questions" label, brighter blue, bigger face. */
.micah-hello{display:none}
.micah-chips-label{display:none}
.micah-chat-card .micah-primary{background:#2f6df6;border-color:#2f6df6}
.micah-path-active{background:linear-gradient(150deg,#3b78f7,#2b63e0)!important;border-color:#2b63e0!important}
.micah-embed .micah-powered{display:block}
@media(max-width:699px){
  .micah-hello{display:block;margin:20px 0 2px}
  .micah-hello h2{font-size:27px;font-weight:800;color:#0a2249;margin:0 0 3px;letter-spacing:-.01em}
  .micah-hello p{margin:0;color:#5d6f88;font-size:14.5px}
  .micah-paths{grid-template-columns:1fr 1fr}
  .micah-path{flex-direction:row;align-items:center;text-align:left;min-height:0;padding:13px 12px;gap:10px}
  .micah-path-arrow{display:none}
  .micah-chips{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .micah-chips-label{display:block;grid-column:1/-1;font-size:13px;font-weight:600;color:#5d6f88}
  .micah-chip{width:100%;text-align:center;padding:10px 8px;font-size:13.5px}
  .micah-chat-face{width:60px;height:60px;flex-basis:60px}
}


/* v8 — phone header + first-screen fit (from Jonah's screen recording):
   the header row was squeezing "MICAH AI" onto two lines and wrapping
   the subtitle; the question box and Ask button fell below the fold.
   Header elements are now sized/nowrap for phone widths, spacing is
   tightened, and the bottom strip gets hairline dividers when stacked. */
@media(max-width:699px){
  .micah-chat-head{padding:12px 14px;gap:8px}
  .micah-chat-face{width:54px;height:54px;flex-basis:54px}
  .micah-chat-ident{flex:1 1 auto;min-width:0}
  .micah-chat-name-text{font-size:18.5px;white-space:nowrap}
  .micah-chat-ident p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .micah-chat-admark{height:20px}
  .micah-embed-close{width:30px;height:30px;flex-basis:30px;margin-left:2px}
  .micah-guide{padding:20px 18px 22px}
  .micah-hello{margin:12px 0 0}
  .micah-paths{margin:14px 0 4px}
  .micah-chips{margin-top:8px}
  .micah-strip{padding:13px 18px}
  .micah-strip-item{padding:8px 0}
  .micah-strip-item + .micah-strip-item{border-top:1px solid #dde6f2}
}


/* v9 — app layout (Jonah's mobile spec): header / scrolling conversation /
   pinned composer. Only the conversation area scrolls; estimates, the
   protection section, the powered line and the info strip live inside it.
   Keyboard handling pairs with the visualViewport code in micah-chat.js
   (embed) and hd-brand.js (pop-up frame). */
.micah-chat-card{display:flex;flex-direction:column}
.micah-guide{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0}
.micah-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 28px 12px}
.micah-composer{flex:0 0 auto;padding:10px 28px 20px;border-top:1px solid #e4e9f2;background:#fff}
.micah-topicbar{display:none}
.micah-ready{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:12.5px;font-weight:600;color:#5d6f88}
.micah-ready-dot{width:8px;height:8px;border-radius:50%;background:#2fa84f;flex:0 0 8px}
.micah-send{display:none}
.micah-sub-short{display:none}
.micah-embed .micah-chat-section{overflow:hidden}
.micah-embed .micah-chat-container{height:100%}
.micah-embed .micah-chat-card{height:100%}
.micah-strip{margin:16px -28px -12px;border-radius:0}
@media(max-width:699px){
  .micah-chat-card{height:min(780px,calc(100dvh - 120px));min-height:380px}
  .micah-embed .micah-chat-card{height:100%;min-height:0}
  .micah-scroll{padding:4px 18px 10px}
  .micah-composer{padding:8px 18px 14px}
  .micah-strip{margin:14px -18px -10px}
  .micah-sub-full{display:none}
  .micah-sub-short{display:inline}
  #micah-question-form{display:flex;gap:10px;align-items:flex-end}
  #micah-question-form .micah-query-wrap{flex:1 1 auto}
  #micah-question-form .micah-primary{display:none}
  .micah-send{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;background:#2f6df6;color:#fff;cursor:pointer}
  .micah-guide textarea{font-size:16px;min-height:48px;border-radius:24px;resize:none}
  .micah-guide input{font-size:16px}
  .micah-topicbar{padding:10px 18px 0}
  .micah-conversing .micah-topicbar{display:flex;align-items:center;gap:10px}
  .micah-topicbar-pill{background:#e9f1fe;color:#17365c;font-weight:600;font-size:13px;border-radius:999px;padding:6px 12px}
  .micah-topicbar-change{margin-left:auto;background:none;border:0;color:#2f6df6;font-weight:600;font-size:13.5px;cursor:pointer;padding:4px 0;font-family:inherit}
  .micah-conversing:not(.micah-choosing) .micah-hello{display:none}
  .micah-conversing:not(.micah-choosing) .micah-paths{display:none}
  .micah-conversing .micah-ready{display:none}
}


/* v10 — embed height comes from the iframe element itself (100% chain:
   html -> body -> main -> section), never from viewport units. Inside an
   iframe on iOS, dvh / visualViewport heights can over-report, which pushed
   the pinned composer below the visible area (Jonah's 2026-10-28 recording:
   "Ready to help" visible, question box cut off, keyboard closed). */
.micah-embed main{height:100%}
.micah-embed .micah-chat-section{height:100%}


/* v11 — kill the iOS focus zoom for good. The question field is an
   input#micah-question whose 13px size is set by an ID rule in the guide
   stylesheet, which out-ranked the class-level 16px rule added earlier
   (that rule also targeted a textarea that does not exist in this form).
   iOS zooms on any focused control under 16px, so force 16px on every
   text control in the guide at phone widths. */
@media(max-width:699px){
  #micah-repair-guide input,#micah-repair-guide textarea,#micah-repair-guide select{font-size:16px!important}
}


/* v12 — header flush to the top of the pop-up (Jonah's instruction,
   2026-10-29): no padding or margin anywhere above the navy header inside
   the embed, the header itself carries the rounded top corners, and the
   card clips everything to the same rounded shape (overflow: hidden is
   already on the card). The embed card is also pinned to the section
   edges so no white band can appear above or below the chat. Spacing
   INSIDE the navy header is unchanged. */
html.micah-embed body,.micah-embed main,.micah-embed .micah-chat-section,.micah-embed .micah-chat-container{margin:0;padding:0}
.micah-embed .micah-chat-section{position:relative}
.micah-embed .micah-chat-card{position:absolute;inset:0;height:auto;margin:0;overflow:hidden}
.micah-chat-head{border-radius:24px 24px 0 0}


/* v13 — the white band, root-caused by measurement (2026-10-29): the
   site's banner-blend.css sets html body{padding-top:88px!important}
   (74px at <=800px) to clear the fixed site header. In the chat embed
   the header is hidden but that padding stayed, pushing the whole chat
   down inside the pop-up (measured: body padding-top 74px, chat head
   starting 74px below the window top). Zero it in embed mode with
   matching importance and higher specificity. */
html.micah-embed body{padding-top:0!important}


/* v14 — the embed document itself must never scroll or pan. iOS Safari
   can pan an iframe's document when a field inside it gains focus,
   sliding the chat up under the pop-up's top edge (Jonah's 2026-10-29
   phone screenshot: navy header clipped, white gap below the composer). */
html.micah-embed,html.micah-embed body{overflow:hidden!important;overscroll-behavior:none}


/* v15 — mobile only (Jonah 2026-10-29): drop the three-row info strip
   (Suggestions in CAD / Canadian focus / Not legal advice) so the phone
   chat sits smaller; the strip still shows on desktop, and the legal
   topic's own greeting keeps its not-legal-advice line. */
@media(max-width:699px){
  .micah-strip{display:none}
}