/* 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;

  /* mobile-friendly viewport */
  height: 100dvh;
  height: 100vh; /* fallback */

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

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: 70px; /* room for the composer */

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

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

.msg {
  margin: 4px 0;
  padding: 6px 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;
  padding: 6px;
    position: relative;

  display: flex;
  flex-direction: column;
  gap: 4px;

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

  flex-shrink: 0;
}


/* Give the whole page a bottom cushion for phone UI bars */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Lift the composer above the mobile nav bar / gesture area */
.comment-form {
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}

/* Top row */
.comment-top-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Input */
#commentInput {
  flex: 1 1 auto;
  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 {
  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;
}


:root{
  --vv-bottom: 0px; /* dynamic bottom inset */
}

/* make the page use the dynamic viewport */
html, body { height: 100dvh; }

/* lift composer above Android nav / browser UI */
.comment-form{
  padding-bottom: calc(6px + var(--vv-bottom));
}

/* keep messages spacing in sync */
#messages{
  padding-bottom: calc(70px + var(--vv-bottom));
}



@media (max-width: 600px){
  .comment-form{ padding-bottom: 24px; }
}


/* =========================================================
   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: 17x;
  text-align: center;
  margin-top: 2px;
  min-height: 12px;
  color: #ccc;
}

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






#messages {
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}