/* === Base Theme Variables (light) === */
:root {
  --c-bg: #efe7dd;
  --c-header: #005e54;
  --c-phone-link: #1976d2;
  --c-header-text: #ffffff;
  --c-msg-sent: #e1ffc7;
  --c-msg-recv: #ffffff;
  --c-scroll-thumb: #b3ada7;
  --c-scroll-track: var(--c-bg);
  --c-typing-text: #555;
  --c-typing-bg: rgba(255, 255, 255, 0.6);
  --c-form-bg: #ffffff;
  --c-border: #ccc;
  --c-accent: #4caf50;
  --c-danger: #d9534f;
  --c-warn: #ff9800;
  --c-reaction-pill: #ffffffcc;
  --c-reaction-pill-sent: #e1ffc7cc;
  --c-reply-preview-bg: #f0f2f5;
  --c-reply-border: #4caf50;
  --c-reply-quote-border: #9aa0a6;
  --c-reply-quote-color: #444;
  --c-text: #111;
  --c-text-soft: #666;
}

  /* Sticker feature removed: styles intentionally omitted */
.btn.btn-affirm { background:#2e7d32; color:#fff; }
.btn.btn-affirm:hover { background:#2b6f2e; }
.btn.btn-danger { background:#d32f2f; color:#fff; }
.btn.btn-danger:hover { background:#c62828; }

/* Modal text and header should use theme-aware colors */
.modal-card h3, .modal-card p, .modal-card code, .modal-card li {
  color: var(--c-text) !important;
}

/* Connect Telegram modal buttons (fallback styling) */
#ct-doneBtn, #ct-checkBtn, #ct-close {
  background: var(--c-border);
  color: var(--c-text);
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
#ct-doneBtn { background: var(--c-accent); color: #fff; }
#ct-doneBtn:hover { filter:brightness(.95); }
#ct-checkBtn { background: #6c757d; color:#fff; }
#ct-close { background: transparent; color: var(--c-text); border:1px solid var(--c-border); }
.countdown-line { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.countdown-text { font-size:1.05rem; font-variant-numeric:tabular-nums; }
.countdown-bar-wrap { width:100%; height:6px; background:linear-gradient(to right,#555,#333); border-radius:4px; overflow:hidden; position:relative; }
.countdown-bar { position:absolute; inset:0; width:100%; background:linear-gradient(90deg,#4caf50,#ff9800,#f44336); background-size:300% 100%; animation:hueShift 8s linear infinite; }
@keyframes hueShift { 0% { filter:hue-rotate(0deg);} 100% { filter:hue-rotate(360deg);} }

* {
  margin: 0;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
}

html,
body {
  height: 100%;
  width: 100%;
  background: var(--c-bg);
  color: var(--c-text);
}

#effectsLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
@media (prefers-reduced-motion: reduce) {
  #effectsLayer {
    display: none;
  }
}

.chat-root {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--c-bg) url("../assets/bg/cool-BG.jpg") repeat;
  background-position: center top; /* horizontally center, keep it aligned at the top */
  overflow: hidden;
  transition: background-color 0.35s;
  position: relative; /* anchor absolute overlays like #effectsLayer */
}

/* Header */
#header {
  background: var(--c-header);
  color: var(--c-header-text);
  transition: background-color 0.35s, color 0.35s;
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-start;
  align-items: center;
  padding: 12px 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  min-height: 48px;
  font-size: 1.1rem;
}

/* Chat area */
#chatBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Ensure the typing indicator (order:1) sits after messages (order:0) */
  align-items: flex-start;
  padding: 12px 8px 60px 8px;
  overflow-y: auto;
  /* tightened offsets so the message list fills available space between header and composer
    keep a modest bottom padding so last message isn't flush with the composer */
  margin-top: 64px; /* space for fixed header */
  margin-bottom: 130px; /* space for fixed composer (#chatForm) */
  padding-bottom: 60px;
  min-height: 0;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--c-scroll-thumb) var(--c-scroll-track);
}

#chatBox::-webkit-scrollbar {
  width: 5px;
}
#chatBox::-webkit-scrollbar-thumb {
  background: var(--c-scroll-thumb);
}

/* Message bubbles */
.message {
  margin-bottom: 10px;
  padding: 0 2px;
  border-radius: 8px;
  max-width: 80vw;
  word-break: break-word;
  font-size: 1rem;
  display: inline-block;
  position: relative;
  order: 0; /* messages before typing indicator */
}

/* Text Effect preview classes applied to message bubbles */
.effect-small { transform-origin: center; animation: effectSmall 800ms ease-out forwards; }
.effect-big { transform-origin: center; animation: effectBig 900ms cubic-bezier(.2,.9,.3,1) forwards; }
.effect-explode { transform-origin: center; animation: effectExplode 700ms ease-out forwards; }
.effect-shake { animation: effectShake 650ms cubic-bezier(.36,.07,.19,.97) both; }
.effect-jitter { animation: effectJitter 900ms steps(6,end) infinite; }
.effect-ripple { /* create a subtle scale & fade */ animation: effectRipple 900ms ease-out forwards; }
.effect-nod { animation: effectNod 700ms ease-out both; }
.effect-bloom { animation: effectBloom 900ms ease-out both; }

/* Keyframes */
@keyframes effectSmall {
  0% { transform: scale(.88); opacity: .0; }
  40% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes effectBig {
  0% { transform: scale(.6) translateY(14px); opacity: 0; filter: blur(6px); }
  60% { transform: scale(1.08) translateY(-6px); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes effectExplode {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.08) rotate(-2deg); }
  100% { transform: scale(1.25) rotate(2deg) translateY(-6px); opacity: 0; }
}
@keyframes effectShake {
  0% { transform: translateX(0); }
  10% { transform: translateX(-6px) rotate(-1deg); }
  30% { transform: translateX(6px) rotate(1deg); }
  50% { transform: translateX(-4px) rotate(-1deg); }
  70% { transform: translateX(4px) rotate(1deg); }
  100% { transform: translateX(0); }
}
@keyframes effectJitter {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
@keyframes effectRipple {
  0% { transform: scale(.92); opacity: .6; filter: blur(1px); }
  60% { transform: scale(1.06); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes effectNod {
  0% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-3deg) translateY(-4px); }
  60% { transform: rotate(2deg) translateY(2px); }
  100% { transform: rotate(0deg) translateY(0); }
}
@keyframes effectBloom {
  0% { transform: scale(.9); filter: blur(6px) saturate(.7); opacity: .0; }
  50% { transform: scale(1.12); filter: blur(0) saturate(1.15); opacity: 1; }
  100% { transform: scale(1); filter: none; opacity: 1; }
}

/* Small helper for the composer preview area */
.text-effect-option { background: rgba(255,255,255,0.06); border: 1px solid rgba(0,0,0,0.06); padding: 8px 10px; border-radius: 8px; cursor:pointer; display:inline-flex; gap:8px; align-items:center; }
.text-effect-option:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.text-effect-label { font-size:0.9rem; }

.file-download-link {
  display: inline-block;
  margin: 6px 0;
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  color: #1976d2;
  text-decoration: none;
  font-size: 1rem;
  border: 1px solid #e0e0e0;
}
.file-download-link:hover {
  background: #e3f2fd;
  text-decoration: underline;
}

/* Hide micro-controls entirely (no reserved space). Reveal on hover/focus.
   Position controls absolutely so they appear over the bubble and do not
   shift surrounding layout when shown. */
.message {
  position: relative;
}
.message .read-time,
.message .delete-btn {
  display: none;
  opacity: 1; /* when shown keep fully opaque */
}
.message:hover .read-time,
.message:hover .delete-btn,
.message:focus-within .read-time,
.message:focus-within .delete-btn,
.message.show-controls .read-time,
.message.show-controls .delete-btn {
  display: inline-flex; /* reveal */
}

/* Place delete button at the top-right of the bubble and read-time at the
   right-bottom so they don't consume inline space when hidden. */
.message .delete-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 4px;
  font-size: 0.9rem;
}
.message .read-time {
  position: absolute;
  right: 8px;
  /* bottom: 6px; */
  padding: 25px 0px;
  font-size: 0.75rem;
  color: #2196f3;
}

/* When absolute controls are visible on sender bubbles, add right padding
   so the message content doesn't get overlapped by the controls. */
.message.sender:hover,
.message.sender:focus-within,
.message.sender.show-controls {
  padding-right: 56px; /* control width + gap */
}

/* Small style for camera switch control in camera modal */
.camera-switch-btn, #cameraSwitch {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--c-text);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}
.camera-switch-btn:hover, #cameraSwitch:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

.sender {
  align-self: flex-end;
  background-color: var(--c-msg-sent);
  padding: 8px 12px;
  border-radius: 12px 12px 0 12px;
  /* Keep the bubble anchored to the right, but force its internal text to render
    left-to-right so long paragraphs and punctuation layout correctly. */
  text-align: left;
  direction: ltr;
  unicode-bidi: embed;
  box-shadow: 0 2px 6px #0001;
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}

.receiver {
  align-self: flex-start;
  background-color: var(--c-msg-recv);
  padding: 8px 12px;
  border-radius: 12px 12px 12px 0;
  text-align: left;
  box-shadow: 0 2px 6px #0001;
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}

/* Normalize Markdown-generated block elements inside message bubbles
   so rendering with markdown-it doesn't change spacing unexpectedly. */
.message p,
.message div.message-body,
.message blockquote,
.message pre {
  margin: 0;
}
.message ul,
.message ol {
  margin: 6px 0;
  padding-left: 18px; /* keep bullets/numbering indented inside bubble */
}
.message li {
  margin: 3px 0;
}
.message code {
  background: rgba(0,0,0,0.06);
  padding: 0.08rem 0.24rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Segoe UI Mono', monospace;
}

/* Edited indicator: small label shown on edited messages */
.message .edited-indicator {
  display: inline-block;
  font-size: 0.7rem;
  color: #9ec5ff;
  margin-left: 6px;
  opacity: 0.9;
}

/* Typing indicator */
#typingIndicator {
  font-style: italic;
  color: var(--c-typing-text);
  padding: 4px 12px;
  margin: 6px 0 4px 0;
  display: none;
  background: var(--c-typing-bg);
  border-radius: 14px;
  align-self: flex-start;
  font-size: 0.9rem;
  /* Keep the indicator visually anchored at the bottom of the scroll area. We rely on flex order
    so messages (default order 0) appear above, and the indicator (order 1) sits after them. */
  order: 1;
  margin-top: auto; /* pushes it to the bottom when visible */
}

/* Emoji Picker */
#emojiPicker {
  max-width: 260px; /* already in your style */
  max-height: 200px; /* limit height so it doesn't bleed off-screen */
  overflow-y: auto; /* scroll vertically if too tall */
  overflow-x: hidden; /* hide horizontal scroll */
}

#emojiPicker::-webkit-scrollbar {
  width: 6px;
}
#emojiPicker::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
#emojiPicker::-webkit-scrollbar-track {
  background: transparent;
}

/* Typing indicator animation */
@keyframes typingPulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

#typingIndicator {
  animation: typingPulse 1.2s infinite;
}

/* Chat input area */
#chatForm {
  display: flex;
  align-items: center;
  padding: 8px;
  background: var(--c-form-bg);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  min-height: 54px;
  box-shadow: 0 -2px 8px #0001;
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}

#message {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  background: var(--c-msg-recv);
  color: inherit;
  font-size: 1rem;
  margin-right: 8px;
  resize: none; /* user can't drag; we control height */
  line-height: 1.3rem;
  max-height: 160px; /* ~6 lines cap */
  overflow-y: auto; /* scroll after cap */
  width: 100%;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}

#chatForm button,
#logout {
  font-size: 1rem;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: var(--c-header);
  color: #fff;
  margin-left: 6px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  transition: background 0.2s;
}

#logout {
  background: var(--c-danger);
}

#chatForm button[type="submit"] {
  background: var(--c-accent);
  width: 90%;
  margin: 0 1.3rem;
}

#chatForm button:active,
#logout:active {
  background: #333;
}

/* Clear Chat button */
#clearChat {
  background: var(--c-warn);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  /* padding: 10px 16px; */
  margin-left: 6px;
  cursor: pointer;
  /* min-width: 44px;
  min-height: 44px; */
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px #0002;
}

#clearChat:hover,
#clearChat:focus {
  background: #e65100;
  box-shadow: 0 4px 12px #0003;
}

/* Images and audio in messages */
.message img {
  max-width: 180px;
  border-radius: 6px;
  margin-bottom: 4px;
  display: block;
}

.message audio {
  width: 160px;
  margin-bottom: 4px;
  display: block;
}

/* Read receipts */
.sender span:last-child {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  color: #4caf50;
}

/* Blue double checkmark for read */
.sender span {
  /* fallback specificity */
  font-variant-ligatures: contextual;
}
.sender span.read-receipt {
  color: #2196f3 !important;
}

/* Recording indicator */
.recording-indicator {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 200;
  align-items: center;
  gap: 10px;
}

.recording-indicator.show,
.recording-indicator[style*="display: flex"] {
  display: flex;
}

.cancel-image-button {
  background-color: #ff0000;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
}

.cancel-image-button:hover {
  background-color: #cc0000;
}

.send-image-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 8px;
}

.send-image-button:hover {
  background-color: #388e3c;
}

/* Floating reaction bar */
#reactionBar {
  position: fixed; /* was: absolute */
  display: none;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  border-radius: 18px;
  gap: 6px;
  align-items: stretch;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 300;
  white-space: nowrap; /* keep items on one line */
}
#reactionBar .rb-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#reactionBar .rb-more {
  font-weight: 600;
}
#reactionBar .rb-item {
  font-size: 1.25rem;
  cursor: pointer;
  padding: 2px 6px;
  user-select: none;
}
#reactionBar .rb-sep {
  width: 1px;
  height: 20px;
  background: #ffffff33;
  margin: 0 4px;
}
#reactionBar .rb-action {
  font-size: 0.95rem;
  padding: 4px 8px;
  background: #ffffff22;
  border-radius: 10px;
}
/* Expanded more reactions panel */
#reactionMorePanel {
  position: fixed;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.88);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 300;
  max-width: 320px;
  max-height: 50vh;
  overflow-y: auto;
}
#reactionMorePanel .rb-item {
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 6px;
}
@media (max-width: 560px) {
  #reactionMorePanel {
    max-width: 92vw;
  }
}

/* Reactions pill under a message */
.message .reactions {
  margin-top: 4px;
  display: inline-flex;
  gap: 6px;
  padding: 2px 6px;
  background: var(--c-reaction-pill);
  border-radius: 12px;
  font-size: 0.9rem;
  align-items: center;
  box-shadow: 0 1px 3px #0001;
  position: absolute;
  bottom: -18px;
  right: 6px;
  z-index: 1;
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.sender .reactions {
  background: var(--c-reaction-pill-sent);
}
.receiver .reactions {
  left: 6px;
  right: auto;
}

/* Extra space for bubbles that have reactions so next bubble doesn't overlap */
.message.has-reactions {
  margin-bottom: 28px; /* was 10px; add room for pill */
}

/* Reply quote inside message bubble */
.reply-quote {
  border-left: 3px solid var(--c-reply-quote-border);
  padding-left: 6px;
  margin-bottom: 6px;
  color: var(--c-reply-quote-color);
  font-size: 0.9rem;
  opacity: 0.9;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.reply-quote .rq-author {
  font-weight: 600;
  margin-right: 4px;
}
.reply-quote .rq-snippet {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reply preview in composer */
.reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-reply-preview-bg);
  border-left: 4px solid var(--c-reply-border);
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.reply-preview .rp-title {
  font-size: 0.85rem;
  color: var(--c-text-soft);
  transition: color 0.35s;
}
.reply-preview .rp-snippet {
  font-size: 0.95rem;
  max-width: 70vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-preview .rp-clear {
  background: transparent;
  color: var(--c-text-soft);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  transition: color 0.35s;
}

/* Paste image preview (inserted above composer) */
.paste-preview { display:flex; gap:8px; align-items:center; padding:8px; border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.04)); border:1px solid rgba(255,255,255,0.03); margin-bottom:8px; }
.paste-preview img { max-height:84px; max-width:220px; border-radius:8px; object-fit:contain; background:#000; }
.glow-btn { background:linear-gradient(135deg,#3d8bfd,#8957e5 60%,#d2a8ff); color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
.glow-btn.outline { background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text-dim); }

/* Responsive/mobile optimization */
@media (max-width: 600px) {
  #header {
    padding: 8px 8px;
    font-size: 1rem;
    min-height: 44px;
  }
  #chatBox {
    padding: 8px 4px 103px 4px;
    font-size: 1rem;
    max-width: 100vw;
    margin-top: 56px;
    margin-bottom: 64px;
  }
  #chatForm {
    padding: 6px 4px;
    min-height: 48px;
  }
  #message {
    font-size: 1rem;
    padding: 8px 10px;
    border-radius: 6px;
    max-height: 120px; /* slightly smaller cap on small screens */
  }
  #chatForm button,
  #logout,
  #imageButton {
    font-size: 1rem;
    padding: 8px 10px;
    border-radius: 6px;
    min-width: 40px;
    min-height: 40px;
  }
  /* Compact Clear / Logout buttons on small screens */
  #clearChat,
  #logout {
    font-size: 0.85rem;
    /* padding: 6px 10px; */
    /* min-width: 36px;
    min-height: 36px; */
  }
  /* Allow wrapping of header content so buttons don't overflow */
  #header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .message {
    font-size: 1rem;
    max-width: 95vw;
  }
  .message img {
    max-width: 120px;
  }
  .message audio {
    width: 120px;
  }
}

@media (max-width: 400px) {
  #header {
    font-size: 0.9rem;
    min-height: 38px;
  }
  #chatBox {
    font-size: 0.95rem;
    margin-top: 90px;
    margin-bottom: 115px;
  }
  #message {
    font-size: 0.95rem;
  }
  .message {
    font-size: 0.95rem;
  }
  /* Further reduce button footprint on very small devices */
  #clearChat,
  #logout {
    font-size: 0.75rem;
    /* padding: 4px 8px;
    min-width: 32px;
    min-height: 32px; */
  }
}

/* Utility for hiding elements */
.hiddenOpa {
  opacity: 0;
  display: none;
}

#voiceCallBtn {
  background: #2196f3;
}
#voiceCallBtn:hover {
  background: #1976d2;
}
#remoteAudio {
  display: none;
}
#voiceCallBtn:hover {
  background: #1976d2;
}

/* Make remote audio invisible (pure audio) */
#remoteAudio {
  display: none;
}

/* === Composer layout tweaks === */
#chatForm {
  display: flex; /* already set, restating for clarity */
  flex-wrap: wrap; /* allow a new line for the preview on top */
  gap: 8px; /* small breathing room between items */
  align-items: center; /* keep things aligned on the second row */
}

/* Make the reply preview live above the input row */
#replyPreview {
  flex: 1 1 100%; /* full-width row */
  order: 0; /* ensure it stays before the input/buttons */
  display: flex; /* keep its internal layout intact */
}

/* Input grows; keeps the left side */
#message {
  flex: 1 1 auto;
  min-width: 0; /* prevents overflow on narrow screens */
}

/* Push media buttons to the far right */
#imageButton {
  /* the first item on the right cluster */
  margin-left: auto; /* everything after this sticks to the right */
}

/* Optional: keep buttons from wrapping awkwardly */
#chatForm button {
  white-space: nowrap;
}

/* Composer dropdown now container for toggle + sliding panel */
.composer-dropdown {
  display:flex;
  flex-direction:column;
  width:100%;
  gap:6px;
  margin:0 1.2rem;
  position:relative;
}

#composerMenuBtn {
  background:#005e54;
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:1.15rem;
  width:48px;
  height:44px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transition:background .22s, transform .18s, box-shadow .22s;
}
#composerMenuBtn:hover { background:#047868; }
#composerMenuBtn:active { transform:scale(.92); }
html[data-theme='dark'] #composerMenuBtn { background:#0d9387; }
html[data-theme='dark'] #composerMenuBtn:hover { background:#11a595; }

/* Sliding composer menu (hidden by default) */
.composer-menu {
  display:flex;
  flex-direction:column;
  gap:6px;
  background:transparent;
  border:none;
  padding:0;
  max-width:100%;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(4px);
  transition:max-height .32s ease, opacity .25s ease, transform .32s ease;
}
.composer-menu.open {
  max-height:600px;
  opacity:1;
  transform:translateY(0);
}

/* Primary action buttons (emoji, image, camera, audio) */
.composer-menu > button {
  background: #005e54;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  min-width: 42px;
  min-height: 42px;
  cursor: pointer;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Divider slimmed */
.composer-menu > hr { margin:4px 0 2px; opacity:.25; }
/* Add internal padding only when open for smoother edge appearance */
.composer-menu.open { padding-top:4px; }

/* Command buttons (vertical layout only) */
.composer-cmd-btn {
  background: rgba(0, 94, 84, 0.06);
  color: #005e54;
  border: 1px solid rgba(0, 94, 84, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.9rem;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  text-align: left;
  line-height: 1.1;
  transition: background 0.15s, transform 0.12s, box-shadow 0.12s;
}
.composer-cmd-btn span[aria-hidden="true"] {
  font-size: 1.15rem;
  line-height: 1;
}
.composer-cmd-btn .cmd-label {
  display: none !important;
}
.composer-cmd-btn {
  width: auto;
  min-width: 44px;
  padding: 10px 12px;
}
.composer-cmd-btn:hover,
.composer-cmd-btn:focus {
  background: rgba(0, 94, 84, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.composer-cmd-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.composer-cmd-btn:focus {
  outline: 3px solid rgba(0, 123, 100, 0.15);
  outline-offset: 2px;
}

/* Override any previously injected grid classes so layout stays vertical */
.composer-menu.commands-grid,
.composer-menu .composer-commands-grid {
  display: block !important;
}
.composer-menu .composer-commands-grid {
  width: 100%;
}
.composer-menu .composer-commands-grid .composer-cmd-btn {
  height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
}

/* Containers inside composer menu now flow horizontally & wrap */
#composerMenuActions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
#composerMenuActions > button {
  flex: 0 0 auto;
  font-size: 1.1rem;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 10px;
}
#composerCommands {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px !important;
  padding: 2px 0 0;
  max-height: none;
  overflow: visible;
}

/* Slightly narrower menu since no grid */
@media (min-width: 640px) {
  .composer-menu {
    min-width: 100%;
  }
}

.composer-overflow-panel button.composer-cmd-btn {
  margin-bottom: 6px;
}

/* Compact adjustments small screens (keep vertical) */
@media (max-width: 600px) {
  .composer-cmd-btn {
    padding: 8px 10px;
  }
}

/* Dark theme adjustments for static composer */
html[data-theme="dark"] .composer-cmd-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e4e7eb;
}
html[data-theme="dark"] .composer-cmd-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Heart Animation */
@keyframes heartPulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.heart-only {
  display: inline-block;
  animation: heartPulse 1.2s infinite ease-in-out;
  transform-origin: center;
}

/* Kiss (💋) Animation – a playful pop & tilt distinct from heartPulse */
@keyframes kissPop {
  0% {
    transform: scale(0.9) rotate(-8deg);
    filter: drop-shadow(0 0 0px rgba(255, 105, 180, 0));
  }
  30% {
    transform: scale(1.25) rotate(6deg);
    filter: drop-shadow(0 0 6px rgba(255, 105, 180, 0.6));
  }
  55% {
    transform: scale(1.05) rotate(-3deg);
    filter: drop-shadow(0 0 4px rgba(255, 105, 180, 0.4));
  }
  70% {
    transform: scale(1.15) rotate(2deg);
    filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.5));
  }
  100% {
    transform: scale(0.95) rotate(0deg);
    filter: drop-shadow(0 0 0px rgba(255, 105, 180, 0));
  }
}

.kiss-only {
  display: inline-block;
  animation: kissPop 1.5s infinite ease-in-out;
  transform-origin: center;
}

/* Echo screen effect (iMessage-style) */
:root {
  --echo-duration: 1.5s;
}
@keyframes echoBurst {
  0% {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(calc(var(--tx, 0px) / 2), calc(var(--ty, 0px) / 2))
      scale(1.5);
    opacity: 0.75;
  }
  100% {
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(2);
    opacity: 0;
  }
}

.echo-clone {
  position: absolute;
  font-size: 2.6rem;
  pointer-events: none;
  animation: echoBurst var(--echo-duration) ease-out forwards;
  transform-origin: center;
  color: inherit; /* match message color */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .echo-clone {
    display: none;
  }
}

/* === Matrix Rain Effect === */
#effectsLayer .matrix-char {
  position: absolute;
  pointer-events: none;
  color: #27ff6a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
  text-shadow: 0 0 6px rgba(39, 255, 106, 0.7);
  will-change: transform, opacity;
}

@keyframes matrixDrop {
  0% {
    transform: translateX(var(--dx, 0px)) translateY(-110vh);
    opacity: 0;
  }
  5% {
    opacity: 0.95;
  }
  95% {
    opacity: 0.95;
  }
  100% {
    transform: translateX(calc(var(--dx, 0px) * 1)) translateY(110vh);
    opacity: 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #effectsLayer .matrix-char {
    display: none;
  }
}

/* === Sparkle / Glitter Effect === */
#effectsLayer .sparkle {
  position: absolute;
  pointer-events: none;
  font-size: 20px;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes sparkleTwinkle {
  0% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: scale(1.2) rotate(20deg);
    opacity: 1;
  }
  70% {
    transform: scale(0.9) rotate(-20deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #effectsLayer .sparkle {
    display: none;
  }
}

/* Small highlight for messages that have an attached effect (temporary) */
.message.effect-highlight {
  animation: effectHighlight 1.8s ease-out forwards;
}
@keyframes effectHighlight {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    transform: translateY(0);
  }
  10% {
    box-shadow: 0 8px 28px rgba(255, 215, 0, 0.22);
    transform: translateY(-4px);
  }
  60% {
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.12);
    transform: translateY(-2px);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    transform: translateY(0);
  }
}

/* === Fireworks === */
#effectsLayer .fireworks-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes fwExplode {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #effectsLayer .fireworks-dot {
    display: none;
  }
}

/* === Ripple Effect === */
#effectsLayer .ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  /* use translucent bluish ring like water ripple */
  background: transparent;
  box-shadow: 0 0 0 2px rgba(80, 160, 255, 0.14) inset;
  border: 2px solid rgba(80, 160, 255, 0.45);
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0.95;
  backdrop-filter: blur(0.6px);
  will-change: transform, opacity;
}

@keyframes rippleExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.95;
    border-color: rgba(80, 160, 255, 0.6);
    box-shadow: 0 0 0 1px rgba(80, 160, 255, 0.14) inset;
  }
  35% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.72;
    border-color: rgba(80, 160, 255, 0.48);
  }
  70% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0.32;
    border-color: rgba(80, 160, 255, 0.28);
  }
  100% {
    transform: translate(-50%, -50%) scale(4.6);
    opacity: 0;
    border-color: rgba(80, 160, 255, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #effectsLayer .ripple {
    display: none;
  }
}

/* === Balloons Floating Up === */
#effectsLayer .balloon {
  position: absolute;
  bottom: -80px;
  font-size: 2rem;
  will-change: transform, opacity;
  pointer-events: none;
  opacity: 0.95;
  transform-origin: center bottom;
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

@keyframes balloonFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.95;
  }
  30% {
    transform: translateY(-30vh) translateX(-20px) scale(1.05);
  }
  60% {
    transform: translateY(-60vh) translateX(20px) scale(0.95);
  }
  100% {
    transform: translateY(-100vh) translateX(-10px) scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #effectsLayer .balloon {
    display: none;
  }
}

/* === Zoom Reveal === */
#effectsLayer .zoom-reveal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  transform-origin: center;
  pointer-events: none;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--zoom-color, #fff);
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  will-change: transform, opacity;
  opacity: 0.98;
  font-size: clamp(28px, 8vw, 90px);
  padding: 0.15em 0.25em;
}

@keyframes zoomInOutPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.98;
  }
  45% {
    transform: translate(-50%, -50%) scale(3.2);
    opacity: 1;
  }
  55% {
    transform: translate(-50%, -50%) scale(3.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.96;
  }
}

@keyframes bubbleRevealPop {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #effectsLayer .zoom-reveal {
    display: none;
  }
}

/* Generic single emoji size boost */
.single-emoji-large {
  font-size: 2.8rem; /* visibly larger */
  line-height: 1; /* tight vertical alignment */
  display: inline-block;
}

/* Phone link styling inside messages */
.message a.phone-link {
  color: var(--c-phone-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 4px;
  border-radius: 4px;
}
.message a.phone-link:active {
  opacity: 0.8;
}

/* URL link styling inside messages */
.message a.url-link {
  color: #1976d2;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  word-break: break-word;
  transition: all 0.2s ease;
}

.message a.url-link:hover {
  background-color: rgba(25, 118, 210, 0.1);
  text-decoration-thickness: 2px;
}

.message a.url-link:active {
  opacity: 0.8;
  transform: scale(0.98);
}

/* Special styling for YouTube Music links */
.message a.youtube-music-link {
  color: #ff6b35;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 107, 53, 0.05));
}

.message a.youtube-music-link:hover {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.1));
}

/* Special styling for YouTube links */
.message a.youtube-link {
  color: #ff0000;
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.05));
}

.message a.youtube-link:hover {
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.1));
}

/* Special styling for Spotify links */
.message a.spotify-link {
  color: #1db954;
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.1), rgba(29, 185, 84, 0.05));
}

.message a.spotify-link:hover {
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.2), rgba(29, 185, 84, 0.1));
}

/* Dark theme adjustments for links */
[data-theme="dark"] .message a.url-link {
  color: #64b5f6;
}

[data-theme="dark"] .message a.url-link:hover {
  background-color: rgba(100, 181, 246, 0.1);
}

[data-theme="dark"] .message a.youtube-music-link {
  color: #ff8a65;
}

[data-theme="dark"] .message a.youtube-link {
  color: #ff5252;
}

[data-theme="dark"] .message a.spotify-link {
  color: #4caf50;
}

/* Image viewer overlay */
#imageViewer {
  display: flex;
  animation: fadeInViewer 0.25s ease;
}
@keyframes fadeInViewer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#imageViewerImg {
  cursor: zoom-out;
}

/* Camera modal */
#cameraModal {
  display: flex;
  animation: fadeInViewer 0.25s ease;
}
#cameraModal button {
  min-width: 90px;
}

/* ===================== */
/* Theme toggle button   */
/* ===================== */
#header .theme-toggle {
  background: #ffffff1a;
  border: 1px solid #ffffff33;
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 36px;
  backdrop-filter: blur(4px);
  transition: background 0.25s, border-color 0.25s;
}
#header .theme-toggle:hover {
  background: #ffffff30;
}

/* ===================== */
/* Dark theme overrides  */
/* ===================== */
html[data-theme="dark"],
:root[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background: #101517;
  color: #e4e7eb;
}
html[data-theme="dark"] .chat-root {
  background: #101517;
}
html[data-theme="dark"] #header {
  background: #0d9388;
  color: #f2f7f7;
}
html[data-theme="dark"] #lastSeen {
  color: #cfd8dc !important;
}
html[data-theme="dark"] #chatForm {
  background: #182126;
}
html[data-theme="dark"] #message {
  background: #1f2a30;
  border-color: #2d3a40;
  color: #e4e7eb;
}
html[data-theme="dark"] .sender {
  background: #0f453f;
  color: #e4e7eb;
}
html[data-theme="dark"] .receiver {
  background: #1f2a30;
  color: #e4e7eb;
}
html[data-theme="dark"] #typingIndicator {
  background: rgba(255, 255, 255, 0.08);
  color: #9aa5ab;
}
html[data-theme="dark"] .message .reactions {
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .sender .reactions {
  background: rgba(70, 170, 140, 0.15);
}
html[data-theme="dark"] .reply-preview {
  background: #1f2a30;
  border-left-color: #21b26e;
}
html[data-theme="dark"] .reply-quote {
  color: #9aa5ab;
}
html[data-theme="dark"] #clearChat {
  background: #ff9800;
}
html[data-theme="dark"] #clearChat:hover {
  background: #e65100;
}
html[data-theme="dark"] #chatForm button[type="submit"],
html[data-theme="dark"] #imageButton {
  background: #21b26e;
}
html[data-theme="dark"] #logout {
  background: #d9534f;
}
html[data-theme="dark"] #chatForm button,
html[data-theme="dark"] #logout,
html[data-theme="dark"] #imageButton {
  box-shadow: none;
}
html[data-theme="dark"] #chatBox {
  scrollbar-color: #48545b #101517;
}
html[data-theme="dark"] #chatBox::-webkit-scrollbar-thumb {
  background: #48545b;
}
html[data-theme="dark"] #header .theme-toggle {
  border-color: #ffffff55;
}

/* ===== Reconnect / Toast ===== */
#chatToast {
  position: fixed;
  bottom: 88px; /* above composer */
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 0.95rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 24px -2px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#chatToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#chatToast.success {
  background: linear-gradient(135deg, #0d8b7a, #1db27b);
}
#chatToast.error {
  background: linear-gradient(135deg, #b00020, #e53935);
}
@media (max-width: 600px) {
  #chatToast {
    bottom: 96px;
    font-size: 0.9rem;
  }
}

/* Call avatar pulse */
#incomingCallAvatar {
  position: relative;
}
#incomingCallAvatar.pulsing {
  animation: callPulse 1.4s ease-in-out infinite;
}
@keyframes callPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(33, 178, 110, 0.6);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(33, 178, 110, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(33, 178, 110, 0);
  }
}

/* === Sticker Picker Styles === */
#stickerPicker {
  --sticker-bg: var(--c-form-bg, #ffffff);
  --sticker-text: var(--c-text, #111);
  --sticker-border: var(--c-border, #ddd);
  --sticker-tab-active: #007bff;
  --sticker-tab-hover: #f0f0f0;
}

[data-theme="dark"] #stickerPicker {
  --sticker-bg: #2d2d2d;
  --sticker-text: #e0e0e0;
  --sticker-border: #444;
  --sticker-tab-hover: #3a3a3a;
}

#stickerPicker .sticker-modal-content {
  background: var(--sticker-bg);
  color: var(--sticker-text);
}

#stickerPackTabs {
  border-bottom: 1px solid var(--sticker-border);
  background: var(--sticker-bg);
}

#stickerPackTabs button {
  color: var(--sticker-text) !important;
  border-bottom: 3px solid transparent !important;
}

#stickerPackTabs button:hover {
  background: var(--sticker-tab-hover) !important;
}

#stickerPackTabs button.active {
  background: var(--sticker-tab-active) !important;
  color: #fff !important;
  border-bottom-color: var(--sticker-tab-active) !important;
}

#stickerGrid {
  background: var(--sticker-bg);
}

.sticker-item {
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-radius: 8px;
  cursor: pointer;
}

.sticker-item:hover {
  background: var(--sticker-tab-hover);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sticker-item:active {
  transform: scale(0.95);
}

.sticker-item img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Enhanced sticker message styling */
.message .sticker-message {
  padding: 4px;
  background: transparent;
  border-radius: 12px;
  display: inline-block;
}

.message.sender .sticker-message {
  background: rgba(225, 255, 199, 0.3);
}

.message.receiver .sticker-message {
  background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .message.sender .sticker-message {
  background: rgba(76, 175, 80, 0.2);
}

[data-theme="dark"] .message.receiver .sticker-message {
  background: rgba(66, 66, 66, 0.3);
}

/* Sticker button in composer */
#stickerButton {
  font-size: 1.2rem;
  transition: transform 0.2s ease, filter 0.2s ease;
}

#stickerButton:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

#stickerButton:active {
  transform: scale(0.95);
}

/* Loading states */
.sticker-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  padding: 20px;
  color: var(--c-text-soft, #666);
  font-style: italic;
}

.sticker-loading::before {
  content: "🔄 ";
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Responsive design for sticker picker */
@media (max-width: 768px) {
  #stickerPicker > div {
    width: 96% !important;
    max-width: none !important;
    height: 70vh;
    max-height: 600px;
  }
  
  #stickerGrid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  
  #stickerPackTabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  #stickerPackTabs::-webkit-scrollbar {
    display: none;
  }
  
  #stickerPackTabs button {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 480px) {
  #stickerGrid {
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important;
    gap: 6px !important;
  }
}