/* Shared chrome for the copy grids (carinhas, emojis, símbolos), driven by faces-engine.js.
   Load after the page stylesheet (carinhas-faces.css / emojis-faces.css / simbolos-faces.css). */
/* ---------- Sticky toolbar: sticks under the site header, slims down once stuck ---------- */
.faces-sticky-sentinel { height: 1px; margin-bottom: -1px; }
.faces-toolbar {
  position: sticky;
  top: calc(var(--dica-header-h, 64px) + 8px);
  z-index: 20;
  transition: padding 0.15s ease, box-shadow 0.15s ease;
}
.faces-toolbar.is-stuck {
  padding-top: 10px;
  padding-bottom: 8px;
  box-shadow: 0 14px 30px rgba(20, 40, 80, 0.14);
}
.faces-toolbar.is-stuck .faces-meta-line { display: none; }
.faces-toolbar.is-stuck .faces-chips-row { margin-top: 8px; }

/* Search field extras */
.faces-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #334155;
  cursor: pointer;
  transform: translateY(-50%);
}
.faces-search-clear[hidden] { display: none; }
.faces-toolbar.is-stuck .faces-chips { scrollbar-width: none; padding-bottom: 0; }
.faces-toolbar.is-stuck .faces-chips::-webkit-scrollbar { display: none; }
.faces-search-wrap .faces-search-clear svg { position: static; width: 14px; height: 14px; transform: none; fill: none; }
.faces-kbd {
  position: absolute;
  right: 14px;
  top: 50%;
  padding: 1px 8px;
  border: 1px solid #dfe5ee;
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #f8fafc;
  color: #64748b;
  font: 700 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
  transform: translateY(-50%);
}
.faces-search-clear:not([hidden]) ~ .faces-kbd,
#faces-search:focus ~ .faces-kbd { display: none; }
@media (hover: none), (max-width: 720px) {
  .faces-kbd { display: none; }
}
#faces-search::-webkit-search-cancel-button { display: none; }

/* Juntar toggle: same chrome as Favoritas */
.faces-compose-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.faces-compose-toggle:hover { border-color: #cbd5e1; background: #f8fafc; }
.faces-compose-toggle.is-active { border-color: #93c5fd; background: #e8f1ff; color: var(--faces-blue); }
.faces-compose-toggle:focus-visible,
.faces-search-clear:focus-visible,
.faces-suggest button:focus-visible { outline: 2px solid var(--faces-blue); outline-offset: 2px; }

/* ---------- Search results: one ranked, de-duplicated grid ---------- */
body.faces-searching [data-face-section],
body.faces-searching .faces-mid-cta,
body.faces-searching #faces-recents-panel,
body.faces-searching #faces-favorites-panel { display: none !important; }
.faces-results .feature-head p { margin: 4px 0 0; color: #526072; font-size: 13.5px; }
@media (hover: none) {
  #faces-results-hint { display: none; }
}

.faces-no-results p { margin: 0 0 10px; }
.faces-no-results p:last-child { margin: 10px 0 0; }
.faces-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.faces-suggest button {
  margin: 0;
  padding: 7px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #fff;
  color: var(--faces-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.faces-suggest button:hover { border-color: #93c5fd; background: #f0f6ff; }

/* ---------- Juntar: tray fixed at the bottom ---------- */
.face-btn.is-added { border-color: #93c5fd !important; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18); }
body.faces-composing .face-copy-idle { font-size: 0; }
body.faces-composing .face-copy-idle::after { content: "Juntar"; font-size: 13px; }
.faces-compose {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 90;
  width: min(760px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  transform: translateX(-50%);
}
.faces-compose[hidden] { display: none; }
.faces-compose-inner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#faces-compose-text {
  flex: 1 1 240px;
  min-width: 0;
  height: 44px;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: var(--faces-ink) !important;
  font-family: "Segoe UI Symbol", "Segoe UI", sans-serif;
  font-size: 17px !important;
}
.faces-compose-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.faces-compose-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #dfe5ee;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}
.faces-compose-actions .faces-compose-copy { border-color: var(--faces-blue); background: var(--faces-blue); color: #fff; }
.faces-compose-actions .faces-compose-close { width: 44px; justify-content: center; padding: 0; }
body.faces-composing .faces-toast { bottom: 104px; }
body.faces-composing .faces-board { padding-bottom: 90px; }

/* ---------- Phones: denser grid, the whole card copies ---------- */
@media (max-width: 720px) {
  .face-grid,
  .emoji-content.face-grid,
  body.faces-density-compact .face-grid,
  body.faces-density-large .face-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .face-btn,
  body.faces-density-compact .face-btn,
  body.faces-density-large .face-btn {
    min-height: 84px;
    padding: 14px 6px 10px;
    border-radius: 12px;
    justify-content: center;
  }
  .face-copy { display: none; }
  .face-label { font-size: 12px; -webkit-line-clamp: 1; }
  .face-star { top: 3px; right: 3px; }
  .faces-toolbar-row { gap: 8px; }
  .faces-random,
  .faces-fav-toggle,
  .faces-compose-toggle { flex: 1 1 0; min-width: 0; height: 42px; padding: 0 8px; gap: 5px; font-size: 13px; white-space: nowrap; }
  .faces-toolbar.is-stuck .faces-random,
  .faces-toolbar.is-stuck .faces-fav-toggle,
  .faces-toolbar.is-stuck .faces-compose-toggle { display: none; }
  #faces-search { height: 44px; }
  .faces-compose { bottom: 10px; padding: 8px; }
  .faces-compose-actions { width: 100%; flex-wrap: nowrap; }
  .faces-compose-actions button { flex: 1 1 auto; justify-content: center; padding: 0 8px; }
  /* Close sits on the tray corner so the three actions fit one row */
  .faces-compose-actions .faces-compose-close {
    position: absolute;
    top: -14px;
    right: -6px;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  }
  body.faces-composing .faces-toast { bottom: 128px; }
  body.faces-composing .faces-board { padding-bottom: 120px; }
}
@media (max-width: 340px) {
  .face-grid,
  .emoji-content.face-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .faces-random .faces-btn-ico,
  .faces-fav-toggle .faces-btn-ico,
  .faces-compose-toggle .faces-btn-ico { display: none; }
}

html[data-theme="dark"] .faces-compose-toggle,
html[data-theme="dark"] .faces-compose,
html[data-theme="dark"] .faces-compose-actions button,
html[data-theme="dark"] .faces-suggest button {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html[data-theme="dark"] .faces-compose-toggle.is-active { background: #172554; border-color: #3b82f6; color: #bfdbfe; }
html[data-theme="dark"] .faces-compose-actions .faces-compose-copy { background: #2563eb; border-color: #2563eb; }
html[data-theme="dark"] #faces-compose-text { background: #0f172a !important; border-color: #334155 !important; }
html[data-theme="dark"] .faces-search-clear { background: #334155; color: #f1f5f9; }
html[data-theme="dark"] .faces-kbd { background: #0f172a; border-color: #334155; color: #94a3b8; }
html[data-theme="dark"] .faces-results .feature-head p { color: #94a3b8; }

/* Emojis and símbolos are single glyphs: phone grid like an emoji keyboard, names only on desktop */
@media (max-width: 720px) {
  body.faces-kind-emojis .face-grid,
  body.faces-kind-simbolos .face-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  body.faces-kind-emojis .face-btn,
  body.faces-kind-simbolos .face-btn { min-height: 60px; padding: 10px 2px; }
  body.faces-kind-emojis .face-label,
  body.faces-kind-simbolos .face-label,
  body.faces-kind-emojis .faces-names-toggle,
  body.faces-kind-simbolos .faces-names-toggle { display: none !important; }
  body.faces-kind-emojis .face-glyph { font-size: 28px; }
  body.faces-kind-simbolos .face-glyph { font-size: 24px; }
  body.faces-kind-emojis .face-star,
  body.faces-kind-simbolos .face-star { top: 1px; right: 1px; transform: scale(0.85); }
}
@media (max-width: 340px) {
  body.faces-kind-emojis .face-grid,
  body.faces-kind-simbolos .face-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Emoji skin tone picker (lives in the meta line, hidden while the toolbar is stuck) */
.faces-meta-line { flex-wrap: wrap; gap: 8px 12px; }
.faces-tones { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.faces-tones-label { color: #526072; font-size: 13px; font-weight: 700; }
.faces-tones button {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 0 1px #cbd5e1;
  cursor: pointer;
}
.faces-tones button.is-active { box-shadow: 0 0 0 2px var(--faces-blue); }
.faces-tones button:focus-visible { outline: 2px solid var(--faces-blue); outline-offset: 2px; }
@media (max-width: 720px) {
  .faces-tones { order: 3; width: 100%; margin-left: 0; }
}
html[data-theme="dark"] .faces-tones-label { color: #94a3b8; }
html[data-theme="dark"] .faces-tones button { border-color: #1e293b; box-shadow: 0 0 0 1px #475569; }
html[data-theme="dark"] .faces-tones button.is-active { box-shadow: 0 0 0 2px #60a5fa; }

/* Emojis must use the color emoji fonts: the shared card stack starts with "Segoe UI Symbol",
   which draws them as black-and-white outlines on Windows. */
body.faces-kind-emojis .face-glyph,
body.faces-kind-emojis .toast-face,
body.faces-kind-emojis #faces-compose-text {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}