/* Logo Chat Lite — v2.7.8
   - Fix Chrome mobil: måla BODY/HTML (från PHP) + ingen vertikalcentrering på mobil
   - Ingen ofrivillig top-padding; styr via --lc-top-pad (admin: Extra toppmarginal mobil)
   - 100dvh-fix, H3/H4, länkar understrukna, glow-toggle
*/

html, body{ margin:0 !important; padding:0 !important; }
html, body{ overflow-x:hidden; }

/* Nollställ wrappers så gradienten kan blöda ut */
.wp-site-blocks, .site, .site-content, .site-main, .entry-content, #primary, #content {
  margin:0 !important; padding:0 !important;
}
.entry-content > *:first-child { margin-top:0 !important; }
.entry-content > *:last-child  { margin-bottom:0 !important; }

/* Full-bleed även i teman som centrerar innehåll */
.logo-chat-wrap{
  margin:0 !important;
  width:100vw; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* ——— Bakgrund ——— */
.logo-chat-wrap{
  min-height:100svh;
  min-height:100dvh;
  height:auto;

  display:grid; place-items:center;
  color: var(--lc-text, #111);
  position:relative; overflow:hidden;
  background: linear-gradient(270deg, var(--lc-bg1,#ffd5a6), var(--lc-bg2,#c0d4ff), var(--lc-bg3,#e6baff), var(--lc-bg4,#a7ffd0));
  background-size:600% 600%;
  animation: lc-waveGradient var(--lc-wave-duration, 24s) ease-in-out infinite;
}
.logo-chat-wrap::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none; z-index:0;
}
@keyframes lc-waveGradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.lc-dark{ background:#0b0b0c!important; color: var(--lc-text, #f1f1f1)!important; animation:none!important; }
.lc-dark::before{display:none;}
@media (prefers-reduced-motion: reduce){ .logo-chat-wrap{animation:none!important} }

/* ——— Layout ——— */
.logo-chat-inner{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  padding: calc(var(--lc-top-pad, 0px)) clamp(16px,5vw,28px) 6vh;
  width:100%; position:relative; z-index:1;
}
.logo-chat-plain{ display:flex; flex-direction:column; align-items:center; gap:.6rem; width:100% }

/* ——— Logotyp ——— */
.logo-chat-logo{ text-align:center; }
.logo-chat-logo img{ max-width:220px; height:auto; display:inline-block; opacity: var(--lc-logo-opacity, 1); filter: drop-shadow(0 1px 0 rgba(0,0,0,.05)); }

/* ——— Meddelanden (H3/H4) ——— */
.logo-chat-msg{
  max-width:min(var(--lc-width,780px),92vw);
  white-space:pre-wrap; word-break:break-word; text-align:center;
  margin: 0.4em 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.logo-chat-msg.you{ font-weight:600; }  /* H3 (frågor + greeting) */
.logo-chat-msg.bot{ font-weight:400; }  /* H4 (svar) */

/* Länkar = samma färg som text, alltid understrukna */
.logo-chat-msg a{ color: var(--lc-text, #111) !important; text-decoration: underline; }
.logo-chat-msg a:hover{ text-decoration: underline; }

/* ——— Input ——— */
.logo-chat-entry{ display:flex; align-items:center; gap:12px; justify-content:center; width:100% }
.lc-inputbar{
  --lc-input-width: 620px; --lc-blur: var(--lc-blur, 6px); --lc-sat: var(--lc-sat, 150%);
  position: relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  width: min(var(--lc-input-width), 100%);
  background: rgba(255,255,255, var(--lc-inputbar-alpha, .35));
  border: 1px solid rgba(0,0,0,.06);
  border-radius:9999px;
  padding:8px 10px 8px 14px;
  -webkit-backdrop-filter: saturate(var(--lc-sat)) blur(var(--lc-blur));
  backdrop-filter: saturate(var(--lc-sat)) blur(var(--lc-blur));
  box-shadow:none;
  transition: opacity .35s ease, transform .35s ease;
}
.lc-inputbar.lc-prehidden, .lc-inputbar.lc-fadehide{ opacity:0; transform: translateY(6px); pointer-events:none }

:root{ --lc-glow: 0; }
.lc-inputbar::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: linear-gradient(90deg,#ff5f6d,#ffc371,#47cf73,#1fddff,#5f2c82,#ff5f6d);
  background-size:400% 400%;
  filter: blur(14px);
  opacity: 0; z-index:-1;
  transition: opacity .4s ease;
  animation: rainbowGlow 12s ease infinite;
}
.lc-inputbar[data-glow="1"]::before,
.lc-inputbar:is([data-glow="1"]):hover::before{ opacity:.8; }
@keyframes rainbowGlow{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.logo-chat-wrap .lc-input{
  flex:1; min-width:0;
  border:none !important; outline:none !important; box-shadow:none !important;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent !important; background-color:transparent !important;
  color: var(--lc-input-text, #111) !important;
  -webkit-text-fill-color: var(--lc-input-text, #111) !important;
  caret-color: var(--lc-input-text, #111) !important;
  font-size:clamp(18px,3.8vw,20px); line-height:1.4;
  padding:6px 4px; -webkit-tap-highlight-color: transparent;
}
.logo-chat-wrap .lc-input::placeholder{ color: var(--lc-input-text, #111) !important; opacity:.6; }
.lc-dark .lc-input::placeholder{ color: var(--lc-input-text, #f1f1f1) !important; opacity:.6; }

/* Autofill (WebKit) */
.logo-chat-wrap .lc-input:-webkit-autofill,
.logo-chat-wrap .lc-input:-webkit-autofill:hover,
.logo-chat-wrap .lc-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--lc-input-text, #111) !important;
  caret-color: var(--lc-input-text, #111) !important;
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(255,255,255, var(--lc-inputbar-alpha, .35)) inset !important;
}

/* Skicka-knapp */
.lc-send{ width:36px; height:36px; display:grid; place-items:center; background:transparent; border:none !important; outline:none !important; box-shadow:none !important; border-radius:9999px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.lc-send svg{ width:22px; height:22px; display:block; transform-origin:center; animation: lc-heart 1.2s ease-in-out infinite; fill:red; }
.lc-inputbar.lc-prehidden .lc-send svg, .lc-inputbar.lc-fadehide .lc-send svg{ animation-play-state: paused; opacity:0; }
@media (prefers-reduced-motion: reduce){ .lc-send svg{ animation:none !important } }
@keyframes lc-heart{ 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
.lc-send[disabled]{ opacity:.45; cursor:not-allowed }

/* ——— Typing dots ——— */
.lc-typing{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
.lc-typing .dot{ width:.5em;height:.5em;border-radius:50%; background: currentColor; opacity:.35; animation: lc-type 1.2s infinite }
.lc-typing .dot:nth-child(2){animation-delay:.15s}
.lc-typing .dot:nth-child(3){animation-delay:.30s}
@keyframes lc-type{ 0%{opacity:.25;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} 100%{opacity:.25;transform:translateY(0)} }

/* ——— Hjälpklasser ——— */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ——— Mobil ——— */
@media (max-width:640px){
  /* Viktigt: ingen vertikalcentrering – börja upptill */
  .logo-chat-wrap{ display:block; min-height:100dvh; }
  .logo-chat-inner{ align-items:center; padding-top: var(--lc-top-pad, 0px); padding-bottom: 6vh; }
  .logo-chat-plain{ align-items:center }
  .logo-chat-msg{ text-align:center }
  .logo-chat-entry{ justify-content:center }
  .lc-input{ font-size:clamp(16px,4.2vw,18px) }
}