#hilfe-ai-web .hn-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow:visible}
#hilfe-ai-web .hn-nav .hn-button{min-width:0!important;max-width:100%;overflow:hidden;padding-inline:2px!important}
#hilfe-ai-web .hn-nav .hn-create{overflow:visible}
#hilfe-ai-web .hn-nav .hn-nav-label{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;font-size:clamp(9px,2.5vw,12px);word-break:normal;overflow-wrap:normal}
#hilfe-web-demo-overlay .hn-demo-coins{position:absolute;top:12px;left:12px;right:60px;display:flex;flex-wrap:wrap;gap:6px;z-index:16;pointer-events:none;width:fit-content;max-width:calc(100% - 76px)}
#hilfe-web-demo-overlay .hn-demo-coin{display:flex;flex-direction:column;padding:6px 10px;border:1px solid #7d8bac80;border-radius:12px;background:#071329d9;color:white;min-width:86px;font:12px/1.35 system-ui;box-shadow:0 2px 12px #0005}
#hilfe-web-demo-overlay .hn-demo-coin small{font-size:9px;letter-spacing:.02em;color:#d5d9e5}
#hilfe-web-demo-overlay .hn-demo-coin strong{font-size:18px;color:#ffde80;font-variant-numeric:tabular-nums}
#hilfe-web-demo-overlay .hn-demo-coin.is-active{border-color:#ffe091;box-shadow:0 0 12px #ffcf5140}
#hilfe-web-demo-overlay .hn-demo-coin.is-added{animation:hn-coin-pop .45s ease-out}
#hilfe-web-demo-overlay .hn-gift-cost{display:block;color:#ffe399;font:11px/1.3 system-ui;margin-top:3px}
.hn-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes hn-coin-pop{50%{transform:scale(1.1);filter:brightness(1.35)}}
@media(max-height:480px){#hilfe-web-demo-overlay .hn-demo-coins{top:6px}.hn-demo-coin{padding:3px 8px!important}}
@media(prefers-reduced-motion:reduce){#hilfe-web-demo-overlay .hn-demo-coin.is-added{animation:none}}

#hilfe-web-demo-overlay .hn-demo-coins{width:320px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;border:1px solid #ffffff26;border-radius:15px;background:#060e22d9;backdrop-filter:blur(6px)}
#hilfe-web-demo-overlay .hn-demo-coin{min-width:0;position:relative;padding:5px 9px;border-color:#ffffff32;background:#0c1836}
#hilfe-web-demo-overlay .hn-demo-coin[data-coin-performer=quynh] small{color:#ff9cdd}
#hilfe-web-demo-overlay .hn-demo-coin[data-coin-performer=worapit] small{color:#70e7ff}
#hilfe-web-demo-overlay .hn-demo-coin.is-active{border-color:#ffffff70;box-shadow:none}
#hilfe-web-demo-overlay .hn-demo-coin.is-leading{border-color:#ffdf7f;box-shadow:0 0 12px #ffcf5138}
#hilfe-web-demo-overlay .hn-demo-coin.is-leading::after{content:'♛';position:absolute;right:7px;top:3px;color:#ffe18a;font-size:18px}
.hn-demo-battle{grid-column:1/-1;min-width:0;color:white;font:11px/1.35 system-ui}
.hn-battle-lead{display:block;text-align:center;color:#ffe18a;font-size:12px;margin:2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-battle-track{display:flex;height:13px;border-radius:8px;overflow:hidden;background:#243252;border:1px solid #ffffff36}
.hn-battle-track>span{display:block;min-width:0;height:100%;transition:width .45s ease-out}
.hn-battle-left{background:linear-gradient(90deg,#e728a8,#ff86d4);box-shadow:inset 0 2px 3px #ffffff50}
.hn-battle-right{background:linear-gradient(90deg,#70ebff,#1487e8);box-shadow:inset 0 2px 3px #ffffff50}
.hn-battle-shares{display:flex;justify-content:space-between;gap:6px;margin-top:4px;font-size:10px;font-variant-numeric:tabular-nums}
.hn-battle-shares>span:first-child{color:#ff9cdd}.hn-battle-shares>span:last-child{color:#70e7ff}
.hn-demo-battle.is-tied .hn-battle-lead{color:#e0e7fa}
@media(max-height:480px){#hilfe-web-demo-overlay .hn-demo-coins{gap:3px;padding:5px}.hn-battle-lead{margin:0 0 3px}.hn-battle-track{height:9px}.hn-battle-shares{margin-top:2px}}
@media(prefers-reduced-motion:reduce){.hn-battle-track>span{transition:none}}

.hn-screen-mode{margin:5px!important;min-width:160px}.hn-remote-focus{outline:4px solid #ffdc69!important;outline-offset:3px!important;box-shadow:0 0 20px #ffcc55!important}
#hilfe-ai-web.hn-tv-mode .hilfe-app__frame{pointer-events:none}
.hn-phone-remote{border:1px solid #65ddff;padding:14px;border-radius:18px;background:#0c1935;color:white;margin-top:12px}.hn-phone-remote h3{color:white!important}.hn-phone-remote p{font-size:12px;line-height:1.5}.hn-phone-remote button{touch-action:manipulation;min-height:48px;margin:3px;padding:10px 14px;border-radius:12px;background:#1c3762;color:white;border:1px solid #69c9f1}.hn-remote-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;max-width:340px;margin:12px auto}.hn-remote-pad button{font-size:28px;min-height:62px}.hn-remote-pad [data-remote-command=up]{grid-column:2}.hn-remote-pad [data-remote-command=left]{grid-column:1;grid-row:2}.hn-remote-pad [data-remote-command=select]{grid-column:2;grid-row:2;background:#773ba9}.hn-remote-pad [data-remote-command=right]{grid-column:3;grid-row:2}.hn-remote-pad [data-remote-command=down]{grid-column:2;grid-row:3}.hn-remote-pad [data-remote-command=back]{grid-column:3;grid-row:3}.hn-phone-remote button:disabled{opacity:.4}

#hilfe-web-demo-overlay>.hn-demo-chat{position:absolute;left:12px;bottom:12px;width:min(340px,calc(100% - 76px));max-height:32%;z-index:18;display:flex;flex-direction:column;background:#071124c9;border:1px solid #b4d5ff38;border-radius:14px;padding:8px;pointer-events:auto;color:white;font:12px/1.4 system-ui;backdrop-filter:blur(5px)}
.hn-demo-chat{color:inherit;min-width:0}.hn-demo-chat>strong{font-size:11px;letter-spacing:.06em}.hn-chat-list{overflow:auto;overscroll-behavior:contain;max-height:50dvh;min-height:30px;flex:1;scrollbar-width:thin}.hn-chat-row{padding:5px 3px;border-bottom:1px solid #ffffff15;overflow-wrap:anywhere}.hn-chat-row>strong{color:#82e4ff;margin-right:7px}.hn-chat-row>span{white-space:pre-wrap}.hn-chat-row.is-gift{color:#ffdc75}.hn-chat-row>small{display:block;opacity:.65}.hn-chat-row button{font-size:10px!important;min-height:26px!important}.hn-chat-form{display:flex;gap:4px;margin-top:5px}.hn-chat-form input{min-width:0;flex:1;padding:7px!important;background:#142340!important;color:white!important;border:1px solid #9cd5ff66!important;border-radius:8px}.hn-chat-form button,.hn-demo-chat>button{border:1px solid #809bce;background:#28487d;color:white;border-radius:8px;padding:5px 8px;font:inherit}.hn-demo-chat>button{font-size:10px;padding:2px 6px;align-self:flex-start}.hn-chat-status{font-size:10px;color:#f8dca0}.hilfe-community-panel>.hn-demo-chat .hn-chat-list{max-height:65dvh}

/* Keep media geometry independent of comment length and keyboard zoom. */
#hilfe-web-demo-overlay>.hn-demo-chat{background:transparent;border:0;backdrop-filter:none;box-sizing:border-box;min-height:0;overflow:hidden;text-shadow:0 1px 3px #000,0 0 5px #000}
#hilfe-web-demo-overlay .hn-chat-list{min-height:0;flex:1 1 auto;overflow-x:hidden}
.hn-chat-form{flex:0 0 auto;min-width:0;width:100%;box-sizing:border-box}
.hn-chat-form input{font-size:16px!important;width:0;box-sizing:border-box}
#hilfe-web-demo-overlay .hn-chat-row{background:transparent}
#hilfe-web-demo-overlay .hn-chat-row>span{word-break:break-word}

#hilfe-ai-web.hn-immersive #hilfe-web-demo-overlay .hn-demo-coins{top:max(12px,env(safe-area-inset-top,0px))!important}
#hilfe-web-demo-overlay .hn-chat-row button{padding:2px 6px!important;height:auto!important;min-height:26px!important;line-height:1.2!important}

.hn-gift-error{position:absolute;left:12px;top:45%;z-index:70;max-width:calc(100% - 24px);background:#431b32;color:#fff;padding:10px;border-radius:10px;font:14px system-ui}

/* Connected phone is a single-screen remote. Media controls remain in settings. */
.hn-phone-panel.hn-phone-online{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-height:100dvh!important;box-sizing:border-box!important;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom))!important;overflow:hidden!important;background:#08132b!important;z-index:2147483600!important}
.hn-phone-online>.hilfe-pair-grid{height:100%;display:block!important;margin:0!important;overflow:hidden}
.hn-phone-online>.hilfe-pair-grid>.hilfe-pair-video,.hn-phone-online>p,.hn-phone-online>.hilfe-pair-grid>.hilfe-pair-tools> :not(.hn-phone-remote){display:none!important}
.hn-phone-online .hilfe-pair-tools{height:100%;display:block!important;padding:0!important}
.hn-phone-online .hn-phone-remote{height:100%;box-sizing:border-box;margin:0!important;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px!important;overflow:hidden}
.hn-phone-online .hn-phone-remote h3{margin:0!important;font-size:20px!important;text-align:center}
.hn-phone-online .hn-remote-pad{width:min(100%,420px);flex:1;min-height:150px;max-height:380px;margin:4px auto!important;grid-template-rows:repeat(3,minmax(0,1fr))}
.hn-phone-online .hn-remote-pad button{min-height:0!important;height:100%;margin:0!important;font-size:34px!important}
.hn-phone-online .hn-phone-remote>p{font-size:12px!important;margin:0!important}
.hn-phone-online .hn-phone-remote>button{min-height:40px!important;margin:0!important;padding:7px!important}
.hn-phone-online .hn-phone-remote input{font-size:16px;max-width:100%;box-sizing:border-box}
.hn-phone-online.hn-phone-settings>.hilfe-pair-grid>.hilfe-pair-video{display:block!important;width:96px!important;height:64px!important;object-fit:cover;position:absolute;right:16px;top:12px}
.hn-phone-online.hn-phone-settings>.hilfe-pair-grid>.hilfe-pair-tools> :not(.hn-phone-remote){display:block!important;position:relative;z-index:2;margin:4px!important}
.hn-phone-online.hn-phone-settings .hn-phone-remote{height:50%!important;min-height:220px}
@media(orientation:landscape) and (max-height:500px){.hn-phone-online .hn-phone-remote{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:6px}.hn-phone-online .hn-remote-pad{grid-column:1;grid-row:1/4;height:100%;width:100%}.hn-phone-online .hn-phone-remote>h3,.hn-phone-online .hn-phone-remote>p,.hn-phone-online .hn-phone-remote>button,.hn-phone-online .hn-phone-remote>details{grid-column:2}.hn-phone-online .hn-phone-remote>p{display:none}}

.hn-phone-media-sheet{position:fixed;inset:0;z-index:2147483645;background:#0a1730;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));box-sizing:border-box;overflow:auto}
.hn-phone-media-sheet .hilfe-pair-video{display:block!important;width:min(100%,640px)!important;height:auto!important;max-height:50dvh!important;object-fit:contain;position:static!important}
.hn-phone-media-sheet button{min-height:48px!important;font-size:17px!important;width:min(100%,420px)}
.hn-phone-media-sheet>button:first-child{position:absolute;right:12px;top:12px;width:48px}
.hn-phone-panel.hn-phone-online .hn-phone-media-sheet .hn-phone-control{display:block!important}

.hn-phone-online .hn-phone-remote{max-width:440px;width:100%;margin:0 auto!important}
@media(orientation:landscape) and (max-height:500px){.hn-phone-online .hn-phone-remote{display:flex!important;gap:4px}.hn-phone-online .hn-remote-pad{min-height:100px;max-height:210px;flex:1;margin:0 auto!important}.hn-phone-online .hn-phone-remote>button{min-height:32px!important;padding:4px!important}.hn-phone-online .hn-phone-remote h3{font-size:16px!important}}

.hn-phone-panel:not(.hn-phone-online){position:fixed!important;inset:0!important;z-index:2147483600!important;background:radial-gradient(circle at 50% 40%,#203568,#071225 70%)!important;width:100%!important;height:100dvh!important;max-height:100dvh!important;box-sizing:border-box;display:grid!important;place-items:center;padding:24px!important;overflow:hidden!important}
.hn-phone-panel:not(.hn-phone-online)>:not(.hilfe-pair-grid){display:none!important}
.hn-phone-panel:not(.hn-phone-online) .hilfe-pair-grid{display:block!important;width:min(100%,480px)!important}
.hn-phone-panel:not(.hn-phone-online) .hilfe-pair-video{display:none!important}
.hn-phone-panel:not(.hn-phone-online) .hilfe-pair-tools>:not(.hn-phone-connect):not(.hilfe-pair-status){display:none!important}
.hn-phone-panel:not(.hn-phone-online) .hilfe-pair-status{text-align:center;color:white!important}
.hn-phone-panel .hn-phone-connect{width:100%!important;min-height:160px!important;border:2px solid #76e5ff!important;border-radius:28px!important;background:linear-gradient(135deg,#167ac9,#8237b9)!important;color:white!important;box-shadow:0 0 28px #54bcff66;font:700 24px/1.6 system-ui!important;white-space:normal!important;padding:24px!important}

/* Hide the comment scrollbar without disabling scrolling. */
#hilfe-web-demo-overlay .hn-chat-list{scrollbar-color:transparent transparent;scrollbar-width:none}
#hilfe-web-demo-overlay .hn-chat-list::-webkit-scrollbar{width:0;height:0;background:transparent}
#hilfe-web-demo-overlay .hn-chat-list::-webkit-scrollbar-thumb,#hilfe-web-demo-overlay .hn-chat-list::-webkit-scrollbar-track{background:transparent}


/* A connected phone keeps its remote while transport recovers. Keep capture rendering alive. */
.hn-phone-panel[data-remote-locked="true"] .hilfe-qr-wait,.hn-phone-panel[data-remote-locked="true"] .hn-phone-connect{display:none!important}
.hn-phone-panel.hn-phone-online .hilfe-pair-grid>.hilfe-pair-video{display:block!important;position:fixed!important;width:2px!important;height:2px!important;bottom:0!important;left:0!important;opacity:.02!important;pointer-events:none!important}