/* Bottle AI: shared, progressively enhanced conversation demonstrations. */
.ai-hero { position: relative; isolation: isolate; overflow: hidden; background: #0e1930; color: #fff; padding: clamp(4rem,8vw,8rem) 0 5rem; }
.ai-aurora { position: absolute; z-index: -1; inset: -35%; background: radial-gradient(ellipse at 70% 40%,#4b42c070,transparent 40%),radial-gradient(ellipse at 40% 80%,#087b8b65,transparent 35%); animation: ai-aurora 14s ease-in-out infinite alternate; }
.ai-hero:after { content:''; position:absolute; z-index:-1; inset:0; opacity:.25; background-image:radial-gradient(#92b3eb80 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,transparent,#000); }
.ai-hero__grid { display:grid; grid-template-columns:1fr 1.1fr; gap:4rem; align-items:center; }
.ai-hero .eyebrow,.ai-home .eyebrow { color:#b4c7ff; }
.ai-hero h1 { font-size:clamp(3.4rem,5.7vw,5.6rem); letter-spacing:-.055em; }
.ai-hero h1 span,.ai-home h2 span { color:#afcaff; background:linear-gradient(110deg,#b4caff,#acdbed,#bdb2ff); background-clip:text; -webkit-text-fill-color:transparent; }
.ai-hero__copy > p:not(.eyebrow) { color:#ced7e9; max-width:480px; line-height:1.75; font-size:1.06rem; margin:1.8rem 0; }
.ai-hero .hero__cta { gap:1rem; }
.ai-text-link { font-size:.85rem; color:#d5e2ff; text-underline-offset:5px; }
.ai-hero__copy .ai-compatible { font-size:.8rem; margin-top:2.3rem; line-height:1.8; }
.ai-compatible strong { color:white; margin:0 .2rem; }
.ai-compatible span { color:#9cacc5; font-size:.72rem; }
.ai-hero__stage { position:relative; min-width:0; padding:1rem 0; }
.ai-orbit { position:absolute; inset:-2rem -1rem; border:1px solid #9baffc33; border-radius:2rem; transform:rotate(-4deg); pointer-events:none; animation:ai-orbit 9s ease-in-out infinite alternate; }
.ai-orbit span { position:absolute; padding:.4rem .8rem; border:1px solid #8398ce55; border-radius:2rem; background:#172a48; color:#c6d7f4; font-size:.65rem; }
.ai-orbit span:nth-child(1) { top:-14px; left:10%; }.ai-orbit span:nth-child(2) { top:-14px; right:10%; }.ai-orbit span:nth-child(3) { bottom:-14px; left:40%; }
.ai-demo { position:relative; background:#f5f7fc; color:#14223b; border:1px solid #c3cfea; border-radius:1.2rem; box-shadow:0 30px 90px #0004; overflow:hidden; min-width:0; }
.ai-demo__bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid #dce3f1; background:#fff; }
.ai-demo__brand { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:750; }
.ai-demo__brand svg { width:16px; height:25px; color:#3269ff; }
.ai-demo__brand > span { font-weight:450; font-size:.65rem; color:#66758c; border-left:1px solid #dce3f1; margin-left:.2rem; padding-left:.6rem; }
.ai-pause { border:0; background:transparent; color:#465878; text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:.65rem; cursor:pointer; min-height:32px; }
.ai-demo__picker { padding:1.2rem; background:#e8eeff; border-bottom:1px solid #c3cfea; }
.ai-demo__prompt { display:flex; flex-direction:column; gap:.25rem; margin:0 0 .85rem; color:#203d7a; }
.ai-demo__prompt strong { font-size:1rem; }
.ai-demo__prompt > span { font-size:.75rem; color:#4d6083; }
.ai-demo__picker .ai-demo__choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; padding:0; }
.ai-demo__picker .ai-demo__choices button { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:52px; border:1px solid #b7c7e9; background:#fff; border-radius:.65rem; color:#24416e; padding:.7rem; font:inherit; font-weight:650; font-size:.75rem; text-align:left; cursor:pointer; box-shadow:0 2px 0 #203d7a0c; transition:background-color .15s,border-color .15s; }
.ai-demo__choices button > span { font-size:1rem; }
.ai-demo__picker .ai-demo__choices button:hover { background:#d7e3ff; border-color:#3269ff; }
.ai-demo__picker .ai-demo__choices button[aria-pressed=true] { color:#fff; background:#244ca7; border-color:#244ca7; }
@media(max-width:550px) { .ai-demo__picker { padding:1rem .8rem; }.ai-demo__picker .ai-demo__choices { grid-template-columns:1fr; }.ai-demo__picker .ai-demo__choices button { min-height:44px; font-size:.8rem; padding:.65rem .8rem; } }
.ai-demo__choices button[aria-pressed=true] { color:#fff; background:#244ca7; border-color:#244ca7; }
.ai-demo button:focus-visible { outline:3px solid #638eff; outline-offset:3px; }
.ai-demo__conversation { padding:1rem 1.3rem; display:flex; flex-direction:column; gap:.85rem; min-height:485px; }
.ai-message { padding:.85rem 1rem; border-radius:.9rem; font-size:.85rem; line-height:1.5; }
.ai-message > span { display:block; font-size:.59rem; font-weight:650; margin-bottom:.35rem; opacity:.7; }
.ai-message p { margin:0; }
.ai-message--user { align-self:flex-end; margin-left:2rem; background:#244ca7; color:white; border-bottom-right-radius:.2rem; max-width:88%; }
.ai-message--answer { background:white; border:1px solid #dce3ee; margin-right:1rem; border-bottom-left-radius:.2rem; }
.ai-message--follow { font-size:.8rem; }.ai-message--last { font-size:.8rem; }
.ai-tool { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:#5d6e87; font-size:.65rem; padding:.2rem .5rem; }
.ai-tool__pulse { width:6px; height:6px; background:#398d84; border-radius:50%; box-shadow:0 0 0 4px #398d8415; animation:ai-pulse 1.4s ease-in-out infinite; }
.ai-tool__code { font-family:monospace; font-size:.6rem; border:1px solid #d8e1ef; border-radius:4px; padding:.15rem .3rem; color:#597194; }
.ai-result { display:flex; align-items:center; gap:1rem; padding:.75rem; margin-top:.8rem; border-radius:.6rem; background:#eef3ff; }
.ai-result strong { font-size:1.25rem; letter-spacing:-.03em; color:#234a9b; flex-shrink:0; }
.ai-result span { font-size:.68rem; color:#566984; line-height:1.5; }
.ai-demo__foot { position:relative; padding:.85rem 1.2rem; font-size:.6rem; color:#77849b; border-top:1px solid #dce3f1; background:#fff; }
.ai-demo__progress { position:absolute; height:2px; background:#4a77ec; bottom:0; left:0; width:var(--ai-progress,0%); transition:width .5s linear; }
.ai-demo.is-animated [data-ai-step] { opacity:0; transform:translateY(12px) scale(.98); transition:opacity .45s ease,transform .6s cubic-bezier(.2,.9,.2,1); }
.ai-demo.is-animated [data-ai-step].is-shown { opacity:1; transform:none; }
.ai-connection { background:#142641; color:#bdd0ee; padding:1.7rem 0; }
.ai-connection .wrap { display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.ai-connection p { font-size:.82rem; margin:0; }
.ai-connection .wrap > div { display:flex; align-items:center; gap:1rem; font-size:.75rem; }
.ai-connection i { width:45px; height:1px; background:#7699d477; position:relative; overflow:hidden; }
.ai-connection i:after { content:''; position:absolute; width:15px; height:1px; background:#d3e6ff; animation:ai-packet 2s linear infinite; }
.ai-task-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.ai-task { padding:2rem; border:1px solid #d7dfeb; border-radius:1rem; background:#fff; overflow:hidden; }
.ai-task--wide { grid-column:span 2; background:#eef2fc; }
.ai-task__label { font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:#42629b; }
.ai-task h3 { font:650 1.8rem/1.1 var(--display); letter-spacing:-.04em; margin:.9rem 0; }
.ai-task > p { color:var(--muted); font-size:.95rem; max-width:540px; }
.ai-task a { display:inline-block; color:#2e579d; font-size:.8rem; margin-top:1.4rem; }
.ai-mini-chat { display:flex; flex-direction:column; gap:.75rem; margin-top:1.8rem; }
.ai-mini-chat span { display:block; padding:.8rem 1rem; font-size:.82rem; border-radius:.8rem; max-width:90%; border:1px solid #d7e1f3; background:white; color:#354964; }
.ai-mini-chat span:nth-child(odd) { align-self:flex-end; color:#fff; background:#294f9c; border-color:#294f9c; }
.ai-task.is-visible .ai-mini-chat span, .ai-action-card.is-visible .ai-mini-chat span { animation:ai-message-in .8s both; animation-delay:.2s; }
.ai-task.is-visible .ai-mini-chat span:nth-child(2), .ai-action-card.is-visible .ai-mini-chat span:nth-child(2) { animation-delay:.8s; }
.ai-action-card.is-visible .ai-mini-chat span:nth-child(3) { animation-delay:1.4s; }
.ai-action { background:#e8eef7; }
.ai-action-card { padding:2rem; background:#fff; border:1px solid #c9d8ed; border-radius:1rem; box-shadow:0 25px 60px #24447718; }
.ai-action-record { display:flex; gap:1rem; align-items:center; padding:1.5rem 0 0; margin-top:1.5rem; border-top:1px solid #dce3ee; }
.ai-action-record p { font-size:.95rem; margin:.5rem 0; }.ai-action-record small { font-size:.65rem; color:var(--muted); }
.ai-action .ai-boundary { font-size:.82rem; padding-left:1rem; border-left:2px solid #7397c8; margin-top:1.8rem; }
.ai-control-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.ai-control-grid h3 { font-size:1.25rem; margin:1.2rem 0 .8rem; }
.ai-control-grid p { color:var(--muted); font-size:.95rem; }
.ai-controls__note { border-top:1px solid var(--line); padding-top:1.5rem; margin-top:2rem; color:var(--muted); font-size:.78rem; max-width:900px; }
.ai-setup { background:#eef0f8; }
.ai-setup__panel { padding:3rem; border:1px solid #d3daed; border-radius:1.5rem; text-align:center; background:radial-gradient(ellipse at 50% 30%,#dae8ff,transparent 70%),white; }
.ai-setup__brand { font-size:2.8rem; font-weight:750; letter-spacing:-.06em; color:#2d62cc; }
.ai-setup__line { height:65px; width:1px; margin:.75rem auto; background:linear-gradient(#467bd9,#96b9fa); position:relative; }
.ai-setup__line:after { content:''; position:absolute; width:7px; height:7px; left:-3px; top:0; background:#5988df; border-radius:50%; animation:ai-down 3s ease-in-out infinite; }
.ai-setup__providers { display:flex; justify-content:center; gap:1rem; }
.ai-setup__providers span { background:#f6f8fc; border:1px solid #ccd7eb; border-radius:.65rem; padding:.8rem 1.3rem; }
.ai-setup__panel p { font-size:.8rem; color:var(--muted); margin:1.5rem 0; }
.ai-setup__panel a { color:#325d9f; font-size:.8rem; }
.ai-home { background:radial-gradient(ellipse at 0 100%,#2b4269,transparent 65%),#101e35; color:white; overflow:hidden; }
.ai-home__grid { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:5rem; }
.ai-home__grid > div > p:not(.eyebrow) { color:#c6d4e9; line-height:1.75; max-width:470px; margin:1.8rem 0; }
.ai-home .ai-home__note { font-size:.75rem; }
.ai-home-link { display:inline-flex; align-items:center; gap:.65rem; color:#305ba5; font-size:.8rem; margin-top:1rem; text-underline-offset:4px; }
.ai-home-link:before { content:''; width:7px; height:7px; border-radius:50%; background:#4078ed; box-shadow:0 0 0 5px #4078ed12; }
.ai-page.motion-paused *, .ai-home.motion-paused * { animation-play-state:paused!important; }
@keyframes ai-aurora { to { transform:translate(4%,-4%) rotate(8deg); } }
@keyframes ai-orbit { to { transform:rotate(2deg) translateY(-6px); } }
@keyframes ai-pulse { 50% { opacity:.4; box-shadow:0 0 0 6px #398d8408; } }
@keyframes ai-packet { from { transform:translateX(-15px); } to { transform:translateX(50px); } }
@keyframes ai-down { to { transform:translateY(58px); opacity:0; } }
@keyframes ai-message-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@media(max-width:1050px) { .ai-hero__grid,.ai-home__grid { gap:2rem; }.ai-task-grid { grid-template-columns:1fr 1fr; }.ai-task--wide { grid-column:auto; }.ai-connection .wrap { flex-direction:column;gap:1rem; } }
@media(max-width:800px) { .ai-hero__grid,.ai-home__grid { grid-template-columns:1fr; gap:3rem; }.ai-hero h1 { font-size:clamp(3rem,9vw,4.5rem); }.ai-hero__copy > p:not(.eyebrow) { max-width:600px; }.ai-hero__stage { max-width:600px; width:100%; margin:auto; }.ai-control-grid { grid-template-columns:1fr; gap:1.7rem; } }
@media(max-width:550px) { .ai-task-grid { grid-template-columns:1fr; }.ai-task,.ai-action-card,.ai-setup__panel { padding:1.4rem; }.ai-demo__bar { padding:.8rem; gap:.4rem; }.ai-demo__brand > span { display:none; }.ai-demo__conversation { padding:.85rem; min-height:590px; gap:.7rem; }.ai-message { font-size:.82rem; padding:.8rem; }.ai-message--user { margin-left:1rem; }.ai-message--answer { margin-right:.3rem; }.ai-result { flex-wrap:wrap; gap:.4rem; }.ai-demo__choices { padding:.8rem .8rem .3rem; gap:.3rem; }.ai-demo__choices button { font-size:.63rem; padding:.5rem .6rem; }.ai-connection .wrap > div { gap:.5rem; font-size:.64rem; }.ai-connection i { width:20px; }.ai-tool__code { display:none; }.ai-orbit { inset:-1rem -.2rem; } }
@media(prefers-reduced-motion:reduce) { .ai-page *, .ai-home * { animation:none!important; transition:none!important; }.ai-demo.is-animated [data-ai-step] { opacity:1; transform:none; } }