/* ================================================================
   GalSol — mail-rte.css
   Rich-text fields, resizable property panel and readable labels
   for the Mail HTML editor (mail-tool.html + combined-tool.html).
   Pairs with mail-rte.js.
================================================================ */

/* ── Readable text (dark theme) ───────────────────────────────────
   dashboard.css pins --text-2/--text-3 on :root with !important to
   #a8bdd4 / #5a7490, which left the editor's field labels, "INSERT
   TAG:", "Subject Line:" and the helper lines far too dim. A custom
   property declared on a descendant overrides the inherited :root
   value regardless of that !important, so this brightens these two
   pages without touching the rest of the app. Light theme keeps its
   own tokens from theme-light.css. */
html:not([data-theme="light"]) main.page-content {
  --text-2: #dde8f4;
  --text-3: #b8cadc;
}
html:not([data-theme="light"]) main.page-content .me-field-label,
html:not([data-theme="light"]) main.page-content .me-palette-title {
  color: #c9d8e8;
}
html:not([data-theme="light"]) main.page-content .me-align-btn {
  color: #c2d2e3;
}

/* ── Resizable property panel ─────────────────────────────────── */
@media (min-width: 1101px) {
  #meVisual.me-visual-layout {
    grid-template-columns: 160px minmax(0, 1fr) var(--me-props-w, 340px);
  }
}
#mePropsPanel { position: relative; }
.me-props-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 8px;
  cursor: col-resize;
  z-index: 30;
  touch-action: none;
}
.me-props-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 4px;
  height: 44px;
  margin-top: -22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.15s, height 0.15s;
}
.me-props-resizer:hover::after,
.me-props-resizer.dragging::after {
  background: var(--cyan, #00d4ff);
  height: 72px;
  margin-top: -36px;
}
body.me-resizing,
body.me-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}
@media (max-width: 1100px) {
  .me-props-resizer { display: none; }
}

/* ── Rich-text field ──────────────────────────────────────────── */
.rte-box {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.rte-box:focus-within { border-color: rgba(0, 212, 255, 0.5); }

.rte-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 14, 28, 0.55);
}
.rte-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.rte-row-sel { gap: 4px; }

.rte-sel {
  flex: 1 1 0;
  min-width: 64px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #e8f0fa;
  font-size: 12px;
  font-family: var(--font, inherit);
  cursor: pointer;
  outline: none;
}
.rte-sel-style { flex-grow: 1.4; }
.rte-sel-size { flex: 0 0 64px; }
.rte-sel option { background: #0d1728; color: #e8f0fa; }
.rte-sel:focus { border-color: rgba(0, 212, 255, 0.5); }

.rte-btn {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #d4e1ee;
  font-size: 14px;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.rte-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.rte-btn.on {
  background: rgba(0, 212, 255, 0.16);
  border-color: rgba(0, 212, 255, 0.35);
  color: var(--cyan, #00d4ff);
}
.rte-btn svg { width: 15px; height: 15px; }
.rte-sep {
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.14);
  flex: 0 0 1px;
}

.rte-btn[data-color] { flex-direction: column; gap: 1px; }
.rte-btn[data-color] .rte-a { font-family: var(--font, sans-serif); font-weight: 700; font-size: 13px; line-height: 1; }
.rte-btn[data-color] svg { width: 13px; height: 13px; }
.rte-btn .rte-bar { width: 16px; height: 3px; border-radius: 2px; }
.rte-btn.mp-open { background: rgba(0, 212, 255, 0.16); color: var(--cyan, #00d4ff); }

/* The block's background sits on this wrapper, not on the editable
   area itself — gradient text on the area paints with
   background-clip:text, which would swallow its own background. */
.rte-surface { background: #fff; }

.rte-area {
  min-height: 44px;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px 14px;
  outline: none;
  word-break: break-word;
  cursor: text;
}
.rte-full .rte-area { min-height: 130px; }
.rte-block .rte-area { min-height: 80px; }
.rte-area:empty::before {
  content: attr(data-placeholder);
  opacity: 0.45;
  pointer-events: none;
}
/* Mirror the inline CSS mail-rte.js writes into the stored HTML, so
   the editor looks like the email while typing. */
.rte-area h1 { margin: 0 0 0.35em; font-size: 2em; line-height: 1.2; font-weight: 700; }
.rte-area h2 { margin: 0 0 0.35em; font-size: 1.5em; line-height: 1.25; font-weight: 700; }
.rte-area h3 { margin: 0 0 0.3em; font-size: 1.25em; line-height: 1.3; font-weight: 700; }
.rte-area h4 { margin: 0 0 0.3em; font-size: 1.1em; line-height: 1.35; font-weight: 600; }
.rte-area ul, .rte-area ol { margin: 0 0 0.5em; padding-left: 1.6em; }
.rte-area ul { list-style: disc; }
.rte-area ol { list-style: decimal; }
.rte-area ul ul { list-style: circle; }
.rte-area li { margin: 0 0 0.25em; }
.rte-area p { margin: 0 0 0.75em; }
.rte-area blockquote:not([style]) { margin: 0 0 0 0.8ex; border-left: 2px solid #cbd5e1; padding-left: 1ex; }
.rte-area a { color: #2563eb; text-decoration: underline; }
.rte-area::-webkit-scrollbar { width: 5px; }
.rte-area::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.4); border-radius: 3px; }

.rte-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* The app's own h1-h4 / list resets must not leak into the email
   preview — in a real inbox these inherit from the block. */
.rte-area :is(h1, h2, h3, h4),
.me-block-inner :is(h2, h3, h4),
.me-block-inner [data-me-content] h1 {
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.me-block-inner ul { list-style: disc; }
.me-block-inner ol { list-style: decimal; }
.me-block-inner ul ul { list-style: circle; }
.me-block-inner a { color: #2563eb; }

/* Canvas double-click editing */
.me-block-inner [contenteditable="true"] {
  cursor: text;
  outline: 1px dashed rgba(0, 212, 255, 0.6);
  outline-offset: 2px;
}

/* ── Light theme ──────────────────────────────────────────────── */
html[data-theme="light"] .rte-box { border-color: rgba(15, 23, 42, 0.16); background: #fff; }
html[data-theme="light"] .rte-bar-wrap { background: #f1f5f9; border-bottom-color: rgba(15, 23, 42, 0.1); }
html[data-theme="light"] .rte-sel { background: #fff; color: #0f172a; border-color: rgba(15, 23, 42, 0.16); }
html[data-theme="light"] .rte-sel option { background: #fff; color: #0f172a; }
html[data-theme="light"] .rte-btn { color: #334155; }
html[data-theme="light"] .rte-btn:hover { background: rgba(15, 23, 42, 0.07); color: #0f172a; }
html[data-theme="light"] .rte-btn.on { background: rgba(8, 145, 178, 0.12); border-color: rgba(8, 145, 178, 0.35); color: #0e7490; }
html[data-theme="light"] .rte-sep { background: rgba(15, 23, 42, 0.14); }
html[data-theme="light"] .me-props-resizer::after { background: rgba(15, 23, 42, 0.2); }

/* ── Gradient text (editor + canvas) ──────────────────────────────
   The real email gets this from a class under @supports (see
   meGradientText in the tool files); here the gradient rides in the
   inline --gt custom property. */
.rte-area[data-gt],
.rte-area [data-gt],
.me-block-inner [data-gt] {
  background-image: var(--gt);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rte-area[data-gt] { caret-color: #64748b; }

/* ── Property panel sections ──────────────────────────────────── */
.me-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--cyan, #00d4ff);
}
.me-props-body > div:first-child + .me-sec { margin-top: 0; padding-top: 2px; border-top: 0; }

/* ── Paint field (Background / Button Fill) ───────────────────── */
.mp-field { display: flex; gap: 8px; align-items: center; }
.mp-swatch {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  overflow: hidden;
  background-color: #444;
  background-image: conic-gradient(#666 90deg, #444 90deg 180deg, #666 180deg 270deg, #444 270deg);
  background-size: 10px 10px;
}
.mp-swatch i { display: block; width: 100%; height: 100%; }
.mp-swatch:hover, .mp-swatch.mp-open { border-color: var(--cyan, #00d4ff); }
.mp-val { flex: 1; min-width: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px !important; }

/* ── Paint popover ────────────────────────────────────────────── */
.mp-pop {
  position: fixed;
  z-index: 99990; /* under colour-picker.js's popover (99997), which our native inputs open */
  width: 272px;
  padding: 12px;
  border-radius: 12px;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  font-family: var(--font, inherit);
  color: #e8f0fa;
  display: none;
}
.mp-pop.open { display: block; }
.mp-tabs { display: flex; gap: 2px; margin-bottom: 12px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.mp-tabs[hidden] { display: none; }
.mp-tabs button {
  flex: 1;
  padding: 6px 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9fb3c8;
  font: 600 12px var(--font, inherit);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.mp-tabs button:hover { color: #e8f0fa; }
.mp-tabs button.on { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.mp-pane[hidden], .mp-recent-wrap[hidden] { display: none; }
.mp-recent-wrap { margin-bottom: 10px; }
.mp-recent-wrap .mp-sub { margin: 0 0 6px; }
.mp-recent { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.mp-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
/* Flat swatches: no borders or outlines (they read as bright rims around
   every colour). A faint inset ring only lifts the darkest ones off the
   dark panel; the selected colour gets a centred dot instead of a ring. */
.mp-chip {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.mp-chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.5); z-index: 1; }
.mp-chip.on::after, .mp-gchip.on::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}
.mp-pop button { outline: none; }
.mp-pop button:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
.mp-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mp-native {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: none;
  cursor: pointer;
}
.mp-native::-webkit-color-swatch-wrapper { padding: 0; }
.mp-native::-webkit-color-swatch { border: 0; border-radius: 6px; }
.mp-hex {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #f4f8ff;
  font: 12px ui-monospace, Menlo, Consolas, monospace;
  outline: none;
}
.mp-hex:focus { border-color: rgba(255, 255, 255, 0.4); }
.mp-apply {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #00d4ff, #7c3aed);
  color: #fff;
  font: 700 12px var(--font, inherit);
  cursor: pointer;
}
.mp-apply-wide { width: 100%; margin-top: 10px; }
.mp-glist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mp-gchip { position: relative; height: 30px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }
.mp-gchip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
.mp-sub { margin-top: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #b8cadc; }
.mp-to { color: #b8cadc; font-size: 12px; }
.mp-angles { gap: 4px; }
.mp-angle {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: #dde8f4;
  font-size: 14px;
  cursor: pointer;
}
.mp-angle.on { border-color: rgba(255, 255, 255, 0.5); color: #fff; background: rgba(255, 255, 255, 0.12); }
.mp-gprev { flex: 1; height: 30px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.14); }
.mp-none {
  width: 100%;
  margin-top: 10px;
  padding: 7px 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: transparent;
  color: #dde8f4;
  font: 600 12px var(--font, inherit);
  cursor: pointer;
}
.mp-none:hover { border-color: rgba(244, 63, 94, 0.5); color: #fda4af; }
.mp-none[hidden], .mp-hint[hidden] { display: none; }
.mp-hint { margin-top: 8px; font-size: 11px; line-height: 1.4; color: #b8cadc; }

html[data-theme="light"] .me-sec { border-top-color: rgba(15, 23, 42, 0.1); }
html[data-theme="light"] .mp-swatch { border-color: rgba(15, 23, 42, 0.2); }

/* Centred / right-aligned text: keep the bullet or number beside its
   line instead of stranded at the far left edge. */
.rte-area[style*="text-align: center"] :is(ul, ol),
.rte-area[style*="text-align: right"] :is(ul, ol),
.rte-area [style*="text-align: center"] > :is(ul, ol),
.rte-area [style*="text-align: right"] > :is(ul, ol) {
  list-style-position: inside;
  padding-left: 0;
}