/* Persistent ride actions. Empty rail cells pass pointer input through to the
   world; only the labelled 44px controls intercept touches. */
#ride-vehicle-rail,#ride-motion-rail {display:none}
#cruise,#lights,#flash {display:none!important}
body.ride-ui:not(.hud-mobile) #help {bottom:calc(var(--safe,16px) + 124px);max-width:calc(100vw - 40px);line-height:1.5}
body.ride-ui:not(.hud-mobile) #telemetry {width:90px;min-width:90px;box-sizing:border-box}
body.ride-ui:not(.hud-mobile) #autodrive-quick {top:84px;right:122px;max-width:calc(100vw - 390px)}
body.ride-ui:not(.hud-mobile) #auto-target {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ride-hail-options {margin:8px 0 14px;border:1px solid #e4f0d62b;border-radius:14px;background:#102a335c;color:#fff}
#ride-hail-options summary {min-height:44px;padding:11px 12px;font-size:13px;cursor:pointer;touch-action:manipulation}
#ride-hail-form {padding:0 12px 12px}
#ride-hail-form label {display:block;margin-bottom:6px;font-size:12px}
#ride-hail-form select,#ride-hail-form button {width:100%;min-height:44px;margin:4px 0;color:#fff;background:#183a43c9;border:1px solid #e4f0d64a;border-radius:12px;padding:9px 12px}
#ride-hail-form select option {background:#183a43}
#look-options {margin:16px 0;padding:10px 12px;border:1px solid #d4e7d52e;border-radius:12px}
#look-options legend {padding:0 5px;font-size:13px}
#options #look-options label {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0;font-size:13px;cursor:pointer}
#look-options input {width:24px;height:24px;min-width:24px;accent-color:#c9e4b7;cursor:pointer}
#look-options .note {margin:6px 0 0}
#look-options select {width:min(210px,65%);min-height:44px;font-size:16px}
#steering-thumb {display:none}
body.thumb-steering.driving #steering-dial {display:none}
body.thumb-steering.driving #steering-thumb {display:flex;align-items:center;justify-content:center;gap:9px;position:absolute;inset:0;pointer-events:none}
body.driving #joystick #steering-thumb span {display:block;position:static;inset:auto;pointer-events:none}
body.driving #joystick #steering-thumb .steer-arrow {width:auto;font-size:32px;line-height:1;color:#e6f0df}
body.driving #joystick #steering-thumb .steer-track {position:relative;width:68px;height:4px;border-radius:8px;background:#d4e4df55}
#steering-thumb .steer-track i {display:block;position:absolute;left:50%;top:50%;width:36px;height:36px;border:2px solid #dcebd9;border-radius:50%;background:#31545bee;transform:translate(calc(-50% + var(--steer-axis,0)*32px),-50%)}
body.hud-mobile.driving.thumb-steering #joystick {width:140px;height:100px;box-sizing:border-box;opacity:1;border:1px solid #e4f0d64a;border-radius:26px;background:#102c3270;touch-action:none}
body.hud-mobile.driving.thumb-steering #joystick #steering-caption {display:block;bottom:9px;line-height:14px;font-size:10px;pointer-events:none}
body.ride-ui.hud-mobile.driving #pedals {width:146px;grid-template-columns:68px 72px;grid-template-rows:44px 68px}
@media(max-width:359px){body.hud-mobile.driving.thumb-steering #joystick {width:126px}body.ride-ui.hud-mobile.driving #pedals {width:134px;grid-template-columns:60px 68px}}
#ride-safe-probe {position:fixed;bottom:var(--safe,12px);width:0;height:0;visibility:hidden;pointer-events:none}
#ride-top-probe {position:fixed;top:env(safe-area-inset-top,0px);width:0;height:0;visibility:hidden;pointer-events:none}
body.ride-ui :is(#ride-vehicle-rail,#ride-motion-rail) {position:fixed;z-index:6;display:block;bottom:var(--safe,16px);max-width:calc(100vw - 24px);pointer-events:none}
body.ride-ui #ride-vehicle-rail {left:var(--hud-left,20px)}
body.ride-ui #ride-motion-rail {right:var(--hud-right,20px)}
#ride-vehicle-title,#ride-motion-title {display:block;margin-bottom:3px;color:#fff;font-size:10px;font-weight:650;line-height:14px;text-shadow:0 1px 3px #000,0 0 5px #0007}
#ride-motion-title {text-align:right}
#ride-vehicle-buttons,#ride-motion-buttons {display:grid;grid-template-rows:repeat(var(--ride-rows,2),44px);grid-auto-flow:column;grid-auto-columns:44px;gap:3px;position:relative;pointer-events:none}
#ride-motion-buttons {direction:rtl}
body.ride-ui :is(#ride-vehicle-buttons,#ride-motion-buttons) button {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:1px;border:1px solid #eff7e82b;border-radius:11px;background:#102a3340;color:#fff;font-size:9.5px;line-height:11px;font-weight:600;text-shadow:0 1px 3px #000;box-shadow:none;direction:ltr;pointer-events:auto;white-space:normal;word-break:keep-all;touch-action:manipulation}
body.ride-ui :is(#ride-vehicle-buttons,#ride-motion-buttons) button span {position:static;width:auto;height:auto;max-height:22px;margin:0;clip-path:none;overflow:hidden;font-size:9.5px;line-height:11px}
body.ride-ui :is(#ride-vehicle-buttons,#ride-motion-buttons) svg {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #0009)}
body.ride-ui :is(#ride-vehicle-buttons,#ride-motion-buttons) button[aria-pressed=true] {background:#cde4bce6;color:#16372c;text-shadow:none;border-color:#e1f2d3}
body.ride-ui :is(#ride-vehicle-buttons,#ride-motion-buttons) button[aria-disabled=true],body.ride-ui :is(#ride-vehicle-buttons,#ride-motion-buttons) button:disabled {color:#c1cccc;background:#172c3333;opacity:.65}
body.ride-ui #ride-vehicle-buttons button.signal-pulse {color:#ffe5ad;background:#8a6011b0;border-color:#ffd378}
body.ride-ui #ride-motion-buttons :is(#social-quick,#refreshment-pocket) {position:static;inset:auto;transform:none;display:contents;direction:ltr;background:none;border:0;padding:0;box-shadow:none;max-width:none;width:auto;pointer-events:none}
body.ride-ui.ride-actions-compact #ride-motion-buttons :is(#refreshment-pocket,#hud-photo) {display:none}
body.ride-ui #social-quick #roof-cheer {display:none!important}
body.ride-ui #ride-motion-buttons #together-quick-name {position:absolute;top:-17px;right:34px;bottom:auto;max-width:145px;padding:0;background:none;font-size:9px;line-height:14px;direction:ltr;text-shadow:0 1px 3px #000;color:#d9ebcb;pointer-events:none}
body.ride-ui #vehicle-panel #hud-categories {position:static;inset:auto;transform:none;width:auto;max-width:none;padding:0;margin:8px 0;display:flex;background:none;border:0;box-shadow:none}
body.ride-ui #vehicle-panel #hud-vehicle {display:none}
body.ride-ui #shop-strip {display:none}
body.ride-ui:not(.hud-mobile) #quick {top:84px;bottom:auto;left:20px;right:auto;transform:none;width:max-content;max-width:calc(100vw - 200px)}
body.ride-ui:not(.hud-mobile) #telemetry {top:84px;bottom:auto;right:20px}
body.ride-ui:has(#vehicle-panel:not([hidden]),#motion-panel:not([hidden]),#window-panel:not([hidden]),#destination-panel:not([hidden]),#options:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#profile-panel:not([hidden]),#channel-panel:not([hidden])) :is(#ride-vehicle-rail,#ride-motion-rail) {visibility:hidden;pointer-events:none}
body.photo-mode :is(#ride-vehicle-rail,#ride-motion-rail,#boarding-prompt) {display:none!important}

/* A car-specific interaction prompt only exists within boarding distance. */
#boarding-prompt {position:fixed;z-index:6;left:50%;bottom:calc(var(--safe,16px) + 96px);transform:translateX(-50%);width:min(300px,calc(100vw - 32px));pointer-events:none}
#boarding-prompt:not(:has(button:not([hidden]))) {display:none}
#boarding-prompt #enter {display:block;width:100%;min-height:58px;padding:9px 14px;white-space:pre-line;font-size:13px;font-weight:700;line-height:1.5;color:#17382d;background:#d1e9baeF;border:2px solid #ecf9db;border-radius:17px;box-shadow:0 3px 14px #0005;pointer-events:auto;text-shadow:none;touch-action:manipulation}
#boarding-prompt #enter:disabled {background:#435758df;border-color:#9aaba7;color:#e1e8e0;opacity:1}
body:has(#vehicle-panel:not([hidden]),#motion-panel:not([hidden]),#window-panel:not([hidden]),#destination-panel:not([hidden]),#options:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#profile-panel:not([hidden]),#channel-panel:not([hidden])) #boarding-prompt {visibility:hidden;pointer-events:none}

body.ride-ui.hud-mobile :is(#ride-vehicle-rail,#ride-motion-rail) {top:var(--ride-top,62px);bottom:auto}
body.ride-ui.cockpit-compact :is(#ride-vehicle-rail,#ride-motion-rail) {top:auto;bottom:calc(var(--safe,12px) + 8px)}
body.ride-ui.cockpit-compact.driving:not(.autodriving) :is(#ride-vehicle-rail,#ride-motion-rail) {bottom:calc(var(--safe,12px) + 124px)}
body.ride-ui.cockpit-compact :is(#ride-vehicle-title,#ride-motion-title) {display:none}
body.ride-ui.cockpit-compact #motion-actions #refreshment-pocket {position:static;inset:auto;transform:none;grid-column:1/-1;width:100%;max-width:none;box-sizing:border-box}
body.ride-ui.cockpit-compact #motion-actions #refreshment-pocket:not([hidden]) {display:flex;visibility:visible;pointer-events:auto;flex-wrap:wrap}
body.ride-ui.hud-mobile header {position:fixed;top:env(safe-area-inset-top,0px);left:auto;right:var(--hud-right);width:auto;min-height:0;padding:5px 0;background:none;pointer-events:none}
body.ride-ui.hud-mobile header > :not(#menu) {display:none}
body.ride-ui.hud-mobile header #menu {display:flex;pointer-events:auto;width:44px;min-width:44px;min-height:44px;height:44px;padding:3px;border-radius:12px;font-size:10px;background:#102c326b;border:1px solid #e4f0d625}
body.ride-ui.hud-ready.hud-mobile #quick,body.ride-ui.hud-ready.hud-mobile.hud-landscape #quick,body.ride-ui.hud-ready.hud-mobile:not(.driving):not(.hud-landscape) #quick {top:calc(env(safe-area-inset-top,0px) + 5px);left:var(--hud-left);right:auto;bottom:auto;transform:none;width:max-content;max-width:calc(100vw - 80px);gap:4px}
body.ride-ui.hud-ready.hud-mobile #quick button {min-width:44px;min-height:44px;height:44px;padding:4px 6px;font-size:10px;border-radius:12px;background:#102c326b;border:1px solid #e4f0d625;white-space:nowrap}
body.ride-ui #quick #enter {order:-1}
body.ride-ui.hud-ready.hud-mobile #quick #auto {position:fixed;top:calc(env(safe-area-inset-top,0px) + 5px);right:calc(var(--hud-right) + 50px);width:56px;min-width:56px;padding:3px;white-space:normal;line-height:1.15}
body.ride-ui.hud-mobile #telemetry,body.ride-ui.hud-mobile.hud-landscape #telemetry {top:calc(env(safe-area-inset-top,0px) + 5px);left:50%;right:auto;bottom:auto;transform:translateX(-50%);width:46px;min-width:46px;padding:2px 0;background:transparent;border:0;box-shadow:none;text-shadow:0 1px 4px #000}
body.ride-ui.hud-mobile #telemetry #mode {display:none}
body.ride-ui.hud-mobile #speed {font-size:21px}
body.ride-ui.hud-mobile #pedals {right:var(--hud-right);bottom:var(--safe);width:134px;grid-template-columns:60px 68px;grid-template-rows:44px 62px;gap:6px}
body.ride-ui.hud-mobile #pedals button {min-height:44px;padding:4px;font-size:11px;border:1px solid #e4f0d63d;background:#183a408c}
body.ride-ui.hud-mobile #pedals button[data-key=accelerate] {background:#b4d2a09c;color:#132a24}
body.ride-ui.hud-mobile #pedals button[data-key=brake] {background:#784f5399;color:#fff}
body.ride-ui.hud-mobile #cockpit-trip-actions #autodrive-quick {position:static;inset:auto;transform:none;flex:1 0 100%;width:100%;max-width:none}
body.ride-ui.hud-mobile #message:not([data-kind=operation]) {top:calc(env(safe-area-inset-top,0px) + 62px);max-width:calc(100vw - 128px);font-size:11px}
body.hud-mobile #boarding-prompt {bottom:calc(var(--safe) + 192px);width:min(288px,calc(100vw - 32px))}
body.hud-landscape #boarding-prompt {bottom:calc(var(--safe) + 118px);width:min(288px,calc(100vw - 280px))}
/* A single proximity dock prevents cafe, bench and boarding prompts from
   competing for the same screen position. The road/view remains touchable. */
#boarding-prompt {display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:min(360px,calc(100vw - 32px))}
#boarding-prompt #enter {order:-2;flex:1 0 100%}
#boarding-prompt > button:not(#enter) {position:static;inset:auto;transform:none;display:flex;align-items:center;justify-content:center;gap:6px;flex:1 1 auto;min-height:44px;min-width:44px;padding:8px 10px;border:1px solid #d1e7c967;background:#183d40e8;border-radius:12px;color:#fff;font-size:12px;line-height:1.3;pointer-events:auto;touch-action:manipulation}
#boarding-prompt > button:disabled {color:#bbc9c3;background:#263e40df}
#boarding-prompt svg {width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
#boarding-prompt #cafe-coffee {background:#d1e9baef;color:#17382d;border-color:#ecf9db}
body.hud-mobile #boarding-prompt {width:min(360px,calc(100vw - 32px))}
body.hud-landscape #boarding-prompt {width:min(360px,calc(100vw - 280px))}
body:not(.ride-ui) #shop-strip {z-index:10;bottom:calc(var(--safe,16px) + 155px);width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 180px);overflow:auto;overscroll-behavior:contain;padding:14px;background:#102c32f5;box-shadow:0 8px 28px #0005}
#shop-strip .shop-heading {padding-right:46px;display:block;line-height:1.6}
#shop-strip .shop-heading span {display:block}
#shop-strip #shop-close {position:absolute;top:10px;right:10px;min-width:44px;min-height:44px;padding:5px;font-size:11px}
#shop-strip .shop-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
#shop-strip .shop-grid button {min-height:52px}
body.hud-mobile:not(.ride-ui):not(.hud-landscape) #shop-strip {bottom:calc(var(--safe) + 185px)}
body.hud-landscape:not(.ride-ui) #shop-strip {bottom:calc(var(--safe) + 58px);width:min(440px,calc(100vw - 280px));max-height:calc(100dvh - 115px)}
body:has(#shop-strip:not([hidden])) #boarding-prompt {visibility:hidden;pointer-events:none}
body.photo-mode #shop-strip {display:none!important}
/* Keep names on the walking shortcuts: an icon alone should not be a puzzle. */
body.hud-mobile:not(.ride-ui) #hud-categories {max-width:60vw}
body.hud-mobile:not(.ride-ui) #hud-categories button {height:48px;min-height:48px}
body.hud-mobile:not(.ride-ui) #hud-categories button span {position:static;width:auto;height:auto;margin:0;clip-path:none;overflow:visible;font-size:9px;line-height:11px}
body.hud-mobile:not(.ride-ui) #hud-categories svg {width:19px;height:19px}
body.hud-mobile:not(.ride-ui) #refreshment-pocket {left:var(--hud-left);right:auto;bottom:calc(var(--safe) + 186px);width:max-content;max-width:calc(100vw - 24px);padding:3px;gap:3px;background:#102c32b8;border-radius:14px}
body.hud-mobile:not(.ride-ui) #refreshment-pocket button {flex:none;width:clamp(60px,20vw,80px);min-width:44px;min-height:48px;padding:3px;font-size:10px}
body.hud-mobile:not(.ride-ui) #refreshment-pocket svg {width:19px;height:19px}
body.hud-mobile:not(.ride-ui):not(.hud-landscape):has(#refreshment-pocket:not([hidden])) #boarding-prompt {bottom:calc(var(--safe) + 248px)}
body.hud-landscape:not(.ride-ui) #refreshment-pocket {left:calc(var(--hud-left) + 108px);bottom:calc(var(--safe) + 60px);max-width:calc(100vw - 340px)}
body:has(#shop-strip:not([hidden])):not(.ride-ui) #refreshment-pocket {visibility:hidden;pointer-events:none}
body:not(.ride-ui):not(.hud-mobile) #refreshment-pocket {bottom:calc(var(--safe,16px) + 152px)}
body:not(.ride-ui):not(.hud-mobile) #vehicle-context {position:absolute;right:0;bottom:calc(100% + 8px);width:280px;max-width:calc(100vw - 40px);margin:0;padding:8px 12px;font-size:12px;line-height:1.5;white-space:normal}
body:not(.ride-ui):not(.hud-mobile) #help {bottom:calc(var(--safe,16px) + 152px)}
body:not(.ride-ui):not(.hud-mobile):has(#refreshment-pocket:not([hidden])) #help {bottom:calc(var(--safe,16px) + 216px)}
@media(max-width:359px){
 body.ride-ui.hud-mobile #telemetry {left:56%;width:30px;min-width:30px;padding:0}
 body.ride-ui.hud-mobile #telemetry span {display:none}
}
@media(max-height:359px){
 body.ride-ui.hud-mobile #pedals {width:112px;grid-template-columns:52px 56px;grid-template-rows:44px 44px;gap:4px}
 body.ride-ui.hud-mobile #joystick {width:92px;height:92px}
}
/* Request cards occupy the space between the two touch rails. */
body.ride-ui.hud-mobile #ride-request {right:var(--ride-right-clear,72px);max-width:min(320px,calc(100vw - var(--ride-left-clear,72px) - var(--ride-right-clear,72px)))}
body.ride-ui.hud-mobile #journey-status {left:calc((100vw + var(--ride-left-clear,72px) - var(--ride-right-clear,72px))/2);max-width:calc(100vw - var(--ride-left-clear,72px) - var(--ride-right-clear,72px))}
/* A named, visible entry point teaches the feature without another HUD panel. */
body.ride-ui #quick #auto[aria-pressed=false] {--control-surface:#cde4bce6;--control-text:#16372c;--control-border:#e1f2d3;font-weight:700}
body.ride-ui #quick #auto[aria-pressed=true] {--control-selected:#102c326b}
#destination-panel #auto-destination-loop {grid-column:1/-1;--control-surface:#315e68e6;--control-border:#e1f2d3}
#destination-panel #auto-destinations .scenic-recommended {grid-column:1/-1;--control-surface:#315e68e6;--control-border:#dcebc9}
body.hud-mobile:not(.ride-ui) #hud-categories {max-width:calc(100vw - 24px);flex-wrap:wrap}
#ride-status-hud {display:contents}
body:is(.ride-ui,.lookout-mode) #ride-status-hud {
  position:fixed;
  z-index:9;
  top:142px;
  inset-inline:0;
  margin-inline:auto;
  width:min(340px,calc(100vw - 32px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:none;
}
body.hud-mobile:is(.ride-ui,.lookout-mode) #ride-status-hud {
  top:calc(env(safe-area-inset-top,0px) + 58px);
}
body.hud-mobile.ride-ui:not(.lookout-mode) #ride-status-hud {
  inset-inline:var(--ride-left-clear,64px) var(--ride-right-clear,64px);
  width:auto;
  max-width:340px;
}
body.cockpit-compact.hud-landscape.ride-ui:not(.lookout-mode) #ride-status-hud {
  inset-inline:12px;
  flex-flow:row wrap;
  justify-content:center;
}
body.hud-mobile.lookout-mode:not(.ride-ui):not(.hud-landscape) #ride-status-hud {
  top:calc(env(safe-area-inset-top,0px) + 68px);
}
body:is(.ride-ui,.lookout-mode) #ride-status-hud > :is(#message:not([data-kind=operation]),#together-request,#drive-recommendation,#lookout-entry),
body.lookout-mode #ride-status-hud > #message,
body.ride-ui.hud-mobile #ride-status-hud > #world-mini {
  position:static;
  inset:auto;
  transform:none;
  box-sizing:border-box;
  max-width:100%;
  overflow-wrap:anywhere;
}
#ride-status-hud > :is(button,#together-request) {pointer-events:auto}
body:is(.photo-mode,.map-open,.chat-open,.presence-open) #ride-status-hud > :is(#lookout-entry,#together-request),
body:has(#options:not([hidden]),#vehicle-panel:not([hidden]),#motion-panel:not([hidden]),#window-panel:not([hidden]),
  #destination-panel:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#profile-panel:not([hidden]),
  #channel-panel:not([hidden])) #ride-status-hud > :is(#lookout-entry,#together-request) {
  display:none;
}
body.ride-ui #ride-status-hud > #lookout-entry {
  --control-surface:#cde4bce6;
  --control-text:#16372c;
  --control-border:#e1f2d3;
  min-height:44px;
  padding:6px 12px;
  font-weight:700;
}
#lookout-hud:not([hidden]) {
  position:fixed;
  left:50%;
  bottom:var(--safe,16px);
  transform:translateX(-50%);
  z-index:9;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3px;
  width:max-content;
  box-sizing:border-box;
  max-width:calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
  padding:4px;
  border:1px solid #d6f0e33b;
  border-radius:15px;
  background:#102a337d;
}
#lookout-hud button {
  min-height:44px;
  padding:5px clamp(5px,1.9vw,10px);
  border-radius:11px;
  font-size:clamp(10px,3vw,13px);
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  touch-action:manipulation;
}
#lookout-together:not([hidden]) {
  flex:1 0 100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
#lookout-together #together-quick-name {
  position:static;
  min-width:0;
  background:none;
  padding:0 4px;
}
#lookout-together button {flex:none}
#lookout-hud > :is(#lookout-snacks,#lookout-motions):not([hidden]) {
  position:absolute;
  inset:auto 0 calc(100% + 6px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  padding:6px;
  max-height:calc(100dvh - 170px);
  overflow:auto;
  border:1px solid #d6f0e349;
  border-radius:13px;
  background:#102a33e8;
}
#lookout-bag-hint {
  grid-column:1/-1;
  margin:2px 5px;
  font-size:11px;
}
#lookout-hud button[aria-pressed=true] {
  --control-selected:#cde4bce6;
  --control-text:#16372c;
  --control-selected-border:#e1f2d3;
}
body.lookout-mode :is(#quick,#action-dock,#joystick,#pedals,#walk-controls,#cockpit-wheel-target,#autodrive-quick,
  #telemetry,#hud-categories,#driving-dock,#refreshment-pocket,#ride-vehicle-rail,#ride-motion-rail,#social-quick,
  #boarding-prompt,#shared-action,#help,#world-mini) {
  display:none!important;
}
body.photo-mode #lookout-hud,body.map-open #lookout-hud,body.chat-open #lookout-hud,body.presence-open #lookout-hud,
body:has(#options:not([hidden]),#rest-panel:not([hidden]),#profile-panel:not([hidden]),#channel-panel:not([hidden])) #lookout-hud {
  visibility:hidden;
}
#drive-recommendation:not([hidden]) {
  min-height:44px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-content:center;
  gap:2px;
  border-radius:13px;
  padding:4px 8px;
  text-align:center;
  line-height:1.2;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:normal;
  touch-action:manipulation;
  --control-border:#d0e6c59e;
}
#drive-recommendation-kicker {font-size:10px;color:#c7e4c4}
#drive-recommendation-name {font-size:12px;font-weight:650}
#drive-recommendation > span {overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body:is(.photo-mode,.map-open,.chat-open,.lookout-mode,.presence-open) #drive-recommendation,
body:has(#vehicle-panel:not([hidden]),#motion-panel:not([hidden]),#window-panel:not([hidden]),#destination-panel:not([hidden]),
  #options:not([hidden]),#garage-panel:not([hidden]),#rest-panel:not([hidden]),#profile-panel:not([hidden]),
  #channel-panel:not([hidden]),#journey-status:not([hidden]),#ride-request:not([hidden])) #drive-recommendation {
  display:none;
}