.circleos-dock{position:fixed;z-index:60;right:24px;bottom:24px;width:min(400px,calc(100vw - 32px));height:min(530px,68dvh);display:flex;flex-direction:column;background:#fff;color:#222728;border:1px solid #c49b53;border-radius:16px;box-shadow:0 12px 50px #0005;overflow:hidden;font-family:Arial,sans-serif;font-size:16px;line-height:1.4}
.circleos-dock[hidden],.circle-launch[hidden],.circleos-dock [hidden]{display:none!important}
.circleos-dock button{font:inherit;font-size:14px;line-height:1.2;min-height:40px;padding:8px 10px;background:#fff;color:#292b2b;border:1px solid #c7bdac;border-radius:8px;cursor:pointer}
.circleos-dock button:hover{background:#f0eadf}.circleos-dock button:disabled{opacity:.45;cursor:default}.circleos-dock button:focus-visible,.circle-launch:focus-visible{outline:3px solid #bd8624;outline-offset:-3px}
.circleos-dock .dock-header{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#1b1b1b;color:#f4ead6;flex-shrink:0;position:static}
.dock-header strong{margin-right:auto;font-size:18px}.dock-header small{display:block;font-size:12px;color:#d8c090;font-weight:400}.circleos-dock .dock-header button{background:transparent;color:#f4ead6;border-color:#8c764f}
.dock-actions{display:flex;gap:8px;padding:6px 12px;border-bottom:1px solid #e6e0d4;flex-shrink:0}.dock-actions button{flex:1}
.circleos-dock #voice-frame{display:block;width:100%;flex:1;min-height:0;border:0;background:#fff}
.circleos-dock #dock-status{font-size:12px;line-height:1.3;padding:6px 12px;margin:0;border-top:1px solid #ece6dd;flex-shrink:0;color:#5c5a54}
.circleos-dock #dock-tour{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 12px;background:#f6f0e3;flex-shrink:0}
#dock-tour-title{font-size:13px;flex:1;min-width:110px}#dock-tour>div{display:flex;gap:4px}.circleos-dock #dock-tour button{min-height:34px;padding:6px 8px;font-size:13px}
.circleos-dock.is-expanded{width:min(760px,calc(100vw - 32px));height:calc(100dvh - 48px)}
#dock-notes{position:absolute;inset:0;background:#fff;overflow-y:auto;overscroll-behavior:contain;padding:16px;z-index:1}
#dock-notes-close{position:sticky;top:0;z-index:1;margin-bottom:12px}.circleos-dock .memory-panel{border:0;padding:0;margin:0}.circleos-dock .memory-panel summary{font-size:16px;font-weight:600;min-height:40px}.circleos-dock .memory-panel p,.circleos-dock .memory-help{font-size:14px;line-height:1.5;margin:10px 0}.circleos-dock .memory-panel label{display:block;margin:12px 0 6px;font-size:14px}.circleos-dock .memory-panel input:not([type=checkbox]),.circleos-dock .memory-panel textarea{box-sizing:border-box;width:100%;font:inherit;font-size:16px;border:1px solid #999;border-radius:6px;padding:10px;background:white;color:#222}.circleos-dock .memory-panel .memory-consent{display:flex;align-items:flex-start;gap:8px}.circleos-dock .memory-panel input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin:0}.memory-actions{display:flex;flex-wrap:wrap;gap:8px}.circleos-dock a{text-decoration:underline;overflow-wrap:anywhere}
.tour-highlight{outline:3px solid #c49743;outline-offset:-4px;scroll-margin-top:16px}
@media(max-width:600px){.circleos-dock{right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);height:min(440px,58dvh)}.circleos-dock.is-expanded{height:calc(100dvh - 24px);width:calc(100vw - 24px)}.circleos-dock .dock-header{padding:7px 10px}.dock-actions{padding:4px 10px}.circleos-dock #dock-tour{padding:4px 10px}#dock-tour-title{width:100%;flex-basis:100%}.circleos-dock #dock-tour button{min-height:30px}.tour-highlight{scroll-margin-top:12px}}
@media(max-height:500px){.circleos-dock{height:calc(100dvh - 24px);width:min(380px,calc(100vw - 24px))}.dock-actions{display:none}}
/* Leave conversation controls usable on short mobile viewports. */
@media(max-width:600px){.circleos-dock{height:clamp(330px,60dvh,440px);max-height:calc(100dvh - 88px)}#dock-tour-title{flex-basis:auto;min-width:70px;font-size:12px}.circleos-dock #dock-tour button{font-size:12px;padding:5px 6px}.circleos-dock .dock-header button{font-size:13px;padding:7px 8px}}
@media(max-height:500px){.circleos-dock{max-height:calc(100dvh - 24px)}.circleos-dock.is-expanded{max-height:calc(100dvh - 24px)}}
@media(max-width:600px){.circleos-dock.is-expanded{max-height:calc(100dvh - 24px)}}

/* During a voice tour, keep only navigation and the way back to call controls. */
.circleos-dock.is-touring{height:auto;max-height:40dvh;width:min(400px,calc(100vw - 24px));border-radius:12px}
.circleos-dock.is-touring .dock-actions,.circleos-dock.is-touring #dock-status{display:none}
.circleos-dock.is-touring #voice-frame{position:absolute;width:1px;height:1px;flex:none;opacity:0;pointer-events:none;visibility:hidden}
.circleos-dock.is-touring .dock-header{padding:6px 10px}
.circleos-dock.is-touring .dock-header strong{font-size:16px}
.circleos-dock.is-touring .dock-header small{display:none}
.circleos-dock #dock-tour-note{padding:5px 10px;font-size:12px;line-height:1.4;background:#fff;color:#5c5a54}
.circleos-dock.is-touring #dock-tour{flex-wrap:nowrap;padding:5px 10px}
.circleos-dock.is-touring #dock-tour-title{font-size:12px;min-width:0;overflow-wrap:anywhere;flex:1}
@media(max-width:360px){.circleos-dock.is-touring #dock-tour{flex-wrap:wrap}}

.circleos-dock #dock-welcome{font-size:14px;line-height:1.4;padding:10px 12px;background:#faf7f0;flex-shrink:0}
.circleos-dock.is-touring #dock-welcome,.circleos-dock.has-conversation #dock-welcome{display:none}
.circle-launch small{font-size:14px}

/* Text wraps at every width; the transcript scrolls independently of controls. */
.circleos-dock{bottom:calc(12px + var(--keyboard-offset,0px));max-height:var(--visible-height,calc(100dvh - 24px))}
.circleos-dock.is-expanded{max-height:var(--visible-height,calc(100dvh - 24px))}
.circleos-dock .dock-header{min-width:0;flex-wrap:wrap}
.circleos-dock .dock-header strong{min-width:0;overflow-wrap:anywhere}
.circleos-dock #voice-frame{min-width:0;min-height:160px}
.circleos-dock:not(.is-touring){overflow-y:auto;overscroll-behavior:contain}
.circleos-dock #dock-welcome{font-size:13px;padding:7px 12px}
.circleos-dock #dock-tour>div{flex-wrap:wrap}
.circleos-dock.is-touring #voice-frame{min-height:0}
.circleos-dock.is-touring #dock-tour{flex-wrap:wrap}
.circleos-dock.is-touring #dock-tour-title{flex-basis:100%}
@media(max-height:500px){.circleos-dock #dock-welcome{display:none}}

#dock-tour{flex-wrap:wrap}#dock-tour-summary{flex-basis:100%;margin:4px 0 8px;font-size:14px;line-height:1.45;max-height:110px;overflow-y:auto;overflow-wrap:anywhere}