/* ==========================================================================
   Giphy — the picker, and GIFs where they land
   ========================================================================== */
.gif-pop {
  /* width is set in JS from the measured window: a vw unit resolves to 0 in a
     hidden tab and collapsed the whole panel */
  position: fixed; z-index: 210; width: 440px; min-width: 300px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.24);
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.gif-head { display: flex; align-items: center; gap: 6px; }
.gif-head input {
  flex: 1; border: 1px solid var(--border-strong); border-radius: 9px; padding: 7px 10px;
  font: inherit; font-size: 13.5px; outline: none; background: var(--bg); color: var(--text);
}
.gif-head input:focus { border-color: var(--accent); }
.gif-x {
  border: 0; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 13px; padding: 4px 6px; border-radius: 7px;
}
.gif-x:hover { background: var(--bg-hover); color: var(--text); }

.gif-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 7px;
  height: 360px; overflow-y: auto; align-content: start;
}
.gif-cell {
  border: 0; padding: 0; background: var(--bg-hover); border-radius: 9px; overflow: hidden;
  cursor: pointer; line-height: 0; aspect-ratio: 1 / 1;
}
.gif-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-cell:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.gif-note {
  grid-column: 1 / -1; color: var(--text-faint); font-size: 13px; text-align: center;
  padding: 26px 12px; line-height: 1.5; margin: 0;
}
.gif-foot { font-size: 10.5px; color: var(--text-faint); text-align: right; letter-spacing: .02em; }

/* a GIF inside a description, a comment or a chat message */
.gif-in-text {
  display: block; max-width: min(280px, 100%); height: auto; border-radius: 10px;
  margin: 6px 0; background: var(--bg-hover);
}
.chat-bub .gif-in-text { max-width: 200px; margin: 4px 0 2px; }

/* a GIF somebody sent to a person who hasn't switched the app on */
.gif-locked {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  background: var(--bg-hover); border-radius: 8px; padding: 4px 10px;
  font-size: 12.5px; color: var(--text-faint); line-height: 1.3;
}
.gif-locked a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gif-locked svg { flex: none; }
.gif-off { display: inline-block; }