/* Shared by server-rendered text, Solid editors, and saved previews. */
img.inline-emoji, .blog-content img.inline-emoji, .photo-caption img.inline-emoji {
  display: inline-block;
  width: auto;
  height: 1.5em;
  max-width: min(100%, 24em);
  object-fit: contain;
  vertical-align: -0.35em;
  margin: 0 0.08em;
  border: 0;
  border-radius: 0;
}
.emoji-field { display: block; position: relative; min-width: 0; }
.emoji-field > input, .emoji-field > textarea { width: 100%; box-sizing: border-box; padding-right: 2.8rem; }
.emoji-field .emoji-trigger { position: absolute; right: .3rem; top: .3rem; width: 2rem; height: 2rem; min-width: 0; min-height: 0; box-sizing: border-box; padding: .25rem; display: grid; place-items: center; border: 1px solid #899d79; border-radius: .3rem; background: #eaf0d8; cursor: pointer; }
.emoji-trigger img { width: 22px; height: 22px; image-rendering: pixelated; }
.emoji-field:has(> input:disabled) .emoji-trigger,
.emoji-field:has(> textarea:disabled) .emoji-trigger,
.emoji-field:has(> input:read-only) .emoji-trigger,
.emoji-field:has(> textarea:read-only) .emoji-trigger { display: none; }
.emoji-picker { display: flex; flex-direction: column; gap: .6rem; position: absolute; z-index: 100; top: 100%; right: 0; width: min(360px, 100%); box-sizing: border-box; padding: .8rem; color: #243b2c; background: #f6f8e8; border: 2px solid #80966f; border-radius: .5rem; box-shadow: 0 8px 24px #172d2840; font: .875rem/1.4 sans-serif; }
.emoji-picker-heading { display: flex; align-items: center; justify-content: space-between; font-weight: bold; }
.emoji-picker-heading button { font-size: 1.3rem; }
.emoji-picker input { width: 100%; box-sizing: border-box; padding: .5rem; }
.emoji-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .25rem; max-height: min(240px, 35vh); overflow-y: auto; }
.emoji-options > button { display: grid; place-items: center; min-height: 42px; padding: .25rem; background: #eef2df; border: 1px solid transparent; border-radius: .25rem; cursor: pointer; font-size: 1.5rem; }
.emoji-options > button:hover, .emoji-options > button:focus-visible, .emoji-options > button.emoji-active { background: #d9e6be; border-color: #526d3d; }
.emoji-options img.inline-emoji { width: 30px; height: 30px; margin: 0; }
.emoji-picker-hint { overflow-wrap: anywhere; min-height: 1.4em; }
/* The visible rich textbox keeps shortcode storage in a native form control. */
.emoji-field > .emoji-backing {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}
.emoji-textbox {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5rem;
  padding: .55rem 2.8rem .55rem .65rem;
  border: 1px solid var(--fern, #80966f);
  border-radius: .15rem;
  background: #fffef9;
  color: var(--pine-teal, #243b2c);
  box-shadow: inset 1px 2px 0 #344e4110;
  font: inherit;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
.emoji-textbox:empty::before { content: attr(data-placeholder); color: #788475; pointer-events: none; }
.emoji-textbox:focus-visible { outline: 3px solid #7b5925; outline-offset: 3px; }
.emoji-textbox[aria-disabled=true] { opacity: .65; cursor: default; }
.emoji-textbox[aria-readonly=true] { background: #edf0e5; cursor: default; }
.emoji-textbox[aria-invalid=true] { border-color: #a2655b; }
.textbox-emoji { display: inline-block; vertical-align: baseline; user-select: all; white-space: nowrap; cursor: default; }
.textbox-emoji img.inline-emoji { pointer-events: none; }
.emoji-textbox.code { font: .9rem/1.6 ui-monospace, monospace; }
.emoji-field .emoji-picker { position: fixed; right: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
.textbox-error { display: block; font-size: .85rem; color: #8a3127; }
.emoji-picker-heading .emoji-drag-handle {
  flex: 1;
  justify-content: flex-start;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: .2rem;
  font: inherit;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.emoji-picker-heading .emoji-drag-handle:active { cursor: grabbing; }
.emoji-options { overflow-x: hidden; }
.emoji-picker .emoji-options > button { min-width: 0; width: 100%; height: 42px; overflow: hidden; padding: .25rem; font-size: 1.5rem; }
.emoji-options .emoji-fallback, .reaction-options .emoji-fallback { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: .65rem/1.2 sans-serif; }
/* Emoji choices display their artwork without button tiles. */
.emoji-picker .emoji-options > button,
.emoji-picker .emoji-options > button:hover,
.emoji-picker .emoji-options > button.emoji-active,
.reaction-picker .reaction-options > button,
.reaction-picker .reaction-options > button:hover,
.reaction-picker .reaction-options > button[aria-pressed=true] {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.emoji-picker .emoji-options > button.emoji-active,
.emoji-picker .emoji-options > button:focus-visible,
.reaction-picker .reaction-options > button:focus-visible {
  outline: 2px solid var(--fern, #80966f);
  outline-offset: -2px;
}

/* Keep full animation previews in both keyboards. */
.emoji-picker .emoji-options > button:has(.emoji-wide),
.reaction-picker .reaction-options > button:has(.emoji-wide) { grid-column: 1 / -1; }
.emoji-picker .emoji-options img.emoji-wide,
.reaction-picker .reaction-options img.emoji-wide {
  width: 100%;
  height: 30px;
  max-width: 100%;
  object-fit: contain;
}
.reaction-picker .reaction-options .reaction-emoji:has(.emoji-wide) {
  width: 100%;
  max-width: 100%;
  height: 30px;
}
/* Crop reaction chips around the center without scaling the artwork. */
.reaction-emoji:has(> .emoji-wide) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--reaction-crop-size, 26px);
  max-width: var(--reaction-crop-size, 26px);
  height: var(--reaction-crop-size, 26px);
  overflow: hidden;
  flex: none;
}
.reaction-emoji > .reaction-image.emoji-wide {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: none;
  object-position: center;
}
.admin-reaction-overlay { --reaction-crop-size: 19px; overflow: hidden; }
.reaction-catalog-card { --reaction-crop-size: 48px; }

.emoji-upload-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
  overflow-wrap: anywhere;
}
.emoji-upload-preview img {
  max-width: 160px;
  max-height: 100px;
  object-fit: contain;
}

.emoji-field-no-button > .emoji-textbox { padding-right: .65rem; }
.table-generator {
  box-sizing: border-box;
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 1.25rem;
  color: var(--pine-teal, #243b2c);
  background: #f6f8e8;
  border: 2px solid #80966f;
  border-radius: .5rem;
  box-shadow: 0 12px 40px #172d2840;
  font: 1rem/1.5 sans-serif;
}
.table-generator::backdrop { background: #172d2870; }
.table-generator-heading, .table-generator-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.table-generator-heading { justify-content: space-between; }
.table-generator-heading h2 { margin: 0; font-size: 1.25rem; }
.table-generator button { padding: .4rem .7rem; cursor: pointer; }
.table-generator button:disabled { opacity: .5; cursor: default; }
.table-generator-actions { margin: 1rem 0; }
.table-generator-scroll { overflow-x: auto; }
.table-generator table { width: 100%; border-collapse: collapse; }
.table-generator th, .table-generator td { min-width: 170px; padding: .5rem; border: 1px solid #a4b294; vertical-align: top; }
.table-generator th { background: #eaf0d8; }
.table-generator th > button { margin-top: .4rem; font-size: .75rem; }
.table-generator th:last-child, .table-generator td:last-child { min-width: 100px; width: 100px; }
.table-generator-footer { justify-content: flex-end; margin-bottom: 0; }
.table-generator .emoji-textbox { font-weight: normal; text-align: left; }