/* =====================================================================
   public/app/dock.css: the assistant on every page (dock.js)

   The button: a round dark tile with UNLOOK's two lights, bottom right. The panel: a soft panel at the side of the
   page (the page stays usable beside it), the whole screen on a phone. The chat inside is the Ask UNLOOK page's own.
   Every colour and size is a token. Hover only where a pointer hovers; motion stops for reduced motion.
   ===================================================================== */
.dock-fab{position:fixed;right:24px;bottom:24px;z-index:55;display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid var(--card-edge);border-radius:50%;background:var(--card-sheen);box-shadow:var(--card-lift),0 10px 30px -12px var(--scrim);cursor:pointer;
  transition:scale var(--duration-quick) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out)}
.dock-fab-m{display:block;width:40px;height:40px}
.dock-fab-m svg{display:block;width:100%;height:100%}
@media (hover:hover){.dock-fab:hover{scale:1.05}}
.dock-fab:active{scale:.96}
.dock-fab:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
body[data-view="assistant"] .dock-fab,body[data-dock="open"] .dock-fab{display:none}

.dock{position:fixed;top:12px;right:12px;bottom:12px;z-index:56;display:flex;flex-direction:column;width:min(440px,calc(100vw - 24px));overflow:hidden;border:1px solid var(--card-edge);border-radius:var(--r-panel);background:var(--card-sheen);box-shadow:var(--card-lift),0 30px 80px -30px var(--scrim);
  opacity:0;translate:16px 0;transition:opacity var(--duration-fast) var(--ease-out),translate var(--duration-fast) var(--ease-out)}
.dock.is-in{opacity:1;translate:0 0}
.dock-h{display:flex;align-items:center;gap:10px;padding:12px 10px 12px 14px;border-bottom:1px solid var(--hair)}
.dock-av{flex:none;width:32px;height:32px}
.dock-av svg{display:block;width:100%;height:100%}
.dock-t{flex:1;min-width:0;display:flex;flex-direction:column}
.dock-t b{font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.dock-t small{font-size:var(--fs-meta);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-h .icon-btn{width:36px;height:36px;border-radius:var(--r-btn)}
.dock-b{flex:1;min-height:0;display:flex;flex-direction:column}
/* the page's chat, as it sits in the panel */
.dock .as-chat{flex:1;height:auto;min-height:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
.dock .as-more{display:none}
.dock .as-body:has(>.ah){max-width:none}
.dock .ah{width:100%}
.dock .ah-h{padding:16px 16px 14px}
.dock .ah-list{padding:0 16px}
.dock .ah-row{grid-template-columns:36px minmax(0,1fr);column-gap:12px}
.dock .ah-ic{width:36px;height:36px}

@media (max-width:720px){
  .dock-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .dock{inset:0;width:auto;border:0;border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}
@media (pointer:coarse){.dock-h .icon-btn{width:var(--h-touch);height:var(--h-touch)}}
@media (prefers-reduced-motion:reduce){.dock,.dock-fab{transition:none}.dock{translate:none}.dock-fab:active{scale:1}}
/* the end of a page scrolls clear of the button */
@media (min-width:721px){body:not([data-view="assistant"]) .content{padding-bottom:96px}}
/* a phone: menu.css took the bottom bar's 96px away, so the page ends clear of the 56px button and its 16px gap (batch 3, 15 Oct) */
@media (max-width:720px){body:not([data-view="assistant"]) .content{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
/* while an editor's footer or the save bar is showing, the button steps aside: it sat on top of Save (batch 3, 15 Oct) */
body:has(.screen.on .kc-f) .dock-fab{display:none} /* only an editor on the screen being shown (one left open on another screen does not count) */
/* the two lights blink now and then, as the website chat's eyes do (the owner, 15 Oct); still for less motion */
@media (prefers-reduced-motion:no-preference){.dock-fab .lt-d{transform-box:fill-box;transform-origin:center;animation:dock-blink 7s ease-in-out 3s infinite}}
@keyframes dock-blink{0%,94%,100%{transform:none}96%{transform:scaleY(.12)}}
.dock-fab .lt-d{transition:translate .18s ease-out}
/* wide screens make room for the panel, so what it talks about stays in reach beside it (the check of 15 Oct: it
   covered Log out, Answering and a customer's buttons); narrower ones start it under the header */
@media (min-width:1180px){
  .main{transition:margin-right var(--duration-fast) var(--ease-out)}
  body[data-dock="open"] .main{margin-right:452px}
}
@media (min-width:721px) and (max-width:1179px){.dock{top:var(--dock-top,80px)}}
@media (prefers-reduced-motion:reduce){.main{transition:none}}
/* a change's rows in the panel: the label over its value (side by side they wrapped a letter or two per line) */
.dock .ac-row.has-check{grid-template-columns:18px minmax(0,1fr)}
.dock .ac-row.has-check .ac-val{grid-column:2}
.dock .ac-diff:not(:has(.has-check)){grid-template-columns:minmax(0,1fr)}
/* the button is one round dark light-box with the two lights (option A, the owner, 3 Nov): the mark's own square tile
   sat inside the round button, which read as a square in a circle, worst on the white theme */
.dock-fab{background:radial-gradient(100% 100% at 50% 0%,#3a3f42 0%,#16191a 55%,#0c0e0f 100%)}
.dock-fab-m svg>rect{display:none}
:root[data-theme="light"] .dock-fab{border-color:transparent;box-shadow:0 1px 2px rgba(15,31,28,.10),0 12px 28px -12px rgba(15,31,28,.45)}