/* Components shared by every skin: consent banner and skin picker.
   Each skin sets the --ui-* tokens; fallbacks match the Classique skin. */
.consent{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:150;width:min(940px,calc(100% - 24px));display:flex;gap:16px 28px;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--ui-bg,#101e25);color:var(--ui-fg,#edf3f5);border:1px solid var(--ui-line,#a3d78e40);border-radius:var(--ui-radius,12px);box-shadow:0 24px 70px #0007;font-family:var(--ui-font,inherit);animation:consent-in .45s cubic-bezier(.2,.7,.2,1)}
@keyframes consent-in{from{opacity:0;transform:translate(-50%,16px)}}
.consent-copy strong{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.consent-copy p{margin:0;font-size:14px;line-height:1.55;color:var(--ui-fg-2,#c5d3d9);max-width:58ch}
.consent-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:none}
.consent-more{font:inherit;font-size:14px;color:var(--ui-fg-2,#c5d3d9);text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:10px 6px;cursor:pointer}
.consent-btn{font:inherit;font-size:15px;font-weight:600;min-height:46px;min-width:112px;padding:0 18px;border-radius:var(--ui-btn-radius,8px);background:var(--ui-accent,#91e897);color:var(--ui-accent-fg,#071209);border:1px solid var(--ui-accent,#91e897);cursor:pointer}
.consent-btn:hover{filter:brightness(1.06)}
@media (max-width:720px){.consent{flex-direction:column;align-items:stretch;bottom:calc(10px + env(safe-area-inset-bottom));padding:16px}.consent-actions{justify-content:flex-end}.consent-btn{flex:1}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}

/* Skin picker, displayed inside the shared dialog with a screenshot matching the device. */
#dialog.skin-picker{width:min(900px,calc(100% - 24px));max-width:900px}
.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 14px}
.skin-opt{display:flex!important;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;gap:6px;text-align:left;padding:8px 8px 12px!important;min-height:0!important;border-radius:var(--ui-radius,10px);background:var(--ui-surface,#0b1a21);color:var(--ui-fg,#edf3f5);border:1px solid var(--ui-line,#ffffff1f);cursor:pointer;font:inherit;transition:border-color .2s,transform .25s}
.skin-opt:hover{transform:translateY(-2px);border-color:var(--ui-accent,#91e897)}
.skin-opt[aria-pressed="true"]{border-color:var(--ui-accent,#91e897);box-shadow:inset 0 0 0 1px var(--ui-accent,#91e897)}
.skin-opt:disabled{opacity:.6;cursor:progress}
.skin-shot{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:calc(var(--ui-radius,10px) - 4px);background:var(--ui-line,#ffffff1f);margin-bottom:6px;box-shadow:0 0 0 1px var(--ui-line,#ffffff1f)}
.skin-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.skin-name{font-size:16px;font-weight:600;padding:0 4px}
.skin-name em{font-style:normal;font-weight:400;color:var(--ui-accent,#91e897)}
.skin-desc{font-size:13.5px;line-height:1.5;color:var(--ui-fg-2,#c5d3d9);padding:0 4px}
@media (max-width:760px){
 .skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .skin-shot{aspect-ratio:390/760}
 .skin-name{font-size:15px}
 .skin-desc{display:none}
}

/* Floating button back to the top, shown once the visitor has scrolled down (core.js).
   Above page content and quick-access bars, below menus, overlays, dialogs and the consent banner. */
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + var(--ui-dock-offset,0px) + env(safe-area-inset-bottom));z-index:56;display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;cursor:pointer;color:var(--ui-accent-fg,#071209);background:var(--ui-accent,#91e897);border:1px solid color-mix(in srgb,var(--ui-accent-fg,#071209) 18%,transparent);box-shadow:0 14px 34px -10px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
.to-top.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.to-top.on:hover{transform:translateY(-3px)}
.to-top svg{width:24px;height:24px}
body.to-top-on #chat-dock-tray{margin-bottom:64px}
@media (max-width:760px){.to-top{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.to-top,.to-top.on{transition:none}}

/* Classique only: entry point in the prototype bar. */
.prototype-bar .skin-switch{margin-left:auto;color:#c0e1bd}