#ottoChatRobot .robot-card{ position: absolute; inset: 0; width: 112px; height: 108px; padding: 0; border: 0; background: transparent; cursor: grab; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }#ottoChatRobot .robot-card:active{ cursor: grabbing; }#ottoChatRobot .robot-shadow{ position: absolute; left: 27px; bottom: 1px; width: 58px; height: 9px; border-radius: 50%; background: rgba(34,59,88,.28); filter: blur(5px); animation: shadow-breathe 3.2s ease-in-out infinite; }#ottoChatRobot .robot-antenna{ position: absolute; z-index: 1; top: 1px; left: 53px; width: 6px; height: 16px; border: 1px solid rgba(111,126,151,.35); border-radius: 5px; background: linear-gradient(90deg,var(--otto-primary),#d7ddeb,var(--otto-primary)); transform-origin: 50% 100%; animation: antenna-sway 3.8s ease-in-out infinite; }#ottoChatRobot .closed-status{ position: absolute; top: -2px; left: -3px; width: 12px; height: 12px; border: 2px solid white; border-radius: 50%; background: #8897a5; box-shadow: 0 0 0 3px rgba(136,151,165,.14), inset 0 1px 2px rgba(255,255,255,.9); }#ottoChatRobot .closed-status.live{ background: #54d58a; }#ottoChatRobot .closed-status.syncing,#ottoChatRobot .closed-status.reconnecting{ background: #e9a82d; animation: status-pulse 1.35s ease-out infinite; }#ottoChatRobot .closed-status.offline{ background: #d85f5f; }#ottoChatRobot .robot-body{ position: absolute; z-index: 2; left: 19px; top: 12px; width: 74px; height: 82px; border: 1px solid #bac7d7; border-radius: 49% 49% 45% 45%; background: radial-gradient(circle at 29% 18%,#fff 0 13%,transparent 36%), linear-gradient(145deg,#fff 3%,#edf1f7 43%,#c7d2e1 100%); box-shadow: 0 10px 20px rgba(30,54,85,.29), inset -6px -7px 10px rgba(92,112,145,.18), inset 5px 5px 9px rgba(255,255,255,.94); animation: robot-float 3.2s ease-in-out infinite; }#ottoChatRobot .robot-body::before{ content:""; position:absolute; inset:4px; border:1px solid rgba(116,133,159,.22); border-radius:50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.36); pointer-events:none; }#ottoChatRobot .robot-body::after{ content:""; position:absolute; left:7px; top:9px; width:19px; height:7px; border-top:1px solid rgba(255,255,255,.9); border-radius:50%; transform:rotate(-28deg); pointer-events:none; }#ottoChatRobot .robot-cap{ position: absolute; z-index: 3; top: -5px; left: 25px; width: 24px; height: 9px; border: 1px solid color-mix(in srgb,var(--otto-primary) 65%,#aeb9c8); border-radius: 50% 50% 6px 6px; background: linear-gradient(90deg,var(--otto-primary),color-mix(in srgb,var(--otto-primary) 35%,white) 48%,var(--otto-primary)); box-shadow: inset 0 1px 2px rgba(255,255,255,.72), 0 2px 3px color-mix(in srgb,var(--otto-primary) 30%,transparent); }#ottoChatRobot .robot-fin{ position: absolute; z-index: 1; top: 42px; width: 24px; height: 32px; border: 1px solid #95a5ba; background: linear-gradient(145deg,#edf2f8,#8292aa); box-shadow: 0 5px 10px rgba(34,52,80,.22), inset 0 1px 1px rgba(255,255,255,.72); }#ottoChatRobot .robot-fin.left{ left: 6px; border-radius: 15px 3px 14px 7px; transform: rotate(-24deg); }#ottoChatRobot .robot-fin.right{ right: 6px; border-radius: 3px 15px 7px 14px; transform: rotate(24deg); }#ottoChatRobot .robot-fin span{ position: absolute; left: 7px; bottom: 4px; width: 7px; height: 13px; border-radius: 6px; background: linear-gradient(color-mix(in srgb,var(--otto-secondary) 55%,white),var(--otto-secondary)); box-shadow: 0 0 6px color-mix(in srgb,var(--otto-secondary) 62%,transparent); }#ottoChatRobot .robot-fin.right span{ left: auto; right: 7px; }#ottoChatRobot .robot-visor{ position: absolute; z-index: 4; top: 18px; left: 6px; width: 62px; height: 35px; display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 5px; padding: 0 7px; overflow: hidden; border: 2px solid #8999ae; border-radius: 12px; background: repeating-linear-gradient(0deg,color-mix(in srgb,var(--otto-secondary) 5%,transparent) 0 1px,transparent 1px 4px), linear-gradient(145deg,color-mix(in srgb,var(--otto-primary) 42%,#102d40),#061724 70%); box-shadow: 0 0 0 2px color-mix(in srgb,var(--otto-primary) 58%,transparent), inset 0 0 11px color-mix(in srgb,var(--otto-secondary) 42%,transparent), 0 4px 8px rgba(30,45,75,.3); }#ottoChatRobot .robot-visor::before{ content:""; position:absolute; z-index:0; top:3px; bottom:3px; left:-12px; width:9px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--otto-secondary) 30%,transparent),transparent); transform:skewX(-12deg); animation: visor-scan 4.8s ease-in-out infinite; pointer-events:none; }#ottoChatRobot .robot-visor::after{ content:""; position:absolute; inset:3px; border:1px solid rgba(111,220,255,.19); border-radius:8px; pointer-events:none; }#ottoChatRobot .visor-bell{ position:relative; z-index:1; width:12px; height:11px; border:2px solid var(--otto-secondary); border-bottom:0; border-radius:7px 7px 2px 2px; filter:drop-shadow(0 0 3px color-mix(in srgb,var(--otto-secondary) 72%,transparent)); }#ottoChatRobot .visor-bell::before{ content:""; position:absolute; top:-5px; left:3px; width:2px; height:3px; border-radius:2px; background:color-mix(in srgb,var(--otto-secondary) 55%,white); }#ottoChatRobot .visor-bell::after{ content:""; position:absolute; left:-3px; bottom:-4px; width:14px; height:3px; border-top:2px solid var(--otto-secondary); border-radius:50%; box-shadow:0 2px 0 -1px color-mix(in srgb,var(--otto-secondary) 55%,white); }#ottoChatRobot .visor-copy{ position:relative; z-index:1; min-width:0; display:grid; justify-items:start; line-height:1; }#ottoChatRobot .visor-copy b{ color:#fff; font-size:14px; font-weight:900; font-variant-numeric:tabular-nums; text-shadow:0 0 7px var(--otto-secondary); }#ottoChatRobot .visor-copy small{ margin-top:2px; color:color-mix(in srgb,var(--otto-secondary) 72%,white); font-size:5px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }#ottoChatRobot .robot-bolt{ position:absolute; z-index:5; top:42px; width:3px; height:3px; border-radius:50%; background:#8191a5; box-shadow:inset 0 1px 1px rgba(255,255,255,.8); }#ottoChatRobot .robot-bolt.left{ left:5px; }#ottoChatRobot .robot-bolt.right{ right:5px; }#ottoChatRobot .robot-shell-line{ position:absolute; z-index:3; left:24px; width:26px; height:1px; background:linear-gradient(90deg,transparent,#9baabd,transparent); opacity:.7; }#ottoChatRobot .robot-shell-line.top{ top:8px; }#ottoChatRobot .robot-shell-line.bottom{ bottom:9px; }#ottoChatRobot .robot-console{ position: absolute; z-index: 4; left: 23px; bottom: 5px; width: 28px; height: 8px; display: flex; align-items: center; justify-content: space-around; padding: 1px 3px; border:1px solid #75879c; border-radius: 5px; background: #162d41; box-shadow: inset 0 0 5px rgba(68,198,255,.3), 0 1px 2px rgba(28,45,61,.28); }#ottoChatRobot .robot-console i{ width: 3px; height: 3px; border-radius: 50%; background: var(--otto-secondary); box-shadow: 0 0 4px var(--otto-secondary); }#ottoChatRobot .robot-console img{ width: 7px; height: 7px; object-fit: contain; }

:root{--otto-primary:var(--purple,#4a1cb0);--otto-secondary:var(--secondary,#72c900)}
#ottoChatRobot .robot-card{inset:auto;top:15px;left:14px;pointer-events:none;box-sizing:border-box}
#ottoChatRobot .robot-card *{box-sizing:border-box}
#ottoChatRobot .robot-console img{width:7px;height:7px}
#ottoChatRobot .robot-visor::after{content:"OTTO";position:absolute;inset:0;display:grid;place-items:center;font:700 13px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:1px;color:color-mix(in srgb,var(--otto-secondary) 65%,white);text-shadow:0 0 5px color-mix(in srgb,var(--otto-secondary) 45%,transparent);border:0}
#ottoChatRobot .robot-body,#ottoChatRobot .robot-antenna{animation:none}

/* Reserve header space beside page navigation for the native companion. */
body.otto-native-compact #ottoChatRobot{display:none!important}
#ottoHeaderDock{display:none}
body.otto-native-compact #ottoHeaderDock{display:block;flex:0 0 56px;width:56px;height:54px;pointer-events:none}
body.otto-native-compact .header-left{overflow:visible}