/* ===== Lebowski ChatBot — scoped, centered, circular send button ===== */

:root{
  --bg:#000;
  --fg:#e6e8ea;
  --fg-muted:#8a8f96;
  --accent:#7aa2ff;

  --fs: clamp(16px, 1.8vw, 19px);
  --fs-chat: clamp(18px, 2.1vw, 24px);
  --lh:1.6;
  --maxw: 860px;

  --composer-h: clamp(64px, 12vh, 112px);
  --kb-offset: 0px;                 /* sätts av JS via visualViewport */
  --pad-x: max(16px, 5vw);

  --bg-img: none;
}

/* Reset INSIDE the widget only (tema lämnas i fred) */
.lebowski-chat-container, .lebowski-chat-container * {
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Wrapper – INLINE (inte fixed), centrerad */
.lebowski-chat-container{
  position: relative;
  background: var(--bg);
  color: var(--fg);
  display:flex; flex-direction:column;
  line-height: var(--lh);

  width: min(var(--maxw), 100%);
  margin: 40px auto;                /* centrerad */
  border-radius: 28px;
  overflow: clip;
  box-shadow: 0 12px 50px rgba(0,0,0,.55);
  min-height: min(80vh, 900px);
}

/* Subtil mörk bakgrund */
.lebowski-chat-container::before{
  content:"";
  position: absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 80% 20%, rgba(70,90,130,.12), transparent 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(130,90,170,.10), transparent 55%),
    var(--bg);
  z-index: 0;
}
.lebowski-chat-container::after{
  content:"";
  position: absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.65) 100%),
    var(--bg-img) center/cover no-repeat;
  opacity:.35;
  z-index:1;
}

/* Scrollområde – tar höjd för composer + tangentbord */
.lebowski-chat-container .chat-scroll{
  position: relative;
  z-index:2;
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  padding:
    max(32px, 6vh)
    var(--pad-x)
    calc(var(--composer-h) + var(--kb-offset) + max(12px, 1.6vh));
  scroll-padding-bottom: calc(var(--composer-h) + var(--kb-offset) + 24px);
  scroll-padding-top: 16px;
}
.lebowski-chat-container .chat-log{
  width:min(var(--maxw), 100%);
  margin:0 auto;
  font-size: var(--fs-chat);
  text-align: left;
}

/* Composer – pill */
.lebowski-chat-container .composer{
  position: sticky; left:0; right:0; bottom:0;
  z-index:3;
  padding: max(10px, 1.2vh) var(--pad-x) 14px;
  background: transparent;
}
.lebowski-chat-container .composer-inner{
  position: relative;
  width:min(var(--maxw), 100%);
  margin:0 auto;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  padding: 14px 66px 14px 18px; /* plats för knappen till höger */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 6px 24px rgba(0,0,0,.25);
}

/* Contenteditable input */
.lebowski-chat-container .center-input{
  display:block;
  min-height: 1.5em;
  color:#fff;
  background:none; border:none; outline:none; box-shadow:none;
  white-space:pre-wrap; word-break:break-word;
  text-align:left;
  caret-color:#fff;
  -webkit-appearance:none; -webkit-tap-highlight-color:transparent;
  font-size: var(--fs-chat);
}
@keyframes lbw-caret-blink{ 50%{opacity:0} }
.lebowski-chat-container .center-input:empty{ caret-color: transparent; }
.lebowski-chat-container .center-input:empty::before{
  content:""; display:inline-block; width:2px; height:1em; margin-right:6px;
  background:#fff; animation: lbw-caret-blink 1s steps(1) infinite; vertical-align:-0.12em;
}
.lebowski-chat-container .center-input:empty::after{
  content:"Fråga vad som helst";
  color: var(--fg-muted);
}

/* *** SEND-BUTTON — 100% cirkel, oberoende av tema *** */
.lebowski-chat-container .send-btn{
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;      /* lika width/height */
  border-radius: 50%;             /* cirkel */
  background: #fff !important;
  color: #000 !important;
  border: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;                     /* ingen inre padding */
  line-height: 1;                 /* ingen extra höjd */
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.lebowski-chat-container .send-btn:hover{ transform: translateY(calc(-50% - 1px)); }
.lebowski-chat-container .send-btn:active{ transform: translateY(-50%); }
.lebowski-chat-container .send-btn:disabled{
  opacity:.45; cursor: default; transform: translateY(-50%); box-shadow:none;
}

/* Messages */
.lebowski-chat-container .msg{ margin: 0 0 .8em; padding: 0; border: 0; background: none; }
.lebowski-chat-container .user{
  display:inline-block;
  max-width: 78%;
  margin-left: auto;
  color:#fff; font-weight:600; letter-spacing:.01em;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 14px;
  border-radius: 22px;
}
.lebowski-chat-container .bot{ color:#e8ebef; font-weight:400; }

@keyframes fadeUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.lebowski-chat-container .msg{ opacity:0; animation: fadeUp .18s ease-out forwards; }

/* Links in bot text */
.lebowski-chat-container .msg.bot a{
  color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(122,162,255,.35);
}
.lebowski-chat-container .msg.bot a:hover{ border-bottom-color: currentColor; }