/* Disable pull-to-refresh */
html, body { overscroll-behavior: none !important; } body { position: fixed; width: 100%; height: 100%; overflow: hidden; }
body::before{content:'';position:fixed;top:-200vh;left:0;right:0;height:200vh;background:var(--bg,#0a0a0a);z-index:-1}

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

html{touch-action:manipulation;-ms-touch-action:manipulation}
body{touch-action:manipulation;-webkit-text-size-adjust:100%}
html{height:100%;overflow:hidden;background:#111;overscroll-behavior:none !important}body{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none !important}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;display:flex;justify-content:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#app{
  position:fixed;inset:0;
  max-width:480px;margin:0 auto;
  display:flex;flex-direction:column;
  overflow:hidden;
}


.header{
  background:var(--surface,#1c1c1e);color:var(--text,#f5f5f7);
  padding:12px 16px;
  padding-top:max(12px,env(safe-area-inset-top));
  display:flex;align-items:center;gap:var(--gap-md);
  flex-shrink:0;
  border-bottom:1px solid var(--line);
}
.header .avatar{
  width:var(--ava-sm);height:var(--ava-sm);border-radius:var(--ava-radius);
  background:rgba(0,229,255,.1);
  border:1px solid rgba(0,229,255,.3);
  display:flex;align-items:center;justify-content:center;font-size:26px;
  flex-shrink:0;
}
.header .info{display:flex;flex-direction:column;flex:1}
.header .info b{font-size:var(--font-lg);font-weight:700;line-height:1.2}
.header .info small{font-size:12px;color:var(--accent);font-weight:400}
.header-actions{display:flex;gap:var(--gap-lg);position:relative;z-index:10;margin-left:auto;flex-shrink:0}

/* iOS app icon 风格按钮 */
.app-icon{
  width:var(--ava-sm);height:var(--ava-sm);
  border-radius:var(--ava-radius);
  background:var(--surface2);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .2s;
  overflow:hidden;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.app-icon:active{transform:scale(.92)}
.app-icon.active{
  background:rgba(0,229,255,.2);
  box-shadow:0 2px 10px rgba(0,229,255,.25);
}

/* 日历图标内部 */
.icon-cal{width:100%;height:100%;display:flex;flex-direction:column;}
.icon-cal-top{
  background:#ff3b30;height:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;letter-spacing:0.5px;text-transform:uppercase;
}
.icon-cal-num{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:var(--bbl-font);font-weight:800;color:var(--text);line-height:1;
  font-family:-apple-system,sans-serif;
}


.chat-wrap{
  position:relative;
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chat{background:var(--bg);overscroll-behavior:none;
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  padding:12px 16px;
  display:flex;flex-direction:column;gap:var(--gap-sm);
}
/* .msg-row removed — use .bbl-row */
/* msg-row.user removed */
/* msg-row.ai removed */
/* msg-row.restore removed */
/* .ai-head removed — use .bbl-ava */
/* ai-head dark theme removed */
:root[data-theme="dark"] .theme-avatar-bg{background:var(--surface) !important}
/* ai-head light theme removed */
:root[data-theme="light"] .theme-avatar-bg{background:var(--surface) !important}
/* default (dark) */
/* .ai-head removed — use .bbl-ava */
.theme-avatar-bg{background:#1e1e1e !important}
/* ai-head img removed */
.msg-wrap{display:flex;flex-direction:column;max-width:78%;position:relative}
.msg{
  display:inline-block;padding:var(--bbl-padding);border-radius:var(--bbl-radius);min-width:20px;position:relative;
  font-size:var(--bbl-font);line-height:1.55;
  word-wrap:break-word;word-break:break-word;white-space:pre-wrap;
}
.msg.ai{background:var(--bbl-ai-bg);color:var(--bbl-ai-color);border-bottom-left-radius:var(--bbl-radius-tail);border:1px solid var(--line)}
.msg.user{background:var(--bbl-user-bg) !important;color:var(--bbl-user-color) !important;border-bottom-right-radius:var(--bbl-radius-tail);font-weight:500}
.msg a{color:inherit;text-decoration:underline;word-break:break-all}
.msg img{max-width:100%;border-radius:var(--radius-xs);display:block;margin-top:4px}
/* .bbl-time removed — use .bbl-meta .bbl-time */
.typing{display:flex;align-items:center;gap:var(--gap-sm);color:var(--label);font-size:var(--font-sm);margin-left:30px}
.dots{display:flex;gap:var(--gap-xs);align-items:center}
.dots i{width:6px;height:6px;background:var(--label);border-radius:var(--radius-full);display:block;animation:bounce 1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes typing-wiggle{0%,100%{opacity:1}50%{opacity:.7}}
.bbl-ava.typing{animation:typing-wiggle 1.2s ease-in-out infinite}
.status{padding:4px 16px;font-size:12px;color:var(--label);background:var(--bg);flex-shrink:0;text-align:center}
.status.hidden{display:none}
@keyframes reconnPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

.bar{
  position:relative;width:100%;max-width:480px;  display:flex;align-items:center;
  padding:8px 10px;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  background:var(--surface);gap:6px;
  border-top:1px solid var(--line);flex-shrink:0;
  transition:transform .28s cubic-bezier(.34,1.2,.64,1),opacity .22s ease;
}
.bar.mno-active{
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
}
.bar-icon{
  width:var(--ava-sm);height:var(--ava-sm);border-radius:var(--ava-radius);
  background:none;border:none;font-size:var(--font-xl);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--label);flex-shrink:0;
  transition:color .2s,background .2s;-webkit-tap-highlight-color:transparent;
}
.bar-icon:active{color:var(--text);background:var(--surface2)}
.bar-icon,.bar-toggle,.voice-hold{box-sizing:border-box;touch-action:manipulation}
.bar input{box-sizing:border-box}
.bar-input-wrap{flex:1;min-width:0;position:relative;overflow:visible}
.bar input{box-sizing:border-box;
  width:100%;padding:10px 14px;border-radius:var(--radius-pill);
  border:none;font-size:var(--font-md);outline:none;
  background:var(--surface2);color:var(--text);-webkit-appearance:none;line-height:1.4;
  -webkit-user-select:text;user-select:text;
}
.bar input::placeholder{color:var(--label)}
.bar input:focus{box-shadow:0 0 0 2px rgba(0,229,255,.3)}

/* Voice mode — defined below in Send/Attach Toggle block */


.plus-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:959;opacity:0;pointer-events:none;transition:opacity .25s;
}
.plus-overlay.open{opacity:1;pointer-events:auto}
.plus-panel{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--surface);border-radius:20px 20px 0 0;
  padding:20px 20px;
  padding-bottom:max(24px,env(safe-area-inset-bottom));
  z-index:960;transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  border-top:1px solid var(--line);
}
.plus-panel.open{transform:translateY(0)}
.plus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-md)}
.plus-item{display:flex;flex-direction:column;align-items:center;gap:var(--gap-sm);cursor:pointer}
.plus-item-icon{
  width:var(--ava-lg);height:var(--ava-lg);border-radius:var(--ava-radius);
  background:var(--surface2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;transition:background .15s,transform .1s;
}
.plus-item:active .plus-item-icon{background:var(--surface3);transform:scale(.92)}
/* .plus-panel — restored with 4 items only */
/* .icon-plus — restored */
/* .bar-toggle — restored */


.img-viewer{
  position:absolute;inset:0;background:rgba(0,0,0,.9);
  z-index:30;display:none;align-items:center;justify-content:center;
}
.img-viewer.open{display:flex}
.img-viewer img{max-width:100%;max-height:100%;border-radius:var(--radius-xs);object-fit:contain}
.img-viewer-close{
  position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;
  background:var(--surface2);border:none;
  width:36px;height:36px;border-radius:var(--radius-full);
  font-size:var(--font-lg);color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}


.drawer{
  position:fixed;top:0;right:0;bottom:0;width:100%;
  background:var(--surface);z-index:100;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  padding-top:max(14px,env(safe-area-inset-top));
  background:var(--surface);border-bottom:1px solid var(--line);
}
.drawer-title{font-size:var(--font-lg);font-weight:700}
.drawer-close{
  background:none;border:none;font-size:26px;cursor:pointer;
  color:var(--label);padding:4px 8px;border-radius:var(--radius-xs);
  transition:background .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.drawer-close:hover{background:var(--surface2);color:var(--text)}
.drawer-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:var(--gap-md)}

/* Product cards */
.prod-card{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;
  cursor:default;transition:border-color .15s;
}
.prod-card:hover{border-color:rgba(0,229,255,.25)}
.prod-emoji{font-size:32px;flex-shrink:0}
.prod-info{flex:1;min-width:0}
.prod-name{font-size:var(--font-md);font-weight:600;color:var(--text)}
.prod-dur{font-size:12px;color:var(--label);margin-top:2px}
.prod-right{display:flex;flex-direction:column;align-items:flex-end;gap:var(--gap-sm);flex-shrink:0}
.prod-price{font-size:var(--font-md);font-weight:700;color:var(--accent)}
.prod-book{
  background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.3);
  color:var(--accent);border-radius:var(--radius-xs);padding:5px 12px;
  font-size:var(--font-sm);font-weight:600;cursor:pointer;
  transition:background .15s;white-space:nowrap;
}
.prod-book:hover{background:rgba(0,229,255,.22)}


.cal-overlay{
  position:fixed;inset:0;
  background:var(--surface);z-index:100;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
}
.cal-overlay.open{transform:translateY(0)}
.cal-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  padding-top:max(14px,env(safe-area-inset-top));
  background:var(--surface);border-bottom:1px solid var(--line);
}
.cal-hd-title{font-size:var(--font-lg);font-weight:700}
.cal-body{flex:1;overflow-y:auto;padding:16px}
.cal-service-tag{
  display:inline-flex;align-items:center;gap:6px;
  
  color:var(--accent);font-size:var(--font-sm);font-weight:600;
  padding:5px 12px;border-radius:999px;margin-bottom:16px;
}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-nav-btn{
  background:var(--surface2);border:1px solid var(--line);
  color:var(--text);width:32px;height:32px;
  border-radius:var(--radius-xs);cursor:pointer;font-size:var(--font-md);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.cal-nav-btn:hover{background:var(--surface3)}
.cal-month-lbl{font-size:var(--font-md);font-weight:700}
.cal-dow{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:var(--gap-xs);margin-bottom:6px;
}
.cal-dow span{text-align:center;font-size:12px;color:var(--label);padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap-xs)}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-xs);font-size:14px;cursor:pointer;color:var(--text);
  transition:background .12s,color .12s;
}
.cal-day:hover:not(.past):not(.empty){background:var(--surface2)}
.cal-day.today{color:var(--accent);font-weight:700}
.cal-day.selected{background:var(--accent) !important;color:var(--accent-text) !important;font-weight:700}
.cal-day.past{color:var(--surface3);cursor:default}
.cal-day.empty{cursor:default}

/* Time slots */
.slots-section{margin-top:20px}
.slots-label{font-size:var(--font-sm);color:var(--label);margin-bottom:10px}
.slots-grid{display:flex;flex-direction:column;gap:var(--gap-xs);max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:4px}
.slot{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 14px;
  display:flex;align-items:center;gap:var(--gap-md);
  font-size:var(--font-md);cursor:pointer;color:var(--text);
  transition:all .15s;min-height:44px;
}
.slot-time{font-weight:600;min-width:50px}
.slot-note{flex:1;font-size:var(--font-sm);color:var(--label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--ok);flex-shrink:0}
.slot.taken .slot-dot{background:var(--label);opacity:0.4}
.slot:hover:not(.taken){border-color:rgba(0,229,255,.4);color:var(--accent)}
.slot.selected{background:rgba(0,229,255,.15);border-color:var(--accent);color:var(--accent);font-weight:600}
.slot.taken{color:var(--label);cursor:default;text-decoration:line-through;background:var(--surface)}

.cal-confirm{
  display:none;width:100%;
  margin-top:20px;padding:14px;
  border-radius:var(--radius-sm);border:none;
  background:var(--accent);color:var(--accent-text);
  font-size:20px;font-weight:700;cursor:pointer;
  transition:background .15s,transform .1s;
}
.cal-confirm.show{display:block}
.cal-confirm:hover{background:var(--accent2)}
.cal-confirm:active{transform:scale(.97)}

@keyframes bounce{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}
@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}


@keyframes wobble{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
#ti .bbl-ava


.pbg{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
  transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change:transform,opacity;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  object-position:bottom center;
}
.pbg.fading{opacity:0!important;transition:opacity 0.25s ease!important;}
/* Mode 1: 满屏背景 */
.pbg.bg-mode-1{
  width:auto;
  height:100svh;
  min-height:600px;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  opacity:0.45;
  left:50%;
  bottom:0;
  top:0;
  transform:translateX(-50%);
  animation:none;
}
/* Mode 2: 半身像，稍清楚 */
.pbg.bg-mode-2{
  width:55%;height:auto;
  max-width:380px;
  object-fit:contain;
  opacity:0.22;
  animation:pbr 6s ease-in-out infinite;
}
/* Mode 3: 清晰装饰 */
.pbg.bg-mode-3{
  width:50%;height:auto;
  max-width:360px;
  object-fit:contain;
  opacity:0.4;
  animation:pbr 6s ease-in-out infinite;
}
@media(min-width:480px){
  .pbg{max-width:360px;width:65%}
}
@media(min-width:768px){
  .pbg{max-width:400px;width:55%}
}
@media(min-width:1200px){
  .pbg{max-width:450px;width:50%}
}
@keyframes pbr{
  0%,100%{transform:translateX(-50%) scale(1);transform-origin:bottom center}
  50%{transform:translateX(-50%) scale(1.015);transform-origin:bottom center}
}
.pbg.pwg{
  animation:prm 0.8s ease!important;
}
@keyframes prm{
  0%,100%{transform:translateX(-50%) rotate(0deg)}
  30%{transform:translateX(-50%) rotate(0.8deg)}
  60%{transform:translateX(-50%) rotate(-0.5deg)}
}
.chat{position:relative;overflow-y:auto;z-index:2;isolation:isolate}


@keyframes ava-wiggle{
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(-8deg)}
  40%{transform:rotate(8deg)}
  60%{transform:rotate(-5deg)}
  80%{transform:rotate(4deg)}
}
.bbl-ava.wiggling{animation:ava-wiggle 0.7s ease-in-out infinite}


.ap-sel{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:24px;
  opacity:0;
  transition:opacity 0.25s ease;
  pointer-events:none;
}
.ap-sel.visible{
  opacity:1;
  pointer-events:auto;
}
.ap-sel-t{
  font-size:20px;font-weight:700;color:var(--text);
}
.ap-opts{
  position:relative;
  width:100%;height:420px;
  perspective:900px;
  -webkit-perspective:900px;
}
.ap-c{
  position:absolute;
  width:60vw;max-width:260px;
  text-align:center;cursor:pointer;
  padding:0;border-radius:24px;
  background:var(--surface2);
  overflow:hidden;
  left:50%;top:50%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform 0.45s cubic-bezier(0.34,1.3,0.64,1), opacity 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.3s ease;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  -webkit-tap-highlight-color:transparent;
}
.ap-c:active{transform:translate(-50%,-50%) scale(0.94)!important; transition:transform 0.1s ease !important;}
.ap-c.c-center{transform:translate(-50%,-50%) scale(1) rotateY(0deg);z-index:3;opacity:1;box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06)}
.ap-c.c-left{transform:translate(-118%,-50%) scale(0.78) rotateY(32deg);z-index:1;opacity:0.55}
.ap-c.c-right{transform:translate(18%,-50%) scale(0.78) rotateY(-32deg);z-index:1;opacity:0.55}
.ap-c.c-hidden{transform:translate(-50%,-50%) scale(0.55) rotateY(90deg);z-index:0;opacity:0;pointer-events:none;transition:transform 0.3s ease,opacity 0.2s ease}
.ap-ci{
  width:100%;height:auto;aspect-ratio:2/3;
  object-fit:cover;object-position:top center;
  display:block;
}
.ap-cn{font-size:var(--font-lg);font-weight:700;color:var(--text);padding:12px 8px 2px}
.ap-cd{font-size:var(--font-sm);color:var(--label);padding:2px 8px 16px}


.ap-opts.selecting .ap-c{
  opacity:.35;
  transition:opacity .35s ease,transform .35s ease;
}
.ap-opts.selecting .ap-c.chosen{
  opacity:1;
  box-shadow:0 0 0 2px var(--accent),0 8px 24px rgba(0,229,255,.18);
}



.ps-sw{
  position:absolute;top:8px;right:60px;z-index:10;
  background:var(--surface2);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px;
  font-size:var(--font-sm);cursor:pointer;color:var(--text);
  display:flex;align-items:center;gap:var(--gap-xs);
}
.ps-sw:active{opacity:0.7}
.pm{
  display:none;position:absolute;top:36px;right:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px;z-index:201;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
}
.pm.show{display:flex;flex-direction:column;gap:6px}
.pm-it{
  display:flex;align-items:center;gap:var(--gap-sm);
  padding:8px 12px;border-radius:var(--radius-xs);cursor:pointer;
  color:var(--text);font-size:var(--font-sm);
}
.pm-it:hover{background:var(--surface2)}
.pm-it.active{background:var(--accent);color:var(--accent-text)}



.chat-wrap{
  background: linear-gradient(180deg, var(--bg) 0%, var(--ambient1) 50%, var(--ambient2) 100%) !important;
  background-size: 100% 200% !important;
  animation: ambient-shift 20s ease-in-out infinite;
  transition: --ambient1 1.2s ease, --ambient2 1.2s ease;
}
/* CSS @property for animatable CSS vars (progressive enhancement) */
.chat{
  background: transparent !important;
}
@keyframes ambient-shift{
  0%,100%{background-position:0% 0%}
  50%{background-position:0% 100%}
}



@keyframes glow-pulse{
  0%,100%{opacity:0.3}
  50%{opacity:0.8}
}
@keyframes float-particle{
  0%,100%{transform:translateY(0) translateX(0);opacity:0.08}
  25%{transform:translateY(-15px) translateX(5px);opacity:0.15}
  50%{transform:translateY(-8px) translateX(-8px);opacity:0.05}
  75%{transform:translateY(-20px) translateX(3px);opacity:0.12}
}



.h-av{
  width:36px;height:36px;border-radius:var(--radius-full);
  object-fit:cover;cursor:pointer;
  border:2px solid var(--accent);
  transition:transform 0.2s;
  margin-right:8px;
}
.h-av:active{transform:scale(0.9)}


:root, :root[data-theme="dark"] {
    --bg:#0a0a0a;--surface:#1c1c1e;--surface2:#2c2c2e;--surface3:#3a3a3c;
    --text:#f5f5f7;--label:#86868b;--line:rgba(255,255,255,.1);
    --accent:#8B5CF6;--accent-text:#fff;--ok:#30d158;--ambient1:#1a1225;--ambient2:#2a1a2e;
}
:root[data-theme="light"] {
    --bg:#f2f2f7;--surface:#ffffff;--surface2:#e8e8ed;--surface3:#d1d1d6;
    --text:#1c1c1e;--label:#8e8e93;--line:rgba(0,0,0,.1);
    --accent:#007aff;--accent-text:#fff;--ok:#34c759;--ambient1:#f5e6f0;--ambient2:#ead4e8;
}
:root[data-theme="light"] html, :root[data-theme="light"] body { background:var(--bg); }
:root[data-theme="light"] #app { background:var(--surface); }
:root[data-theme="light"] .chat { background:transparent !important; }


/* System @media removed — theme is controlled by data-theme attribute only */




/* .user-head removed — use .bbl-ava */
/* user-head has-avatar removed */
/* user-head img removed */
/* user-head has-avatar removed */
/* user-head input removed */



.bar-toggle{
  width:36px;height:36px;border-radius:var(--radius-full);
  background:var(--surface2);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:background .2s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.bar-toggle{width:44px;height:44px;flex-shrink:0}
.bar-toggle.send-mode{background:var(--accent) !important;border-radius:var(--radius-full)}
.bar-toggle .icon-plus,.bar-toggle .icon-send{transition:opacity .15s,transform .15s}
.bar-toggle .icon-send{display:none}
.bar-toggle.send-mode .icon-plus{display:none}
.bar-toggle.send-mode .icon-send{display:flex}
.bar-toggle:active{transform:scale(.92)}

.voice-hold{
  display:none;width:100%;height:100%;
  position:absolute;inset:0;
  background:var(--surface2);border-radius:var(--radius-pill);
  color:var(--text);font-weight:600;font-size:var(--font-md);
  align-items:center;justify-content:center;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  border:none;
}
@keyframes voicePulse{from{opacity:1}to{opacity:.4}}
.voice-hold:active{background:var(--surface3);transform:scale(.98)}
.bar.voice-mode .voice-hold{display:flex}
.bar.voice-mode input{opacity:0;pointer-events:none}











/* ── Unread Badge ────────────────────────────────── */
.unread-badge{display:none;position:fixed;bottom:70px;right:16px;z-index:800;background:var(--accent);color:#000;font-size:12px;font-weight:700;padding:6px 12px;border-radius:16px;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3);animation:fadeIn .2s}
.unread-badge.show{display:flex;align-items:center;gap:var(--gap-xs)}
.unread-badge svg{width:14px;height:14px}
/* ── Time Separator ──────────────────────────────── */
.time-sep{display:flex;align-items:center;justify-content:center;padding:12px 0 8px;opacity:1;animation:none}
.time-sep span{font-size:var(--font-xs);color:var(--label);background:var(--bg);padding:2px 12px;border-radius:var(--radius-xs);font-weight:500}
/* ── Quote Block inside message bubbles ──────────── */
.msg .quote-block{background:rgba(0,0,0,.15);border-left:3px solid rgba(255,255,255,.4);border-radius:0 6px 6px 0;padding:5px 10px;margin-bottom:6px;font-size:var(--font-sm);line-height:1.4;opacity:.85;max-height:60px;overflow:hidden}
.msg.ai .quote-block{background:rgba(0,0,0,.08);border-left-color:var(--accent)}
.msg.user .quote-block{background:rgba(0,0,0,.15);border-left-color:rgba(255,255,255,.5)}
/* ── Reply Quote Bar ─────────────────────────────── */
.reply-bar{display:none;align-items:center;padding:8px 14px;background:var(--surface2);border-left:3px solid var(--accent);margin:0 12px;border-radius:0 8px 8px 0;gap:var(--gap-md)}
.reply-bar.show{display:flex}
.reply-bar-text{flex:1;font-size:var(--font-sm);color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.8}
.reply-bar-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--label);flex-shrink:0;border-radius:var(--radius-full);background:rgba(255,255,255,.06)}
.reply-bar-close:active{background:rgba(255,255,255,.15)}

/* ── Multi-select Mode ───────────────────────────── */
/* msg-row.selectable removed */
.bbl-row .select-check{display:none;width:24px;height:24px;border-radius:var(--radius-full);border:2px solid var(--label);flex-shrink:0;align-items:center;justify-content:center;margin-right:4px;transition:all .15s}
.bbl-row.selectable .select-check{display:flex}
.bbl-row.selected .select-check{background:var(--accent);border-color:var(--accent)}
.bbl-row.selected .select-check::after{content:'✓';color:#000;font-size:14px;font-weight:700}
.select-toolbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99990;background:var(--surface,#1c1c1e);border-top:1px solid var(--line);padding:14px 20px calc(14px + env(safe-area-inset-bottom,0));flex-direction:row;justify-content:space-around;align-items:center}
.select-toolbar.show{display:flex}
.select-toolbar-btn{display:flex;flex-direction:column;align-items:center;gap:var(--gap-xs);font-size:12px;color:var(--text);cursor:pointer;opacity:.7;padding:4px 12px}
.select-toolbar-btn:active{opacity:1}
.select-toolbar-btn svg{width:22px;height:22px}

/* ── Bubble Context Menu (long-press) ────────────────────────── */
.ctx-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;opacity:0;transition:opacity .15s}
.ctx-overlay.show{display:block;opacity:1}
.ctx-menu{position:fixed;z-index:9999;background:var(--surface,#2c2c2e);border-radius:var(--radius-sm);padding:6px 0;min-width:160px;box-shadow:0 8px 30px rgba(0,0,0,.5);transform:scale(.9);opacity:0;transition:transform .15s cubic-bezier(.34,1.56,.64,1),opacity .12s;pointer-events:none}
.ctx-menu.show{transform:scale(1);opacity:1;pointer-events:auto}
.ctx-item{display:flex;align-items:center;gap:var(--gap-md);padding:11px 16px;font-size:var(--font-md);color:var(--text,#f5f5f7);cursor:pointer;transition:background .1s;-webkit-tap-highlight-color:transparent}
.ctx-item:active{background:rgba(255,255,255,.08)}
.ctx-item:not(:last-child){border-bottom:1px solid rgba(255,255,255,.06)}
.ctx-item svg{width:18px;height:18px;flex-shrink:0;opacity:.7}
.ctx-item.danger{color:#ff3b30}
.ctx-item.danger svg{opacity:1}
.ctx-highlight{outline:2px solid var(--accent);outline-offset:2px;border-radius:18px;transition:outline .15s}

/* Avatar Cropper */
.crop-overlay{position:fixed;inset:0;z-index:99999;background:#000;display:none;flex-direction:column}
.crop-overlay.open{display:flex}
.crop-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;padding-top:max(16px,env(safe-area-inset-top));z-index:20;position:relative}
.crop-btn{background:rgba(255,255,255,.15);border:none;color:#fff;font-size:var(--font-lg);padding:10px 24px;cursor:pointer;border-radius:var(--radius-sm);font-weight:600}
.crop-btn.confirm{background:var(--accent);color:#fff}
.crop-body{flex:1;position:relative;overflow:hidden;touch-action:none}
.crop-img{position:absolute;transform-origin:0 0;will-change:transform}
.crop-circle{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:240px;height:240px;border-radius:var(--ava-radius);box-shadow:0 0 0 200vmax rgba(0,0,0,0.75);border:2px solid rgba(255,255,255,0.8);pointer-events:none;z-index:10}


:root[data-theme="light"] .plus-panel {
  background: var(--surface) !important;
  border-top: 1px solid var(--surface3) !important;
}
:root[data-theme="light"] .plus-item-icon {
  background: var(--surface) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .hdr {
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}
:root[data-theme="light"] #bizNameEl {
  color: var(--text) !important;
}
:root[data-theme="light"] #serviceNameEl,
:root[data-theme="light"] #statusText {
  color: var(--label) !important;
}
:root[data-theme="light"] .msg.user .bubble {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
}
:root[data-theme="light"] .chat-wrap {
  background: linear-gradient(180deg, var(--bg) 0%, var(--ambient1) 50%, var(--ambient2) 100%) !important;
}
:root[data-theme="light"] .slot {
  background: var(--surface) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: var(--text) !important;
}
:root[data-theme="light"] .cal-confirm {
  background: var(--accent) !important;
}

.chat-wrap.bg-mode-1-wrap{
  background: transparent !important;
  animation:none !important;
}

/* ── 墨水扩散系统（v3 — Canvas有机边缘） ────────────────────── */
/* inkLayer / inkLayerBg 保留备用（不再做主动画） */
#inkLayer{position:fixed;inset:0;z-index:9;pointer-events:none;display:none;}
#inkLayerBg{position:absolute;inset:0;}
#svgFilters{position:absolute;width:0;height:0;overflow:hidden}
/* 动态 canvas 由 JS 创建，SVG filter 叠加在上面 */

/* 火焰粒子 */
.ink-flame{
  position:fixed;z-index:10;pointer-events:none;
  border-radius:var(--radius-full);
  animation:inkFlameRise var(--dur,.9s) ease-out forwards;
}
@keyframes inkFlameRise{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}

/* 水波纹圈 */
.ink-ripple{
  position:fixed;z-index:10;pointer-events:none;
  border-radius:var(--radius-sm);border:2px solid rgba(255,255,255,.3);
  animation:inkRippleOut .65s ease-out forwards;
}
@keyframes inkRippleOut{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(4.5);opacity:0}
}

/* 光晕扩散（浅色系专属） */
.ink-halo{
  position:fixed;z-index:10;pointer-events:none;
  border-radius:var(--radius-full);
  background:radial-gradient(circle,rgba(255,255,255,.6) 0%,transparent 70%);
  animation:inkHalo .8s ease-out forwards;
}
@keyframes inkHalo{
  0%{transform:scale(0);opacity:1}
  100%{transform:scale(6);opacity:0}
}

/* ── 调色板气泡 ───────────────────────────────────────────── */
/* ── 调色板气泡 — 精美版 ───────────────────────────────── */
.palette-msg{
  align-self:flex-start;
  background:linear-gradient(135deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px 20px 20px 20px;
  padding:16px 16px 12px;
  width:min(310px,90vw);
  animation:bubbleIn .3s cubic-bezier(.34,1.56,.64,1) both;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
:root[data-theme="light"] .palette-msg{
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(248,248,252,.85));
  border-color:rgba(0,0,0,.08);
  box-shadow:0 8px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.palette-label{
  font-size:var(--font-sm);font-weight:600;
  color:var(--text2);margin-bottom:14px;
  display:flex;align-items:center;gap:6px;letter-spacing:.01em;
}
.swatch-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:12px;padding:4px 2px}
.swatch-scroll::-webkit-scrollbar{display:none}
.swatch-row{display:flex;gap:var(--gap-md);padding-bottom:2px;width:max-content}
.ink-swatch{
  width:38px;height:38px;border-radius:var(--radius-full);
  cursor:pointer;border:2.5px solid transparent;flex-shrink:0;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),
             border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  /* 光泽感：顶部高光 */
  box-shadow:0 2px 8px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.35),
             inset 0 -1px 0 rgba(0,0,0,.2);
}
.ink-swatch:active{
  transform:scale(.85);
  box-shadow:0 1px 4px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.2);
}
/* 选中：放大 + 光晕 */
.ink-swatch.active{
  transform:scale(1.18);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(255,255,255,.2),
             0 4px 16px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="light"] .ink-swatch{
  box-shadow:0 2px 8px rgba(0,0,0,.18),
             inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -1px 0 rgba(0,0,0,.1);
}
:root[data-theme="light"] .ink-swatch.active{
  border-color:rgba(0,0,0,.6);
  box-shadow:0 0 0 3px rgba(0,0,0,.12),
             0 4px 16px rgba(0,0,0,.18),
             inset 0 1px 0 rgba(255,255,255,.7);
}
/* 选中圆点内的勾 */
.ink-swatch.active::after{
  content:'✓';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ink-custom-btn{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.25);
  color:var(--label);border-radius:11px;
  padding:9px 12px;font-size:var(--font-sm);font-weight:500;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,border-color .2s,color .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.ink-custom-btn:active{background:rgba(255,255,255,.14);color:var(--text)}
:root[data-theme="light"] .ink-custom-btn{
  background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.15);
}
:root[data-theme="light"] .ink-custom-btn:active{background:rgba(0,0,0,.1)}

.bar{box-sizing:border-box !important;width:100% !important;overflow:hidden !important}
.bar input{box-sizing:border-box !important;width:100% !important}
.bar-input-wrap{overflow:hidden !important}



/* ── 餐厅模式：菜单卡片 + 购物车 ───────────────────────────────── */
.menu-bubble{
  align-self:flex-start;width:min(340px,92vw);
  background:transparent;padding:0;
}

/* ── 全屏菜单覆盖层 ──────────────────────────────────────────── */
#menuOverlay{
  overscroll-behavior:contain;
  touch-action:pan-y;
  position:fixed;
  left:50%;transform:translateX(-50%);
  width:min(480px,100%);
  bottom:0;
  top:0;
  z-index:38;
  display:flex;flex-direction:column;
  pointer-events:none;opacity:0;
  transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.2,.64,1);
  transform:translateX(-50%) translateY(20px);
  overflow:hidden;
}
#menuOverlay.open{
  pointer-events:auto;opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* top bar */
.mno-topbar{
  display:flex;align-items:center;
  padding:10px 12px;
  padding-top:max(10px,env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
  flex-shrink:0;gap:var(--gap-sm);
}
.mno-topbar-title{flex:1;font-size:var(--font-md);font-weight:800;text-align:center;color:var(--text)}
.mno-btn{
  width:var(--ava-sm);height:var(--ava-sm);border-radius:var(--radius-sm);border:none;
  background:var(--surface2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--font-lg);position:relative;flex-shrink:0;
  transition:transform .12s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.mno-btn:active{transform:scale(.9)}
.mno-btn.active{background:rgba(0,229,255,.18);color:var(--accent)}
.mno-cart-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;border-radius:9px;
  background:var(--accent);color:#000;
  font-size:10px;font-weight:900;
  display:none;align-items:center;justify-content:center;
  padding:0 4px;
  animation:badgePop .25s cubic-bezier(.34,1.56,.64,1);
}
.mno-cart-badge.show{display:flex}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}

/* body = sidebar + list */
.mno-body{display:flex;flex:1;overflow:hidden;}

/* left sidebar — default OPEN (80px), collapses to 0 */
.mno-sidebar{
  width:80px;overflow-y:auto;overflow-x:hidden;
  background:var(--surface2);
  border-right:1px solid var(--line);
  flex-shrink:0;
  transition:width .22s cubic-bezier(.34,1.2,.64,1);
  display:flex;flex-direction:column;
}
.mno-sidebar.closed{width:0;overflow:hidden}
.mno-cat-item{
  padding:14px 8px;
  font-size:12px;font-weight:700;
  color:var(--label);cursor:pointer;
  text-align:center;
  border-bottom:1px solid var(--line);
  transition:color .15s,background .15s;
  line-height:1.3;
  -webkit-tap-highlight-color:transparent;
}
.mno-cat-item.active{color:var(--accent);background:rgba(0,229,255,.08)}

/* right grid area */
/* ── 右侧列表区域 ─────────────────────────────────────────────── */
.mno-grid-wrap{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:0;
  -webkit-overflow-scrolling:touch;
}
.mno-grid-wrap::-webkit-scrollbar{display:none}

/* 分类 section 标题 */
.mno-cat-label{
  font-size:var(--font-sm);font-weight:800;color:var(--text2);
  padding:12px 14px 6px;
  background:var(--surface2);
  position:sticky;top:0;z-index:2;
  border-bottom:1px solid var(--line);
}

/* 列表式菜品行 */
.mno-list-item{
  display:flex;align-items:center;gap:var(--gap-md);
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .1s;
}
.mno-list-item:active{background:var(--surface2)}
.mno-list-img{
  width:120px;height:80px;border-radius:var(--radius-xs);flex-shrink:0;object-fit:cover;
  object-fit:cover;background:var(--surface3);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;overflow:hidden;
}
.mno-list-img img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xs)}
.mno-list-info{flex:1;min-width:0}
.mno-list-name{
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:3px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.mno-list-desc{
  font-size:12px;color:var(--label);margin-bottom:5px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.mno-list-price{font-size:14px;font-weight:800;color:#ff4d4f}
.mno-list-action{flex-shrink:0;display:flex;align-items:center;gap:6px}
.mno-btn-plus{
  width:28px;height:28px;border-radius:var(--radius-xs);border:none;
  background:var(--accent);color:#000;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .1s;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.mno-btn-plus:active{transform:scale(.82)}
.mno-btn-minus{
  width:26px;height:26px;border-radius:var(--radius-xs);border:none;
  background:var(--surface3);color:var(--text);font-size:var(--font-lg);line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.mno-btn-minus:active{transform:scale(.82)}
.mno-qty-num{font-size:var(--font-sm);font-weight:800;min-width:16px;text-align:center}

/* skeleton */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.mno-skeleton{
  border-radius:var(--radius-xs);
  background:linear-gradient(90deg,var(--surface3) 25%,var(--surface2) 50%,var(--surface3) 75%);
  background-size:800px 100%;
  animation:shimmer 1.4s infinite linear;
}
.mno-sk-thumb{width:80px;height:80px;border-radius:var(--radius-xs);flex-shrink:0}
.mno-sk-line{height:12px;border-radius:6px;background:var(--surface3);animation:shimmer 1.4s infinite linear;background-size:800px 100%;background-image:linear-gradient(90deg,var(--surface3) 25%,var(--surface2) 50%,var(--surface3) 75%)}
.mno-sk-name{width:60%;margin-bottom:6px}
.mno-sk-desc{width:80%;margin-bottom:6px}
.mno-sk-price{width:30%}

/* ── 底部购物车栏 ─────────────────────────────────────────────── */
#mnoCartBar{
  flex-shrink:0;
  background:var(--surface2);border-top:1px solid var(--line);
  padding:10px 14px;
  display:none;align-items:center;gap:var(--gap-md);
}
#mnoCartBar.show{display:flex}
.mno-cb-icon{
  width:var(--ava-sm);height:var(--ava-sm);border-radius:var(--radius-sm);background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;position:relative;flex-shrink:0;
}
.mno-cb-badge{
  position:absolute;top:-4px;right:-4px;
  background:#ff4d4f;color:#fff;
  border-radius:var(--radius-xs);font-size:10px;font-weight:900;
  padding:1px 5px;min-width:16px;text-align:center;
}
.mno-cb-mid{flex:1;min-width:0}
.mno-cb-total{font-size:var(--font-md);font-weight:900;color:var(--accent)}
.mno-cb-hint{font-size:var(--font-xs);color:var(--label)}
.mno-cb-checkout{
  background:var(--accent);color:#000;border:none;
  border-radius:var(--radius-pill);padding:10px 18px;
  font-size:14px;font-weight:800;cursor:pointer;flex-shrink:0;
  transition:transform .1s,opacity .1s;
}
.mno-cb-checkout:active{transform:scale(.95);opacity:.85}

/* ── 购物车详情 sheet ──────────────────────────────────────────── */
#mnoCartSheet{
  position:absolute;bottom:0;left:0;right:0;
  border-radius:20px 20px 0 0;
  max-height:70vh;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
  z-index:20;display:flex;flex-direction:column;
  padding-bottom:max(20px,env(safe-area-inset-bottom,20px));
}
#mnoCartSheet.open{transform:translateY(0)}
.mno-cs-hd{
  display:flex;align-items:center;padding:16px 16px 10px;
  border-bottom:1px solid var(--line);
}
.mno-cs-title{flex:1;font-size:var(--font-md);font-weight:800}
.mno-cs-close{width:32px;height:32px;border-radius:var(--radius-full);background:var(--surface2);border:none;color:var(--label);font-size:var(--font-lg);cursor:pointer}
.mno-cs-items{overflow-y:auto;flex:1;padding:0 16px}
.mno-cs-items::-webkit-scrollbar{display:none}
.mno-cs-row{
  display:flex;align-items:center;gap:var(--gap-sm);
  padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--font-sm);
}
.mno-cs-row:last-child{border-bottom:none}
.mno-cs-name{flex:1;font-weight:600}
.mno-cs-price{color:#ff4d4f;font-weight:800;margin-right:6px;font-size:var(--font-sm)}
.mno-cs-footer{
  padding:12px 16px 0;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);margin-top:4px;
}
.mno-cs-total{font-size:var(--font-lg);font-weight:900;color:var(--accent)}
.mno-cs-order{
  background:var(--accent);color:#000;border:none;
  border-radius:var(--radius-sm);padding:10px 22px;
  font-size:14px;font-weight:900;cursor:pointer;
}
.mno-cs-order:active{opacity:.85}
#mnoCartMask{
  position:absolute;inset:0;z-index:15;
  background:rgba(0,0,0,.5);display:none;
}
#mnoCartMask.show{display:block}

/* ── tabs (hidden — kept for compat, JS does not render) ── */
.mno-cat-tabs,.mno-cat-tab{display:none}

/* bottom voice bar inside overlay */
.mno-voicebar{
  flex-shrink:0;
  display:flex;align-items:center;
  padding:10px 12px;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  gap:var(--gap-md);
}
.mno-voicebar-hold{
  flex:1;height:44px;border-radius:var(--radius-pill);
  background:var(--surface2);border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  gap:var(--gap-sm);font-size:var(--font-sm);font-weight:600;color:var(--label);
  cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s;
}
.mno-voicebar-hold:active{background:rgba(0,229,255,.15);border-color:var(--accent);color:var(--accent)}
.mno-voicebar-send{
  width:var(--ava-sm);height:var(--ava-sm);border-radius:var(--radius-sm);border:none;
  background:var(--accent);color:#000;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.mno-voicebar-send:active{transform:scale(.9)}

/* fly-to-cart animation */
.mno-fly-dot{
  position:fixed;z-index:100;
  width:28px;height:28px;border-radius:var(--radius-full);
  background:var(--accent);color:#000;
  font-size:14px;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  transition:none;
}
@keyframes cartBounce{
  0%{transform:scale(1)}
  30%{transform:scale(1.35)}
  60%{transform:scale(.9)}
  100%{transform:scale(1)}
}
.menu-cat-bar{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  background:var(--surface);border-radius:var(--radius-sm) 12px 0 0;
  border-bottom:1px solid var(--line);
}
.menu-cat-bar::-webkit-scrollbar{display:none}
.menu-cat-tab{
  flex-shrink:0;padding:9px 14px;font-size:var(--font-sm);font-weight:600;
  color:var(--label);cursor:pointer;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .2s,border-color .2s;
}
.menu-cat-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.menu-cards-scroll{
  display:flex;gap:var(--gap-md);overflow-x:auto;scrollbar-width:none;
  padding:12px 12px 12px;-webkit-overflow-scrolling:touch;
  background:var(--surface);border-radius:0 0 12px 12px;
}
.menu-cards-scroll::-webkit-scrollbar{display:none}
.menu-dish-card{
  flex-shrink:0;width:130px;
  background:var(--surface2);border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;transition:transform .15s;
  border:1.5px solid transparent;
}
.menu-dish-card:active{transform:scale(.96)}
.menu-dish-card.in-cart{border-color:var(--accent)}
.menu-dish-emoji{height:80px;display:flex;align-items:center;justify-content:center;font-size:42px;background:var(--surface3)}
.menu-dish-info{padding:8px 10px 10px}
.menu-dish-name{font-size:var(--font-sm);font-weight:700;margin-bottom:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.menu-dish-price{font-size:14px;font-weight:800;color:var(--accent)}
.menu-qty-row{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.mq-btn{width:26px;height:26px;border-radius:var(--radius-full);border:none;cursor:pointer;font-size:var(--font-md);display:flex;align-items:center;justify-content:center;transition:transform .1s}
.mq-btn:active{transform:scale(.85)}
.mq-btn.plus{background:var(--accent);color:#000}
.mq-btn.minus{background:var(--surface3);color:var(--text)}
.mq-num{font-size:14px;font-weight:800;min-width:16px;text-align:center}

/* Cart sheet */
#_rCartSheet{display:none}
._rcs-item{display:flex;align-items:center;gap:var(--gap-md);padding:10px 0;border-bottom:1px solid var(--line)}
._rcs-name{flex:1;font-size:14px;font-weight:600}
._rcs-price{font-size:14px;color:var(--accent);font-weight:700;margin-right:8px}
._rcs-checkout{width:100%;background:var(--accent);color:#000;border:none;border-radius:var(--radius-sm);padding:15px;font-size:var(--font-md);font-weight:800;cursor:pointer;margin-top:12px}
._rcs-checkout:active{opacity:.85}

/* ── bubble-item: 单品卡片气泡 ─────────────────────────────────── */
.bubble-item{
  align-self:flex-start;width:min(200px,68vw);
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  overflow:hidden;animation:bubbleIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.bubble-item-emoji{height:100px;display:flex;align-items:center;justify-content:center;font-size:52px;background:var(--surface2)}
.bubble-item-body{padding:12px 14px 14px}
.bubble-item-name{font-size:var(--font-md);font-weight:800;margin-bottom:4px}
.bubble-item-desc{font-size:12px;color:var(--label);margin-bottom:8px;line-height:1.4}
.bubble-item-row{display:flex;align-items:center;justify-content:space-between}
.bubble-item-price{font-size:var(--font-md);font-weight:900;color:var(--accent)}
.bubble-item-add{width:32px;height:32px;border-radius:var(--radius-full);border:none;background:var(--accent);color:#000;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.bubble-item-add:active{transform:scale(.85)}

/* ── bubble-recommend: 横滑推荐轨 ─────────────────────────────── */
.bubble-recommend{
  align-self:flex-start;width:min(360px,95vw);
  background:transparent;padding:0;
  animation:bubbleIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.bubble-recommend-label{font-size:12px;font-weight:700;color:var(--label);padding:0 4px 8px}
.bubble-recommend-scroll{
  display:flex;gap:var(--gap-md);overflow-x:auto;scrollbar-width:none;
  padding:4px 2px 8px;-webkit-overflow-scrolling:touch;
}
.bubble-recommend-scroll::-webkit-scrollbar{display:none}
.bubble-recommend-card{
  flex-shrink:0;width:120px;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;cursor:pointer;transition:transform .15s;
}
.bubble-recommend-card:active{transform:scale(.95)}
.bubble-recommend-card.in-cart{border-color:var(--accent)}
.bubble-rc-emoji{height:72px;display:flex;align-items:center;justify-content:center;font-size:38px;background:var(--surface2)}
.bubble-rc-body{padding:8px 10px 10px}
.bubble-rc-name{font-size:12px;font-weight:700;margin-bottom:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bubble-rc-price{font-size:var(--font-sm);font-weight:900;color:var(--accent)}
.bubble-rc-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.brc-btn{width:24px;height:24px;border-radius:var(--radius-full);border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:transform .1s}
.brc-btn:active{transform:scale(.85)}
.brc-btn.plus{background:var(--accent);color:#000}
.brc-btn.minus{background:var(--surface3);color:var(--text)}
.brc-num{font-size:var(--font-sm);font-weight:800;min-width:14px;text-align:center}

/* ── bubble-cart: 购物车气泡 ──────────────────────────────────── */
.bubble-cart{
  align-self:flex-start;width:min(320px,90vw);
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  overflow:hidden;animation:bubbleIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.bubble-cart-header{padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px}
.bubble-cart-items{padding:8px 14px}
.bubble-cart-row{display:flex;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--font-sm)}
.bubble-cart-row:last-child{border-bottom:none}
.bubble-cart-name{flex:1;font-weight:600}
.bubble-cart-price{color:var(--accent);font-weight:800;margin:0 10px}
.bubble-cart-total{padding:10px 14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.bubble-cart-total-label{font-size:var(--font-sm);color:var(--label)}
.bubble-cart-total-price{font-size:var(--font-lg);font-weight:900;color:var(--accent)}
.bubble-cart-checkout{display:block;width:calc(100% - 28px);margin:0 14px 14px;background:var(--accent);color:#000;border:none;border-radius:var(--radius-sm);padding:12px;font-size:var(--font-md);font-weight:900;cursor:pointer;transition:opacity .15s,transform .1s}
.bubble-cart-checkout:active{opacity:.85;transform:scale(.97)}


/* ════════════════════════════════════════════════════════════════
   全屏菜单面板 — Full-Screen Menu Panel
   ════════════════════════════════════════════════════════════════ */

#menuPanel {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
#menuPanel.open { transform: translateY(0); }

/* ── Top Nav ── */
.mn-nav {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  gap: 8px;
  flex-shrink: 0;
}
.mn-nav-btn {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--surface2); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text);
  transition: background .15s, transform .1s;
  flex-shrink: 0; position: relative;
}
.mn-nav-btn:active { transform: scale(.88); }
.mn-nav-title {
  flex: 1; font-size: 15px; font-weight: 700;
  text-align: center; color: var(--text2);
}
.mn-cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--err); color: #fff;
  border-radius: 10px; font-size: 10px; font-weight: 900;
  padding: 1px 5px; min-width: 16px; text-align: center;
  display: none;
}
.mn-cart-badge.show { display: block; }

/* ── Cart Dropdown ── */
#mnCartDrop {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
  flex-shrink: 0;
}
#mnCartDrop.open { max-height: 60vh; overflow-y: auto; }
.mn-cart-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.mn-cart-item:last-child { border-bottom: none; }
.mn-ci-name  { flex: 1; font-weight: 600; }
.mn-ci-price { color: var(--accent); font-weight: 700; margin-right: 8px; }
.mn-cart-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.mn-cart-total { font-size: 18px; font-weight: 900; color: var(--accent); }
.mn-order-btn {
  background: var(--accent); color: #000; border: none;
  border-radius: 10px; padding: 10px 20px;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
.mn-order-btn:active { opacity: .85; }

/* ── Content: sidebar + grid ── */
.mn-content {
  flex: 1; display: flex; overflow: hidden;
}

/* Left sidebar (collapsible) */
.mn-sidebar {
  width: 0; overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--line);
  flex-shrink: 0;
  transition: width .25s ease;
  display: flex; flex-direction: column;
}
.mn-sidebar.open { width: 80px; overflow-y: auto; }
.mn-cat-item {
  padding: 12px 8px; text-align: center; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--label);
  border-bottom: 1px solid var(--line);
  transition: color .15s, background .15s;
  word-break: keep-all;
}
.mn-cat-item:active   { background: var(--surface2); }
.mn-cat-item.active   { color: var(--accent); background: rgba(0,229,255,.06); }

/* Right dish grid */
.mn-grid-wrap {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px;
}
.mn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mn-dish-card {
  background: var(--surface); border-radius: 14px; overflow: hidden;
  border: 1.5px solid transparent;
  transition: border-color .2s, transform .15s;
  position: relative;
}
.mn-dish-card.in-cart { border-color: var(--accent); }
.mn-dish-card:active  { transform: scale(.97); }
.mn-dish-img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; background: var(--surface3);
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
}
.mn-dish-img img { width: 100%; height: 100%; object-fit: cover; }
.mn-dish-body { padding: 8px 10px 10px; }
.mn-dish-name {
  font-size: 13px; font-weight: 700; margin-bottom: 3px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mn-dish-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.mn-dish-price { font-size: 14px; font-weight: 800; color: var(--accent); }
.mn-add-btn {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--accent); color: #000; border: none;
  font-size: 20px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: transform .1s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,229,255,.3);
}
.mn-add-btn:active { transform: scale(.82); }
.mn-qty-row {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
}
.mn-q-btn {
  width: 26px; height: 26px; border-radius: 10px; border: none;
  cursor: pointer; font-size: 16px; display: flex;
  align-items: center; justify-content: center; transition: transform .1s;
}
.mn-q-btn.plus  { background: var(--accent); color: #000; }
.mn-q-btn.minus { background: var(--surface2); color: var(--text); }
.mn-q-btn:active { transform: scale(.82); }
.mn-q-num { font-size: 13px; font-weight: 800; min-width: 16px; text-align: center; }

/* ── Cat section header (in grid) ── */
.mn-cat-header {
  grid-column: 1 / -1;
  font-size: 15px; font-weight: 800;
  color: var(--text2); padding: 8px 2px 4px;
}
.mn-cat-header:first-child { padding-top: 0; }

/* ── Fly-to-cart animation ── */
.mn-fly-item {
  position: fixed; pointer-events: none; z-index: 999;
  font-size: 30px; opacity: 1;
  transition: none;
}

/* ── Menu bottom bar (voice mode) ── */
.mn-bar {
  flex-shrink: 0;
  padding: 10px 14px max(14px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.mn-voice-btn {
  flex: 1; background: var(--surface2); border: none; border-radius: 24px;
  padding: 13px 16px; color: var(--label); font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.mn-voice-btn:active { background: var(--surface3); }
.mn-voice-btn.recording {
  background: rgba(255,59,48,.15); color: var(--err);
  animation: voicePulse .8s ease-in-out infinite;
}
@keyframes voicePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,59,48,.3); }
  50%      { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
}

/* ── 商户菜单管理 ─────────────────────────────────────────── */
.mgmt-hd-btn{display:none !important}

/* ── Mesh Team Panel ───────────────────────────────── */
#meshBtn{color:var(--label)}
/* Contacts dropdown — clip wrapper ensures nothing leaks above header */
#meshOverlay{position:fixed;inset:0;z-index:900;display:none;background:transparent}
#meshOverlay.open{display:block}
/* Clip wrapper: sits right below header, overflow:hidden clips all children */
/* ── 通讯录卡片叠层（从底部弹起） ── */
#meshClip{
  position:fixed;left:0;right:0;
  top:0; /* JS sets this = header.bottom — drops down from button */
  z-index:901;
  height:0;overflow:hidden;
  pointer-events:none;
  transition:height 0.8s cubic-bezier(.25,1,.3,1);
}
#meshClip.open{pointer-events:auto}
/* Card wrap — relative container */
#meshCardWrap{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
}
/* Base card style */
.mesh-card{
  position:absolute;
  left:0;right:0;top:0;bottom:0;
  background:var(--surface,#1c1c1e);
  border-radius:18px 18px 0 0;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 -8px 32px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* Personal card: front by default */
#meshPersonalCard{z-index:2;transform:translateX(0)}
/* Group card: peeking 60px on right */
#meshGroupCard{z-index:1;transform:translateX(calc(100% - 60px))}
/* When groups active */
#meshCardWrap.grp-active #meshGroupCard{transform:translateX(0);z-index:3}
#meshCardWrap.grp-active #meshPersonalCard{transform:translateX(calc(-100% + 60px));z-index:2}
/* Card header */
.mesh-card-hdr{
  display:flex;align-items:center;
  padding:0 16px;
  min-height:78px;box-sizing:border-box;
  border-bottom:1px solid rgba(255,255,255,.07);
  flex-shrink:0;
  position:relative;
}
.mesh-card-hdr-title{
  font-size:var(--font-lg);font-weight:700;color:var(--text);
  position:absolute;left:50%;transform:translateX(-50%);
  white-space:nowrap;
}
.mesh-card-side-btn{
  font-size:14px;font-weight:600;color:var(--accent);
  background:none;border:none;padding:4px 6px;cursor:pointer;border-radius:var(--radius-xs);
  white-space:nowrap;flex-shrink:0;
}
.mesh-card-side-btn:active{opacity:.6}
.mesh-card-side-left{margin-right:auto}
.mesh-card-side-right{margin-left:auto}
/* Card body */
.mesh-card-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none}
/* Keep old classes for mesh chat */
.mesh-nav{display:flex;align-items:center;gap:var(--gap-sm);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface);flex-shrink:0}
.mesh-nav-title{flex:1;font-size:var(--font-md);font-weight:800;text-align:center;color:var(--text)}
.mesh-nav-btn{width:36px;height:36px;border-radius:var(--radius-full);background:var(--surface3);border:none;color:var(--text);font-size:var(--font-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
.mesh-nav-btn:active{transform:scale(.9)}
.mesh-section-hdr{font-size:var(--font-xs);font-weight:700;color:var(--label);text-transform:uppercase;letter-spacing:.06em;padding:14px 16px 6px}
.mesh-member{display:flex;align-items:center;gap:14px;padding:0 16px;min-height:78px;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;border-bottom:1px solid rgba(255,255,255,.04)}
.mesh-member:active{background:var(--surface2)}
.mesh-member:last-child{border-bottom:none}
.mesh-ava-wrap{position:relative;flex-shrink:0}
.mesh-ava{width:var(--ava-md);height:var(--ava-md);border-radius:var(--ava-radius);display:flex;align-items:center;justify-content:center;font-size:26px;-webkit-user-select:none;user-select:none}
.mesh-ava img{width:100%;height:100%;object-fit:cover;border-radius:var(--ava-radius)}
.mesh-ava.grp img{border-radius:var(--ava-radius)}
.mesh-ava.grp{border-radius:var(--ava-radius)}
.mesh-online-dot{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:var(--radius-full);background:#30d158;border:2px solid var(--bg)}
.mesh-badge-dot{position:absolute;top:0;right:0;width:10px;height:10px;border-radius:var(--radius-full);background:#ff3b30;border:2px solid var(--bg)}
.mesh-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mesh-row1{display:flex;align-items:baseline;gap:6px}
.mesh-name{font-size:var(--font-md);font-weight:600;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mesh-time{font-size:12px;color:var(--label);flex-shrink:0;white-space:nowrap}
.mesh-sub{font-size:14px;color:var(--label);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mesh-chevron{color:var(--label);font-size:14px;flex-shrink:0}
/* Embedded chat */
#meshChat{display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y;transform:translateX(-100%);pointer-events:none}
#meshChat.mc-from-right{transform:translateX(100%)}
#meshChat.mc-open{transform:translateX(0);pointer-events:auto;transition:transform 0.8s cubic-bezier(.25,1,.3,1)}
#meshChat.mc-close-right{transform:translateX(100%);pointer-events:none;transition:transform 0.8s cubic-bezier(.25,1,.3,1)}
#meshChat.mc-close-left{transform:translateX(-100%);pointer-events:none;transition:transform 0.8s cubic-bezier(.25,1,.3,1)}
#meshChatMsgs{touch-action:pan-y !important;overscroll-behavior:contain !important;-webkit-overflow-scrolling:touch !important;overflow-y:auto !important}
#meshChatFrame{flex:1;border:none;width:100%;background:var(--bg)}
#mgmtPanel{position:fixed;inset:0;z-index:900;background:var(--bg);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column}
#mgmtPanel.open{transform:translateY(0)}
.mgmt-nav{display:flex;align-items:center;gap:var(--gap-sm);padding:12px 16px 12px;border-bottom:1px solid var(--line);background:var(--surface2)}
.mgmt-nav-title{flex:1;font-size:var(--font-md);font-weight:800;text-align:center;color:var(--text)}
.mgmt-nav-btn{width:36px;height:36px;border-radius:var(--radius-full);background:var(--surface3);border:none;color:var(--text);font-size:var(--font-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.mgmt-nav-btn:active{transform:scale(.9)}
.mgmt-nav-add{background:var(--accent);color:#000;font-weight:800;font-size:var(--font-sm);width:auto;padding:0 14px;border-radius:18px;height:34px}
.mgmt-tabs{display:flex;padding:0 16px;border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0}
.mgmt-tabs::-webkit-scrollbar{display:none}
.mgmt-tab{padding:10px 14px;font-size:var(--font-sm);font-weight:600;color:var(--label);white-space:nowrap;cursor:pointer;border-bottom:2.5px solid transparent;transition:color .15s,border-color .15s}
.mgmt-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.mgmt-body{flex:1;overflow-y:auto;padding:12px 16px}
.mgmt-body::-webkit-scrollbar{display:none}
.mgmt-item{display:flex;align-items:center;gap:var(--gap-md);padding:12px;background:var(--surface2);border-radius:var(--radius-sm);margin-bottom:8px;border:1px solid var(--line)}
.mgmt-item-thumb{width:var(--ava-md);height:var(--ava-md);border-radius:var(--radius-xs);background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;overflow:hidden}
.mgmt-item-thumb img{width:100%;height:100%;object-fit:cover}
.mgmt-item-info{flex:1;min-width:0}
.mgmt-item-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgmt-item-meta{font-size:12px;color:var(--label);display:flex;align-items:center;gap:var(--gap-xs)}
.mgmt-item-price{font-size:var(--font-sm);font-weight:800;color:var(--accent)}
.mgmt-status-dot{width:7px;height:7px;border-radius:var(--radius-full);display:inline-block;flex-shrink:0}
.mgmt-status-dot.on{background:#2dd4a0}.mgmt-status-dot.off{background:#ff3b30}
.mgmt-item-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.mgmt-sort-wrap{display:flex;flex-direction:column;gap:3px;margin-right:2px}
.mgmt-sort-btn{width:26px;height:22px;border-radius:6px;background:var(--surface3);border:none;color:var(--label);font-size:var(--font-xs);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mgmt-sort-btn:active{background:var(--accent);color:#000}
.mgmt-edit-btn{width:34px;height:34px;border-radius:var(--radius-xs);background:var(--surface3);border:none;color:var(--text);font-size:var(--font-md);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mgmt-edit-btn:active{transform:scale(.9)}
.mgmt-empty{text-align:center;padding:50px 20px;color:var(--label);font-size:14px;line-height:2}
/* Form sheet */
#mgmtFormOverlay{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.55);display:none;align-items:flex-end;backdrop-filter:blur(2px)}
#mgmtFormOverlay.open{display:flex}
.mgmt-sheet{width:100%;background:var(--bg);border-radius:var(--radius-pill) 22px 0 0;padding:20px 20px 40px;max-height:90vh;overflow-y:auto}
.mgmt-sheet::-webkit-scrollbar{display:none}
.mgmt-sheet-hd{display:flex;align-items:center;margin-bottom:20px}
.mgmt-sheet-title{flex:1;font-size:var(--font-md);font-weight:800}
.mgmt-sheet-close{width:32px;height:32px;border-radius:var(--radius-full);background:var(--surface2);border:none;color:var(--label);font-size:var(--font-lg);cursor:pointer;line-height:1}
.mgmt-field{margin-bottom:14px}
.mgmt-field label{display:block;font-size:var(--font-xs);font-weight:700;color:var(--label);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
.mgmt-field input,.mgmt-field select,.mgmt-field textarea{width:100%;padding:11px 14px;background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-size:14px;font-family:inherit;outline:none;box-sizing:border-box;-webkit-appearance:none}
.mgmt-field textarea{height:72px;resize:none}
.mgmt-field input:focus,.mgmt-field select:focus,.mgmt-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(45,212,160,.18)}
.mgmt-row{display:flex;gap:var(--gap-md)}.mgmt-row .mgmt-field{flex:1}
.mgmt-img-box{width:100%;height:104px;border:2px dashed var(--line);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--font-sm);color:var(--label);gap:var(--gap-sm);position:relative;overflow:hidden;background:var(--surface2)}
.mgmt-img-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mgmt-img-box:active{border-color:var(--accent)}
.mgmt-img-box-hint{display:flex;align-items:center;gap:6px;pointer-events:none}
.mgmt-btn-save{width:100%;padding:14px;background:var(--accent);color:#000;font-size:var(--font-md);font-weight:800;border:none;border-radius:var(--radius-sm);cursor:pointer;margin-top:8px}
.mgmt-btn-save:active{opacity:.85;transform:scale(.98)}
.mgmt-btn-del{width:100%;padding:12px;background:rgba(255,59,48,.1);color:#ff3b30;font-size:14px;font-weight:700;border:1px solid rgba(255,59,48,.2);border-radius:var(--radius-sm);cursor:pointer;margin-top:8px}
.mgmt-btn-del:active{opacity:.8}



/* ── Hero transition (iOS-style expand from avatar) ── */
#meshChat.mc-hero-in{
  animation: meshHeroIn 0.45s cubic-bezier(.32,0,.67,0) forwards;
}
#meshChat.mc-hero-out{
  animation: meshHeroOut 0.38s cubic-bezier(.33,1,.68,1) forwards;
  pointer-events:none;
}
@keyframes meshHeroIn{
  from{transform:var(--hero-origin-transform,scale(0.08));transform-origin:var(--hero-origin,50% 80%);opacity:0;border-radius:var(--radius-full)}
  60%{border-radius:20px;opacity:1}
  to{transform:translateX(0) scale(1);transform-origin:var(--hero-origin,50% 80%);opacity:1;border-radius:0}
}
@keyframes meshHeroOut{
  from{transform:scale(1);transform-origin:var(--hero-origin,50% 80%);opacity:1;border-radius:0}
  40%{border-radius:20px;opacity:1}
  to{transform:var(--hero-origin-transform,scale(0.08));transform-origin:var(--hero-origin,50% 80%);opacity:0;border-radius:var(--radius-full)}
}


/* ── Voice Message Bubbles ───────────────────────────────────── */
.msg[data-voice] {
  padding: 10px 14px !important;
  min-width: 120px;
  max-width: 220px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.msg[data-voice] .voice-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.msg[data-voice] audio { display: none; }
.msg[data-voice] .voice-play-icon {
  width: 24px; height: 24px; flex-shrink: 0;
}
.msg.user[data-voice] .voice-play-icon { color: rgba(255,255,255,.9); }
.msg.ai[data-voice]   .voice-play-icon { color: var(--label,#666); }
.msg[data-voice] .voice-waves {
  display: flex; align-items: center; gap: 2px; flex: 1; height: 22px;
}
.msg[data-voice] .voice-waves span {
  display: block; width: 3px; border-radius: 3px;
  transition: height .15s ease;
}
.msg.user[data-voice] .voice-waves span { background: rgba(255,255,255,.6); }
.msg.ai[data-voice]   .voice-waves span { background: var(--accent); opacity: .6; }
.msg[data-voice] .voice-dur {
  font-size: 12px; font-weight: 600; flex-shrink: 0; white-space: nowrap;
}
.msg.user[data-voice] .voice-dur { color: rgba(255,255,255,.8); }
.msg.ai[data-voice]   .voice-dur { color: var(--sublabel,#999); }
/* Playing animation */
@keyframes vw0{0%,100%{height:4px}50%{height:16px}}
@keyframes vw1{0%,100%{height:10px}50%{height:4px}}
@keyframes vw2{0%,100%{height:14px}50%{height:6px}}
@keyframes vw3{0%,100%{height:6px}50%{height:18px}}
@keyframes vw4{0%,100%{height:8px}50%{height:4px}}
.msg[data-voice].voice-playing .voice-waves span:nth-child(1){animation:vw0 .6s ease-in-out infinite}
.msg[data-voice].voice-playing .voice-waves span:nth-child(2){animation:vw1 .6s .08s ease-in-out infinite}
.msg[data-voice].voice-playing .voice-waves span:nth-child(3){animation:vw2 .6s .04s ease-in-out infinite}
.msg[data-voice].voice-playing .voice-waves span:nth-child(4){animation:vw3 .6s .12s ease-in-out infinite}
.msg[data-voice].voice-playing .voice-waves span:nth-child(5){animation:vw4 .6s .06s ease-in-out infinite}
.msg[data-voice].voice-playing .voice-waves span:nth-child(6){animation:vw0 .6s .1s ease-in-out infinite}
.msg[data-voice].voice-playing .voice-waves span:nth-child(7){animation:vw1 .6s .14s ease-in-out infinite}
.msg[data-voice].voice-playing .voice-waves span:nth-child(8){animation:vw2 .6s .02s ease-in-out infinite}
/* Play/pause icon */
.vp-ic { flex-shrink:0; width:20px; height:20px; }
.msg.user .vp-ic { color:rgba(255,255,255,.9); }
.msg.ai   .vp-ic { color:var(--label); }
/* Waveform bars */
@keyframes vpBar0{0%,100%{height:4px}50%{height:14px}}
@keyframes vpBar1{0%,100%{height:8px}50%{height:4px}}
@keyframes vpBar2{0%,100%{height:12px}50%{height:6px}}
@keyframes vpBar3{0%,100%{height:6px}50%{height:16px}}
@keyframes vpBar4{0%,100%{height:10px}50%{height:4px}}
.vp-wave { display:flex; align-items:center; gap:2px; height:18px; flex:1; }
.vp-wave span { display:block; width:3px; border-radius:3px; height:4px; }
.msg.user .vp-wave span { background:rgba(255,255,255,.7); }
.msg.ai   .vp-wave span { background:var(--accent); opacity:.7; }
.vp-playing .vp-wave span:nth-child(1){animation:vpBar0 .6s ease-in-out infinite}
.vp-playing .vp-wave span:nth-child(2){animation:vpBar1 .6s ease-in-out .1s infinite}
.vp-playing .vp-wave span:nth-child(3){animation:vpBar2 .6s ease-in-out .05s infinite}
.vp-playing .vp-wave span:nth-child(4){animation:vpBar3 .6s ease-in-out .15s infinite}
.vp-playing .vp-wave span:nth-child(5){animation:vpBar4 .6s ease-in-out .08s infinite}
/* Duration */
.vp-dur { font-size:12px; font-weight:600; flex-shrink:0; }
.msg.user .vp-dur { color:rgba(255,255,255,.85); }
.msg.ai   .vp-dur { color:var(--label); }

/* Avatar Crop — only cropOverlay styles remain */
#cropImg{position:absolute;cursor:grab;user-select:none;touch-action:none;}
#cropImg.grabbing{cursor:grabbing;}
.crop-hint{color:#aaa;font-size:var(--font-sm);margin:16px 0 8px;text-align:center;}




/* ── Pull-to-refresh prevention ────────────────── */
html,body{overscroll-behavior:none !important;overflow:hidden}
.chat,.chat-wrap,.mesh-card-body,#meshGrpBody,#meshDmBody,
.chat-inner,#history,.messages,[class*="scroll"]{
  overscroll-behavior:none !important;
}
#meshChat .msg.user{background:var(--bbl-user-bg) !important;color:var(--bbl-user-color) !important}
#meshChat .msg.ai{background:#2c2c2e !important;color:#e5e5e5 !important;border:none !important}
#meshChat .bar-toggle.send-mode{background:#8774E1 !important}