/* Ask a Mechanic: the chat's look, shared by the customer's page (/chat/) and the admin's Messages.
   Bubbles: yours on the right in red, theirs on the left in glass. Vehicle cards, photo thumbnails, day lines.
   The customer's page fills the screen between the app's top bar and bottom bar on phones, and sits in one glass
   panel on computers. */
.cx-scope, .cx-page, .cx-view {
  --cx-red: #ff2d2d;
  --cx-red-2: #d90000;
  --cx-text: #f4f4f6;
  --cx-dim: rgba(244, 244, 246, 0.66);
  --cx-dim-2: rgba(244, 244, 246, 0.42);
  --cx-edge: rgba(255, 255, 255, 0.12);
  --cx-glass: rgba(255, 255, 255, 0.07);
  --cx-glass-2: rgba(255, 255, 255, 0.11);
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the message list ---------- */
.cx-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 3px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.cx-thread > :first-child { margin-top: auto; }
.cx-day { display: flex; justify-content: center; margin: 14px 0 8px; }
.cx-day span { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--cx-dim); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; }
.cx-row { display: flex; flex-direction: column; max-width: min(78%, 520px); }
.cx-row.is-me { align-self: flex-end; align-items: flex-end; }
.cx-row.is-them { align-self: flex-start; align-items: flex-start; }
.cx-row.is-pending { opacity: 0.6; }
.cx-bub { padding: 9px 13px; border-radius: 19px; font-size: 0.98rem; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cx-text); }
.is-me .cx-bub { background: linear-gradient(180deg, #ff4141, #d40000); color: #fff; border-bottom-right-radius: 6px; }
.is-them .cx-bub { background: var(--cx-glass-2); border: 1px solid var(--cx-edge); border-bottom-left-radius: 6px; }
.cx-bub a { color: inherit; text-decoration: underline; }
.cx-bub.is-auto { background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.2); color: var(--cx-dim); }
.is-me .cx-bub.is-auto { background: rgba(255, 255, 255, 0.05); color: var(--cx-dim); }
.cx-bub.is-auto small { display: block; margin-bottom: 2px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-dim-2); }
.cx-time { margin: 3px 6px 8px; font-size: 0.7rem; color: var(--cx-dim-2); }
.cx-retry { color: #ff8a8a; font: inherit; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; }
.cx-none { margin: auto; color: var(--cx-dim); text-align: center; padding: 30px 10px; }

/* a vehicle card: the car, the engine, what's going on */
.cx-veh { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--cx-text); min-width: 210px; }
.is-me .cx-veh { border-color: rgba(255, 70, 70, 0.5); background: rgba(255, 45, 45, 0.1); }
.cx-veh-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 45, 45, 0.16); color: #ff6b6b; }
.cx-veh-txt { min-width: 0; }
.cx-veh-txt b { display: block; font-size: 1rem; color: #fff; }
.cx-veh-txt small { display: block; color: var(--cx-dim); font-size: 0.8rem; }
.cx-veh-txt p { margin: 6px 0 0; font-size: 0.93rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }

/* a photo: a small copy in the list, tap for the full one */
.cx-photo { display: block; width: min(230px, 62vw); max-height: 300px; padding: 0; border: 1px solid var(--cx-edge); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, 0.06); cursor: zoom-in; }
.cx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- the box you type in ---------- */
.cx-compose { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cx-edge); background: rgba(10, 10, 12, 0.92); }
.cx-compose textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 132px; padding: 10px 14px; border-radius: 21px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 16px; line-height: 1.35; resize: none; outline: none; overflow-y: hidden; scrollbar-width: thin; }
.cx-compose textarea:focus { border-color: rgba(255, 70, 70, 0.7); }
.cx-compose textarea:disabled { opacity: 0.5; }
.cx-cbtn, .cx-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; }
.cx-cbtn { background: rgba(255, 255, 255, 0.08); color: var(--cx-dim); }
.cx-send { background: linear-gradient(180deg, #ff4a4a, #d90000); color: #fff; }
.cx-cbtn:disabled, .cx-send:disabled { opacity: 0.4; cursor: default; }
.cx-cbtn:not(:disabled):active, .cx-send:not(:disabled):active { transform: scale(0.94); }

/* a note above the box: closed, off, blocked */
.cx-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--cx-edge); background: rgba(255, 196, 0, 0.07); color: #ffe08a; font-size: 0.88rem; line-height: 1.4; }
.cx-note.is-off { background: rgba(255, 45, 45, 0.08); color: #ffb0b0; }
.cx-note b { color: #fff; }
.cx-note a { margin-left: auto; flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 800; font-size: 0.82rem; text-decoration: none; }

/* ---------- full-screen photo ---------- */
.cx-view { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overflow: hidden; }
.cx-view::backdrop { background: #000; }
.cx-view-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; touch-action: none; overflow: hidden; }
.cx-view-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: center center; user-select: none; -webkit-user-drag: none; will-change: transform; }
.cx-view-x { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(40, 40, 44, 0.8); color: #fff; cursor: pointer; }
html.cx-viewing { overflow: hidden; }

/* =====================================================================
   THE CUSTOMER'S PAGE (/chat/)
   ===================================================================== */
.cx-chat-hero { padding-bottom: 0; }
.cx-page { display: flex; flex-direction: column; max-width: 760px; height: min(740px, calc(100vh - 300px)); min-height: 470px; margin: 22px auto 0; border-radius: 26px; overflow: hidden; background: rgba(14, 14, 17, 0.72); border: 1px solid rgba(255, 255, 255, 0.13); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.38); color: var(--cx-text); }
.cx-page > [hidden] { display: none !important; }
.cx-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cx-loading { margin: auto; color: var(--cx-dim); }

/* the conversation's header: who you're talking to, open or closed, Call, more */
.cx-head { flex: none; display: flex; align-items: center; gap: 11px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--cx-edge); background: rgba(12, 12, 14, 0.6); }
.cx-head img { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.cx-head-txt { min-width: 0; flex: 1; }
.cx-head-txt b { display: block; color: #fff; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-head-txt small { display: flex; align-items: center; gap: 6px; color: var(--cx-dim); font-size: 0.78rem; }
.cx-head-txt small > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-dot { flex: none; }
.cx-dot { width: 8px; height: 8px; border-radius: 50%; background: #9a9aa2; }
.cx-dot.is-open { background: #30d158; box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.18); }
.cx-hbtn { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--cx-edge); color: #fff; cursor: pointer; text-decoration: none; }
.cx-hbtn.is-red { background: linear-gradient(180deg, #ff4a4a, #d90000); border-color: transparent; }

/* starting a chat: the car, then how to reach you */
.cx-start { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 24px; }
.cx-step { display: grid; align-content: start; gap: 14px; }
.cx-steps { display: flex; gap: 6px; margin-bottom: 4px; }
.cx-steps span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.cx-steps span.is-on { background: var(--cx-red); }
.cx-start h1 { font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.01em; }
.cx-start .cx-lead { color: var(--cx-dim); font-size: 0.95rem; line-height: 1.45; margin-top: -8px; }
.cx-vehicle { display: grid; gap: 12px; }
.cx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cx-start .ff select, .cx-start .ff input, .cx-sheet .ff select, .cx-sheet .ff input { min-height: 50px; }
.cx-start .ff select:disabled, .cx-sheet .ff select:disabled { opacity: 0.5; }
.cx-start .ff input[name=makeText], .cx-start .ff input[name=modelText], .cx-sheet .ff input[name=makeText], .cx-sheet .ff input[name=modelText] { margin-top: 6px; }
.cx-start .ff textarea, .cx-sheet .ff textarea { min-height: 96px; }
.cx-start .err:empty, .cx-sheet .err:empty { display: none; }
.cx-start .ts { min-height: 65px; }
.cx-acts { display: grid; gap: 10px; margin-top: 4px; }
.cx-btn { display: grid; place-items: center; width: 100%; min-height: 52px; border-radius: 15px; border: 0; background: linear-gradient(180deg, #ff4a4a, #d90000); color: #fff; font: inherit; font-weight: 800; font-size: 1.02rem; cursor: pointer; text-decoration: none; box-shadow: 0 4px 14px rgba(255, 45, 45, 0.2); }
.cx-btn:disabled { opacity: 0.6; cursor: wait; }
.cx-btn.is-glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: none; }
.cx-link { justify-self: start; padding: 6px 0; background: none; border: 0; color: #ff7a7a; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.cx-status { font-weight: 600; color: #ff8a8a; }
.cx-status:empty { display: none; }
.cx-fixed { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--cx-edge); color: var(--cx-dim); font-size: 0.92rem; }
.cx-fixed b { color: #fff; }
.cx-closed { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(255, 196, 0, 0.08); border: 1px solid rgba(255, 196, 0, 0.28); color: #ffe08a; font-size: 0.92rem; line-height: 1.45; }
.cx-closed b { color: #fff; }
.cx-closed .cx-btn { min-height: 44px; font-size: 0.95rem; }

/* pick lists (Year, Make, Model, Engine size): a dark button, then a dark list with the choice ticked in red */
.cx-sel-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.ff { position: relative; }
.cx-sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(10, 10, 12, 0.7); color: #fff; font: inherit; font-size: 1rem; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.cx-sel span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-sel.is-empty span { color: rgba(244, 244, 246, 0.5); }
.cx-sel-chev { flex: none; color: #ff4d4d; }
.cx-sel:focus-visible, .cx-sel[aria-expanded="true"] { outline: none; border-color: var(--cx-red, #ff2d2d); box-shadow: 0 0 0 3px rgba(255, 45, 45, 0.25); }
.cx-sel:disabled { opacity: 0.45; cursor: default; }
.cx-sel:disabled .cx-sel-chev { color: rgba(244, 244, 246, 0.5); }
.ff.is-error .cx-sel { border-color: #ff6b6b; }
.cx-pick .cx-sheet-in { max-height: min(640px, 80vh); }
.cx-pick-search { padding: 0 18px 10px; }
.cx-pick-search input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 16px; outline: none; }
.cx-pick-search input:focus { border-color: rgba(255, 70, 70, 0.7); }
.cx-pick-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 10px calc(14px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.cx-pick-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--cx-text, #f4f4f6); font: inherit; font-size: 1.02rem; text-align: left; cursor: pointer; }
.cx-pick-opt + .cx-pick-opt { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07); }
.cx-pick-opt:hover { background: rgba(255, 255, 255, 0.06); }
.cx-pick-opt:active { background: rgba(255, 255, 255, 0.1); }
.cx-pick-opt.is-on { background: rgba(255, 45, 45, 0.14); color: #fff; font-weight: 700; box-shadow: none; }
.cx-pick-opt.is-on + .cx-pick-opt { box-shadow: none; }
.cx-pick-opt svg { flex: none; color: #ff4d4d; }
.cx-pick-none { padding: 18px 12px; color: var(--cx-dim, rgba(244, 244, 246, 0.66)); }

/* chat is off, or an admin is looking */
.cx-msg { margin: auto; max-width: 420px; padding: 30px 22px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.cx-msg .cx-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(255, 45, 45, 0.12); border: 1px solid rgba(255, 45, 45, 0.4); color: #ff6b6b; }
.cx-msg .cx-ic .ti { width: 34px; height: 34px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.cx-msg h2 { font-size: 1.35rem; }
.cx-msg p { color: var(--cx-dim); line-height: 1.5; }
.cx-msg .cx-acts { width: 100%; }

/* the ••• menu and the "another vehicle" form */
.cx-sheet { width: min(480px, calc(100vw - 2rem)); max-height: 88vh; margin: auto; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; background: rgba(16, 16, 19, 0.98); color: var(--cx-text); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.cx-sheet::backdrop { background: rgba(0, 0, 0, 0.6); }
.cx-sheet-in { display: flex; flex-direction: column; max-height: 88vh; }
.cx-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.cx-sheet-top h2 { font-size: 1.2rem; }
.cx-sheet-x { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cx-edge); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.cx-sheet-body { overflow-y: auto; padding: 0 18px 20px; display: grid; gap: 12px; }
.cx-menu { display: grid; border-radius: 18px; overflow: hidden; border: 1px solid var(--cx-edge); }
.cx-menu button, .cx-menu a { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 54px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--cx-edge); background: rgba(255, 255, 255, 0.04); color: var(--cx-text); font: inherit; font-weight: 700; font-size: 0.98rem; text-align: left; cursor: pointer; text-decoration: none; }
.cx-menu > :last-child { border-bottom: 0; }
.cx-menu svg { flex: none; color: var(--cx-dim); }
.cx-menu small { display: block; font-weight: 500; color: var(--cx-dim); font-size: 0.8rem; }
.cx-menu .is-on svg { color: #30d158; }
.cx-earlier { align-self: center; margin: 6px 0 2px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--cx-dim); font-size: 0.8rem; text-decoration: none; }
.cx-earlier b { color: #ff8a8a; }

/* inside the computer's chat bubble (/chat/?embed=1): only the chat, filling the little window */
html.is-embed .site-head, html.is-embed .site-foot, html.is-embed .app-top, html.is-embed .app-tabs, html.is-embed .cx-chat-hero,
html.is-embed .chat-fab, html.is-embed .skip { display: none !important; }
html.is-embed body { padding: 0; min-height: 0; background: #0b0b0d; }
html.is-embed body::before { display: none; }
html.is-embed .cx-page { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: none; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #0b0b0d; }
html.is-embed .cx-start h1 { font-size: 1.3rem; }
html.is-embed .cx-step[data-step="1"] > h1 { display: none; } /* the little window's own title already says it */

@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-device-width: 820px) {
  /* phones: the whole screen between the two bars; while typing, the bottom bar steps aside and the box rides on the keyboard */
  .cx-page { position: fixed; top: calc(var(--head-h, 58px) + env(safe-area-inset-top, 0px)); bottom: calc(var(--tabs-h, 54px) + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; z-index: 20; max-width: none; height: auto; min-height: 0; margin: 0; border-radius: 0; border: 0; background: rgba(8, 8, 10, 0.55); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body:has(.cx-page textarea:focus, .cx-page input:focus, .cx-page select:focus) .cx-page { bottom: 0; }
  body:has(.cx-page textarea:focus) .cx-compose { padding-bottom: 8px; }
  .cx-compose { padding-bottom: 8px; }
  .cx-thread { padding: 10px 12px 6px; }
  .cx-row { max-width: 82%; }
  .cx-start { padding: 18px 16px 22px; }
  .cx-sheet { width: 100%; max-width: none; max-height: 90vh; margin: auto 0 0; border-radius: 24px 24px 0 0; border-width: 1px 0 0; }
  .cx-sheet-body { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .cx-chat-hero { display: none; }
}