/* MessageMediator emoji picker. Uses the app tokens --card --line --ink --mut --navy with fallbacks. */
.mme-root, .mme-btn {
  --mme-card: var(--card, #ffffff);
  --mme-line: var(--line, #dfe3ea);
  --mme-ink: var(--ink, #1b2333);
  --mme-mut: var(--mut, #667085);
  --mme-navy: var(--navy, #1f3a68);
  --mme-hover: rgba(127, 140, 160, .16);
}
@media (prefers-color-scheme: dark) {
  .mme-root, .mme-btn {
    --mme-card: var(--card, #1b2130);
    --mme-line: var(--line, #2f384a);
    --mme-ink: var(--ink, #e8ecf3);
    --mme-mut: var(--mut, #9aa4b5);
    --mme-navy: var(--navy, #8fb0ff);
    --mme-hover: rgba(160, 175, 200, .16);
  }
}
.mme-root [hidden] { display: none !important; }

.mme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 4px 0 0; padding: 0; /* MM-FIX1 T-1059: 44 px target everywhere */
  border: 1px solid var(--mme-line); border-radius: 999px;
  background: var(--mme-card); color: var(--mme-mut); cursor: pointer;
  vertical-align: top; -webkit-tap-highlight-color: transparent;
}
.mme-btn:hover, .mme-btn[aria-expanded="true"] { color: var(--mme-navy); border-color: var(--mme-navy); }
.mme-btn:focus-visible { outline: 2px solid var(--mme-navy); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 599px) { .mme-btn { width: 44px; height: 44px; } }

.mme-root { display: none; }
.mme-root.mme-open { display: block; }
.mme-backdrop { display: none; }
.mme-sheet .mme-backdrop {
  display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9998;
  background: rgba(10, 14, 22, .35);
}

.mme-panel {
  position: fixed; z-index: 9999; box-sizing: border-box;
  display: flex; flex-direction: column;
  width: 360px; max-width: calc(100vw - 16px); height: 400px; max-height: calc(100vh - 16px);
  background: var(--mme-card); color: var(--mme-ink);
  border: 1px solid var(--mme-line); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
  font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.mme-panel *, .mme-panel *::before, .mme-panel *::after { box-sizing: border-box; }
/* phones: bottom sheet */
.mme-panel.mme-narrow {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
  height: 62vh; height: min(62vh, 440px); min-height: 300px;
  border-radius: 16px 16px 0 0; border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mme-head, .mme-tones, .mme-tabs { flex: 0 0 auto; }
.mme-head { display: flex; gap: 6px; align-items: center; padding: 8px 8px 6px; }
.mme-search {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px;
  border: 1px solid var(--mme-line); border-radius: 10px;
  background: transparent; color: var(--mme-ink); font: inherit; font-size: 16px; /* 16px: no iOS zoom */
}
.mme-search::placeholder { color: var(--mme-mut); }
.mme-search:focus { outline: 2px solid var(--mme-navy); outline-offset: 0; border-color: transparent; }
.mme-tonebtn, .mme-close, .mme-tone, .mme-tab {
  flex: 0 0 auto; width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--mme-ink);
  font-size: 20px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mme-close { font-size: 24px; color: var(--mme-mut); }
.mme-tonebtn:hover, .mme-close:hover, .mme-tone:hover, .mme-tab:hover { background: var(--mme-hover); }
.mme-panel button:focus-visible, .mme-e:focus-visible, .mme-e:focus { outline: 2px solid var(--mme-navy); outline-offset: -2px; }
.mme-narrow .mme-tonebtn, .mme-narrow .mme-close, .mme-narrow .mme-tone, .mme-narrow .mme-tab { width: 44px; height: 44px; }
.mme-narrow .mme-search { height: 44px; }

.mme-tones { display: flex; gap: 4px; justify-content: space-between; padding: 0 8px 6px; flex-wrap: wrap; }
.mme-tone[aria-checked="true"] { background: var(--mme-hover); box-shadow: inset 0 0 0 2px var(--mme-navy); }

.mme-tabs {
  display: flex; gap: 2px; padding: 0 6px; border-bottom: 1px solid var(--mme-line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mme-tabs::-webkit-scrollbar { display: none; }
.mme-tab { flex: 1 0 34px; width: auto; min-width: 34px; border-radius: 8px 8px 0 0; font-size: 18px; position: relative; opacity: .7; }
.mme-narrow .mme-tab { flex-basis: 44px; min-width: 44px; }
.mme-tab[aria-selected="true"] { opacity: 1; }
.mme-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--mme-navy);
}

.mme-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 4px 6px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mme-title { position: sticky; top: -4px; z-index: 1; padding: 6px 4px 4px; background: var(--mme-card); color: var(--mme-mut); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mme-row { display: flex; }
.mme-e {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer; user-select: none; -webkit-user-select: none;
  font-size: 24px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.mme-e:hover { background: var(--mme-hover); }
.mme-narrow .mme-e { flex-basis: 44px; width: 44px; height: 44px; font-size: 28px; }
.mme-empty { padding: 24px 8px; text-align: center; color: var(--mme-mut); }
.mme-foot { min-height: 0; padding: 0 10px; color: var(--mme-mut); font-size: 12px; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: no-preference) {
  .mme-open .mme-narrow { animation: mme-up .16s ease-out; }
  .mme-open .mme-panel:not(.mme-narrow) { animation: mme-fade .12s ease-out; }
}
@keyframes mme-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes mme-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }