/* Unified ProfilePro: Calendar / Room inside the unified shell, on web AND phones. */
html body.room-native-shell[data-unified-shell] .room-sidebar,
html body.room-native-shell[data-unified-shell] .room-brand-link,
html body.room-native-shell[data-unified-shell] .room-app-switch{display:none !important;}
html body.room-native-shell[data-unified-shell] .room-topbar{justify-content:flex-end;}
html body.room-native-shell[data-unified-shell] .room-app{display:block;max-width:1500px;margin:0 auto;}
/* the page's own tab row (Calendar / Rooms) is the pill strip */
html body.room-native-shell[data-unified-shell] .room-mobile-tabs{display:flex !important;gap:8px;margin:0 0 18px;padding:0;overflow-x:auto;scrollbar-width:none;border:0;background:transparent;position:static;}
html body.room-native-shell[data-unified-shell] .room-mobile-tabs::-webkit-scrollbar{display:none;}
html body.room-native-shell[data-unified-shell] .room-mobile-tabs button{flex:none;height:36px;padding:0 16px;border:1px solid #e3e6e8;border-radius:999px;background:#fff;color:#111;font:500 13px 'Cabinet Grotesk',sans-serif;white-space:nowrap;cursor:pointer;}
html body.room-native-shell[data-unified-shell] .room-mobile-tabs button:hover{background:#f3f4f5;}
html body.room-native-shell[data-unified-shell] .room-mobile-tabs button.active{background:#F0F9F6 !important;border-color:#0F766D !important;color:#0F766D !important;box-shadow:none !important;}
@media (min-width:721px){
  html body.room-native-shell[data-unified-shell]{padding-left:var(--app-sidebar-current) !important;transition:padding-left .22s var(--ease,ease);}
  html body.room-native-shell[data-unified-shell] .room-topbar-brand{display:none !important;}
}
@media (max-width:720px){
  html body.room-native-shell[data-unified-shell] .room-topbar{justify-content:space-between;}
}

/* Stage 32: no profile icon in the Calendar header (profile + Log Out live in the ProfilePro sidebar) */
#roomProfile,.room-profile-avatar{display:none !important;}

/* Calendar header: page title lives in the top header; mobile gets a plus at the right end */
html body.room-native-shell[data-unified-shell] .room-topbar-title{margin:0 auto 0 0;font:700 19px 'Cabinet Grotesk',Arial,sans-serif;color:#0e1a27;letter-spacing:-.01em;white-space:nowrap;}
html body.room-native-shell[data-unified-shell] .room-top-create{display:none;}
@media (max-width:720px){
  html body.room-native-shell[data-unified-shell] .room-topbar-title{margin:0 auto 0 8px;font-size:17px;}
  html body.room-native-shell[data-unified-shell][data-room-view="meetings"] .room-top-create{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#0e1a27;cursor:pointer;}
  html body.room-native-shell[data-unified-shell][data-room-view="meetings"] .room-top-create:active{background:#eef2f4;}
  html body.room-native-shell[data-unified-shell] .room-calendar-create{display:none !important;}
}

/* Calendar event tags: solid, saturated, readable (web + mobile) */
html body .room-calendar-event{background:#0f766d;color:#fff;font-weight:700;box-shadow:0 1px 2px #0f766d40;}
html body .room-calendar-event.kevo{background:#2f5fb3;color:#fff;box-shadow:0 1px 2px #2f5fb340;}
html body .room-calendar-event.storefront{background:#7a3fc4;color:#fff;box-shadow:0 1px 2px #7a3fc440;}
html body .room-calendar-event.profilepro-interview{background:#d97706;color:#fff;box-shadow:0 1px 2px #d9770640;}
html body .room-timeline-event{background:#0f766d;color:#fff;}

/* Calendar page uses the same background as the Feed (--canvas grey), web + mobile */
html body.app-body.room-native-shell[data-unified-shell],
html body.app-body:has(.room-topbar){background:var(--canvas-soft,#F8F8F7) !important;}
html body.room-native-shell[data-unified-shell] .room-app,
html body.room-native-shell[data-unified-shell] .room-content{background:var(--canvas-soft,#F8F8F7) !important;}

/* ===== Calendar restyle: Google Calendar month look (rounded white board, centred day numbers, weekday label on the first row) ===== */
html body.room-native-shell .room-calendar-toolbar{margin:0 0 14px;}
html body.room-native-shell .room-calendar-controls{gap:6px;flex-wrap:wrap;width:100%;}
html body.room-native-shell .room-calendar-controls .room-btn.secondary{height:38px;padding:0 18px;border-radius:999px;background:#fff;border:1px solid #747775;color:#1f1f1f;font-weight:600;font-size:13px;}
html body.room-native-shell .room-calendar-arrow{width:34px;height:34px;color:#444746;font-size:22px;line-height:1;}
html body.room-native-shell .room-calendar-arrow:hover{background:#e8eaed;}
html body.room-native-shell .room-calendar-controls h2{min-width:0;margin:0 0 0 10px;text-align:left;font-size:22px;font-weight:400;color:#1f1f1f;letter-spacing:0;}
html body.room-native-shell .room-calendar-controls select{margin-left:auto;height:38px;border-radius:999px;border:1px solid #747775;background:#fff;color:#1f1f1f;font-size:13px;font-weight:600;padding:0 14px;}
html body.room-native-shell .room-calendar-board{background:#fff;border:0;border-radius:20px;box-shadow:none;overflow:hidden;}
html body.room-native-shell .room-calendar--month .room-weekdays,
html body.room-native-shell .room-calendar--week .room-weekdays{display:none;}
html body.room-native-shell .room-calendar--month .room-day,
html body.room-native-shell .room-calendar--week .room-day{background:#fff;border:0;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;border-radius:0;box-shadow:none;padding:6px 6px 8px;text-align:center;}
html body.room-native-shell .room-calendar--month .room-day:nth-child(7n+1),
html body.room-native-shell .room-calendar--week .room-day:nth-child(7n+1){border-right:1px solid #e3e3e3;}
html body.room-native-shell .room-calendar--month .room-day:nth-child(7n){border-right:0;}
html body.room-native-shell .room-calendar--month .room-day:hover,
html body.room-native-shell .room-calendar--week .room-day:hover{background:#f8f9fa;}
/* every day, including the grey days of the neighbouring months, is fully readable */
html body.room-native-shell .room-day.outside{opacity:1;background:#fff;}
html body.room-native-shell .room-day.outside .room-day-number{color:#5f6368;}
html body.room-native-shell .room-day.selected{background:#fff;box-shadow:none;}
html body.room-native-shell .room-day-dow{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#444746;margin:2px 0 1px;}
html body.room-native-shell .room-day-number{width:28px;height:28px;margin:0 auto 4px;font-size:12px;font-weight:500;color:#1f1f1f;}
html body.room-native-shell .room-day.selected .room-day-number{background:#e6f2ef;color:#0f766d;}
html body.room-native-shell .room-day.today .room-day-number,
html body.room-native-shell .room-day.today.selected .room-day-number{background:#0f766d;color:#fff;font-weight:600;}
html body.room-native-shell .room-day-events{display:grid;gap:3px;max-height:none;overflow:visible;text-align:left;}
/* tags stay, bigger and fully opaque so they never look faded behind the white */
html body .room-calendar-event{font-size:11.5px;font-weight:700;padding:3px 7px;border-radius:6px;line-height:1.35;opacity:1;}
html body.room-native-shell .room-calendar-more{display:block;font-size:11.5px;font-weight:500;color:#3c4043;padding:1px 4px;}
@media(max-width:700px){
  html body.room-native-shell .room-calendar-controls h2{font-size:18px;flex:1;margin-left:4px;}
  html body.room-native-shell .room-calendar-controls .room-btn.secondary{height:34px;padding:0 13px;}
  html body.room-native-shell .room-calendar-controls select{height:34px;max-width:96px;}
  html body.room-native-shell .room-day-dow{font-size:8.5px;letter-spacing:.02em;}
  html body.room-native-shell .room-day-number{width:24px;height:24px;font-size:11px;}
  html body .room-calendar-event{font-size:9.5px;padding:2px 4px;}
  html body.room-native-shell .room-calendar-more{font-size:9.5px;}
  html body.room-native-shell .room-calendar--month .room-day{min-height:92px;padding:4px 2px 6px;}
}

/* ===== Calendar: left side panel (Create, mini month, Booking pages, My calendars) + one button shape ===== */
html body.room-native-shell .room-cal-layout{display:grid;grid-template-columns:256px minmax(0,1fr);gap:24px;align-items:start;}
html body.room-native-shell .room-cal-side{position:sticky;top:76px;padding:4px 4px 16px 0;display:block;}
html body.room-native-shell .room-cal-main{min-width:0;}
@media (max-width:720px){
  html body.room-native-shell .room-cal-layout{display:block;}
  html body.room-native-shell .room-cal-side{display:none;}
}
.rcs-create{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px 0 16px;border-radius:999px;border:1px solid #747775;background:#fff;color:#1f1f1f;font:600 14px 'Cabinet Grotesk',Arial,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(60,64,67,.18);}
.rcs-create:hover{background:#f6f8f7;box-shadow:0 1px 3px rgba(60,64,67,.28);}
.rcs-mini{margin-top:26px;}
.rcs-mini-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.rcs-mini-head b{font:600 13.5px 'Cabinet Grotesk',Arial,sans-serif;color:#1f1f1f;}
.rcs-nav{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#444746;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.rcs-nav:hover{background:#e8eaed;}
.rcs-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px 0;text-align:center;}
.rcs-dow{font-size:10.5px;font-weight:600;color:#5f6368;padding:4px 0;}
.rcs-day{position:relative;width:30px;height:30px;margin:0 auto;border:0;border-radius:50%;background:transparent;font:500 11.5px 'Cabinet Grotesk',Arial,sans-serif;color:#1f1f1f;cursor:pointer;padding:0;}
.rcs-day.out{color:#80868b;}
.rcs-day:hover{background:#e8eaed;}
.rcs-day.sel{background:#e6f2ef;color:#0f766d;font-weight:700;}
.rcs-day.today,.rcs-day.today:hover{background:#0f766d;color:#fff;font-weight:700;}
.rcs-day.has::after{content:"";position:absolute;left:50%;bottom:3px;width:3px;height:3px;border-radius:50%;background:currentColor;transform:translateX(-50%);opacity:.7;}
.rcs-sec{margin-top:20px;padding-top:6px;}
.rcs-sec-head{display:flex;align-items:center;justify-content:space-between;}
.rcs-sec-head b{font:600 13.5px 'Cabinet Grotesk',Arial,sans-serif;color:#1f1f1f;}
.rcs-cals{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.rcs-cal{display:flex;align-items:center;gap:12px;font-size:13px;color:#1f1f1f;cursor:pointer;padding:4px 2px;}
.rcs-cal input{-webkit-appearance:none;appearance:none;position:relative;width:16px;height:16px;margin:0;border:2px solid var(--c,#0f766d);border-radius:3px;background:#fff;cursor:pointer;flex:none;}
.rcs-cal input:checked{background:var(--c,#0f766d);}
.rcs-cal input:checked::after{content:"";position:absolute;left:3.5px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg);}
/* Today, Month/Day and Create are one button shape: white pill, same height and border */
html body.room-native-shell .room-calendar-controls .room-btn.secondary,
html body.room-native-shell .room-calendar-controls .room-calendar-create,
html body.room-native-shell .room-calendar-controls select{height:38px !important;border-radius:999px !important;border:1px solid #747775 !important;background:#fff !important;color:#1f1f1f !important;font:600 13px 'Cabinet Grotesk',Arial,sans-serif !important;box-shadow:none !important;padding:0 18px !important;}
html body.room-native-shell .room-calendar-controls .room-calendar-create{display:inline-flex;align-items:center;gap:6px;padding:0 18px 0 12px !important;}
/* the side panel already has Create on web */
@media (min-width:721px){html body.room-native-shell .room-calendar-controls .room-calendar-create{display:none !important;}}


/* Stage 79: Workspace + Calendar share a softer page background (a touch closer to white than the Feed canvas) */
:root{--canvas-soft:#F8F8F7;}

/* Stage 81: Calendar month dropdown nudged left; rail more buttons; booking pages; event details card; colour pickers */
html body.room-native-shell .room-calendar-controls select{margin-right:14px !important;}
.rcs-cal{position:relative;}
.rcs-cal span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rcs-more{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:#444746;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s;}
.rcs-cal:hover .rcs-more,.rcs-more:focus-visible,.rcs-more[aria-expanded="true"]{opacity:1;}
.rcs-more:hover{background:#e8eaed;}
.rcs-more svg{width:16px;height:16px;fill:currentColor;stroke:none;}
.rcs-bps{display:flex;flex-direction:column;gap:2px;margin-top:8px;}
.rcs-bp{display:flex;align-items:center;gap:10px;padding:6px 2px;border-radius:8px;text-decoration:none;color:#1f1f1f;font-size:13px;}
.rcs-bp:hover{background:#f1f3f2;}
.rcs-bp i{width:10px;height:10px;border-radius:50%;flex:none;}
.rcs-bp span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rcs-bp small{color:#5f6368;font-size:11px;flex:none;}
.rcs-empty{margin:8px 0 0;font-size:12px;line-height:1.45;color:#5f6368;}
a.rcs-nav{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.rm-evt{position:fixed;z-index:2400;width:min(380px,calc(100vw - 20px));background:#fff;border-radius:16px;padding:10px 18px 18px;box-shadow:0 12px 40px rgba(16,24,40,.22),0 2px 8px rgba(16,24,40,.12);border:1px solid #e3e6e8;color:#1f1f1f;}
.rm-evt-top{display:flex;justify-content:flex-end;gap:2px;}
.rm-evt-ic{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#444746;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.rm-evt-ic:hover{background:#f1f3f2;}
.rm-evt-ic svg{width:18px;height:18px;fill:currentColor;stroke:none;}
.rm-evt-ic[data-evt-close] svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.rm-evt-head{display:flex;gap:14px;align-items:flex-start;padding:2px 2px 6px;}
.rm-evt-dot{display:inline-block;width:14px;height:14px;border-radius:4px;flex:none;margin-top:6px;}
.rm-evt-head h3{margin:0;font:600 20px/1.25 'Cabinet Grotesk',Arial,sans-serif;word-break:break-word;}
.rm-evt-head p{margin:4px 0 0;font-size:13px;color:#444746;}
.rm-evt-meta{margin:10px 0 0 28px;display:grid;gap:6px;font-size:13px;}
.rm-evt-meta div{display:flex;gap:10px;}
.rm-evt-meta dt{width:64px;color:#5f6368;flex:none;}
.rm-evt-meta dd{margin:0;min-width:0;word-break:break-word;}
.rm-evt-desc{margin:12px 0 0 28px;font-size:13px;line-height:1.5;color:#444746;white-space:pre-wrap;}
.rm-evt-foot{margin:16px 0 0 28px;}
.rm-evt-join{height:40px;padding:0 20px;border:0;border-radius:999px;background:#0f766d;color:#fff;font:600 13.5px 'Cabinet Grotesk',Arial,sans-serif;cursor:pointer;}
.rm-evt-join:hover{background:#0b5850;}
.rm-evt-menu{z-index:2500;}
.rm-evt-menu .rm-evt-dot{width:14px;height:14px;margin:0 2px 0 3px;}
.rm-evt-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.rm-color{position:fixed;z-index:2600;width:232px;padding:14px;background:#fff;border:1px solid #e3e6e8;border-radius:14px;box-shadow:0 12px 36px rgba(16,24,40,.2);}
.rm-color>b{display:block;font:600 13px 'Cabinet Grotesk',Arial,sans-serif;margin-bottom:10px;}
.rm-color-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.rm-sw{position:relative;width:30px;height:30px;border-radius:50%;border:0;background:var(--sw);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.rm-sw svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.rm-sw.on svg{opacity:1;}
.rm-sw:hover{box-shadow:0 0 0 3px rgba(0,0,0,.12);}
.rm-color-custom,.rm-color-reset{display:flex;align-items:center;gap:10px;width:100%;height:36px;margin-top:10px;padding:0 6px;border:0;border-radius:8px;background:transparent;font:500 13px 'Cabinet Grotesk',Arial,sans-serif;color:#1f1f1f;cursor:pointer;text-align:left;}
.rm-color-custom:hover,.rm-color-reset:hover{background:#f1f3f2;}
.rm-color-reset{margin-top:0;color:#5f6368;}
.rm-color-rainbow{width:22px;height:22px;border-radius:50%;background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);flex:none;}
.rm-cc-back{position:fixed;inset:0;z-index:2700;background:rgba(10,13,12,.5);display:flex;align-items:center;justify-content:center;padding:16px;}
.rm-cc{width:min(420px,100%);background:#e9eef6;border-radius:28px;padding:28px 28px 22px;box-shadow:0 24px 64px rgba(10,13,12,.35);font-family:'Cabinet Grotesk',Arial,sans-serif;color:#1f1f1f;}
.rm-cc h2{margin:0 0 14px;font-size:24px;font-weight:500;}
.rm-cc>p{margin:0 0 18px;font-size:14px;line-height:1.5;color:#444746;}
.rm-cc-body{display:flex;gap:16px;align-items:flex-start;}
.rm-cc-side{display:flex;flex-direction:column;gap:14px;flex:none;}
.rm-cc-prev{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:500;background:#0f766d;color:#fff;}
.rm-cc-eye{width:56px;height:56px;border-radius:50%;border:0;background:#f3f6fb;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#1f1f1f;}
.rm-cc-eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.rm-cc-sv{position:relative;flex:1;height:160px;border-radius:12px;cursor:crosshair;touch-action:none;}
.rm-cc-sv i,.rm-cc-hue i{position:absolute;width:20px;height:20px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);transform:translate(-50%,-50%);pointer-events:none;}
.rm-cc-hue{position:relative;height:16px;margin:18px 0 18px;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer;touch-action:none;}
.rm-cc-hue i{top:50%;}
.rm-cc-hex{position:relative;display:block;}
.rm-cc-hex span{position:absolute;left:12px;top:-8px;padding:0 4px;background:#e9eef6;font-size:12px;color:#444746;}
.rm-cc-hex input{width:100%;height:52px;padding:0 16px;border:1px solid #747775;border-radius:6px;background:transparent;font:400 16px 'Cabinet Grotesk',Arial,sans-serif;color:#1f1f1f;}
.rm-cc-hex input:focus{outline:2px solid #0f766d;border-color:transparent;}
.rm-cc-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}
.rm-cc-btns button{height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:#0b57d0;font:600 14px 'Cabinet Grotesk',Arial,sans-serif;cursor:pointer;}
.rm-cc-btns button:hover{background:rgba(11,87,208,.08);}
.rm-cc-btns .ok{background:#c2e7ff;color:#001d35;}
@media (max-width:760px){
  .rm-evt{left:0 !important;right:0;top:auto !important;bottom:0;width:100%;border-radius:20px 20px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom));}
  .rcs-more{opacity:1;}
}

/* ===== Stage 2: left rail stays put on web when switching Calendar <-> Rooms ===== */
@media (min-width:721px){
  html body.room-native-shell.room-has-rail .room-content{display:grid;grid-template-columns:256px minmax(0,1fr);column-gap:24px;align-items:start;}
  html body.room-native-shell.room-has-rail .room-content > .room-mobile-tabs{grid-column:1 / -1;}
  html body.room-native-shell.room-has-rail .room-content > #roomRail{grid-column:1;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;scrollbar-width:none;padding:4px 4px 16px 0;}
  html body.room-native-shell.room-has-rail .room-content > #roomRail::-webkit-scrollbar{display:none;}
  html body.room-native-shell.room-has-rail .room-content > #roomView{grid-column:2;min-width:0;}
  html body.room-native-shell.room-has-rail .room-cal-layout{display:block;}
  html body.room-native-shell.room-has-rail .room-cal-layout > .room-cal-side{display:none;}
  html body.room-native-shell.room-has-rail .room-content > #roomView.rm-narrow{max-width:none;}
}

/* ===== Stage 2: Create menu (instant meeting / schedule) ===== */
.rm-create-menu{position:fixed;z-index:400;min-width:224px;padding:6px;border-radius:14px;background:#fff;border:1px solid #e5e7e8;box-shadow:0 10px 30px rgba(0,0,0,.14);font-family:'Cabinet Grotesk',Arial,sans-serif;}
.rm-create-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:#111;font:500 14px 'Cabinet Grotesk',Arial,sans-serif;text-align:left;cursor:pointer;}
.rm-create-menu button:hover{background:#f3f4f5;}
.rm-create-menu svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:720px){
  .rm-create-menu{left:12px !important;right:12px;top:auto !important;bottom:16px;padding:8px;border-radius:18px;}
  .rm-create-menu button{padding:14px 12px;font-size:15px;}
}

/* ===== Stage 3: X Calls-style cards for My Rooms + the day's meetings ===== */
html body .rmx-list{display:flex;flex-direction:column;gap:12px;background:transparent;border:0;border-radius:0;overflow:visible;}
html body .rmx-card{position:relative;display:flex;align-items:stretch;gap:14px;padding:14px 12px 14px 18px;background:#f7f7f7;border-radius:26px;cursor:pointer;transition:background .15s;}
html body .rmx-card:hover{background:#f1f1f1;}
html body .rmx-bar{flex:none;width:6px;border-radius:99px;align-self:stretch;}
html body .rmx-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
html body .rmx-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
html body .rmx-time{font-size:15px;color:#8a8a8a;font-weight:500;}
html body .rmx-pill{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1.5px solid #d4d4d4;border-radius:999px;background:transparent;color:#0f1419;font-size:14px;font-weight:600;}
html body .rmx-title{font-size:19px;font-weight:700;color:#5c5c5c;line-height:1.25;word-break:break-word;}
html body .rmx-who{display:flex;align-items:center;gap:10px;min-width:0;}
html body .rmx-av{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:0 0 0 2px #f7f7f7;}
html body .rmx-names{font-size:15px;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
html body .rmx-more{flex:none;align-self:flex-start;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:#6b6b6b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
html body .rmx-more:hover,html body .rmx-more[aria-expanded="true"]{background:#e9e9e9;}
html body .rmx-more svg{width:22px;height:22px;fill:currentColor;transform:rotate(90deg);}
html body .rmx-join{flex:none;align-self:center;height:36px;padding:0 18px;border-radius:999px;background:#0f1419;color:#fff;font-size:14px;font-weight:700;display:inline-flex;align-items:center;text-decoration:none;}
html body .rmx-menu{min-width:250px;padding:8px 6px;border-radius:22px;box-shadow:0 8px 32px rgba(0,0,0,.16);}
html body .rmx-menu button{padding:13px 14px;font-size:16px;font-weight:600;gap:14px;}
html body .rmx-menu button svg{width:22px;height:22px;}
html body .rmx-menu hr{border:0;border-top:1px solid #eee;margin:4px 14px;}
html body .rmx-menu .danger{color:#e0392d;}
html body .rmx-menu .rm-evt-dot{width:20px;height:20px;border-radius:50%;flex:none;}
html body .rmx-menu .rmx-chev{margin-left:auto;color:#9a9a9a;font-size:22px;line-height:1;}
@media (max-width:720px){html body .rmx-card{border-radius:24px;padding:12px 6px 12px 14px;}html body .rmx-title{font-size:18px;}}

/* ===== Compact room cards + small More menu + profile icons (My Rooms / Room) ===== */
html body .rmx-list{gap:8px;}
html body .rmx-card{gap:11px;padding:9px 6px 9px 14px;border-radius:18px;}
html body .rmx-bar{width:4px;}
html body .rmx-body{gap:3px;}
html body .rmx-top{gap:8px;}
html body .rmx-time{font-size:12.5px;}
html body .rmx-pill{height:22px;padding:0 10px;border-width:1.2px;font-size:11.5px;}
html body .rmx-title{font-size:15.5px;}
html body .rmx-who{gap:8px;}
html body .rmx-names{font-size:13px;}
html body .rmx-avs{display:inline-flex;flex:none;}
html body .rmx-avs .rmx-av+.rmx-av{margin-left:-8px;}
html body .rmx-av{width:24px;height:24px;font-size:11px;box-shadow:0 0 0 2px #f7f7f7;overflow:hidden;}
html body .rmx-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
html body .rmx-more{width:34px;height:34px;}
html body .rmx-more svg{width:18px;height:18px;}
html body .rmx-join{height:30px;padding:0 14px;font-size:13px;}
@media (min-width:721px){html body .rmx-list{max-width:560px;}}
html body .rmx-menu{min-width:176px;padding:5px 4px;border-radius:14px;box-shadow:0 6px 22px rgba(0,0,0,.14);}
html body .rmx-menu button{padding:8px 10px;font-size:13.5px;font-weight:600;gap:10px;border-radius:9px;}
html body .rmx-menu button svg{width:17px;height:17px;}
html body .rmx-menu hr{margin:3px 10px;}
html body .rmx-menu .rm-evt-dot{width:16px;height:16px;}
html body .rmx-menu .rmx-chev{font-size:18px;}
@media (max-width:720px){
  html body .rmx-card{border-radius:16px;padding:8px 4px 8px 12px;}
  html body .rmx-title{font-size:15px;}
}

/* My Rooms: grey canvas around a white section (web + mobile); web left rail keeps its own colour */
html body[data-room-view="rooms"] #roomView{background:#fff !important;border-radius:20px;padding:18px 16px 20px;}
@media (min-width:721px){html body[data-room-view="rooms"] #roomView{padding:22px 24px 26px;}}
html body[data-room-view="rooms"] .room-header p,
html body[data-room-view="rooms"] .room-header h1{color:#000;}
/* black text + black Owner/Host/Invited outline on room cards */
html body .rmx-time,html body .rmx-title,html body .rmx-names{color:#000;}
html body .rmx-pill{border-color:#000;color:#000;}
html body .rmx-more{color:#000;}

/* Web: the header Search Room bar uses the page background */
@media (min-width:721px){
  html body .room-top-search{background:var(--canvas-soft,#F8F8F7) !important;}
  html body .room-top-search input{background:transparent !important;}
}

/* ===== PHONES: every popup / "more" / "+" menu is a slide-up sheet; scrollbars hidden; headers + bottom bar fixed ===== */
@media (max-width:760px){
  html,body,*{scrollbar-width:none!important;-ms-overflow-style:none!important}
  *::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  html:has(body.app-body){scrollbar-gutter:auto!important}

  /* centred cards become bottom sheets (My profile's own settings excluded) */
  body:not([data-app-page="profile"]) .modal-backdrop,
  body:not([data-app-page="profile"]) .wm-modal-backdrop:not([hidden]){display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important}
  body:not([data-app-page="profile"]) .modal-backdrop .modal-card,
  body:not([data-app-page="profile"]) .wm-modal-backdrop .wm-modal{width:100%!important;max-width:none!important;margin:0!important;max-height:90vh;overflow-y:auto;border-radius:22px 22px 0 0!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  body:not([data-app-page="profile"]) .modal-backdrop.open .modal-card{transform:translateY(0)!important;opacity:1!important;animation:ppSheetUp .26s ease-out}
  body:not([data-app-page="profile"]) .modal-backdrop:not(.open) .modal-card{transform:translateY(100%)!important}
  body:not([data-app-page="profile"]) .wm-modal-backdrop:not([hidden]) .wm-modal{animation:ppSheetUp .26s ease-out}

  /* small menus (plus, more, filter, export) slide up from the bottom too */
  .wmu-add-menu:not([hidden]),.wms-menu:not([hidden]),.wm-pur-menu:not([hidden]),.rm-create-menu{
    position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;max-width:none!important;min-width:0!important;
    max-height:75vh;overflow-y:auto;z-index:100001!important;border:0!important;border-radius:22px 22px 0 0!important;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom))!important;background:#fff;
    box-shadow:0 0 0 100vmax rgba(15,20,25,.38),0 -10px 40px rgba(15,20,25,.2)!important;animation:ppSheetUp .24s ease-out}
  .wmu-add-menu:not([hidden])::before,.wms-menu:not([hidden])::before,.wm-pur-menu:not([hidden])::before,.rm-create-menu::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:#d5dad7;margin:0 auto 10px}
  .wmu-add-item,.wms-menu button,.wm-pur-menu button,.rm-create-menu button{padding:14px 12px!important;font-size:15px!important}

  /* headers stay put */
  .app-nav,.wm-topbar,.room-topbar{position:sticky!important;top:0!important}
  .app-bottom-nav{position:fixed!important;bottom:0!important}
}
@keyframes ppSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ===== Mobile fixes (Room): scroll reaches the end, My Rooms is a plain white back-button page ===== */
@media (max-width:760px){
  /* the fixed bottom nav used to cover the last part of the page (body padding is forced to 0 on Room) */
  html body.room-native-shell .room-app{padding-bottom:calc(110px + env(safe-area-inset-bottom)) !important;min-height:0 !important;}
  html body.room-native-shell .room-content{padding-bottom:24px;}
  html body.room-native-shell .room-calendar-board{overflow:visible;}

  /* My Rooms: back button instead of the menu icon, no Room/My Rooms tabs, no intro text, fully white, no card, no Owner tag */
  html body.room-native-shell[data-room-view="rooms"],
  html body.app-body.room-native-shell[data-room-view="rooms"]:has(.room-topbar),
  html:has(body.room-native-shell[data-room-view="rooms"]){background:#fff !important;}
  html body.room-native-shell[data-room-view="rooms"] .room-mobile-tabs{display:none !important;}
  html body.room-native-shell[data-room-view="rooms"] #roomView > .room-header{display:none !important;}
  html body.room-native-shell[data-room-view="rooms"] .room-app{background:#fff !important;padding-top:6px !important;}
  html body[data-room-view="rooms"] #roomView{background:#fff !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;}
  html body.room-native-shell[data-room-view="rooms"] .rmx-pill{display:none !important;}
}