/* WEBCHAT-1: no page layout rules; the native dialog sits in the top layer only while open. */
:root { --petit-webchat-ready:1; }
.petit-webchat { position:fixed; inset:auto auto 24px 24px; box-sizing:border-box; margin:0; width:380px; max-width:calc(100% - 48px); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--bg); color:var(--ink); font:400 16px/1.5 var(--sans); text-align:right; }
.petit-webchat:not([open]) { display:none; }
.petit-webchat::backdrop { background:var(--ink); opacity:.25; }
.petit-webchat header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.petit-webchat h2 { margin:0; color:var(--ink); font:var(--head-w) 24px/1.2 var(--head); }
.petit-webchat p { margin:12px 0 16px; color:var(--muted); }
.petit-webchat label { display:block; font-weight:600; }
.petit-webchat textarea { box-sizing:border-box; display:block; width:100%; min-height:100px; margin:8px 0 16px; padding:10px; border:1px solid var(--field); border-radius:8px; background:var(--bg); color:var(--ink); font:400 16px/1.5 var(--sans); resize:vertical; }
.petit-webchat button { min-width:44px; min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:600 16px/1.5 var(--sans); cursor:pointer; }
.petit-webchat .petit-webchat-send { width:100%; border-color:var(--olive); background:var(--olive); color:var(--bg); }
.petit-webchat .petit-webchat-send:hover { background:var(--olive-2); }
.petit-webchat-call { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px; min-height:44px; margin-top:8px; color:var(--olive); text-decoration:underline; }
.petit-webchat :focus-visible { outline:2px solid var(--olive); outline-offset:3px; }
@media (max-width:900px), (hover:none) and (pointer:coarse) {
  .petit-webchat { inset:auto 0 0; width:100%; max-width:none; max-height:100vh; max-height:100dvh; border-radius:16px 16px 0 0; padding:16px max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .petit-webchat[style] { display:flex; flex-direction:column; overflow:hidden; }
  .petit-webchat[style] .petit-webchat-intro { min-height:0; overflow:auto; }
  .petit-webchat[style] textarea { height:100px; min-height:48px; resize:none; }
  .petit-webchat[style] .petit-webchat-send { flex-shrink:0; }
  .petit-webchat[style] .petit-webchat-call { min-height:0; flex-basis:44px; overflow:auto; }
}