/* =====================================================================
   IT Licious · calculator-chat widget
   Port of the Only Good Vibes chat panel (website-onlygoodvibes,
   local_run/calculator-chat-widget.css) on the IT Licious design tokens
   from style.css (--itl-*). Loaded only on pages that carry a
   [data-calculator-chat-trigger] CTA; assets/js/calculator-chat.js builds
   the DOM. Same behaviour: slides up bottom-right like a normal chat panel,
   the rest of the page stays clickable, the close button minimizes to a
   bubble. Offset 90px from the bottom to clear the iubenda cookie button.
   ===================================================================== */

.itl-chat-backdrop{
  position:fixed; inset:0; z-index:9999;
  /* Never captures clicks: only the panel itself is interactive. */
  background:transparent; pointer-events:none;
  font-family:var(--itl-font-body);
}

.itl-chat-modal{
  position:fixed; right:20px; bottom:90px;
  width:380px; max-width:calc(100vw - 40px);
  height:560px; max-height:calc(100vh - 120px);
  background:var(--itl-surface); border:1px solid var(--itl-line); border-radius:var(--itl-r-lg);
  box-shadow:var(--itl-shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(16px); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
  pointer-events:auto;
}
.itl-chat-backdrop--open .itl-chat-modal{transform:translateY(0); opacity:1}

@media(max-width:480px){
  .itl-chat-modal{right:10px; left:10px; bottom:10px; width:auto; height:70vh; max-height:70vh}
}

/* Bubble shown after minimizing, same corner as the panel. */
.itl-chat-fab{
  position:fixed; right:20px; bottom:90px; z-index:9999;
  width:56px; height:56px; border-radius:var(--itl-r-pill); border:none;
  background:var(--itl-orange); color:var(--itl-white);
  box-shadow:var(--itl-shadow-lg);
  font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.itl-chat-fab:hover{background:var(--itl-orange-deep); transform:scale(1.06)}
/* display:flex would otherwise beat the UA [hidden] rule. */
.itl-chat-fab[hidden]{display:none}

.itl-chat-header{
  background:var(--itl-ink); color:var(--itl-white);
  padding:16px 18px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--itl-font-display); font-weight:700; font-size:16px; letter-spacing:.02em;
}
.itl-chat-header-title{display:flex; align-items:baseline; gap:10px}
.itl-chat-progress{font-family:var(--itl-font-body); font-weight:500; font-size:12px; color:rgba(255,255,255,.6)}
.itl-chat-close{background:none; border:none; color:var(--itl-white); font-size:18px; cursor:pointer; line-height:1; padding:4px}

.itl-chat-messages{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--itl-surface-2)}

.itl-chat-bubble{max-width:82%; padding:10px 14px; border-radius:var(--itl-r-md); font-size:14px; line-height:1.5; white-space:pre-wrap}
.itl-chat-bubble--user{align-self:flex-end; background:var(--itl-sky); color:var(--itl-white); border-bottom-right-radius:3px}
.itl-chat-bubble--assistant{align-self:flex-start; background:var(--itl-white); color:var(--itl-ink); border:1px solid var(--itl-line); border-bottom-left-radius:3px}
.itl-chat-typing{opacity:.6; font-style:italic}
.itl-chat-done{align-self:center; font-size:12px; color:#1D7A46; font-weight:600; margin-top:4px}

.itl-chat-form{display:flex; align-items:flex-end; border-top:1px solid var(--itl-line); padding:10px; gap:8px; background:var(--itl-white)}
.itl-chat-input{
  flex:1; min-width:0; border:1.5px solid var(--itl-line); border-radius:var(--itl-r-lg);
  padding:9px 16px; font-size:14px; line-height:1.45; font-family:inherit;
  background:var(--itl-surface-2); color:var(--itl-ink);
  /* Auto-growing textarea: JS sets the height from scrollHeight; CSS caps it. */
  resize:none; overflow-y:auto; max-height:140px; box-sizing:border-box;
}
.itl-chat-input:focus{outline:none; border-color:var(--itl-sky); background:var(--itl-white)}
.itl-chat-send{
  border:none; background:var(--itl-orange); color:var(--itl-white);
  border-radius:var(--itl-r-pill); padding:9px 18px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .15s ease;
}
.itl-chat-send:hover{background:var(--itl-orange-deep)}
.itl-chat-send:disabled,.itl-chat-input:disabled{opacity:.6; cursor:not-allowed}

/* Inline mode (landing page): the panel sits in the page flow inside
   [data-calculator-chat-inline], full width of its container, always open. */
.itl-chat-modal--inline{position:static; width:100%; max-width:none; height:600px; max-height:none; transform:none; opacity:1}
@media(max-width:480px){.itl-chat-modal--inline{height:540px; max-height:none}}