/* The pack inherits the chat theme; artwork always keeps its transparent canvas. */
#seafix-demo :is(#sf-chat-compose,.sf-mini-compose) .sf-chat-sticker-toggle {
  display:grid; place-items:center; flex:none; width:36px; height:42px; min-width:0;
  padding:0; border:0; border-radius:10px; color:#55585f; background:transparent; cursor:pointer;
}
#seafix-demo :is(#sf-chat-compose,.sf-mini-compose) .sf-chat-sticker-toggle svg { width:22px!important; height:22px!important; }
#seafix-demo .sf-chat-sticker-toggle:is(:hover,[aria-expanded=true]) { background:#edf0f4; color:#17191d; }
#seafix-demo .sf-chat-sticker-picker {
  position:fixed; z-index:1500; display:flex; flex-direction:column; box-sizing:border-box;
  width:364px; max-width:calc(100vw - 24px); overflow:hidden; padding:10px;
  border:1px solid var(--sf-line); border-radius:22px;
  color:var(--sf-text); background:light-dark(rgb(250 251 253 / .94),rgb(30 33 40 / .94));
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 12px 44px rgb(0 0 0 / .18);
  animation:sf-sticker-enter .16s ease-out;
}
#seafix-demo .sf-chat-sticker-picker>header { display:flex; align-items:center; justify-content:space-between; flex:none; padding:0 4px 8px 8px; touch-action:none; }
#seafix-demo .sf-chat-sticker-picker>header strong { font-size:14px; font-weight:650; letter-spacing:.02em; }
#seafix-demo .sf-chat-sticker-picker>header button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; font:24px/1 sans-serif; color:var(--sf-muted); background:transparent; cursor:pointer; }
#seafix-demo .sf-chat-sticker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:6px; overflow-y:auto; min-height:0; padding:2px 2px 8px; overscroll-behavior:contain; scrollbar-width:thin; }
#seafix-demo .sf-chat-sticker-grid>button { display:grid; place-items:center; aspect-ratio:1; width:100%; min-width:0; padding:4px; border:1px solid transparent; border-radius:14px; background:transparent; color:var(--sf-text); font-size:12px; cursor:pointer; }
#seafix-demo .sf-chat-sticker-grid>button:is(:hover,:focus-visible) { background:light-dark(rgb(255 255 255 / .9),rgb(255 255 255 / .08)); border-color:var(--sf-line); }
#seafix-demo .sf-chat-sticker-grid img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; pointer-events:none; }
#seafix-demo :is(.sf-chat-sticker-picker button,.sf-chat-sticker-toggle):focus-visible { outline:2px solid var(--sf-heading); outline-offset:2px; }
#seafix-demo .sf-chat-bubble.is-sticker,
#seafix-demo .sf-chat-bubble.is-mine.is-sticker { width:180px; max-width:70%; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#seafix-demo .sf-chat-bubble.is-sticker>p { display:grid; place-items:center; width:100%; aspect-ratio:1; margin:0; }
#seafix-demo .sf-chat-sticker-image { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
#seafix-demo .sf-chat-sticker-fallback { padding:12px; font-size:13px; text-align:center; }
#seafix-demo #sf-chat-find-result.is-sticker-result>p { width:180px; max-width:100%; }
#seafix-demo .sf-chat-bubble.is-sticker>small { display:block; padding:3px 4px 0; color:var(--sf-muted); text-align:center; }
#seafix-demo :is(.sf-chat-sticker-image,.sf-chat-sticker-fallback)[hidden] { display:none; }
@keyframes sf-sticker-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:759px) {
  #seafix-demo .sf-chat-sticker-picker.is-sheet {
    position:relative; left:auto!important; top:auto!important; z-index:2; flex:0 1 auto;
    width:100%!important; max-width:none; height:min(44dvh,350px); min-height:130px;
    margin-top:8px; padding:20px 8px 4px; border-radius:20px 20px 12px 12px; box-shadow:0 -3px 20px rgb(0 0 0 / .08);
  }
  #seafix-demo .sf-chat-sticker-picker.is-sheet::before { content:""; position:absolute; top:8px; left:calc(50% - 18px); width:36px; height:4px; border-radius:4px; background:var(--sf-muted); opacity:.4; }
  #seafix-demo .sf-chat-sticker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  #seafix-demo :is(#sf-chat-compose,.sf-mini-compose) .sf-chat-sticker-toggle { width:32px; }
}
@media(prefers-reduced-motion:reduce) { #seafix-demo .sf-chat-sticker-picker { animation:none; } }


#seafix-demo .sf-mini-messages .sf-chat-bubble.is-sticker,
#seafix-demo .sf-mini-messages .sf-chat-bubble.is-mine.is-sticker { background:transparent; padding:0; border:0; box-shadow:none; }
/* Three compact columns on phones and desktops; the picker scrolls internally. */

/* Department selection replaces the pack title without shrinking the close action. */
#seafix-demo .sf-chat-sticker-picker>header { gap:8px; }
#seafix-demo .sf-chat-sticker-picker>header>button { flex:none; }
#seafix-demo .sf-chat-sticker-picker .sf-chat-sticker-department {
 flex:1; min-width:0; width:auto; min-height:40px; margin:0;
 padding:7px 10px; border:1px solid var(--sf-line); border-radius:10px;
 background:var(--sf-chat-paper); color:var(--sf-text);
 font:inherit; font-size:14px; font-weight:600; cursor:pointer; touch-action:manipulation;
}
#seafix-demo .sf-chat-sticker-department:focus-visible { outline:2px solid var(--sf-heading); outline-offset:2px; }
#seafix-demo .sf-chat-sticker-grid>button[hidden] { display:none; }