html,body{height:100%;overflow:hidden}
#app{height:100%}
.shell{height:var(--app-height,100dvh);min-height:0;overflow:hidden}
.main{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-height:0;overflow:hidden}
.main>#content{min-height:0;overflow:auto;overscroll-behavior:contain}
.shell.chat-page .main>#content{overflow:hidden}
.top{height:60px;min-height:60px}
.demo{padding-top:8px;padding-bottom:8px}
.side{min-height:0;overflow:auto;overscroll-behavior:contain;padding-top:20px;padding-bottom:20px}
.side .brand{padding-bottom:18px}.side .project{margin-bottom:16px}
.side .nav{flex:1;gap:2px}.side .nav button{padding-top:10px;padding-bottom:10px}
.sidefoot{margin-top:20px;flex-shrink:0}
#menu{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;margin-right:12px;font-size:19px;vertical-align:middle}
.shell.nav-collapsed{grid-template-columns:minmax(0,1fr)}
.shell.nav-collapsed>.side{display:none}
#drawer-backdrop{display:none}
.chat-layout{height:100%;min-height:0;grid-template-columns:minmax(260px,330px) minmax(0,1fr);overflow:hidden}
.chat-list{min-height:0;overflow:auto}
.conversation{min-height:0;overflow:hidden}
.chat-head,.conversation-tools,.compose{flex:0 0 auto}
.chat-head{padding:12px 18px}
.messages{min-height:0;flex:1 1 0;overflow:auto;overscroll-behavior:contain;padding:20px;scrollbar-gutter:stable}
.messages>.bubble,.messages>.date{flex-shrink:0}
.bubble{overflow-wrap:anywhere;white-space:pre-wrap;max-width:80%}
.compose{padding:12px 18px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.composer-stack>.row{flex-wrap:nowrap;align-items:flex-end}
.composer-stack textarea{height:auto;min-height:44px;max-height:min(150px,22dvh);overflow:auto;resize:none;line-height:1.5}
#send-demo{height:44px;min-width:44px;padding:8px;font-size:22px;border-radius:12px}
#quick-replies{height:44px;min-width:40px;padding:8px;font-size:20px}
.script-hint{gap:4px;padding:8px 10px;margin-bottom:8px}
.script-hint>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat-menu-button{display:none}
.persona-switch{font-size:10px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;white-space:nowrap}
.client-view .owner .pill{display:none}
@media(min-width:761px){.shell:not(.nav-collapsed){grid-template-columns:215px minmax(0,1fr)}}
@media(max-width:1050px) and (min-width:761px){.chat-layout{grid-template-columns:280px minmax(0,1fr)}.chat-head{flex-wrap:nowrap}.chat-head>.row{gap:7px}.chat-head select{max-width:95px}.chat-head .avatar{display:none}}
@media(max-width:760px){
  .shell,.shell.nav-collapsed{grid-template-columns:minmax(0,1fr)}
  .shell>.side,.shell.nav-collapsed>.side{display:none}
  .shell.menu-open>.side{display:flex;position:fixed;inset:0 auto 0 0;width:min(290px,85vw);height:var(--app-height,100dvh);z-index:60;box-shadow:10px 0 50px #0004}
  .shell.menu-open>#drawer-backdrop{display:block;position:fixed;inset:0;background:#0005;z-index:55}
  .top{height:54px;min-height:54px;padding:0 10px}.crumb{font-size:10px}.crumb strong{margin-left:4px}
  #menu{width:34px;height:34px;margin-right:7px}
  .owner{gap:6px}.owner .avatar{width:28px;height:28px}.owner .persona-switch{font-size:9px;padding:7px;max-width:140px;white-space:normal}
  .demo{font-size:9px;padding:6px 10px;line-height:1.5}
  .chat-layout{grid-template-columns:minmax(0,1fr);height:100%}
  .chat-layout.open-chat .chat-list{display:none}
  .chat-layout:not(.open-chat) .conversation{display:none}
  .chat-layout.open-chat .conversation{display:flex}
  .shell.chat-open .top{display:none}
  .shell.chat-open .main{grid-template-rows:auto minmax(0,1fr)}
  .shell.chat-open .demo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chat-head{padding:9px 10px;gap:6px;flex-wrap:nowrap}
  .chat-head>.row{flex-wrap:nowrap;gap:6px;min-width:0}
  .chat-head>.row:first-child{flex:1}
  .chat-head>.row:first-child>div:last-child{min-width:0}
  .chat-head b{display:block;max-width:36vw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px}
  .chat-head small{font-size:9px}.chat-head br{display:none}
  .chat-head .avatar{display:none}
  .chat-head select{font-size:10px;max-width:90px;padding:7px 4px}
  .chat-head #move{display:none}
  #back{display:block;width:30px;min-width:30px;height:34px;padding:0;margin:0}
  .chat-menu-button{display:block;min-width:28px;height:34px;font-size:17px;padding:0}
  .conversation-tools{padding:7px 10px}
  .conversation-tools>.row{gap:8px;flex-wrap:nowrap;overflow-x:auto}
  .conversation-tools .account-source{font-size:9px;white-space:nowrap}
  .conversation-tools>.row>.textlink{white-space:nowrap;font-size:9px}
  .details-grid{max-height:27dvh}.crm-details{max-height:20dvh;overflow:auto}
  .messages{padding:12px;gap:12px}.bubble{max-width:90%;padding:10px 12px}
  .compose{padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .composer-stack textarea{font-size:max(16px,var(--chat-font,15px));padding:9px 10px;min-height:44px}
  .composer-stack>small{font-size:8px;line-height:1.3;margin-top:5px}
  .script-hint{font-size:10px;padding:6px 8px;display:grid;grid-template-columns:1fr auto;gap:3px 8px}
  .script-hint small{grid-column:1/-1}.script-hint>span{-webkit-line-clamp:1}.script-hint .textlink{font-size:10px}
}