/* ============================================================
 *  Suburban Senshi Chat Embed — ss-static-chat-embed.css
 *  All rules scoped under .ss-chat
 *  ============================================================ */

/* ── Overrides to defeat any parent page CSS ── */
.ss-chat * {
  box-sizing: border-box !important;
}
.ss-chat img {
  max-width: 100% !important;
  height: auto !important;
}

/* ── Container ── */
.ss-chat {
  font-family: Helvetica, Arial, sans-serif;
  background: #2a2a2a;
  padding: 14px 12px;

  overflow-x: hidden;
}

/* ── Speaker group ── */
.ss-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  margin-top: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.ss-group.ss-right {
  justify-content: flex-end !important;
  text-align: end !important;
}

/* Avatar order for right-side groups */
.ss-group.ss-right .ss-avatar,
.ss-group.ss-right .ss-avatar-placeholder {
  order: 2 !important;
}
.ss-group.ss-right .ss-bubbles {
  order: 1 !important;
}

/* ── Avatar ──
 *  IMPORTANT: no `border` property here, on purpose. ss2_post.php writes
 *  a per-character border color inline — style="border:3px solid #HANDLECOLOR;"
 *  — directly on this element. Setting border (with or without !important)
 *  in this stylesheet will fight or fully block that inline color. Leave
 *  it alone and let the inline style own the border entirely. */
.ss-avatar {

  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
  display: block !important;
  align-self: flex-start !important;
}
.ss-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
.ss-avatar, a.ss-avatar {
  text-decoration: none !important;
}

/* ── Bubble column ── */
.ss-bubbles {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  max-width: calc(100% - 66px) !important;
}

.ss-group.ss-left .ss-bubbles {
  align-items: flex-start !important;
  text-align: left !important;
}
.ss-group.ss-right .ss-bubbles {
  align-items: flex-start !important;
  margin-left: auto !important;
}

/* ── Individual bubble ── */
.ss-bubble {
  padding: 8px 12px !important;
  border-radius: 18px !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  display: block !important;
}

/* First bubble pointed corner toward avatar */
.ss-group.ss-left  .ss-bubble:first-child { border-top-left-radius:  4px !important; }
.ss-group.ss-right .ss-bubble:first-child { border-top-right-radius: 4px !important; }

/* ── Header ── */
.ss-header {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  margin-bottom: 3px !important;
  flex-wrap: wrap !important;
}
.ss-group.ss-right .ss-header {
  flex-direction: row-reverse !important;
}
.ss-handle {
  font-size: 11px !important;
  font-weight: bold !important;
  color: #000 !important;
}
.ss-time {
  font-size: 10px !important;
  color: #000 !important;
}

/* ── System messages (header/footer) ── */
.ss-system {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.ss-system .ss-bubble {
  width: auto !important;
  max-width: 80% !important;
}

/* ── Media inside bubbles ── */
.ss-bubble img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
  display: block !important;
}
.ss-bubble iframe {
  max-width: 100% !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
  display: block !important;
  border: none !important;
}

/* ── Avatar placeholder ── */
.ss-avatar-placeholder {
  width: 56px !important;
  min-width: 56px !important;
  flex-shrink: 0 !important;
  visibility: hidden !important;
}

/* ── Mobile: 480px and below ──
 *  Confirmed-working fix for the oval-avatar bug: the parent page's
 *  `img { width:100%; height:auto }` was winning at this breakpoint
 *  because earlier attempts only set `height` without `max-height`.
 *  Setting height, min-height, AND max-height together closes that gap.
 *  Still no `border` override — inline handlecolor still applies. */
@media (max-width: 768px) {
  .ss-chat {
   padding: 0px 10px 20px 50px !important;
  }
  .ss-group {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  .ss-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    flex-shrink: 0 !important;
  }
  .ss-avatar img {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .ss-bubbles {
    max-width: calc(100% - 52px) !important;
  }
  .ss-bubble {
    font-size: 22px !important;
    padding: 6px 10px !important;
    margin-bottom:30px !important;
  }
  .ss-handle { font-size: 10px !important; }
  .ss-time   { font-size: 9px !important; }
}