/* Open Discussions smileys. A small theme-aware picker for text editors. */
.od-smiley-tool {
  display:inline-flex; position:relative; vertical-align:middle; max-width:100%;
  line-height:normal;
}
.od-smiley-standalone {display:flex; width:max-content; margin:6px 0 8px;}
.editor-toolbar:has(.od-smiley-tool) {flex-wrap:wrap; align-items:center;}
.od-smiley-tool .od-smiley-trigger,
.editor-toolbar .od-smiley-tool .od-smiley-trigger {
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:5px 10px; margin:0;
  background:var(--od-tool,var(--od-theme-hover,#233248));
  border:1px solid var(--od-border,var(--od-theme-border,#35485e));
  border-radius:4px; color:var(--od-text,var(--od-theme-text,#dce5f1));
  font:600 12px/1.25 system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:normal; white-space:nowrap; cursor:pointer;
}
.od-smiley-tool .od-smiley-trigger:hover,
.editor-toolbar .od-smiley-tool .od-smiley-trigger:hover,
.od-smiley-tool .od-smiley-trigger[aria-expanded='true'] {
  border-color:var(--od-accent,var(--od-theme-accent,#6c9ff3));
  background:var(--od-soft,var(--od-theme-soft,#344f73));
}
.od-smiley-tool .od-smiley-trigger:focus-visible,
.od-smiley-option:focus-visible {
  outline:2px solid var(--od-accent,var(--od-theme-accent,#6c9ff3));outline-offset:2px;
}
.od-smiley-popover {
  box-sizing:border-box; position:fixed; z-index:1100; width:288px;
  max-width:calc(100vw - 20px); padding:10px;
  background:var(--od-panel,var(--od-theme-panel,#161e2a));
  color:var(--od-text,var(--od-theme-text,#dce5f1));
  border:1px solid var(--od-border,var(--od-theme-border,#35485e));
  border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.od-smiley-popover[hidden]{display:none!important;}
.od-smiley-heading {font:700 12px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif; margin:0 0 8px;}
.od-smiley-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;}
.od-smiley-option {
  appearance:none; margin:0!important; padding:0!important; display:grid;place-items:center;
  border:1px solid transparent!important; border-radius:4px!important;
  background:transparent!important; color:inherit!important;
  width:100%;min-width:0;height:34px;line-height:1; font-size:22px!important;
  cursor:pointer; box-shadow:none!important;
}
.od-smiley-option:hover {
  background:var(--od-hover,var(--od-theme-hover,#233248))!important;
  border-color:var(--od-border,var(--od-theme-border,#35485e))!important;
}
.od-smiley-status:not(:empty) {font-size:11px; margin-top:8px; color:var(--od-accent,var(--od-theme-accent,#6c9ff3));}
@media(max-width:420px) {
  .od-smiley-popover {width:270px;}
  .od-smiley-grid {gap:2px;}
  .od-smiley-option {height:33px;}
}

/* v0.10.22: crisp, fully self-hosted glossy smileys. */
.od-smiley-tool .od-smiley-trigger {gap:5px;}
.od-smiley-tool .od-smiley-trigger .od-smiley-icon {width:21px;height:21px;flex:none;}
.od-smiley-option .od-smiley-icon {width:27px;height:27px;max-width:100%;object-fit:contain;pointer-events:none;}
.od-smiley-option:hover .od-smiley-icon {transform:scale(1.08);}
.od-smiley-option .od-smiley-icon {transition:transform .12s ease;}
.od-smiley-hint {margin:9px 1px 0;font-size:11px;line-height:1.45;opacity:.8;}
/* Images work with all eight themes, including the six dark palettes. */
.od-glossy-smiley {display:inline-block!important;width:1.42em!important;height:1.42em!important;
  max-width:none!important;margin:0 1px!important;padding:0!important;object-fit:contain;
  vertical-align:-.32em!important;border:0!important;background:none!important;border-radius:0!important;
  box-shadow:none!important;}
@media (prefers-reduced-motion:reduce) {.od-smiley-option .od-smiley-icon{transition:none;}}

/* v0.10.23: actual glossy artwork is visible while composing, not just after publishing. */
.od-glossy-source {position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
.od-glossy-live-editor {box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;padding:11px 13px;
  white-space:pre-wrap;overflow-wrap:anywhere;overflow-y:auto;line-height:1.55;
  font:inherit;color:var(--od-text,var(--od-theme-text,#f5f7fc));
  background:var(--od-input-bg,var(--od-panel,var(--od-theme-panel,#182432)));
  border:1px solid var(--od-border,var(--od-theme-border,#35485e));border-radius:5px;
  caret-color:currentColor;outline:none;cursor:text;}
.od-glossy-live-editor:focus {border-color:var(--od-accent,var(--od-theme-accent,#7aa9ff));outline:2px solid color-mix(in srgb,var(--od-accent,#7aa9ff) 30%,transparent);outline-offset:0;}
.od-glossy-live-editor.od-glossy-invalid {border-color:#d84f4f;}
.od-glossy-live-editor:empty:before {content:attr(data-placeholder);color:var(--od-muted,var(--od-theme-muted,#a5aebe));pointer-events:none;}
.od-glossy-live-editor .od-glossy-editor-icon {display:inline-block!important;width:1.5em!important;height:1.5em!important;vertical-align:-.34em!important;user-select:all;}