/* YYCforum Editor — simplified custom editor. Design 2 (Text Labels) is the
   default; the switcher under the editor swaps the .yyc-ed--* skin class. */

/* Posting form wrapper: give the whole form (Leave a reply heading, Title,
   editor, design switcher) breathing room so nothing sits flush against
   the container edge. wpForo leaves .wpf-form-wrapper unpadded. */
#wpforo #wpforo-wrap .wpf-form-wrapper { padding: 0 14px; }

/* Editor wrapper (replaces the wpForo textarea visually). */
.yyc-ed-wrap { margin-bottom: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }

/* Shared editor shell. */
.yyc-ed-box { background: #ffffff; border: 1px solid #d9d9d9; border-radius: 8px; overflow: hidden; }
.yyc-ed-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid #e8e8e8; position: relative; }
.yyc-ed-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 14px; color: #222; cursor: pointer; }
.yyc-ed-btn:hover { background: #f0f0f0; }
.yyc-ed-btn b, .yyc-ed-btn i, .yyc-ed-btn u { font-size: 15px; line-height: 1; }
.yyc-ed-caret { font-size: 10px; color: #666; }
.yyc-ed-ico { width: 19px; height: 19px; fill: currentColor; flex: none; }
.yyc-ed-sep { width: 1px; height: 24px; background: #ddd; margin: 0 4px; flex: none; }
.yyc-ed-size { display: inline-flex; align-items: center; gap: 2px; }
.yyc-ed-size-val { font-size: 13px; color: #444; padding: 0 4px; white-space: nowrap; }
.yyc-ed-adv { color: #555; font-size: 13px; }
.yyc-ed-heading { font: inherit; font-size: 14px; color: #222; border: 0; background: transparent; cursor: pointer; padding: 6px 4px; max-width: 130px; }

/* Editable area (contenteditable div). Placeholder via :empty::before. */
.yyc-ed-area { display: block; width: 100%; min-height: 110px; max-height: 420px; overflow-y: auto; outline: none; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.5; color: #111; background: #fff; box-sizing: border-box; word-break: break-word; }
/* The editable's padding must beat wpForo's dynamic colors.css (loads last,
   high specificity, many !important rules). Use the theme prefix +
   !important so Body/typed text actually sit in from the edge. */
body[class*="yyc-theme-"] #wpforo #wpforo-wrap .yyc-ed-area { padding: 12px 14px !important; }
.yyc-ed-area:empty::before { content: attr(data-placeholder); color: #888; }
.yyc-ed-area p { margin: 0 0 8px; }
.yyc-ed-area img { max-width: 100%; height: auto; }
/* Lists inside the editor: explicit margins so the theme's list styles
   do not collapse them or detach bullets from their text. */
.yyc-ed-area ul, .yyc-ed-area ol { margin: 0 0 8px 22px; padding: 0; }
.yyc-ed-area li { margin: 0 0 2px; line-height: 1.5; }

/* Advanced row: hidden until the Advanced toggle shows it. */
.yyc-ed-advrow { display: none; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid #e8e8e8; background: #fafafa; }
.yyc-ed--advanced .yyc-ed-advrow { display: flex; }

/* Design switcher row. Normally it sits below the editor; when moved onto
   the Title row (.yyc-ed-title-row) it hugs the far right, no top margin. */
.yyc-ed-designrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: #555; }
.yyc-ed-designrow label { display: inline-flex; align-items: center; gap: 6px; }
.yyc-ed-design { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
.yyc-ed-status { font-size: 12px; color: #666; }

/* Title field (phpBB Subject row): the field container becomes a flex row
   — "Title" label left, title input beside it, design switcher far right.
   The pen icon is hidden and the label reads just "Title" (set by JS).
   The !important widths beat the inline width: 100% wpForo puts on both
   wraps; the !important margins beat the label's inline margin-left. */
#wpforo #wpforo-wrap .wpf-field.yyc-ed-title-field { display: flex !important; align-items: center; gap: 10px; }
#wpforo #wpforo-wrap .yyc-ed-title-field .wpf-label-wrap { display: flex !important; align-items: center; flex: none; width: auto !important; float: none; padding: 0 !important; }
#wpforo #wpforo-wrap .yyc-ed-title-field .wpf-label-wrap i { display: none; }
#wpforo #wpforo-wrap .yyc-ed-title-field .wpf-label { margin: 0 !important; }
#wpforo #wpforo-wrap .yyc-ed-title-field .wpf-field-wrap { flex: 1; width: auto !important; }
#wpforo #wpforo-wrap .yyc-ed-title-field .wpf-field-wrap input { width: 100%; box-sizing: border-box; }
#wpforo #wpforo-wrap .yyc-ed-title-field .wpf-field-cl { display: none; }
#wpforo #wpforo-wrap .yyc-ed-title-field .yyc-ed-designrow { margin-top: 0; flex: none; }
@media (max-width: 560px) {
  #wpforo #wpforo-wrap .wpf-field.yyc-ed-title-field { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* Emoji picker popover. */
.yyc-ed-emoji-pop { position: absolute; top: calc(100% + 4px); left: 8px; z-index: 20; display: flex; flex-wrap: wrap; gap: 2px; max-width: 290px; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; }
.yyc-ed-emoji { font-size: 21px; line-height: 1; padding: 5px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.yyc-ed-emoji:hover { background: #f0f0f0; }

/* 1 — Pill Bar: toolbar is a floating pill inside the card. */
.yyc-ed--pill .yyc-ed-box { border-radius: 14px; }
.yyc-ed--pill .yyc-ed-toolbar { margin: 12px 12px 0; padding: 6px; background: #f2f2f2; border: 0; border-radius: 999px; }
.yyc-ed--pill .yyc-ed-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: #ffffff; border: 1px solid #e2e2e2; }
.yyc-ed--pill .yyc-ed-btn:hover { background: #fff; border-color: #bbb; }
.yyc-ed--pill .yyc-ed-adv { width: auto; padding: 0 12px; border-radius: 999px; }
.yyc-ed--pill .yyc-ed-size .yyc-ed-btn { border: 0; background: transparent; }
.yyc-ed--pill .yyc-ed-size { background: #ffffff; border: 1px solid #e2e2e2; border-radius: 999px; padding: 0 4px; }

/* 2 — Text Labels: no icons, plain words, no button backgrounds. */
.yyc-ed--text-labels .yyc-ed-toolbar { border-bottom: 1px solid #e8e8e8; padding: 6px 10px; }
.yyc-ed--text-labels .yyc-ed-btn { font-weight: 500; padding: 6px 10px; }
.yyc-ed--text-labels .yyc-ed-btn:hover { background: transparent; color: #000; text-decoration: underline; }

/* 3 — phpBB Classic: old phpBB prosilver editor — small square grey
   bordered buttons, plain white textarea, Verdana text, no radius. */
.yyc-ed--phpbb .yyc-ed-box { border: 1px solid #b4b4b4; border-radius: 0; }
.yyc-ed--phpbb .yyc-ed-toolbar { padding: 4px; gap: 2px; border-bottom: 0; background: #fff; }
.yyc-ed--phpbb .yyc-ed-btn { background: #efefef; border: 1px solid #b4b4b4; border-radius: 0; padding: 2px 7px; font-size: 11px; color: #000; }
.yyc-ed--phpbb .yyc-ed-btn:hover { background: #e2e2e2; }
.yyc-ed--phpbb .yyc-ed-btn b, .yyc-ed--phpbb .yyc-ed-btn i, .yyc-ed--phpbb .yyc-ed-btn u { font-size: 12px; }
.yyc-ed--phpbb .yyc-ed-ico { width: 14px; height: 14px; }
.yyc-ed--phpbb .yyc-ed-sep { height: 18px; background: #b4b4b4; margin: 0 3px; }
.yyc-ed--phpbb .yyc-ed-size-val { font-size: 11px; color: #000; }
.yyc-ed--phpbb .yyc-ed-heading { font-size: 11px; padding: 2px 3px; color: #000; background: #efefef; border: 1px solid #b4b4b4; border-radius: 0; max-width: none; }
.yyc-ed--phpbb .yyc-ed-adv { font-size: 11px; }
.yyc-ed--phpbb .yyc-ed-caret { color: #000; }
.yyc-ed--phpbb .yyc-ed-advrow { background: #fff; border-bottom: 0; padding: 4px; gap: 2px; }
.yyc-ed--phpbb .yyc-ed-area { border-top: 1px solid #b4b4b4; min-height: 160px; font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 1.4; }

/* 4 — Two-Row Compact: dense, small, two stacked rows. */
.yyc-ed--tworow .yyc-ed-toolbar { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 8px; }
.yyc-ed--tworow .yyc-ed-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 2px 0; }
.yyc-ed--tworow .yyc-ed-row + .yyc-ed-row { border-top: 1px solid #f0f0f0; }
.yyc-ed--tworow .yyc-ed-btn { padding: 4px 8px; font-size: 13px; }
.yyc-ed--tworow .yyc-ed-btn b, .yyc-ed--tworow .yyc-ed-btn i, .yyc-ed--tworow .yyc-ed-btn u { font-size: 13px; }
.yyc-ed--tworow .yyc-ed-ico { width: 16px; height: 16px; }

/* 5 — Floating Card: big shadow, generous padding, large touch targets. */
.yyc-ed--card .yyc-ed-box { border: 0; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 8px 8px 4px; }
.yyc-ed--card .yyc-ed-toolbar { border-bottom: 0; padding: 8px; }
.yyc-ed--card .yyc-ed-btn { min-width: 44px; min-height: 44px; border-radius: 12px; background: #f7f7f7; }
.yyc-ed--card .yyc-ed-btn:hover { background: #eef4ff; }
.yyc-ed--card .yyc-ed-area { background: #fafafa; border-radius: 10px; margin: 0 4px; width: calc(100% - 8px); }

/* 6 — Dark Bar: charcoal toolbar, white icons. */
.yyc-ed--dark .yyc-ed-box { border-color: #1a1a1a; }
.yyc-ed--dark .yyc-ed-toolbar { background: #1a1a1a; border-bottom: 0; }
.yyc-ed--dark .yyc-ed-btn, .yyc-ed--dark .yyc-ed-size-val, .yyc-ed--dark .yyc-ed-adv, .yyc-ed--dark .yyc-ed-heading { color: #ffffff; }
.yyc-ed--dark .yyc-ed-btn:hover { background: #333; }
.yyc-ed--dark .yyc-ed-caret { color: #aaa; }
.yyc-ed--dark .yyc-ed-sep { background: #444; }
.yyc-ed--dark .yyc-ed-heading option { color: #111; }

/* 7 — Bottom Bar: toolbar under the text area, round send button. */
.yyc-ed--bottom .yyc-ed-toolbar { border-bottom: 0; border-top: 1px solid #e8e8e8; }
.yyc-ed--bottom .yyc-ed-send { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.yyc-ed--bottom .yyc-ed-send:hover { background: #333; }

/* 8 — Icon + Label: every button shows both. */
.yyc-ed--iconlabel .yyc-ed-btn { background: #f7f7f7; border: 1px solid #e6e6e6; border-radius: 8px; padding: 6px 12px; font-size: 13px; }
.yyc-ed--iconlabel .yyc-ed-btn:hover { background: #efefef; }
.yyc-ed--iconlabel .yyc-ed-btn span { white-space: nowrap; }

/* 9 — Minimal: borderless ghost buttons, hairline divider, clean white box. */
.yyc-ed--minimal .yyc-ed-box { border: 1px solid #e5e5e5; border-radius: 8px; }
.yyc-ed--minimal .yyc-ed-toolbar { background: transparent; border-bottom: 1px solid #e5e5e5; padding: 6px 8px; gap: 2px; }
.yyc-ed--minimal .yyc-ed-btn { background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; color: #444; }
.yyc-ed--minimal .yyc-ed-btn:hover { background: #f5f5f5; }
.yyc-ed--minimal .yyc-ed-heading { background: transparent; border: 0; color: #444; }
.yyc-ed--minimal .yyc-ed-advrow { background: transparent; border-bottom: 1px solid #e5e5e5; }
.yyc-ed--minimal .yyc-ed-sep { background: #e5e5e5; }

/* 10 — WordPress: classic WP editor — full-width light grey toolbar bar,
   flat buttons separated by hairline dividers, square-ish box. */
.yyc-ed--wordpress .yyc-ed-box { border: 1px solid #ddd; border-radius: 3px; }
.yyc-ed--wordpress .yyc-ed-toolbar { background: #f5f5f5; border-bottom: 1px solid #ddd; padding: 4px 6px; gap: 0; }
.yyc-ed--wordpress .yyc-ed-btn { background: transparent; border: 0; border-radius: 0; padding: 6px 10px; color: #333; }
.yyc-ed--wordpress .yyc-ed-btn:hover { background: #e5e5e5; }
.yyc-ed--wordpress .yyc-ed-heading { background: transparent; border: 0; color: #333; }
.yyc-ed--wordpress .yyc-ed-advrow { background: #fafafa; border-bottom: 1px solid #ddd; }
.yyc-ed--wordpress .yyc-ed-sep { background: #ddd; }