:root{
  --bg:#0a0f1f;
  --card:#ffffff;
  --fg:#0b1220;
  --muted:#a7b0c0;
  --ring:#e5e7eb;
  --accent:#22d3ee;
  --accent-2:#60a5fa;
}

*{box-sizing:border-box}
html,body{min-height:100%}
html,body{overflow-x:hidden}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(1200px 600px at 50% -200px,#0b1735 0%,#0b1220 40%,#0a0f1f 100%);
  color:#e5e7eb;
}

/* --- layout --- */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:40px 0}
h1,h2,h3{color:#fff;margin:0 0 8px}
.muted{color:var(--muted)}
.center{text-align:center}

/* helpers */
.stack{display:grid;gap:16px}
.narrow{max-width:980px;margin:0 auto}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* --- top nav --- */
nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(10,15,31,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 15px 40px rgba(15,23,42,.85);
}
nav .container{display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff;font-weight:700}
nav .brand svg{filter:drop-shadow(0 0 14px rgba(96,165,250,.55));}

.nav-links a{
  color:#cfd6e3;
  text-decoration:none;
  margin-left:16px;
  position:relative;
}
.nav-links a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#22d3ee,#60a5fa);
  transition:width .18s ease;
}
.nav-links a:not(.btn):hover::after{
  width:100%;
}
.nav-links .btn{margin-left:16px}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 16px;border:0;border-radius:12px;font-weight:700;
  cursor:pointer;text-decoration:none;
  transition:transform .08s ease,opacity .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(2,6,23,.25)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.btn.primary{
  position:relative;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0a0f1f;
  box-shadow:0 10px 30px rgba(37,99,235,.45);
  overflow:hidden;
}
.btn.primary::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 0 0, rgba(255,255,255,.45), transparent 55%);
  opacity:0;
  transform:translate3d(-40%, 40%, 0);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.btn.primary:hover::before{
  opacity:.9;
  transform:translate3d(10%, -10%, 0);
}
.btn.primary:hover{
  box-shadow:0 18px 40px rgba(37,99,235,.60);
}

.btn.secondary{background:#1e293b;color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.15);color:#e5e7eb}
.btn.sm{padding:8px 12px;border-radius:10px;font-weight:600}
.btn + .btn{margin-left:10px}

/* --- hero --- */
.hero .wrap{display:grid;gap:16px;grid-template-columns:1.1fr .9fr}
.hero .card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.12);color:#e5e7eb;font-size:12px}

header.hero {
  padding: 56px 0 40px;
}

header.hero .wrap {
  align-items: stretch;
}

header.hero .card {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(18px);
  background: rgba(15,23,42,.82);
  border: 1px solid rgba(148, 163, 184, .25);
  box-shadow: 0 24px 60px rgba(15,23,42,.55);
}

header.hero .wrap > .card:first-child::before {
  content: "";
  position: absolute;
  inset: -40% 10% auto auto;
  background: radial-gradient(circle at top right,
              rgba(96,165,250,.55),
              rgba(56,189,248,0) 60%);
  opacity: .7;
  pointer-events: none;
}

header.hero .wrap > .card {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

header.hero .wrap > .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 80px rgba(15,23,42,.70);
  border-color: rgba(96,165,250,.55);
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(148,163,184,.16);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.feature .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-top: 5px;
  background: radial-gradient(circle, #a5b4fc 0, #60a5fa 40%, #22d3ee 100%);
  box-shadow: 0 0 0 4px rgba(37,99,235,.25);
}

.feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,.65);
  border-color: rgba(96,165,250,.55);
}

/* ===== DEMO-IFRAME ===== */

#iframe-demo {
  display:block;
  width:100%;
}

#iframe-demo.narrow,
#demo .narrow {
  display:block;
  width:100%;
  max-width: 980px;
  margin: 0 auto;
}

#iframe-demo .iframe-wrapper {
  display:block;
  width:100%;
  max-width:960px;
  margin:20px auto;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:16px;
  box-shadow:0 16px 50px rgba(2,6,23,.25);
  overflow:hidden;
  height:clamp(620px, 82vh, 960px);
  overscroll-behavior:contain;
}

#iframe-demo .iframe-wrapper iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* --- cards & grid --- */
.card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:18px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr 1fr}

/* --- forms --- */
form input,
#login-card input,
#account-card input,
#panel input[type="file"]{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.15);
  background:#0f172a;
  color:#e5e7eb;
  border-radius:12px;
  font-size:16px;
}

form input::placeholder,
#account-card input::placeholder{
  color:#8ea0b5;
}

form input:focus,
#account-card input:focus{
  outline:0;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.25);
}

#signup button[type="submit"]{width:100%}
#signup .btn.ghost{display:block;margin-top:12px;text-align:center}

/* --- success.html preview --- */
.preview-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:18px}
.preview-box{
  overscroll-behavior:contain;
  max-width:960px;
  margin:10px auto 0;
  height:clamp(460px,68vh,760px);
  border:1px solid var(--ring);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 40px rgba(2,6,23,.22);
}

/* banners */
.banner{border-radius:12px;padding:10px 14px;margin-top:10px}
.banner.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.banner.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.small{font-size:12px;color:var(--muted)}

/* status helpers */
.status-info{color:var(--muted)}
.status-ok{color:#34d399}
.status-error{color:#fca5a5}

/* --- admin doc list --- */
#doc-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.doc-item{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(15,23,42,.65);flex-wrap:wrap}
.doc-meta{flex:1;min-width:200px}
.doc-meta strong{display:block;font-size:16px;color:#fff}
.doc-meta .meta-line{margin-top:4px;font-size:12px;color:var(--muted)}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;margin-top:10px}
.status-pill.ok{background:rgba(34,197,94,.15);color:#34d399}
.status-pill.pending{background:rgba(249,115,22,.15);color:#fb923c}
.doc-actions{display:flex;gap:8px;flex-wrap:wrap}

.upload-area{
  margin-top:16px;
  display:grid;
  gap:12px;
  align-items:flex-start;
}

/* --- footer --- */
footer{border-top:1px solid rgba(255,255,255,.06);margin-top:40px}
footer .container{padding:14px 20px;color:#a7b0c0;text-align:center}

/* --- responsive --- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  #iframe-demo .iframe-wrapper{height:82vh;width:100%}
  .grid-2{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .btn,.card{transition:none}
  body::before{animation:none;}
}

html { overflow-y: scroll; }
body { overflow-x: hidden; }

pre, code { 
  white-space: pre-wrap;
  word-break: break-word;
}

input[type="text"], textarea {
  min-width: 0;
}

.snippet-field {
  width: 100%;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.4;
  background: #0b1220;
  color: #e2e8f0;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px 14px;
  white-space: nowrap;
  overflow-x: auto;
}

.codebox {
  background: #0b1220;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 12px;
}

.widget-frame {
  width: 100%;
  max-width: 100%;
  display: block;
  border: 0;
  margin-inline: auto;
  height: min(70vh, 700px);
}

#iframe-demo .iframe-wrapper { overscroll-behavior: contain; }
#iframe-demo .iframe-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----- Pricing ----- */
#pricing { padding: 40px 0; }
.pricing-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  margin-top: 16px;
}

.plan{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  box-shadow: 0 10px 32px rgba(2,6,23,.18);
  position:relative;
  overflow:hidden;
  transform:translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}
.plan::before{
  content:"";
  position:absolute;
  inset:-60% -60% auto auto;
  background:radial-gradient(circle at 100% 0, rgba(96,165,250,.45), transparent 60%);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.plan:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(15,23,42,.75);
  border-color:rgba(96,165,250,.55);
}
.plan:hover::before{
  opacity:.9;
}

.plan--active{
  border-color: rgba(96,165,250,.45);
  box-shadow: 0 14px 40px rgba(34,211,238,.25);
}
.plan--soon{
  opacity: .9;
}

.plan__header h3{
  margin: 0;
  font-size: 22px;
  color: #fff;
}
.plan__tagline{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.plan__price{
  margin: 12px 0;
  display: flex; align-items: baseline; gap: 6px;
  color: #fff;
}
.plan__amount{ font-size: 38px; font-weight: 800; }
.plan__currency{ font-weight: 700; }
.plan__period{ color: #cfd6e3; font-size: 14px; }

.plan__features{
  list-style: none;
  margin: 8px 0 0; padding: 0;
  display: grid; gap: 8px;
  color: #e5e7eb;
}
.plan__features li{
  display: flex; gap: 10px; align-items: flex-start;
  position: relative; padding-left: 20px;
}
.plan__features li::before{
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: #34d399; font-weight: 900;
}

.plan__cta{ margin-top: 14px; display: grid; gap: 8px; }

.badge.soon{
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #e5e7eb; font-size: 12px; font-weight: 700;
}

.terms-row {
  margin-top: 12px;
}
.terms-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted, #9ca3af);
  line-height: 1.4;
  flex-wrap: wrap;
}
.terms-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
}
.terms-label span {
  flex: 1 1 auto;
  display: inline;
}
.terms-label a {
  text-decoration: underline;
  color: #60a5fa;
}
.terms-label a:hover {
  text-decoration: none;
  color: #93c5fd;
}
@media (max-width: 480px) {
  .terms-label input[type="checkbox"] {
    transform: scale(1.2);
  }
}

body {
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: -200px -120px auto;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 0%, rgba(96,165,250,.35), transparent 60%),
    radial-gradient(circle at 90% 10%, rgba(56,189,248,.25), transparent 65%);
  opacity: 0.8;
  mix-blend-mode: screen;
  z-index: -1;
  animation: bg-float 22s ease-in-out infinite alternate;
}
@keyframes bg-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(0, 10px, 0) scale(1.03); }
  100% { transform: translate3d(0, -10px, 0) scale(1.02); }
}

:root{
  --fs-h1: clamp(28px, 2.4vw + 16px, 48px);
  --fs-h2: clamp(22px, 1.8vw + 14px, 32px);
  --fs-h3: clamp(18px, 1.2vw + 12px, 24px);
  --fs-body: clamp(15px, .35vw + 12px, 18px);
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
body{ font-size: var(--fs-body); }

@media (max-width: 980px){
  .container{ padding: 0 16px; }
}
@media (max-width: 600px){
  .container{ padding: 0 14px; }
}

@media (max-width: 820px){
  .nav-links{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
  .nav-links a{ margin-left:0; padding:8px 10px; }
}
@media (hover:none){
  .btn, .nav-links a{ padding-block: 12px; }
}

@media (max-width: 980px){
  header.hero{ padding: 40px 0 28px; }
  .hero .card{ padding: 16px; }
}
@media (max-width: 600px){
  .hero .wrap{ gap: 12px; }
  .badge{ font-size: 11px; }
}

@media (max-width: 640px){
  #iframe-demo .iframe-wrapper{
    height: min(70vh, 560px);
    border-radius: 12px;
  }
}

@media (max-width: 640px){
  .pricing-grid{ gap: 12px; }
  .plan{ padding: 16px; }
  .plan__amount{ font-size: 32px; }
}

@media (max-width: 560px){
  .actions{ gap: 10px; }
  .actions .btn{ flex: 1 1 auto; min-width: 44%; }
  #signup button[type="submit"]{ width: 100%; }
}

@media (max-width: 640px){
  .upload-area{ gap: 10px; }
  #panel input[type="file"]{ width: 100%; }
  #panel .actions .btn{ flex: 1 1 48%; }
}

img, iframe{ max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

@media (max-width: 640px){
  .pricing-grid{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .plan{
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
  }

  #pricing{ padding-inline: 12px; }

  #pricing h2, #pricing p{
    text-align: center;
  }
}

.lead{
  font-size: 1.2rem;
  line-height: 1.5;
  color: #f3f4f6;
  margin-top: 8px;
  margin-bottom: 10px;
}

header.hero .actions {
  margin-top: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

section {
  scroll-margin-top: 80px;
}

/* ========================================
   LAUNCHER-KNAPPAR (Testa demot + Feedback)
   ======================================== */

/* Bas-stil för båda launcher-knapparna */
#botjahl-launcher,
.feedback-toggle {
  position: fixed;
  bottom: 1.5rem;
  min-width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.55);
  z-index: 9999;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f9fafb;
}

/* Testa demot - höger, grön */
#botjahl-launcher {
  right: 1.5rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Feedback - vänster, blå */
.feedback-toggle {
  left: 1.5rem;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

/* Ikonen inuti båda knapparna */
#botjahl-launcher .bj-icon,
.feedback-toggle .bj-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.9);
  color: #f9fafb;
  font-size: 18px;
  flex-shrink: 0;
}

/* Text-label (döljs på mobil, visas på desktop) */
#botjahl-launcher .bj-label,
.feedback-toggle .bj-label {
  display: none;
  margin-left: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Desktop: visa text och gör knapparna "pill-shaped" */
@media (min-width: 768px) {
  #botjahl-launcher,
  .feedback-toggle {
    padding: 0 0.9rem 0 0.6rem;
    width: auto;
  }
  
  #botjahl-launcher .bj-label,
  .feedback-toggle .bj-label {
    display: inline;
  }
}

/* Hover-effekter */
#botjahl-launcher:hover,
.feedback-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
  filter: brightness(1.05);
}

#botjahl-launcher:active,
.feedback-toggle:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.7);
}

/* ========================================
   FEEDBACK PANEL
   ======================================== */

.feedback-widget {
  position: fixed;
  left: 1.5rem;
  bottom: 5.4rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feedback-panel {
  display: none;
  width: min(400px, 92vw);
  padding: 16px 18px;
  border-radius: 1.3rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.8);
}

.feedback-widget.open .feedback-panel {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 0.18s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback-panel label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 8px;
}

.feedback-panel textarea {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #020617;
  color: #e5e7eb;
  resize: vertical;
  min-height: 80px;
  font-size: 14px;
  padding: 10px 12px;
  font-family: inherit;
  line-height: 1.5;
}

.feedback-panel textarea:focus {
  outline: 0;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.feedback-panel textarea::placeholder {
  color: #64748b;
}

.feedback-bottom-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feedback-count {
  font-size: 12px;
  color: #94a3b8;
}

.feedback-panel .btn {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 0.75rem;
}

.feedback-status {
  margin-top: 8px;
  font-size: 13px;
  color: #94a3b8;
  min-height: 20px;
}

/* ========================================
   DEMO WIDGET POPUP (Testa demot)
   ======================================== */

#botjahl-widget {
  position: fixed;
  right: 1.5rem;
  bottom: 5.4rem;
  width: min(430px, 92vw);
  max-height: min(560px, 82vh);
  border-radius: 1.3rem;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.8);
  background: #020617;
  z-index: 9998;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Ny kod: Vi lägger till ID:t framför klassen för att höja prioriteten */
#botjahl-widget.botjahl-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.botjahl-hidden {
  display: none;
}

/* Stäng-knappen uppe i hörnet */

.botjahl-close {
position: absolute;
top: 0.55rem;
right: 0.55rem;
width: 30px;
height: 30px;
border-radius: 999px;
border: none;
background: rgba(15, 23, 42, 0.9);
color: #f9fafb;
font-size: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.7);
z-index: 2;
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.botjahl-close:hover {
background: rgba(248, 250, 252, 0.18);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(15,23,42,0.7);
}
/* Demo-widgetens innehåll */
#botjahl-widget #demo .container.stack {
padding: 0 0 8px;
}
#botjahl-widget #demo h2,
#botjahl-widget #demo p.muted {
padding: 12px 16px 0;
}
#botjahl-widget #iframe-demo .iframe-wrapper {
max-width: 100%;
margin: 8px 0 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
height: min(520px, 78vh);
}
#botjahl-widget #iframe-demo .iframe-wrapper iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* ========================================
MOBIL-ANPASSNINGAR
======================================== */
@media (max-width: 640px) {
/* Launcher-knappar på mobil */
#botjahl-launcher {
right: 0.75rem;
bottom: 0.75rem;
min-width: 56px;
height: 56px;
padding: 0;
}
.feedback-toggle {
left: 0.75rem;
bottom: 0.75rem;
min-width: 56px;
height: 56px;
padding: 0;
}
/* Dölj text, visa bara ikoner på mobil */
#botjahl-launcher .bj-label,
.feedback-toggle .bj-label {
display: none;
}
/* Feedback-panel på mobil */
.feedback-widget {
left: 0.75rem;
bottom: 4.8rem;
}
.feedback-panel {
width: min(380px, 92vw);
padding: 14px 16px;
}
/* Demo-widget på mobil */
#botjahl-widget {
right: 0.75rem;
left: 0.75rem;
bottom: 4.8rem;
width: auto;
max-height: min(500px, 78vh);
}
}
/* Extra små skärmar */
@media (max-width: 380px) {
#botjahl-launcher,
.feedback-toggle {
min-width: 50px;
height: 50px;
}
#botjahl-launcher .bj-icon,
.feedback-toggle .bj-icon {
width: 24px;
height: 24px;
font-size: 16px;
}
}