/* Chattassistent – JO Marketing Solutions */
.jo-chat-launcher{
  position:fixed; right:1rem; bottom:1rem; z-index:90;
  display:flex; align-items:center; gap:.55rem;
  /* one quiet dark pill that reads on both the dark start page and the white sub pages */
  background:#18181b; color:#fafafa;
  border:1px solid rgba(255,255,255,.14); border-radius:99px; padding:.65rem 1rem;
  font:500 .88rem/1 'Geist',-apple-system,'Segoe UI',sans-serif;
  cursor:pointer; min-height:2.6rem;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.55);
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, opacity .2s ease;
}
@media (hover:hover) and (pointer:fine){ .jo-chat-launcher:hover{ transform:translateY(-2px); } }
.jo-chat-launcher:active{ transform:scale(.97); transition-duration:.16s; }
.jo-chat-launcher:focus-visible,
.jo-chat-panel button:focus-visible,
.jo-chat-panel textarea:focus-visible{ outline:3px solid var(--ink,#161314); outline-offset:2px; }
.jo-chat-launcher svg{ width:1.05rem; height:1.05rem; flex:none; opacity:.85; }
.jo-chat-launcher[hidden]{ display:none; }
/* Cookie-rutan ska inte hamna bakom knappen */
body:has(.cookie-bar.show) .jo-chat-launcher{ opacity:0; pointer-events:none; }

.jo-chat-panel{
  position:fixed; right:1rem; bottom:1rem; z-index:91;
  width:min(24rem, calc(100vw - 2rem));
  height:min(34rem, calc(100vh - 2rem));
  display:flex; flex-direction:column;
  background:var(--panel,#fff); color:var(--ink,#161314);
  border:1px solid var(--line,#e9e2d6); border-radius:20px;
  box-shadow:0 40px 80px -30px rgba(22,19,20,.45);
  font:400 .95rem/1.5 'Geist',-apple-system,'Segoe UI',sans-serif;
  overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.97); transform-origin:bottom right; pointer-events:none;
  /* visibility hides the closed panel once it has animated out, so crossing the
     520px breakpoint (e.g. rotating a phone) can't show it moving between layouts */
  visibility:hidden;
  transition:opacity .15s cubic-bezier(.22,1,.36,1), transform .15s cubic-bezier(.22,1,.36,1), visibility 0s linear .15s;
}
/* visibility flips at once on open so chat.js can focus the input in the same tick */
.jo-chat-panel.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; transition:opacity .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1), visibility 0s; }

.jo-chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1rem; background:var(--ink,#161314); color:var(--paper,#fff);
}
.jo-chat-head strong{ font:600 1rem/1.2 'Space Grotesk','Geist',sans-serif; display:block; }
.jo-chat-head span{ font-size:.78rem; color:#c9cad6; }
.jo-chat-close{
  background:none; border:0; color:var(--paper,#fff); cursor:pointer;
  width:2.5rem; height:2.5rem; border-radius:50%; font-size:1.4rem; line-height:1;
}
@media (hover:hover) and (pointer:fine){ .jo-chat-close:hover{ background:rgba(255,255,255,.12); } }
/* press feedback, same as the site's other buttons */
.jo-chat-close, .jo-chat-chips button, .jo-chat-form button{ transition:transform .16s cubic-bezier(.23,1,.32,1); }
.jo-chat-close:active, .jo-chat-chips button:active, .jo-chat-form button:active:not(:disabled){ transform:scale(.97); }

.jo-chat-log{
  flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.65rem;
  background:var(--paper,#fbf8f2);
}
.jo-chat-msg{
  max-width:86%; padding:.6rem .85rem; border-radius:14px;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
/* new messages fade up so the eye finds them */
.jo-chat-msg{ animation:jo-chat-msg-in .2s cubic-bezier(.23,1,.32,1); }
@keyframes jo-chat-msg-in{ from{ opacity:0; transform:translateY(6px); } }
.jo-chat-msg.bot{ align-self:flex-start; background:var(--panel,#fff); color:var(--ink,#161314); border:1px solid var(--line,#e9e2d6); border-bottom-left-radius:4px; }
.jo-chat-msg.user{ align-self:flex-end; background:var(--accent,#3b3bff); color:var(--accent-ink,#fff); border-bottom-right-radius:4px; }
.jo-chat-msg.typing{ color:var(--ink-faint,#786f64); }
.jo-chat-msg.typing::after{ content:'…'; animation:jo-chat-dots 1.2s steps(4,end) infinite; }
@keyframes jo-chat-fade-in{ from{ opacity:0; } }
@keyframes jo-chat-dots{ 0%{ opacity:.2; } 50%{ opacity:1; } 100%{ opacity:.2; } }

.jo-chat-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.jo-chat-chips button{
  background:var(--accent-soft,#ecebff); color:var(--accent,#3b3bff);
  border:1px solid transparent; border-radius:99px; padding:.5rem .8rem; min-height:2.5rem;
  font-family:inherit; font-weight:600; font-size:.85rem; line-height:1.2; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .jo-chat-chips button:hover{ border-color:var(--accent,#3b3bff); } }

.jo-chat-form{
  display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--line,#e9e2d6); background:var(--panel,#fff);
}
.jo-chat-form textarea{
  flex:1; resize:none; border:1px solid var(--line,#e9e2d6); border-radius:12px;
  padding:.6rem .75rem; font:inherit; color:inherit; min-height:2.75rem; max-height:6rem;
}
.jo-chat-form button{
  background:var(--accent,#3b3bff); color:var(--accent-ink,#fff); border:0; border-radius:12px;
  padding:0 1rem; font-family:inherit; font-weight:600; font-size:.9rem; line-height:1; cursor:pointer; min-height:2.75rem;
}
.jo-chat-form button:disabled{ opacity:.5; cursor:default; }

.jo-chat-foot{
  padding:.45rem .8rem .6rem; background:var(--panel,#fff); font-size:.74rem; line-height:1.4;
  color:var(--ink-faint,#786f64);
}
.jo-chat-foot a{ color:var(--accent,#3b3bff); }

@media (max-width:520px){
  .jo-chat-panel{ right:0; bottom:0; width:100vw; height:min(36rem, 85vh); border-radius:20px 20px 0 0; }
  /* bottom sheet: slide in from the screen edge with the iOS sheet curve */
  .jo-chat-panel{ opacity:1; transform:translateY(100%); transition:transform .35s cubic-bezier(.32,.72,0,1), visibility 0s linear .35s; }
  .jo-chat-panel.open{ transform:none; transition:transform .4s cubic-bezier(.32,.72,0,1), visibility 0s; }
  .jo-chat-form textarea{ font-size:16px; } /* hindrar zoom på iOS */
}
@media (prefers-reduced-motion:reduce){
  .jo-chat-launcher{ transition:none; }
  .jo-chat-msg{ animation-name:jo-chat-fade-in; }
  /* fade only, no movement */
  .jo-chat-panel{ opacity:0; transform:none; transition:opacity .2s ease, visibility 0s linear .2s; }
  .jo-chat-panel.open{ opacity:1; transition:opacity .2s ease, visibility 0s; }
  .jo-chat-msg.typing::after{ animation:none; }
}