body { background:#121827; color:#e5e7eb; }
    .dropzone { border-radius:8px; padding:14px; background:#0b1220; }
    .thumbs { display:flex; gap:6px; /* margin-top:6px; */ flex-wrap: wrap; }
    .thumb-wrap { position:relative; display:inline-block; }
    .thumb-wrap .remove-btn {
      position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
      background:#0b1220; border:1px solid #475569; color:#94a3b8; font-size:12px; line-height:16px;
      display:none; align-items:center; justify-content:center; cursor:pointer; user-select:none;
    }
    .thumb-wrap:hover .remove-btn { display:flex; }
    .thumb { width:24px; height:24px; object-fit:cover; border-radius:2px; margin-top: -5px; margin-bottom: -5px;}
/*    .btn { font-size:0.875rem; font-weight:600;}*/
/*    .btn:hover { text-decoration: underline; }*/
    .chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:9999px;
      background:#0b1220; border:1px solid #1f2937; color:#9ca3af; font-size:12px; margin-right:6px; }
    .chip button { color:#64748b; cursor:pointer; }
    .blue { color:#60a5fa; }
/*    .muted { color:#9ca3af; }
    .hidden { display:none; }   */
    .panel { 
/*      background:#0b1220; */
      background:#010101; 
/*      border:1px solid #1f2937; */
      border-radius:8px; 
      padding:16px; 
    }

  .chat { display:flex; flex-direction:column; gap:10px; }
  .msg { min-width: 6%; max-width: 84%; padding:8px 14px; border-radius:20px; font-size:0.85rem; line-height:1.35; }
  .msg.me   { align-self:flex-end; background: #008aff; /* background:#1f2a44; border:1px solid #314462; */ margin-right: 12px;}
  .msg.bot  { align-self:flex-start; background: rgba(255,255,255,.15); /* background:#0b1220; border:1px solid #1f2937; */ }
  .msg small { display:block; opacity:.7; font-size:.75rem; margin-top:6px; }

  #promptInput {
    background: rgba(255,255,255,.95);
    padding: 1%;
    color: #121827;
    outline: none;
    border-radius: 3px;
    margin: 0;
  }

  #runPromptBtn {
    background: #008aff;
    color: #fff;
    border-radius: 3px;
    padding: 4px;
    margin: 0;
    vertical-align: top;
    text-align: center;
    width: 5%;
/*    display: inline-block;*/
    font-size: 18px;
    text-decoration: none;
  }

#statusText {
    font-family: "new-science-mono", monospace;      
}

/* container fills available space and pushes composer to bottom */
#chat-main-container {
  display: grid;
  grid-template-rows: 1fr auto; /* messages | composer */
  gap: 12px;
  min-height: 0; /* important for overflow children */
  background: url(ui/musicatlas_robin_background.png) no-repeat center top;
  background-size: contain;  
}

/* scrollable messages area */
#resultsWrap {
  min-height: 0;        /* prevents overflow collapse */
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain; /* keep scroll inside the panel */
  scroll-behavior: smooth;  
}

/* For WebKit browsers (Chrome, Safari, Edge) */
#resultsWrap::-webkit-scrollbar {
  width: 8px;            /* width of the scrollbar */
}

#resultsWrap::-webkit-scrollbar-track {
  background: #0b1220;     /* scrollbar background track */
}

#resultsWrap::-webkit-scrollbar-thumb {
/*  background: #334155;*/
  background: rgba(255,255,255,.2);     /* scrollbar thumb color */
  border-radius: 6px;
}

#resultsWrap::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* composer is natural height at the bottom */
#robin-prompt {
  align-self: stretch;   /* full width */
}

#catalogsPanel input[type="checkbox"] { transform: translateY(1px); }
#catalogsPanel label { display:flex; align-items:center; gap:8px; }

.msg.bot.track-list { max-width: 100% ;background: #000; border-radius: 5px; width: 99%; }
.tracks-table { width:100%; border-collapse: collapse; font-size: 0.75rem; }
.tracks-table th, .tracks-table td { padding: 6px 4px; border-bottom: 1px solid #1f2937; vertical-align: middle; }
.tracks-table th { text-align: left; font-weight: 600; color:#cbd5e1; }
.tracks-table .results-row-preview {  
  width: 45px;
}
.tracks-table td { color:#dcdcdc; }
.tracks-table td button.stop { display: none; }
.tracks-table td .muted { color:#9ca3af; }
.tracks-table .btn-xs { font-size:.65rem; padding:6px 10px; border:1px solid #334155; border-radius:8px; background:#0b1220; color:#e5e7eb;   opacity:.7; }
.tracks-table .btn-primary-xs { font-size:.65rem; padding:6px 10px; border-radius:8px; 
/*  background:#008aff; */
  color:#fff; cursor:opacity:.7; border:0; 
}
.tracks-table .preview-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#334155; margin-right:8px; }

.tracks-table .btn-xs.play, .tracks-table .btn-xs.stop {
  cursor: pointer;
}

.tracks-table.playing td {color: #676767}
.tracks-table.playing td .muted {color: #676767}
.tracks-table.playing .currently-playing td {color: #fff}
.tracks-table.playing .currently-playing td .muted {color: #9ca3af}
.tracks-table.playing .currently-playing td button.stop { display: inline; }
.tracks-table.playing .currently-playing td button.play { display: none; }

.tracks-table .btn-xs.js-preview {
  border: none;
  border-radius: 0;
  background: none;
}

.tracks-table .btn-xs.js-preview img { 
  height: 12px;
}

.tracks-table .btn-xs.save {
  border: none;
  border-radius: 0;
  background: none;
  cursor: pointer;
}

.tracks-table .btn-xs.save img { 
  height: 12px;
}

.tracks-table .btn-xs.save img.saved-yes { 
/*  display: none;*/
}

.robin-player-ui button img {
  height: 16px;
  display: inline-block;
  margin: 0;
}

.robin-player-ui button {
  padding: 0 4px 4px 4px;
  width: 24px;
  text-align: left;
}

#miniPlayer input[type="range"] {
  -webkit-appearance: none; /* For WebKit browsers (Chrome, Safari, Edge) */
  appearance: none; /* Standard property */
  width: 100%; /* Or a specific width */
  background: transparent; /* Remove default background */
  cursor: pointer;
  margin: 0;
}

#miniPlayer input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255,255,255,.65); /* Track color */
  height: 1px; /* Track height */
  border-radius: 1px; /* Rounded corners */
}

#miniPlayer input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 7px; /* Thumb width */
  height: 3px; /* Thumb height */
  background: rgba(255,255,255,.65);
/*  border-radius: 50%; */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  margin-top: -1px;
}

#miniPlayer input[type="range"]::-moz-range-progress {
  background: #04AA6D; /* Color of the filled portion */
  border-radius: 4px;
}

#miniPlayer input[type="range"] {
  accent-color: #04AA6D; /* Sets the primary color for the slider */
}

#miniPlayer .muted {
  color: rgba(255,255,255,.75);
}

#mp-actions button {
  color: #ddd;
  font-size: 11px;
  padding: 6px 7px;
  margin: 4px 0 4px 0;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0);
  letter-spacing: 0.2px;
  display: inline-block;
  background: rgba(255,255,255,.125);
}

#mp-actions button:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
/*  border: 1px solid rgba(255,255,255,.5);*/
  border: 1px solid rgba(255,255,255,.2);
}


.msg.bot.ref-seeds { background: rgba(255,255,255,.10); }
.ref-seeds-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.ref-seed-btn {
  border:1px solid #334155; background:#0b1220; color:#e5e7eb; border-radius:9999px;
  font-size:.75rem; padding:6px 10px; cursor:pointer;
}
.ref-seed-btn:hover { border-color:#475569; }

.robin-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: bottom;
  border-radius: 50px;
}

/* ===== Robin Lyrics Overlay (reusable) ===== */
.ra-overlay {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(18,25,40,0.66);
  backdrop-filter: blur(3px);
  z-index: 2000;
}
.ra-overlay.show { display: flex; animation: raFadeIn .15s ease-out; }
@keyframes raFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ra-modal {
  width: min(92vw, 640px);
  max-height: min(82vh, 720px);
  background: rgba(0,0,0,.78);
/*  border: 1px solid #1f2937;*/
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.ra-header {
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(160,175,210,0.12);
}
.ra-title {
  flex:1 1 auto; min-width:0;
}
.ra-title .track { display:block; font-weight:600; font-size:16px; color:#dce4ff; line-height:1.3; }
.ra-title .artist{ display:block; font-size:12px; color:#aab1c2; line-height:1.25; }

.ra-close {
  background:#2a3143; border:0; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ra-close img { width: 14px; height: 14px; opacity:.85; }

.ra-body {
  padding: 14px; overflow: auto;
}
.ra-lyrics {
  white-space: pre-wrap; word-wrap: break-word;
  font-size: 14px; line-height: 1.5;
  color: #e5e7eb;
}

.ra-lyrics em {
  background: #ff00cc; color: #fff
}

.ra-footer {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 14px; border-top: 1px solid rgba(160,175,210,0.12);
}
.ra-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; font-size:11px;
  background:#10131a; border:1px solid #283046; color:#cfd7ff;
}
.ra-action {
  border:0; border-radius:8px; padding:8px 12px; font-size:12px; font-weight:600;
  background:#0b1220; color:#e5e7eb; border:1px solid #334155; cursor:pointer;
}
.ra-action.primary {
  background:#008aff; border-color:transparent; color:#fff;
}
.ra-muted { color:#9ca3af; font-size:12px; }

/* small helper if you want to dim background when overlay shows */
body.ra-lock { overflow: hidden; }

/* Hide the bottom bar entirely */
.ra-footer { display: none !important; }

/* ===== Robin Video Overlay (compact, non-conflicting) ===== */
.rv-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:2100}
.rv-overlay.show{display:flex;animation:rvFade .15s ease-out}@keyframes rvFade{from{opacity:0}to{opacity:1}}

.rv-modal{
  width: min(96vw, 980px);
  height: clamp(560px, 88vh, 860px);  /* 👈 fixed against viewport */
  background: rgba(0,0,0,.78);
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  display:grid;
  grid-template-rows:auto 1fr auto;  /* header | body | footer */
  overflow:hidden;
  position: relative;
}

/*.rv-header-right{display:flex;align-items: right;gap:8px}*/
.rv-header-right{ justify-self:end; }

/* New: match lyrics close button */
.rv-close{
  background:#2a3143;
  border:0;
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items: center;
  justify-content: center;
  cursor:pointer;
}

header .rv-close img{
  width:14px;
  height:14px;
  opacity:.85;
  margin-bottom: 0;
  padding: 0;
}

.rv-header{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 16px 8px;            /* was: 44px top padding; not needed now */
  border-bottom:1px solid rgba(255,255,255,.08);
  background:none;
}


.rv-title{font-size:16px;font-weight:600;color:#dce4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-sub{font-size:12px;color:#aab1c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-search{display:flex;gap:8px;align-items:center}
.rv-search input{font-size: 12px; width:320px;max-width:44vw;background:rgba(255,255,255,.1);
/*  border:1px solid rgba(255,255,255,.15);*/
  color:#e5e7eb;border-radius:8px;padding:8px 10px;outline:none}
.rv-btn{border-radius:8px;
/*  border:1px solid #334155;*/
  background:#0b1220;color:#e5e7eb;padding:6px 10px;font-size:12px;cursor:pointer}
.rv-btn:hover{border-color:#475569}

.rv-body{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:12px;
  padding:12px 16px;
  overflow:hidden;
  min-height:0;         /* 👈 allow children to size/scroll correctly */
  align-items:stretch;
}

/* Left column stacks: video grows, controls hug content */
.rv-left{
  display:grid;
  grid-template-rows:1fr auto;  /* video | controls */
  min-height:0;
}

@media (max-width:900px){.rv-body{grid-template-columns:1fr}}
#rv-video{width:100%;aspect-ratio:16/9;background:#0b1220;border-radius:8px;
/*  border:1px solid rgba(255,255,255,.12);*/
  object-fit:cover}
.rv-controls{display:flex;align-items:center;gap:8px;margin-top:6px}
.rv-offset{display:flex;align-items:center;gap:8px;margin-left:auto}
#rv-offset{width:220px}
/* Hide the offset control for now */
.rv-offset { display: none; }

.rv-results{
  overflow:auto;  /* right column scrolls independently */
  min-height:0;
}

.rv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:1200px){.rv-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.rv-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.rv-grid{grid-template-columns:repeat(2,1fr)}}
.rv-thumb{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.12)}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rv-thumb .rv-chip{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);color:#dce4ff;font-size:11px}
.rv-thumb.selected{outline:2px solid #60a5fa}
.rv-footer{padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#aab1c2;text-align:left;display:flex;gap:10px;align-items:center;justify-content:space-between}
.rv-credit a{color:#dce4ff;text-decoration:none}
/* Aspect modes for the preview video */
.rv-modal.rv-horizontal #rv-video { aspect-ratio: 16/9; object-fit: cover; }
.rv-modal.rv-vertical   #rv-video { aspect-ratio: 9/16;  object-fit: contain; }
.rv-modal.rv-square     #rv-video { aspect-ratio: 1/1;   object-fit: contain; }

/* All tiles share the same 16:9 box to avoid uneven row heights */
.rv-thumb { aspect-ratio: 16 / 9; margin: 5px;}
.rv-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* Vertical/square clips are letterboxed inside the same box */
.rv-thumb.v img,
.rv-thumb.s img { object-fit: contain; background: rgba(0,0,0,.35); }

/* Flexible box that never overflows the modal */
.rv-video-wrap{
  position: relative;
  display: flex;
  align-items: flex-start;  /* ⬅️ top-align instead of center */
  justify-content: center;
  overflow: hidden;
  height: min(60vh, calc(92vh - 220px));
}

/* Default: landscape fills width */
#rv-video{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Vertical / square: prioritize height so it fits inside the box */
.rv-modal.rv-vertical #rv-video,
.rv-modal.rv-square   #rv-video{
  width: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.rv-player-btn {
  width: 40px;
  text-align: center;
  padding: 3px;
  margin: 0 10px;
}

.rv-player-btn img {
  width: auto;
  height: 24px;
}

/* Dim all thumbs while playing; undim on hover and on the selected tile */
.rv-overlay.rv-playing .rv-thumb { opacity: .45; filter: grayscale(30%); transition: opacity .12s ease; }
.rv-overlay.rv-playing .rv-thumb:hover,
.rv-overlay.rv-playing .rv-thumb.selected { opacity: 1; filter: none; }

  /* Hidden by default (desktop) */
  #mobileSoon { display: none; }

  /* Show the placeholder and hide the app on small screens */
  @media (max-width: 768px) {
    #mobileSoon {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 28px;
      margin:40px 0;
      color: #e5e7eb;
      z-index: 9;
    }
    #mobileSoon .box {
      max-width: 520px;
      background: rgba(0,0,0,.55);
/*      border: 1px solid rgba(160,175,210,0.12);*/
      border-radius: 12px;
      padding: 20px 18px;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    #mobileSoon h1 { font-size: 18px; margin: 10px 0 6px; }
    #mobileSoon p  { font-size: 13px; opacity: .85; margin: 0 0 14px; }
    #mobileSoon .btn {
      display: inline-block;
      background: #008aff;
      color: #fff;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
    }

    /* Hide the rest of the app on mobile */
    .desktop-only { display: none !important; }
  }