/* ──────────────────────────────────────────────────────────
   Midnight-Pro Chat Theme  •  v1.0
   Designed for Bootstrap 4 baseline markup
   ────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Thinking of Betty';
  src: url('fonts/Thinking_of_Betty.woff') format('woff'),
       url('fonts/Thinking_of_Betty.ttf')  format('truetype');
  font-weight: normal;
  font-style : normal;
  font-display: swap;
}


/* 0. Google Font & Variables */
:root {
  /* Core Palette */
  --bg-page:   #080808;   /* full-page background          */
  --bg-card:   #121212;   /* chat surface                  */
  --bg-bar:    #1a1a1a;   /* sticky input, header panels   */
  --border-ui: #2b2b2b;
  --txt-hi:    #ebebeb;   /* high-contrast text            */
  --txt-lo:    #979797;   /* secondary/tertiary            */
  --accent-1:  #25a3ff;   /* Serato-style electric blue    */
  --accent-2:  #715aff;   /* subtle violet edge-cases      */

  /* Rounding & Motion */
  --radius-lg: 0.9rem;
  --radius-sm: 0.4rem;
  --motion-fast: 150ms ease;
}

/* 1. Resets & Base */
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0;
  background: var(--bg-page);
  color: var(--txt-hi);
  font: 400 0.95rem/1.45 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-width: 305px;
}
.container { padding: 1rem; max-width: 1040px; }

/* Scrollbar (WebKit & Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--accent-1) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb {
  background: var(--accent-1);
  border-radius: 4px;
}

a { text-decoration: none !important; }

button:focus, button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
button::-moz-focus-inner { border: 0; padding: 0; }

li.item:focus { outline: none; }
li.item::-moz-focus-inner { border: 0; }

/* Header (logo, live icon, menu) */
.pageHeaderWrap {
  display: flex;
  gap: 10px;
  padding: 15px 20px 0 20px;
  align-items: center;
}
.logoFont {
  font-size: 1.5em;
  font-family: 'Thinking of Betty';
}
.logoTagline {
  text-align: right;
  font-weight: 600;
  font-size: 0.8em;
  margin-top: -10px;
}
.liveBlock {
  background: red;
  font-size: 1em;
  font-weight: 600;
  padding: 0 5px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-top: -25px;
}
.spacer { flex-grow: 1; }
.userMenuBars {
  font-size: 2em;
  cursor: pointer;
}


/* Off-canvas Menu */
.menu-backdrop {
  position: fixed; inset: 0;
  background: #00000070;
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-fast);
  z-index: 999;
}
.menu-backdrop.active { opacity: 1; pointer-events: auto; }
.user-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 260px;
	max-width: 90vw;
	height: 100vh;
	background: var(--bg-card);
	border-left: 1px solid var(--border-ui);
	transform: translateX(100%);
	transition: transform var(--motion-fast);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	padding: 1.3rem 0.95rem 5.5rem 0.95rem;
}
.user-menu.open { transform: translateX(0); }

/* Menu Links */
.user-menu a {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .65rem 0;
  border-radius: var(--radius-sm);
  color: var(--txt-hi);
  font-weight: 500;
  transition: background var(--motion-fast);
}
.user-menu a:hover { background: #ffffff08; }
.logout-link { color: #e54242; }

.menu-title {
  display: block;
  margin: 1rem 0 .3rem;
  font-size: .75rem; letter-spacing: .05em;
  color: var(--txt-lo); text-transform: uppercase;
}
.menu-header {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: -.2rem 0 1rem;
}
.menu-avatar {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-1);
}

/* Status Pill */
#socketStatus {
  width: 1rem; height: 1rem;
  margin-right: .6rem;
  border-radius: 50%;
  background: #5a5a5a;
  transition: background var(--motion-fast);
}
#socketStatus.connected { background: var(--accent-1); }
#socketStatus.error     { background: #ff4b4b; }

/* Chat Container */
#chatForm {
	width: 100%;
}

#chatMessage {
	width: calc(100% - 100px);
}

.custh4 {
	font-size: 1.1em;
}

.listenAgainIframe {
	border: none;
	width: 100%;
	height: calc(100vh - 300px);
	border-radius: 4px;
}

#chatContainer {
	background: var(--bg-card);
	border: 1px solid var(--border-ui);
	border-radius: var(--radius-lg);
	height: calc(100vh - 360px);
	max-height: 82vh;
	overflow-y: auto;
	position: relative;
	padding: .25rem 0.5rem 1.25rem 0rem;
}

/* Chat Input Bar */
#chatInputSection {
  background: var(--bg-bar);
  border-top: 1px solid var(--border-ui);
  padding: 8px;
  display: flex;
  align-items: center;
}
#chatInputSection .form-control {
  background: #0f0f0f;
  border: 1px solid var(--border-ui);
  color: var(--txt-hi);
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
}
#chatInputSection .form-control::placeholder { color: var(--txt-lo); }
#chatInputSection .form-control:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 2px #25a3ff44;
}
#chatInputSection .btn {
  margin-left: .5rem;
  background: var(--accent-1); border: none;
  color: var(--bg-page);
  padding: 0.1rem 1rem;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast), transform var(--motion-fast);
}
#chatInputSection .btn:hover { background: var(--accent-2); }
#chatInputSection .btn:active { transform: scale(.96); }


#chatInputSection .btn i {
 font-size: 2em; 
}


/* Message Bubbles */
.chat-message {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 15px 0 0 0;
	background: #1e1d1d;
	padding: 15px 4px 4px 4px;
	border-radius: 4px;
}


.chat-avatar {
  width: 2.2rem; height: 2.2rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.msg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2em;
  font-size: 0.85em;
}
.sender-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0;
}
.sender {
  font-weight: 500;
  color: var(--accent-1);
}
.meta-time {
  font-size: 0.62rem;
  color: var(--txt-lo);
  line-height: 1em;
}
.content {
  word-break: break-word;
  color: var(--txt-hi);
}
/* System messages */
.chat-message.system .sender { color: var(--accent-2); }
.chat-message.system .content { font-style: italic; color: var(--txt-lo); }

/* Avatar Picker */
.avatar-preview, .avatar-option {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: box-shadow var(--motion-fast), transform var(--motion-fast);
}
.avatar-preview { border: 2px solid var(--accent-1); }
.avatar-option:hover { transform: translateY(-2px); }
.avatar-option.selected {
  box-shadow: 0 0 0 2px var(--accent-1);
}

#count {
	background: #626462;
	color: white;
	font-size: 1em;
	font-weight: 600;
	padding: 0 5px;
	height: 20px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	margin-top: -25px;
}

/* Feedback Text */
.feedback {
  color: #ff4b4b;
  font-size: 0.85rem;
}

/*─────────────────────────────────────
  Reaction bar  (layout + your polish)
─────────────────────────────────────*/
#reaction-bar{
  /* ============ new/changed ============ */
  display:flex;
  justify-content:center;      /* fallback that works everywhere        */
  gap:2px;                    /* modern spacing (ignored on old Safari)*/

  /* ============ kept from yours ============ */
  background:var(--bg-bar);
  padding:16px 4px 4px 4px;
  border-radius:32px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--border-ui);
  margin:10px 0;
}

/* browsers that DO understand `space-evenly`
   will override the fallback above            */
@supports (justify-content:space-evenly){
  #reaction-bar{justify-content:space-evenly;}
}

/*─────────────────────────────────────
  Reaction button
─────────────────────────────────────*/
.reaction-btn{
  /* ============ new/changed ============ */
  width:2rem;                 /* fixed box – tweak if you like */
  height:2.1rem;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;                /* kill stray vertical space     */
  font-size:0;                  /* kill stray *horizontal* space */

  /* ============ kept from yours ============ */
  position:relative;
  background:none;
  border:none;
  cursor:pointer;
  color:#fff;
  transition:transform 120ms ease;
}
.reaction-btn:active{transform:scale(1.27);}

/* the emoji itself (restore visible size) */
.reaction-btn .emoji{font-size:26px;}

/* count badge – small right offset so it peeks out */
.reaction-btn .count{
  position:absolute;
  top:-10px;
  right:-6px;
  background:var(--accent-1);
  color:#111;
  border-radius:10px;
  font-size:11px;
  line-height:16px;
  min-width:16px;
  padding:0 3px;
  user-select:none;
  pointer-events:none;
}

/*─────────────────────────────────────
  Your existing floating-emoji bits
  (unchanged; just keep them)
─────────────────────────────────────*/
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0) rotate(var(--rot));opacity:1;}
  100%{transform:translateY(-100vh) translateX(var(--drift)) rotate(var(--rot));opacity:0;}
}
.floating-emoji{
  position:absolute;
  bottom:0;
  font-size:34px;
  pointer-events:none;
  animation:floatUp 2.2s ease-out forwards;
  will-change:transform,opacity;
}


/* Play Button */
#playBtn{
  /* kill the browser’s built-in styling */
  -webkit-appearance:none;      /* iOS / Safari */
          appearance:none;      /* modern spec   */
  padding:0;                    /* remove UA padding          */	
	
  display:flex;                 /* create a flex-container        */
  align-items:center;           /* vertical centring              */
  justify-content:center;       /* horizontal centring            */

  /* keep the rest of your styling… */
  border:none;
  background:red;
  box-shadow:
    /* outer glow on dark bg */
    0 0 8px rgba(255, 90, 95, 0.6),
    /* main drop-shadow */
    0 4px 12px rgba(0, 0, 0, 0.6),
    /* subtle inner shine */
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color:#fff;
  border-radius:50%;
  width:60px !important;
  height: 60px !important;
  min-width:60px !important;
  min-height: 60px !important;
  max-width:60px !important;
  max-height: 60px !important;
  font-size:2em;                /* how big the ▸ looks            */
  line-height:1;                /* reset the inherited 0          */
}
#playBtn i{ pointer-events:none; }

.rotating {
  animation: spin 2.2s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


#playBtn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Helpers */
.flexRowWrapCentered {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 5px;
}
.flexColWrapCentered {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}


/* ===== Bot welcome card ===== */
.chat-message.system .bot-welcome {
	background: #1e1e1e;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 0.5rem;
	line-height: 1.2;
	color: #dcdcdc;
}

.chat-message.system .bot-welcome header {
  display: flex;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.chat-message.system .bot-welcome .wave {
  font-size: 1.15rem;
  margin-right: 0.4rem;
}

.chat-message.system .bot-welcome .bot-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.chat-message.system .bot-welcome .bot-list li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.3rem;
}

.chat-message.system .bot-welcome .bot-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ff69b4;              /* pick your brand accent */
}

.chat-message.system .bot-welcome a {
  color: #4da3ff;              /* link colour */
  text-decoration: underline;
}

.chat-message.system .bot-welcome a:hover {
  text-decoration: none;
}

.chat-message.system .bot-welcome .reactions {
  white-space: nowrap;         /* keep emojis together */
}

.chat-message.system .bot-welcome small {
  opacity: 0.75;
  font-size: 0.8em;
}


/*  fading + collapsing  */
@keyframes vanish {
  0%   { opacity: 1; max-height: 6rem; margin-bottom: .5rem; }
  80%  { opacity: 0; }
  100% { opacity: 0; max-height: 0; margin-bottom: 0; }
}

/* only rows that ALSO carry .transient will vanish */
.chat-message.system.transient {
  animation: vanish 1s ease-out forwards;   /* 1 s fade/shrink */
  animation-delay: 4s;                      /* visible for 4 s → gone at 5 s */
}

.refreshListenAgain {
  margin-left: .5rem;
  background: var(--accent-1);
  border: none;
  color: var(--bg-page);
  padding: 0.1rem 1rem;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast), transform var(--motion-fast);
  cursor: pointer;
}

.fontSizeWrapper {
  font-size: 0.8em;
  color: var(--txt-lo);
}

.fontSizeWrapper i {
	font-size: 1.5em;
	padding: 0 1px;
	color: #25a3ff;
}


  /* visually “disable” an icon */
  .fontSizeWrapper .disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }


.pulse {
	animation: pulse 1s ease 0s infinite normal forwards;
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}


/* ─── per‐message reaction summary ─── */
.reaction-summary {
	display: inline-block;
	width: max-content;
	color: white;
	border-radius: 4px;
}

.emoji-stack-wrap {
	position: absolute;
	bottom: -6px;
	display: flex;
	right: 10px;
	background: var(--dark);
	padding: 2px 4px;
	border-radius: 8px;
}

/* the small summary button (emoji + count) */
.reaction-summary .summary-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.1em 0.2em;
  border-radius: 0.25em;
  transition: background-color 0.2s;
}
.reaction-summary .summary-btn:hover {
  background-color: rgba(0,0,0,0.05);
}

/* the pop over for full details */
.reaction-summary .reaction-details {
	position: absolute;
	bottom: 60%;
	left: 50%;
	transform: translate(-50%);
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	border-radius: 0.3em;
	padding: 0.5em;
	display: flex;
	gap: 0.4em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	z-index: 1000;
}

/* visible state */
.reaction-summary .reaction-details.visible {
  opacity: 1;
  pointer-events: auto;
}

/* each detail button */
.reaction-summary .detail-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.2em;
  border-radius: 0.25em;
  transition: background-color 0.2s;
}
.reaction-summary .reaction-details .detail-btn:hover {
  background-color: rgba(0,0,0,0.05);
}


/* if there are no reacts yet, hide the placeholder trigger */
.reaction-summary .summary-btn.empty {
  opacity: 0;
  transition: opacity 0.2s;
}
/* but on chat-bubble hover, reveal it */
.chat-message:hover .reaction-summary .summary-btn.empty {
  opacity: 1;
}

/* make the placeholder icon gray so it looks like a UI hint */
.emojiPlaceholder {
	font-size: 2em;
	color: var(--txt-lo);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #000c;
	padding: 12px;
	border-radius: 50%;
}

/* stack up to three emojis in the summary button */
.reaction-summary .summary-btn .emoji-stack {
  display: inline-flex;
}
.reaction-summary .summary-btn .emoji-stack .emoji {
  margin-left: -0.4em;       /* overlap each circle */
  border: 2px solid var(--bg-card); /* mask the overlaps */
  border-radius: 50%;
  background: #fff;          /* white backing behind icon */
}
.reaction-summary .summary-btn .emoji-stack .emoji:first-child {
  margin-left: 0;
}

/* badge styling persists from before */
.reaction-summary .summary-btn .total {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-1);
  color: #111;
  border-radius: 10px;
  font-size: 11px;
  line-height: 16px;
  min-width: 16px;
  padding: 0 3px;
  user-select: none;
  pointer-events: none;
}


/* hide the extra “add” icon by default */
.hidden-hover {
  display: none;
}
/* show it when you hover anywhere on the chat-message */
.chat-message:hover .hidden-hover {
  display: inline-flex;
}



/* DJ SESSION START */
/* DJ SESSION – Midnight-Pro compatible, fully namespaced */
.djui { font: 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--txt-hi); }
.djui .dj-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; }

.djui .dj-btn {
  border:1px solid var(--border-ui);
  background: #0f0f0f;          /* contrasts with --bg-card */
  color: var(--txt-hi);
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  cursor:pointer;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}
.djui .dj-btn:hover { background:#151515; border-color:#3a3a3a; }
.djui .dj-btn:active { transform:scale(.98); }
.djui .dj-btn--danger { border-color:#b00; color:#ff8a8a; }
.djui .dj-btn--ghost { border-color:#666; color:#cfcfcf; background:transparent; }

.djui .dj-badge {
  border:1px solid var(--border-ui);
  padding:4px 6px;
  border-radius: var(--radius-sm);
  font-size:11px;
  color: var(--txt-lo);
  background: var(--bg-bar);
}

#djButtons { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
#djButtons .djbtn {
  border:1px solid var(--border-ui);
  background: var(--bg-card);
  color: var(--txt-hi);
  font-weight:600;
  font-size:13px;
  padding:8px 10px;
  border-radius: 6px;
  cursor:pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), outline-color var(--motion-fast);
}
#djButtons .djbtn:hover { background:#151515; border-color:#3a3a3a; }
#djButtons .djbtn.active { outline:2px solid #20ff00; outline-offset:0; } /* swap to var(--accent-1) if you prefer */
#djButtons .djbtn:active { transform:scale(.98); }

/* Modal */
.dj-modal { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:none; align-items:center; justify-content:center; z-index:10000; }
.dj-modal .box {
  background: var(--bg-card);
  border:1px solid var(--border-ui);
  min-width:360px; max-width:90vw;
  border-radius: var(--radius-lg);
}
.dj-modal .title { font-weight:700; border-bottom:1px solid var(--border-ui); padding:8px; color: var(--txt-hi); }
.dj-modal .txt {
  width: calc(100% - 12px);
  margin:6px;
  border:1px solid var(--border-ui);
  background:#0f0f0f; color: var(--txt-hi);
  padding:6px; font-size:13px; border-radius: var(--radius-sm);
}
.dj-modal .dj-row.right { justify-content:flex-end; padding:6px; }

/* DJ SESSION END */


.now-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-bar);
	border: 1px solid var(--border-ui);
	color: var(--txt-hi);
	border-radius: var(--radius-sm);
	padding: 2px 5px;
	margin: 0 4px;
	font-size: .9rem;
}

.now-pill .dot{
	display: none;
  width:4px; height:4px; border-radius:50%;
  background: var(--accent-1); box-shadow: 0 0 6px var(--accent-1);
}
.now-pill .label {
	color: var(--txt-lo);
	font-weight: 500;
	max-width: min-content;
	line-height: 0.8em;
	font-size: 0.75em;
}


#nowControlName {
	font-size: 0.9em;
}


.controls {
	text-align: center;
}

#status {
	width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100vw - 100px);

}

.rightOfPlayControls {
	margin-bottom: 20px;	
}

.listenAgainLinkPebble {
	background: #25a3ff;
	color: black;
	display: inline-flex;
	gap: 5px;
	align-items: baseline;
	border-radius: 4px;
	font-size: 0.8em;
	padding: 1px 4px;
	font-weight: 600;
}