/* Local, short feedback. Content stays opaque and readable throughout. */
.support-chat,.inbox-thread,.office-card{box-shadow:0 8px 28px #4c26390b;border-radius:20px;overflow:hidden}
.support-item{border-radius:14px;box-shadow:0 2px 8px #40203005;transition:transform 140ms ease,box-shadow 180ms ease,border-color 180ms ease,background 180ms ease}
.support-item.is-current{box-shadow:inset 3px 0 #681329,0 4px 14px #40203009}
.support-item:active,.quick-option:active,.chat-compose button:active,.chat-reply button:active{transform:scale(.98)}
.support-chat .chat-body{background:linear-gradient(160deg,#fcfaf6,#f5f0e9)}
.chat-compose,.chat-reply,.staff-reply{border-top:1px solid #e6dcd1;background:#fff}
.bubble{overflow-wrap:anywhere;box-shadow:0 3px 9px #40203008}
.bubble.is-me{box-shadow:0 5px 13px #68132918}
.bubble.is-pending{opacity:.8}
.is-pending .bubble-meta::before{content:'';display:inline-block;width:8px;height:8px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:6px;animation:chat-spin 750ms linear infinite}
.chat-sent{display:inline-flex;gap:3px;align-items:center;white-space:nowrap}
.chat-sent svg{vertical-align:middle;flex-shrink:0}
.is-arriving .chat-sent path{stroke-dasharray:1;stroke-dashoffset:1;animation:chat-tick 200ms 120ms ease-out forwards}
.catalog-editor,.viewing-manager{max-width:1000px;background:#fff;border:1px solid #e7ddd3;border-radius:20px;padding:28px;box-shadow:0 8px 30px #50304308}
.catalog-state{color:#6b5360;font-size:13px;padding:14px 0}
.catalog-items{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid #eee5dc}
.catalog-items li{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #eee5dc;padding:12px 0;overflow-wrap:anywhere}
.catalog-items li span{min-width:0}
/* Whole buttons: Remove keeps its width beside long dish names, and the menu actions wrap to new rows on phones. */
.catalog-items li .sbtn{flex:none}
.catalog-editor .form-actions{flex-wrap:wrap}
#catalog-add{display:flex;gap:12px;align-items:end;margin-bottom:20px}
#catalog-add .field{flex:1}
.catalog-error,[data-viewing-error]{color:#a52235;margin:12px 0}
.viewing-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.75fr);gap:28px}
.viewing-calendar{padding:18px;border:1px solid #e5d9ce;border-radius:18px;background:#fff;box-shadow:0 5px 18px #50304308}
.calendar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:10px}
.calendar-top h3{margin:0;font-size:17px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calendar-weekday{text-align:center;font-size:11px;color:#786c6c;padding-bottom:8px}
.calendar-day{min-height:44px;border:1px solid #e5ddd4;border-radius:12px;background:#fff;color:#442e38;font:600 14px var(--sans);cursor:pointer;transition:transform 140ms ease,background 180ms ease,border-color 180ms ease;position:relative}
.calendar-day:active{transform:scale(.92)}
.calendar-day.is-blocked{background:#f4ecea;color:#907974;text-decoration:line-through}
.calendar-day.is-blocked span{position:absolute;font-size:10px;right:4px;bottom:2px}
.calendar-day:disabled{opacity:.45;cursor:default}
.calendar-day.is-selected{background:#681329;color:white;border-color:#681329;box-shadow:0 3px 8px #68132922;text-decoration:none}
.calendar-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;margin:18px 0 0;color:#685c5c}
.vf-page-form{position:static;display:block;width:min(850px,100%);max-height:none;margin:0 auto 60px;border-radius:24px;background:#fff;box-shadow:0 12px 42px #5030430b}
.vf-page-form .vf-close,.vf-page-form .vf-cancel{display:none}
.vf-calendar-field{grid-column:1/-1}
.viewing-page{max-width:1040px;margin:auto;padding:0 22px}
.staff-more{display:none}
.staff-dock-icon{display:none}
.is-staff .staff-app .staff-tab{justify-content:flex-start;border-radius:12px}
.is-staff .staff-app .staff-tab-label{flex:1}
.is-staff .staff-app .staff-tab-ink{border-radius:12px;box-shadow:inset 3px 0 0 var(--gold),0 3px 10px #50304308}
.is-staff .staff-app .sbtn,.is-staff .staff-app .button{border-radius:11px}
.is-staff .staff-app .enq-row{border-radius:14px;box-shadow:0 3px 12px #50304306}
.is-staff .staff-app .staff-head{border-bottom:1px solid #e8ddd3;padding-bottom:18px;margin-bottom:26px}
.is-staff .staff-app #staff-panel.is-entering>*{animation:chat-rise 210ms ease-out both;animation-delay:0s}
.is-staff .staff-app #inbox-thread.is-entering>*{animation:none}
@keyframes chat-rise{from{transform:translateY(8px);opacity:.8}to{transform:none;opacity:1}}
@keyframes chat-tick{to{stroke-dashoffset:0}}
@keyframes chat-spin{to{transform:rotate(360deg)}}
@media(hover:hover){.support-item:hover{transform:translateY(-2px);box-shadow:0 6px 18px #50304310}.calendar-day:not(:disabled):hover{border-color:#681329}}
@media(max-width:900px),(max-width:1100px) and (pointer:coarse){
 .is-staff .staff-app .staff-rail{position:static;overflow:visible;padding:0;border:0;min-height:0;height:0;animation:none!important;transform:none!important}
 .is-staff .staff-app .staff-brand,.is-staff .staff-app .staff-rail-foot{display:none}
 .is-staff .staff-app .staff-main{padding-bottom:calc(125px + env(safe-area-inset-bottom))}
 .is-staff .staff-app .staff-tabs{position:fixed;inset:auto 12px calc(12px + env(safe-area-inset-bottom));z-index:80;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-height:70dvh;overflow:auto;padding:7px;border:1px solid #ffffffb8;border-radius:28px;background:#f9f6f0ed;box-shadow:inset 0 1px 0 #fff,0 12px 36px #2b18332b;backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
 .is-staff .staff-app .staff-tab-ink{display:none}
 .is-staff .staff-app .staff-tab.dock-main,.is-staff .staff-app .staff-more{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:9px 1px;min-height:61px;min-width:0;width:100%;font:600 10px var(--sans);border:0;background:none;color:#65545d;text-align:center;border-radius:21px;white-space:normal;order:1;cursor:pointer}
 .is-staff .staff-app .staff-tab .staff-tab-label{flex:0}
 .is-staff .staff-app .staff-dock-icon,.staff-more>span:first-child{display:block;font-size:24px;line-height:25px;font-weight:400}
 .is-staff .staff-app .staff-tabs.has-ink .staff-tab[aria-selected="true"]{background:#e9dece;color:#681329;box-shadow:inset 0 1px 0 #fff9}
 .is-staff .staff-app .staff-tab.dock-more-item{display:none}
 .is-staff .staff-app .staff-tabs.more-open .dock-more-item{display:flex;grid-column:1/-1;width:100%;min-height:44px;order:0;padding:8px 16px;font-size:14px;animation:chat-rise 190ms ease-out}
 .is-staff .staff-app .staff-tabs.more-open .dock-more-item .staff-dock-icon{font-size:18px;width:24px}
 .is-staff .staff-app .staff-tabs.more-open .staff-tab.dock-more-item .staff-tab-label{flex:1;text-align:left}
 .is-staff .staff-app .staff-tabs:has(.dock-more-item[aria-selected="true"]) .staff-more{background:#e9dece;color:#681329}
 .chat-keyboard .staff-tabs{visibility:hidden;pointer-events:none}
 .viewing-admin-grid{grid-template-columns:1fr}
}
@media(max-width:600px){.catalog-editor,.viewing-manager{padding:18px;border-radius:16px}.calendar-grid{gap:3px}.calendar-day{min-height:40px}.viewing-calendar{padding:12px}.support-chat{min-height:min(480px,calc(var(--chat-viewport,100dvh) - 110px));max-height:calc(var(--chat-viewport,100dvh) - 80px);top:12px}.support-chat .chat-body{padding:16px}.vf-page-form .vf-form{padding:24px 18px}.viewing-page{padding:0 14px}#catalog-add{align-items:stretch;flex-direction:column}.catalog-items .sbtn{padding:0 10px}.catalog-editor .form-actions{gap:8px}.bubble{max-width:90%}}
@media(prefers-reduced-motion:reduce){.support-item,.calendar-day,.staff-tab{transition:none!important}.is-arriving .chat-sent path,.is-pending .bubble-meta::before{animation:none!important}.is-arriving .chat-sent path{stroke-dashoffset:0}}

.staff-more-logout{display:none}
@media(max-width:900px){.is-staff .staff-app .staff-tabs.more-open .staff-more-logout{display:block;grid-column:1/-1;order:0;min-height:44px;border:0;border-top:1px solid #ded5ca;background:none;text-align:left;padding:8px 16px;font:600 14px var(--sans);color:#681329}.support-layout .support-chat{min-height:min(480px,calc(var(--chat-viewport,100dvh) - 110px));max-height:calc(var(--chat-viewport,100dvh) - 80px)}}

/* Phone chat: keep messages scrollable and the composer inside the viewport. */
.support-layout,.support-layout>*,.support-chat,.chat-who>div,.compose-row,.chat-compose,.chat-reply,.inbox-thread,.staff-reply{min-width:0}
.support-chat,.inbox-thread{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.support-chat .chat-body{min-height:0;min-width:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.support-chat .chat-body>.bubble{flex-shrink:0}
.support-chat .chat-head,.support-chat .chat-reply{flex-shrink:0}
.chat-who strong,.thread-head h3{overflow-wrap:anywhere}
.chat-keyboard-spacer{min-width:0;pointer-events:none}
.support-layout>.chat-keyboard-spacer{order:-1}
@media(max-width:900px),(max-width:1100px) and (pointer:coarse){
  .support-page .in-head{padding:28px 20px 22px}
  .support-page .in-head h1{font-size:clamp(32px,8vw,42px);line-height:1.12}
  .support-page .in-head p{font-size:16px}
  .support-page .in-page>.section{padding-inline:14px}
  .in-page .support-layout,.in-page .support-signed-out,.inbox-layout{grid-template-columns:minmax(0,1fr)}
  .in-page .support-layout{gap:20px}
  .support-layout .support-chat{height:min(680px,calc(var(--chat-viewport,100svh) - 120px));min-height:280px;max-height:none}
  .in-page .support-chat :is(input,select,textarea),.staff-app .inbox-thread :is(input,select,textarea){font-size:16px!important}
  .in-page .support-chat .chat-reply textarea{min-height:52px;max-height:120px;resize:none;padding:10px 12px}
  .in-page .support-chat .chat-compose textarea{min-height:76px;resize:none}
  .support-chat .chat-head{gap:8px;flex-wrap:wrap;padding:10px 12px}
  .support-chat .chat-back{flex-shrink:0}
  .support-chat .chat-who{flex:1 1 90px}
  .support-chat .chat-head>[data-support-status]{max-width:42%;padding:8px 10px;white-space:normal;text-align:center;line-height:1.3}
  .support-chat .chat-reply{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:6px 8px}
  .support-chat .chat-compose{min-height:0;max-height:72%;overflow-y:auto;overscroll-behavior:contain;padding:12px;gap:10px}
  .support-chat .compose-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .support-chat .compose-actions{flex-wrap:wrap;gap:8px}
  .support-chat .compose-actions .button{margin-left:auto}
  body.chat-keyboard :is(.support-chat,.inbox-thread).chat-keyboard-panel{position:fixed;top:calc(var(--chat-vv-top,0px) + 8px);left:12px;right:12px;width:auto;max-width:none;height:calc(var(--chat-viewport,100dvh) - 16px);min-height:0;max-height:none;margin:0;z-index:210;border-radius:16px;display:flex;flex-direction:column;overflow:hidden}
  .chat-keyboard-panel .chat-body{flex:1 1 0;min-height:0;max-height:none;padding:12px;overflow-y:auto}
  .chat-keyboard-panel .chat-reply{padding-bottom:10px}
  .chat-keyboard-panel .chat-compose{max-height:72%}
  .chat-keyboard-panel .thread-head{flex-shrink:0;gap:8px}
  .chat-keyboard-panel .thread-requests{max-height:60px;overflow:auto;flex-shrink:0}
  .chat-keyboard-panel .staff-reply{min-height:0;max-height:60%;overflow-y:auto;flex-shrink:0}
  .chat-keyboard-panel .staff-reply textarea{min-height:60px;max-height:90px;resize:none}
  .chat-keyboard-panel .staff-reply-actions{gap:6px}
  /* The staff inbox with the keyboard up: the conversation and the reply box get the room, and everything else
     (email lines, the resolve button, the request list, quick replies, help text) waits until the keyboard closes.
     Nothing overflows, so the phone has nothing to scroll out of sight. */
  .inbox-thread.chat-keyboard-panel{padding:12px;gap:8px}
  .is-staff .staff-app .inbox-thread.chat-keyboard-panel{background:#fffdf9;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 36px #3a1a2a33}
  .inbox-thread.chat-keyboard-panel .thread-head{flex-direction:row;align-items:center;gap:8px}
  .inbox-thread.chat-keyboard-panel .thread-head>div{min-width:0}
  .inbox-thread.chat-keyboard-panel .thread-head h3{margin:0 0 2px;font-size:15px}
  .inbox-thread.chat-keyboard-panel .thread-head>div>p:not(:nth-of-type(2)),.inbox-thread.chat-keyboard-panel .thread-head>button,.inbox-thread.chat-keyboard-panel .thread-requests,.inbox-thread.chat-keyboard-panel>.small-note,.inbox-thread.chat-keyboard-panel .quick-replies,.inbox-thread.chat-keyboard-panel .staff-reply .help-text,.inbox-thread.chat-keyboard-panel .staff-reply .field-error:empty{display:none}
  .inbox-thread.chat-keyboard-panel .chat-body{flex:1 1 auto;min-height:96px}
  .inbox-thread.chat-keyboard-panel .staff-reply{flex:0 0 auto;max-height:none;overflow:visible;gap:8px;padding-top:10px}
  .inbox-thread.chat-keyboard-panel .staff-reply-actions{flex-direction:row;align-items:flex-end;gap:8px}
  .inbox-thread.chat-keyboard-panel .staff-reply-actions .field{flex:1 1 0;max-width:none}
  .inbox-thread.chat-keyboard-panel .staff-reply-actions input,.inbox-thread.chat-keyboard-panel .staff-reply-actions .button{min-height:44px}
  .inbox-thread.chat-keyboard-panel .staff-reply-actions .button{flex:0 0 auto}
  .chat-keyboard .support-launcher,.chat-keyboard .draft-reminder{visibility:hidden;pointer-events:none}
  /* An arriving ancestor must not become the fixed chat's containing block. */
  .chat-keyboard .in-page>.support-layout,.chat-keyboard .staff-app #staff-panel>.support-inbox{animation:none!important;transform:none!important}
}

/* Staff phone fit: retain normal page scale and contain the floating dock. */
@media(max-width:900px),(max-width:1100px) and (pointer:coarse){
  .is-staff{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .is-staff .staff-app :is(input,select,textarea),.is-staff dialog :is(input,select,textarea){font-size:16px!important}
  .is-staff .staff-shell{display:block;min-width:0;max-width:100%}
  .is-staff .staff-main{min-width:0;max-width:100%;padding:16px max(14px,env(safe-area-inset-right)) calc(118px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .is-staff :is(#staff-panel,.staff-head,.staff-head-tools,.staff-push,.staff-app .field,.staff-app .form-grid){min-width:0;max-width:100%}
  .is-staff .staff-main :is(.sbtn,.button){max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
  .is-staff .staff-app .staff-tabs{--dock-gutter:max(12px,env(safe-area-inset-left),env(safe-area-inset-right));--dock-width:min(620px,calc(var(--staff-vv-width,100vw) - 2 * var(--dock-gutter)));inset:auto;left:calc(var(--staff-vv-left,0px) + (var(--staff-vv-width,100vw) - var(--dock-width)) / 2);top:calc(var(--staff-vv-top,0px) + var(--staff-vv-height,100dvh) - 12px - env(safe-area-inset-bottom));width:var(--dock-width);min-width:0;max-width:none;margin:0;box-sizing:border-box;transform:translateY(-100%);max-height:calc(var(--staff-vv-height,100dvh) * .7);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .is-staff .staff-app .staff-tab.dock-main,.is-staff .staff-app .staff-more{position:relative;min-width:0;max-width:100%}
  .is-staff .staff-app .staff-tab-label{min-width:0;max-width:100%;overflow-wrap:anywhere;line-height:1.2}
  .is-staff .staff-app .staff-tab.dock-main .tab-count{position:absolute;top:3px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:12px;font-size:10px;line-height:17px}
  .is-staff .staff-app .staff-tabs.more-open .dock-more-item{min-width:0;max-width:100%;white-space:normal}
  /* The open More sheet may grow to the screen's height, so the dock row under it is not scrolled out of view. */
  .is-staff .staff-app .staff-tabs.more-open{max-height:calc(var(--staff-vv-height,100dvh) - 24px - env(safe-area-inset-bottom))}
  .is-staff .staff-app .staff-tabs.more-open .staff-more-logout{display:block;grid-column:1/-1;order:0;min-height:44px;border:0;border-top:1px solid #ded5ca;background:none;text-align:left;padding:8px 16px;font:600 14px var(--sans);color:#681329}
}

.enq-live-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;margin:12px 0;border:1px solid #d7c190;border-radius:14px;background:#fffaf0;color:#53242c;font-size:14px}
.enq-live-notice[hidden]{display:none}