/* =========================================================================
 * 5xLiving Astro Sanctuary · Shared Soul Guide (Chat) component
 * soul-guide.css
 *
 * MASTER SOURCE: Astro-Sanctuary/astro.html (the canonical Astro language +
 * Soul Guide implementation). This file is the single shared chat CSS for
 * ALL Astro Sanctuary pages (astro, bazi, ziwei, tarot, kyuusei, ...).
 *
 * Do NOT create per-page chat CSS. Change it here and every page updates.
 * ========================================================================= */

.ss-chat-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  width:58px;
  height:58px;
  /* Rounded-square, matching VIP Sanctuary. VIP's FAB is a
   * <button type="button">, so its broad [type="button"] rule
   * (border-radius:14px!important) overrides the 50% circle. We set the
   * same 14px here so both pages render an identical square button. */
  border-radius:14px;
  background:linear-gradient(180deg,rgba(216,107,154,.30),rgba(143,63,99,.22));
  color:#F3B6CF;
  display:grid;
  place-items:center;
  /* Icon is drawn by ::before (pink outlined chat bubble, same as VIP
   * Sanctuary). The text label is hidden so the glyph is the only mark. */
  font-size:0;
  font-weight:800;
  box-shadow:0 12px 34px rgba(143,63,99,.34),0 0 0 1px rgba(216,107,154,.18);
  cursor:pointer;
  border:1px solid rgba(216,107,154,.55);
  backdrop-filter:blur(10px);
}
/* Pink outlined chat-bubble icon — identical to VIP Sanctuary's .ss-chat-fab */
.ss-chat-fab::before{
  content:"";
  /* Explicit block box: prevents the inline line-box (driven by the
   * inherited line-height) from pushing the glyph off-centre. */
  display:block;
  width:24px;
  height:24px;
  margin:0;
  padding:0;
  line-height:0;
  flex:0 0 auto;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ss-chat-fab:hover{border-color:rgba(216,107,154,.85)}

.ss-chat-panel{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:50;
  width:min(460px,92vw);
  display:none;
  flex-direction:column;
  background:#0e1520;
  border:1px solid rgba(216,107,154,.26);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ss-chat-panel[aria-hidden="false"]{display:flex}

.ss-chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.ss-chat-title{font-weight:900;color:var(--gold2);font-size:1.05rem}
.ss-close{cursor:pointer;color:var(--muted);font-weight:900}

.ss-chat-body{
  max-height:320px;
  overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ss-msg{
  padding:9px 11px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  max-width:84%;
  font-size:.92rem;
  line-height:1.55;
  white-space:pre-wrap;
}
.ss-msg.me{margin-left:auto;background:rgba(216,107,154,.12);border-color:rgba(216,107,154,.22)}

.ss-chat-input{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.09);
}
.ss-chat-input input{
  flex:1;
  min-width:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(7,10,15,.8);
  color:var(--text);
  padding:12px;
  outline:none;
}
.ss-chat-input .btn{padding:10px 13px;min-height:44px;border-radius:14px}

/* Unavailable state (AI interpretation offline) — text is set by JS in the
 * selected language; this only styles the box. */
.ss-chat-unavailable{
  padding:14px;
  border-radius:14px;
  text-align:center;
  background:rgba(216,107,154,.10);
  border:1px dashed rgba(216,107,154,.45);
  color:var(--gold2);
  font-size:.95rem;
  line-height:1.7;
}
.ss-chat-input.disabled{opacity:.55;pointer-events:none}

@media(max-width:760px){
  /* ---- floating chat: stays inside viewport, safe areas respected ---- */
  .ss-chat-fab{
    width:52px;height:52px;
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
  }
  /* keep the icon-only treatment on mobile (no text glyph) */
  .ss-chat-fab::before{width:22px;height:22px}
  .ss-chat-panel{
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
    bottom:calc(74px + env(safe-area-inset-bottom));
    width:auto;
    max-width:100%;
    max-height:calc(100dvh - 96px - env(safe-area-inset-bottom));
    border-radius:16px;
  }
  .ss-chat-head{padding:10px 12px}
  .ss-chat-body{
    max-height:none;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:10px;
    gap:7px;
  }
  .ss-msg{max-width:88%;font-size:.88rem;padding:8px 10px}
  .ss-chat-input{padding:10px;gap:7px}
  .ss-chat-input input{padding:10px;border-radius:12px;font-size:.9rem}
  .ss-chat-input .btn{padding:9px 12px;min-height:42px;border-radius:12px;flex:0 0 auto}
}