/* Peepsule "Create Post" dialog revamp - loaded after peepsule-theme.css via one <link> in index.html.
   Scoped to the status composer dialog only: [data-testid="dialogStatusComposer"] that contains the editor
   (the edit-history dialog reuses the same test id but has no editor, so :has() keeps it untouched).
   Uses only stock MUI class names + the Lexical editor's contenteditable, never build-specific hashed classes,
   and sets no surface colours, so it works in light AND dark mode.
   To turn it off, remove the <link href="/peepsule-composer.css"> line from public/web/index.html. */

/* ---- sheet ------------------------------------------------------------------------------------------------------ */
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialog-paper {
  border-radius: 28px !important;
  border: 1px solid var(--ps-hair, rgba(128, 128, 128, 0.18));
  box-shadow: 0 30px 80px -20px rgba(0, 20, 40, 0.45), 0 0 0 1px rgba(0, 194, 255, 0.06) !important;
  overflow: hidden;
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialog-paper::before {
  /* soft brand glow along the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2; pointer-events: none;
  background: var(--ps-gradient, linear-gradient(90deg, #00C2FF, #3D9BFF, #8A6BFF));
}

/* ---- header ----------------------------------------------------------------------------------------------------- */
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialogTitle-root {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--ps-hair, rgba(128, 128, 128, 0.18));
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialogTitle-root .MuiIconButton-root {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(128, 128, 128, 0.14);
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialogTitle-root .MuiIconButton-root:hover {
  background: rgba(128, 128, 128, 0.26); transform: rotate(90deg);
}

/* ---- writing area ----------------------------------------------------------------------------------------------- */
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) [contenteditable="true"] {
  font-size: 1.2rem !important; line-height: 1.55; min-height: 140px; caret-color: var(--ps-primary, #00C2FF);
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) [contenteditable="true"]:empty::before {
  font-size: 1.2rem !important; opacity: 0.6;
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiAvatar-root {
  box-shadow: 0 0 0 2px var(--ps-primary, #00C2FF), 0 6px 18px -4px rgba(0, 194, 255, 0.55);
}

/* ---- action tiles (photos, tag, poll, schedule, emoji, ...) ------------------------------------------------------ */
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:not(.MuiDialogTitle-root *) {
  width: 42px; height: 42px; border-radius: 14px;
  background: rgba(128, 128, 128, 0.10);
  color: #2d8cf0;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:not(.MuiDialogTitle-root *):hover {
  transform: translateY(-2px);
  background: rgba(128, 128, 128, 0.20);
  box-shadow: 0 8px 18px -10px rgba(0, 20, 40, 0.55);
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:not(.MuiDialogTitle-root *):active { transform: scale(0.94); }

/* ---- footer + Post button --------------------------------------------------------------------------------------- */
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialogActions-root {
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); gap: 10px;
  border-top: 1px solid var(--ps-hair, rgba(128, 128, 128, 0.18));
}
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiButton-containedPrimary {
  min-width: 112px; height: 44px; font-size: 1rem !important;
}
/* the theme's gradient + glow must not make an empty (disabled) Post button look ready */
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiButton-containedPrimary.Mui-disabled {
  background-image: none !important; box-shadow: none !important; transform: none;
  background-color: rgba(128, 128, 128, 0.22) !important; color: rgba(128, 128, 128, 0.85) !important;
}

/* ---- phone: bottom sheet that hugs its content ------------------------------------------------------------------- */
@media (max-width: 599.95px) {
  [data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialog-container { align-items: flex-end; }
  [data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialog-paper {
    margin: 0 !important; width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 55vh; max-height: 94vh !important; max-height: 94dvh !important;
    border-radius: 28px 28px 0 0 !important; border-bottom: 0;
    animation: psSheetUp .32s cubic-bezier(.2, .8, .2, 1) both;
  }
  [data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialogTitle-root { padding-top: 22px; }
  [data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiDialogTitle-root::before {
    /* grab handle */
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 999px; background: rgba(128, 128, 128, 0.4);
  }
}
@keyframes psSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  [data-testid="dialogStatusComposer"] .MuiDialog-paper, [data-testid="dialogStatusComposer"] .MuiIconButton-root { animation: none !important; transition: none !important; }
}

/* ---- original icon set (v2) ---------------------------------------------------------------------------------------
   Replaces the stock lineficon glyphs inside this dialog only. Each action gets its own full-colour icon, drawn as an
   inline SVG so it reads on light and dark backgrounds. The icon font is untouched everywhere else. */
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photos-alt-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photo-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photos-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-user1-plus-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-barchart-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-clock-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-checkin-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-video-url,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-videocam-o,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-smile-o { display: inline-flex; align-items: center; justify-content: center; }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photos-alt-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photo-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photos-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-user1-plus-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-barchart-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-clock-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-checkin-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-video-url::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-videocam-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-smile-o::before { content: "" !important; display: block; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 2px 3px rgba(0, 20, 40, 0.18)); transition: transform .16s ease; }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photos-alt-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photo-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-photos-o::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2300C2FF'/%3E%3Cstop offset='1' stop-color='%233D6BFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2.5' y='4' width='19' height='16' rx='4.5' fill='url(%23g)'/%3E%3Ccircle cx='8.5' cy='9.5' r='2.1' fill='%23fff'/%3E%3Cpath d='M2.5 16.2l5.3-4.9 4.3 4 3.2-3 6.2 5.7A4.5 4.5 0 0 1 17 20H7a4.5 4.5 0 0 1-4.5-3.8z' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-user1-plus-o::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='8' r='4' fill='%238A6BFF'/%3E%3Cpath d='M2.5 20.5a7.5 7.5 0 0 1 15 0z' fill='%238A6BFF' fill-opacity='.8'/%3E%3Ccircle cx='18.6' cy='7' r='4.2' fill='%23FF5CAA'/%3E%3Cpath d='M18.6 4.9v4.2M16.5 7h4.2' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-barchart-o::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='11' width='4.6' height='9.5' rx='1.8' fill='%23FFB020'/%3E%3Crect x='9.7' y='3.5' width='4.6' height='17' rx='1.8' fill='%23FF7A45'/%3E%3Crect x='15.9' y='7.5' width='4.6' height='13' rx='1.8' fill='%23FFD166'/%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-clock-o::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%23FF5C8A'/%3E%3Ccircle cx='12' cy='12' r='6.6' fill='%23fff' fill-opacity='.22'/%3E%3Cpath d='M12 7v5.2l3.4 2' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-checkin-o::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7.6 7.6 0 0 0-7.6 7.6c0 5.6 7.6 12.4 7.6 12.4s7.6-6.8 7.6-12.4A7.6 7.6 0 0 0 12 2z' fill='%231FC58B'/%3E%3Ccircle cx='12' cy='9.6' r='3' fill='%23fff'/%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-video-url::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5.5' width='13.5' height='13' rx='3.8' fill='%23FF5D5D'/%3E%3Cpath d='M17.4 10.2l4.1-2.6v8.8l-4.1-2.6z' fill='%23FF9E9E'/%3E%3Cpath d='M8 9.6v4.8l4-2.4z' fill='%23fff'/%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-videocam-o::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='%23FF3D71'/%3E%3Cg fill='none' stroke='%23FF3D71' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7.6 7.6a6.2 6.2 0 0 0 0 8.8M16.4 7.6a6.2 6.2 0 0 1 0 8.8'/%3E%3Cpath d='M4.6 4.6a10.4 10.4 0 0 0 0 14.8M19.4 4.6a10.4 10.4 0 0 1 0 14.8' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .ico-smile-o::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%23FFC83D'/%3E%3Ccircle cx='8.7' cy='10.2' r='1.4' fill='%235B3A00'/%3E%3Ccircle cx='15.3' cy='10.2' r='1.4' fill='%235B3A00'/%3E%3Cpath d='M7.8 14.2c.9 2.3 2.4 3.3 4.2 3.3s3.3-1 4.2-3.3' fill='none' stroke='%235B3A00' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-photos-alt-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-photo-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-photos-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-user1-plus-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-barchart-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-clock-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-checkin-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-video-url::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-videocam-o::before,
[data-testid="dialogStatusComposer"]:has([contenteditable="true"]) .MuiIconButton-root:hover .ico-smile-o::before { transform: scale(1.14) rotate(-4deg); }