
:root{
  --scl-black:#050505;
  --scl-panel:#0d0d0f;
  --scl-gold:#d4af37;
  --scl-gold2:#f0d675;
  --scl-ruby:#8f243e;
  --scl-emerald:#18765b;
  --scl-amethyst:#684399;
  --scl-sapphire:#315d9a;
  --scl-text:#f6f6f6;
  --scl-muted:#c1c1c5;
}

/*
 * v1.1.0 IMPORTANT:
 * Do not style Better Messages itself.
 * Better Messages retains its original backgrounds, text colors, lists,
 * headers, message bubbles, composer, user panels and room panels.
 * The rules below style only UI created by SCL Chat Experience.
 */

/* Conversation Spark button injected beside the send controls. */
.scl-spark-compose{
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:50%!important;
  border:1px solid #b89228!important;
  background:#ffffff!important;
  color:#7b5c10!important;
  font-size:19px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  margin:0 4px!important;
  padding:0!important;
  line-height:1!important;
}
.scl-spark-compose:hover{
  background:#f7f2e4!important;
  color:#4a3507!important;
}

/* SCL modal overlays. These sit outside Better Messages and do not recolor it. */
.scl-chat-modal-overlay{
  position:fixed;
  z-index:999999;
  inset:0;
  background:rgba(0,0,0,.76);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(5px);
}
.scl-chat-modal{
  position:relative;
  width:min(680px,96vw);
  max-height:88vh;
  overflow:auto;
  background:linear-gradient(145deg,#111,#060606);
  border:1px solid var(--scl-gold);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  padding:28px;
  color:#fff;
  text-align:center;
}
.scl-chat-modal-close{
  position:absolute;
  right:13px;
  top:10px;
  border:0!important;
  background:transparent!important;
  color:#ddd!important;
  font-size:30px!important;
  line-height:1!important;
  cursor:pointer;
}
.scl-modal-icon{
  font-size:34px;
  color:var(--scl-gold2);
  margin-bottom:6px;
}
.scl-chat-modal h2{
  color:#fff!important;
  margin:5px 35px 5px!important;
  font-size:1.65rem!important;
}
.scl-chat-subtitle,
.scl-modal-status,
.scl-spark-note{
  color:var(--scl-muted)!important;
}
.scl-action-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:10px;
  margin-top:20px;
}
.scl-action-card{
  min-height:112px;
  padding:15px 10px;
  border:1px solid rgba(212,175,55,.5);
  background:#0d0d0f;
  border-radius:12px;
  color:#fff!important;
  text-decoration:none!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:.18s ease;
}
.scl-action-card:nth-child(5n+1){border-color:var(--scl-ruby)}
.scl-action-card:nth-child(5n+2){border-color:var(--scl-emerald)}
.scl-action-card:nth-child(5n+3){border-color:var(--scl-amethyst)}
.scl-action-card:nth-child(5n+4){border-color:var(--scl-sapphire)}
.scl-action-card:nth-child(5n+5){border-color:var(--scl-gold)}
.scl-action-card:hover{
  transform:translateY(-2px);
  background:#18131a;
}
.scl-action-icon svg{
  width:27px;
  height:27px;
  color:var(--scl-gold2);
}
.scl-modal-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.scl-chat-primary,
.scl-chat-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  border-radius:9px!important;
  text-decoration:none!important;
  font-weight:700!important;
  cursor:pointer;
}
.scl-chat-primary{
  background:var(--scl-gold)!important;
  color:#090909!important;
  border:1px solid var(--scl-gold)!important;
}
.scl-chat-secondary{
  background:#111!important;
  color:#fff!important;
  border:1px solid #555!important;
}
.scl-spark-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin:20px 0;
}
.scl-spark-choice{
  background:#0e0e10!important;
  color:#fff!important;
  border:1px solid rgba(212,175,55,.55)!important;
  border-radius:12px!important;
  padding:18px 9px!important;
  cursor:pointer!important;
}
.scl-spark-choice span{
  display:block;
  color:var(--scl-gold2);
  font-size:24px;
  margin-bottom:5px;
}
.scl-spark-choice strong{color:#fff}
.scl-spark-choice:hover{background:#1b1520!important}
.scl-spark-choice.is-loading{opacity:.55}

/* Video action shown on an SCL profile page. */
.scl-chat-video-profile-btn{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:5px!important;
  padding:10px 15px!important;
  border-radius:8px!important;
  border:1px solid var(--scl-ruby)!important;
  background:#12090c!important;
  color:#fff!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.scl-chat-video-profile-btn:hover{
  background:var(--scl-ruby)!important;
}

/* SCL Video Room page only. */
html:has(body.scl-video-room-page),
body.scl-video-room-page,
body.scl-video-room-page #page,
body.scl-video-room-page #top,
body.scl-video-room-page #content,
body.scl-video-room-page main,
body.scl-video-room-page article,
body.scl-video-room-page .entry-content,
body.scl-video-room-page .x-root,
body.scl-video-room-page .x-site,
body.scl-video-room-page .x-main,
body.scl-video-room-page .x-container{
  background:var(--scl-black)!important;
  color:#fff!important;
}
.scl-video-shell{
  width:min(1500px,96vw);
  margin:20px auto 50px;
  color:#fff;
}
.scl-video-room-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  border:1px solid var(--scl-gold);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:15px;
  background:linear-gradient(115deg,#0d0d0e,#14090d);
}
.scl-video-room-head h1{
  color:#fff!important;
  margin:3px 0!important;
}
.scl-video-room-head p{
  color:var(--scl-muted)!important;
  margin:0!important;
}
.scl-video-eyebrow{
  color:var(--scl-gold2);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:800;
}
.scl-video-leave,
.scl-video-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none!important;
  border-radius:9px;
  padding:11px 17px;
  font-weight:800;
  cursor:pointer;
}
.scl-video-leave{
  border:1px solid #666;
  color:#fff!important;
  background:#111;
}
.scl-video-button{
  border:1px solid var(--scl-gold)!important;
  background:var(--scl-gold)!important;
  color:#060606!important;
}
.scl-video-consent{
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(212,175,55,.42);
  background:#080808;
  border-radius:14px;
}
.scl-video-consent[hidden]{display:none!important}
.scl-video-card{
  width:min(520px,90%);
  text-align:center;
  padding:35px;
  background:#0e0e10;
  border:1px solid rgba(212,175,55,.55);
  border-radius:16px;
}
.scl-video-card h1,
.scl-video-card h2{color:#fff!important}
.scl-video-card p{color:var(--scl-muted)!important}
.scl-video-camera{font-size:55px}
.scl-video-fallback{
  display:block;
  color:var(--scl-gold2)!important;
  margin-top:16px;
}
.scl-jitsi-frame{
  height:min(76vh,850px);
  min-height:560px;
  border:1px solid var(--scl-gold);
  border-radius:14px;
  overflow:hidden;
  background:#000;
}
.scl-jitsi-frame[hidden]{display:none!important}
.scl-jitsi-frame iframe{
  display:block;
  width:100%!important;
  height:100%!important;
  border:0!important;
}

@media(max-width:700px){
  .scl-chat-modal{padding:22px 14px}
  .scl-action-grid{grid-template-columns:repeat(2,1fr)}
  .scl-video-room-head{display:block}
  .scl-video-leave{margin-top:14px}
  .scl-video-consent{min-height:430px}
  .scl-jitsi-frame{min-height:70vh;height:70vh}
}

/* ============================================================
 * v12.0.3 — SCL Gothic skin for Better Messages
 * Better Messages remains the engine; these rules are visual only.
 * ============================================================ */
.bp-messages-wrap,
[class*="better-messages"],
[class*="better_messages"]{
  --scl-bm-bg:#080706;
  --scl-bm-panel:#100d0b;
  --scl-bm-panel2:#17110d;
  --scl-bm-gold:#d7b45a;
  --scl-bm-gold-hi:#f2d88a;
  --scl-bm-cream:#f5ead4;
  --scl-bm-muted:#c9baa4;
  --scl-bm-line:rgba(215,180,90,.42);
  background:
    radial-gradient(circle at 50% -20%,rgba(125,48,28,.22),transparent 42%),
    linear-gradient(180deg,#100b08 0%,#070606 48%,#050505 100%)!important;
  color:var(--scl-bm-cream)!important;
  border:1px solid var(--scl-bm-gold)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.55), inset 0 0 50px rgba(100,48,20,.08)!important;
  border-radius:12px!important;
  overflow:hidden;
  font-family:Georgia,'Times New Roman',serif!important;
}
.bp-messages-wrap *,
[class*="better-messages"] *,
[class*="better_messages"] *{box-sizing:border-box}

/* Main panes, thread list, conversation and headers */
.bp-messages-wrap [class*="sidebar"],
.bp-messages-wrap [class*="threads"],
.bp-messages-wrap [class*="thread-list"],
.bp-messages-wrap [class*="conversation"],
.bp-messages-wrap [class*="chat"],
.bp-messages-wrap [class*="messages-list"],
.bp-messages-wrap [class*="messages-stack"],
.bp-messages-wrap [class*="header"],
.bp-messages-wrap [class*="footer"]{
  background-color:rgba(10,9,8,.94)!important;
  color:var(--scl-bm-cream)!important;
  border-color:var(--scl-bm-line)!important;
}
.bp-messages-wrap [class*="header"]{
  background:linear-gradient(180deg,#1a120d,#0c0907)!important;
  border-bottom:1px solid var(--scl-bm-gold)!important;
}

/* Conversation rows */
.bp-messages-wrap [class*="thread"]:not([class*="header"]),
.bp-messages-wrap [class*="user"]:not(input),
.bp-messages-wrap [class*="participant"]{
  border-color:rgba(215,180,90,.18)!important;
}
.bp-messages-wrap [class*="thread"]:hover,
.bp-messages-wrap [class*="thread"].active,
.bp-messages-wrap [class*="thread"].selected{
  background:linear-gradient(90deg,rgba(126,77,31,.30),rgba(30,21,15,.82))!important;
}

/* Readable text */
.bp-messages-wrap,
.bp-messages-wrap p,
.bp-messages-wrap span,
.bp-messages-wrap div,
.bp-messages-wrap label,
.bp-messages-wrap a{
  color:var(--scl-bm-cream);
}
.bp-messages-wrap [class*="name"],
.bp-messages-wrap [class*="title"],
.bp-messages-wrap h1,.bp-messages-wrap h2,.bp-messages-wrap h3,.bp-messages-wrap h4{
  color:var(--scl-bm-gold-hi)!important;
  text-shadow:0 1px 2px #000;
}
.bp-messages-wrap [class*="time"],
.bp-messages-wrap [class*="date"],
.bp-messages-wrap [class*="preview"],
.bp-messages-wrap [class*="meta"]{color:var(--scl-bm-muted)!important}

/* Message bubbles */
.bp-messages-wrap .message [class*="content"],
.bp-messages-wrap [class*="message-content"],
.bp-messages-wrap [class*="bubble"]{
  background:linear-gradient(145deg,#1b1714,#100e0c)!important;
  color:#fff8eb!important;
  border:1px solid rgba(215,180,90,.28)!important;
  border-radius:12px!important;
  box-shadow:0 4px 14px rgba(0,0,0,.20)!important;
}
.bp-messages-wrap .message.my [class*="content"],
.bp-messages-wrap .message.outgoing [class*="content"],
.bp-messages-wrap [class*="message"].mine [class*="content"]{
  background:linear-gradient(145deg,#392414,#1c130d)!important;
  border-color:rgba(242,216,138,.55)!important;
}

/* Composer */
.bp-messages-wrap textarea,
.bp-messages-wrap input[type="text"],
.bp-messages-wrap [contenteditable="true"]{
  background:#090909!important;
  color:#fff8eb!important;
  border:1px solid rgba(215,180,90,.62)!important;
  border-radius:9px!important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.45)!important;
  font-size:16px!important;
}
.bp-messages-wrap textarea::placeholder,
.bp-messages-wrap input::placeholder{color:#a99d8c!important;opacity:1}

/* Buttons and action icons — preserve BM behavior, change only presentation */
.bp-messages-wrap button,
.bp-messages-wrap [role="button"],
.bp-messages-wrap input[type="submit"]{
  color:var(--scl-bm-cream)!important;
  border-color:rgba(215,180,90,.48)!important;
}
.bp-messages-wrap button:hover,
.bp-messages-wrap [role="button"]:hover{
  color:var(--scl-bm-gold-hi)!important;
  background-color:rgba(115,73,31,.25)!important;
}
.bp-messages-wrap [class*="send"] button,
.bp-messages-wrap button[type="submit"]{
  background:linear-gradient(180deg,#d7b45a,#a77b2e)!important;
  color:#100b07!important;
  border:1px solid #f0d37b!important;
  border-radius:8px!important;
  font-weight:700!important;
}

/* Avatars */
.bp-messages-wrap img[class*="avatar"],
.bp-messages-wrap [class*="avatar"] img{
  border:1px solid var(--scl-bm-gold)!important;
  box-shadow:0 0 0 2px rgba(0,0,0,.7)!important;
}

/* Menus, popovers, emoji/attachment panels */
.bp-messages-wrap [class*="popover"],
.bp-messages-wrap [class*="dropdown"],
.bp-messages-wrap [class*="menu"],
.bp-messages-wrap [class*="modal"]{
  background:#100d0b!important;
  color:var(--scl-bm-cream)!important;
  border-color:var(--scl-bm-gold)!important;
}

/* SCL actions injected into BM */
.bp-messages-wrap .scl-bm-button,
.bp-messages-wrap .scl-chat-video-profile-btn,
.bp-messages-wrap .scl-spark-compose{
  background:#17100b!important;
  color:var(--scl-bm-gold-hi)!important;
  border:1px solid var(--scl-bm-gold)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.3)!important;
}

/* Keep the messaging experience usable on smaller screens. */
@media (max-width:780px){
  .bp-messages-wrap{border-radius:0!important;border-left:0!important;border-right:0!important}
  .bp-messages-wrap textarea,.bp-messages-wrap input[type="text"]{font-size:16px!important}
}

/* ============================================================
 * v12.0.5 — Better Messages/Jitsi invitation readability
 * Keep actual conversation copy legible regardless of BM/link-preview theme.
 * ============================================================ */
.bp-messages-wrap .message,
.bp-messages-wrap [class*="message-item"],
.bp-messages-wrap [class*="message-content"],
.bp-messages-wrap [class*="message-text"],
.bp-messages-wrap [class*="message"] [class*="content"]{
  color:#fff8eb!important;
}
.bp-messages-wrap .message p,
.bp-messages-wrap .message span,
.bp-messages-wrap .message div,
.bp-messages-wrap .message strong,
.bp-messages-wrap .message em,
.bp-messages-wrap .message li,
.bp-messages-wrap [class*="message-content"] p,
.bp-messages-wrap [class*="message-content"] span,
.bp-messages-wrap [class*="message-content"] div,
.bp-messages-wrap [class*="message-text"] p,
.bp-messages-wrap [class*="message-text"] span,
.bp-messages-wrap [class*="message-text"] div{
  color:#fff8eb!important;
  opacity:1!important;
  text-shadow:none!important;
}
/* Links, including the Jitsi/Video Room invitation URL. */
.bp-messages-wrap .message a,
.bp-messages-wrap [class*="message-content"] a,
.bp-messages-wrap [class*="message-text"] a{
  color:#f2d88a!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(242,216,138,.65)!important;
  opacity:1!important;
}
.bp-messages-wrap .message a:hover,
.bp-messages-wrap [class*="message-content"] a:hover{
  color:#fff1b8!important;
}
/* Rich-link / URL preview cards generated by Better Messages. */
.bp-messages-wrap .message [class*="preview"],
.bp-messages-wrap .message [class*="embed"],
.bp-messages-wrap .message [class*="link"],
.bp-messages-wrap [class*="message-content"] [class*="preview"],
.bp-messages-wrap [class*="message-content"] [class*="embed"]{
  background:#15110e!important;
  color:#fff8eb!important;
  border-color:rgba(215,180,90,.48)!important;
  opacity:1!important;
}
.bp-messages-wrap .message [class*="preview"] *,
.bp-messages-wrap .message [class*="embed"] *,
.bp-messages-wrap [class*="message-content"] [class*="preview"] *{
  color:#fff8eb!important;
  opacity:1!important;
}
.bp-messages-wrap .message [class*="preview"] a,
.bp-messages-wrap .message [class*="embed"] a{
  color:#f2d88a!important;
}
/* Date separators and timestamps must not disappear into the black skin. */
.bp-messages-wrap [class*="date"],
.bp-messages-wrap [class*="timestamp"],
.bp-messages-wrap [class*="time"]{
  color:#d8c9b3!important;
  opacity:1!important;
}
/* Composer/footer: override Better Messages' white footer strip. */
.bp-messages-wrap [class*="footer"],
.bp-messages-wrap [class*="composer"],
.bp-messages-wrap [class*="input-area"],
.bp-messages-wrap [class*="reply"]{
  background:#0b0908!important;
  color:#fff8eb!important;
  border-color:rgba(215,180,90,.48)!important;
}
.bp-messages-wrap [contenteditable="true"],
.bp-messages-wrap textarea,
.bp-messages-wrap input[type="text"]{
  background:#171717!important;
  color:#fff8eb!important;
  -webkit-text-fill-color:#fff8eb!important;
}

/* v12.0.7 — Better Messages mini-widget readability + hover behavior */
/* The mini launcher can keep Better Messages' light panel, but text must be legible. */
.scl-bm-mini-widget-fix{
  --scl-mini-ink:#24180b;
  --scl-mini-gold:#8a5a12;
  --scl-mini-gold-dark:#684008;
}
.scl-bm-mini-widget-fix .scl-bm-mini-readable,
.scl-bm-mini-widget-fix .scl-bm-mini-readable *{
  color:var(--scl-mini-ink)!important;
  text-shadow:none!important;
}
.scl-bm-mini-widget-fix .scl-bm-mini-readable a,
.scl-bm-mini-widget-fix .scl-bm-mini-readable [role="tab"],
.scl-bm-mini-widget-fix .scl-bm-mini-readable button{
  color:var(--scl-mini-gold-dark)!important;
}
.scl-bm-mini-widget-fix .scl-bm-mini-readable input,
.scl-bm-mini-widget-fix .scl-bm-mini-readable input::placeholder{
  color:#5f5548!important;
  text-shadow:none!important;
}
.scl-bm-mini-widget-fix .scl-bm-mini-readable img{border-color:#9a6b22!important}

/* When the Better Messages launcher is idle, keep only its bottom launcher bar visible.
   Hovering or keyboard focus opens the panel. */
.scl-bm-hover-widget{transition:opacity .16s ease,transform .16s ease!important}
.scl-bm-hover-widget:not(:hover):not(:focus-within) .scl-bm-hover-panel{
  display:none!important;
}
.scl-bm-hover-widget:hover .scl-bm-hover-panel,
.scl-bm-hover-widget:focus-within .scl-bm-hover-panel{
  display:block!important;
}

/* v12.0.8 — force SCL/Jitsi invitation copy readable inside Better Messages.
   JS marks the exact message because Better Messages' generated class names vary by version. */
.scl-jitsi-readable,
.scl-jitsi-readable *{
  color:#fff4d6!important;
  -webkit-text-fill-color:#fff4d6!important;
  opacity:1!important;
  text-shadow:0 1px 2px #000!important;
}
.scl-jitsi-readable a,
.scl-jitsi-readable a *{
  color:#ffd86a!important;
  -webkit-text-fill-color:#ffd86a!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}
.scl-jitsi-readable .scl-jitsi-preview,
.scl-jitsi-readable [class*="preview"],
.scl-jitsi-readable [class*="embed"]{
  background:#18120c!important;
  border:1px solid rgba(215,180,90,.58)!important;
}


/* v12.0.9 — stable call-invitation colors and duplicate mini-widget rule */
.scl-jitsi-invite,.scl-jitsi-invite *,.scl-jitsi-invite-legacy,.scl-jitsi-invite-legacy *{
  color:#fff4d6!important;-webkit-text-fill-color:#fff4d6!important;opacity:1!important;
}
.scl-jitsi-invite a,.scl-jitsi-invite a *,.scl-jitsi-invite-legacy a,.scl-jitsi-invite-legacy a *{
  color:#ffd86a!important;-webkit-text-fill-color:#ffd86a!important;text-decoration:underline!important;
}
.scl-bm-hide-duplicate-mini{display:none!important;visibility:hidden!important;pointer-events:none!important}

/* v12.0.11 — actually collapse the Better Messages mini widget container.
   Earlier builds hid the panel contents but left BM's full-height black shell behind. */
.scl-bm-hover-widget{
  overflow:hidden!important;
  transition:height .16s ease,width .16s ease,opacity .16s ease!important;
}
.scl-bm-hover-widget.scl-bm-mini-collapsed{
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
}
.scl-bm-hover-widget.scl-bm-mini-collapsed:not(:hover):not(:focus-within) .scl-bm-hover-panel{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.scl-bm-hover-widget.scl-bm-mini-collapsed:hover,
.scl-bm-hover-widget.scl-bm-mini-collapsed:focus-within{
  height:var(--scl-bm-open-height,480px)!important;
  max-height:var(--scl-bm-open-height,480px)!important;
}
.scl-bm-hover-widget.scl-bm-mini-collapsed:hover .scl-bm-hover-panel,
.scl-bm-hover-widget.scl-bm-mini-collapsed:focus-within .scl-bm-hover-panel{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
