/* Symbioverse 0.9.3.0 · GIPHY and custom sticker galleries. */
/* The source image aspect ratio is always preserved: no cropping or stretching. */
#sv-chat-picker .sv-giphy-heading,
#sv-chat-picker .sv-sticker-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#sv-chat-picker .sv-giphy-search {display:flex;gap:8px;align-items:stretch;margin:12px 0 10px}
#sv-chat-picker .sv-giphy-search input {flex:1;min-width:0;min-height:40px;padding:9px 12px;border-radius:11px}
#sv-chat-picker .sv-giphy-search-button {flex-shrink:0;padding:9px 15px;border-radius:11px;font-weight:600}
#sv-chat-picker .sv-giphy-presets {display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px}
#sv-chat-picker .sv-giphy-presets button {border-radius:999px;padding:6px 11px;font-size:12px;min-height:31px;opacity:.85}
#sv-chat-picker .sv-giphy-presets button.active {border-color:currentColor;opacity:1;font-weight:700}
#sv-chat-picker .sv-giphy-result-heading {font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.8;margin:5px 0 10px}

/* GIPHY picker: variable-height cards reflect the actual GIF proportions. */
#sv-chat-picker .sv-chat-gif-grid {
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px; max-height:min(55vh,460px); max-height:min(55dvh,460px);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  align-items:start; padding:3px;
}
#sv-chat-picker .sv-giphy-tile {
  position:relative; display:block; box-sizing:border-box; min-width:0;
  width:100%; height:auto !important; min-height:0 !important;
  aspect-ratio:auto !important; overflow:visible !important; padding:0 !important;
  border-radius:11px; transition:transform .14s ease, box-shadow .14s ease;
  cursor:pointer;
}
#sv-chat-picker .sv-giphy-tile img {
  display:block; box-sizing:border-box; width:100% !important;
  height:auto !important; max-height:none !important; max-width:100% !important;
  aspect-ratio:auto !important; object-fit:contain !important;
  border-radius:10px; pointer-events:none;
}
#sv-chat-picker .sv-giphy-tile:hover {transform:translateY(-2px);box-shadow:0 6px 18px #0004}
#sv-chat-picker .sv-giphy-tile:focus-visible,
#sv-chat-picker .sv-sticker-tile:focus-visible {outline:3px solid #30c7e2;outline-offset:2px}
#sv-chat-picker .sv-giphy-empty,
#sv-chat-picker .sv-giphy-loading,
#sv-chat-picker .sv-giphy-error {grid-column:1/-1;padding:18px 12px;text-align:center;line-height:1.5}
#sv-chat-picker .sv-giphy-error button {margin-top:8px}
#sv-chat-picker .sv-giphy-credit {display:block;margin-top:10px;text-align:right;opacity:.76;font-size:11px}
#sv-chat-picker .sv-giphy-credit a {color:inherit;text-decoration:underline}

/* Own sticker library: never apply the square-crop rule of generic picker tiles. */
#sv-chat-picker .sv-sticker-help {margin:9px 0 12px}
#sv-chat-picker .sv-sticker-gallery {
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)) !important;
  gap:12px; align-items:start;
  max-height:min(60vh,520px); max-height:min(60dvh,520px);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:4px 3px 8px;
}
#sv-chat-picker .sv-sticker-tile {
  display:flex !important; box-sizing:border-box;
  align-items:center; justify-content:center;
  width:100%; min-width:0; height:auto !important; min-height:0 !important;
  aspect-ratio:auto !important; overflow:visible !important;
  padding:9px !important; border-radius:12px; cursor:pointer;
}
#sv-chat-picker .sv-sticker-preview {
  display:block; width:auto !important; height:auto !important;
  max-width:100% !important; max-height:none !important;
  aspect-ratio:auto !important; object-fit:contain !important;
  border-radius:7px; pointer-events:none;
}
#sv-chat-picker .sv-sticker-empty {grid-column:1/-1; padding:20px 12px; text-align:center}
#sv-chat-picker .sv-sticker-add {margin-top:12px}

/* Preserve original proportions after a GIF/sticker has been sent in a chat. */
#messages .sv-chat-media-bubble {box-sizing:border-box; min-width:0; max-width:min(100%,460px)}
#messages .sv-chat-media-bubble .sv-chat-gif,
#messages .sv-chat-media-bubble .sv-chat-sticker {
  display:block; width:auto !important; height:auto !important;
  max-width:100% !important; max-height:min(62vh,480px) !important;
  aspect-ratio:auto !important; object-fit:contain !important;
}
@media (max-width:640px){
  /* Two columns give GIFs adequate width on phones, without cropping. */
  #sv-chat-picker .sv-chat-gif-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px; max-height:min(55vh,440px); max-height:min(55dvh,440px);
  }
  #sv-chat-picker .sv-sticker-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px;
  }
  #sv-chat-picker .sv-giphy-search input {font-size:16px}
  #sv-chat-picker .sv-giphy-presets button {font-size:11px}
  #sv-chat-picker .sv-sticker-tile {padding:6px !important}
  #messages .sv-chat-media-bubble {max-width:100%; min-width:0}
  #messages .sv-chat-media-bubble .sv-chat-gif,
  #messages .sv-chat-media-bubble .sv-chat-sticker {
    width:auto !important; height:auto !important; max-width:100% !important;
    max-height:min(55vh,420px) !important; max-height:min(55dvh,420px) !important;
    object-fit:contain !important;
  }
}
@media (max-width:360px){
  #sv-chat-picker .sv-sticker-gallery {grid-template-columns:1fr !important}
}
@media (prefers-reduced-motion:reduce){#sv-chat-picker .sv-giphy-tile{transition:none}}