/* ===================================================================
   SOLIDMAGIC — Chat-Widget (Mock / Phase 1 UI)
   Eckige Brutalist-Sprechblase, Avatar rechts unten.
   Tokens aus style.css (:root) mitnutzen.
   =================================================================== */

.sm-chat{
  /* Freigestelltes PNG: schwebt, rechter Rand bündig mit Viewport */
  --sm-chat-avatar-h:140px;
  --sm-chat-gap:10px;
  --sm-chat-panel-w:min(22rem, calc(100vw - 2 * var(--pad, 24px)));
  position:fixed;
  right:0;
  bottom:0;
  z-index:120;
  font-family:var(--sans, 'Inter', system-ui, sans-serif);
  font-size:var(--fs, 16px);
  color:var(--ink, #000);
  line-height:1.375;
  pointer-events:none; /* nur Launcher + Panel klickbar */
}

/* Scroll-nach-oben links neben dem schwebenden Avatar */
body:has(.sm-chat) .scroll-top{
  right:calc(var(--sm-chat-avatar-h) * 0.85 + 12px);
}

.sm-chat-launcher{
  display:block;
  width:auto;
  height:var(--sm-chat-avatar-h);
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  overflow:visible;
  flex-shrink:0;
  pointer-events:auto;
  line-height:0;
}
.sm-chat-launcher:focus-visible{
  outline:var(--frame, 2px) solid var(--ink, #000);
  outline-offset:4px;
}
.sm-chat-launcher img{
  display:block;
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:right bottom;
  /* PNG-Transparenz bleibt — schwebt über der Seite */
}
/* Platzhalter, bis echtes Porträt liegt */
.sm-chat-launcher-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--sm-chat-avatar-h);
  height:var(--sm-chat-avatar-h);
  background:var(--ink, #000);
  color:var(--bg, #fff);
  font-family:var(--barlow, 'Barlow Semi Condensed', sans-serif);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.sm-chat-panel{
  position:absolute;
  right:var(--pad, 24px);
  bottom:calc(var(--sm-chat-avatar-h) + var(--sm-chat-gap));
  width:var(--sm-chat-panel-w);
  display:none;
  flex-direction:column;
  gap:0;
  background:var(--bg, #fff);
  border:var(--frame, 2px) solid var(--ink, #000);
  pointer-events:auto;
}
.sm-chat.is-open .sm-chat-panel{display:flex}

.sm-chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:var(--frame, 2px) solid var(--ink, #000);
  font-family:var(--barlow, 'Barlow Semi Condensed', sans-serif);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.sm-chat-close{
  width:28px;height:28px;padding:0;
  border:var(--frame, 2px) solid var(--ink, #000);
  background:var(--bg, #fff);
  cursor:pointer;
  font-size:18px;line-height:1;
}
.sm-chat-close:hover{background:var(--ink, #000);color:var(--bg, #fff)}

.sm-chat-thread{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 12px;
  /* Mittelweg: lesbar, nicht fullscreen */
  max-height:min(58vh, 28rem);
  min-height:12rem;
  overflow:auto;
}

/* Kundenfrage — schlicht, rechtsbündig, ohne Bubble-Zack */
.sm-chat-msg--user{
  align-self:flex-end;
  max-width:92%;
  padding:8px 10px;
  border:var(--frame, 2px) solid var(--ink, #000);
  background:var(--bg, #fff);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Alex — eckige Brutalist-Sprechblase mit Zack nach unten rechts (zum Avatar) */
.sm-chat-msg--bot{
  position:relative;
  align-self:stretch;
  max-width:100%;
  padding:10px 12px 14px;
  border:var(--frame, 2px) solid var(--ink, #000);
  background:var(--bg, #fff);
  margin-bottom:10px;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.sm-chat-msg--bot p{margin:0 0 .65em}
.sm-chat-msg--bot p:last-child{margin-bottom:0}
.sm-chat-msg--bot strong{font-weight:700}
.sm-chat-msg--bot em{font-style:italic}
.sm-chat-msg--bot a{
  color:inherit;
  text-decoration:underline;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.sm-chat-msg--bot::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:-9px;
  width:14px;
  height:14px;
  background:var(--bg, #fff);
  border-right:var(--frame, 2px) solid var(--ink, #000);
  border-bottom:var(--frame, 2px) solid var(--ink, #000);
  transform:rotate(45deg);
}

.sm-chat-msg--typing{
  color:var(--ink, #000);
  letter-spacing:.2em;
}

.sm-chat-compose{
  display:flex;
  border-top:var(--frame, 2px) solid var(--ink, #000);
}
.sm-chat-compose input{
  flex:1;
  min-width:0;
  border:none;
  padding:12px;
  font:inherit;
  background:var(--bg, #fff);
  color:var(--ink, #000);
}
.sm-chat-compose input:focus{outline:none}
.sm-chat-compose input::placeholder{color:#000;opacity:.45}
.sm-chat-send{
  flex-shrink:0;
  padding:0 14px;
  border:none;
  border-left:var(--frame, 2px) solid var(--ink, #000);
  background:var(--ink, #000);
  color:var(--bg, #fff);
  font:inherit;
  font-family:var(--barlow, 'Barlow Semi Condensed', sans-serif);
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
}
.sm-chat-send:hover{opacity:.88}
.sm-chat-send:disabled{opacity:.4;cursor:default}

.sm-chat-hint{
  padding:8px 12px 10px;
  border-top:var(--frame, 2px) solid var(--ink, #000);
  font-size:11px;
  line-height:1.3;
  opacity:.7;
}

@media (max-width:520px){
  .sm-chat{
    --sm-chat-avatar-h:108px;
    --sm-chat-panel-w:calc(100vw - 2 * var(--pad, 24px));
  }
}