/* Composer panels own these rules; shared layout and palettes stay in their
   existing sheets. Load immediately after shu-appearance.css to preserve the
   cascade. Interactions remain in js/chat/composer-panels.js. */
/* Original pills, now in the measured composer instead of over the text. */
.composer-tools-panel[hidden], .emoji-panel[hidden]{ display:none !important; }
.composer-tools-panel{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
#composerToolsPanel > :is(.pelle-disable-toggle, .memory-entry){ position:relative; inset:auto; z-index:auto; }
#app:has(#composerToolsPanel:not([hidden]), #emojiPanel:not([hidden])) .scroll{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--edge-fade-top),#000 calc(100% - var(--composer-zone) - 8px),transparent calc(100% - var(--composer-zone)));
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--edge-fade-top),#000 calc(100% - var(--composer-zone) - 8px),transparent calc(100% - var(--composer-zone)));
}
.composer .field, .composer textarea{ min-width:0; }
.composer-tools-btn{ flex-shrink:0; border:0; background:transparent; }
.composer-tools-btn[aria-expanded="true"]{ color:var(--accent); }
.emoji-panel{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:2px;
  max-height:min(180px,28dvh); overflow:auto; padding:8px;
  border:1px solid var(--card-line); border-radius:20px;
  background:color-mix(in srgb,var(--panel-bg) 91%,transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.emoji-panel button{ border:0; background:transparent; color:var(--text); border-radius:12px; min-height:44px; font:26px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; cursor:pointer; }
.emoji-panel button:is(:hover,:focus-visible){ background:color-mix(in srgb,var(--accent) 15%,transparent); }

.emoji-group-title{ grid-column:1 / -1; padding:6px 7px 2px; font:12px/1.4 var(--font-en),var(--font-cn); color:var(--text-soft); }