:root { --navy: #06345f; --aqua: #18aeba; --gold: #c48a3a; --online-green: #1c9d59; }
  .jarvis-page, .jarvis-page * { box-sizing: border-box; }
  .jarvis-page { font-family: Arial, sans-serif; color: #14324a; }

  /* Root wrapper -- no background image here on purpose; that's being
     added manually outside this widget now. Structure/flex layout stays
     the same either way.
     Height is fixed to the viewport on every device so the chat-window
     scrolls internally as a conversation grows instead of the whole page
     getting taller. Desktop is overflow:hidden (no page scroll at all) --
     spacing throughout is tightened specifically so the static layout
     fits without it. Mobile keeps overflow-y:auto as a safety net in case
     a large custom logo or similar still makes the static content taller
     than a particular phone's viewport. Kiosk stays overflow:hidden,
     unchanged. */
  .jarvis-page {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  @media (max-width: 768px) {
    .jarvis-page {
      /* position:fixed + inset:0 pulls the widget out of the host page's
         own container padding/margin -- previously .jarvis-page was just
         position:relative, which stays inside whatever box the host site
         (Wix) wraps it in, so that container's own side/bottom padding
         showed through as strips of the DESKTOP background around this
         phone-only image. Fixed positioning is sized off the real
         viewport instead, ignoring that ancestor padding entirely, so
         this background now genuinely fills the physical screen edge to
         edge. z-index kept low (below every real overlay -- signin/
         addhome/idle/rotate/night all sit much higher) just enough to
         sit above ordinary host page content that isn't otherwise
         positioned. */
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100dvh;
      max-height: 100dvh;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 1;
      /* Portrait-optimized background baked in for phones only -- the
         .jarvis-page fills the viewport, so this sits over whatever
         landscape background the host site applies for desktop. */
      background: url('https://de.cdn-website.com/f2fed7dfb198437094e33f28de30b6df/dms3rep/multi/ChatGPT+Image+Jun+26-+2026-+08_45_22+AM.png') center / cover no-repeat;
    }
  }
  body.jarvis-kiosk .jarvis-page { height: 100dvh; overflow: hidden; }

  /* ---------- Top bar: centered logo, home button pinned far right ---------- */
  /* Logo is absolutely centered (not flex space-between) so it stays dead
     center regardless of whether the home button is present -- important
     since the tablet hides that button entirely but should still get a
     centered logo. */
  .jarvis-topbar {
    position: relative;
    flex-shrink: 0;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 30px 0;
  }
  .jarvis-logo-img {
    width: 620px;
    height: 230px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.2));
  }
  .jarvis-home-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid var(--aqua);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 24px;
    color: var(--navy);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
  }
  /* No nav at all on the guesthouse tablet -- just the logo */
  body.jarvis-kiosk .jarvis-home-btn { display: none; }

  /* ---------- Shell: identity panel + chat card ---------- */
  .jarvis-container {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    max-width: 1700px; width: 94%;
    margin: 0 auto;
    padding: 2px 24px 10px;
  }
  .jarvis-shell { flex: 1; min-height: 0; display: flex; gap: 36px; }
  .jarvis-identity { flex: 0 0 230px; text-align: center; padding-top: 6px; }
  .jarvis-photo-ring {
    width: 140px; height: 140px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--aqua), 0 16px 40px rgba(0,0,0,.28);
  }
  .jarvis-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

  /* Active-call visuals for the photo ring are handled entirely by the
     AVATAR STAGE v3 clip-video state machine further down in this file
     (idle rotation -> turn-to-guest -> clip3-idle-facing loop while
     talking -> turn-away). No CSS overlay is needed here. */

  /* Hidden by default -- occupies the exact same slot as
     #jarvisSignInBtn right below the photo, and JS shows only one of
     the two at a time (see initSignInButton / applyGuestControlAccess).
     Tablets get it back unconditionally further down
     (body.jarvis-kiosk #jarvisOnlinePill), since they never show the
     sign-in button at all. */
  .jarvis-online-pill {
    display: none; align-items: center; gap: 6px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(28,157,89,.35);
    color: var(--online-green);
    font-weight: 700; font-size: 12px;
    padding: 4px 12px; border-radius: 999px;
    margin-bottom: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.1);
  }
  .jarvis-online-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--online-green); display: inline-block; }

  /* ---------- Personal-device sign-in (phone number) ---------- */
  /* Small optional pill sitting right under the Online pill -- deliberately
     understated (this is a perk a guest can ignore, not a gate they have
     to clear) and hidden entirely on tablets via JS at init, since tablets
     already know who's on them without asking. Two visual states: the
     default invite, and a "signed in" confirmation once linked -- both use
     the same element/onclick so re-tapping after signing in lets a guest
     switch profiles (different phone) without any separate control. */
  #jarvisSignInBtn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(24,174,186,.4);
    color: var(--navy);
    font-weight: 700; font-size: 11px;
    padding: 4px 12px; border-radius: 999px;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  #jarvisSignInBtn.signed-in { color: var(--online-green); border-color: rgba(28,157,89,.4); }
  #jarvisSignInBtn.hidden-tablet { display: none; }

  .jarvis-signin-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 100010;
    background: rgba(6,25,40,.55);
    backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 20px;
  }
  .jarvis-signin-overlay.visible { display: flex; }
  .jarvis-signin-card {
    background: #fff;
    border-radius: 22px;
    padding: 26px 24px;
    max-width: 340px; width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
  }
  .jarvis-signin-card h3 { font-size: 17px; color: var(--navy); margin: 0 0 6px; font-weight: 900; }
  .jarvis-signin-card p { font-size: 13px; color: #46586b; line-height: 1.5; margin: 0 0 16px; }
  #jarvisSignInInput {
    width: 100%; box-sizing: border-box;
    height: 46px; border-radius: 12px;
    border: 2px solid rgba(24,174,186,.3);
    padding: 0 14px; font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
  }
  #jarvisSignInInput:focus { outline: none; border-color: var(--aqua); }
  .jarvis-signin-submit {
    width: 100%; height: 46px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--navy), var(--aqua));
    color: #fff; font-weight: 800; font-size: 15px;
    cursor: pointer; margin-bottom: 8px;
  }
  .jarvis-signin-submit:disabled { opacity: .6; }
  .jarvis-signin-skip {
    background: none; border: none; color: #7c8a96;
    font-size: 12px; cursor: pointer; padding: 6px;
  }
  .jarvis-signin-status { font-size: 12px; margin-top: 4px; min-height: 16px; color: #21424f; }
  .jarvis-signin-status.error { color: #c62828; }

/* ===== Add-to-Home-Screen onboarding overlay (guest mobile access) =====
   Same visual pattern as .jarvis-signin-overlay above -- deliberately
   reuses that look so it reads as part of the same product rather than
   a bolted-on extra step. */
.jarvis-addhome-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 100020;
    background: rgba(6,25,40,.6);
    backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 20px;
}
.jarvis-addhome-overlay.visible { display: flex; }
.jarvis-addhome-card {
    background: #fff;
    border-radius: 22px;
    padding: 28px 24px;
    max-width: 360px; width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.jarvis-addhome-card h3 { font-size: 18px; color: var(--navy); margin: 0 0 4px; font-weight: 900; }
.jarvis-addhome-card p { font-size: 13px; color: #46586b; line-height: 1.6; margin: 0 0 8px; }
.jarvis-addhome-steps {
    text-align: left;
    background: rgba(24,174,186,.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 14px 0 18px;
    font-size: 13px;
    color: #21424f;
    line-height: 1.9;
}
.jarvis-addhome-steps b { color: var(--navy); }
#jarvisGuestNameInput {
    width: 100%; box-sizing: border-box;
    height: 46px; border-radius: 12px;
    border: 2px solid rgba(24,174,186,.3);
    padding: 0 14px; font-size: 16px;
    margin-bottom: 14px;
    text-align: center;
}
#jarvisGuestNameInput:focus { outline: none; border-color: var(--aqua); }
/* ===== Guest mobile-access control icon row =====
   Lives INSIDE .jarvis-identity-textbox now (moved there in the HTML)
   rather than floating in its own translucent bar over the hero photo
   -- reads as one clean, unified card instead of a separate element
   sitting on top of the background image. Hidden by default; JS adds
   .visible once a guest's QR token is redeemed. Each icon gets its own
   pastel tint (matching the same per-feature colors used elsewhere:
   AC blue, laundry green, door orange) instead of one flat white-on-
   white row, which is what read as "tacky" floating over the photo. */
.jarvis-guest-control-bar {
  display: none;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  margin: 16px 0 2px;
}
.jarvis-guest-control-bar.visible { display: flex; }
.jarvis-guest-control-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.jarvis-guest-control-item span {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}
.jarvis-guest-control-bar button {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(6,52,95,.08);
  font-size: 19px;
  color: var(--navy);
  background: rgba(255,255,255,.96);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(6,52,95,.12);
  display: flex; align-items: center; justify-content: center;
}
.jarvis-guest-control-bar button svg { width: 22px; height: 22px; display: block; }
#jarvisGuestCallBtn.listening,
#jarvisGuestCallBtn.conversation-active {
  color: #fff;
  background: rgba(198,40,40,.92);
}
#jarvisGuestCallBtn.listening { animation: pulse 1s infinite; }
#jarvisGuestCallBtn.conversation-active:not(.listening) {
  box-shadow: 0 0 0 3px rgba(24,174,186,.45), 0 0 16px rgba(24,174,186,.45);
  animation: conversationGlow 1.6s ease-in-out infinite;
}

/* ===== Guest compact mode =====
   Added to <body> only for a redeemed guest mobile-access session (see
   applyGuestControlAccess) -- tablets and ordinary browsing are
   untouched. Shrinks the identity card (hides the subtitle/tagline,
   tightens spacing) now that it also holds the icon row, and gives the
   chat window more room so "Call Jarvis" naturally sits lower on the
   page instead of everything feeling cramped at the top. */
/* Subtitle/tagline stay visible now (the mockup keeps them) -- this
   used to hide them for guest sessions specifically, but that's no
   longer what's wanted, so this block just handles chat sizing now. */
.jarvis-guest-compact .jarvis-identity-textbox {
  padding-top: 10px;
  padding-bottom: 12px;
}


.jarvis-addhome-close {
    width: 100%; height: 44px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--navy), var(--aqua));
    color: #fff; font-weight: 800; font-size: 14px;
    cursor: pointer;
}

  /* Frosted panel behind the greeting/role/tagline text -- guarantees
     legibility against a busy photo background regardless of what part
     of the photo happens to sit behind it (text-shadow alone wasn't
     reliable enough across different background regions/devices). */
  .jarvis-identity-textbox {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.65);
    padding: 16px 14px 18px;
    box-shadow: 0 8px 26px rgba(0,0,0,.1);
  }
  .jarvis-greeting-text { font-family: Georgia, 'Times New Roman', serif; font-size: 34px; font-weight: 700; color: var(--navy); margin: 0 0 4px; line-height: 1.15; letter-spacing: .5px; }
  .jarvis-role-text { font-size: 12px; font-weight: 800; color: #0d8a96; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 2px; }
  .jarvis-tagline-text { font-size: 13px; color: #21424f; line-height: 1.5; margin: 0; }

  .jarvis-card {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    border: 1px solid rgba(24,174,186,.15);
  }
  .chat-window { flex: 1; min-height: 150px; overflow-y: auto; padding-right: 6px; margin-bottom: 8px; }
  .jarvis-message { position: relative; background: #fff; padding: 14px 18px; border-radius: 4px 18px 18px 18px; margin: 0 0 15px 52px; line-height: 1.6; max-width: calc(85% - 52px); width: fit-content; box-shadow: 0 2px 10px rgba(6,52,95,.08); }
  .jarvis-message::before { content: ''; position: absolute; left: -52px; top: 0; width: 40px; height: 40px; border-radius: 50%; background: url('https://de.cdn-website.com/f2fed7dfb198437094e33f28de30b6df/dms3rep/multi/Gemini_Generated_Image_t2rz42t2rz42t2rz.png') center/cover no-repeat; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
  /* Direct messages from the owner ride the same bubble styling but the
     side avatar is Jason's own photo, not Jarvis's. */
  .jarvis-message.jarvis-owner-msg::before { background-image: url('https://de.cdn-website.com/f2fed7dfb198437094e33f28de30b6df/dms3rep/multi/ChatGPT+Image+Jun+14-+2026-+09_15_48+AM.png'); }
  /* Group peers: neutral gradient circle instead of anyone's photo. */
  .jarvis-message.jarvis-peer-msg::before { background: linear-gradient(135deg, #9fc4d0, #6d9fb0); }
  .guest-message { background: linear-gradient(135deg, #0d5068, var(--navy)); color: white; padding: 14px 18px; border-radius: 18px 18px 4px 18px; margin-bottom: 15px; margin-left: auto; max-width: 85%; width: fit-content; box-shadow: 0 4px 14px rgba(6,52,95,.18); }
  .msg-time { font-size: 11px; font-weight: 600; color: #5f7181; margin: -9px 6px 14px 58px; }
  .msg-time.guest-time { text-align: right; margin-left: 0; margin-right: 4px; }
  .msg-time .msg-ticks { color: var(--aqua); letter-spacing: -1px; }

  /* ---------- Quick-action buttons (primary 6 + collapsible secondary 6) ---------- */
  .topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 5px; flex-shrink: 0; }
  .topic-grid.secondary { display: none; margin-top: 6px; }
  .topic-grid.secondary.visible { display: grid; }
  .topic-grid button { border: none; background: white; padding: 10px 8px; border-radius: 14px; font-size: 13px; font-weight: 700; color: var(--navy); box-shadow: 0 6px 16px rgba(0,0,0,.07); cursor: pointer; transition: .2s; }
  .topic-grid button:hover { transform: translateY(-3px); }

  .input-bar { display: flex; gap: 10px; margin-top: 2px; flex-shrink: 0; }
  .input-pill { flex: 1; min-width: 0; display: flex; align-items: center; background: #fff; border-radius: 999px; border: 1px solid #e2eaef; box-shadow: 0 4px 14px rgba(6,52,95,.08); padding: 0 6px 0 4px; }
  .input-bar input { flex: 1; min-width: 0; padding: 14px 8px 14px 2px; font-size: 17px; border: none; border-radius: 999px; background: transparent; outline: none; }
  #jarvisInputMicBtn { flex: 0 0 40px; width: 40px; height: 48px; border: none; background: none; padding: 0; color: #5f7181; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  #jarvisInputMicBtn svg { width: 20px; height: 20px; }
  .input-bar input:disabled { background: transparent; color: #9aa7ae; }
  .input-bar button { padding: 14px 28px; border: none; border-radius: 16px; font-size: 17px; font-weight: 800; color: white; background: linear-gradient(135deg, var(--navy), var(--aqua)); cursor: pointer; }
  .input-bar button:disabled { opacity: .6; cursor: default; }
  #jarvisSendButton { flex: 0 0 52px; width: 52px; height: 52px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--aqua), #0d7a8a); box-shadow: 0 6px 16px rgba(24,174,186,.35); }
  #jarvisSendButton svg { width: 22px; height: 22px; margin-right: 2px; }
  /* Mic button removed from the UI on every device now -- the Call
     Jarvis / End Conversation button below does both jobs everywhere,
     not just on mobile. Kept in the DOM (just hidden) since the realtime
     JS still updates its icon/classes internally; that's harmless when
     it's invisible. */
  #jarvisMicButton {
    display: none;
    width: 60px;
    padding: 18px;
    font-size: 22px;
    flex: 0 0 auto;
  }
  #jarvisMicButton.listening {
    background: #c62828;
    animation: pulse 1s infinite;
  }
  #jarvisMicButton.conversation-active:not(.listening) {
    box-shadow: 0 0 0 3px rgba(24,174,186,.55), 0 0 16px rgba(24,174,186,.5);
    animation: conversationGlow 1.6s ease-in-out infinite;
  }
  @keyframes conversationGlow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(24,174,186,.4), 0 0 12px rgba(24,174,186,.3); }
    50% { box-shadow: 0 0 0 3px rgba(24,174,186,.7), 0 0 20px rgba(24,174,186,.6); }
  }
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  /* Legacy full-width Call Jarvis button is retired. The fifth guest
     control icon now owns this action, but this defensive rule keeps any
     stale cached HTML from showing the old bar under the chat. */
  #jarvisEndConversation { display: none !important; }

  /* ---------- Wake word ("Jarvis") toggle ---------- */
  /* Small pill sitting in the topbar next to the home button. Green/lit
     when the browser is actively listening for the wake word, dim grey
     when off. Guests/owners tap it to turn hands-free listening on or
     off -- see the wake-word JS section for why this can't just always
     run silently in the background on iOS. */
  #jarvisWakeToggle {
    position: absolute;
    right: 30px;
    top: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    border: 2px solid rgba(24,174,186,.5);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
    font-size: 12px;
    font-weight: 800;
    color: var(--navy);
    cursor: pointer;
    z-index: 5;
  }
  #jarvisWakeToggle .wake-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #9aa7ae;
    flex-shrink: 0;
    transition: background .2s, box-shadow .2s;
  }
  #jarvisWakeToggle.on .wake-dot {
    background: var(--online-green);
    box-shadow: 0 0 8px rgba(28,157,89,.8);
    animation: wakeDotBreathe 2.4s ease-in-out infinite;
  }
  @keyframes wakeDotBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
  }
  #jarvisWakeToggle.unsupported { display: none; }
  @media (max-width: 768px) {
    #jarvisWakeToggle { right: 4px; top: 4px; padding: 6px 10px 6px 8px; font-size: 10px; }
    #jarvisWakeToggle .wake-dot { width: 8px; height: 8px; }
  }
  /* Kiosk topbar reserves its top ~56px for the kiosk app's own status
     bar (see the .jarvis-topbar padding comment above) -- anything placed
     above that line is physically covered by the kiosk chrome and can't
     be seen or tapped. This sits just below that line instead, roughly
     where the (hidden, on kiosk) home button would otherwise be. */
  body.jarvis-kiosk #jarvisWakeToggle { right: 20px; top: 58px; padding: 6px 11px 6px 8px; font-size: 11px; }

  /* ---------- Alexa/Echo-style bottom light bar ---------- */
  /* Hidden entirely until a live voice conversation is actually happening
     (wake-word arming itself stays invisible -- this is only "talking and
     listening", not "standing by"). A moving gradient sweep gives it the
     same sense of motion as an Echo/Nest light ring without trying to
     fake an actual ring on a rectangular screen. */
  #jarvisVoiceBar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 10px;
    z-index: 100001;
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity .25s ease, transform .25s ease;
    background: linear-gradient(90deg, #0b4f87, #18aeba, #7fe3ec, #18aeba, #0b4f87);
    background-size: 300% 100%;
    box-shadow: none;
  }
  #jarvisVoiceBar.active { display: block; opacity: 1; transform: translateY(0); }
  #jarvisVoiceBar:not(.active) { display: none !important; opacity: 0 !important; box-shadow: none !important; animation: none !important; }
  #jarvisVoiceBar.state-connecting { animation: jarvisBarSweep 2.6s linear infinite, jarvisBarGlowSoft 2.6s ease-in-out infinite; }
  #jarvisVoiceBar.state-listening { height: 14px; animation: jarvisBarSweep 1s linear infinite, jarvisBarGlowHard 1s ease-in-out infinite; }
  #jarvisVoiceBar.state-speaking { height: 14px; animation: jarvisBarSweep 1.4s linear infinite, jarvisBarGlowHard 1.4s ease-in-out infinite; }
  @keyframes jarvisBarSweep {
    0% { background-position: 0% 0; }
    100% { background-position: 300% 0; }
  }
  @keyframes jarvisBarGlowSoft {
    0%, 100% { box-shadow: 0 0 10px rgba(24,174,186,.5); }
    50% { box-shadow: 0 0 20px rgba(24,174,186,.85); }
  }
  @keyframes jarvisBarGlowHard {
    0%, 100% { box-shadow: 0 0 16px rgba(24,174,186,.75); }
    50% { box-shadow: 0 0 30px rgba(127,227,236,1); }
  }
  body.jarvis-kiosk #jarvisVoiceBar { height: 14px; }
  body.jarvis-kiosk #jarvisVoiceBar.state-listening,
  body.jarvis-kiosk #jarvisVoiceBar.state-speaking { height: 20px; }

  /* ---------- Mobile (personal devices, narrow viewport) ---------- */
  @media (max-width: 768px) {
    /* Shrunk hard from the original size (110px/420x186 logo) -- the
       logo alone was eating more vertical space than everything else
       on the page combined, on a screen with much less of it to begin
       with. .chat-window below is flex:1 (fills whatever's actually
       left over, same pattern desktop/kiosk already use successfully)
       rather than a forced height, so freeing up room HERE is what
       actually gives it more room, not fighting it with a min-height
       that doesn't know how tall any given phone's viewport is. */
    .jarvis-topbar { min-height: 40px; padding: 2px 10px 0; }
    .jarvis-logo-img { width: 240px; height: 107px; }
    .jarvis-home-btn { right: 2px; top: 42px; width: 36px; height: 36px; font-size: 16px; }
    .jarvis-container { flex: 1; min-height: 0; overflow: hidden; padding: 4px 2px calc(8px + env(safe-area-inset-bottom)); width: 100%; }
    .jarvis-shell { flex: 1; min-height: 0; overflow: hidden; flex-direction: column; align-items: center; gap: 0; }
    .jarvis-identity { flex: 0 0 auto; padding-top: 8px; width: 100%; }
    .jarvis-photo-ring { width: 72px; height: 72px; border-width: 3px; margin: 0 auto 0; position: relative; z-index: 3; }
    .jarvis-online-pill { margin-bottom: 0; padding: 2px 9px; font-size: 10px; }
    #jarvisSignInBtn { margin-bottom: 0; padding: 3px 10px; font-size: 10px; }
    /* Identity box and chat card are drawn as ONE continuous card on
       mobile: same background, top corners on the identity box, bottom
       corners on the chat card, and the shared edge de-bordered and
       de-shadowed so no seam shows where they meet.
       Padding here is trimmed tighter than the original (top/bottom
       especially) -- this box's photo/text/icon sizes are back to their
       original size, only the empty space AROUND them is squeezed, which
       is what actually shrinks this card's total height and hands that
       room to the chat window right below it (.jarvis-identity is
       flex: 0 0 auto, .jarvis-card is flex: 1). */
    .jarvis-identity-textbox { padding: 2px 10px 2px; border-radius: 22px 22px 0 0; border-bottom: none; background: rgba(255,255,255,.66); box-shadow: none; }
    .jarvis-greeting-text { font-size: 24px; margin: 0; line-height: 1; }
    .jarvis-role-text { font-size: 10px; margin-bottom: 1px; letter-spacing: 2px; }
    .jarvis-tagline-text { font-size: 11px; line-height: 1.2; }
    .jarvis-guest-control-bar { margin: 4px 0 0; gap: 12px; }
    .jarvis-guest-control-bar button { width: 44px; height: 44px; }
    .jarvis-guest-control-bar button svg { width: 19px; height: 19px; }
    .jarvis-guest-control-item span { font-size: 9px; }
    .jarvis-card {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      width: 100%;
      border-radius: 0 0 22px 22px; padding: 8px 6px 10px;
      margin-top: 0;
      border-top: none;
      border-color: rgba(255,255,255,.65);
      background: rgba(255,255,255,.66);
    }
    .chat-window { min-height: 0; padding-right: 2px; margin-bottom: 6px; }
    .jarvis-message { max-width: calc(96% - 46px); font-size: 15px; padding: 12px 14px; margin-left: 46px; border-radius: 4px 16px 16px 16px; }
    .jarvis-message::before { width: 36px; height: 36px; left: -46px; }
    .guest-message { max-width: 92%; font-size: 15px; padding: 12px 14px; border-radius: 16px 16px 4px 16px; }
    .msg-time { margin-left: 52px; }
    .msg-time.guest-time { margin-left: 0; }
    /* Quick-action buttons hidden on mobile to keep the chat clean --
       everything they did is still reachable by just asking Jarvis.
       #jarvisOwnerActions is exempt -- it's Owner Mode only, and owners
       need it on mobile (that's where they're standing when they're at
       a tablet needing a reset), not just on a PC. */
    .topic-grid:not(#jarvisOwnerActions), .topic-grid.secondary.visible { display: none; }
    .input-bar { gap: 8px; margin-top: 4px; }
    #jarvisPageInput { flex: 1; min-width: 0; height: 46px; border-radius: 999px; padding: 0 8px 0 2px; font-size: 16px; }
    #jarvisSendButton { flex: 0 0 46px; width: 46px; height: 46px; padding: 0; font-size: 15px; border-radius: 50%; }
    #jarvisEndConversation { display: none !important; }

    /* Keyboard-open state, toggled by the visualViewport resize handler.
       Neither the logo nor the photo/greeting panel earns its space back
       while a guest is actively typing on a small screen -- hiding both
       gives the chat history and input room to actually be visible
       instead of getting squeezed into whatever's left over. */
    body.jarvis-keyboard-open .jarvis-topbar { display: none; }
    body.jarvis-keyboard-open .jarvis-identity { display: none; }
    body.jarvis-keyboard-open .jarvis-container { padding-top: 4px; }
    /* Guest-compact adds 10px/12px identity-textbox padding for desktop --
       on a phone that read as a dead band of empty space above the
       greeting, so it is tightened here and the chat card (flex:1)
       automatically absorbs the reclaimed height. */
    body.jarvis-guest-compact .jarvis-identity-textbox { padding-top: 2px; padding-bottom: 4px; }
  }

  @media (max-width: 768px) {
    #jarvisLightPanel { max-height: min(85dvh, 640px); }
    .light-panel-header { padding: 16px 18px 10px; }
    .light-panel-close { width: 42px; height: 42px; min-width: 42px; flex-basis: 42px; }
  }

  /* ---------- Phone landscape lock ---------- */
  /* There's no reliable way for a regular (non-fullscreen) webpage to
     force the OS to lock orientation, so this is the practical
     equivalent: block the actual widget behind a full-screen "please
     rotate back" message instead of letting the cramped, not-designed-
     for-this landscape phone layout show through. Toggled via JS
     (jarvisRotateOverlay below) rather than a pure CSS orientation media
     query, specifically so it can be skipped for the kiosk tablet, which
     is normally landscape on purpose and should never see this. */
  .jarvis-rotate-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99999;
    background: linear-gradient(135deg, var(--navy), var(--aqua));
    color: white;
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px;
    font-family: Arial, sans-serif;
  }
  .jarvis-rotate-overlay.visible { display: flex; }
  .jarvis-rotate-icon { font-size: 56px; margin-bottom: 18px; animation: jarvisRotateSpin 1.6s ease-in-out infinite; }
  .jarvis-rotate-text { font-size: 18px; font-weight: 800; max-width: 320px; line-height: 1.4; }
  @keyframes jarvisRotateSpin {
    0%, 15% { transform: rotate(0deg); }
    50%, 65% { transform: rotate(-90deg); }
    100% { transform: rotate(-90deg); }
  }

  /* ---------- Kiosk mode (guesthouse tablet) ---------- */
  /* Applied via JS (body.jarvis-kiosk class) rather than a width-based media
     query, since iPads are often wider than 768px and were skipping the
     compact layout above entirely. Landscape keeps the side-by-side shell
     layout (identity panel + card); portrait switches to stacked, same as
     mobile, since a 200px-wide identity column leaves almost no room for
     the chat card in a narrow portrait viewport. */
  /* Extra top padding here is clearance for the status bar in iOS
     Safari's own "Add to Home Screen" standalone mode -- with
     apple-mobile-web-app-status-bar-style set to black-translucent (see
     the <meta> tags in <head>), the page draws underneath that bar
     rather than being pushed down below it, so without this the
     topbar/logo would sit partly behind it. env(safe-area-inset-top) is
     the actual iOS-reported value (varies by iPad model/orientation),
     with a 20px fallback for anything that doesn't support it; the
     `max()` guarantees at least that much clearance even on a device
     that reports a smaller inset than the logo needs. Requires
     viewport-fit=cover on the viewport <meta> tag, or this stays 0. */
  body.jarvis-kiosk .jarvis-topbar { min-height: 84px; padding: max(20px, env(safe-area-inset-top)) 24px 0; }
  body.jarvis-kiosk .jarvis-logo-img { width: 430px; height: 130px; }
  body.jarvis-kiosk .jarvis-container { padding: 4px 20px 22px; width: 100%; }
  body.jarvis-kiosk .jarvis-shell { gap: 16px; }
  body.jarvis-kiosk .jarvis-identity { flex: 0 0 360px; padding-top: 2px; display: flex; flex-direction: column; align-self: stretch; }
  body.jarvis-kiosk .jarvis-photo-ring { width: 340px; height: 340px; border-radius: 28px; border-width: 4px; margin-bottom: 10px; }
  .jarvis-photo-ring.jarvis-avatar-speaking { box-shadow: 0 0 0 3px var(--aqua), 0 0 34px 10px rgba(24,174,186,.65), 0 16px 40px rgba(0,0,0,.28); }
  /* Avatar videos MUST fill the ring edge to edge -- a visible gap was
     appearing at the top of the frame. !important here outranks the inline
     styles the avatar stage sets when it creates these elements, and the
     explicit position:relative on the ring (in CSS, not just set by JS)
     guarantees the absolutely-positioned videos size against the ring
     itself rather than any other positioned ancestor. */
  .jarvis-photo-ring { position: relative; }
  .jarvis-photo-ring video {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    min-width: 100% !important; min-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important;
  }
  body.jarvis-kiosk .jarvis-online-pill { display: none; }
  body.jarvis-kiosk .jarvis-identity-textbox { padding: 10px 12px; border-radius: 16px; margin-top: auto; margin-bottom: 16px; }
  body.jarvis-kiosk .jarvis-greeting-text { font-size: 19px; margin-bottom: 2px; }
  body.jarvis-kiosk .jarvis-role-text { font-size: 9px; letter-spacing: 1.2px; margin-bottom: 2px; }
  body.jarvis-kiosk .jarvis-tagline-text { font-size: 9px; }
  body.jarvis-kiosk .jarvis-card {
    padding: 12px;
    box-shadow: 0 25px 70px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.4);
  }
  body.jarvis-kiosk .chat-window { min-height: 0; }
  body.jarvis-kiosk .topic-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 5px; }
  body.jarvis-kiosk .topic-grid button { padding: 8px 6px; font-size: 12px; border-radius: 12px; }
  body.jarvis-kiosk .input-bar { margin-top: 5px; }
  body.jarvis-kiosk #jarvisEndConversation { margin-top: 14px; padding: 8px; font-size: 12px; border-radius: 10px; }
  /* Keyboard-open state -- same purpose as the mobile version further
     below, but written without a width-based media query, since kiosk
     iPads are normally landscape and often wider than 768px, which the
     mobile-only version wouldn't catch. Hiding the topbar frees vertical
     space shared by both the identity and chat columns in the kiosk's
     normal side-by-side landscape layout; hiding identity additionally
     gives the chat card the full width on the rare portrait-kiosk case. */
  body.jarvis-kiosk.jarvis-keyboard-open .jarvis-topbar { display: none; }
  body.jarvis-kiosk.jarvis-keyboard-open .jarvis-identity { display: none; }
  body.jarvis-kiosk.jarvis-keyboard-open .jarvis-container { padding-top: 4px; }
  /* While a guest is actively typing, the quick-action button grid isn't
     doing useful work -- everything it offers is reachable by just asking
     -- and in kiosk landscape specifically (where the on-screen keyboard
     eats roughly half the available height), leaving it visible competes
     directly with the chat history and input bar for very little
     remaining vertical space. Hiding it here gives that space back, same
     as hiding the topbar/identity already does. */
  body.jarvis-kiosk.jarvis-keyboard-open .topic-grid,
  body.jarvis-kiosk.jarvis-keyboard-open .topic-grid.secondary.visible { display: none; }
  body.jarvis-kiosk.jarvis-keyboard-open .chat-window { min-height: 0; margin-bottom: 6px; }
  body.jarvis-kiosk.jarvis-keyboard-open .jarvis-card { padding: 8px; }

  /* ---------- Night mode (kiosk only) ---------- */
  /* A webpage has no API to control the iPad's actual hardware backlight
     -- this is the standard workaround: a dark, mostly-opaque overlay
     above everything else, cutting effective brightness the way a
     phone's night-shift tint does.
     The toggle button itself is placed as a NORMAL in-page element next
     to the "Online" pill (see markup below) rather than position:fixed
     pinned to a viewport corner -- a fixed corner placement risked sitting
     inside the kiosk app's own native status-bar strip, which is a
     separate native layer that can silently intercept taps before they
     ever reach the page, making the button look present but do nothing.
     Living in normal page flow next to controls that are already known
     to work (Online pill, quick-action buttons) avoids that entirely. */
  .jarvis-night-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99998;
    background: #000;
    opacity: 0.78;
    pointer-events: none;
  }
  .jarvis-night-overlay.active { display: block; }
  #jarvisNightToggle { display: none; }
  body.jarvis-kiosk #jarvisNightToggle {
    display: flex;
    position: fixed;
    top: 150px;
    left: 16px;
    z-index: 100000;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 50, 74, 0.6);
    color: white;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
  }
  body.jarvis-kiosk.jarvis-night-active #jarvisNightToggle {
    background: rgba(255, 255, 255, 0.25);
  }
  /* Portrait tablet: stack identity above the card, same shape as mobile */
  @media (orientation: portrait) {
    body.jarvis-kiosk .jarvis-shell { flex-direction: column; align-items: center; gap: 0; }
    body.jarvis-kiosk .jarvis-identity { flex: 0 0 auto; width: 100%; }
    body.jarvis-kiosk .jarvis-card { margin-top: 8px; width: 100%; }
  }
  /* Tablet3 (Joanne) -- hide property grids */
  body.jarvis-family .topic-grid:not(#jarvisOwnerActions) { display: none !important; }
  body.jarvis-family #jarvisMoreOptions { display: none !important; }
  body.jarvis-kiosk #jarvisSendButton,
  body.jarvis-kiosk #jarvisMicButton {
    transition: transform .12s ease, box-shadow .12s ease;
  }
  body.jarvis-kiosk .topic-grid button:active,
  body.jarvis-kiosk #jarvisSendButton:active,
  body.jarvis-kiosk #jarvisMicButton:active {
    transform: scale(.94);
  }
  body.jarvis-kiosk .jarvis-message,
  body.jarvis-kiosk .guest-message {
    animation: jarvisMsgIn .25s ease both;
  }
  @keyframes jarvisMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ---------- Standalone "takeover" page chrome (every visit to /jarvis) ---------- */
  /* Hides the surrounding site's header/nav/footer so this page is its own
     self-contained experience with just the topbar above, instead of the
     full site navigation. Best-effort selectors based on common
     site-builder patterns -- if the nav is still visible, right-click it ->
     Inspect, and send the actual element/class shown so this can be
     targeted precisely. */
  body.jarvis-takeover header,
  body.jarvis-takeover nav,
  body.jarvis-takeover footer,
  body.jarvis-takeover #dm_header_wrap,
  body.jarvis-takeover .header_wrapper,
  body.jarvis-takeover #header {
    display: none !important;
  }
  body.jarvis-takeover {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* ---------- Idle Mode (guesthouse tablet only) ---------- */
  .idle-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    background: #06345f;
    cursor: pointer;
    overflow: hidden;
  }
  .idle-overlay.active { display: block; }
  .idle-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .idle-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,.5) 100%);
  }
  .idle-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
    transform: translateY(-25%);
  }
  .idle-logo{
      width:600px;
      max-width:none;
      height:auto;
      display:block;
      margin:0 auto -84px;
      background:none;
      filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
  }
  .idle-welcome {
    font-size: 40px;
    font-weight: 700;
    max-width: 900px;
    margin: 0 auto 18px;
    line-height: 1.25;
    text-shadow: 0 4px 24px rgba(0,0,0,.85), 0 0 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.6);
  }
  .idle-clock {
    font-size: 130px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 0 4px 24px rgba(0,0,0,.85), 0 0 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.6);
    line-height: 1; }
   .idle-date { font-size: 36px; font-weight: 600; margin-top: 10px; opacity: .98; text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 0 24px rgba(0,0,0,.4); }
  .idle-weather { font-size: 32px; margin-top: 20px; opacity: .98; text-shadow: 0 2px 14px rgba(0,0,0,.75), 0 0 24px rgba(0,0,0,.4); }
  /* When the check-in / check-out-eve welcome line is showing, everything
     needs to shrink and shift down a bit so the logo, message, clock,
     date, and weather all still fit on screen together without crowding
     or clipping. On a normal day (no message) the layout is untouched. */
  .idle-content.has-welcome { transform: translateY(-10%); }
  .idle-content.has-welcome .idle-logo { width: 420px; margin-bottom: -50px; }
  .idle-content.has-welcome .idle-welcome { font-size: 30px; margin-bottom: 10px; }
  .idle-content.has-welcome .idle-clock { font-size: 92px; }
  .idle-content.has-welcome .idle-date { font-size: 26px; margin-top: 6px; }
  .idle-content.has-welcome .idle-weather { font-size: 22px; margin-top: 12px; }
  .idle-unmute {
    position: absolute;
    bottom: 28px;
    right: 28px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.45);
    color: white;
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    backdrop-filter: blur(6px);
    cursor: pointer;
  }
  .idle-hint {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: rgba(255,255,255,.8);
    font-size: 14px;
    font-weight: 600;
  }
  @media(max-width:768px){
    .idle-clock { font-size: 76px; }
    .idle-welcome { font-size: 26px; }
    .idle-date { font-size: 24px; }
    .idle-weather { font-size: 22px; }
    .idle-logo { width: 280px; margin-bottom: -36px; }
    .idle-content.has-welcome .idle-logo { width: 200px; margin-bottom: -24px; }
    .idle-content.has-welcome .idle-welcome { font-size: 19px; margin-bottom: 6px; }
    .idle-content.has-welcome .idle-clock { font-size: 56px; }
    .idle-content.has-welcome .idle-date { font-size: 17px; margin-top: 4px; }
    .idle-content.has-welcome .idle-weather { font-size: 15px; margin-top: 8px; }
  }
  /* ===== LIGHTING PANEL ===== */
  /* The header is now a normal (non-scrolling) sibling ABOVE a
     dedicated inner scroll area (#jarvisLightScrollArea, styled inline
     in the HTML) rather than sharing the same overflow:auto container
     via position:sticky -- every other panel (AC/Washer/Door/Mobile
     Access) already works this way. Sticky positioning can silently
     fail to stay pinned if ANY ancestor between it and its scroll
     container has its own `overflow` set, which is a real risk on a
     large third-party Wix page this embeds into -- structurally
     separating header from scroll area removes that failure mode
     entirely instead of depending on sticky behaving correctly here. */
  #jarvisLightPanel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(15,20,35,0.97);
    backdrop-filter: blur(20px);
    border-radius: 24px 24px 0 0;
    padding: 0 0 env(safe-area-inset-bottom,0);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    z-index: 2000;
    max-height: 85vh;
    box-shadow:none;
    color: #fff;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #jarvisLightPanel.open { transform: translateY(0); }
.light-panel-header {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 20px 24px 12px;
    background: rgba(15,20,35,0.98);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 3;
  }
  .light-panel-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .light-panel-close {
    background: rgba(255,255,255,0.14); border: none; color: #fff;
    width: 40px; height: 40px; min-width: 40px; border-radius: 50%; font-size: 20px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex: 0 0 40px; line-height: 1; padding: 0;
  }
  #jarvisLightScrollArea { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none !important; }
  .light-all-btns { display: flex; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .light-master-controls {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column; gap: 12px;
  }
  .light-master-label {
    font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.45);
    text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px;
  }
  .light-zone-controls {
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .light-zone-divider {
    height: 1px; background: rgba(255,255,255,0.07); margin: 4px 0 8px;
  }
  .light-all-btn {
    flex: 1; padding: 14px; border-radius: 14px; border: none;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
  }
  .light-all-btn.off { background: rgba(255,255,255,0.1); color: #fff; }
  .light-all-btn.on  { background: linear-gradient(135deg,#f6c94e,#f08030); color: #1a1000; }
  .light-all-btn:active { opacity: 0.7; }
  .light-rooms { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
  .light-room-card {
    background: rgba(255,255,255,0.05); border-radius: 16px; padding: 16px;
    border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.2s;
  }
  .light-room-card.is-on { border-color: rgba(246,201,78,0.4); }
  .light-room-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .light-room-name { font-size: 16px; font-weight: 600; text-transform: capitalize; flex: 1; }
  .light-expand-btn {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 16px; cursor: pointer; padding: 2px 6px; line-height: 1;
    transition: transform 0.25s, color 0.15s; flex-shrink: 0;
  }
  .light-expand-btn.open { transform: rotate(180deg); color: rgba(255,255,255,0.85); }
  .light-toggle { position: relative; width: 52px; height: 28px; flex-shrink: 0; }
  .light-toggle input { opacity:0; width:0; height:0; }
  .light-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: rgba(255,255,255,0.15); border-radius: 28px; transition: background 0.2s;
  }
  .light-toggle-slider:before {
    content:""; position: absolute; width: 22px; height: 22px;
    left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s;
  }
  .light-toggle input:checked + .light-toggle-slider { background: linear-gradient(135deg,#f6c94e,#f08030); }
  .light-toggle input:checked + .light-toggle-slider:before { transform: translateX(24px); }
  /* Collapsed by default -- JS toggles display directly */
  .light-room-controls { display: none; flex-direction: column; gap: 12px; margin-top: 14px; }
  .light-room-controls.expanded { display: flex; }
  .light-sub-row { padding: 4px 0; }
  .light-sub-controls { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
  .light-sub-controls.expanded { display: flex; }
  /* Group section inside a room */
  .light-group-section { margin-top: 10px; }
  .light-group-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; padding: 6px 0; }
  .light-group-controls { display: none; flex-direction: column; padding: 6px 0 0 0; }
  .light-group-controls.expanded { display: flex; }
  .light-control-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
  .light-brightness-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
    border-radius: 3px; background: rgba(255,255,255,0.15); outline: none; cursor: pointer;
  }
  .light-brightness-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg,#f6c94e,#f08030); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  .light-temp-btns { display: flex; gap: 8px; margin-bottom: 4px; }
  .light-temp-btn {
    flex: 1; padding: 7px 4px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.15);
    font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color 0.15s, background 0.15s;
    text-align: center; color: #fff; background: rgba(255,255,255,0.07);
  }
  .light-temp-btn.active { border-color: #fff; background: rgba(255,255,255,0.18); }
  .light-temp-btn:active { opacity: 0.7; }
  .light-temp-btn[data-temp="2700"] { color: #ffd080; }
  .light-temp-btn[data-temp="3000"] { color: #ffe8b0; }
  .light-temp-btn[data-temp="4000"] { color: #f0f4ff; }
  .light-colors { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .light-color-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: transform 0.15s, border-color 0.15s; flex-shrink: 0;
  }
  .light-color-btn.active { border-color: #fff; transform: scale(1.15); }
  .light-color-btn:active { transform: scale(0.9); }
  #jarvisLightBtn { display: none; }

  /* ---------- Floating timer/alarm widget ----------
     Lives OUTSIDE the chat entirely -- it used to be injected as a message
     inside #dynamicChatHistory, which meant every 1-second tick re-rendered
     the *entire* chat transcript, producing a visible full-chat "blink".
     Sits top-right, below the logo/home button, out of the way of the chat
     and input bar. renderTimerWidget() (see script) now diffs against the
     existing cards instead of tearing the whole widget down every tick --
     that full rebuild was also replaying the pop-in animation on every
     single card every second, which is what made the card itself look like
     it was blinking even after the chat-wide blink was fixed. */
  .jarvis-timer-widget {
    position: fixed;
    top: 130px;
    right: 22px;
    /* Sits above the idle-mode screensaver (z-index 5000) so a running
       timer/alarm stays visible -- and dismissible -- even when the tablet
       is showing the idle overlay, instead of being completely hidden
       behind it. Stays below the night-dim and rotate-warning overlays
       (99998/99999) so those still work as expected on top of it. */
    z-index: 5050;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 210px;
    pointer-events: none; /* re-enabled per-card below so empty space doesn't block taps */
  }
  @media (max-width: 768px) {
    .jarvis-timer-widget { top: 72px; right: 10px; width: 178px; }
  }
  body.jarvis-kiosk .jarvis-timer-widget { top: 50px; right: 18px; }

  .jarvis-timer-card {
    pointer-events: auto;
    position: relative;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 8px 22px rgba(6,52,95,.16);
    border: 1px solid rgba(24,174,186,.18);
    animation: jarvisTimerPopIn .22s ease-out;
  }
  .jarvis-timer-card.is-done {
    border-color: rgba(224,0,0,.35);
    animation: jarvisTimerPopIn .22s ease-out, jarvisTimerDonePulse 1.4s ease-in-out infinite;
  }
  @keyframes jarvisTimerPopIn {
    from { opacity: 0; transform: translateX(10px) scale(.97); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }
  @keyframes jarvisTimerDonePulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(224,0,0,.14); }
    50% { box-shadow: 0 8px 26px rgba(224,0,0,.34); }
  }
  .jt-icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    background: rgba(24,174,186,.14);
    color: var(--aqua);
  }
  .jarvis-timer-card.is-done .jt-icon { background: rgba(224,0,0,.12); color: #e00; }
  .jarvis-timer-card.is-alarm .jt-icon { background: rgba(139,92,246,.14); color: #8b5cf6; }
  .jt-body { flex: 1; min-width: 0; }
  .jt-name {
    font-size: 12px; font-weight: 800; color: #2c4658;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-transform: uppercase; letter-spacing: .3px;
  }
  .jt-value { font-size: 16px; font-weight: 800; color: var(--navy); line-height: 1.25; letter-spacing: .2px; }
  .jarvis-timer-card.is-done .jt-value { color: #d40000; }
  .jarvis-timer-dismiss {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6,52,95,.08);
    border: none;
    border-radius: 50%;
    font-size: 11px;
    color: #46586b;
    cursor: pointer;
    touch-action: manipulation;
    padding: 11px; /* enlarges the actual tap target well beyond the visible 22px circle */
    margin: -11px;
  }
  .jarvis-timer-dismiss:active { background: rgba(6,52,95,.18); }

  /* ===== Property Knowledge panel (Owner Mode) =====
     Same bottom-sheet pattern as the AC/Washer/Door panels (inline
     position/transform on the wrapper div in the HTML), styled to match
     the dark glass look used there. These few classes just style the
     scrollable inner content built by JS in openKnowledgePanel /
     renderKnowledgePanel, since that content is rebuilt dynamically. */
  .kn-record input, .kn-record textarea,
  #jarvisKnowledgeContent input, #jarvisKnowledgeContent textarea {
    font-family: Arial, sans-serif;
  }
  .kn-record input:focus, .kn-record textarea:focus,
  #jarvisKnowledgeContent input:focus, #jarvisKnowledgeContent textarea:focus {
    outline: none;
    border-color: rgba(24,174,186,.6);
  }

@media (max-width: 1400px) {
  body.jarvis-guest-compact { margin:0!important; overflow:hidden!important; background:#001c2b!important; }
  body.jarvis-guest-compact .jarvis-page { position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; max-height:100dvh!important; overflow:hidden!important; background:linear-gradient(155deg,#001521,#003446 62%,#001925)!important; }
  body.jarvis-guest-compact .jarvis-topbar,
  body.jarvis-guest-compact .jarvis-container,
  body.jarvis-guest-compact #jarvisWakeToggle,
  body.jarvis-guest-compact .jarvis-home-btn,
  body.jarvis-guest-compact #jarvisMobileAccessBtn { display:none!important; }
  body.jarvis-guest-compact .jarvis-mobile-dashboard { position:fixed!important; inset:0 0 calc(74px + env(safe-area-inset-bottom)) 0!important; z-index:2100!important; display:block!important; overflow:hidden!important; box-sizing:border-box!important; padding:8px 12px 9px!important; color:#fff; font-family:Arial,sans-serif; }
  .jmobile-header { height:54px; display:grid; grid-template-columns:72px 1fr 90px; align-items:center; gap:4px; }
  .jmobile-clock b { display:block; font-size:18px; line-height:1; }.jmobile-clock span { display:block; margin-top:4px; color:#9eafbd; font-size:9px; }
  .jmobile-wordmark { text-align:center; line-height:1; }.jmobile-wordmark small { display:block; color:#70dce5; font-size:7px; letter-spacing:2px; font-weight:900; }.jmobile-wordmark strong { display:block; margin:4px 0 3px; color:#e4b75f; font:700 21px/1 Georgia,serif; letter-spacing:5px; }.jmobile-wordmark span { display:block; color:#9eafbd; font-size:6px; letter-spacing:2px; }
  .jmobile-weather { display:grid; grid-template-columns:27px 1fr; grid-template-rows:21px 16px; align-items:center; padding:5px 6px; border:1px solid rgba(226,181,94,.22); border-radius:13px; background:rgba(0,41,57,.68); }.jmobile-weather i { grid-row:1/3; font-style:normal; font-size:22px; }.jmobile-weather b { font-size:17px; }.jmobile-weather span { color:#a9bac6; font-size:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .jmobile-home { height:calc(100% - 54px); display:grid; grid-template-rows:minmax(210px,1fr) 92px 68px 82px; gap:7px; min-height:0; }
  .jmobile-home>h1 { margin:0; color:#fff; font:700 clamp(24px,7vw,34px)/1 Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .jmobile-hero { position:relative; min-height:0; overflow:hidden; border:1px solid rgba(226,181,94,.35); border-radius:23px; background:var(--hero-poster) center top/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(103,220,229,.12); }
  .jmobile-hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 12%; background:var(--hero-poster) center top/cover no-repeat; }.jmobile-hero-video.video-fallback{display:none}.jmobile-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,14,22,.03) 30%,rgba(0,17,26,.9) 100%)}
  .jmobile-online { position:absolute; top:12px; left:12px; padding:8px 11px; border:1px solid rgba(103,220,229,.4); border-radius:999px; background:rgba(0,29,41,.86); color:#70e4ec; font-size:9px; font-weight:900; letter-spacing:.7px; }.jmobile-online::first-letter{color:#46df88}
  .jmobile-hero-copy { position:absolute; left:14px; right:14px; bottom:12px; }.jmobile-hero-copy h2{margin:0!important;color:#fff!important;font:700 clamp(25px,7vw,36px)/1.05 Georgia,serif!important;text-shadow:0 2px 8px #000!important}.jmobile-hero-copy p{margin:5px 0 9px;color:#d4e0e7;font-size:10px}.jarvis-mobile-call{width:100%;height:40px;border:0;border-radius:13px;background:linear-gradient(135deg,#e5bc65,#c88929);color:#001f32;font-size:15px;font-weight:900;box-shadow:0 7px 16px rgba(0,0,0,.22)}.jarvis-mobile-call.active{background:linear-gradient(135deg,#b92838,#7d1522);color:#fff}
  .jmobile-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; min-height:0; }.jmobile-metric-card{display:grid!important;grid-template-rows:24px 1fr!important;padding:8px!important;border:1px solid rgba(226,181,94,.24)!important;border-radius:15px!important;background:rgba(4,51,68,.86)!important;color:#fff!important;text-align:left!important;overflow:hidden}.jmobile-metric-head{display:flex!important;align-items:center;gap:5px;color:#fff!important}.jmobile-metric-head i{font-style:normal;color:#70dce5;font-size:16px}.jmobile-metric-head b{font-size:10px;white-space:nowrap}.jmobile-temp-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:3px;align-items:end}.jmobile-temp-grid span{min-width:0}.jmobile-temp-grid strong{display:block;color:#fff;font-size:18px;line-height:1}.jmobile-temp-grid small{display:block;margin-top:4px;color:#9fb7c4;font-size:6px;text-transform:uppercase;letter-spacing:.35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jmobile-rows { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; }.jmobile-rows button{display:grid;grid-template-columns:27px minmax(0,1fr) 10px;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(103,220,229,.15);border-radius:13px;background:rgba(2,43,59,.78);color:#fff;text-align:left;overflow:hidden}.jmobile-rows i{font-style:normal;color:#e4b75f;font-size:19px}.jmobile-rows b{display:block;font-size:10px}.jmobile-rows small{display:block;margin-top:2px;color:#9fb1bf;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jmobile-rows em{color:#e4b75f;font-style:normal;font-size:18px}.jmobile-rows .jmobile-perk-home{border-color:rgba(226,181,94,.3);background:linear-gradient(135deg,rgba(8,55,72,.96),rgba(2,38,54,.96))}.jmobile-perk-home b{color:#fff4d5;font-size:11px}.jmobile-perk-home .jmobile-perk-when{color:#70dce5;font-size:8px;font-weight:900}.jmobile-perk-home .jmobile-perk-choice{color:#fff;font-size:7px;font-weight:800}.jmobile-perk-home .jmobile-perk-facts{color:#e4b75f;font-size:8px;font-weight:800}
  .jmobile-arrival-teaser { display:grid;grid-template-columns:90px 1fr 14px;align-items:center;gap:10px;padding:0;overflow:hidden;border:1px solid rgba(226,181,94,.3);border-radius:16px;background:rgba(2,43,59,.9);color:#fff;text-align:left}.jmobile-arrival-thumb{align-self:stretch;background:url('https://de.cdn-website.com/f2fed7dfb198437094e33f28de30b6df/dms3rep/multi/ChatGPT+Image+Jun+26-+2026-+08_45_22+AM.png') center/cover no-repeat}.jmobile-arrival-info small{display:block;color:#70dce5;font-size:8px;font-weight:900;letter-spacing:1px}.jmobile-arrival-info b{display:block;margin:4px 0;color:#fff4d5;font:700 17px/1 Georgia,serif}.jmobile-arrival-info em{color:#b6c7d1;font-size:9px;font-style:normal}.jmobile-chevron{color:#e4b75f;font-size:25px}
  .jmobile-unlocks{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:7px;padding:7px;border:1px solid rgba(226,181,94,.28);border-radius:15px;background:rgba(2,43,59,.9)}.jmobile-unlocks small{display:block;color:#70dce5;font-size:7px;font-weight:900}.jmobile-unlocks b{display:block;margin-top:4px;font-size:11px}.jmobile-unlock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.jmobile-unlock-grid button{height:60px;padding:4px 2px;border:1px solid rgba(103,220,229,.17);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font-size:16px}.jmobile-unlock-grid span{display:block;margin-top:4px;font-size:7px}
  .jmobile-checkin{height:calc(100% - 54px);display:grid;grid-template-rows:48px minmax(150px,38%) auto 1fr;gap:8px;min-height:0}.jmobile-view-title{display:flex;align-items:center;gap:10px}.jmobile-view-title button{width:36px;height:36px;border:1px solid rgba(226,181,94,.3);border-radius:50%;background:rgba(2,43,59,.9);color:#e4b75f;font-size:28px}.jmobile-view-title small{color:#70dce5;font-size:8px;font-weight:900;letter-spacing:1.5px}.jmobile-view-title h1{margin:3px 0 0;font:700 25px/1 Georgia,serif}.jmobile-checkin-photo{border:1px solid rgba(226,181,94,.3);border-radius:20px;background:url('https://de.cdn-website.com/f2fed7dfb198437094e33f28de30b6df/dms3rep/multi/ChatGPT+Image+Jun+26-+2026-+08_45_22+AM.png') center/cover no-repeat}.jmobile-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px}.jmobile-facts div{padding:8px 10px;border-radius:11px;background:rgba(4,51,68,.8)}.jmobile-facts b{display:block;color:#70dce5;font-size:8px;text-transform:uppercase;letter-spacing:.8px}.jmobile-facts span{display:block;margin-top:3px;color:#fff;font-size:10px;line-height:1.25}.jmobile-steps{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:0;padding:0;list-style:none;min-height:0}.jmobile-steps li{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgba(103,220,229,.12);border-radius:10px;background:rgba(2,43,59,.65);font-size:9px;line-height:1.2}.jmobile-steps i{flex:0 0 20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(226,181,94,.15);color:#e4b75f;font-style:normal;font-weight:900}.jmobile-funny{padding:16px;border:1px solid rgba(103,220,229,.16);border-radius:16px;background:rgba(2,43,59,.75);font-size:12px;line-height:1.45}.jmobile-funny>b{color:#fff4d5;font:700 21px Georgia,serif}.jmobile-funny p{margin:10px 0 0;color:#c5d4dc}
  .jmobile-perks{height:calc(100% - 54px);display:grid;grid-template-rows:48px 1fr;gap:10px;min-height:0}.jmobile-perk-card,.jmobile-perk-empty{align-self:start;padding:20px;border:1px solid rgba(226,181,94,.32);border-radius:20px;background:radial-gradient(circle at 90% 8%,rgba(226,181,94,.15),transparent 34%),rgba(2,43,59,.9)}.jmobile-perk-card>small{color:#70dce5;font-size:9px;font-weight:900;letter-spacing:1.5px}.jmobile-perk-card h2{margin:8px 0;color:#fff4d5;font:700 28px/1.08 Georgia,serif}.jmobile-perk-card p,.jmobile-perk-empty p{color:#c4d4dd;font-size:13px;line-height:1.5}.jmobile-perk-selected{margin:18px 0 10px;padding:13px;border:1px solid rgba(103,220,229,.22);border-radius:13px;background:rgba(103,220,229,.08)}.jmobile-perk-selected b,.jmobile-perk-selected span{display:block}.jmobile-perk-selected b{color:#70dce5;font-size:11px;text-transform:uppercase;letter-spacing:.8px}.jmobile-perk-selected span{margin-top:6px;color:#fff;font-size:14px;font-weight:800}.jmobile-perk-select,.jmobile-perk-message{width:100%;height:44px;margin-top:10px;border-radius:12px;font-size:13px;font-weight:900}.jmobile-perk-select{border:0;background:linear-gradient(135deg,#e5bc65,#c88929);color:#001f32}.jmobile-perk-message{border:1px solid rgba(103,220,229,.25);background:rgba(255,255,255,.05);color:#70dce5}
  .jmobile-app-page{height:calc(100% - 54px);display:grid;grid-template-rows:48px 1fr;gap:10px;min-height:0;color:#fff}.jmobile-view-title h1{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.45)}.jmobile-view-enter{animation:jmobilePageIn .2s ease-out}@keyframes jmobilePageIn{from{opacity:.25;transform:translateX(14px)}to{opacity:1;transform:none}}.jmobile-app-window{min-height:0;overflow:auto;padding:14px;border:1px solid rgba(226,181,94,.28);border-radius:20px;background:radial-gradient(circle at 95% 3%,rgba(103,220,229,.1),transparent 32%),rgba(2,38,54,.9);box-shadow:0 14px 36px rgba(0,0,0,.2);color:#fff}.jmobile-door-list{display:grid;gap:10px}.jmobile-door-list button{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;min-height:70px;padding:10px 12px;border:1px solid rgba(103,220,229,.2);border-radius:15px;background:rgba(255,255,255,.045);color:#fff;text-align:left}.jmobile-door-list i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(226,181,94,.13);font-style:normal;font-size:20px}.jmobile-door-list b,.jmobile-door-list small{display:block}.jmobile-door-list b{font-size:14px;color:#fff}.jmobile-door-list small{margin-top:4px;color:#d7e2e8;font-size:9px}.jmobile-door-list em{padding:8px 10px;border-radius:9px;background:linear-gradient(135deg,#e5bc65,#c88929);color:#001f32;font-size:9px;font-style:normal;font-weight:900}.jmobile-status-list{display:grid;gap:10px}.jmobile-status-list article{display:grid;grid-template-columns:1fr auto;align-items:center;padding:14px;border:1px solid rgba(103,220,229,.16);border-radius:14px;background:rgba(255,255,255,.04);color:#fff}.jmobile-status-list b,.jmobile-status-list small{display:block}.jmobile-status-list b,.jmobile-status-list strong{color:#fff}.jmobile-status-list small{margin-top:4px;color:#70dce5;font-size:8px}.jmobile-status-list strong{font-size:28px}.jmobile-status-list em{grid-column:1/3;margin-top:8px;color:#fff;font-size:10px;font-style:normal}.jmobile-feature-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jmobile-feature-stats article{padding:18px;border:1px solid rgba(103,220,229,.18);border-radius:16px;background:rgba(255,255,255,.045);text-align:center;color:#fff}.jmobile-feature-stats small{display:block;color:#fff;font-size:8px;font-weight:900;letter-spacing:1px}.jmobile-feature-stats strong{display:block;margin-top:8px;color:#fff;font-size:35px}.jmobile-feature-copy{text-align:center;padding:28px 12px;color:#fff}.jmobile-feature-copy i{font-style:normal;color:#e4b75f;font-size:52px}.jmobile-feature-copy p{color:#fff;font-size:13px;line-height:1.55}.jmobile-open-controls{width:100%;height:48px;margin-top:14px;border:0;border-radius:13px;background:linear-gradient(135deg,#e5bc65,#c88929);color:#001f32;font-size:13px;font-weight:900}
  body.jarvis-guest-compact .jarvis-mobile-tabs { position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:2147483000!important;height:calc(74px + env(safe-area-inset-bottom))!important;display:flex!important;visibility:visible!important;opacity:1!important;gap:2px!important;overflow-x:auto!important;overflow-y:hidden!important;box-sizing:border-box!important;padding:5px 7px env(safe-area-inset-bottom)!important;background:rgba(0,17,27,.98)!important;border-top:1px solid rgba(103,220,229,.2)!important;scrollbar-width:none!important;overscroll-behavior-x:contain;transform:translateZ(0)}
  .jarvis-mobile-tabs::-webkit-scrollbar{display:none}.jarvis-mobile-tabs button{flex:0 0 82px!important;min-width:82px!important;height:64px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;border:0!important;border-radius:13px!important;background:transparent!important;color:#a9bac6!important;font-size:10px!important;font-weight:800!important}.jarvis-mobile-tabs .nav-glyph{display:grid!important;place-items:center!important;width:28px!important;height:27px!important;border-radius:9px!important;background:rgba(255,255,255,.035)!important;font-size:21px!important}.jarvis-mobile-tabs button.active{background:rgba(226,181,94,.11)!important;color:#e4b75f!important}.jarvis-mobile-tabs button.active .nav-glyph{background:rgba(226,181,94,.14)!important;box-shadow:0 0 0 1px rgba(226,181,94,.22)!important}.jarvis-mobile-tabs button.preview-locked{opacity:.65!important}
  body.jarvis-mobile-chat .jarvis-mobile-dashboard{display:none!important}body.jarvis-mobile-chat .jarvis-container{display:flex!important;position:fixed!important;inset:0 0 calc(74px + env(safe-area-inset-bottom)) 0!important;z-index:2150!important;width:100%!important;padding:8px!important;background:linear-gradient(155deg,#001521,#003446 62%,#001925)!important}body.jarvis-mobile-chat .jarvis-shell{display:block!important}body.jarvis-mobile-chat .jarvis-identity{display:none!important}body.jarvis-mobile-chat .jarvis-card{height:100%!important;border:1px solid rgba(226,181,94,.25)!important;border-radius:20px!important;background:rgba(2,38,54,.94)!important;box-shadow:none!important;padding:58px 10px 10px!important;position:relative!important}body.jarvis-mobile-chat .jarvis-card:before{content:attr(data-mobile-title);position:absolute;left:16px;top:16px;color:#fff4d5;font:700 25px/1 Georgia,serif}body.jarvis-mobile-chat .chat-window{background:rgba(0,23,36,.5)!important;border-radius:14px!important;padding:10px!important}body.jarvis-mobile-chat .jarvis-message{background:rgba(255,255,255,.09)!important;color:#fff!important}body.jarvis-mobile-chat .input-bar{padding-top:8px!important}
  body.jarvis-guest-compact .jarvis-panel{z-index:2147483100!important;position:fixed!important;inset:0 0 calc(74px + env(safe-area-inset-bottom)) 0!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;border-radius:0!important;background:linear-gradient(155deg,#001521,#003446 62%,#001925)!important;border:0!important;box-shadow:none!important;padding:20px 14px!important;overflow:auto!important}
}
@media (max-width:768px) and (max-height:700px){.jmobile-header{height:46px}.jmobile-home{height:calc(100% - 46px);grid-template-rows:minmax(170px,1fr) 82px 58px 70px;gap:5px}.jmobile-wordmark strong{font-size:18px}.jmobile-metric-card{padding:5px!important}.jmobile-temp-grid strong{font-size:16px}.jmobile-hero-copy p{display:none}.jarvis-mobile-call{height:35px}.jmobile-arrival-teaser{grid-template-columns:70px 1fr 12px}.jmobile-checkin{height:calc(100% - 46px)}}


@media (max-width: 1400px) {
  body.jarvis-guest-compact .idle-overlay { z-index:2147483644 !important; }
  body.jarvis-guest-compact .idle-unmute { bottom:calc(18px + env(safe-area-inset-bottom)) !important; right:16px !important; }
  body.jarvis-guest-compact .idle-hint { bottom:calc(20px + env(safe-area-inset-bottom)) !important; left:16px !important; }
  body.jarvis-guest-compact .jmobile-hero,
  body.jarvis-guest-compact .jmobile-hero-video {
    margin-top: 0 !important;
    top: 0 !important;
  }
  body.jarvis-guest-compact .jmobile-hero-video {
    object-position: center top !important;
    transition: opacity .16s linear !important;
    will-change: opacity;
  }
  body.jarvis-guest-compact .jmobile-hero-video.jmobile-hero-buffer { opacity:0; }
  body.jarvis-guest-compact #jarvisLightPanel,
  body.jarvis-guest-compact #jarvisMusicPanel,
  body.jarvis-guest-compact #jarvisDoorPanel,
  body.jarvis-guest-compact #jarvisACPanel,
  body.jarvis-guest-compact #jarvisPoolPanel,
  body.jarvis-guest-compact #jarvisHotTubPanel,
  body.jarvis-guest-compact #jarvisWasherPanel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }
  .jmobile-cc-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 9px;
    background: rgba(0,20,31,.82);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }
  .jmobile-cc-toggle[aria-pressed="true"] {
    border-color: #70e4ec;
    color: #70e4ec;
  }
  .jmobile-caption {
    position: absolute;
    z-index: 4;
    left: 14px;
    right: 14px;
    bottom: 112px;
    display: none;
    max-height: 4.4em;
    overflow: hidden;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0,0,0,.76);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 1px 2px #000;
  }
  .jmobile-caption.visible { display: block; }
  .jmobile-door-feedback {
    position: fixed;
    z-index: 6200;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(16px);
    width: min(88vw, 360px);
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(0,29,41,.96);
    border: 1px solid rgba(112,228,236,.55);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .jmobile-door-feedback.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
  .jmobile-door-feedback.error { border-color: #ff7b86; }
  .jmobile-unlock-grid button.jmobile-unlock-busy,
  .jmobile-door-list button.jmobile-unlock-busy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg,rgba(20,126,143,.96),rgba(6,73,96,.96)) !important;
    border-color: rgba(112,228,236,.72) !important;
    color: #fff !important;
  }
  .jmobile-unlock-grid button.jmobile-unlock-success,
  .jmobile-door-list button.jmobile-unlock-success {
    background: linear-gradient(135deg,#188755,#0f6645) !important;
    border-color: rgba(93,235,159,.78) !important;
    color: #fff !important;
  }
  .jmobile-unlock-grid button.jmobile-unlock-error,
  .jmobile-door-list button.jmobile-unlock-error {
    background: linear-gradient(135deg,#a52d3b,#741c29) !important;
    border-color: rgba(255,123,134,.8) !important;
    color: #fff !important;
  }
  .jmobile-unlock-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jmobileUnlockSpin .7s linear infinite;
  }
  .jmobile-unlock-result { font-size: 11px; font-weight: 900; line-height: 1.15; }
  @keyframes jmobileUnlockSpin { to { transform: rotate(360deg); } }
}
#jarvisLightPanel,
#jarvisMusicPanel,
#jarvisDoorPanel,
#jarvisACPanel,
#jarvisPoolPanel,
#jarvisHotTubPanel,
#jarvisWasherPanel { z-index: 5200 !important; }


  /* Keep the complete illustrated gate/check-in card visible in both
     pre-arrival and checked-in states. The dashboard swaps only the copy
     beneath it; this image is intentionally shared by both states. */
  .jmobile-checkin {
    overflow-y:auto;
    grid-template-rows:42px minmax(128px,34dvh) auto auto !important;
    gap:6px !important;
  }
  .jmobile-checkin .jmobile-view-title h1 { font-size:21px !important; line-height:1.02 !important; }
  .jmobile-checkin .jmobile-view-title button { width:34px !important; height:34px !important; }
  .jmobile-checkin-photo {
    aspect-ratio:16 / 9;
    min-height:112px;
    max-height:220px;
    background:#061f2b url('https://de.cdn-website.com/f2fed7dfb198437094e33f28de30b6df/dms3rep/multi/ChatGPT+Image+Jun+13-+2026-+10_51_26+AM.png') center / contain no-repeat;
  }
  .jmobile-facts { gap:5px !important; }
  .jmobile-facts div { padding:7px 9px !important; }
  .jmobile-steps { gap:5px !important; }
  .jmobile-steps li { padding:6px !important; font-size:8.5px !important; }
  .jmobile-funny {
    padding:12px 13px !important;
    border-color:rgba(226,181,94,.28) !important;
    background:linear-gradient(145deg,rgba(5,51,66,.9),rgba(2,36,52,.82)) !important;
    font-size:11px !important;
    line-height:1.34 !important;
  }
  .jmobile-funny>b { display:block; color:#fff4d5 !important; font:700 18px/1.08 Georgia,serif !important; }
  .jmobile-funny p { margin:7px 0 0 !important; color:#d7e6ea !important; }
  .jmobile-funny-steps { display:grid; gap:8px; margin:10px 0 2px; }
  .jmobile-funny-steps>div { display:grid; grid-template-columns:28px 1fr; gap:9px; align-items:start; padding:10px; border:1px solid rgba(112,228,236,.18); border-radius:13px; background:rgba(255,255,255,.055); }
  .jmobile-funny-steps>div>b { display:grid; place-items:center; width:27px; height:27px; border-radius:999px; background:rgba(226,181,94,.18); color:#ffe8ad; font:900 14px/1 Arial,sans-serif; }
  .jmobile-funny-steps strong { display:block; color:#fff; font:900 15px/1.12 Arial,sans-serif; }
  .jmobile-funny-steps small { display:block; margin-top:4px; color:#d8edf1; font:800 12px/1.35 Arial,sans-serif; }
  .jmobile-native { display:grid; gap:12px; color:#eef8fb; }
  .jmobile-native-toolbar, .jmobile-native-actions { display:flex; flex-wrap:wrap; gap:8px; }
  .jmobile-native button, .jmobile-native input, .jmobile-native select { font:inherit; }
  .jmobile-native button { min-height:44px; border:1px solid rgba(104,214,225,.25); border-radius:12px; background:#0c4050; color:#fff; padding:10px 14px; font-weight:800; cursor:pointer; }
  .jmobile-native button.primary { background:linear-gradient(135deg,#e6b64e,#d99721); color:#062535; border:0; }
  .jmobile-native button.danger { background:#612034; }
  .jmobile-native button:disabled { opacity:.55; cursor:wait; }
  .jmobile-native-card { background:rgba(5,44,58,.78); border:1px solid rgba(95,202,215,.22); border-radius:16px; padding:14px; display:grid; gap:10px; }
  .jmobile-native-card header, .jmobile-control-row { display:flex !important; justify-content:space-between; align-items:center; gap:10px; }
  .jmobile-native-card h3 { margin:0; font-size:16px; }
  .jmobile-native-card small { color:#9dc2ca; }
  .jmobile-native-card h3, .jmobile-native-card span, .jmobile-native-card label,
  .jmobile-native-card li, .jmobile-native-card p { color:#fff !important; }
  .jmobile-now-playing h3, .jmobile-now-playing span { color:#fff !important; }
  .jmobile-native-note { color:#bfe4ea !important; font-size:12px; line-height:1.45; }
  .jmobile-native-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .jmobile-native-value { background:rgba(255,255,255,.055); border-radius:12px; padding:12px; }
  .jmobile-native-value strong { display:block; font-size:28px; }
  .jmobile-native-status { min-height:20px; padding:2px 4px; font-size:13px; color:#8be6d1; }
  .jmobile-native-status.error { color:#ff9aa9; }
  .jmobile-native-input { width:100%; min-height:46px; border:1px solid rgba(95,202,215,.3); background:#062f3e; color:#fff; border-radius:12px; padding:10px 12px; }
  .jmobile-music-hero { position:relative; overflow:hidden; padding:16px !important; background:radial-gradient(circle at 12% 0%,rgba(125,226,232,.22),transparent 36%),linear-gradient(145deg,rgba(7,64,81,.96),rgba(3,33,50,.94)) !important; border-color:rgba(226,181,94,.28) !important; box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08); }
  .jmobile-music-hero::after { content:"♪"; position:absolute; right:15px; top:10px; color:rgba(226,181,94,.22); font:900 58px/1 Arial,sans-serif; pointer-events:none; }
  .jmobile-music-hero h3 { color:#fff !important; font-size:22px !important; line-height:1.12 !important; padding-right:54px; }
  .jmobile-music-hero span { color:#d9eef2 !important; font-size:13px; }
  .jmobile-music-form { gap:12px !important; background:linear-gradient(145deg,rgba(5,45,60,.92),rgba(2,32,48,.86)) !important; }
  .jmobile-music-label { display:grid; gap:7px; color:#fff !important; font-size:12px; font-weight:900; letter-spacing:.03em; text-transform:uppercase; }
  .jmobile-music-input { width:100% !important; min-height:54px !important; border:1px solid rgba(125,226,232,.34) !important; border-radius:16px !important; background:rgba(255,255,255,.96) !important; color:#062535 !important; padding:0 15px !important; font-size:17px !important; font-weight:800 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 18px rgba(0,0,0,.14); caret-color:#0b95a2 !important; -webkit-user-select:text !important; user-select:text !important; touch-action:manipulation !important; }
  .jmobile-music-input::placeholder { color:#6b7f88 !important; font-weight:700; }
  .jmobile-music-input:focus { outline:3px solid rgba(125,226,232,.28) !important; border-color:#7de2e8 !important; }
  .jmobile-music-type { width:100%; min-height:58px !important; justify-content:space-between !important; text-align:left !important; border:1px solid rgba(125,226,232,.38) !important; border-radius:18px !important; background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(227,247,249,.94)) !important; color:#062535 !important; padding:0 16px !important; font-size:17px !important; font-weight:900 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 22px rgba(0,0,0,.16); }
  .jmobile-music-type.empty { color:#6b7f88 !important; font-weight:800 !important; }
  .jmobile-music-steady { display:flex; align-items:center; gap:9px; color:#dff7fa !important; font-size:12px; font-weight:800; }
  .jmobile-music-steady input { width:18px; height:18px; accent-color:#0ab5c2; }
  .jmobile-music-picker { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:start center; padding:max(34px,calc(env(safe-area-inset-top) + 18px)) 18px 18px; background:rgba(0,14,22,.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .jmobile-music-picker-card { width:min(92vw,440px); display:grid; gap:14px; padding:20px; border-radius:28px; background:radial-gradient(circle at 12% 0%,rgba(125,226,232,.25),transparent 35%),linear-gradient(145deg,#fbffff,#eaf7f9); color:#062535; border:1px solid rgba(255,255,255,.75); box-shadow:0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.9); }
  .jmobile-music-picker-card h3 { margin:0; color:#062535; font:800 25px/1.05 Georgia,serif; }
  .jmobile-music-picker-card p { margin:0; color:#44616b; font-size:13px; line-height:1.35; }
  .jmobile-music-picker-card input { width:100%; min-height:58px; border:1px solid rgba(6,127,142,.22); border-radius:18px; background:#fff; color:#062535; padding:0 15px; font-size:18px; font-weight:850; box-shadow:inset 0 1px 2px rgba(0,0,0,.06); }
  .jmobile-music-picker-card input:focus { outline:3px solid rgba(10,181,194,.18); border-color:#0ab5c2; }
  .jmobile-music-picker-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .jmobile-music-picker-actions button { min-height:48px; border-radius:16px; border:0; font-weight:1000; font-size:15px; }
  .jmobile-music-picker-cancel { background:#e8f3f5; color:#062535; }
  .jmobile-music-picker-save { background:linear-gradient(135deg,#16c9d1,#078a99); color:#fff; box-shadow:0 12px 22px rgba(7,138,153,.24); }
  .jmobile-music-chips { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:158px; overflow-y:auto; overflow-x:hidden; padding:1px 2px 4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .jmobile-music-chips button { min-width:0; min-height:32px !important; padding:6px 8px !important; border-radius:999px !important; background:rgba(255,255,255,.07) !important; color:#dff7fa !important; font-size:11px !important; border-color:rgba(125,226,232,.2) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .jmobile-music-play { min-height:50px !important; border-radius:16px !important; font-size:16px !important; }
  .jmobile-music-volume { display:grid; gap:8px; padding:10px 11px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(125,226,232,.14); }
  .jmobile-music-volume label { display:flex; justify-content:space-between; align-items:center; color:#fff !important; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
  .jmobile-temp-stepper { display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:stretch; gap:8px; }
  .jmobile-temp-stepper button { min-height:52px; padding:0; font-size:28px; line-height:1; }
  .jmobile-temp-value { min-width:0; height:52px; padding:0 6px; border:1px solid rgba(95,202,215,.3); border-radius:12px; background:#062f3e; color:#fff; text-align:center; font-size:25px !important; font-weight:900; -moz-appearance:textfield; }
  .jmobile-temp-value::-webkit-inner-spin-button, .jmobile-temp-value::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  .jmobile-temp-caption { display:flex; justify-content:space-between; gap:10px; color:#c5e1e6; font-size:12px; }
  .jmobile-jet-timer { display:block; margin-top:3px; color:#7de2e8 !important; font-variant-numeric:tabular-nums; }
  .jmobile-quiet-card { border-color:rgba(241,201,111,.45); background:linear-gradient(135deg,rgba(91,54,18,.72),rgba(5,44,58,.88)); }
  .jmobile-quiet-card button { width:100%; }
  .jmobile-native-range { width:100%; accent-color:#e0a52e; }
  .jmobile-climate-current { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:13px; border-radius:16px; background:linear-gradient(135deg,rgba(7,61,76,.96),rgba(4,40,58,.9)); border:1px solid rgba(125,226,232,.22); }
  .jmobile-climate-current small { display:block; color:#8edfe6 !important; font-size:9px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
  .jmobile-climate-current b { display:block; margin-top:3px; color:#fff !important; font-size:14px; }
  .jmobile-climate-current strong { color:#fff; font:800 34px/1 Arial,sans-serif; }
  .jmobile-control-note { padding:11px 12px; border-radius:14px; border:1px solid rgba(226,181,94,.28); background:rgba(226,181,94,.08); color:#f4dfaa !important; font-size:12px; line-height:1.42; }
  .jmobile-ac-schedule-form { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:11px; border-radius:14px; border:1px solid rgba(125,226,232,.18); background:rgba(255,255,255,.045); }
  .jmobile-ac-schedule-form label { color:#fff !important; font-size:11px; font-weight:900; }
  .jmobile-ac-schedule-form input { width:100%; margin-top:5px; min-height:42px; border:1px solid rgba(125,226,232,.28); border-radius:11px; background:#062f3e; color:#fff; text-align:center; font-size:18px; font-weight:900; }
  .jmobile-ac-schedule-form button, .jmobile-ac-schedule-form small { grid-column:1 / -1; }
  .jmobile-ac-schedule-form small { color:#bfe4ea !important; font-size:11px; line-height:1.35; }
  .jmobile-native-room { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; }
  .jmobile-light-room-head { display:contents; }
  .jmobile-light-expand { grid-column:1 / -1; width:100%; display:flex; justify-content:space-between; align-items:center; min-height:40px !important; padding:8px 11px !important; background:rgba(255,255,255,.055) !important; }
  .jmobile-light-expand::after { content:'+'; font-size:20px; }
  .jmobile-light-expand[aria-expanded="true"]::after { content:'\2212'; }
  .jmobile-light-room-body { grid-column:1 / -1; display:none; gap:10px; min-width:0; }
  .jmobile-light-room-body.open { display:grid; }
  .jmobile-light-section { grid-column:1 / -1; display:grid; gap:9px; padding-top:10px; border-top:1px solid rgba(95,202,215,.16); }
  .jmobile-light-label { display:flex; justify-content:space-between; color:#fff; font-size:12px; font-weight:800; }
  .jmobile-light-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .jmobile-light-colors { display:grid; grid-template-columns:repeat(8,minmax(28px,1fr)); gap:6px; }
  .jmobile-light-presets button { min-height:38px; padding:7px 5px; }
  .jmobile-light-color { width:100%; aspect-ratio:1; min-height:30px !important; padding:0 !important; border:2px solid rgba(255,255,255,.65) !important; border-radius:50% !important; }
  .jmobile-light-bulbs { display:grid; gap:8px; margin-top:4px; }
  .jmobile-light-bulb { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:10px; border-radius:12px; background:rgba(255,255,255,.045); }
  .jmobile-light-bulb-more { grid-column:1 / -1; width:100%; min-height:36px !important; padding:6px 10px !important; background:rgba(255,255,255,.05) !important; }
  .jmobile-light-bulb-controls { grid-column:1 / -1; display:none; min-width:0; }
  .jmobile-light-bulb-controls.open { display:block; }
  .jmobile-light-bulb .jmobile-light-section { margin-top:2px; }
  @media (max-width:420px) {
    .jmobile-native-card { padding:12px; }
    .jmobile-native-room { grid-template-columns:minmax(0,1fr) auto; }
    .jmobile-native-room > button:not(.jmobile-light-expand) { padding:9px 10px; }
    .jmobile-light-colors { grid-template-columns:repeat(4,minmax(34px,1fr)); gap:9px; }
    .jmobile-light-color { width:36px; justify-self:center; }
  }
  .jmobile-native-camera { display:grid; gap:8px; margin:4px 0 12px; }
  .jmobile-native-camera img { display:block; width:100%; min-height:150px; object-fit:cover; border-radius:14px; background:#031f29; cursor:zoom-in; }
  .jmobile-camera-live { position:fixed; inset:0; z-index:2147483646; display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)); background:rgba(0,12,20,.98); color:#fff; }
  .jmobile-camera-live header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .jmobile-camera-live h2 { margin:0; color:#fff; font-size:20px; }
  .jmobile-camera-live button { min-height:44px; border:1px solid rgba(255,255,255,.3); border-radius:12px; background:#0c4050; color:#fff; padding:9px 14px; font-weight:900; }
  .jmobile-camera-live img { width:100%; height:100%; min-height:0; object-fit:contain; background:#000; border-radius:12px; }
  .jmobile-camera-live small { color:#a9d4da; text-align:center; }
  .jmobile-laundry-card { grid-template-columns:58px minmax(0,1fr); align-items:center; }
  .jmobile-laundry-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:15px; background:rgba(125,226,232,.12); border:1px solid rgba(125,226,232,.28); color:#7de2e8; font-size:30px; font-style:normal; }
  .jmobile-checkout { display:grid; gap:10px; color:#fff; }
  .jmobile-checkout-hero { display:grid; grid-template-columns:46px 1fr; gap:11px; align-items:center; padding:15px; border-radius:20px; border:1px solid rgba(226,181,94,.4); background:radial-gradient(circle at 92% 5%,rgba(226,181,94,.24),transparent 34%),linear-gradient(145deg,#0b4a5b,#062b3c); box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08); }
  .jmobile-checkout-hero i { display:grid; place-items:center; width:46px; height:46px; border-radius:16px; background:linear-gradient(135deg,#f0c76d,#d99928); color:#062535; font-size:24px; font-style:normal; font-weight:900; box-shadow:0 7px 18px rgba(217,153,40,.25); }
  .jmobile-checkout-hero small { display:block; color:#8edfe6; font-weight:900; letter-spacing:1.1px; font-size:9px; }
  .jmobile-checkout-hero strong { display:block; margin-top:3px; color:#fff; font:700 26px/1 Georgia,serif; }
  .jmobile-checkout-hero p { margin:6px 0 0; color:#d8edf0 !important; font-size:11px; line-height:1.35; }
  .jmobile-checkout-list { display:grid; gap:7px; }
  .jmobile-checkout-step { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; padding:12px; border-radius:16px; background:linear-gradient(135deg,rgba(5,44,58,.9),rgba(4,35,51,.86)); border:1px solid rgba(95,202,215,.18); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
  .jmobile-checkout-step i { display:grid; place-items:center; width:32px; height:32px; border-radius:12px; background:rgba(226,181,94,.18); color:#f1c96f; font-style:normal; font-weight:900; }
  .jmobile-checkout-step b { display:block; color:#fff; }
  .jmobile-checkout-step span { display:block; margin-top:3px; color:#d6e9ed !important; font-size:11px; line-height:1.38; }
  .jmobile-checkout button.primary { height:44px; border-radius:14px; box-shadow:0 8px 18px rgba(217,153,40,.22); }
  .jmobile-checkout-save { display:grid; gap:8px; }
  .jmobile-checkout-save article { padding:12px 13px; border-radius:16px; border:1px solid rgba(226,181,94,.26); background:linear-gradient(135deg,rgba(5,44,58,.92),rgba(4,35,51,.86)); color:#fff; }
  .jmobile-checkout-save small { display:block; color:#8edfe6; font-size:9px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
  .jmobile-checkout-save strong { display:block; margin-top:5px; color:#fff4d5; font:900 18px/1 Arial,sans-serif; }
  .jmobile-checkout-save span { display:block; margin-top:4px; color:#d6e9ed; font-size:11px; line-height:1.35; }
  body.jarvis-mobile-chat .input-bar { display:flex !important; visibility:visible !important; opacity:1 !important; position:relative !important; z-index:2147483200 !important; pointer-events:auto !important; touch-action:manipulation !important; }
  body.jarvis-mobile-chat .input-pill,
  body.jarvis-mobile-chat #jarvisInput,
  body.jarvis-mobile-chat #jarvisInputMicBtn,
  body.jarvis-mobile-chat #jarvisSendButton { pointer-events:auto !important; touch-action:manipulation !important; }
  body.jarvis-mobile-chat #jarvisInput { display:block !important; visibility:visible !important; opacity:1 !important; -webkit-user-select:text !important; user-select:text !important; caret-color:#0891b2 !important; }
  body.jarvis-mobile-chat #jarvisInputMicBtn { display:flex !important; }
  .jmobile-preview-card { text-align:center; padding:24px 16px; }
  .jmobile-preview-card i { display:block; font-size:34px; margin-bottom:8px; }
  .jmobile-preview-card p { color:#b6d2d8; line-height:1.5; }
  body.jarvis-guest-compact .jmobile-perks, body.jarvis-guest-compact .jmobile-perk-card,
  body.jarvis-guest-compact .jmobile-perk-card h2, body.jarvis-guest-compact .jmobile-perk-card p,
  body.jarvis-guest-compact .jmobile-perk-card b, body.jarvis-guest-compact .jmobile-perk-card span,
  body.jarvis-guest-compact .jmobile-perk-empty, body.jarvis-guest-compact .jmobile-perk-empty p { color:#fff !important; }
  body.jarvis-guest-compact .jarvis-perk-pop { z-index:2147483645 !important; touch-action:manipulation !important; }
  body.jarvis-guest-compact .jarvis-perk-pop .jarvis-perk-dismiss { position:absolute !important; top:11px !important; right:11px !important; width:30px !important; height:30px !important; min-height:30px !important; margin:0 !important; padding:0 !important; border:1px solid rgba(255,255,255,.38) !important; border-radius:50% !important; background:rgba(3,36,48,.78) !important; color:#fff !important; box-shadow:0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important; font-size:20px !important; line-height:1 !important; touch-action:manipulation !important; }
  @media (max-width:1024px) {
    body.jarvis-guest-compact .jarvis-mobile-dashboard { bottom:calc(78px + env(safe-area-inset-bottom)) !important; }
    body.jarvis-guest-compact .jarvis-mobile-tabs {
      height:calc(78px + env(safe-area-inset-bottom)) !important;
      padding:6px 8px max(5px,env(safe-area-inset-bottom)) !important;
      gap:7px !important;
      background:linear-gradient(180deg,rgba(5,40,53,.96),rgba(0,18,30,.995)) !important;
      border-top:1px solid rgba(226,181,94,.24) !important;
      box-shadow:0 -14px 36px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06) !important;
      backdrop-filter:blur(18px) saturate(135%) !important;
      -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
    }
    body.jarvis-guest-compact .jarvis-mobile-tabs button {
      flex:0 0 86px !important;
      min-width:86px !important;
      height:58px !important;
      padding:4px 6px 5px !important;
      gap:3px !important;
      border:1px solid rgba(255,255,255,.055) !important;
      border-radius:18px !important;
      color:#e3edf1 !important;
      font-size:11px !important;
      line-height:1.08 !important;
      font-weight:900 !important;
      letter-spacing:.01em !important;
      text-shadow:0 1px 6px rgba(0,0,0,.45) !important;
      background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
    }
    body.jarvis-guest-compact .jarvis-mobile-tabs .nav-glyph {
      width:30px !important;
      height:26px !important;
      font-size:18px !important;
      color:#eef8fa !important;
      background:radial-gradient(circle at 35% 20%,rgba(255,255,255,.18),rgba(255,255,255,.045)) !important;
      border:1px solid rgba(255,255,255,.08) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
    }
    body.jarvis-guest-compact .jarvis-mobile-tabs button.active {
      color:#ffe09a !important;
      border-color:rgba(241,201,111,.46) !important;
      background:linear-gradient(180deg,rgba(226,181,94,.24),rgba(226,181,94,.09)) !important;
      box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
    }
    body.jarvis-guest-compact .jarvis-mobile-tabs button.active .nav-glyph {
      color:#ffe09a !important;
      background:radial-gradient(circle at 35% 20%,rgba(255,244,204,.34),rgba(226,181,94,.14)) !important;
      border-color:rgba(241,201,111,.38) !important;
      box-shadow:0 0 16px rgba(226,181,94,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
    }
  }