@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap');

body {
  font-family: 'Indie Flower', cursive;
  letter-spacing: 0.5px;
  background: #fffef9 url('/noregrets/plastic-texture.jpg');
  background-size: cover;
  background-position: center;
  color: #203f60;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

/* === Wrapper (Main Box) === */
.wrapper {
  width: 90%;
  max-width: 360px;
  text-align: center;
  background-color: none;
  padding: 14px;
  border-radius: 18px;
  border: 2px solid #7c7c7c;

  /* Border image settings */
  background-image: url('/noregrets/border-frame.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: none;
}

/* === Header === */
header img.cover-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.25);
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
header img.cover-image {
  transition: transform 0.3s ease;
}

header img.cover-image:hover {
  transform: scale(1.8);
}

/* Header */
header h1 {
  font-family: 'Homemade Apple', cursive;
  font-size: 1.4rem;
  margin-bottom: 0;
  letter-spacing: 0.5px;
}
header h2 {
  font-family: 'Indie Flower', cursive;
  font-size: 1rem;
  font-weight: bold;
  margin-top: -2px;
  margin-bottom: 18px;
  color: #506164;
  letter-spacing: 2px;
}

/* Player */
.player {
  margin-bottom: 20px;
}
/* ---------- Hand-drawn player layout ---------- */

/* container for top (play) */
.player-top {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0px; /* space between play and progress */
}

/* row with progress + loop button */
.player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* progress area */
.progress-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* progress track (uses your hand-drawn image as the background) */
.progress-track {
  position: relative;
  margin-left: 10%;
  width: 100%;
  height: 10px; /* height of your hand-drawn track */
  background: url('/noregrets/progress-track.svg') center/100% 100% no-repeat;
  overflow: visible; /* allows knob to overflow */
}


/* knob (circular indicator) - centered vertically on the track */
.progress-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 17px;   /* knob diameter — adjust to match your artwork */
  height: 17px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  background: #405b6f; /* fallback color (matches mockup blue) */
  z-index: 5;
  transition: transform 0.08s linear;
  pointer-events: auto;
  cursor: pointer;
}

/* play/pause button centered above (uses your SVG) */
.control-btn {
  border: none;
  background: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* icon */
.control-icon {
  width: 35px; /* make big like your mockup */
  height: 35px;
  object-fit: contain;
}
.hidden { display: none !important; }

/* loop button on the right of the bar */
.loop-btn .control-icon {
  width: 20px;
  height: 20px;
}

/* loop active state */
.loop-btn.active .control-icon {
  filter: brightness(1.7);
}

/* responsive tweaks */
@media (max-width: 480px) {
  .progress-track { height: 14px; }
  .progress-knob { width: 24px; height: 24px; }
  .control-icon { width: 36px; height: 36px; }
}

.cd-art {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-bottom: 1px;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
audio {
  width: 80%;
}

/* === Online Status Indicator === */
.status-indicator {
  display: flex;
  align-items: left;
  justify-content: left;
  margin-bottom: 6px;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: bold;
  font-style: italic;
}

.status-indicator .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator .dot.online {
  background-color: #65e585; /* green */
}

.status-indicator .dot.offline {
  background-color: #e86c65; /* red */
}

.status-text {
  color:#203f60;
}

/* === Chat Box === */
.chat {
  border: 1px solid #9dadb1;
  border-radius: 10px;
  background-color: #f9f9f9;
  padding: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* --- Messages --- */
.chat-messages {
  font-family: "Indie Flower", cursive;
  font-size: 0.9rem;
  letter-spacing: 0.8px;
  height: 140px;
  overflow-y: auto;
  text-align: left;
  margin-bottom: 8px;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar {
  width: 6px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: #a0b2c2;
  border-radius: 10px;
}

/* --- Input Row (full width horizontal) --- */
.chat-input {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 6px;
}

/* Name input = 30% width */
#nameInput {
  flex: 0 0 30%;
  max-width: 30%;
  padding: 6px;
  border: 1px solid #9dadb1;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
}

/* Chat input = 80% width minus send button */
#chatInput {
  flex: 1 1 80%;
  max-width: 80%;
  padding: 6px;
  border: 1px solid #9dadb1;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
}

/* Send button */
#sendBtn {
  padding: 6px 6px;
  border: 1px solid #9dadb1;
  text-align: center;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
#sendBtn:hover {
  background: #9edfb8;
}

/* Placeholder style */
.placeholder {
  color: #999;
  font-style: italic;
}

/* --- Mobile adjustment --- */
@media (max-width: 480px) {
  .chat-input {
    flex-direction: column;
    align-items: stretch;
  }
  #nameInput, #chatInput, #sendBtn {
    flex: 1 1 100%;
  }
}

/* === Footer === */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 6px;
}
.msg-time {
  color: #aaa;
  font-size: 0.75rem;
  margin-right: 4px;
}

.msg-name {
  color:#6d8b8d;
  font-weight: bold;
  margin-right: 4px;
}

.msg-name.artist {
  color: #48c25e; /* your signature color */
  font-family: 'Indie Flower', cursive;
}

.msg-text {
  color: #333;
}

/* social icons container */
.socials {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* shared style for all icons */
.icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin: 0 4px;
  margin-bottom: 4px;
  transition: transform 0.25s ease, filter 0.25s ease;
  vertical-align: middle;
}

/* hover effect for all icons */
.icon:hover {
  transform: scale(1.15);
  filter: brightness(1.2);
}

/* share button */
.share-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* share icon slightly smaller */
.share-btn .icon {
  width: 28px;
  height: 28px;
}

/* generic button + input styling */
button, input {
  border: 1px solid #9a9a9a;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
}

/* generic button hover */
button:hover {
  background: #f2f2f2;
}

/* share button hover override (no weird pink box) */
.share-btn:hover {
  background: none;
  transform: scale(1.1);
  filter: brightness(1.15);
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* === Audio Player Cleanup === */

/* Hide download button (Chrome, Edge) */
audio::-internal-media-controls-download-button {
  display: none;
}

/* Hide playback speed menu (Safari, Chrome) */
audio::-webkit-media-controls-playback-rate-button {
  display: none !important;
}

/* Prevent download via right-click or overflow menu */
audio::-webkit-media-controls-enclosure {
  overflow: hidden;
}

/* === Safari-specific fix: hide playback speed menu === */
audio::-webkit-media-controls-playback-rate-button {
  display: none !important;
  -webkit-appearance: none;
}

/* === Mobile Adjustments === */
@media (max-width: 480px) {
  .wrapper {
    max-width: 320px;
    padding: 10px;
  }

  header img.cover-image {
    width: 90px;
    height: 90px;
  }

  .cd-art {
    width: 150px;
    height: 150px;
  }

  .chat-messages {
    height: 100px;
  }

  .icon {
    width: 28px;
    height: 28px;
    margin: 0 3px;
  }

  .share-btn .icon {
    width: 26px;
    height: 26px;
  }
}

/* === Chat Message Fade-in Animation === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-messages div {
  opacity: 0.7;
  animation: fadeInUp 0.2s ease forwards;
}

/* === Countdown Popup === */
#countdown-popup {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 249, 0.6); /* light transparent paper tone */
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  transition: opacity 1.5s ease;
}

/* inner box */
.countdown-box {
  background: rgba(251, 255, 255, 0.95);
  opacity: 0.7;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
}

/* text + font styles */
.countdown-text {
  font-family: 'Indie Flower', cursive;
  letter-spacing: 0.7px;
  font-size: 1.1rem;
  color: #333;
}

#countdown-timer {
  font-family: 'Homemade Apple', cursive;
  font-size: 3rem;
  color: #222;
}

/* hide site content until countdown ends */
body.locked main {
  opacity: 0.3;
  filter: blur(1px);
  pointer-events: none;
  user-select: none;
}