@layer product { .trip-ai-fab{position:fixed;z-index:70;inset-inline-end:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.24);border-radius:999px;padding:8px 14px 8px 9px;background:linear-gradient(135deg,color-mix(in srgb, var(--acc) 62%, #000) 0%,hsl(from var(--acc) h s calc(l + 2)) 62%,#5556d9 100%);color:#fff;box-shadow:0 12px 34px rgba(6,75,85,.34),inset 0 1px 0 rgba(255,255,255,.18);font:700 14px 'Noto Sans Hebrew',system-ui;cursor:pointer;min-height:50px;transition:transform .2s ease,box-shadow .2s ease}.trip-ai-fab:hover,.trip-ai-fab.is-open{transform:translateY(-2px);box-shadow:0 16px 40px rgba(6,75,85,.4),inset 0 1px 0 rgba(255,255,255,.2)}.trip-ai-orb{position:relative;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.17);font-size:18px}.trip-ai-orb i{position:absolute;inset:-4px;border:1px solid rgba(255,255,255,.5);border-radius:50%;opacity:0}.trip-ai-fab.has-update .trip-ai-orb i{animation:trip-ai-pulse 1.8s ease-out infinite}.trip-ai-fab em{position:absolute;inset-inline-start:-2px;top:-3px;min-width:20px;height:20px;display:grid;place-items:center;border:2px solid #fff;border-radius:999px;background:#ff5f5f;color:#fff;font:800 10px 'Noto Sans Hebrew',system-ui,sans-serif;font-style:normal}.trip-ai-panel{direction:rtl;position:fixed;z-index:71;inset-inline-end:max(18px,env(safe-area-inset-right));bottom:88px;width:min(430px,calc(100vw - 24px));height:min(680px,calc(100dvh - 118px));display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#f7fbfc 0%,#fff 100%);border:1px solid rgba(8,65,77,.12);border-radius:24px;box-shadow:0 28px 80px rgba(12,35,48,.28);font-family:'Noto Sans Hebrew',system-ui;color:#14232c;transform-origin:bottom right;animation:trip-ai-panel-in .22s ease-out}.trip-ai-panel[hidden],.trip-ai-nudge[hidden]{display:none}.trip-ai-panel>header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 17px;background:linear-gradient(135deg,color-mix(in srgb, var(--acc) 52%, #000) 0%,var(--acc) 58%,#5055cc 100%);color:#fff}.trip-ai-brand{display:flex;align-items:center;gap:11px}.trip-ai-brand>div{display:grid;line-height:1.15}.trip-ai-avatar{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:20px}.trip-ai-panel>header small{font-size:10px;font-weight:800;color:#bbf5ef;letter-spacing:.02em}.trip-ai-panel>header small:before{content:'';display:inline-block;width:7px;height:7px;margin-inline-end:5px;border-radius:50%;background:#55efbd;box-shadow:0 0 0 4px rgba(85,239,189,.13)}.trip-ai-panel>header strong{font-size:18px;margin-top:2px}.trip-ai-panel>header .trip-ai-brand span:last-child{font-size:11px;color:rgba(255,255,255,.72);margin-top:3px}.trip-ai-panel>header>[data-ai-close]{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:22px;cursor:pointer}.trip-ai-observations{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:15px;display:flex;flex-direction:column;gap:11px;scrollbar-width:thin}.trip-ai-empty{display:grid;place-items:center;text-align:center;gap:10px;padding:25px 20px;color:#5c6e78}.trip-ai-empty>span{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#def7f4,#ececff);color:var(--acc);font-size:22px}.trip-ai-empty p{max-width:300px;margin:0;font-size:13px;line-height:1.65}.trip-ai-observation{margin:0}.trip-ai-context-card{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid rgb(from var(--acc) r g b / .12);border-radius:16px;background:rgba(255,255,255,.82);box-shadow:0 7px 22px rgba(14,53,67,.06)}.trip-ai-context-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#eaf7f6;color:var(--acc);font-weight:900}.trip-ai-context-card strong{display:block;font-size:13px;color:#153440}.trip-ai-context-card p{margin:3px 0 8px;color:#60727c;font-size:12px;line-height:1.5}.trip-ai-context-card button{border:0;padding:0;background:transparent;color:var(--acc);font:700 12px 'Noto Sans Hebrew',system-ui;cursor:pointer}.trip-ai-answer{padding:0;border:1px solid rgba(74,80,201,.14);border-radius:19px;background:#fff;box-shadow:0 12px 32px rgba(25,42,68,.08);overflow:hidden}.trip-ai-answer-head{display:flex;align-items:center;gap:9px;padding:12px 14px;background:linear-gradient(90deg,#f0fbfa,#f3f2ff)}.trip-ai-answer-head>span{width:32px;height:32px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,var(--acc),#5658d8);color:#fff}.trip-ai-answer-head>div{display:grid}.trip-ai-answer-head small{font-size:10px;font-weight:800;color:var(--acc)}.trip-ai-answer-head strong{font-size:13px;color:#20323e}.trip-ai-answer-summary{margin:0;padding:14px 15px 10px;white-space:pre-line;color:#263943;font-size:14px;line-height:1.65}.trip-ai-goal{display:flex;gap:7px;align-items:flex-start;margin:0 15px 11px;padding:9px 10px;border-radius:11px;background:#f5f8fb;font-size:12px;line-height:1.5}.trip-ai-goal b{flex:0 0 auto;color:#4f55c7}.trip-ai-answer-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 15px 12px}.trip-ai-answer-block{padding:10px;border-radius:12px;background:#f4faf9}.trip-ai-answer-block.is-missing{background:#fff8ef}.trip-ai-answer-block>strong{font-size:11px;color:var(--acc)}.trip-ai-answer-block.is-missing>strong{color:#a96616}.trip-ai-answer-block ul{margin:6px 0 0;padding-inline-start:17px;color:#526670;font-size:11px;line-height:1.55}.trip-ai-answer-block li+li{margin-top:4px}.trip-ai-next-step{display:grid;gap:3px;margin:0 15px 14px;padding:11px 12px;border-radius:13px;background:linear-gradient(135deg,#e9f8f6,#efefff);font-size:12px;line-height:1.55}.trip-ai-next-step b{color:var(--acc)}.trip-ai-answer .trip-ai-feedback{display:flex;align-items:center;gap:6px;margin:0;padding:9px 14px;border-top:1px solid #edf1f3;background:#fbfcfd}.trip-ai-answer .trip-ai-feedback span{margin-inline-end:auto;color:#788790;font-size:11px}.trip-ai-answer .trip-ai-feedback button{width:30px;height:30px;padding:0;border:1px solid rgba(18,83,85,.13);background:#fff;border-radius:10px;cursor:pointer}.trip-ai-panel form{flex:0 0 auto;padding:11px 14px 14px;border-top:1px solid rgba(12,62,75,.08);background:rgba(255,255,255,.96);box-shadow:0 -8px 24px rgba(22,52,64,.04)}.trip-ai-panel label{display:block;font-size:11px;color:#5d6d76;margin-bottom:6px}.trip-ai-prompts{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px;padding-bottom:1px;scrollbar-width:none}.trip-ai-prompts::-webkit-scrollbar{display:none}.trip-ai-prompts button{flex:0 0 auto;min-height:31px;padding:5px 10px;border:1px solid rgb(from var(--acc) r g b / .14);border-radius:999px;background:#f4fafa;color:color-mix(in srgb, var(--acc) 83%, #000);font:700 11px 'Noto Sans Hebrew',system-ui;cursor:pointer}.trip-ai-panel form>div:last-child{display:flex;gap:8px;padding:5px;border:1px solid rgba(12,62,75,.14);border-radius:15px;background:#fff;box-shadow:0 6px 18px rgba(20,51,65,.06)}.trip-ai-panel input{min-width:0;flex:1;padding:8px 9px;border:0;outline:0;font:13px 'Noto Sans Hebrew',system-ui;background:transparent}.trip-ai-panel form>div:last-child>button{display:flex;align-items:center;gap:6px;border:0;border-radius:11px;min-width:66px;min-height:40px;justify-content:center;padding:0 12px;background:linear-gradient(135deg,var(--acc),#5055cc);color:#fff;font:700 12px 'Noto Sans Hebrew',system-ui;cursor:pointer}.trip-ai-panel form>div:last-child>button:disabled{opacity:.65}.trip-ai-panel form.is-thinking>div:last-child>button i{animation:trip-ai-thinking .8s ease-in-out infinite alternate}.trip-ai-nudge{direction:rtl;position:fixed;z-index:72;inset-inline-end:max(18px,env(safe-area-inset-right));bottom:88px;width:min(355px,calc(100vw - 24px));display:grid;grid-template-columns:42px 1fr;gap:11px;padding:14px 15px;background:rgba(255,255,255,.98);border:1px solid rgb(from var(--acc) r g b / .17);border-radius:19px;box-shadow:0 20px 55px rgba(15,44,61,.24);font-family:'Noto Sans Hebrew',system-ui;color:#18323e;animation:trip-ai-nudge-in .28s ease-out}.trip-ai-nudge.severity-high{border-color:rgba(222,71,71,.3);box-shadow:0 20px 55px rgba(110,34,34,.2)}.trip-ai-nudge>[data-ai-nudge-close]{position:absolute;inset-inline-start:8px;top:7px;width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:transparent;color:#71808a;font-size:18px;cursor:pointer}.trip-ai-nudge-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#dff7f4,#ececff);color:var(--acc);font-size:19px}.trip-ai-nudge small,.trip-ai-nudge strong,.trip-ai-nudge p{display:block}.trip-ai-nudge small{color:var(--acc);font-size:10px;font-weight:800}.trip-ai-nudge strong{padding-inline-end:25px;font-size:14px;margin-top:1px}.trip-ai-nudge p{margin:4px 0 8px;color:#5b6c76;font-size:12px;line-height:1.5}.trip-ai-nudge [data-ai-nudge-open]{border:0;padding:0;background:transparent;color:var(--acc);font:700 12px 'Noto Sans Hebrew',system-ui;cursor:pointer}@keyframes trip-ai-pulse{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.45);opacity:0}}@keyframes trip-ai-panel-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes trip-ai-nudge-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes trip-ai-thinking{from{transform:translateX(0)}to{transform:translateX(-4px)}}@media(prefers-reduced-motion:reduce){.trip-ai-fab,.trip-ai-panel,.trip-ai-nudge,.trip-ai-orb i,.trip-ai-panel form.is-thinking i{animation:none!important;transition:none!important}} .trip-guidance-card{display:grid;gap:10px;padding:13px;border-radius:16px;background:#fff;border:1px solid rgb(from var(--acc) r g b / .16);box-shadow:0 8px 22px rgba(18,42,58,.07)}.trip-guidance-primary{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.trip-guidance-primary strong{font-size:15px}.trip-guidance-primary b{white-space:nowrap;color:var(--acc2)}.trip-guidance-step{display:flex;gap:9px;align-items:flex-start;padding-top:9px;border-top:1px solid rgba(20,40,55,.08)}.trip-guidance-step:first-of-type{border-top:0;padding-top:0}.trip-guidance-step-icon{width:32px;height:32px;display:grid;place-items:center;flex:0 0 32px;border-radius:10px;background:#eef6f6}.trip-guidance-step div{min-width:0}.trip-guidance-step strong,.trip-guidance-step span{display:block}.trip-guidance-step span{font-size:12px;color:#667782}.trip-guidance-purpose{margin:0;padding:10px 11px;border-radius:12px;background:#f7fbfb;color:#4a5b68;font-size:12px;line-height:1.6;border:1px solid rgb(from var(--acc) r g b / .1)}.trip-guidance-purpose strong{color:var(--acc2)}.trip-guidance-actions{display:flex;gap:8px;flex-wrap:wrap}.trip-guidance-actions button,.trip-guidance-actions a{min-height:42px;border-radius:12px;padding:9px 12px;font:700 12px 'Noto Sans Hebrew',system-ui;text-decoration:none}.trip-guidance-map-focus{background:var(--acc);color:#fff;border:0}.trip-guidance-secondary{background:#fff;color:var(--acc2);border:1px solid rgb(from var(--acc) r g b / .22)}.trip-ai-planning-actions{display:flex;justify-content:flex-start;margin:10px 0 14px}.trip-ai-plan-action{min-height:44px;border:1px solid rgb(from var(--acc) r g b / .2);border-radius:13px;padding:10px 15px;background:#fff;color:var(--acc2);font:700 13px 'Noto Sans Hebrew',system-ui;cursor:pointer}.trip-ai-plan-action.is-primary{border:0;background:var(--acc);color:#fff;box-shadow:0 6px 16px rgb(from var(--acc) r g b / .16)}.trip-ai-planning-preview{direction:rtl;max-width:760px;margin:12px 0 18px;padding:16px;background:#fff;border:1px solid rgb(from var(--acc) r g b / .15);border-radius:18px;box-shadow:0 10px 28px rgba(18,42,58,.08);font-family:'Noto Sans Hebrew',system-ui;color:#152029}.trip-ai-planning-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.trip-ai-planning-head div{display:grid;gap:2px}.trip-ai-planning-head small{font-size:11px;color:var(--acc);font-weight:800}.trip-ai-planning-head strong{font-size:18px}.trip-ai-planning-head>button{width:38px;height:38px;border:0;border-radius:50%;background:#f1f5f5;font-size:20px;cursor:pointer}.trip-ai-plan-flow{direction:ltr;display:flex;align-items:center;gap:7px;overflow-x:auto;padding:15px 2px 11px;scrollbar-width:thin}.trip-ai-plan-node{direction:rtl;flex:0 0 auto;max-width:180px;padding:9px 11px;border-radius:12px;background:#f3f8f8;border:1px solid rgb(from var(--acc) r g b / .09);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trip-ai-flow-arrow{direction:ltr;flex:0 0 auto;color:var(--acc);font-style:normal;font-size:22px;line-height:1}.trip-ai-planning-preview>p{margin:4px 0 13px;color:#667782;font-size:12px;line-height:1.55}.trip-ai-planning-preview .trip-guidance-actions{justify-content:flex-start}.trip-ai-planning-preview .trip-guidance-actions .trip-ai-plan-action:first-child{background:var(--acc);color:#fff;border:0}.trip-ai-planning-preview .trip-guidance-actions .trip-ai-plan-action:last-child{background:transparent;border-color:transparent;color:#667782}.ts-affiliate-cta{direction:rtl;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 14px 12px;padding:9px 10px;border:1px solid rgb(from var(--acc) r g b / .12);border-radius:13px;background:#f8fbfb;font-family:'Noto Sans Hebrew',system-ui}.ts-affiliate-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 11px;border-radius:11px;background:#fff;color:var(--acc2);border:1px solid rgb(from var(--acc) r g b / .2);font-weight:700;font-size:12px;text-decoration:none}.ts-affiliate-disclosure{color:#71808a;font-size:10px;white-space:nowrap} .trip-ai-observations{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;scroll-behavior:smooth;overscroll-behavior:contain}.trip-ai-answer>.trip-ai-answer-summary{display:block!important;visibility:visible!important;opacity:1!important;max-height:none!important;min-height:44px!important;overflow:visible!important;color:#263943!important}.trip-ai-answer>.trip-ai-answer-summary>span{display:block!important;visibility:visible!important;opacity:1!important;color:inherit!important}.trip-ai-support-trigger{position:fixed;z-index:70;inset-inline-end:max(28px,env(safe-area-inset-right));bottom:146px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgb(from var(--acc) r g b / .18);border-radius:15px;background:rgba(255,255,255,.96);color:var(--acc);box-shadow:0 10px 28px rgba(8,67,78,.18);font-size:20px;cursor:pointer}.trip-ai-support-trigger:hover{transform:translateY(-1px)}.trip-ai-support-panel{direction:rtl;position:fixed;z-index:74;inset-inline-end:max(18px,env(safe-area-inset-right));bottom:88px;width:min(430px,calc(100vw - 24px));height:min(680px,calc(100dvh - 118px));display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(8,65,77,.12);border-radius:24px;background:linear-gradient(180deg,#f7fbfc 0%,#fff 100%);color:#17313d;box-shadow:0 28px 80px rgba(12,35,48,.28);font-family:'Noto Sans Hebrew',system-ui;transform-origin:bottom right;animation:trip-ai-panel-in .22s ease-out}.trip-ai-support-panel[hidden]{display:none}.trip-ai-support-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(135deg,color-mix(in srgb, var(--acc) 52%, #000),var(--acc) 58%,#5055cc);color:#fff}.trip-ai-support-head>div{display:grid}.trip-ai-support-head small{font-size:10px;color:#baf4ee;font-weight:800}.trip-ai-support-head strong{font-size:18px}.trip-ai-support-head button{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:21px;cursor:pointer}.trip-ai-support-form{min-height:0;flex:1;display:grid;align-content:start;gap:12px;padding:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.trip-ai-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.trip-ai-support-field{display:grid;gap:5px}.trip-ai-support-field label{font-size:11px;color:#526772;font-weight:700}.trip-ai-support-field input,.trip-ai-support-field textarea{box-sizing:border-box;width:100%;border:1px solid rgba(12,62,75,.15);border-radius:12px;padding:10px 11px;background:#fbfdfd;color:#17313d;font:13px 'Noto Sans Hebrew',system-ui;outline:0}.trip-ai-support-field textarea{min-height:120px;resize:vertical}.trip-ai-support-field input:focus,.trip-ai-support-field textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgb(from var(--acc) r g b / .09)}.trip-ai-support-note{margin:0;color:#697a84;font-size:11px;line-height:1.5}.trip-ai-support-submit{min-height:44px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--acc),#5055cc);color:#fff;font:800 13px 'Noto Sans Hebrew',system-ui;cursor:pointer} .trip-ai-observations>.trip-ai-observation,.trip-ai-observations>.trip-ai-empty,.trip-ai-observations>.trip-ai-thinking-card{flex:0 0 auto!important}.trip-ai-support-trigger{z-index:73!important;width:auto!important;height:54px!important;padding:5px 13px 5px 7px!important;display:flex!important;align-items:center;gap:9px;border-radius:18px!important;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(242,250,250,.96))!important;border-color:rgba(72,87,199,.18)!important;color:color-mix(in srgb, var(--acc) 55%, #000)!important;font:800 11px 'Noto Sans Hebrew',system-ui;box-shadow:0 12px 32px rgba(8,67,78,.2),inset 0 1px 0 #fff!important}.trip-ai-support-trigger b{white-space:nowrap}.trip-ai-support-logo-wrap,.trip-ai-support-head-logo{display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(145deg,#fff,#eefafa);box-shadow:0 7px 18px rgba(30,75,103,.18),inset 0 0 0 1px rgba(255,255,255,.9)}.trip-ai-support-logo-wrap{width:42px;height:42px;border-radius:14px}.trip-ai-support-head-logo{width:46px;height:46px;border-radius:15px}.trip-ai-support-logo{display:block;width:34px;height:34px;overflow:visible;filter:drop-shadow(0 3px 4px rgba(29,53,89,.16))}.trip-ai-support-head-logo .trip-ai-support-logo{width:37px;height:37px}.trip-ai-support-head{gap:11px}.trip-ai-support-head>div{flex:1}.trip-ai-feedback{display:flex;gap:6px;margin-top:7px}.trip-ai-feedback button{border:1px solid rgba(18,83,85,.18);background:#fff;border-radius:999px;padding:4px 8px;cursor:pointer}.trip-ai-feedback button:disabled{opacity:.55;cursor:default} .trip-ai-support-guest[hidden],.trip-ai-support-identity[hidden]{display:none}.trip-ai-support-identity{display:grid;grid-template-columns:40px 1fr;grid-template-areas:'icon label' 'icon name' 'icon email';align-items:center;column-gap:11px;padding:12px;border:1px solid rgb(from var(--acc) r g b / .13);border-radius:15px;background:linear-gradient(135deg,#eef9f8,#f2f2ff)}.trip-ai-support-identity:before{content:"";display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--mark-check) center/contain no-repeat;mask:var(--mark-check) center/contain no-repeat;box-sizing:border-box;padding:9px;grid-area:icon;width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,var(--acc),#5559cc);color:#fff;font-weight:900}.trip-ai-support-identity small{grid-area:label;color:var(--acc);font-size:10px;font-weight:800}.trip-ai-support-identity strong{grid-area:name;color:#17313d;font-size:13px}.trip-ai-support-identity span{grid-area:email;color:#61747e;font-size:11px;direction:ltr;text-align:right;overflow-wrap:anywhere} .trip-ai-thinking-card{display:flex;gap:11px;align-items:center;padding:13px 14px;margin-bottom:9px;border-radius:16px;background:linear-gradient(135deg,#f0fbfa,#f1f1ff);border:1px solid rgb(from var(--acc) r g b / .14);box-shadow:0 8px 22px rgba(20,56,72,.06)}.trip-ai-thinking-card[hidden]{display:none}.trip-ai-thinking-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,var(--acc),#5559cc);color:#fff;animation:trip-ai-thinking-glow 1.2s ease-in-out infinite alternate}.trip-ai-thinking-card>div{display:flex;align-items:center;gap:10px;min-width:0}.trip-ai-thinking-card b{font-size:12px;color:#31505d}.trip-ai-thinking-dots{display:inline-flex;gap:4px}.trip-ai-thinking-dots i{width:5px;height:5px;border-radius:50%;background:var(--acc);animation:trip-ai-thinking-dot .9s ease-in-out infinite}.trip-ai-thinking-dots i:nth-child(2){animation-delay:.14s}.trip-ai-thinking-dots i:nth-child(3){animation-delay:.28s}@keyframes trip-ai-thinking-dot{0%,70%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-4px);opacity:1}}@keyframes trip-ai-thinking-glow{from{box-shadow:0 0 0 0 rgb(from var(--acc) r g b / .12)}to{box-shadow:0 0 0 7px rgb(from var(--acc) r g b / .05)}} .trip-live-companion{direction:rtl;position:fixed;z-index:90;inset-inline-end:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:min(430px,calc(100vw - 28px));display:grid;grid-template-columns:48px 1fr;gap:13px;padding:18px;background:rgba(255,255,255,.98);border:1px solid rgb(from var(--acc) r g b / .18);border-radius:24px;box-shadow:0 26px 80px rgba(16,45,61,.28);font-family:'Noto Sans Hebrew',system-ui;color:#17313d;animation:trip-ai-nudge-in .3s ease-out}.trip-live-companion[hidden]{display:none}.trip-live-companion-close{position:absolute;inset-inline-start:9px;top:8px;width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:transparent;color:#71808a;font-size:20px;cursor:pointer}.trip-live-companion-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,var(--acc),#5559cc);color:#fff;font-size:21px;box-shadow:0 9px 22px rgb(from var(--acc) r g b / .22)}.trip-live-companion-copy small{display:block;color:var(--acc);font-size:10px;font-weight:800}.trip-live-companion-copy h2{margin:2px 28px 4px 0;font-size:18px;line-height:1.25}.trip-live-companion-copy p{margin:0 0 10px;color:#536875;font-size:12px;line-height:1.55}.trip-live-companion-copy ol{display:grid;gap:5px;margin:0 0 13px;padding:0;list-style:none;counter-reset:companion}.trip-live-companion-copy li{position:relative;padding-inline-start:22px;font-size:11px;color:#405864}.trip-live-companion-copy li:before{content:"";display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--mark-check) center/contain no-repeat;mask:var(--mark-check) center/contain no-repeat;width:.9em;height:.9em;position:absolute;inset-inline-start:0;color:var(--acc);font-weight:900}.trip-live-companion-actions{display:flex;flex-wrap:wrap;gap:7px}.trip-live-companion-actions button{border:1px solid rgb(from var(--acc) r g b / .18);border-radius:11px;padding:8px 11px;background:#fff;color:#31505d;font:700 11px 'Noto Sans Hebrew',system-ui;cursor:pointer}.trip-live-companion-actions .is-primary{border:0;background:linear-gradient(135deg,var(--acc),#5559cc);color:#fff}.trip-live-companion-ios{margin-top:11px;padding:10px 11px;border-radius:12px;background:#f2f8f8;color:#405864}.trip-live-companion-ios b,.trip-live-companion-ios span{display:block}.trip-live-companion-ios b{font-size:12px;color:color-mix(in srgb, var(--acc) 53%, #000)}.trip-live-companion-ios span{font-size:11px;line-height:1.5;margin-top:3px}@media(prefers-reduced-motion:reduce){.trip-ai-thinking-avatar,.trip-ai-thinking-dots i,.trip-live-companion{animation:none!important}} /* Unified Trip AI and support launchers */ /* THE LAUNCHER SAT ON THE EDGE (register B19, 2026-09-20). Porat, of the published site: the Trip AI button "sits too far over, right on the border - it should be further in". 18px is not an inset on a 1280 page, it is a control touching the frame, and on a phone the ten below was worse. 28 and 18: the launcher clears the edge by something a person can see, and every launcher moves together rather than one of them drifting. HONEST NOTE: from the screenshot alone I could not tell which of the two launchers was photographed - the fixture that would have measured it does not load this sheet (its guard matches a comment in the template rather than the link), so both move. */ .trip-ai-fab,.trip-ai-support-trigger{inset-inline-end:max(28px,env(safe-area-inset-right))!important;box-sizing:border-box;overflow:visible;justify-content:flex-start;transition:width .22s ease,transform .2s ease,box-shadow .2s ease!important} .trip-ai-fab{bottom:max(18px,env(safe-area-inset-bottom))!important;width:60px;height:60px;min-height:60px!important;padding:6px!important;border-radius:999px!important;gap:9px!important;background:rgba(255,255,255,.98)!important;color:color-mix(in srgb, var(--acc) 76%, #000)!important;border:1px solid rgb(from var(--acc) r g b / .2)!important} .trip-ai-fab .trip-ai-orb{width:46px;height:46px;min-width:46px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#56d9bf 0%,var(--acc) 48%,color-mix(in srgb, var(--acc) 66%, #000) 100%);color:#fff;box-shadow:0 7px 20px rgb(from var(--acc) r g b / .3);animation:trip-ai-live-orb 3.2s ease-in-out infinite} .trip-ai-fab .trip-ai-orb i{inset:-5px!important;border-color:rgba(23,190,157,.55)!important;opacity:0!important;animation:none!important}.trip-ai-fab.has-update .trip-ai-orb i{animation:trip-ai-pulse 2.2s ease-out infinite!important}.trip-ai-route-mark{position:relative;width:27px;height:27px;display:block;transform:rotate(-5deg)}.trip-ai-route-mark:before{content:'';position:absolute;inset:5px 4px 6px 5px;border-top:2px dashed rgba(255,255,255,.92);border-right:2px dashed rgba(255,255,255,.92);border-radius:0 14px 0 0;transform:rotate(-16deg);transform-origin:center;animation:trip-ai-route-breathe 3.2s ease-in-out infinite}.trip-ai-route-mark:after{content:'';position:absolute;inset-inline-end:1px;top:1px;width:8px;height:8px;border:2px solid #fff;border-radius:50%;background:#e08a2c;box-shadow:0 0 0 2px rgba(224,138,44,.2);animation:trip-ai-destination-pulse 3.2s ease-in-out infinite}.trip-ai-route-mark>span{position:absolute;inset-inline-start:2px;bottom:2px;width:7px;height:7px;border:2px solid #fff;border-radius:50%;background:#16ba9d}.trip-ai-route-mark>span:after{content:'';position:absolute;inset-inline-start:10px;bottom:7px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.22)} .trip-ai-fab>b,.trip-ai-support-trigger>b{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .22s ease,opacity .16s ease} .trip-ai-fab:hover,.trip-ai-fab:focus-visible,.trip-ai-support-trigger:hover,.trip-ai-support-trigger:focus-visible{width:154px!important;transform:translateY(-1px)} .trip-ai-fab:hover>b,.trip-ai-fab:focus-visible>b,.trip-ai-support-trigger:hover>b,.trip-ai-support-trigger:focus-visible>b{max-width:90px;opacity:1} .trip-ai-support-trigger{bottom:88px!important;width:60px!important;height:60px!important;padding:6px!important;border-radius:18px!important;gap:9px!important} .trip-ai-support-logo-wrap{width:46px!important;height:46px!important;min-width:46px;contain:layout paint;border-radius:14px!important;overflow:hidden;background:#eef7f6!important} .trip-ai-support-trigger .trip-ai-support-image{display:block!important;width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:cover;transform:scale(1.42);filter:saturate(1.05) contrast(1.02)} .trip-ai-support-head-logo{width:46px;height:46px;contain:layout paint;overflow:hidden;background:#eef7f6!important} .trip-ai-support-head-logo .trip-ai-support-image{display:block!important;width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:cover;transform:scale(1.35)} .trip-ai-panel,.trip-ai-support-panel{z-index:74!important;inset-inline-end:max(18px,env(safe-area-inset-right))!important;bottom:min(160px,calc(12dvh + 28px))!important;width:min(430px,calc(100vw - 24px))!important;height:min(680px,calc(100dvh - clamp(96px,20dvh,184px)))!important} /* AND ON A SHORT SCREEN IT IS ANCHORED, NOT COMPUTED. REPORTED 2026-09-22 with a screenshot of a laptop: the panel opened across the tab bar, covering the destinations. MEASURED at 1280x494: bottom resolved to 87 and height to 396, so the top landed at 494 - 87 - 396 = 11 - eleven pixels from the edge, straight over a command row that ends at 64. Three numbers each right on their own, adding up to a panel that covers the navigation. On a short screen the panel stops being a height subtracted from a viewport and becomes what it actually is: the space between the bar and the bottom of the window. The bar is never covered, and the panel gets everything that is left. */ @media(max-height:700px){ .trip-ai-panel,.trip-ai-support-panel{ top:calc(var(--size-command,64px) + 10px)!important; bottom:max(10px,env(safe-area-inset-bottom))!important; height:auto!important} } /* LIVE has one Trip AI entry: the in-flow dock. Its update marker follows the same unread state that used to paint only on the retired floating launcher. */ body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-action.has-update::before, body.live-composition-active #live-trip-ai-dock .live-trip-ai-dock-action.has-update::before{ content:attr(data-ai-update-count); position:absolute; inset-block-start:-8px; inset-inline-start:-8px; display:grid; place-items:center; width:20px; height:20px; border:2px solid var(--solid); border-radius:50%; background:var(--warn); color:var(--fill-on); font:800 10px/1 var(--ui-family); } /* THE CHAT IS HALF A WINDOW ON A LAPTOP, AND THE 184 IS WHY. REPORTED 2026-09-22: "the chat does not open in a whole window, only half a window". MEASURED on the owner's own laptop, viewport 1280x494: the rule above reserved a FIXED 184px for the launcher and the margins below the panel, so the panel computed min(680, 494-184) = 310px - 63% of a screen spent on the panel and 37% on nothing. The same 184 on a 900px screen is 20%, which is where the number came from and where it is right. A reservation that does not scale with the screen is a desktop number wearing a percentage's clothes, so it is now clamp(96px, 20dvh, 184px): 20% of the height, floored at 96 so the launcher is never covered and capped at the original 184 so a tall screen measures exactly what it measured before. 494dvh -> clamp = 98.8 -> panel 395px (was 310) 900dvh -> clamp = 180 -> panel 680px (unchanged, the min wins) The panel's own bottom follows the same reasoning for the same reason. */ body:has(#scr-studio.on) .trip-ai-fab{bottom:max(94px,calc(86px + env(safe-area-inset-bottom)))!important} body:has(#scr-studio.on) .trip-ai-support-trigger{bottom:max(164px,calc(156px + env(safe-area-inset-bottom)))!important} .trip-ai-fab em{inset-inline-start:3px!important;top:3px!important;min-width:17px!important;width:17px;height:17px;border-width:2px!important;font-size:9px!important} .tripstudio-builder-preview .trip-ai-fab, .tripstudio-builder-preview .trip-ai-panel, .tripstudio-builder-preview .trip-ai-nudge, .tripstudio-builder-preview .trip-ai-support-trigger, .tripstudio-builder-preview .trip-ai-support-panel, .tripstudio-builder-preview .trip-live-companion{display:none!important} @keyframes trip-ai-live-orb{0%,100%{transform:scale(1);box-shadow:0 7px 20px rgb(from var(--acc) r g b / .3)}50%{transform:scale(1.035);box-shadow:0 9px 25px rgba(23,190,157,.4)}} @keyframes trip-ai-route-breathe{0%,100%{opacity:.72;transform:rotate(-16deg) translateX(0)}50%{opacity:1;transform:rotate(-16deg) translateX(1px)}} @keyframes trip-ai-destination-pulse{0%,72%,100%{transform:scale(1)}84%{transform:scale(1.24)}} @media(hover:none){.trip-ai-fab,.trip-ai-support-trigger{width:60px!important}.trip-ai-fab>b,.trip-ai-support-trigger>b{max-width:0!important;opacity:0!important}} @media(prefers-reduced-motion:reduce){.trip-ai-fab,.trip-ai-fab>b,.trip-ai-fab .trip-ai-orb,.trip-ai-fab .trip-ai-orb i,.trip-ai-route-mark:before,.trip-ai-route-mark:after{animation:none!important;transition:none!important}} .trip-ai-answer .trip-ai-feedback button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;border-radius:12px!important} .trip-ai-viewer-privacy{margin:0 0 8px;color:#526772;font-size:12px;line-height:1.55}.trip-ai-viewer-privacy[hidden]{display:none}.trip-ai-public-viewer .trip-ai-feedback{display:none!important} .trip-ai-support-status{min-height:22px;margin:0!important;font-size:12px;line-height:1.5;color:#36545d} .trip-ai-support-status.is-success{color:#08715f;font-weight:700} .trip-ai-support-status.is-error{color:#a73737;font-weight:700} .trip-ai-support-submit:disabled{cursor:wait;opacity:.68} .trip-ai-support-honeypot{position:absolute!important;inset-inline-start:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} /* Contact is a viewport surface, not another launcher-stacked AI drawer. */ html.trip-ai-support-open,html.trip-ai-support-open body{overflow:hidden!important} .trip-ai-support-panel{box-sizing:border-box!important;top:24px!important;bottom:24px!important;inset-inline-end:24px!important;width:min(560px,calc(100vw - 48px))!important;height:auto!important;max-height:none!important} .trip-ai-support-head{min-height:84px;box-sizing:border-box} .trip-ai-support-head>div{min-width:0} .trip-ai-support-head p{max-width:390px;margin:4px 0 0;color:rgba(255,255,255,.8);font-size:11px;line-height:1.4} .trip-ai-support-head button{box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px} .trip-ai-support-form{grid-template-rows:auto auto auto minmax(140px,1fr) auto auto auto} .trip-ai-support-message-field{grid-template-rows:auto minmax(120px,1fr);min-height:0} .trip-ai-support-message-field textarea{height:100%;min-height:120px} /* Identity and guest rows are conditional, so positional grid tracks cannot own this form. The message field is the only flexible region. */ .trip-ai-support-form{display:flex!important;flex-direction:column;align-content:initial!important} .trip-ai-support-field,.trip-ai-support-grid,.trip-ai-support-note,.trip-ai-support-status{min-width:0} .trip-ai-support-message-field{flex:1 1 150px;min-height:150px} .trip-ai-support-message-field textarea{height:100%;min-height:136px} .trip-ai-support-field input,.trip-ai-support-field textarea{min-height:44px} .trip-ai-support-note,.trip-ai-support-status{flex:0 0 auto;overflow-wrap:anywhere} .trip-ai-support-form :focus-visible{outline:3px solid #ffb84d;outline-offset:2px} @media(forced-colors:active){ .trip-ai-support-panel,.trip-ai-support-head,.trip-ai-support-submit{border:1px solid ButtonText} .trip-ai-support-head button{border:2px solid ButtonText} } .trip-ai-head-actions{display:flex;align-items:center;gap:7px}.trip-ai-panel>header .trip-ai-head-actions button{min-height:38px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}.trip-ai-panel>header [data-ai-clear]{width:auto;padding:0 11px;border-radius:12px;font:700 11px 'Noto Sans Hebrew',system-ui}.trip-ai-panel>header [data-ai-close]{width:38px;border-radius:50%;font-size:21px} .trip-ai-user{align-self:flex-end;width:min(86%,330px);padding:11px 13px;border-radius:17px 17px 5px 17px;background:linear-gradient(135deg,var(--acc),color-mix(in srgb, var(--acc) 93%, #000));color:#fff;box-shadow:0 9px 24px rgba(8,86,99,.17)}.trip-ai-user header{margin-bottom:4px}.trip-ai-user small{font-size:10px;font-weight:800;color:#bff7ef}.trip-ai-user p{margin:0;white-space:pre-wrap;font-size:13px;line-height:1.55}.trip-ai-answer{align-self:stretch}.trip-ai-thinking-card{align-self:flex-start;width:min(86%,330px)} /* Mobile Studio keeps a real viewport-sized conversation while the alert card reserves the physical-left launcher rail in RTL. */ .ts-affiliate-options{display:flex;flex:1;flex-wrap:wrap;gap:7px}.ts-affiliate-link{min-height:44px}.ts-affiliate-link[data-provider="tiqets"]{color:#4d35b2;border-color:rgba(101,64,232,.24)}.ts-affiliate-link:focus-visible{outline:3px solid #ffb84d;outline-offset:2px} @media(max-width:560px){.trip-ai-fab{inset-inline-end:max(18px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:48px}.trip-ai-panel{inset-inline:7px;width:auto;height:calc(100dvh - 84px);bottom:72px;border-radius:22px}.trip-ai-nudge{inset-inline:8px;width:auto;bottom:72px}.trip-ai-answer-details{grid-template-columns:1fr}.trip-ai-observations{padding:11px}.trip-ai-panel form{padding-inline:11px}.trip-ai-prompts{margin-inline:-2px}} @media(max-width:560px){.trip-ai-fab{inset-inline-end:max(18px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));padding:10px 13px}.trip-ai-panel{inset-inline:8px;width:auto;bottom:68px;max-height:calc(100dvh - 82px);border-radius:18px}.trip-ai-panel header{border-radius:18px 18px 0 0}.trip-ai-observations{padding:11px}.trip-ai-panel form{padding-inline:11px}.trip-guidance-card{padding:11px}.trip-guidance-primary{gap:8px}.trip-guidance-actions>*{flex:1;text-align:center}.trip-ai-planning-actions{margin-block:8px 12px}.trip-ai-plan-action.is-primary{width:100%}.trip-ai-planning-preview{margin:8px 0 14px;padding:13px;border-radius:16px}.trip-ai-planning-head strong{font-size:16px}.trip-ai-plan-flow{margin-inline:-3px}.trip-ai-plan-node{max-width:145px}.trip-ai-planning-preview .trip-guidance-actions{display:grid;grid-template-columns:1fr}.trip-ai-planning-preview .trip-guidance-actions .trip-ai-plan-action{width:100%}.ts-affiliate-cta{align-items:stretch;margin:7px 11px 10px}.ts-affiliate-link{width:100%;min-width:0;text-align:center}.ts-affiliate-disclosure{width:100%;text-align:center}} @media(max-width:560px){.trip-ai-support-trigger{inset-inline-end:max(16px,env(safe-area-inset-right));bottom:126px}.trip-ai-support-panel{inset-inline:7px;width:auto;height:calc(100dvh - 84px);bottom:72px;border-radius:22px}.trip-ai-support-grid{grid-template-columns:1fr}.trip-ai-support-form{padding:15px}.trip-ai-support-field textarea{min-height:105px}} @media(max-width:560px){.trip-live-companion{inset-inline:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;grid-template-columns:40px 1fr;padding:15px;border-radius:20px}.trip-live-companion-icon{width:40px;height:40px;border-radius:13px}.trip-live-companion-copy h2{font-size:16px}.trip-live-companion-actions{display:grid;grid-template-columns:1fr 1fr}.trip-live-companion-actions button:first-child{grid-column:1/-1}} @media(max-width:560px){.trip-ai-fab,.trip-ai-support-trigger{inset-inline-end:max(18px,env(safe-area-inset-right))!important}.trip-ai-fab{bottom:max(10px,env(safe-area-inset-bottom))!important}.trip-ai-support-trigger{bottom:78px!important}.trip-ai-panel,.trip-ai-support-panel{inset-inline:7px!important;width:auto!important;bottom:146px!important;height:calc(100dvh - 158px)!important}.trip-ai-fab:hover,.trip-ai-fab:focus-visible,.trip-ai-support-trigger:hover,.trip-ai-support-trigger:focus-visible{width:146px!important}} @media(max-width:900px){body:has(#scr-studio.on) .trip-ai-fab{bottom:max(154px,calc(134px + env(safe-area-inset-bottom)))!important}body:has(#scr-studio.on) .trip-ai-support-trigger{display:flex!important;bottom:max(222px,calc(202px + env(safe-area-inset-bottom)))!important}body:has(#scr-studio.on) .trip-ai-panel,body:has(#scr-studio.on) .trip-ai-support-panel{bottom:max(290px,calc(270px + env(safe-area-inset-bottom)))!important;height:calc(100dvh - 306px)!important}} @media(max-width:560px){ /* The LIVE row replaces the FAB, so Help owns the vacated lower launcher slot. * THE PREMISE IS FALSE ON LIVE AND IT WAS MEASURED. styles-live-v2.css:7 and :11 * try to remove this trigger on LIVE with display:none!important, and they LOSE: * for important declarations layer order reverses, and @layer product (this file, * linked first by scripts/v63-integrate-build.js:119) beats @layer design. So the * FAB stays, and with Help moved into the lower slot it landed exactly on the * command bar: the trigger measured 60x60 at y=774 with z-index:73 while * nav.tabs occupies y=770-836, covering .tabbar__more (45x44 at y=781) by * 100% in RTL and in LTR, with elementFromPoint at the More button's centre * returning trip-ai-support-image. The six tabs the bar parks into that menu * could not be reached at all. * The lower slot is therefore only vacated where the bar is not in it. */ body.live-composition-active .trip-ai-support-trigger{bottom:max(10px,env(safe-area-inset-bottom))!important} /* CORRECTED 2026-09-18. 82px cleared the command bar (y 770-836) and landed the * trigger on the Trip AI DOCK instead: measured at 390, the trigger occupied y 702-762 * and #live-trip-ai-dock-action y 706-750, so elementsFromPoint at the action's centre * returned trip-ai-support-image and test/trip-ai-dock went 6/0 -> 3/3. One occlusion * had been traded for another. * The lower right at live-v2 on a phone is not one vacated slot but three occupied * bands: nav.tabs at y 770-836, the dock at y 696-760, and only y < 696 free. 164px * puts the 60px trigger at y 620-680, above both, with 16px of clearance over the dock * - measured, not chosen. */ body.live-v2.live-v2-active .trip-ai-support-trigger{bottom:calc(164px + env(safe-area-inset-bottom))!important} .trip-ai-support-panel, body:has(#scr-studio.on) .trip-ai-support-panel{top:max(8px,env(safe-area-inset-top))!important;bottom:max(8px,env(safe-area-inset-bottom))!important;inset-inline:7px!important;width:auto!important;height:auto!important;max-height:none!important;border-radius:22px} .trip-ai-support-head{min-height:108px;padding:14px 15px} .trip-ai-support-head-logo{width:42px;height:42px} .trip-ai-support-head strong{font-size:20px} .trip-ai-support-head p{font-size:10px;line-height:1.35} .trip-ai-support-form{padding:14px;gap:10px} .trip-ai-support-head{min-height:96px} .trip-ai-support-field label{font-size:13px} .trip-ai-support-field input,.trip-ai-support-field textarea{font-size:16px} .trip-ai-support-message-field{flex-basis:136px;min-height:136px} .trip-ai-support-message-field textarea{min-height:136px;resize:none} .trip-ai-support-submit{min-height:48px;flex:0 0 48px} } @media(max-width:560px){.trip-ai-panel>header [data-ai-clear]{padding-inline:9px;font-size:10px}.trip-ai-user{width:90%}} @media(max-width:900px){body:has(#scr-studio.on) .trip-ai-panel{top:max(8px,env(safe-area-inset-top))!important;bottom:max(86px,calc(74px + env(safe-area-inset-bottom)))!important;height:auto!important;max-height:none!important}} @media(max-width:560px){.trip-ai-nudge{right:max(8px,env(safe-area-inset-right))!important;left:max(82px,calc(72px + env(safe-area-inset-left)))!important;width:auto!important;max-width:calc(100vw - 90px)!important}.trip-ai-nudge strong,.trip-ai-nudge p{overflow-wrap:anywhere}} @media(max-width:560px){.ts-affiliate-options{display:grid;grid-template-columns:1fr;width:100%}} /* Builder and verified LIVE own the only Trip AI launch rows. The existing panel remains the single conversation surface; these rules only project it from the in-flow launch hosts and reserve their layout space. */ #trip-ai-fab{display:none!important} .trip-ai-panel,.trip-ai-nudge{display:none!important} body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-panel:not([hidden]), body.live-v2 .trip-ai-panel:not([hidden]), body.live-composition-active .trip-ai-panel:not([hidden]){display:flex!important;direction:inherit} body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-nudge:not([hidden]), body.live-v2 .trip-ai-nudge:not([hidden]), body.live-composition-active .trip-ai-nudge:not([hidden]){display:grid!important} /* TRIP AI WAS REACHABLE ON ONE TAB OUT OF TEN, AND NOTHING SAID SO. REPORTED 2026-09-22 by the owner of a published trip: "in the what-is-around-me window the chat does not open", then "it happens on every tab except Ljubljana now". MEASURED on his live page, at 1920, on the near tab: #trip-ai-fab computed display:none with a 0x0 box, and the panel - which the dock had just un-hidden - computed none too. Two rules, both correct on their own, added up to a dead product: styles-ai.css #trip-ai-fab{display:none!important} @layer product styles-live-v2.css body.live-v2 .trip-ai-fab{display:none!...} @layer design and the projection above only re-admitted the panel under body.live-v2.live-v2-active - the LIVE tab alone. body.live-v2 is on EVERY tab of a published trip, so outside that one tab the launcher was gone and the panel could not paint even when it was open. The dock is the entry point, and the dock lives inside the LIVE panel; there was no other way in from anywhere else. So the panel is admitted under body.live-v2 (above), and the launcher comes back on the tabs that have no dock. It stays hidden on the LIVE tab itself: there the dock is the way in, and a floating button over that fixed two-row stage is the collision this rule was written to prevent in the first place. The specificity is deliberate: (1,2,1) beats the id rule's (1,0,0) in the SAME layer, which is what decides between two important declarations. A rule written in @layer design would have LOST, because for important declarations the layer order reverses. */ /* LIVE owns one counted bell and one in-flow Trip AI dock. */ body.live-v2 #trip-ai-fab, body.live-v2 .trip-ai-nudge{display:none!important} body:not(:has(#scr-studio.on[data-builder-mounted-layout])) .trip-ai-nudge{display:none!important} html.tripstudio-builder-preview body.live-v2.live-v2-active .trip-ai-panel, html.tripstudio-builder-preview body.live-v2.live-v2-active .trip-ai-nudge, html.tripstudio-builder-preview body.live-composition-active .trip-ai-panel, html.tripstudio-builder-preview body.live-composition-active .trip-ai-nudge{display:none!important} body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance{ box-sizing:border-box; grid-area:ai; display:flex!important; align-items:center; align-self:center; justify-self:center; flex-flow:row nowrap; gap:var(--space-inset); inline-size:fit-content; max-width:100%; min-width:0; height:64px; min-height:64px; padding:var(--space-inset); border:1px solid var(--line); border-radius:var(--r-control); background:var(--solid); box-shadow:var(--lift); overflow:hidden; transition:border-color var(--t-enter) var(--ease-out),box-shadow var(--t-enter) var(--ease-out) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity, body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-compose, body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions button{ display:inline-flex; align-items:center; gap:var(--space-tight); flex:0 0 auto; min-width:44px; width:44px; min-height:44px; height:44px; padding:0; justify-content:center } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity{ width:auto!important; min-width:112px; color:var(--acc) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-compose{ color:var(--soft) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions button{color:var(--ink)} body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance button, body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-action, body.live-composition-active #live-trip-ai-dock .live-trip-ai-dock-action, body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-nudge [data-ai-nudge-open], body.live-v2.live-v2-active .trip-ai-nudge [data-ai-nudge-open], body.live-composition-active .trip-ai-nudge [data-ai-nudge-open]{ position:relative; overflow:visible!important } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance button::after, body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-action::after, body.live-composition-active #live-trip-ai-dock .live-trip-ai-dock-action::after, body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-nudge [data-ai-nudge-open]::after, body.live-v2.live-v2-active .trip-ai-nudge [data-ai-nudge-open]::after, body.live-composition-active .trip-ai-nudge [data-ai-nudge-open]::after, body:is(:has(#scr-studio.on[data-builder-mounted-layout]),.live-v2.live-v2-active,.live-composition-active) .trip-ai-nudge>[data-ai-nudge-close]::after{ content:""; position:absolute; top:50%; left:50%; translate:-50% -50%; width:100%; height:100%; min-width:var(--size-touch); min-height:var(--size-touch) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance button:focus-visible{ outline-offset:-3px } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity>svg, body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-command-icon{ display:block; flex:0 0 20px; width:20px; height:20px; fill:none; stroke:currentColor; color:inherit; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity>div{flex:0 0 auto} /* THE COLLAPSED CAPTION MUST NOT KEEP ITS HEIGHT. MEASURED 2026-09-20 at 1280x900 and again at 390x844: the identity box is 112x44, the mark is 34x34 with its centre at y=807, and the label
is 48x44 - but the only inked text, Trip AI, is 18px tall at the very top of that box, optical centre y=794. Thirteen pixels above the mark, at both widths. The cause was here. The two captions were collapsed on the INLINE axis only (max-width:0), so each kept display:block and 13px of block size: 18 + 13 + 13 = 44. align-items:center then centred a 44px box whose ink is flush to its top, and (44 - 18) / 2 = 13 is exactly the offset that was photographed. So collapse them on the block axis too. After: b centre and mark centre agree to 0.00px at 1280 and 390. block-size is in the transition list so the caption still grows rather than jumps when hover or focus restores it below. */ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity small{ max-width:0; block-size:0; overflow:hidden; opacity:0; transition:max-width var(--t-enter) var(--ease-out),block-size var(--t-enter) var(--ease-out),opacity var(--t-enter) var(--ease-out) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions{ display:flex!important; flex-flow:row nowrap; gap:var(--space-tight) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions [data-builder-ai-label]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-compose [data-builder-ai-label]{ display:inline-block; max-width:0; overflow:hidden; opacity:0; white-space:nowrap; transition:max-width var(--t-enter) var(--ease-out),opacity var(--t-enter) var(--ease-out) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance:is(:hover,:focus-within), body:has(#scr-studio.on[data-builder-mounted-layout]):has(#trip-ai-panel:not([hidden])) .builder-trip-ai-affordance{ border-color:var(--acc-edge); box-shadow:var(--lift2) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance:is(:hover,:focus-within) .builder-ai-compose [data-builder-ai-label], body:has(#scr-studio.on[data-builder-mounted-layout]):has(#trip-ai-panel:not([hidden])) .builder-ai-compose [data-builder-ai-label]{ max-width:11rem; opacity:1 } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance:is(:hover,:focus-within) .builder-ai-identity, body:has(#scr-studio.on[data-builder-mounted-layout]):has(#trip-ai-panel:not([hidden])) .builder-ai-identity, body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance:is(:hover,:focus-within) .builder-ai-compose, body:has(#scr-studio.on[data-builder-mounted-layout]):has(#trip-ai-panel:not([hidden])) .builder-ai-compose{ width:auto; padding-inline:var(--space-control) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance:is(:hover,:focus-within) .builder-ai-identity small, body:has(#scr-studio.on[data-builder-mounted-layout]):has(#trip-ai-panel:not([hidden])) .builder-ai-identity small{ max-width:12rem; block-size:auto; opacity:1 } body.live-v2.live-v2-active #live-trip-ai-dock{ box-sizing:border-box; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-row); height:64px; min-height:64px; max-height:64px; overflow:hidden } body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-mark{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-control); background:var(--ink); color:var(--solid) } body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy{min-width:0;line-height:1.25} body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy small, body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy span{font-size:var(--fs-caption,11px)} body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy strong{font-size:var(--fs-body,14.5px)} body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy small, body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy strong, body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-action{ width:auto; min-width:var(--size-touch); min-height:var(--size-touch) } body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-copy span{ max-height:0; opacity:0; transition:max-height var(--t-enter) var(--ease-out),opacity var(--t-enter) var(--ease-out) } body.live-v2.live-v2-active #live-trip-ai-dock:is(:hover,:focus-within) .live-trip-ai-dock-copy span, body.live-v2.live-v2-active:has(#trip-ai-panel:not([hidden])) #live-trip-ai-dock .live-trip-ai-dock-copy span{ max-height:2.8em; opacity:1 } body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-nudge:not([hidden]), body.live-v2.live-v2-active .trip-ai-nudge:not([hidden]), body.live-composition-active .trip-ai-nudge:not([hidden]){ /* IT CLEARS THE BAR, BECAUSE THE BAR CARRIES THE ONLY NAVIGATION A PHONE HAS. Measured 2026-09-22 at 393: the notice sat at top 10 and the command row ends at 64, so a notification covered the menu - which is the same mistake the travel warning made twice before it became a notification, once as a grid row and once as a banner of its own. An interruption is allowed to be one; it is not allowed to take the way out. --live-overlay-top stays in the sum for a second layer that may yet want it; it is 0 unless something measures itself into it. */ top:calc(max(10px,env(safe-area-inset-top)) + var(--size-command,64px) + 10px + var(--live-overlay-top,0px))!important; bottom:auto!important; direction:inherit; grid-template-columns:var(--size-touch) minmax(0,1fr) var(--size-touch); /* LIVE's unlayered universal reset must not erase the rounded sheet's hit inset. */ padding:14px 15px!important; max-height:min(168px,calc(100dvh - 20px)); overflow:auto } body:is(:has(#scr-studio.on[data-builder-mounted-layout]),.live-v2.live-v2-active,.live-composition-active) .trip-ai-nudge>[data-ai-nudge-close]{ grid-column:3; grid-row:1; position:sticky; inset-inline:auto; top:0; align-self:start; display:grid; place-items:center; overflow:visible!important; border:1px solid var(--line); border-radius:var(--r-control); background:var(--solid); color:var(--ink); line-height:1 } body:is(:has(#scr-studio.on[data-builder-mounted-layout]),.live-v2.live-v2-active,.live-composition-active) .trip-ai-nudge>.trip-ai-nudge-icon{grid-column:1;grid-row:1} body:is(:has(#scr-studio.on[data-builder-mounted-layout]),.live-v2.live-v2-active,.live-composition-active) .trip-ai-nudge>div:last-child{grid-column:2;grid-row:1;min-width:0} body:is(:has(#scr-studio.on[data-builder-mounted-layout]),.live-v2.live-v2-active,.live-composition-active) .trip-ai-nudge strong{padding-inline-end:0} body:is(:has(#scr-studio.on[data-builder-mounted-layout]),.live-v2.live-v2-active,.live-composition-active) .trip-ai-nudge>[data-ai-nudge-close]:focus-visible{ outline:var(--focus-width) solid var(--focus); outline-offset:0 } body:has(#scr-studio.on[data-builder-mounted-layout]):has(.trip-ai-nudge:not([hidden])) .trip-ai-panel:not([hidden]), body.live-v2.live-v2-active:has(.trip-ai-nudge:not([hidden])) .trip-ai-panel:not([hidden]), body.live-composition-active:has(.trip-ai-nudge:not([hidden])) .trip-ai-panel:not([hidden]){ top:min(190px,calc(100dvh - 200px))!important; height:auto } body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-panel:not([hidden]), body.live-v2.live-v2-active .trip-ai-panel:not([hidden]), body.live-composition-active .trip-ai-panel:not([hidden]){ max-height:calc(100dvh - 96px) } .trip-ai-panel input{font-size:max(16px,1rem)} @media(hover:hover) and (pointer:fine){ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance button{ height:var(--ctl-h); min-height:var(--ctl-h); margin-block:calc((var(--size-touch) - var(--ctl-h))/2) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions button, body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-compose{ width:var(--ctl-h); min-width:var(--ctl-h); margin-inline:calc((var(--size-touch) - var(--ctl-h))/2) } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity{ width:auto!important; min-width:112px } /* MEASURED 2026-09-16 at 1920x1080/rtl/studio, data-builder-layout="navigator". screen-reachability reported the Trip AI control as face 112x32 with scrollHeight 38 - a clipped label. The cause is three rules up: `.builder-trip-ai-affordance button` sets height AND min-height to --ctl-h (32px), the single-line control height, and .builder-ai-identity IS a button - but it is the only one here that stacks two lines, at line-height 18 over at 13. 31px of text plus its box does not fit in 32, and `height` (not just min-height) forbids it from growing. The margin-block:(44-32)/2 alongside it reserves 44px of vertical RHYTHM; it does not enlarge the hit box, because margin is outside the border box. So the control was 32px tall to the pointer as well. Giving it --size-touch closes both: the label fits and the target is genuinely 44. Specificity, resolved rather than guessed: the rule this must beat is body:has(#scr-studio.on[...]) .builder-trip-ai-affordance button = (1,2,2) - :has() takes its most specific argument. Naming the class on the button reaches (1,3,2). Nothing above is rewritten; this is one added rule. */ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance button.builder-ai-identity{ height:auto; min-height:var(--size-touch); margin-block:0 } body.live-v2.live-v2-active #live-trip-ai-dock .live-trip-ai-dock-action, body.live-composition-active #live-trip-ai-dock .live-trip-ai-dock-action, body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-nudge [data-ai-nudge-open], body.live-v2.live-v2-active .trip-ai-nudge [data-ai-nudge-open], body.live-composition-active .trip-ai-nudge [data-ai-nudge-open]{ min-height:var(--ctl-h); margin-block:calc((var(--size-touch) - var(--ctl-h))/2) } } @media(max-width:700px){ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance{ inline-size:100%; min-height:64px; height:64px } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions{display:flex;gap:4px} body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions button{width:44px;padding:0} body:has(#scr-studio.on[data-builder-mounted-layout]) [data-builder-ai-label], body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity small{max-width:0!important;opacity:0!important} body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-panel:not([hidden]), body.live-v2.live-v2-active .trip-ai-panel:not([hidden]), body.live-composition-active .trip-ai-panel:not([hidden]){ inset-inline:8px!important; top:max(8px,env(safe-area-inset-top))!important; bottom:max(84px,calc(72px + env(safe-area-inset-bottom)))!important; width:auto!important; height:auto!important; max-height:none!important } body:has(#scr-studio.on[data-builder-mounted-layout]):has(.trip-ai-nudge:not([hidden])) .trip-ai-panel:not([hidden]), body.live-v2.live-v2-active:has(.trip-ai-nudge:not([hidden])) .trip-ai-panel:not([hidden]), body.live-composition-active:has(.trip-ai-nudge:not([hidden])) .trip-ai-panel:not([hidden]){ top:min(184px,32dvh)!important } body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-nudge:not([hidden]), body.live-v2.live-v2-active .trip-ai-nudge:not([hidden]), body.live-composition-active .trip-ai-nudge:not([hidden]){ inset-inline:8px!important; width:auto!important; max-width:none!important } } @media(max-width:700px) and (hover:hover) and (pointer:fine){ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-suggestions button, body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-compose{ width:var(--ctl-h); min-width:var(--ctl-h) } } @media(max-width:760px){ body.live-v2.live-v2-active .live-route-stage:has(> #live-trip-ai-dock){ grid-template-rows:minmax(220px,42%) minmax(0,1fr) 64px } } @media(pointer:coarse){ body:has(#scr-studio.on[data-builder-mounted-layout]) .trip-ai-nudge [data-ai-nudge-open], body.live-v2.live-v2-active .trip-ai-nudge [data-ai-nudge-open], body.live-composition-active .trip-ai-nudge [data-ai-nudge-open]{ min-width:var(--size-touch); min-height:var(--size-touch) } } @media(prefers-reduced-motion:reduce){ .trip-ai-panel .trip-ai-observations{scroll-behavior:auto!important} body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance, body:has(#scr-studio.on[data-builder-mounted-layout]) [data-builder-ai-label], body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity small, body.live-v2.live-v2-active .live-trip-ai-dock-copy span{transition:none!important} } /* #59 - the time on every turn. Additive: a new class, no existing rule touched. * INSIDE @layer product, where every other rule in this sheet lives. It was appended * after the layer's closing brace at first, which made three UNLAYERED rules that * outrank the entire product layer for normal declarations. test/cascade-layer-contract * caught it - "styles-ai.css must have exactly one product owner", 0 !== 1 - and that * is the whole reason that test exists. * It sits at the end of the turn's own header, which both renderers already build, so * the user's bubble carries it on the accent and the answer's card on its tinted head - * hence currentColor at reduced opacity rather than two hard-coded colours. */ .trip-ai-turn-time{margin-inline-start:auto;color:currentColor;opacity:.68;font:700 10px 'Space Mono',monospace;font-feature-settings:'tnum';white-space:nowrap} .trip-ai-user>header,.trip-ai-answer>.trip-ai-answer-head{display:flex;align-items:center;gap:7px} .trip-ai-answer>.trip-ai-answer-head>.trip-ai-turn-time{color:var(--acc)} /* THE FLOOR WAS GIVEN TO THE PHONE, FOR THE THIRD TIME IN ONE DAY. MEASURED 2026-09-19 on the published Ljubljana trip at 1366x768, the live map tab: .trip-ai-nudge [data-ai-nudge-open] renders 70x31. A 44px rule for exactly this button exists at styles-ai.css:148 - inside @media(max-width:560px). The close button beside it carries its 44x44 at top level and is correct at every width; the one that opens the answer does not. Same shape as public-trip-template.html:503 (.tabbar__more, 66x32 from 1366 down) found in the same sweep: a rule that greps as present and resolves at one width only. The declarations below are the ones from line 148, unchanged, lifted out of the query - nothing is shrunk and the phone keeps what it had. */ .trip-ai-nudge [data-ai-nudge-open]{display:inline-flex;align-items:center;min-height:44px;padding:7px 0} /* THE MARK WAS DRAWN AT THE SIZE OF A UTILITY GLYPH. MEASURED 2026-09-19 in the builder: .builder-ai-identity>svg is 20x20, set by the SAME rule that sizes the arrow and the check beside it - flex:0 0 20px. So the product's one brand mark is the same size and weight as "go" and "done", sits inline next to a text label, and is centred on nothing. The owner read that as small, unclear and off-centre, and he was reading it correctly. The mark gets a tile of its own: 34px, its own ground, the glyph centred inside it. The utility icons are untouched at 20 - the point is the difference between them. */ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-ai-identity>svg{ flex:0 0 34px;width:34px;height:34px;padding:5px;border-radius:11px; background:linear-gradient(145deg,color-mix(in srgb, var(--acc) 84%, #000) 0%,var(--acc) 56%,#5055cc 100%); color:#fff;stroke-width:1.7; box-shadow:0 5px 14px rgb(from var(--acc) r g b / .3),inset 0 1px 0 rgba(255,255,255,.3) } /* THE REFLECTION PLAYS ON ARRIVAL AND ON TOUCH - IT DOES NOT LOOP. MEASURED 2026-09-19: the first version ran the sweep on a 7s cycle with `infinite`, and scripts/live-composition-regression.test.js refused it - "decorative LIVE motion must not loop". That contract is older than this tile and it is right: perpetual motion on a page someone reads for an hour is a metronome, it costs battery, and it is exactly what was stripped out of this page once before (mapPulse, public-dialog-strip, both named in that test so they cannot creep back). The owner asked for a high-quality animation, not a permanent one. So the sweep runs ONCE when the tile arrives, and once more whenever a pointer or the keyboard reaches it - which is when a reflection actually means something. Two keyframe names with identical content, because re-running one animation needs a new name to restart it. */ /* GLASS, AND A REFLECTION THAT CROSSES IT. The tile is the affordance itself - it already clips its children and carries its own radius, so the sweep needs no new element in the markup. It runs on a long cycle and is still for most of it: a reflection that never rests reads as a loading state, and this tile is not loading. pointer-events:none so the sheen never eats a click, and the whole thing is switched off for anyone who asked the system to reduce motion. */ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance{position:relative} /* THE SWEEP WAS INVISIBLE FOR TWO MEASURED REASONS, AND BOTH ARE FIXED HERE. The owner, 2026-09-20: the glass animation exists but it is swallowed. MEASURED at 1280x900 and 390x844, the animation paused and currentTime stepped in 150ms slices, each frame screenshot over the tile's clip rect and diffed against a frame with the band outside: 1. WHITE ON WHITE. The dock's ground computes rgb(255,255,255) in the builder and on the ordinary published page, rgba(255,255,255,.8) in the LIVE dock. The old band's brightest stop was white at .85, so over that ground it composited to white and the pixel delta was exactly 0. Only 3.00-12.65% of the tile's pixels ever moved, and every one of them was on the teal mark or the teal action button, never on the glass. So the band is now a tinted shoulder around a bright core: the product's own --acc at 45% on each side of a white centre. The shoulder is what is seen on a pale ground; the white core is what is seen on the dark ground the contrast theme gives this tile. 2. THE EASING HID IT IN TIME. cubic-bezier(.36,0,.22,1) over +/-160% measured translate -149.8% at 150ms and already +87.8% at 750ms; the band was inside the 0-100% clip only between roughly t=420 and t=680, about 260ms of 1500ms - 17% of the run. Outside that window overflow:hidden gave it zero painted area. The travel is now +/-110% and the curve is flat through the middle, so the band spends most of the duration inside the clip instead of a sixth of it. */ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; background:linear-gradient(104deg,transparent 36%,color-mix(in srgb,var(--acc) 45%,transparent) 44%,rgba(255,255,255,.92) 50%,color-mix(in srgb,var(--acc) 45%,transparent) 56%,transparent 64%); translate:-110% 0; animation:tripAiGlassSweep 1.5s cubic-bezier(.22,.72,.78,.28) 1 both } body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance:is(:hover,:focus-within)::after{ animation:tripAiGlassSweepAgain 1.1s cubic-bezier(.22,.72,.78,.28) 1 both } @keyframes tripAiGlassSweep{from{translate:-110% 0}to{translate:110% 0}} @keyframes tripAiGlassSweepAgain{from{translate:-110% 0}to{translate:110% 0}} @media(prefers-reduced-motion:reduce){ body:has(#scr-studio.on[data-builder-mounted-layout]) .builder-trip-ai-affordance::after{animation:none;opacity:0} } /* ===== THE CONVERSATION READS LIKE A CONVERSATION ===== * * THE OWNER, 2026-09-20: "the Trip AI window on the LIVE site looks really bad - I asked * for a window like WhatsApp and this is light years away." He is right, and MEASURED at * 1440x900 on the published LIVE view there were four separate reasons. * * The first and largest was not in this file at all: the published page's own reset * zeroed EVERY padding inside the panel, so the header, the list, the bubbles, the chips * and the composer all rendered flush to their edges. That is fixed where it was written. * What follows is the rest, and each rule says which measurement it answers. */ /* 1. THE CONVERSATION SITS ON THE COMPOSER, not at the top of a void. MEASURED: the list is 474px tall, the whole of its content was a 151px empty state pinned to the top, and 320px of white hung under it. A messaging window grows upward from the composer; margin-block-start:auto on the first child does that without the flex scroll bug that justify-content:flex-end brings. */ /* MEASURED, and the first attempt at this was wrong: the list's first child is NOT the first thing a reader sees - it holds three children, two of them hidden, so a :first-child rule landed on a hidden node and moved nothing. `safe flex-end` is the keyword that puts the content on the composer WITHOUT the old flex-scroll trap: a browser that does not know the `safe` keyword drops the whole declaration and keeps today's behaviour rather than clipping the top of a long conversation. */ .trip-ai-observations{justify-content:safe flex-end} /* 2. AND WHEN THERE IS NOTHING YET, THE INVITATION SITS IN THE MIDDLE of the room rather than at the top of it. Auto margins centre a flex child whatever its flex sizing is; `flex:1 1 auto` lost here to a rule that sizes every child of the panel. */ /* MEASURED AGAIN: `margin-block:auto` computed 0. The published page's reset is `*{box-sizing:border-box;margin:0}`, unlayered, so a margin written in @layer product cannot land either - the same trap as the padding, one property over. So the centring is asked of the LIST, which owns its own layout: while no turn has been taken, the invitation sits in the middle of the room; the moment there is a conversation, it rests on the composer. */ .trip-ai-observations:not(:has(.trip-ai-turn)){justify-content:safe center} .trip-ai-empty{align-content:center} /* 3. BOTH SIDES ARE BUBBLES. MEASURED: the traveller's turn was a 330px bubble and the answer was align-self:stretch with max-width:none - a full-width report facing a bubble, which is why the exchange has no rhythm. The answer keeps everything it carries; it stops being the width of the window. The tail corner is LOGICAL, so RTL and LTR each get it on the side the speaker is on. */ .trip-ai-answer{align-self:flex-start;max-width:min(88%,46ch); border-end-start-radius:6px} .trip-ai-thinking-card{max-width:min(88%,46ch)} .trip-ai-user{border-end-end-radius:6px;border-start-start-radius:17px} /* 4. THE STATUS LINE IN THE HEADER WAS 4.10:1 ON ITS OWN GROUND. #bbf5ef against the middle stop of the header gradient - 10px text, so 4.5 is the floor and it was under it. */ .trip-ai-panel > header small{color:#e8fffb} /* 5. THE PLACEHOLDER WAS THE BROWSER'S GREY, not ours - rgb(117,117,117), a value no sheet in this product chose. */ #trip-ai-input::placeholder{color:var(--faint);opacity:1} /* 6. AND EVERY CONTROL IN THE WINDOW IS A TARGET A THUMB CAN HIT. MEASURED: the send button 66x40, the field 40, "clear chat" 56x38 and the close 38x38 - four controls under the product's own --size-touch floor of 44, in the one window a traveller uses while walking. */ /* The header's own rule is `.trip-ai-panel>header .trip-ai-head-actions button` (0,2,2) and min-height:38px; an attribute selector on the same two classes is (0,2,1) and loses. Measured: the close control stayed 44x38 until this matched the rule it has to beat. */ .trip-ai-panel form>div:last-child>button, .trip-ai-panel form>div:last-child>input, .trip-ai-panel>header .trip-ai-head-actions button{min-height:44px} .trip-ai-panel>header .trip-ai-head-actions button[data-ai-close]{min-width:44px} /* AN ANSWER THAT IS WORTH LOOKING AT. The image is the page's own verified media for a place of this trip - lib/ai/request-client.js renders it only when the host page hands one over, so there is nothing here to fabricate. It is sized so a photo never outweighs the answer. */ .trip-ai-answer-media{margin:10px 0 0;padding:0} .trip-ai-answer-media img{display:block;width:100%;max-height:190px;object-fit:cover; border:1px solid var(--line);border-radius:var(--r-control,14px);background:var(--glass)} .trip-ai-answer-media figcaption{margin-top:6px;font-size:11px;color:var(--faint)} .trip-ai-next-action{margin-top:8px} }