/* ============================================================
   Al-Birr — website chat assistant widget
   Uses the shared design tokens from styles.css where available,
   with fallbacks so this file also works on a page without them.
   ============================================================ */
.abc{
  --abc-ink:var(--ink,#0C1E33);
  --abc-gold:var(--gold,#B8912E);
  --abc-green:var(--green,#1E4034);
  --abc-cream:var(--cream,#F6F1E8);
  --abc-paper:var(--paper,#FCFAF5);
  --abc-line:var(--line,#E0D8C7);
  --abc-body:var(--body,#26313B);
  --abc-muted:var(--muted,#5C6873);
  --abc-sans:var(--sans,'Hanken Grotesk',system-ui,sans-serif);
  --abc-serif:var(--serif,'Newsreader',Georgia,serif);
  position:fixed; right:20px; bottom:20px; z-index:120;
  font-family:var(--abc-sans);
}

/* ---- launcher ---- */
.abc-launch{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--abc-ink); color:#fff; border:none; cursor:pointer;
  font-family:var(--abc-sans); font-size:15px; font-weight:600;
  padding:14px 20px; border-radius:999px;
  box-shadow:0 2px 6px rgba(12,30,51,.12), 0 14px 36px rgba(12,30,51,.22);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), background .2s;
}
.abc-launch:hover{ background:#12293F; transform:translateY(-2px) }
.abc-launch svg{ width:19px; height:19px; flex:none }
.abc[data-open="true"] .abc-launch{ display:none }

/* ---- panel ---- */
.abc-panel{
  display:none; flex-direction:column;
  width:min(390px, calc(100vw - 32px));
  height:min(580px, calc(100vh - 110px));
  background:var(--abc-paper);
  border:1px solid var(--abc-line); border-radius:16px;
  box-shadow:0 4px 12px rgba(12,30,51,.1), 0 30px 70px rgba(12,30,51,.26);
  overflow:hidden;
}
.abc[data-open="true"] .abc-panel{ display:flex; animation:abc-in .26s cubic-bezier(.2,.7,.2,1) }
@keyframes abc-in{ from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }

.abc-head{
  background:var(--abc-ink); color:#fff; padding:15px 16px;
  display:flex; align-items:center; gap:12px; flex:none;
}
.abc-head h2{
  font-family:var(--abc-serif); font-size:17px; font-weight:500;
  color:#fff; margin:0; letter-spacing:-.01em; line-height:1.25;
}
.abc-head p{ margin:2px 0 0; font-size:12px; color:rgba(233,239,245,.66); line-height:1.4 }
.abc-head .abc-ttl{ flex:1; min-width:0 }
.abc-x{
  background:transparent; border:none; color:rgba(233,239,245,.7); cursor:pointer;
  font-size:22px; line-height:1; padding:4px 6px; border-radius:7px; flex:none;
}
.abc-x:hover{ color:#fff; background:rgba(255,255,255,.1) }

.abc-log{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px }
.abc-msg{ max-width:88%; font-size:14.5px; line-height:1.58; white-space:pre-wrap; overflow-wrap:anywhere }
.abc-msg.you{
  align-self:flex-end; background:var(--abc-ink); color:#fff;
  padding:10px 14px; border-radius:14px 14px 4px 14px;
}
.abc-msg.bot{
  align-self:flex-start; background:#fff; color:var(--abc-body);
  border:1px solid var(--abc-line); padding:11px 14px; border-radius:14px 14px 14px 4px;
}
.abc-msg.err{ background:rgba(180,85,47,.08); border-color:rgba(180,85,47,.3); color:#8a3f22 }
.abc-msg a{ color:var(--abc-gold); text-decoration:underline; text-underline-offset:2px }

.abc-sugg{ display:flex; flex-wrap:wrap; gap:7px; margin-top:4px }
.abc-sugg button{
  font-family:var(--abc-sans); font-size:13px; color:var(--abc-ink);
  background:#fff; border:1px solid var(--abc-line); border-radius:999px;
  padding:7px 13px; cursor:pointer; transition:.18s; text-align:left;
}
.abc-sugg button:hover{ border-color:var(--abc-gold); color:var(--abc-gold) }

.abc-dots{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px }
.abc-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--abc-muted);
  animation:abc-bob 1.2s infinite ease-in-out;
}
.abc-dots i:nth-child(2){ animation-delay:.15s }
.abc-dots i:nth-child(3){ animation-delay:.3s }
@keyframes abc-bob{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

.abc-foot{ flex:none; border-top:1px solid var(--abc-line); background:var(--abc-paper); padding:11px 12px 9px }
.abc-form{ display:flex; gap:8px; align-items:flex-end }
.abc-form textarea{
  flex:1; font-family:var(--abc-sans); font-size:14.5px; color:var(--abc-body);
  background:#fff; border:1px solid var(--abc-line); border-radius:11px;
  padding:10px 12px; resize:none; line-height:1.5; max-height:110px;
}
.abc-form textarea:focus-visible{ outline:2px solid var(--abc-gold); outline-offset:1px }
.abc-send{
  background:var(--abc-gold); color:#fff; border:none; cursor:pointer; flex:none;
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center; transition:.2s;
}
.abc-send:hover:not(:disabled){ background:#a67f24 }
.abc-send:disabled{ opacity:.4; cursor:not-allowed }
.abc-send svg{ width:17px; height:17px }

/* Phones. The panel is sized by insetting its container left and right rather
   than by calc(100vw - 24px): 100vw counts the scrollbar gutter on some
   browsers, so the panel came out a few pixels wider than the screen and sat
   off-centre. Insetting measures the real visible width instead.
   .abc stretches edge to edge here, so it must not swallow taps meant for the
   page behind it; only its children take pointer events. */
@media (max-width:560px){
  .abc{ left:12px; right:12px; bottom:12px; display:flex; justify-content:flex-end; pointer-events:none }
  .abc > *{ pointer-events:auto }
  /* max-width keeps the 390px cap this block used to get from
     min(390px, ...). Without it the panel ran to 536px at 560px wide. */
  .abc-panel{ width:100%; max-width:390px; height:min(76vh, calc(100vh - 90px)) }
  /* The pill floats over the page, so on a phone it was covering more than
     a third of the width. Smaller, still a comfortable tap target. */
  .abc-launch{ padding:13px 16px; font-size:14px; gap:8px }
  .abc-launch svg{ width:17px; height:17px }
}
/* 100vh on a phone includes the strip under the browser toolbar, which pushed
   the message box below the fold. dvh follows the visible viewport. */
@supports (height:100dvh){
  .abc-panel{ height:min(580px, calc(100dvh - 110px)) }
  @media (max-width:560px){
    .abc-panel{ height:min(76dvh, calc(100dvh - 90px)) }
  }
}
@media (prefers-reduced-motion:reduce){
  .abc[data-open="true"] .abc-panel{ animation:none }
  .abc-dots i{ animation:none; opacity:.5 }
  .abc-launch:hover{ transform:none }
}

/* ---- who is asking -------------------------------------------------------
   Shown inside the conversation after the first answer, not as a gate in front
   of it. The question already asked is held and sent once this is filled in. */
.abc-who{
  align-self:stretch; margin:4px 0 2px; padding:14px 16px;
  background:var(--abc-cream,#F6F1E8); border:1px solid var(--abc-line,#E0D8C7);
  border-radius:14px;
}
.abc-who p{margin:0 0 10px; font-size:14px; line-height:1.5; color:var(--abc-ink,#0C1E33)}
.abc-who label{display:block; font-size:12px; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:var(--abc-muted,#5C6873); margin:0 0 4px}
.abc-who input{
  width:100%; font:inherit; font-size:15px; padding:9px 11px; margin:0 0 10px;
  border:1px solid var(--abc-line,#E0D8C7); border-radius:9px;
  background:#fff; color:var(--abc-ink,#0C1E33);
}
.abc-who input[aria-invalid="true"]{border-color:#9A3B22; box-shadow:0 0 0 1px #9A3B22}
.abc-who button{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  padding:9px 18px; border-radius:9px; border:1px solid var(--abc-ink,#0C1E33);
  background:var(--abc-ink,#0C1E33); color:#fff;
}
.abc-who-note{margin:10px 0 0!important; font-size:12px; color:var(--abc-muted,#5C6873)}