/* Marine: värdinnans chattruta. Följer temats variabler i båda lägena, så
   ingenting här får sätta egna färger utanför var(--...). Skarpa hörn, hårfina
   linjer och Work Sans i tunn vikt, som resten av sajten. */

.gvm{
  position:fixed; right:20px; z-index:9000;
  /* Sajten kör viewport-fit=cover, så bottenkanten måste hålla sig ovanför
     iPhones hemindikator. Raden utan env() är reserv för webbläsare som inte
     kan env(): utan den kasseras deklarationen och rutan tappar sin bottenkant. */
  bottom:20px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  font-family:var(--sans,system-ui,sans-serif); font-weight:300;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.gvm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Viloläget ---------- */
.gvm-pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px;
  background:var(--nav-bg,rgba(16,18,17,.82));
  border:1px solid var(--line-strong,rgba(182,193,188,.32));
  color:var(--head,#fff);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s ease, color .3s ease;
}
.gvm-pill:hover{border-color:var(--btn-line,rgba(255,255,255,.42))}
.gvm-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--head,#fff); opacity:.5;
  animation:gvm-breathe 3.2s ease-in-out infinite;
}
@keyframes gvm-breathe{0%,100%{opacity:.35}50%{opacity:.9}}

/* ---------- Panelen ---------- */
.gvm-panel{
  width:min(380px, calc(100vw - 32px));
  /* dvh, inte vh: annars räknas mobilens adressfält bort fel och panelen blir
     högre än den synliga ytan. vh-raden är reserv där dvh saknas, annars
     kasseras deklarationen och panelen står helt utan maxhöjd. */
  max-height:min(560px, calc(100vh - 120px));
  max-height:min(560px, calc(100dvh - 120px));
  display:flex; flex-direction:column;
  background:var(--panel,#151817);
  border:1px solid var(--line,rgba(182,193,188,.16));
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  transform-origin:100% 100%;
}
.gvm[data-state="closed"] .gvm-panel{display:none}
.gvm[data-state="open"] .gvm-pill{display:none}
.gvm[data-state="open"] .gvm-panel{
  animation:gvm-in .22s cubic-bezier(.32,.72,0,1) both;
}
@keyframes gvm-in{
  from{opacity:0; transform:translateY(8px) scale(.98)}
  to{opacity:1; transform:none}
}

.gvm-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px 14px;
  border-bottom:1px solid var(--line,rgba(182,193,188,.16));
}
.gvm-name{
  color:var(--head,#fff); font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.gvm-role{
  color:var(--muted,rgba(255,255,255,.55)); font-size:.7rem;
  letter-spacing:.08em; margin-top:4px;
}
.gvm-close{color:var(--muted,rgba(255,255,255,.55)); font-size:1.3rem; line-height:1; padding:0 2px}
.gvm-close:hover{color:var(--head,#fff)}

.gvm-log{
  flex:1 1 auto; overflow-y:auto; padding:18px;
  display:flex; flex-direction:column; gap:16px;
  font-size:.92rem; line-height:1.62; color:var(--text-soft);
  overscroll-behavior:contain;
}
.gvm-msg{max-width:88%}
.gvm-msg.g{  /* gästen: högerställd mot ett tunt streck, ingen pratbubbla */
  align-self:flex-end; text-align:right;
  border-right:1px solid var(--line-strong,rgba(182,193,188,.32));
  padding-right:12px; color:var(--head,#fff);
}
.gvm-msg.m{align-self:flex-start}
.gvm-msg p+p{margin-top:.7em}

.gvm-typing{display:inline-flex; gap:5px; align-items:center; padding:2px 0}
.gvm-typing i{
  width:4px; height:4px; border-radius:50%; background:var(--muted,rgba(255,255,255,.55));
  animation:gvm-blink 1.2s ease-in-out infinite;
}
.gvm-typing i:nth-child(2){animation-delay:.15s}
.gvm-typing i:nth-child(3){animation-delay:.3s}
@keyframes gvm-blink{0%,100%{opacity:.25}50%{opacity:.85}}

.gvm-form{
  display:flex; align-items:flex-end; gap:10px;
  padding:12px 18px; border-top:1px solid var(--line,rgba(182,193,188,.16));
}
.gvm-form textarea{
  flex:1 1 auto; resize:none; max-height:120px;
  background:none; border:0; color:var(--text,#b6c1bc);
  font-family:inherit; font-weight:300; font-size:.92rem; line-height:1.5;
  padding:6px 0;
}
.gvm-form textarea::placeholder{color:var(--muted,rgba(255,255,255,.55))}
.gvm-form textarea:focus{outline:none}
.gvm-send{
  flex:0 0 auto; padding:7px 14px;
  border:1px solid var(--btn-line,rgba(255,255,255,.42)); color:var(--head,#fff);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  transition:border-color .3s ease, opacity .3s ease;
}
.gvm-send[disabled]{opacity:.35}
.gvm-note{
  padding:0 18px 14px; margin:0;
  color:var(--muted,rgba(255,255,255,.55));
  font-size:.68rem; line-height:1.5; letter-spacing:.02em;
}

@media (max-width:600px){
  .gvm{right:12px; left:12px; bottom:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); align-items:stretch}
  .gvm-pill{align-self:flex-end}
  .gvm-panel{width:100%; max-height:calc(100vh - 90px); max-height:calc(100dvh - 90px)}
}

/* Mobilmenyn (z-index 35) ska ligga över allt när den är öppen, men rutan bor på
   9000 och flöt ovanpå, rakt över språkväxlaren. Utan :has-stöd blir pillret
   kvar som förut, bara kosmetiskt. */
body:has(.overlay-menu.open) .gvm{display:none}

/* Pekskärm: iOS Safari zoomar in sidan så fort ett fokuserat fält har mindre än
   16px text, och då går sidan plötsligt att dra i sidled trots overflow-x:hidden
   på body. Temats egna formulärfält ligger på 16px av precis det skälet, och
   skrivfältet här gör det också. */
@media (pointer:coarse){
  .gvm-form textarea{font-size:16px}
}

/* ---------- Marine visar ett ställe på sidan ----------
   En hårfin ram som tonar ut, så gästen ser var sidan landade. Samma språk som
   resten av sajten: linjer, ingen färg. Outline, inte inset box-shadow: skuggan
   målas under elementets barn och försvinner bakom kartbilden, medan outline
   ligger ovanpå och inte klipps av overflow:hidden. */
@media (prefers-reduced-motion:no-preference){
  .gvm-vy{animation:gvm-vy 1.6s ease-out}
}
@keyframes gvm-vy{
  0%,25%{outline:1px solid var(--line-strong,rgba(182,193,188,.32)); outline-offset:-1px}
  100%{outline:1px solid transparent; outline-offset:-1px}
}

@media (prefers-reduced-motion:reduce){
  .gvm[data-state="open"] .gvm-panel{animation:none}
  .gvm-dot,.gvm-typing i{animation:none}
}