/* ===================================================================
   Studio9Art · chat widget skin.

   Built out of the site's own frame language rather than a generic bubble
   UI: the panel is a piece of moulding with a mat inside it, corners stay
   square the way every frame on this site does, and both themes are drawn
   explicitly so the widget follows the switch in the nav.
   =================================================================== */

.s9c-fab{
  position:fixed; right:26px; bottom:26px; z-index:58;
  width:58px; height:58px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(237,232,223,.22); border-radius:1px;
  background:linear-gradient(145deg,#232227,#111014 60%,#191820);
  color:var(--bone);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.9), 0 6px 14px -8px rgba(0,0,0,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.s9c-fab:hover{ transform:translateY(-2px); border-color:rgba(237,232,223,.42); }
.s9c-fab svg{ width:25px; height:25px; transition:opacity .22s var(--ease), transform .22s var(--ease); }
.s9c-fab .s9c-x{ position:absolute; opacity:0; transform:rotate(-25deg) scale(.85); }
.s9c-fab.open .s9c-bub{ opacity:0; transform:rotate(20deg) scale(.85); }
.s9c-fab.open .s9c-x{ opacity:1; transform:none; }
/* one slow pulse, never a bouncing badge */
@keyframes s9cPing{ 0%,100%{ box-shadow:0 22px 44px -22px rgba(0,0,0,.9), 0 0 0 0 rgba(237,232,223,.34); }
                    50%{ box-shadow:0 22px 44px -22px rgba(0,0,0,.9), 0 0 0 12px rgba(237,232,223,0); } }
.s9c-fab.ping{ animation:s9cPing 2.6s var(--ease) 3; }

.s9c-panel{
  position:fixed; right:26px; bottom:96px; z-index:59;
  width:min(374px, calc(100vw - 40px)); max-height:min(608px, calc(100vh - 140px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:1px;
  /* the moulding */
  padding:12px;
  background:linear-gradient(145deg,#232227,#111014 60%,#191820);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 3px rgba(255,255,255,.06),
    inset 0 -2px 4px rgba(0,0,0,.5),
    0 40px 80px -30px rgba(0,0,0,.9),
    0 8px 20px -10px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.985);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.s9c-panel.open{ opacity:1; visibility:visible; transform:none; }

/* everything inside the moulding sits on the mat */
.s9c-panel > *{ background:var(--mat-well); }
.s9c-head{
  display:flex; align-items:center; gap:12px; padding:16px 14px 14px;
  border-bottom:1px solid rgba(237,232,223,.14);
}
.s9c-mark{
  flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--bone); border:1px solid rgba(237,232,223,.24);
}
.s9c-mark svg{ width:24px; height:24px; }
.s9c-who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.s9c-who b{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--bone); font-weight:500; }
.s9c-who i{ font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.s9c-close{
  margin-left:auto; flex:0 0 auto; width:32px; height:32px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--grey);
  transition:color .2s var(--ease);
}
.s9c-close:hover{ color:var(--bone); }
.s9c-close svg{ width:17px; height:17px; }

.s9c-log{
  flex:1 1 auto; min-height:150px; overflow-y:auto; padding:18px 14px;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin;
}
.s9c-msg{
  max-width:88%; font-size:.9rem; line-height:1.58; padding:12px 14px;
  white-space:pre-wrap; border-radius:1px;
}
.s9c-msg.bot{
  align-self:flex-start; color:var(--bone);
  background:rgba(237,232,223,.06); border:1px solid rgba(237,232,223,.12);
}
.s9c-msg.me{
  align-self:flex-end; color:var(--ink); background:var(--bone); border:1px solid var(--bone);
}
.s9c-msg.bot a{ color:var(--bone); border-bottom:1px solid rgba(237,232,223,.5); }

.s9c-typing{
  align-self:flex-start; display:flex; gap:5px; padding:14px;
  background:rgba(237,232,223,.06); border:1px solid rgba(237,232,223,.12);
}
.s9c-typing i{ width:5px; height:5px; border-radius:50%; background:var(--grey); animation:s9cDot 1.3s infinite; }
.s9c-typing i:nth-child(2){ animation-delay:.16s; }
.s9c-typing i:nth-child(3){ animation-delay:.32s; }
@keyframes s9cDot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.s9c-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 12px; }
.s9c-chips:empty{ display:none; }
.s9c-chips button{
  cursor:pointer; font-family:"Satoshi",system-ui,sans-serif; font-size:11.5px;
  letter-spacing:.04em; padding:8px 12px; border-radius:1px;
  color:var(--grey); background:none; border:1px solid rgba(237,232,223,.2);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.s9c-chips button:hover{ color:var(--bone); border-color:var(--bone); }

.s9c-input{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-top:1px solid rgba(237,232,223,.14);
}
.s9c-input input{
  flex:1 1 auto; min-width:0; background:transparent; border:0;
  border-bottom:1px solid rgba(237,232,223,.28);
  color:var(--bone); font-family:"Satoshi",system-ui,sans-serif; font-size:.92rem; padding:9px 0;
  transition:border-color .25s var(--ease);
}
.s9c-input input::placeholder{ color:var(--grey); }
.s9c-input input:focus{ outline:0; border-bottom-color:var(--bone); }
.s9c-input button{
  flex:0 0 auto; width:38px; height:38px; padding:0; cursor:pointer; border-radius:1px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bone); border:1px solid var(--bone); color:var(--ink);
  transition:opacity .2s var(--ease);
}
.s9c-input button:disabled{ opacity:.45; cursor:default; }
.s9c-input button svg{ width:17px; height:17px; }

.s9c-foot{
  padding:0 14px 14px; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); line-height:1.5;
}

/* ---- light theme: same frame, bone mat ---- */
html:not([data-theme="dark"]) .s9c-panel > *{ background:#FCFBF8; }
html:not([data-theme="dark"]) .s9c-head,
html:not([data-theme="dark"]) .s9c-input{ border-color:rgba(17,16,17,.12); }
html:not([data-theme="dark"]) .s9c-mark{ color:var(--ink-text); border-color:rgba(17,16,17,.2); }
html:not([data-theme="dark"]) .s9c-who b{ color:var(--ink-text); }
html:not([data-theme="dark"]) .s9c-who i,
html:not([data-theme="dark"]) .s9c-close,
html:not([data-theme="dark"]) .s9c-foot{ color:#8A857C; }
html:not([data-theme="dark"]) .s9c-close:hover{ color:var(--ink-text); }
html:not([data-theme="dark"]) .s9c-msg.bot{
  color:var(--ink-text); background:rgba(17,16,17,.04); border-color:rgba(17,16,17,.1); }
html:not([data-theme="dark"]) .s9c-msg.bot a{ color:var(--ink-text); border-bottom-color:rgba(17,16,17,.4); }
html:not([data-theme="dark"]) .s9c-msg.me{ color:#F7F5F1; background:var(--ink-text); border-color:var(--ink-text); }
html:not([data-theme="dark"]) .s9c-typing{ background:rgba(17,16,17,.04); border-color:rgba(17,16,17,.1); }
html:not([data-theme="dark"]) .s9c-typing i{ background:#8A857C; }
html:not([data-theme="dark"]) .s9c-chips button{ color:#6B675F; border-color:rgba(17,16,17,.2); }
html:not([data-theme="dark"]) .s9c-chips button:hover{ color:var(--ink-text); border-color:var(--ink-text); }
html:not([data-theme="dark"]) .s9c-input input{ color:var(--ink-text); border-bottom-color:rgba(17,16,17,.22); }
html:not([data-theme="dark"]) .s9c-input input::placeholder{ color:#8A857C; }
html:not([data-theme="dark"]) .s9c-input input:focus{ border-bottom-color:var(--ink-text); }
html:not([data-theme="dark"]) .s9c-input button{ background:var(--ink-text); border-color:var(--ink-text); color:#F7F5F1; }

/* ---- phone ---- */
@media (max-width:620px){
  .s9c-fab{ right:16px; bottom:16px; width:52px; height:52px; }
  .s9c-panel{
    right:10px; left:10px; bottom:80px; width:auto;
    max-height:min(76vh, calc(100vh - 120px)); padding:9px;
  }
  .s9c-msg{ max-width:92%; }
}

@media (prefers-reduced-motion:reduce){
  .s9c-fab, .s9c-panel, .s9c-typing i{ transition:none; animation:none; }
}