/* AI Chat Bot by Shires — Frontend Styles v2 */

:root {
  --sc-primary:    #4f46e5;
  --sc-primary-dk: #4338ca;
  --sc-text:       #ffffff;
  --sc-radius:     16px;
  --sc-shadow:     0 20px 60px rgba(0,0,0,.18);
  --sc-font:       -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sc-trans:      .24s cubic-bezier(.4,0,.2,1);
  --sc-z:          999999;
  --sc-w:          380px;
  --sc-h:          540px;
}

.shires-widget { position:fixed; z-index:var(--sc-z); font-family:var(--sc-font); }
.shires-widget--bottom-right { bottom:24px; right:24px; }
.shires-widget--bottom-left  { bottom:24px; left:24px; }

/* Toggle bubble */
.shires-toggle {
  width:60px; height:60px; border-radius:50%;
  background:var(--sc-primary); color:var(--sc-text);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(79,70,229,.45);
  transition:transform var(--sc-trans),box-shadow var(--sc-trans);
  position:relative; overflow:hidden;
}
.shires-toggle:hover { transform:scale(1.07); box-shadow:0 8px 28px rgba(79,70,229,.55); }
.shires-toggle:active { transform:scale(.95); }
.shires-toggle:focus-visible { outline:3px solid var(--sc-primary); outline-offset:3px; }
.shires-toggle svg { width:26px; height:26px; position:absolute; transition:opacity var(--sc-trans),transform var(--sc-trans); }
.shires-toggle__open  { opacity:1; transform:scale(1) rotate(0deg); }
.shires-toggle__close { opacity:0; transform:scale(.5) rotate(-90deg); }
.shires-toggle--open .shires-toggle__open  { opacity:0; transform:scale(.5) rotate(90deg); }
.shires-toggle--open .shires-toggle__close { opacity:1; transform:scale(1) rotate(0deg); }
.shires-toggle::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--sc-primary); z-index:-1;
  animation:sc-pulse 2.5s ease-out infinite;
}
@keyframes sc-pulse { 0%{transform:scale(1);opacity:.5} 70%,100%{transform:scale(1.6);opacity:0} }

/* Chat window */
.shires-window {
  position:absolute;
  width:var(--sc-w); max-width:calc(100vw - 48px);
  height:var(--sc-h); max-height:calc(100svh - 100px);
  bottom:76px; background:#fff; border-radius:var(--sc-radius);
  box-shadow:var(--sc-shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transform:scale(.9) translateY(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--sc-trans),transform var(--sc-trans),visibility var(--sc-trans);
}
.shires-widget--bottom-right .shires-window { right:0; transform-origin:bottom right; }
.shires-widget--bottom-left  .shires-window { left:0;  transform-origin:bottom left; }
.shires-window--open { opacity:1; visibility:visible; pointer-events:all; transform:scale(1) translateY(0); }

/* Header */
.shires-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--sc-primary); color:var(--sc-text); flex-shrink:0; }
.shires-header__left { display:flex; align-items:center; gap:10px; }
.shires-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.shires-avatar img { width:100%; height:100%; object-fit:cover; }
.shires-avatar svg { width:20px; height:20px; }
.shires-header__name   { display:block; font-size:14px; font-weight:600; }
.shires-header__status { display:flex; align-items:center; gap:4px; font-size:12px; opacity:.85; margin-top:2px; }
.shires-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; animation:sc-blink 2s ease infinite; }
@keyframes sc-blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.shires-close { background:none; border:none; cursor:pointer; color:var(--sc-text); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; opacity:.8; transition:background var(--sc-trans),opacity var(--sc-trans); }
.shires-close:hover { background:rgba(255,255,255,.2); opacity:1; }
.shires-close svg { width:18px; height:18px; }

/* Messages */
.shires-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.shires-messages::-webkit-scrollbar { width:4px; }
.shires-messages::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:2px; }
.shires-msg { display:flex; gap:8px; align-items:flex-end; max-width:88%; animation:sc-in var(--sc-trans) both; }
@keyframes sc-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.shires-msg--bot  { align-self:flex-start; }
.shires-msg--user { align-self:flex-end; flex-direction:row-reverse; }
.shires-msg__av { width:26px; height:26px; border-radius:50%; background:var(--sc-primary); color:var(--sc-text); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; overflow:hidden; }
.shires-msg__av img { width:100%; height:100%; object-fit:cover; }
.shires-msg__bubble { padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.5; word-break:break-word; }
.shires-msg--bot  .shires-msg__bubble { background:#f3f4f6; color:#111827; border-bottom-left-radius:4px; }
.shires-msg--user .shires-msg__bubble { background:var(--sc-primary); color:var(--sc-text); border-bottom-right-radius:4px; }
.shires-msg__time { font-size:10px; color:#9ca3af; margin-top:3px; }
.shires-msg__sources { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.shires-source { font-size:12px; color:var(--sc-primary); background:rgba(79,70,229,.08); padding:3px 9px; border-radius:999px; text-decoration:none; }
.shires-source:hover { background:rgba(79,70,229,.15); }
.shires-typing { display:flex; gap:4px; padding:12px 14px; background:#f3f4f6; border-radius:16px; border-bottom-left-radius:4px; }
.shires-typing span { width:6px; height:6px; border-radius:50%; background:#9ca3af; animation:sc-dot 1.2s ease infinite; }
.shires-typing span:nth-child(2){animation-delay:.2s}
.shires-typing span:nth-child(3){animation-delay:.4s}
@keyframes sc-dot { 0%,60%,100%{transform:none;opacity:.5} 30%{transform:translateY(-6px);opacity:1} }

/* Contact form */
.shires-contact { padding:16px; background:#fff; border-top:1px solid #f3f4f6; display:none; flex-direction:column; gap:10px; animation:sc-in var(--sc-trans); }
.shires-contact.shires-contact--open { display:flex; }
.shires-contact h3 { margin:0 0 4px; font-size:14px; font-weight:600; color:#111827; }
.shires-field { display:flex; flex-direction:column; gap:4px; }
.shires-field label { font-size:12px; font-weight:500; color:#6b7280; }
.shires-field input,.shires-field textarea { padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; font-family:var(--sc-font); color:#111827; transition:border-color var(--sc-trans); }
.shires-field input:focus,.shires-field textarea:focus { outline:none; border-color:var(--sc-primary); box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.shires-field-error { color:#dc2626; font-size:12px; margin:0; }
.shires-contact__actions { display:flex; gap:8px; margin-top:4px; }
.shires-btn { flex:1; padding:9px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; font-family:var(--sc-font); transition:background var(--sc-trans); }
.shires-btn--primary { background:var(--sc-primary); color:var(--sc-text); }
.shires-btn--primary:hover { background:var(--sc-primary-dk); }
.shires-btn--ghost { background:transparent; color:#6b7280; border:1px solid #e5e7eb; }
.shires-btn--ghost:hover { background:#f9fafb; }

/* Input */
.shires-input-area { border-top:1px solid #f3f4f6; padding:10px 10px 6px; flex-shrink:0; }
.shires-input-row { display:flex; align-items:center; gap:6px; background:#f9fafb; border:1px solid #e5e7eb; border-radius:100px; padding:4px 4px 4px 14px; transition:border-color var(--sc-trans),box-shadow var(--sc-trans); }
.shires-input-row:focus-within { border-color:var(--sc-primary); box-shadow:0 0 0 3px rgba(79,70,229,.1); background:#fff; }
.shires-input { flex:1; border:none; background:transparent; font-size:14px; font-family:var(--sc-font); color:#111827; outline:none; padding:6px 0; min-width:0; }
.shires-input::placeholder { color:#9ca3af; }
.shires-send { width:34px; height:34px; border-radius:50%; background:var(--sc-primary); color:var(--sc-text); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--sc-trans),transform var(--sc-trans); }
.shires-send:hover { background:var(--sc-primary-dk); }
.shires-send:active { transform:scale(.9); }
.shires-send svg { width:16px; height:16px; }
.shires-footer { text-align:center; margin-top:5px; font-size:11px; color:#9ca3af; }
.shires-footer a { color:var(--sc-primary); text-decoration:none; font-weight:500; }

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

@media(prefers-reduced-motion:reduce){.shires-window,.shires-toggle,.shires-msg,.shires-typing span,.shires-dot{animation:none!important;transition-duration:.01ms!important}}

@media(max-width:480px){
  .shires-widget--bottom-right,.shires-widget--bottom-left{right:12px;left:12px;bottom:12px}
  .shires-window{width:100%;max-width:100%;left:0;right:0;bottom:68px;border-radius:var(--sc-radius) var(--sc-radius) 0 0;max-height:calc(100svh - 80px)}
  .shires-toggle{position:fixed;bottom:12px;right:12px}
  .shires-widget--bottom-left .shires-toggle{right:auto;left:12px}
}

.shires-inline-wrap { display:flex; flex-direction:column; border:1px solid #e2e8f0; border-radius:var(--sc-radius); overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.07); font-family:var(--sc-font); }
.shires-inline-messages { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }