/* =========================================================
   BeatWeb Chatbot – Clean CSS (desktop card, mobile fullscreen)
   ========================================================= */

/* --- Design tokens (dark) --- */
:root{
  --bwcb-font: inherit;
  --bwcb-text:#e5e7eb;
  --bwcb-accent:#93c5fd;
  --bwcb-bg:#0b1020;

  --bwcb-panel:#0b1020;
  --bwcb-border:#1f2937;
  --bwcb-shadow:0 16px 44px rgba(0,0,0,.45);

  --bwcb-user-bg:#122242;
  --bwcb-bot-bg:#0f172a;

  --bwcb-input-bg:#0a0f1d;
  --bwcb-link: var(--bwcb-accent);
}

/* Prevent sideways scroll */
html, body { max-width:100%; overflow-x:hidden; }

/* ===== Launcher ================================================= */
#bwcb-launcher{
  position: fixed !important;
  right: calc(env(safe-area-inset-right, 0) + 20px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
  height: 48px;
  display: inline-flex; align-items:center; gap:8px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--bwcb-panel); color:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  cursor: pointer; z-index: 2147483600;
}
#bwcb-launcher:hover{ filter:brightness(1.05); }
#bwcb-launcher .bwcb-ava{ width:20px; height:20px; object-fit:contain; display:block; }
#bwcb-launcher .bwcb-launcher-label{ font:inherit; line-height:1; }


#bwcb-close {

padding: 9px 10px !important;
    background: transparent;
    border: none;

}
/* ===== Wrapper (default closed) ================================= */
#bwcb-wrapper{ display:none !important; }
#bwcb-wrapper.is-open{ display:flex !important; flex-direction:column; }

/* ===================== DESKTOP (≥769px) ========================= */
@media (min-width:769px){
  /* Lås aldrig sidan på desktop */
  html.bwcb-open, body.bwcb-open{
    overflow:auto !important; position:static !important; height:auto !important; width:auto !important;
  }

  /* Kort i hörnet */
  #bwcb-wrapper.is-open{
    position:fixed !important; right:20px !important; bottom:80px !important;
    width:380px !important; max-width:90vw !important;
    font-family: var(--bwcb-font);
    background:var(--bwcb-panel); color:var(--bwcb-text);
    border:1px solid var(--bwcb-border); border-radius:18px;
    box-shadow: var(--bwcb-shadow);
    overflow:hidden !important; z-index:2147483600;
  }

  /* Header (statisk) */
  .bwcb-header{
    background:var(--bwcb-panel); color:var(--bwcb-text);
    padding:10px 12px; border-bottom:1px solid var(--bwcb-border);
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
  }

  /* ENDA skrollcontainern: meddelandelistan */
  #bwcb-messages{
    background:#0a0f1d;
    height:420px !important;          /* fast innerhöjd => skrollbar */
    min-height:0 !important;
    padding:14px;
    overflow-y:auto !important; overscroll-behavior:contain !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;   /* toppankra */
  }

  /* Quick & form under listan */
  #bwcb-quick{
    display:flex; flex-wrap:wrap; gap:10px;
    padding:0!important; border-top:1px solid var(--bwcb-border); background:transparent;
  }
  #bwcb-form{
    background:var(--bwcb-panel); border-top:1px solid var(--bwcb-border);
    padding:10px; display:grid; grid-template-columns:1fr 36px; gap:8px;
  }
      #bwcb-quick{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;                 /* <-- mellanrum mellan knappar */
    padding: 10px 12px!important;
    border-top: 1px solid var(--bwcb-border);
    background: transparent;
    flex: 0 0 auto;
  }
  .bwcb-quick{
    padding:10px 12px !important; 
    font-size: 12px!important;
      justify-content: center;   /* <-- centrera raderna/knapparna */
  align-items: center;
  }
}

/* ===================== MOBILE (≤768px) ========================== */
@media (max-width:768px){
  /* Lås bakgrunden enbart på mobil */
  body.bwcb-open{ overflow:hidden !important; }
      #bwcb-quick{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;                 /* <-- mellanrum mellan knappar */
    padding: 10px 12px!important;
    border-top: 1px solid var(--bwcb-border);
    background: transparent;
    flex: 0 0 auto;
  }
  .bwcb-quick{
    padding:10px 12px !important; 
    font-size: 12px!important;
      justify-content: center;   /* <-- centrera raderna/knapparna */
    align-items: center;
  }
  #bwcb-launcher{
    right: calc(env(safe-area-inset-right, 0) + 16px);
    bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
  }

  /* Fullscreen wrapper (ingen egen scroll) */
  #bwcb-wrapper.is-open{
    position:fixed !important; inset:0 !important;
    width:100vw !important; max-width:100vw !important;
    height:100dvh !important; height:calc(var(--vh,1vh) * 100) !important; /* JS uppdaterar --vh */
    display:flex !important; flex-direction:column !important;
    background:var(--bwcb-panel); color:var(--bwcb-text);
    border:0; border-radius:0; box-shadow:none;
    overflow:hidden !important; overscroll-behavior:contain !important;
    z-index:2147483600 !important;
  }

  /* Header/Quick/Form tar egen höjd */
  .bwcb-header{
    background:var(--bwcb-panel); color:var(--bwcb-text);
    padding:16px 12px; border-bottom:1px solid var(--bwcb-border);
    display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
    position:static !important;
  }

  .bwcb-kb-open #bwcb-quick{ display:none !important; }

  #bwcb-form{
    background:var(--bwcb-panel); border-top:1px solid var(--bwcb-border);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    display:grid; grid-template-columns:1fr 36px; gap:8px;
    flex:0 0 auto !important;
  }

  /* ENDA skrollcontainern: meddelandelistan fyller allt mellan header/quick/form */
  #bwcb-messages{
    background:#0a0f1d;
    flex:1 1 0% !important; min-height:0 !important; max-height:none !important; height:auto !important;
    padding:14px; margin:0;
    overflow-y:auto !important; overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;   /* toppankra */
  }
}

/* ===== Inputs / buttons (gemensamt) ============================ */
#bwcb-input{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--bwcb-border); border-radius:14px;
  background: var(--bwcb-input-bg); color: var(--bwcb-text);
  padding:10px 12px; min-height:40px; max-height:36vh; line-height:1.3;
  resize:none; overflow:hidden; box-shadow:none;
}
#bwcb-input::placeholder{ color:#64748b; }
#bwcb-input:disabled{ background:#0e172a; color:#94a3b8; cursor:not-allowed; }
#bwcb-input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15) inset; }
#bwcb-input::-webkit-resizer{ display:none; }

#bwcb-send{
  appearance:none; -webkit-appearance:none;
  width:36px; height:36px; border-radius:9999px;
  border:none; background:none; padding:0 !important;
  color:#fff; display:grid; place-items:center;
  cursor:pointer; box-shadow:none; font-size:0;
  transition:transform .06s ease, filter .15s ease, opacity .15s ease;
}
#bwcb-send::before{ content:"➤"; font-size:15px; transform:translateX(1px); }
#bwcb-send:hover{ filter:brightness(1.05); }
#bwcb-send:active{ transform:translateY(1px); }
#bwcb-send:disabled{ opacity:.55; cursor:not-allowed; }
#bwcb-send:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }

/* ===== Bubbles ================================================== */
#bwcb-messages .bwcb-msg{
  max-width:88%; margin:8px 0; padding:10px 12px; border-radius:16px;
  word-wrap:break-word; overflow-wrap:anywhere; line-height:1.45;

  /* VIKTIGT: låt bubblor inte krympa => möjliggör overflow i listan */
  flex: 0 0 auto !important;
}
#bwcb-messages .bwcb-msg.user{ margin-left:auto; background:var(--bwcb-user-bg); }
#bwcb-messages .bwcb-msg.bot{ position:relative; margin-left:36px; background:var(--bwcb-bot-bg); }
#bwcb-messages .bwcb-ava-small{
  position:absolute; left:-36px; top:2px; width:28px; height:28px; border-radius:50%; object-fit:contain;
}
#bwcb-messages a{ color: var(--bwcb-link); text-decoration:underline; }
#bwcb-messages a:hover{ text-decoration:none; }
#bwcb-messages .bwcb-msg.bot.typing{ color:#94a3b8; font-style:italic; }

/* ===== Scrollbar (WebKit) ====================================== */
#bwcb-messages::-webkit-scrollbar{ width:10px; }
#bwcb-messages::-webkit-scrollbar-thumb{ background:#1f2937; border-radius:10px; }
#bwcb-messages::-webkit-scrollbar-thumb:hover{ background:#263241; }

/* === OVERRIDE: Visa quick-knappar alltid på mobil, även med keyboard === */
@media (max-width:768px){
  .bwcb-kb-open #bwcb-quick{ display:flex !important; }
}
/* Keep quick buttons visible even when keyboard is open */
@media (max-width:768px){
  .bwcb-kb-open #bwcb-quick{ 
    display: flex !important; 
  }
}