/* ProBot Assistant — UI (mobile-first)
   Scroll model: overlay/panel never scroll; ONLY #probot-chat-scroll scrolls
*/
:root{
  /* Brand & halo */
  --brand:#444;                      /* chat bubble background */
  --halo-color:rgba(255,255,255,.7); /* halo ring color (alpha set by JS when intensity changes) */

  /* Z layer for bubble/overlay */
  --z-button:2147483647;

  /* Bubble geometry */
  --bubble-size:60px;
  --bubble-gap:20px;

  /* keyboard/inputbar (set by JS) */
  --kb:0px;
  --ib:62px;

  /* cushion under input bar (used in height calc) */
  --kb-gap:5px;

  /* Teaser positioning (CSS-only knob; JS reads/places) */
  --teaser-gap-x:10px; /* bigger = further horizontally from bubble */
  --teaser-gap-y:-6px; /* positive = down, negative = up */
  --teaser-ax:0px;     /* JS anchor (do not edit) */
  --teaser-ay:0px;

  /* Optional absolute overrides (leave blank to ignore) */
  --teaser-left-override:  ;
  --teaser-top-override:   ;

  /* Teaser colors (overridden by JS if set in Settings) */
  --teaser-bg: rgba(18,18,18,.92);
  --teaser-fg: #ffffff;

  /* Pulse knobs (JS can adjust based on “intensity”) */
  --pulse-period: 2s;    /* animation duration; lower = faster */
  --pulse-spread: 28px;  /* halo ring size at peak */
  --pulse-scale:  0.03;  /* bubble scale amount at peak */

  /* Icon buttons (close/minimize) — overridable by Settings */
  --icon-btn-bg:#fff;
  --icon-btn-color:#111;
  --icon-btn-bg-hover:#f7f7f7;
  --icon-btn-border-width:0px;              /* 0 to hide border */
  --icon-btn-border-style:solid;
  --icon-btn-border-color:#d0d0d0;

  /* Send button — overridable by Settings */
  --send-bg:#fff;
  --send-color:#000;
  --send-bg-hover:#f7f7f7;
  --send-border-width:1px;
  --send-border-style:solid;
  --send-border-color:#d0d0d0;
}

*{ box-sizing:border-box; }

/* Lock page when panel is open */
body.probot-locked{ touch-action:none; overscroll-behavior:none; }

/* ---------------- Trigger bubble (chat icon) ---------------- */
#probot-chat-button{
  position:fixed;
  bottom:var(--bubble-gap);
  width:var(--bubble-size); height:var(--bubble-size);
  border-radius:50%;
  background:var(--brand);
  color:#fff !important;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; cursor:pointer;
  box-shadow:
    0 4px 10px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
  z-index:var(--z-button);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  outline:none;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
#probot-chat-button *{ color:#fff !important; }
#probot-chat-button[right]{ right:var(--bubble-gap); }
#probot-chat-button[left]{  left:var(--bubble-gap); }

/* micro interaction on hover/active (desktop nicety) */
@media (hover:hover){
  #probot-chat-button:hover{
    transform: translateY(-1px);
    box-shadow:
      0 6px 14px rgba(0,0,0,.25),
      inset 0 0 0 1px rgba(255,255,255,.1);
  }
}
#probot-chat-button:active{ transform: translateY(1px) scale(.98); }

/* Ensure no state ever tints it */
#probot-chat-button:hover,
#probot-chat-button:active,
#probot-chat-button:focus{
  background:var(--brand);
  color:#fff !important;
  outline:none;
}

/* Pulse halo + bubble scale (driven by CSS vars; JS updates vars) */
#probot-chat-button.pbot-pulse{
  animation:
    probot-pulse var(--pulse-period) infinite,
    probot-bubble-scale var(--pulse-period) infinite;
}
/* >>> Stronger/bolder halo: added soft glow layer that fades with the ring <<< */
@keyframes probot-pulse{
  0%{
    box-shadow:
      0 0 0 0 var(--halo-color),            /* expanding ring */
      0 0 14px 0 var(--halo-color),         /* soft glow to make halo look bold */
      0 4px 10px rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  70%{
    box-shadow:
      0 0 0 var(--pulse-spread) rgba(0,0,0,0), /* ring fades out */
      0 0 6px 4px rgba(0,0,0,0),               /* glow fades out */
      0 4px 10px rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(0,0,0,0),
      0 0 0 0 rgba(0,0,0,0),
      0 4px 10px rgba(0,0,0,.22),
      inset 0 0 0 1px rgba(255,255,255,.08);
  }
}
@keyframes probot-bubble-scale{
  0%,100% { transform: none; }
  40%     { transform: scale(calc(1 + var(--pulse-scale))); }
}

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

/* ---------------- Overlay + Panel (NEVER scroll) ---------------- */
#probot-chat-overlay{
  position:fixed; inset:0; z-index:var(--z-button);
  height:100dvh; overflow:hidden; overscroll-behavior:contain;
}
#probot-chat-mask{ position:absolute; inset:0; background:rgba(0,0,0,.32); }

/* MOBILE: full-bleed panel (no rounded corners, no shadow) */
#probot-chat-panel{
  position:fixed; inset:0; background:#fff;
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden;
  border-radius:0;
  box-shadow:none;
}

/* Header */
#probot-topbar{
  position:sticky; top:0; z-index:1;
  display:flex; justify-content:space-between;
  align-items:flex-start;          /* children can control their own vertical align */
  padding:12px 14px; background:#fff; border-bottom:1px solid #eee;
  position:sticky;
}

/* Title */
.probot-topbar-title{ font-weight:700; display:flex; align-items:center; gap:10px; }
.bot-avatar{ font-size:20px; }

/* Actions pinned bottom-right (pure CSS seatbelt) */
.probot-actions{
  display:flex; gap:10px;
  position:absolute;  /* pin within topbar */
  right:14px;
  bottom:6px;         /* adjust this to move closer/further from bottom edge */
}

/* Close/Minimize Buttons: borderless, subtle hover (overridable via vars) */
.probot-icon-btn{
  width:36px; height:36px; border-radius:10px;
  border: var(--icon-btn-border-width) var(--icon-btn-border-style) var(--icon-btn-border-color);
  background: var(--icon-btn-bg);
  color: var(--icon-btn-color);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.probot-icon-btn:hover{ background:var(--icon-btn-bg-hover); }
.probot-icon-btn:active{ transform: translateY(1px) scale(.98); }
.probot-icon-btn svg{ width:20px; height:20px; display:block; }
.probot-icon-btn svg path{ stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.icon-fallback{ display:none; }

/* ---------------- Only messages list scrolls ---------------- */
#probot-chat-scroll{
  overflow:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-y; overscroll-behavior:contain;
  height:calc(100dvh - 56px - var(--ib) - var(--kb) - var(--kb-gap));
  padding:10px 12px 14px;
}
#probot-chat-body{ display:flex; flex-direction:column; gap:10px; }
.msg{ display:flex; gap:8px; }
.msg .avatar{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.msg .bubble{ background:#f5f5f7; color:#111; padding:12px 14px; border-radius:14px; max-width:90%; }
.msg.me{ justify-content:flex-end; }
.msg.me .bubble{ background:#111; color:#fff; }

/* Typing dots */
.typing .bubble{ display:flex; align-items:center; }
.typing-dots{ display:inline-flex; gap:4px; }
.typing-dots i{ width:6px; height:6px; background:#999; border-radius:50%; animation:dot 1s infinite ease-in-out; }
.typing-dots i:nth-child(2){ animation-delay:.15s; }
.typing-dots i:nth-child(3){ animation-delay:.30s; }
@keyframes dot{ 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-4px)} }

/* Input bar */
#probot-inputbar{ position:sticky; bottom:0; background:#fff; border-top:1px solid #eee; padding:8px 10px; }
#probot-form{ display:flex; gap:8px; }
#probot-chat-input{
  flex:1; height:44px; border-radius:22px; padding:0 14px; border:1px solid #ddd; outline:none;
}
#probot-chat-input:focus{ border-color:#bbb; }

/* SEND button: rounded square + light border + same push/hover feel (overridable via vars) */
#probot-send{
  background: var(--send-bg);
  color: var(--send-color);
  border: var(--send-border-width) var(--send-border-style) var(--send-border-color);
  border-radius:10px;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease, box-shadow .12s ease, border-color .12s ease;
}
#probot-send:hover{ background: var(--send-bg-hover); }
#probot-send:active{ transform: translateY(1px) scale(.98); }
#probot-send:focus{ outline:none; box-shadow:none; }
#probot-send svg{ width:20px; height:20px; display:block; }
#probot-send svg path{ stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* ---------------- Teaser toast — uses CSS vars for colors ---------------- */
#probot-teaser{
  position:fixed;
  z-index:var(--z-button);
  background:var(--teaser-bg);
  color:var(--teaser-fg);
  border-radius:14px; padding:10px 14px; line-height:1.0; white-space:nowrap;
  box-shadow:0 6px 24px rgba(0,0,0,.22);
  opacity:0; transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
#probot-teaser.in  { opacity:1; }
#probot-teaser.out { opacity:0; }

/* ---------------- Desktop panel option ---------------- */
@media (min-width:900px){
  #probot-chat-panel{
    width:420px; max-width:92vw; height:78vh;
    right:24px; bottom:24px; left:auto; top:auto;
    border-radius:16px;      /* popup style on desktop */
    box-shadow:0 16px 48px rgba(0,0,0,.18);
  }
  #probot-chat-mask{ background:rgba(0,0,0,.22); }
  #probot-chat-scroll{ height:calc(78vh - 56px - var(--ib)); }
}

/* === Desktop panel anchor (left/right) — final, hard-won fix :) === */
@media (min-width:900px){
  /* neutralize defaults so our side rules can win */
  #probot-chat-panel{
    left:auto !important; right:auto !important; top:auto !important; bottom:24px !important;
  }

  /* Preferred path: modern browsers with :has() */
  body:has(#probot-chat-button[left]) #probot-chat-panel{
    left:24px !important; right:auto !important;
    transform-origin: bottom left !important;
  }
  body:has(#probot-chat-button[right]) #probot-chat-panel{
    right:24px !important; left:auto !important;
    transform-origin: bottom right !important;
  }

  /* Fallback for browsers without :has() (works with JS class toggles we added) */
  body.pbot-left  #probot-chat-panel{
    left:24px !important; right:auto !important;
    transform-origin: bottom left !important;
  }
  body.pbot-right #probot-chat-panel{
    right:24px !important; left:auto !important;
    transform-origin: bottom right !important;
  }
}