/* Inline styles (chat bubbles + composer) -->
    /* ===== Layout: make composer stick to bottom, messages scroll ===== */
  /* Layout just for the sidebar iframe */

/* Header row: "Nostr Chat" on left, Hide button on right */
/* =========================================================
   Base
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;

  /* Keep the iframe matched to the visible viewport. */
  height: 100vh; /* fallback */
  height: 100dvh;

  box-sizing: border-box;
  background: #000;
  color: #f2f2f2;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Inside /live/index.html, fill the iframe itself. This avoids Firefox
   calculating dvh from a viewport that is taller than the iframe box. */
html.is-embedded,
html.is-embedded body {
  height: 100%;
  min-height: 0;
}

/* nav.css reserves 78px for the mobile bottom dock whenever the viewport is
   720px wide or less. The sidebar iframe is narrow even on desktop, but it
   deliberately has no dock, so cancel that otherwise-empty space. */
html.is-embedded body {
  padding-bottom: 4px !important;
}

body {
  display: flex;
  flex-direction: column;
  padding: 4px;
  overflow: hidden;
  font-size: 14px;
}

/* =========================================================
   Header
   ========================================================= */

h3 {
  margin: 0 0 4px 0;
  padding: 0;
  font-size: 15px;
  flex-shrink: 0;
  text-align: left;
}

/* =========================================================
   Messages container
   ========================================================= */

#messages {
  margin: 2px 0 0 0;
  padding: 0;
  list-style: none;
  padding-bottom: 4px;

  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

/* =========================================================
   Message bubble
   ========================================================= */

.msg {
  margin: 3px 0;
  padding: 5px 8px;

  display: flex;
  gap: 6px;
  align-items: flex-start;

  background: #141414;
  border-radius: 8px;
  border: 1px solid #1f1f1f;
}

/* Avatar */
.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Message text wrapper */
.msg-text {
  flex: 1;
  min-width: 0;
}

/* Username */
.user-link {
  font-weight: 600;
  font-size: 14px;
  margin-right: 4px;
  color: #dddddd;
  text-decoration: none;
}

.user-link:hover {
  text-decoration: underline;
}

/* Message line */
.msg-line {
  margin: 0;
  padding: 1px 0;
  line-height: 1.35;
  font-size: 16px;
  color: #f0f0f0;
}

/* Emoji inside text */
.msg img.emoji {
  height: 1.7em;
  width: 1.7em;
  vertical-align: -0.15em;
}

/* =========================================================
   Reactions
   ========================================================= */

.msg-reaction-row {
  margin-top: 2px;
  padding: 2px 4px;
  text-align: right;
}

.msg-reaction-counts {
  display: inline-block;
  margin-left: 4px;
}

.msg-react-count {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 1px 5px;
  font-size: 11px;
  color: #eaeaea;
}

/* Reaction buttons (hidden until hover) */
.msg-reaction-picker,
.msg-react-open {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.msg:hover .msg-reaction-picker,
.msg:hover .msg-react-open {
  opacity: 1;
  visibility: visible;
}

.msg-react-btn {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 11px;
  cursor: pointer;
  color: #eaeaea;
}

.msg-react-btn:hover {
  background: #1b1b1b;
}

/* =========================================================
   Composer
   ========================================================= */

.comment-form{
  margin-top: auto;
  margin-bottom: 0;
  padding: 6px;

  /* The body is already a flex column, so this keeps the composer at the
     true bottom without Firefox lifting it above an empty gap. */
  position: relative;
  
  display: flex;
  flex-direction: column;
  gap: 4px;

  background: #0e0e0e;
  border: 1px solid #222;
  border-radius: 8px;

  flex-shrink: 0;
  z-index: 50;
}



/* Preserve a small edge inset when the sidebar is opened by itself. */
body {
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}


/* Top row */
.comment-top-row {
  display: flex;
  gap: 4px;
  align-items: center;
    width: 100%;       /* Ensure it fills the iframe width */
  max-width: 100%;   /* Prevent it from exceeding parents */
}

/* Input */
#commentInput {
  flex: 1 1 auto;

    /* ✅ CRITICAL FIX: Allows input to shrink smaller than browser default */
  min-width: 0; 

  padding: 6px 8px;

  background: #111;
  color: #fff;

  border: 1px solid #717070;
  border-radius: 5px;

  font-size: 14px;
}

#commentInput:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Send + Emoji buttons */
#sendButton,
.emoji-toggle {

    /* ✅ CRITICAL FIX: Prevent buttons from getting squashed */
  flex-shrink: 0; 
  padding: 6px 8px;

  background: #1b1b1b;
  color: #fff;

  border: 1px solid #717070;
  border-radius: 6px;

  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#sendButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Use the dynamic viewport only when this page is opened on its own. */
html:not(.is-embedded),
html:not(.is-embedded) body {
  height: 100dvh;
}



/* keep messages spacing in sync */
#messages{
  padding-bottom: 4px;
}





/* =========================================================
   Emoji picker
   ========================================================= */

.emoji-bar {
      min-height: 350px;   /* 👈 this is what you’re missing */
  max-height: 900px;
  overflow-y: auto;

  margin-top: 4px;
  padding: 6px;

  background: #0e0e0e;
  border: 1px solid #222;
  border-radius: 8px;
}

.emoji-section {
  margin-bottom: 6px;
}

.emoji-section-title {
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
}

.emoji-row,
.emoji-grid {
  width: 100%;
  text-align: left;
}

.emoji-btn {
  background: transparent;
  border: none;
  cursor: pointer;

  font-size: 22px;
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.emoji-btn:hover {
  transform: scale(1.12);
}

/* The container you fill with the emoji bar */
#emojiBarContainer {
  position: absolute;
  left: 0;
  right: 0;

  /* pop UP above the composer */
  bottom: calc(100% + 6px);

  z-index: 50;
}

/* Remove flow spacing since it's now overlayed */
#emojiBarContainer .emoji-bar {
  margin-top: 0;
  max-height: min(200px, 45vh);
    max-height: min(900px, 70vh);
}


/* =========================================================
   Status
   ========================================================= */

.chat-status {
  font-size: 14px;
  text-align: center;
  margin-top: 2px;
  min-height: 12px;
  color: #ccc;
}

/* Do not reserve a blank status row while there is no login/error message. */
.chat-status:empty {
  display: none;
}

/* The standalone sidebar keeps the mobile dock, but 78px is more room than
   its 54px dock needs. This moves the composer down without covering it. */
@media screen and (max-width: 720px) {
  html:not(.is-embedded) body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Give messages breathing room ONLY when emoji picker is open */
body.emoji-open #messages {
  padding-bottom: 260px;
}






#messages {
  padding-bottom: 4px;
}


.amount {
  color: #f7931a;
}

.sats-symbol {
  color: #f7931a;
}


.zap-ghost-name {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

.zap-ghost-name .zap-ghost-emoji,
.zap-ghost-name img.emoji {
  width: 20px;
  height: 20px;
  font-size: 20px;
  vertical-align: -3px;
}


.zap-attack-label {
  font-size: 14px;
  font-weight: 700;
}


.zap-ghost-emoji {
  font-size: 20px;
  line-height: 1;
  vertical-align: -3px;
}


.native-ghost-emoji {
  font-size: 20px;
  line-height: 1;
  vertical-align: -3px;
}