/* El Palace Butler — Design System */
/* Extracted from hotel_buttler_v5.html — do not hand-edit, regenerated by build */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --gold:#B8965A;--gold-l:#D4B07A;--gold-p:#F5EDD8;--gold-xp:#FBF6EC;
  --gold-rgb:184,150,90;
  --ink:#1A1714;--ink-m:#3D3830;--ink-s:#6B6358;--ink-xs:#9A9088;
  --ink-rgb:26,23,20;
  --cream:#FAF7F2;--cream-d:#F0EBE1;--snow:#FDFCFA;
  --bd:rgba(var(--gold-rgb),0.18);--bd-m:rgba(var(--gold-rgb),0.38);--bd-s:rgba(var(--gold-rgb),0.6);
  --r:2px;
  --fd:'Cormorant Garamond',Georgia,serif;
  --fb:'Jost',sans-serif;
  /* Light mode vars */
  --bg:var(--cream);--surface:var(--snow);--surface-d:var(--cream-d);--surface-raised:var(--snow);
  --text:var(--ink);--text-m:var(--ink-m);--text-s:var(--ink-s);--text-xs:var(--ink-xs);
  --hdr-bg:var(--ink);--panel-bg:var(--cream-d);--schema-bg:var(--ink);
  --msg-butler-bg:var(--snow);--msg-guest-bg:var(--ink);--msg-guest-color:var(--cream);
  --input-bg:var(--snow);--input-area-bg:var(--snow);
  --nav-bg:rgba(250,247,242,0.92);--nav-bd:rgba(184,150,90,0.1);
  --card-bg:var(--snow);--card-bd:rgba(184,150,90,0.1);
  --overlay-bg:rgba(0,0,0,0.5);
}

body.dark{
  --bg:#110E0B;--surface:#1C1814;--surface-d:#151210;--surface-raised:#231D13;
  --text:#E8DFD0;--text-m:#C8BAA8;--text-s:#8A7D6E;--text-xs:#5A5048;
  --hdr-bg:#0D0B09;--panel-bg:#151210;--schema-bg:#0D0B09;
  --msg-butler-bg:#231D13;--msg-guest-bg:#B8965A;--msg-guest-color:#1A1714;
  --input-bg:#231D13;--input-area-bg:#151210;
  --bd:rgba(var(--gold-rgb),0.14);--bd-m:rgba(var(--gold-rgb),0.28);
  --cream-d:#151210;--snow:#1C1814;
}

html{height:-webkit-fill-available}
body{font-family:var(--fb);background:var(--bg);color:var(--text);height:100vh;height:-webkit-fill-available;display:flex;flex-direction:column;overflow:hidden;font-size:14px;transition:background .3s,color .3s}
@supports(height:100dvh){body{height:100dvh}}

/* ── HEADER ── */
header{background:var(--hdr-bg);display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:52px;flex-shrink:0;border-bottom:1px solid rgba(var(--gold-rgb),0.25)}
.wordmark{font-family:var(--fd);font-weight:400;font-size:19px;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase}
.prop-label{font-size:9px;letter-spacing:0.24em;color:rgba(var(--gold-rgb),0.5);text-transform:uppercase;font-weight:300;margin-top:1px}
.hdr-right{display:flex;align-items:center;gap:8px}
.room-badge{font-size:10px;letter-spacing:0.14em;color:var(--gold-l);font-weight:300;text-transform:uppercase;border:1px solid rgba(var(--gold-rgb),0.28);height:24px;padding:0 9px;border-radius:1px;display:inline-flex;align-items:center}
.hdr-btn{font-size:9px;letter-spacing:0.1em;color:rgba(var(--gold-rgb),0.45);background:transparent;border:1px solid rgba(var(--gold-rgb),0.18);height:24px;padding:0 9px;cursor:pointer;font-family:var(--fb);text-transform:uppercase;transition:all .2s;border-radius:1px;display:inline-flex;align-items:center}
.hdr-btn:hover{color:var(--gold);border-color:rgba(var(--gold-rgb),0.5)}
.hdr-btn.on{color:var(--gold);border-color:var(--gold);background:rgba(var(--gold-rgb),0.08)}
.lang-sel{font-size:9px;letter-spacing:0.1em;color:rgba(var(--gold-rgb),0.55);background:transparent;border:1px solid rgba(var(--gold-rgb),0.18);height:24px;padding:0 7px;cursor:pointer;font-family:var(--fb);text-transform:uppercase;transition:all .2s;border-radius:1px;appearance:none;outline:none}
.lang-sel:hover{color:var(--gold);border-color:rgba(var(--gold-rgb),0.5)}
.dark-toggle{background:transparent;border:1px solid rgba(var(--gold-rgb),0.18);color:rgba(var(--gold-rgb),0.45);cursor:pointer;border-radius:1px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:0.1em;height:24px;padding:0 9px;transition:all .2s;font-family:var(--fb);text-transform:uppercase}
.dark-toggle:hover{color:var(--gold);border-color:rgba(var(--gold-rgb),0.5)}
.mic-btn{width:42px;height:42px;background:var(--ink);border:1px solid var(--gold);color:var(--gold);cursor:pointer;border-radius:1px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.mic-btn:hover{background:var(--gold);color:var(--ink)}
.mic-btn svg{width:14px;height:14px;fill:currentColor}
.mic-btn.listening{background:var(--gold);color:var(--ink);animation:micPulse 1s ease-in-out infinite}
@keyframes micPulse{0%,100%{opacity:1}50%{opacity:0.6}}

/* ── AMBIENT HERO ── */
.hero-ambient{display:none;width:100%;flex-shrink:0;background-size:cover;background-position:center}
.hero-ambient.visible{display:block}

/* ── WORKSPACE (full-width hero, sidebar icons below with breathing room) ── */
.workspace{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto 1fr;flex:1;overflow:hidden}
.workspace>.hero-ambient{grid-column:1/-1;grid-row:1}
.workspace>.nav-rail{grid-column:1;grid-row:2;padding-top:32px}
.workspace>.main-area{grid-column:2;grid-row:2;overflow:hidden}

/* ── NAV RAIL ── */
.nav-rail{width:52px;background:var(--hdr-bg);border-right:1px solid rgba(var(--gold-rgb),0.14);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px;flex-shrink:0}
.nav-btn{width:36px;height:36px;border:1px solid rgba(var(--gold-rgb),0.14);background:transparent;color:rgba(var(--gold-rgb),0.4);cursor:pointer;border-radius:1px;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative;font-size:14px}
.nav-btn:hover{border-color:rgba(var(--gold-rgb),0.45);color:var(--gold-l)}
.nav-btn.on{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),0.1)}
.nav-tip{position:absolute;left:44px;background:var(--ink-m);color:var(--gold-l);font-size:10px;letter-spacing:0.08em;white-space:nowrap;padding:3px 8px;border-radius:1px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10;border:1px solid rgba(var(--gold-rgb),0.2)}
.nav-btn:hover .nav-tip{opacity:1}

/* ── MAIN AREA ── */
.main-area{display:flex;flex:1;overflow:hidden}

/* ── CHAT ── */
.chat-col{display:flex;flex-direction:column;flex:1;min-width:0}
.chat-msgs{flex:1;overflow-y:auto;padding:28px 24px 12px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth}
.chat-msgs::-webkit-scrollbar{width:3px}
.chat-msgs::-webkit-scrollbar-thumb{background:var(--bd-m);border-radius:2px}

/* Welcome */
.welcome{text-align:center;padding:36px 16px 16px;flex-shrink:0}
.w-orn{font-family:var(--fd);font-size:28px;color:var(--gold);letter-spacing:0.28em;margin-bottom:6px}
.welcome h1{font-family:var(--fd);font-weight:300;font-size:24px;letter-spacing:0.06em;margin-bottom:4px;color:var(--text)}
.welcome p{font-size:12px;color:var(--text-s);font-weight:300;letter-spacing:0.07em}
.divg{width:40px;height:1px;background:var(--gold);margin:14px auto;opacity:0.45}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chip{font-size:11px;font-weight:300;letter-spacing:0.05em;color:var(--text-s);border:1px solid var(--bd-m);background:var(--surface-raised);padding:6px 12px;cursor:pointer;border-radius:1px;transition:all .2s;font-family:var(--fb)}
.chip:hover{border-color:var(--gold);color:var(--text);background:var(--gold-p)}
body.dark .chip:hover{background:rgba(var(--gold-rgb),0.12)}

/* Messages */
.msg{display:flex;gap:10px;max-width:640px}
.msg.entering{animation:fu .32s cubic-bezier(0.22,1,0.36,1)}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg.guest{align-self:flex-end;flex-direction:row-reverse}
.msg.butler{align-self:flex-start}
.av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;margin-top:2px}
.msg.butler .av{background:rgba(var(--gold-rgb),0.1);border:1px solid var(--gold);color:var(--gold);font-family:var(--fd);font-size:12px}
.msg.guest .av{background:var(--cream-d);border:1px solid var(--bd-m);color:var(--ink-s);font-size:9px}
body.dark .msg.guest .av{background:#2A2420;border-color:rgba(var(--gold-rgb),0.25);color:var(--text-s)}
.bubble{padding:11px 14px;border-radius:var(--r);font-size:13px;line-height:1.65;font-weight:300;max-width:460px}
.msg.butler .bubble{background:var(--msg-butler-bg);border:1px solid var(--bd);color:var(--text);border-top-left-radius:0}
.msg.guest .bubble{background:var(--msg-guest-bg);color:var(--msg-guest-color);border-top-right-radius:0}

/* Option cards */
.opt-cards{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.opt-card{background:var(--bg);border:1px solid var(--bd-m);padding:9px 12px;cursor:pointer;transition:all .2s;border-radius:1px}
.opt-card:hover{border-color:var(--gold);background:var(--gold-p)}
body.dark .opt-card:hover{background:rgba(var(--gold-rgb),0.1)}
.ot{font-family:var(--fd);font-size:14px;font-weight:400;color:var(--text);margin-bottom:1px}
.od{font-size:11px;color:var(--text-s);font-weight:300}
.op{font-size:11px;color:var(--gold);font-weight:500;margin-top:3px}

/* Confirm btn */
.cfm-btn{margin-top:9px;padding:8px 18px;background:var(--ink);color:var(--gold-l);border:1px solid var(--gold);font-family:var(--fb);font-size:10px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;transition:all .2s;border-radius:1px;display:inline-block}
.cfm-btn:hover{background:var(--gold);color:var(--ink)}
.cfm-btn:disabled{opacity:0.45;cursor:default}

/* Typing */
.typing{display:flex;gap:4px;align-items:center;padding:12px 14px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.4;animation:pulse 1.4s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,80%,100%{opacity:.4;transform:scale(1)}40%{opacity:1;transform:scale(1.2)}}

/* Input bar */
.input-area{padding:14px 24px 18px;background:var(--input-area-bg);border-top:1px solid var(--bd);flex-shrink:0;transition:background .3s}
.input-row{display:flex;gap:8px;align-items:flex-end}
.msg-in{flex:1;background:var(--input-bg);border:1px solid var(--bd-m);color:var(--text);font-family:var(--fb);font-size:13px;font-weight:300;padding:10px 14px;border-radius:1px;resize:none;min-height:42px;max-height:110px;outline:none;transition:border-color .2s,background .3s;line-height:1.5}
.msg-in:focus{border-color:var(--gold)}
.msg-in::placeholder{color:var(--text-xs)}
.send-btn{width:42px;height:42px;background:var(--ink);border:1px solid var(--gold);color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:1px;transition:all .2s;flex-shrink:0}
.send-btn:hover{background:var(--gold);color:var(--ink)}
.send-btn svg{width:14px;height:14px;fill:currentColor}

/* ── IOT PANEL ── */
.iot-panel{width:0;overflow:hidden;background:var(--panel-bg);border-left:1px solid var(--bd);transition:width .3s ease;display:flex;flex-direction:column;flex-shrink:0}
.iot-panel.open{width:260px}
.panel-hdr{padding:14px 16px;border-bottom:1px solid var(--bd);flex-shrink:0}
.panel-title{font-family:var(--fd);font-size:13px;font-weight:400;color:var(--gold);letter-spacing:0.12em;text-transform:uppercase}
.panel-sub{font-size:9px;color:rgba(var(--gold-rgb),0.45);letter-spacing:0.1em;margin-top:1px;font-weight:300;text-transform:uppercase}
.panel-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:18px}
.panel-body::-webkit-scrollbar{width:2px}
.panel-body::-webkit-scrollbar-thumb{background:var(--bd-m)}
.iot-section{}
.iot-sec-label{font-size:9px;letter-spacing:0.15em;color:var(--text-xs);text-transform:uppercase;font-weight:500;margin-bottom:8px}
.iot-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.iot-label{font-size:12px;color:var(--text-m);font-weight:300}
.iot-val{font-size:11px;color:var(--gold);font-weight:500;min-width:32px;text-align:right}
.tog{position:relative;width:34px;height:18px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{position:absolute;inset:0;background:rgba(var(--gold-rgb),0.2);border-radius:9px;border:1px solid var(--bd-m);transition:all .2s;cursor:pointer}
.tog input:checked+.tog-track{background:rgba(var(--gold-rgb),0.5);border-color:var(--gold)}
.tog-knob{position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--ink-xs);border-radius:50%;transition:all .2s;pointer-events:none}
.tog input:checked~.tog-knob{left:18px;background:var(--gold)}
.iot-slider{width:100%;-webkit-appearance:none;appearance:none;height:3px;background:var(--bd-m);border-radius:2px;outline:none;cursor:pointer;margin:4px 0}
.iot-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid var(--cream);cursor:pointer}
.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.scene-btn{background:var(--surface);border:1px solid var(--bd-m);color:var(--text-s);font-family:var(--fb);font-size:10px;font-weight:400;letter-spacing:0.06em;padding:7px 4px;cursor:pointer;border-radius:1px;transition:all .2s;text-align:center}
.scene-btn:hover,.scene-btn.on{border-color:var(--gold);color:var(--text);background:var(--gold-p)}
body.dark .scene-btn:hover, body.dark .scene-btn.on{background:rgba(var(--gold-rgb),0.12)}
.media-ctrl{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.med-btn{width:28px;height:28px;background:transparent;border:1px solid var(--bd-m);color:var(--text-s);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .2s}
.med-btn:hover{border-color:var(--gold);color:var(--gold)}
.med-source{font-size:10px;color:var(--text-xs);font-weight:300;text-align:center;margin-top:4px}

/* ── SCHEMA PANEL ── */
.schema-panel{width:0;overflow:hidden;background:var(--panel-bg);border-left:1px solid var(--bd);transition:width .3s ease;display:flex;flex-direction:column;flex-shrink:0}
.schema-panel.open{width:320px}
.sb{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.sb::-webkit-scrollbar{width:2px}
.sb::-webkit-scrollbar-thumb{background:rgba(var(--gold-rgb),0.18)}
.sblock{border:1px solid rgba(var(--gold-rgb),0.13);border-radius:1px}
.sblk-hdr{background:rgba(var(--gold-rgb),0.07);padding:7px 11px;display:flex;align-items:center;justify-content:space-between}
.sblk-t{font-size:9px;letter-spacing:0.15em;color:var(--gold);font-weight:500;text-transform:uppercase}
.sblk-s{font-size:8px;letter-spacing:0.1em;text-transform:uppercase;font-weight:400;padding:2px 6px;border-radius:1px}
.s-pend{color:rgba(var(--gold-rgb),0.35);border:1px solid rgba(var(--gold-rgb),0.13)}
.s-act{color:#7FC78A;border:1px solid rgba(127,199,138,0.28)}
.s-done{color:rgba(127,199,138,0.55);border:1px solid rgba(127,199,138,0.18)}
.sblk-body{padding:9px 11px}
pre.json{font-family:'Courier New',monospace;font-size:10px;line-height:1.7;color:var(--text-s);white-space:pre-wrap;word-break:break-all;margin:0}
.jk{color:var(--gold)}.js{color:#2E8B57}.jn{color:#7B68AE}.jb{color:#C05830}.jnull{color:var(--text-xs)}
.s-empty{text-align:center;padding:36px 16px;color:var(--text-xs);font-size:11px;letter-spacing:0.1em;font-weight:300;text-transform:uppercase}
.s-empty span{display:block;font-family:var(--fd);font-size:26px;margin-bottom:6px;color:var(--text-xs);opacity:.5}

/* ── ANALYTICS PANEL ── */
.analytics-panel{width:0;overflow:hidden;background:var(--panel-bg);border-left:1px solid var(--bd);transition:width .3s ease;display:flex;flex-direction:column;flex-shrink:0}
.analytics-panel.open{width:280px}
.analytics-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.analytics-body::-webkit-scrollbar{width:2px}
.analytics-body::-webkit-scrollbar-thumb{background:var(--bd-m)}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--surface);border:1px solid var(--bd);border-radius:1px}
.stat-label{font-size:10px;color:var(--text-s);font-weight:300;letter-spacing:0.06em}
.stat-val{font-size:14px;color:var(--gold);font-family:var(--fd);font-weight:400}
.heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:4px}
.hm-cell{height:14px;border-radius:1px;background:rgba(var(--gold-rgb),0.08);transition:background .3s}
.hm-cell.l1{background:rgba(var(--gold-rgb),0.2)}
.hm-cell.l2{background:rgba(var(--gold-rgb),0.4)}
.hm-cell.l3{background:rgba(var(--gold-rgb),0.65)}
.hm-cell.l4{background:rgba(var(--gold-rgb),0.9)}
.intent-bar{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.ib-row{display:flex;align-items:center;gap:8px}
.ib-label{font-size:10px;color:var(--text-s);font-weight:300;min-width:80px;letter-spacing:0.04em}
.ib-track{flex:1;height:5px;background:rgba(var(--gold-rgb),0.12);border-radius:2px;overflow:hidden}
.ib-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .6s cubic-bezier(0.34,1.56,0.64,1)}
.ib-count{font-size:10px;color:var(--gold);font-weight:500;min-width:16px;text-align:right}
.req-log{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.req-entry{background:var(--surface);border:1px solid var(--bd);border-radius:1px;padding:7px 9px}
.req-intent{font-size:9px;letter-spacing:0.12em;color:var(--gold);text-transform:uppercase;font-weight:500}
.req-text{font-size:11px;color:var(--text-m);font-weight:300;margin-top:2px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req-time{font-size:9px;color:var(--text-xs);margin-top:3px}
.pms-event{background:rgba(127,199,138,0.08);border:1px solid rgba(127,199,138,0.2);border-radius:1px;padding:8px 10px;margin-top:4px}
.pms-event-label{font-size:9px;letter-spacing:0.12em;color:#7FC78A;text-transform:uppercase;font-weight:500;margin-bottom:4px}
.pms-event-body{font-size:11px;color:var(--text-m);font-weight:300;line-height:1.5}

/* ── CONCIERGE CARDS ── */
.concierge-card{background:var(--surface);border:1px solid var(--bd-m);border-radius:1px;padding:10px 12px;cursor:pointer;transition:all .2s;margin-bottom:7px}
.concierge-card:hover{border-color:var(--gold);background:var(--gold-p)}
body.dark .concierge-card:hover{background:rgba(var(--gold-rgb),0.1)}
.cc-type{font-size:9px;letter-spacing:0.14em;color:rgba(var(--gold-rgb),0.6);text-transform:uppercase;font-weight:500;margin-bottom:4px}
.cc-name{font-family:var(--fd);font-size:14px;color:var(--text);font-weight:400}
.cc-meta{font-size:11px;color:var(--text-s);font-weight:300;margin-top:2px}
.cc-detail{font-size:11px;color:var(--gold);font-weight:400;margin-top:3px}
.map-placeholder{width:100%;height:80px;background:rgba(var(--gold-rgb),0.06);border:1px solid var(--bd);border-radius:1px;display:flex;align-items:center;justify-content:center;margin:8px 0;font-size:10px;color:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;font-weight:300}

/* ── HOUSEKEEPING CARDS ── */
.hk-status{display:inline-flex;align-items:center;gap:5px;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;padding:3px 8px;border-radius:1px;margin-top:6px}
.hk-pending{color:#E5A84B;background:rgba(229,168,75,0.1);border:1px solid rgba(229,168,75,0.25)}
.hk-progress{color:#7FC78A;background:rgba(127,199,138,0.1);border:1px solid rgba(127,199,138,0.25)}
.hk-done{color:rgba(127,199,138,0.6);background:rgba(127,199,138,0.06);border:1px solid rgba(127,199,138,0.15)}
.hk-eta{font-size:10px;color:var(--text-s);font-weight:300;margin-top:4px}

/* ── TOAST NOTIFICATIONS ── */
.toast-container{position:fixed;top:62px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--surface);border:1px solid var(--bd-m);border-radius:1px;padding:10px 14px;min-width:240px;max-width:300px;pointer-events:all;animation:toastIn .3s cubic-bezier(0.22,1,0.36,1);display:flex;align-items:flex-start;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.toast.exit{animation:toastOut .25s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}
.toast-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.toast-body{flex:1}
.toast-title{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:2px}
.toast-msg{font-size:11px;color:var(--text-m);font-weight:300;line-height:1.45}
.toast-close{color:rgba(var(--gold-rgb),0.35);background:none;border:none;cursor:pointer;font-size:12px;padding:0;flex-shrink:0;margin-top:1px;transition:color .15s}
.toast-close:hover{color:var(--gold)}

/* ── PMS IDENTITY MODAL ── */
.pms-overlay{position:fixed;inset:0;background:var(--overlay-bg);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pms-modal{background:var(--surface);border:1px solid var(--bd);width:100%;max-width:400px;padding:36px 32px 28px;position:relative}
.pms-logo{font-family:var(--fd);font-size:18px;letter-spacing:0.22em;color:var(--gold);text-transform:uppercase;text-align:center;margin-bottom:4px;font-weight:500}
.pms-prop{font-size:9px;letter-spacing:0.22em;color:var(--text-s);text-transform:uppercase;text-align:center;margin-bottom:24px}
.pms-divg{width:32px;height:1px;background:var(--bd-m);margin:0 auto 24px}
.pms-source{font-size:9px;letter-spacing:0.14em;color:var(--text-xs);text-transform:uppercase;text-align:center;margin-bottom:18px}
.pms-source span{color:var(--text-s)}
.pms-field{margin-bottom:14px}
.pms-label{font-size:9px;letter-spacing:0.14em;color:var(--text-m);text-transform:uppercase;display:block;margin-bottom:6px;font-weight:500}
.pms-input{width:100%;background:var(--input-bg);border:1px solid var(--bd-m);color:var(--text);font-family:var(--fb);font-size:13px;font-weight:300;padding:9px 12px;border-radius:1px;outline:none;transition:border-color .2s}
.pms-input:focus{border-color:var(--gold)}
.pms-input::placeholder{color:var(--text-xs)}
.pms-title-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pms-title-btn{background:var(--bg);border:1px solid var(--bd-m);color:var(--text-s);font-family:var(--fb);font-size:11px;font-weight:400;letter-spacing:0.08em;padding:8px 4px;cursor:pointer;border-radius:1px;transition:all .2s;text-align:center}
.pms-title-btn:hover{border-color:var(--gold);color:var(--gold)}
.pms-title-btn.sel{border-color:var(--gold);color:var(--bg);background:var(--gold)}
.pms-note{font-size:10px;color:var(--text-xs);font-weight:300;margin-top:8px;line-height:1.5}
.pms-confirm{width:100%;margin-top:20px;padding:11px;background:var(--gold);color:var(--ink);border:none;font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;border-radius:1px;transition:all .2s}
.pms-confirm:hover{opacity:0.9}
.pms-skip{display:block;text-align:center;margin-top:12px;font-size:10px;color:var(--text-xs);cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;transition:color .2s}
.pms-skip:hover{color:var(--text-s)}

/* ── GLOVO DELIVERY ── */
.glovo-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:8px 10px;background:rgba(255,160,0,0.07);border:1px solid rgba(255,160,0,0.2);border-radius:1px}
.glovo-badge{font-size:9px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;background:#FF8C00;color:#fff;padding:3px 7px;border-radius:1px}
.glovo-note{font-size:11px;color:var(--text-s);font-weight:300}
.resto-card{background:var(--surface);border:1px solid var(--bd-m);border-radius:1px;margin-bottom:8px;overflow:hidden}
.resto-hdr{padding:10px 12px 6px;border-bottom:1px solid var(--bd);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.resto-name{font-family:var(--fd);font-size:14px;font-weight:400;color:var(--text)}
.resto-meta{font-size:10px;color:var(--text-xs);font-weight:300;margin-top:2px;letter-spacing:0.03em}
.resto-eta{font-size:10px;color:var(--gold);font-weight:500;white-space:nowrap;text-align:right}
.resto-rating{font-size:10px;color:var(--text-xs);text-align:right}
.resto-items{padding:6px 12px 10px;display:flex;flex-direction:column;gap:5px}
.glovo-item{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;cursor:pointer;padding:5px 6px;border-radius:1px;transition:background .15s}
.glovo-item:hover{background:var(--gold-p)}
body.dark .glovo-item:hover{background:rgba(var(--gold-rgb),0.1)}
.gi-name{font-size:12px;font-weight:400;color:var(--text)}
.gi-desc{font-size:10px;color:var(--text-xs);font-weight:300;margin-top:1px}
.gi-price{font-size:11px;color:var(--gold);font-weight:500;white-space:nowrap;flex-shrink:0;margin-top:1px}
.tab-note{font-size:10px;color:var(--text-xs);font-weight:300;font-style:italic;margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}

/* ── PANEL CLOSE BUTTON (mobile only) ── */
.panel-close{display:none}
.panel-hdr{display:flex;align-items:flex-start;justify-content:space-between}

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — iOS Safari + all mobile browsers
   Breakpoint: 767px covers all phones in portrait
   ══════════════════════════════════════════════════════════ */
@media (max-width:767px){

  /* ── iOS SAFARI VIEWPORT FIX ──
     position:fixed;inset:0 fills the VISUAL viewport (not the
     oversized 100vh that includes area behind browser chrome).
     This guarantees the input bar + nav are always visible. ── */
  body{position:fixed;inset:0;height:auto;font-size:15px}

  /* ── HEADER — compact ── */
  header{padding:0 12px;padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px));height:48px}
  .wordmark{font-size:16px;letter-spacing:0.15em}
  .prop-label{font-size:8px}
  .hdr-right{gap:6px}
  .hdr-btn{display:none}
  .room-badge{font-size:9px;height:22px;padding:0 7px}
  .lang-sel{height:22px;font-size:8px}
  .dark-toggle{height:22px;padding:0 7px}

  /* ── WORKSPACE — single-column, no grid on mobile ── */
  .workspace{display:flex;flex-direction:column;flex:1;overflow:hidden}
  .workspace>.hero-ambient{flex-shrink:0}
  .workspace>.nav-rail{flex-shrink:0;order:2}
  .workspace>.main-area{flex:1;overflow:hidden;order:1}

  /* ── HERO — smaller on mobile ── */
  .hero-ambient.visible{height:64px !important}

  /* ── NAV RAIL → horizontal bottom bar ── */
  .nav-rail{width:100%;flex-direction:row;align-items:center;justify-content:space-around;padding:6px 8px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));gap:0;border-right:none;border-top:1px solid rgba(var(--gold-rgb),0.14);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav-btn{width:42px;height:42px;flex-shrink:0}
  .nav-tip{display:none}

  /* ── MAIN AREA ── */
  .main-area{flex-direction:column}

  /* ── CHAT ── */
  .chat-col{min-width:0}
  .chat-msgs{padding:14px 12px 8px;gap:14px}

  /* ── WELCOME ── */
  .welcome{padding:20px 12px 12px}
  .welcome h1{font-size:20px}
  .welcome p{font-size:11px}
  .w-orn{font-size:22px;margin-bottom:4px}
  .chips{gap:5px}
  .chip{font-size:10px;padding:6px 10px}

  /* ── MESSAGES ── */
  .msg{max-width:88%;gap:8px}
  .bubble{max-width:100%;padding:10px 12px;font-size:14px}
  .av{width:24px;height:24px}
  .msg.butler .av{font-size:10px}
  .msg.guest .av{font-size:8px}
  .opt-card{padding:10px 12px}

  /* ── INPUT AREA ── */
  .input-area{padding:8px 12px 10px;border-top:1px solid var(--bd);flex-shrink:0}
  .input-row{gap:6px}
  /* 16px font prevents iOS auto-zoom on focus */
  .msg-in{font-size:16px;padding:10px 12px;min-height:44px}
  .mic-btn{width:44px;height:44px}
  .send-btn{width:44px;height:44px}

  /* ── PANELS — full-screen slide-in overlay ── */
  .iot-panel,.analytics-panel,.schema-panel{position:fixed !important;top:48px;left:0;right:0;bottom:0;z-index:50;border-left:none;width:100% !important;transform:translateX(100%);transition:transform .3s cubic-bezier(0.22,1,0.36,1) !important;overflow-y:auto}
  .iot-panel.open,.analytics-panel.open,.schema-panel.open{width:100% !important;transform:translateX(0)}

  /* ── PANEL CLOSE BUTTON — visible on mobile ── */
  .panel-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:1px solid var(--bd-m);color:var(--text-s);cursor:pointer;border-radius:1px;font-size:16px;flex-shrink:0;transition:color .15s,border-color .15s}
  .panel-close:hover{color:var(--gold);border-color:var(--gold)}

  /* ── TOAST — above input area + bottom nav ── */
  .toast-container{top:auto;bottom:130px;right:12px;left:12px}
  .toast{min-width:0;max-width:100%}

  /* ── PMS MODAL — mobile-optimised bottom sheet ── */
  .pms-overlay{padding:0;align-items:flex-end}
  .pms-modal{max-width:100%;padding:24px 20px 20px;border-radius:8px 8px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));max-height:85vh;max-height:85dvh;overflow-y:auto}
  .pms-input{font-size:16px}

  /* ── GLOVO / CONCIERGE CARDS ── */
  .concierge-card{padding:10px 12px}
  .resto-hdr{padding:8px 10px 6px}

  /* ── CONFIRM BUTTON ── */
  .cfm-btn{padding:10px 18px}
}

/* ── SAFE AREA INSETS (notched/dynamic island iPhones) ── */
@supports (padding-bottom:env(safe-area-inset-bottom)){
  @media (max-width:767px){
    .toast-container{bottom:calc(130px + env(safe-area-inset-bottom,0px))}
  }
}