/* ==========================================================
   Wakey Internet — Board.Support Minimal Theme
   Clean consolidated override
   Scope: .sb-main.sb-chat
   ========================================================== */

/* ==========================================================
   1. Theme variables + widget shell
   ========================================================== */

.sb-main.sb-chat{
  --wakey-orange: #EB8B50;
  --wakey-purple: #A27CC5;
  --wakey-ink: #111827;
  --wakey-muted: rgba(17,24,39,.55);

  --wakey-radius-lg: 18px;
  --wakey-radius-md: 16px;

  --wakey-shadow: 0 14px 40px rgba(0,0,0,.16);
  --wakey-shadow-soft: 0 6px 14px rgba(0,0,0,.08);

  border-radius: var(--wakey-radius-lg) !important;
  box-shadow: var(--wakey-shadow) !important;
  overflow: visible !important;
}

/* Preserve rounded widget edges without clipping popup/launcher UI. */
.sb-main.sb-chat .sb-body{
  border-radius: var(--wakey-radius-lg) !important;
  overflow: hidden !important;
}

/* ==========================================================
   2. Typography + canvas
   ========================================================== */

/* Apply Wakey font only to text/UI controls.
   Avoid targeting icon pseudo-elements directly. */
.sb-main.sb-chat,
.sb-main.sb-chat .sb-title,
.sb-main.sb-chat .sb-text,
.sb-main.sb-chat .sb-message,
.sb-main.sb-chat input,
.sb-main.sb-chat textarea,
.sb-main.sb-chat select,
.sb-main.sb-chat button{
  font-family: 'Oswald', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.sb-main.sb-chat .sb-body,
.sb-main.sb-chat .sb-scroll-area{
  background: #fff !important;
}

.sb-main.sb-chat .sb-scroll-area{
  padding: 0 14px !important;
  box-sizing: border-box !important;
}

/* Remove row/card backgrounds only inside the actual conversation area. */
.sb-main.sb-chat .sb-scroll-area .sb-list,
.sb-main.sb-chat .sb-scroll-area .sb-list > div[data-id],
.sb-main.sb-chat .sb-scroll-area .sb-cnt{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================
   3. Popup message — anchored above launcher
   ========================================================== */

.sb-main.sb-chat .sb-popup-message{
  position: fixed !important;
  right: 18px !important;
  left: auto !important;
  top: auto !important;
  bottom: 92px !important;

  width: min(360px, calc(100vw - 36px)) !important;
  max-width: 360px !important;

  padding: 12px 44px 12px 14px !important;
  box-sizing: border-box !important;

  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(17,24,39,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.18) !important;

  z-index: 2147483000 !important;
}

.sb-main.sb-chat .sb-popup-message .sb-top{
  margin: 0 0 6px !important;
  color: var(--wakey-ink) !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
}

.sb-main.sb-chat .sb-popup-message .sb-text{
  color: rgba(17,24,39,.72) !important;
  font-size: .95rem !important;
  line-height: 1.35 !important;
}

.sb-main.sb-chat .sb-popup-message .sb-icon-close{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  width: 28px !important;
  height: 28px !important;

  background: rgba(17,24,39,.06) !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  border-radius: 999px !important;

  cursor: pointer !important;
}

.sb-main.sb-chat .sb-popup-message .sb-icon-close:hover{
  background: rgba(17,24,39,.10) !important;
}

.sb-main.sb-chat .sb-popup-message::after{
  content: "" !important;
  position: absolute !important;
  right: 34px !important;
  bottom: -10px !important;

  width: 0 !important;
  height: 0 !important;

  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-top: 10px solid rgba(255,255,255,.96) !important;

  filter: drop-shadow(0 2px 2px rgba(0,0,0,.10)) !important;
}

/* ==========================================================
   4. Wakey Main Chat Header
   Scoped so nested Board.Support popup headers are untouched.
   ========================================================== */

.sb-main.sb-chat > .sb-header,
.sb-main.sb-chat .sb-body > .sb-header{
  background: linear-gradient(
    135deg,
    var(--wakey-orange) 0%,
    var(--wakey-purple) 100%
  ) !important;

  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
}

.sb-main.sb-chat > .sb-header *,
.sb-main.sb-chat .sb-body > .sb-header *{
  color: #fff !important;
}

.sb-main.sb-chat > .sb-header .sb-profile img,
.sb-main.sb-chat > .sb-header .sb-avatar img,
.sb-main.sb-chat .sb-body > .sb-header .sb-profile img,
.sb-main.sb-chat .sb-body > .sb-header .sb-avatar img{
  padding: 2px !important;
  background: rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
}

/* Restore nested popup headers to native/light styling. */
.sb-main.sb-chat .sb-popup .sb-header{
  background: #fff !important;
  color: var(--wakey-ink) !important;
  border-bottom: 1px solid rgba(17,24,39,.08) !important;
}

.sb-main.sb-chat .sb-popup .sb-header *{
  color: var(--wakey-ink) !important;
}

/* ==========================================================
   5. Conversation layout
   ========================================================== */

.sb-main.sb-chat .sb-list.sb-active > div[data-id]{
  position: relative !important;
  display: block !important;
  clear: both !important;
  margin: 0 0 2px !important;
}

.sb-main.sb-chat .sb-list.sb-active > div[data-id] .sb-cnt{
  position: relative !important;
  display: block !important;
  clear: both !important;

  margin: 0 !important;
  padding: 0 0 17px !important;
}

/* ==========================================================
   6. Message bubbles
   ========================================================== */

.sb-main.sb-chat .sb-cnt .sb-message{
  display: inline-block !important;

  min-width: 64px !important;
  max-width: 92% !important;

  padding: 12px 14px !important;
  margin: 0 !important;

  color: var(--wakey-ink) !important;
  background: #fff !important;

  border: 1px solid rgba(17,24,39,.08) !important;
  border-radius: var(--wakey-radius-md) !important;
  box-shadow: var(--wakey-shadow-soft) !important;

  line-height: 1.45 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

/* Customer/user bubble — right side */
.sb-main.sb-chat .sb-right .sb-cnt{
  text-align: right !important;
}

.sb-main.sb-chat .sb-right .sb-cnt .sb-message{
  background: rgba(235,139,80,.16) !important;
  border-color: rgba(235,139,80,.28) !important;
  border-radius: 18px 18px 10px 18px !important;
}

/* Agent/AI bubble — left side */
.sb-main.sb-chat .sb-list.sb-active > div[data-id]:not(.sb-right) .sb-cnt .sb-message{
  background: linear-gradient(
    135deg,
    rgba(162,124,197,.30),
    rgba(162,124,197,.16)
  ) !important;

  border-color: rgba(162,124,197,.45) !important;
  border-radius: 18px 18px 18px 10px !important;
}

/* ==========================================================
   7. Agent name + timestamps + date labels
   ========================================================== */

.sb-main.sb-chat .sb-agent-name{
  display: block !important;
  margin: 0 0 3px !important;

  color: var(--wakey-ink) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* Reserve timestamp area under each message so it never overlaps. */
.sb-main.sb-chat .sb-list.sb-active > div[data-id] .sb-time{
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 2px !important;
  top: auto !important;

  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  color: var(--wakey-ink) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  opacity: .50 !important;

  text-align: left !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.sb-main.sb-chat .sb-list.sb-active > div[data-id].sb-right .sb-time{
  left: auto !important;
  right: 0 !important;
  text-align: right !important;
}

.sb-main.sb-chat .sb-list.sb-active > div[data-id] .sb-time span{
  margin-right: 0 !important;
}

/* Inline date separators */
.sb-main.sb-chat .sb-label-date{
  position: relative !important;
  display: block !important;

  margin: 5px 0 !important;
  padding: 0 !important;

  background: transparent !important;

  font-size: 10.5px !important;
  opacity: .55 !important;

  z-index: 0 !important;
}

/* Sticky/top date label ("Today", etc.) */
.sb-main.sb-chat .sb-label-date-top{
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}

.sb-main.sb-chat .sb-label-date-top span{
  color: var(--wakey-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}

.sb-main.sb-chat > .sb-header .sb-label-date-top,
.sb-main.sb-chat .sb-body > .sb-header .sb-label-date-top{
  position: relative !important;
  z-index: 6 !important;
}

/* ==========================================================
   8. Composer
   ========================================================== */

.sb-main.sb-chat .sb-editor{
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}

.sb-main.sb-chat .sb-editor textarea{
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 999px !important;
}

.sb-main.sb-chat .sb-editor textarea:focus{
  border-color: rgba(235,139,80,.55) !important;
  box-shadow: 0 0 0 4px rgba(235,139,80,.18) !important;
  outline: none !important;
}

/* Scope orange send styling to the actual send control only. */
.sb-main.sb-chat .sb-editor .sb-send,
.sb-main.sb-chat .sb-editor .sb-icon-send.sb-submit{
  background: var(--wakey-orange) !important;
  color: #fff !important;

  border: none !important;
  border-radius: 999px !important;

  box-shadow: 0 10px 18px rgba(235,139,80,.25) !important;

  font-weight: 600 !important;
}

/* ==========================================================
   9. Launcher
   ========================================================== */

.sb-main.sb-chat .sb-chat-btn{
  background: linear-gradient(
    135deg,
    var(--wakey-orange),
    var(--wakey-purple)
  ) !important;

  border: none !important;
  border-radius: 999px !important;
  box-shadow: var(--wakey-shadow) !important;
}

/* ==========================================================
   10. Rating / feedback UI
   ========================================================== */

/*
 * Intentionally NO custom rating-panel CSS.
 *
 * Board.Support's native:
 *   .sb-overlay-panel[data-id="rating"]
 *
 * is allowed to render exactly as shipped by Board.Support.
 * This avoids the detached/split "Rate your experience" panel
 * caused by styling its direct child divs as separate cards.
 */

/* ==========================================================
   11. Optional UI suppression
   ========================================================== */

/* Hide Board.Support voice/call UI if enabled. */
.sb-main.sb-chat .board-voice-incoming,
.sb-main.sb-chat .board-call-toast,
.sb-main.sb-chat #sb-call-bar{
  display: none !important;
}

/* ==========================================================
   12. Mobile
   ========================================================== */

@media (max-width: 520px){

  .sb-main.sb-chat .sb-scroll-area{
    padding: 0 10px !important;
  }

  .sb-main.sb-chat .sb-list.sb-active > div[data-id]{
    margin-bottom: 1px !important;
  }

  .sb-main.sb-chat .sb-cnt .sb-message{
    max-width: 95% !important;
  }

  .sb-main.sb-chat .sb-list.sb-active > div[data-id] .sb-time{
    font-size: 9.5px !important;
  }

  /* Popup */
  .sb-main.sb-chat .sb-popup-message{
    right: 12px !important;
    bottom: 86px !important;

    width: calc(100vw - 24px) !important;
    max-width: none !important;
  }

  .sb-main.sb-chat .sb-popup-message::after{
    right: 30px !important;
  }
}