/* Ocean is a movable presence. The work surface keeps its width and position. */
.working-beta #concierge-launch.ocean-presence{position:fixed;right:auto;bottom:auto;min-width:0;width:var(--mist-size);height:var(--mist-size);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:55;display:block;overflow:visible;touch-action:none;cursor:grab;transition:width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1);color:var(--ink)}
.working-beta #concierge-launch.ocean-presence[hidden]{display:none}
.ocean-presence canvas{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 16px #79ced02b);animation:ocean-mist-breathe 4.8s ease-in-out infinite}
.working-beta #concierge-launch.ocean-presence{pointer-events:none}
.ocean-presence-touch{position:absolute;inset:10%;pointer-events:auto;border-radius:43% 57% 54% 46%;cursor:inherit;touch-action:none}
.ocean-presence.is-paused canvas{animation-play-state:paused}
.working-beta #concierge-launch.ocean-presence.is-dragging{transition:none;cursor:grabbing}
.working-beta #concierge-launch.ocean-presence:focus-visible{outline:none}
.working-beta #concierge-launch.ocean-presence:focus-visible canvas{filter:drop-shadow(0 0 10px #4b8ed0aa) brightness(1.12)}
@media(forced-colors:active){.working-beta #concierge-launch.ocean-presence:focus-visible{outline:2px solid Highlight;outline-offset:-16px}}
.ocean-mist-help{position:fixed;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#chat-panel.ocean-summoned{position:fixed;right:auto;bottom:auto;width:min(390px,calc(100vw - 24px));height:auto;max-height:calc(100dvh - 24px);z-index:37;padding:20px;display:flex;flex-direction:column;gap:13px;border:1px solid color-mix(in srgb,var(--ocean-ring) 28%,var(--line));border-radius:22px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(24px);box-shadow:0 12px 50px #18364d16;overflow:auto;overscroll-behavior:contain;color:var(--ink)}
#chat-panel.ocean-summoned.is-arriving{animation:ocean-summon .3s ease-out}
.ocean-summoned header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ocean-summoned h2{font-size:25px;letter-spacing:-.7px;margin:0;font-weight:550}
.ocean-summoned header p{font-size:12px;color:var(--ink-soft);margin:5px 0 0;line-height:1.5}
.ocean-summoned .agent-close{flex:none;width:30px;height:30px}
.ocean-summoned .surface-context{margin:0;border:0;padding:0;font-size:12px;color:var(--ink-soft)}
.ocean-summoned .surface-context strong{font-size:12px;font-weight:500}
.ocean-summoned .surface-agent-form{margin:0;padding:6px;border-radius:14px;min-height:52px;background:color-mix(in srgb,var(--ocean-ring-wash) 35%,var(--panel));flex:none}
.ocean-summoned .surface-agent-form input{font-size:15px}
.ocean-summoned .surface-send{background:var(--ink);color:var(--panel);border-radius:50%;width:32px;height:32px}
.ocean-summoned .surface-quick-actions{padding:0;border:0;gap:6px;overflow:visible;display:flex}
.ocean-summoned .surface-action{border-radius:15px;padding:7px 10px;min-height:32px;font-size:12px;background:transparent}
.ocean-summoned .ocean-answer{padding:12px 0 0;border-top:1px solid var(--line);font-size:13px;line-height:1.6}
.ocean-answer p{margin:0}.ocean-answer .surface-message-actions{margin-top:8px}
.ocean-answer .button{font-size:12px;padding:5px 8px}
.ocean-summoned .ocean-presence-tools{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:0}
.ocean-presence-tools>div{display:flex;gap:1px}.ocean-presence-tools .icon-button{width:30px;height:30px}.ocean-presence-tools .surface-listen{font-size:12px}
.ocean-summoned .surface-voice-options{padding:0;max-height:none}
.ocean-summoned .surface-composer-note{display:block;margin:0;font-size:10px;line-height:1.4}
.ocean-summoned .ocean-review{padding:10px;border-radius:12px;background:var(--panel-alt);font-size:12px}
.ocean-review .surface-action{margin-top:6px}
@keyframes ocean-summon{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ocean-mist-breathe{0%,100%{transform:translateY(6px) rotate(-6deg) scale(.90);opacity:.86}50%{transform:translateY(-8px) rotate(7deg) scale(1.12);opacity:1}}
/* Smaller appearances share the same soft vocabulary, without outlined rings. */
.ocean-vapor{--vapor-size:58px;position:relative;display:inline-block;flex:none;width:var(--vapor-size);height:var(--vapor-size);pointer-events:none;isolation:isolate}
.ocean-vapor i{position:absolute;inset:12%;border-radius:62% 38% 58% 42%;background:radial-gradient(ellipse at 30% 55%,#9dd7ebaa,transparent 65%),radial-gradient(ellipse at 67% 42%,#6ab7d488,transparent 64%);filter:blur(5px);animation:ocean-vapor-drift 7s ease-in-out infinite alternate}
.ocean-vapor i:nth-child(2){inset:18% 5% 8% 28%;background:radial-gradient(ellipse,#75cfcba1,transparent 70%);animation-delay:-3s;animation-duration:9s}
.ocean-vapor i:nth-child(3){inset:35% 20% 25% 12%;background:radial-gradient(ellipse,#fff9,transparent 65%);animation-delay:-6s}
.ocean-vapor.paused i,.ocean-motion-paused .ocean-vapor i{animation-play-state:paused}
.ocean-vapor.presence{--vapor-size:168px}.ocean-vapor.engine{--vapor-size:35px}.ocean-vapor.inline{--vapor-size:27px}.ocean-vapor.header{--vapor-size:53px}.ocean-vapor.welcome{--vapor-size:85px}
@keyframes ocean-vapor-drift{from{transform:translate(-4%,3%) rotate(-14deg) scale(.88);opacity:.7}to{transform:translate(4%,-4%) rotate(15deg) scale(1.12);opacity:1}}
@media(max-width:720px){#chat-panel.ocean-summoned{padding:16px;gap:10px}.ocean-summoned h2{font-size:22px}.ocean-summoned .surface-agent-form input{font-size:16px}.ocean-summoned .surface-action{min-height:36px}.ocean-summoned .ocean-answer{max-height:130px;overflow:auto}}
@media(prefers-reduced-motion:reduce){.working-beta #concierge-launch.ocean-presence{transition:none}#chat-panel.ocean-summoned,.ocean-presence canvas{animation:none}.ocean-vapor i{animation:none}}
@media print{.ocean-presence,#chat-panel.ocean-summoned,.ocean-mist-help{display:none!important}}

/* A quiet parking place beside the theme and notification controls. */
.working-beta #concierge-launch.ocean-presence.is-parked{visibility:hidden!important;pointer-events:none!important}
.working-beta #concierge-launch.ocean-presence.is-parked *{pointer-events:none!important}
.working-beta .top-tools .ocean-lens-dock-238{position:relative;display:grid;place-items:center;width:38px;height:38px;min-width:38px;padding:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.ocean-lens-dock-238 canvas{position:absolute;inset:0;width:38px;height:38px;opacity:.5;pointer-events:none;transition:opacity .25s}
.ocean-lens-dock-238 .ocean-dock-marker-238{width:17px;height:17px;position:relative;opacity:.7;pointer-events:none}
.ocean-lens-dock-238.is-parked canvas{opacity:1}.ocean-lens-dock-238.is-parked .ocean-dock-marker-238{display:none}
.working-beta .top-tools .ocean-lens-dock-238:hover,.working-beta .top-tools .ocean-lens-dock-238.is-drop-target{background:#edf0ff;border-color:#b8c8ff}
.working-beta .top-tools .ocean-lens-dock-238:focus-visible{outline:2px solid #7dabe0;outline-offset:3px}
html[data-theme=night] .working-beta .top-tools .ocean-lens-dock-238:hover,html[data-theme=night] .working-beta .top-tools .ocean-lens-dock-238.is-drop-target{background:#243953;border-color:#58739e}
@media(prefers-reduced-motion:reduce){.ocean-lens-dock-238 canvas{transition:none}}
