@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

:root {
  --deep: #17000f;
  --black: #050003;
  --wine: #87004f;
  --pink: #ff4eb6;
  --hot: #ff1493;
  --soft: #ffc2df;
  --page: #c991a6;
  --bubble: #b81372;
  --bubble2: #cf3c92;
  --text: #fff6ff;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #060003;
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
}

button,
input {
  font: inherit;
}

.appShell {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #100009, #8a0050 48%, #020002);
}

.topBar {
  height: 34px;
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  align-items: center;
  background: linear-gradient(90deg, #87004f, #320020 50%, #87004f);
  border-bottom: 2px solid rgba(255, 130, 210, 0.9);
  color: #fff3ff;
  font-weight: 900;
  font-style: italic;
  text-shadow: 0 0 10px rgba(255, 180, 235, 0.9);
}

.topName,
.topVersion {
  padding: 0 12px;
  font-size: 1.2rem;
}

.topVersion {
  text-align: right;
}

.topForever {
  text-align: center;
  font-size: 1.04rem;
}

.mainGrid {
  height: calc(100vh - 34px);
  display: grid;
  grid-template-columns: 245px minmax(650px, 1fr) 245px;
  gap: 8px;
  padding: 8px;
}

.leftPanel,
.rightPanel {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(520px, 1fr) 300px;
  gap: 10px;
}

.controlCard,
.impactCard,
.bottomImageBox {
  border: 2px solid var(--hot);
  border-radius: 14px;
  background:
    radial-gradient(circle at top, rgba(255, 70, 185, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(22, 0, 16, 0.98), rgba(3, 0, 3, 0.98));
  box-shadow:
    inset 0 0 18px rgba(255, 70, 185, 0.3),
    0 0 22px rgba(255, 25, 150, 0.35);
  overflow: hidden;
}

.controlCard {
  padding: 12px;
}

.panelTitle {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  text-align: center;
  margin-bottom: 12px;
  font-size: 1.18rem;
  line-height: 1.25;
  font-style: italic;
  text-shadow: 0 0 12px rgba(255, 200, 245, 1);
}

.titleGlowHeart {
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  color: #ffacd8;
  text-shadow:
    0 0 5px #fff,
    0 0 12px #ff4eb6,
    0 0 22px #ff1493,
    0 0 35px #ff1493;
  filter: drop-shadow(0 0 10px rgba(255, 40, 170, 1));
}

.controlButtons {
  display: grid;
  gap: 7px;
}

.controlButtons button,
.impactCard button {
  min-height: 33px;
  border: 1px solid rgba(255, 185, 230, 0.95);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 79, 185, 0.96), rgba(137, 0, 82, 0.96));
  color: white;
  font-weight: 900;
  font-style: italic;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 13px rgba(255, 60, 180, 0.95);
}

.controlButtons button span:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.controlEmoji {
  font-size: 1.08rem;
  text-shadow:
    0 0 5px #fff,
    0 0 11px #ff62ca,
    0 0 18px #ff1493,
    0 0 26px #ff1493;
  filter: drop-shadow(0 0 8px rgba(255, 110, 220, 1));
}

.bottomImageBox {
  padding: 8px;
}

.bottomImageBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--hot);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(255, 45, 170, 0.75);
  background: #17000f;
}

.chatArea {
  min-width: 0;
  display: grid;
  grid-template-rows: 150px 1fr 82px;
  background: #c790a5;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}

.bannerRow {
  display: grid;
  grid-template-columns: 120px 135px 1fr 135px 120px;
  background: #ffc1dc;
  border-bottom: 2px solid rgba(133, 0, 74, 0.35);
}

.namePanel {
  display: grid;
  place-items: center;
  color: #c10070;
  font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  font-size: 2.9rem;
  line-height: 1;
  background: linear-gradient(180deg, #ffd1e5, #e6a1c1);
  text-shadow: 0 0 8px rgba(255,255,255,0.85);
}

.boundBanner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.messages {
  padding: 26px 18px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}

.bubble {
  width: min(760px, 78%);
  border: 2px solid rgba(255, 205, 235, 0.95);
  border-radius: 14px;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--bubble2), var(--bubble));
  box-shadow: 0 0 12px rgba(255, 75, 180, 0.45);
  line-height: 1.45;
  font-size: 1.02rem;
  font-weight: 800;
}

.daisyBubble {
  align-self: flex-start;
  background: linear-gradient(180deg, #e253a6, #a70063);
}

.inputBar {
  display: grid;
  grid-template-columns: 62px 62px minmax(340px, 590px) 62px 62px;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 16px;
  background: rgba(196, 143, 163, 0.95);
}

.inputPill {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: center;
  border: 2px solid var(--pink);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 16px rgba(255, 75, 185, 0.65);
  overflow: hidden;
}

.inputPill input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  padding: 0 22px;
  color: #ab0066;
  font-size: 1rem;
}

.inputPill input::placeholder {
  color: #e248a1;
  font-style: italic;
}

.sendButton,
.roundButton {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ff4eb6 45%, #8d0054);
  color: white;
  font-size: 1.2rem;
  box-shadow: 0 0 16px rgba(255, 80, 190, 0.8);
}

.roundButton {
  width: 56px;
  height: 56px;
  font-size: 1.35rem;
}

.heartButton {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
}

.heartSlot {
  display: inline-grid;
  place-items: center;
}

.heartSlot img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 60, 180, 0.9));
}

.bigHeart img {
  width: 130px;
  height: 130px;
}

.impactCard {
  display: grid;
  gap: 9px;
  align-content: start;
  text-align: center;
  padding: 13px;
}

.impactCard h2 {
  margin: 0;
  font-size: 1.22rem;
  font-style: italic;
  text-shadow: 0 0 12px rgba(255, 200, 245, 1);
}

.impactCard p {
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 900;
}

.heartFrame {
  height: 142px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hot);
  border-radius: 8px;
  background: #070004;
}

.impactCard button {
  grid-template-columns: 1fr;
  border-radius: 8px;
  min-height: 34px;
  font-size: 0.78rem;
}

.statusBox {
  min-height: 86px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hot);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(206, 28, 126, 0.9), rgba(63, 0, 38, 0.92));
  font-weight: 900;
  font-style: italic;
  box-shadow: 0 0 14px rgba(255, 45, 170, 0.45);
}

/* LUCA_EXACT_ASSET_LAYOUT_START */

.photoPanel {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #ffd1e5, #d58aaa);
  overflow: hidden;
  border-left: 1px solid rgba(160, 0, 90, 0.25);
  border-right: 1px solid rgba(160, 0, 90, 0.25);
}

.photoPanel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.heartButton img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,0.9))
    drop-shadow(0 0 12px rgba(255, 40, 170, 1));
}

.heartFrame img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 9px rgba(255, 50, 175, 1))
    drop-shadow(0 0 18px rgba(255, 20, 147, 0.9));
}

.memorabiliaOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(35, 0, 22, 0.68);
  backdrop-filter: blur(8px);
}

.memorabiliaPanel {
  position: relative;
  width: min(72vw, 820px);
  max-height: 86vh;
  border: 2px solid #ff4eb6;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 190, 225, 0.98), rgba(175, 20, 105, 0.98));
  box-shadow:
    0 0 24px rgba(255, 60, 180, 0.9),
    inset 0 0 18px rgba(255, 255, 255, 0.35);
  padding: 20px;
}

.memorabiliaPanel img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

.closeMemorabilia {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #97005b;
  color: white;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(255, 80, 190, 0.8);
}

/* LUCA_EXACT_ASSET_LAYOUT_END */

/* LUCA_MEMORABILIA_CLOSE_FIX_START */

/* Make sure the memorabilia popup actually stays hidden until the left heart is clicked. */
.memorabiliaOverlay[hidden] {
  display: none !important;
}

.closeMemorabilia {
  cursor: pointer;
  z-index: 60;
}

/* LUCA_MEMORABILIA_CLOSE_FIX_END */

/* LUCA_WEB_POLISH_PASS_1_START */

/* Header polish: shorter top banner, wider photo panels, slightly tighter centre title. */
.chatArea {
  grid-template-rows: 112px 1fr 82px !important;
}

.bannerRow {
  grid-template-columns: 150px 116px minmax(500px, 0.82fr) 116px 150px !important;
}

.namePanel {
  font-size: 2.65rem !important;
}

.photoPanel img {
  object-fit: cover !important;
  object-position: center center !important;
}

.boundBanner {
  object-fit: cover !important;
}

/* Bring the placeholder chat bubbles down away from the header. */
.messages {
  padding-top: 58px !important;
}

/* Left column: let the control panel end just under Memories, then give the image more height. */
.leftPanel {
  grid-template-rows: auto minmax(340px, 1fr) !important;
}

.leftPanel .controlCard {
  align-self: start !important;
}

.leftPanel .bottomImageBox {
  min-height: 340px !important;
}

.leftPanel .bottomImageBox img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* Keep right-side image as-is visually. */
.rightPanel .bottomImageBox img {
  object-position: center center !important;
}

/* Memorabilia: no big outer modal box. It slides up from the left heart. */
.memorabiliaOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50 !important;
  display: block !important;
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

.memorabiliaOverlay[hidden] {
  display: none !important;
}

.memorabiliaPanel {
  position: fixed !important;
  left: var(--mem-left, 420px) !important;
  bottom: var(--mem-bottom, 110px) !important;
  width: min(360px, 24vw) !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  animation: lucaMemorabiliaSlideUp 180ms ease-out forwards;
}

.memorabiliaPanel img {
  width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.closeMemorabilia {
  position: absolute !important;
  top: -10px !important;
  right: -10px !important;
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #a00062 !important;
  color: white !important;
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 60 !important;
  box-shadow: 0 0 14px rgba(255, 80, 190, 0.9) !important;
}

@keyframes lucaMemorabiliaSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(26px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* LUCA_WEB_POLISH_PASS_1_END */


/* LUCA_WEB_LAYOUT_NUDGE_2_START */

/* Top strip and banner area */
.chatArea {
  grid-template-rows: 96px 1fr 76px !important;
}

.bannerRow {
  grid-template-columns: 128px 102px minmax(690px, 1fr) 102px 128px !important;
  align-items: stretch !important;
}

.bannerRow > :nth-child(3) {
  margin-left: 18px !important;
  margin-right: 8px !important;
}

.bannerRow > :nth-child(4) {
  transform: translateX(16px) !important;
}

.bannerRow > :nth-child(5) {
  transform: translateX(14px) !important;
}

.bannerRow > :nth-child(1) img,
.bannerRow > :nth-child(5) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.boundBanner,
.bannerRow > :nth-child(3) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Placeholder text bubbles slightly lower */
.messages {
  padding-top: 44px !important;
}

/* Left column, control panel tighter, bottom image lifted a touch */
.leftPanel .controlCard,
.leftPanel .panelCard,
.leftPanel .menuCard {
  margin-bottom: 8px !important;
}

.leftPanel .bottomImageBox,
.leftPanel .imageCardBottom,
.leftPanel .bottomPhotoBox {
  margin-bottom: 12px !important;
}

.leftPanel .bottomImageBox img,
.leftPanel .imageCardBottom img,
.leftPanel .bottomPhotoBox img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* Right column, impact card and kissing image lifted a touch */
.rightPanel .impactCard,
.rightPanel .impactBox,
.rightPanel .statusCard,
.rightPanel .reactionCard {
  margin-bottom: 10px !important;
}

.rightPanel .bottomImageBox,
.rightPanel .imageCardBottom,
.rightPanel .bottomPhotoBox {
  margin-bottom: 12px !important;
}

.rightPanel .bottomImageBox img,
.rightPanel .imageCardBottom img,
.rightPanel .bottomPhotoBox img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* Bottom controls, lift them a bit */
:is(.bottomBar, .inputBar, .composerBar, .composerRow, .footerBar, .inputDock, .bottomDock, .chatFooter) {
  bottom: 12px !important;
}

:is(.micButton, .leftInputHeart, .inputPill, .messagePill, .composerPill, .rightInputHeart, .callButton, .phoneButton, .receiverButton) {
  position: relative !important;
  top: -8px !important;
}

/* Spread the hearts out and widen the message pill */
.leftInputHeart {
  left: -16px !important;
}

.rightInputHeart {
  right: -16px !important;
}

:is(.inputPill, .messagePill, .composerPill) {
  width: min(520px, 58vw) !important;
  max-width: 520px !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
}

/* Make sure the tiny side icons on the left pills glow hard */
.leftPanel button img,
.leftPanel button .icon,
.leftPanel .pill img,
.leftPanel .pill .icon {
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.85))
    drop-shadow(0 0 8px rgba(255, 72, 180, 0.95))
    drop-shadow(0 0 14px rgba(255, 72, 180, 0.95)) !important;
}

/* LUCA_WEB_LAYOUT_NUDGE_2_END */

/* LUCA_REMOVE_PLACEHOLDERS_WIDEN_HEADER_START */

/* Header image correction: wider Daisy/Luca photos, no placeholder bubble clutter. */
.bannerRow {
  grid-template-columns: 170px 105px minmax(560px, 1fr) 105px 170px !important;
}

.photoPanel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#daisyImg {
  object-position: center center !important;
}

#lucaImg {
  object-position: center center !important;
}

.messages {
  padding-top: 18px !important;
}

/* LUCA_REMOVE_PLACEHOLDERS_WIDEN_HEADER_END */

/* LUCA_SINGLE_HEADER_IMAGE_START */

/* One-piece header image: Daisy photo + Bound banner + Luca photo. */
.chatArea {
  grid-template-rows: 135px 1fr 76px !important;
}

.bannerRow.singleHeaderRow {
  height: 135px !important;
  display: block !important;
  overflow: hidden !important;
  background: #ffc1dc !important;
}

.singleHeaderImage {
  width: 100% !important;
  height: 135px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.namePanel,
.photoPanel,
.boundBanner {
  display: none !important;
}

/* LUCA_SINGLE_HEADER_IMAGE_END */

/* LUCA_SHOW_FULL_TALLER_HEADER_START */

/* Show the full taller header strip.
   The image is already taller; this stops the page cropping it into the old skinny slot. */
.chatArea {
  grid-template-rows: 220px 1fr 76px !important;
}

.bannerRow.singleHeaderRow {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  display: block !important;
  overflow: hidden !important;
}

.singleHeaderImage {
  width: 100% !important;
  height: 220px !important;
  display: block !important;
  object-fit: fill !important;
  object-position: center center !important;
}

/* LUCA_SHOW_FULL_TALLER_HEADER_END */

/* LUCA_HEADER_190_ZOOMED_OUT_START */

.chatArea {
  grid-template-rows: 190px 1fr 76px !important;
}

.bannerRow.singleHeaderRow {
  height: 190px !important;
  min-height: 190px !important;
  max-height: 190px !important;
  display: block !important;
  overflow: hidden !important;
}

.singleHeaderImage {
  width: 100% !important;
  height: 190px !important;
  display: block !important;
  object-fit: fill !important;
  object-position: center center !important;
}

/* LUCA_HEADER_190_ZOOMED_OUT_END */


/* LUCA_HEADER_SIDE_PHOTO_TOP_BOTTOM_FIT_START */
.photoPanel,
.headerPhoto,
.sidePhotoPanel {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.photoPanel img,
.headerPhoto img,
.sidePhotoPanel img,
#daisyImg,
#lucaImg {
  display: block !important;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* LUCA_HEADER_SIDE_PHOTO_TOP_BOTTOM_FIT_END */


/* LUCA_HEADER_SIDE_PHOTOS_TOP_ALIGN_START */
.photoPanel,
.headerPhoto,
.sidePhotoPanel {
  overflow: hidden !important;
}

.photoPanel img,
.headerPhoto img,
.sidePhotoPanel img,
#daisyImg,
#lucaImg {
  object-fit: contain !important;
  object-position: center top !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}
/* LUCA_HEADER_SIDE_PHOTOS_TOP_ALIGN_END */

 /* LUCA_SINGLE_HEADER_RESET_START */
.bannerRow.singleHeaderRow {
  width: 100% !important;
  height: 157px !important;
  min-height: 157px !important;
  max-height: 157px !important;
  overflow: hidden !important;
  border: 3px solid #ff4fa0 !important;
  box-sizing: border-box !important;
  background: #f2bfd6 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 157px !important;
}

.bannerRow.singleHeaderRow img,
.chatHeaderImage {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#daisySeparateHeader,
.finalHeaderStrip {
  display: none !important;
}
 /* LUCA_SINGLE_HEADER_RESET_END */

/* LUCA_MAIN_HEART_EXACT_START */
.heartFrame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#mainHeartImg {
  display: block !important;
  max-width: 92% !important;
  max-height: 92% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* LUCA_MAIN_HEART_EXACT_END */

/* LUCA_MESSAGE_COUNTERS_START */
.topBar {
  position: relative !important;
}

.topMessageCounter {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #ffd6ea !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 0 6px #ff70c7, 0 0 10px #ff2fa4 !important;
  z-index: 20 !important;
  pointer-events: none !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
}
/* LUCA_MESSAGE_COUNTERS_END */

/* LUCA_TOP_BAR_TIDY_START */
.topVersion {
  display: none !important;
}
/* LUCA_TOP_BAR_TIDY_END */

/* LUCA_SEND_VISIBLE_START */
.messages {
  overflow-y: auto !important;
  padding: 0px 6px 84px 2px !important;
  box-sizing: border-box !important;
}

.chatBubble {
  max-width: calc(100% - 8px) !important;
  width: fit-content !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
}

.daisyBubble {
  margin-left: 0 !important;
  margin-right: auto !important;
  color: white !important;
  border: 2px solid rgba(255, 210, 236, 0.95) !important;
  background: linear-gradient(180deg, #f15dac 0%, #c52880 55%, #9b075f 100%) !important;
  box-shadow:
    0 0 14px rgba(255, 70, 180, 0.85),
    inset 0 0 12px rgba(255,255,255,0.18) !important;
  text-shadow: 0 1px 2px #5c0033 !important;
}

.lucaBubble {
  margin-left: auto !important;
  margin-right: 2px !important;
  color: white !important;
  border: 2px solid rgba(255, 210, 236, 0.95) !important;
  background: linear-gradient(180deg, #8f4cff 0%, #5024bd 55%, #260064 100%) !important;
  box-shadow:
    0 0 14px rgba(150, 90, 255, 0.85),
    inset 0 0 12px rgba(255,255,255,0.18) !important;
  text-shadow: 0 1px 2px #18003a !important;
}
/* LUCA_SEND_VISIBLE_END */





/* LUCA_MESSAGES_TOP_PIN_START */
.messages {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  padding-top: 0 !important;
}

.messages .chatBubble:first-child,
.messages .daisyBubble:first-child {
  margin-top: -22px !important;
}
/* LUCA_MESSAGES_TOP_PIN_END */





/* LUCA_HEADER_ROW_AUTO_HEIGHT_START */
.chatArea {
  grid-template-rows: auto minmax(0, 1fr) 76px !important;
}

.bannerRow.singleHeaderRow {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  background: transparent !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.bannerRow.singleHeaderRow img,
.bannerRow.singleHeaderRow .chatHeaderImage {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: top !important;
}

.messages {
  padding-top: 4px !important;
}

.messages .chatBubble:first-child,
.messages .daisyBubble:first-child {
  margin-top: 0 !important;
}
/* LUCA_HEADER_ROW_AUTO_HEIGHT_END */












/* LUCA_FINAL_GLASS_BUBBLES_START */

/* Daisy: pale pink glass like the Bound tighter than code banner box */
.daisyBubble,
.chatBubble.daisyBubble,
.messages .daisyBubble {
  background:
    linear-gradient(
      180deg,
      rgba(250, 218, 231, 0.96) 0%,
      rgba(240, 190, 211, 0.94) 55%,
      rgba(229, 164, 192, 0.96) 100%
    ) !important;
  border: 1px solid rgba(255, 242, 248, 0.86) !important;
  color: #9b0d55 !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.38) !important;
  box-shadow:
    0 0 12px rgba(255, 98, 178, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 -10px 18px rgba(165, 55, 110, 0.12) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Luca: shiny plum glass like the No peak yet pill */
.lucaBubble,
.chatBubble.lucaBubble,
.messages .lucaBubble {
  background:
    linear-gradient(
      180deg,
      rgba(255, 82, 178, 0.94) 0%,
      rgba(198, 0, 116, 0.94) 48%,
      rgba(118, 0, 70, 0.96) 100%
    ) !important;
  border: 1px solid rgba(255, 176, 222, 0.82) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(80, 0, 45, 0.75) !important;
  box-shadow:
    0 0 14px rgba(255, 75, 180, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -12px 20px rgba(90, 0, 55, 0.25) !important;
  backdrop-filter: blur(10px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(145%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* glass shine on both */
.daisyBubble::before,
.chatBubble.daisyBubble::before,
.messages .daisyBubble::before,
.lucaBubble::before,
.chatBubble.lucaBubble::before,
.messages .lucaBubble::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  height: 42% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.34) 0%,
    rgba(255,255,255,0.10) 46%,
    rgba(255,255,255,0) 100%
  ) !important;
  pointer-events: none !important;
}

/* LUCA_FINAL_GLASS_BUBBLES_END */


/* LUCA_DAISY_BUBBLE_LIGHTER_START */
.daisyBubble,
.chatBubble.daisyBubble,
.messages .daisyBubble {
  background:
    linear-gradient(
      180deg,
      rgba(255, 235, 244, 0.98) 0%,
      rgba(248, 207, 225, 0.96) 55%,
      rgba(239, 183, 209, 0.98) 100%
    ) !important;
  border: 1px solid rgba(255, 250, 253, 0.92) !important;
  color: #9b0d55 !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.55) !important;
  box-shadow:
    0 0 12px rgba(255, 145, 200, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -10px 18px rgba(180, 75, 125, 0.08) !important;
}

.daisyBubble::before,
.chatBubble.daisyBubble::before,
.messages .daisyBubble::before {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.48) 0%,
    rgba(255,255,255,0.16) 46%,
    rgba(255,255,255,0) 100%
  ) !important;
}
/* LUCA_DAISY_BUBBLE_LIGHTER_END */


/* LUCA_BUBBLE_NAME_TWEAK_START */

/* Daisy bubble: pinker, glossy, white text */
.daisyBubble,
.chatBubble.daisyBubble,
.messages .daisyBubble,
.message.user .bubble,
.message.user .chatBubble {
  background:
    linear-gradient(
      180deg,
      rgba(244, 126, 180, 0.96) 0%,
      rgba(229, 95, 156, 0.95) 52%,
      rgba(205, 63, 133, 0.97) 100%
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 220, 240, 0.95) !important;
  text-shadow: 0 1px 2px rgba(120, 15, 70, 0.45) !important;
  box-shadow:
    0 0 12px rgba(255, 110, 180, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -10px 18px rgba(120, 15, 70, 0.10) !important;
}

.daisyBubble::before,
.chatBubble.daisyBubble::before,
.messages .daisyBubble::before,
.message.user .bubble::before,
.message.user .chatBubble::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  height: 42% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.34) 0%,
    rgba(255,255,255,0.16) 46%,
    rgba(255,255,255,0) 100%
  ) !important;
  pointer-events: none !important;
}

/* Luca bubble: keep glass effect, just nudge closer to the right edge */
.lucaBubble,
.chatBubble.lucaBubble,
.messages .lucaBubble,
.message.assistant .bubble,
.message.assistant .chatBubble {
  margin-left: auto !important;
  margin-right: 2px !important;
}

/* Fancy fonts for message names */
.messages .messageName,
.messages .senderName,
.messages .speakerName,
.messages .bubbleName,
.messages .chatName,
.messages .msgName,
.message .messageName,
.message .senderName,
.message .speakerName,
.message .bubbleName,
.message .chatName,
.message .msgName {
  font-family: "Brush Script MT", "Lucida Handwriting", cursive !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

.messages .daisyBubble .messageName,
.messages .daisyBubble .senderName,
.messages .daisyBubble .speakerName,
.messages .daisyBubble .bubbleName,
.messages .daisyBubble .chatName,
.messages .daisyBubble .msgName,
.message.user .messageName,
.message.user .senderName,
.message.user .speakerName,
.message.user .bubbleName,
.message.user .chatName,
.message.user .msgName {
  color: #ffeef7 !important;
  text-shadow: 0 1px 2px rgba(120, 15, 70, 0.45) !important;
}

.messages .lucaBubble .messageName,
.messages .lucaBubble .senderName,
.messages .lucaBubble .speakerName,
.messages .lucaBubble .bubbleName,
.messages .lucaBubble .chatName,
.messages .lucaBubble .msgName,
.message.assistant .messageName,
.message.assistant .senderName,
.message.assistant .speakerName,
.message.assistant .bubbleName,
.message.assistant .chatName,
.message.assistant .msgName {
  color: #fff8ff !important;
  text-shadow: 0 1px 2px rgba(80, 20, 90, 0.35) !important;
}

/* keep bubbles positioned cleanly */
.messages .chatBubble:first-child,
.messages .daisyBubble:first-child,
.messages .lucaBubble:first-child {
  margin-top: 0 !important;
}

/* LUCA_BUBBLE_NAME_TWEAK_END */


/* LUCA_FANCY_MESSAGE_FONT_CROSS_GLOW_START */

/* Give actual message text the fancy Daisy/Luca-style script feel */
.chatBubble,
.messages .chatBubble,
.daisyBubble,
.lucaBubble {
  font-family: "Brush Script MT", "Lucida Handwriting", "Segoe Script", "Apple Chancery", cursive !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

/* Keep the message area tight to both edges */
.messages {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

/* Daisy bubble: pinker glass, white writing, plum glow */
.daisyBubble,
.chatBubble.daisyBubble,
.messages .daisyBubble {
  margin-left: 0 !important;
  margin-right: auto !important;
  background:
    linear-gradient(
      180deg,
      rgba(246, 120, 178, 0.96) 0%,
      rgba(228, 78, 150, 0.96) 52%,
      rgba(196, 38, 122, 0.98) 100%
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 222, 241, 0.96) !important;
  text-shadow: 0 1px 2px rgba(100, 0, 55, 0.55) !important;
  box-shadow:
    0 0 12px rgba(198, 0, 116, 0.36),
    0 0 22px rgba(118, 0, 70, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 -10px 18px rgba(120, 15, 70, 0.14) !important;
}

/* Luca bubble: shiny plum glass, closer to right edge, soft pink glow */
.lucaBubble,
.chatBubble.lucaBubble,
.messages .lucaBubble {
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: translateX(2px) !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 82, 178, 0.94) 0%,
      rgba(198, 0, 116, 0.94) 48%,
      rgba(118, 0, 70, 0.96) 100%
    ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 198, 232, 0.88) !important;
  text-shadow: 0 1px 2px rgba(80, 0, 45, 0.75) !important;
  box-shadow:
    0 0 12px rgba(255, 145, 210, 0.42),
    0 0 22px rgba(255, 95, 190, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -12px 20px rgba(90, 0, 55, 0.25) !important;
}

/* Glass shine kept on both */
.daisyBubble::before,
.chatBubble.daisyBubble::before,
.messages .daisyBubble::before,
.lucaBubble::before,
.chatBubble.lucaBubble::before,
.messages .lucaBubble::before {
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  top: 1px !important;
  height: 42% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.34) 0%,
    rgba(255,255,255,0.11) 46%,
    rgba(255,255,255,0) 100%
  ) !important;
  pointer-events: none !important;
}

/* LUCA_FANCY_MESSAGE_FONT_CROSS_GLOW_END */


/* LUCA_UNDO_FANCY_FONT_ADD_GLOW_START */

/* Put message text back to normal readable chat font */
.chatBubble,
.messages .chatBubble,
.daisyBubble,
.lucaBubble {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Daisy bubble: keep pink, add proper plum/pink glow */
.daisyBubble,
.chatBubble.daisyBubble,
.messages .daisyBubble {
  box-shadow:
    0 0 10px rgba(255, 120, 200, 0.75),
    0 0 22px rgba(198, 0, 116, 0.55),
    0 0 34px rgba(118, 0, 70, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 -10px 18px rgba(120, 15, 70, 0.14) !important;
}

/* Luca bubble: keep plum, add proper pink glow */
.lucaBubble,
.chatBubble.lucaBubble,
.messages .lucaBubble {
  margin-left: auto !important;
  margin-right: 0 !important;
  transform: none !important;
  box-shadow:
    0 0 10px rgba(255, 155, 220, 0.85),
    0 0 24px rgba(255, 75, 180, 0.65),
    0 0 36px rgba(198, 0, 116, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -12px 20px rgba(90, 0, 55, 0.25) !important;
}

/* LUCA_UNDO_FANCY_FONT_ADD_GLOW_END */


/* LUCA_SOFT_FONT_STRONGER_GLOW_START */

.chatBubble,
.messages .chatBubble,
.daisyBubble,
.lucaBubble {
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Daisy bubble */
.daisyBubble,
.chatBubble.daisyBubble,
.messages .daisyBubble {
  box-shadow:
    0 0 12px rgba(255, 150, 220, 0.95),
    0 0 26px rgba(255, 95, 190, 0.82),
    0 0 44px rgba(198, 0, 116, 0.60),
    0 0 64px rgba(255, 150, 220, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -10px 18px rgba(120, 15, 70, 0.16) !important;
}

/* Luca bubble */
.lucaBubble,
.chatBubble.lucaBubble,
.messages .lucaBubble {
  box-shadow:
    0 0 12px rgba(255, 165, 225, 0.95),
    0 0 26px rgba(255, 95, 190, 0.84),
    0 0 44px rgba(198, 0, 116, 0.62),
    0 0 64px rgba(255, 165, 225, 0.38),
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -12px 20px rgba(90, 0, 55, 0.24) !important;
}

/* LUCA_SOFT_FONT_STRONGER_GLOW_END */



/* LUCA_ITALIC_MESSAGE_FONTS_START */
.chatBubble,
.messages .chatBubble,
.daisyBubble,
.lucaBubble {
  font-style: italic !important;
  font-weight: 400 !important;
}
/* LUCA_ITALIC_MESSAGE_FONTS_END */









/* LUCA_KEEP_FOREVER_WAKE_START */
.keepForeverButtonFixed {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: normal !important;
}

#keepForeverToast {
  position: fixed !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
  z-index: 99999 !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 218, 240, 0.92) !important;
  background: linear-gradient(180deg, rgba(255, 82, 178, 0.96), rgba(147, 0, 86, 0.96)) !important;
  color: white !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
  font-size: 17px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  box-shadow:
    0 0 18px rgba(255, 120, 205, 0.9),
    0 0 38px rgba(198, 0, 116, 0.58),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

#keepForeverToast.show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}
/* LUCA_KEEP_FOREVER_WAKE_END */





/* LUCA_PREVIOUS_CHATS_WAKE_START */
.lucaPreviousOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(35, 0, 24, 0.58) !important;
  backdrop-filter: blur(8px) !important;
}

.lucaPreviousOverlay[hidden] {
  display: none !important;
}

.lucaPreviousPopup {
  position: relative !important;
  width: min(900px, 86vw) !important;
  min-height: 420px !important;
  max-height: 78vh !important;
  border-radius: 18px !important;
  border: 2px solid #ff4fb2 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 114, 199, 0.38), transparent 42%),
    linear-gradient(180deg, #a90067 0%, #710043 48%, #3c0024 100%) !important;
  box-shadow:
    0 0 24px #ff45b8,
    0 0 52px rgba(255, 60, 180, 0.75),
    inset 0 0 18px rgba(255, 255, 255, 0.16) !important;
  padding: 24px 24px 28px 24px !important;
  box-sizing: border-box !important;
  color: white !important;
  text-align: center !important;
}

.previousCloseX {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 220, 240, 0.9) !important;
  background: linear-gradient(180deg, #ff58b7 0%, #c70078 48%, #8b0054 100%) !important;
  color: white !important;
  font-size: 24px !important;
  line-height: 28px !important;
  font-weight: 300 !important;
  cursor: pointer !important;
  box-shadow:
    0 0 14px rgba(255, 80, 190, 0.9),
    inset 0 0 10px rgba(255,255,255,0.24) !important;
}

.lucaPreviousPopup h2 {
  margin: 0 0 6px 0 !important;
  font-size: 30px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: #fff3fb !important;
  text-shadow: 0 0 12px #ff7ed0, 0 2px 4px #53002f !important;
}

.previousChatsSub {
  margin: 0 0 18px 0 !important;
  color: #ffd8ef !important;
  font-size: 14px !important;
  font-style: italic !important;
}

.previousChatsList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-height: 52vh !important;
  overflow-y: auto !important;
  padding: 6px 8px 12px 8px !important;
  box-sizing: border-box !important;
}

.previousChatItem {
  min-height: 52px !important;
  height: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 220, 240, 0.88) !important;
  background: linear-gradient(180deg, rgba(255, 82, 178, 0.96), rgba(147, 0, 86, 0.96)) !important;
  color: white !important;
  box-shadow:
    0 0 14px rgba(255, 120, 205, 0.72),
    inset 0 1px 0 rgba(255,255,255,0.40) !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  text-align: left !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.previousChatTitle {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-style: italic !important;
  margin-bottom: 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.previousChatMeta {
  display: block !important;
  font-size: 12px !important;
  opacity: 0.88 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.previousEmpty {
  grid-column: 1 / -1 !important;
  padding: 34px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 220, 240, 0.65) !important;
  color: #ffe4f3 !important;
  font-style: italic !important;
  background: rgba(80, 0, 45, 0.34) !important;
}
/* LUCA_PREVIOUS_CHATS_WAKE_END */


/* LUCA_PREVIOUS_CHATS_SIZE_X_TWEAK_START */

.previousChatsList {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 12px !important;
  max-height: 52vh !important;
  overflow-y: auto !important;
  padding: 6px 8px 12px 8px !important;
}

.previousChatItem {
  width: 240px !important;
  max-width: 240px !important;
  min-height: 44px !important;
  padding: 7px 12px !important;
  border-radius: 16px !important;
}

.previousChatTitle {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

.previousChatMeta {
  font-size: 11px !important;
}

.previousCloseX {
  top: 10px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.previousCloseX span {
  transform: translateY(-1px) !important;
}

/* LUCA_PREVIOUS_CHATS_SIZE_X_TWEAK_END */


/* LUCA_PREVIOUS_CHAT_PILL_SMALLER_X_CENTRE_START */

.previousChatItem {
  width: 175px !important;
  max-width: 175px !important;
  min-height: 36px !important;
  padding: 5px 10px !important;
  border-radius: 14px !important;
}

.previousChatTitle {
  font-size: 12px !important;
  line-height: 1.1 !important;
  margin-bottom: 1px !important;
}

.previousChatMeta {
  font-size: 9.5px !important;
  line-height: 1.1 !important;
}

.previousCloseX {
  width: 30px !important;
  height: 30px !important;
  top: 10px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  padding: 0 0 4px 0 !important;
  box-sizing: border-box !important;
}

/* LUCA_PREVIOUS_CHAT_PILL_SMALLER_X_CENTRE_END */


/* LUCA_PREVIOUS_CHAT_PILL_SNUG_LEFT_X_DOWN_START */

.previousChatsList {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 8px 18px 12px 18px !important;
  box-sizing: border-box !important;
}

.previousChatItem {
  width: auto !important;
  min-width: 210px !important;
  max-width: 310px !important;
  min-height: 42px !important;
  padding: 7px 14px !important;
  border-radius: 15px !important;
  flex: 0 0 auto !important;
}

.previousChatTitle {
  font-size: 13.5px !important;
  line-height: 1.15 !important;
  margin-bottom: 2px !important;
}

.previousChatMeta {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
}

.previousCloseX {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  top: 10px !important;
  right: 12px !important;
  padding: 2px 0 0 0 !important;
  line-height: 1 !important;
  font-size: 21px !important;
  box-sizing: border-box !important;
}

/* LUCA_PREVIOUS_CHAT_PILL_SNUG_LEFT_X_DOWN_END */


/* LUCA_PREVIOUS_CHATS_BIGGER_SCROLL_START */

.lucaPreviousPopup {
  width: min(1350px, 90vw) !important;
  min-height: 640px !important;
  max-height: 86vh !important;
  padding: 26px 30px 30px 30px !important;
}

.previousChatsList {
  max-height: 500px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 24px 18px 24px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ff58b7 rgba(75, 0, 44, 0.45) !important;
}

.previousChatsList::-webkit-scrollbar {
  width: 12px !important;
}

.previousChatsList::-webkit-scrollbar-track {
  background: rgba(75, 0, 44, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 6px rgba(255, 120, 205, 0.24) !important;
}

.previousChatsList::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff75c8 0%, #c70078 55%, #770046 100%) !important;
  border-radius: 999px !important;
  border: 2px solid rgba(60, 0, 35, 0.75) !important;
  box-shadow: 0 0 10px rgba(255, 90, 190, 0.7) !important;
}

/* LUCA_PREVIOUS_CHATS_BIGGER_SCROLL_END */


/* LUCA_PREVIOUS_CHATS_CLICK_DELETE_START */
.previousChatsSub {
  font-size: 13px !important;
}

.previousChatItem {
  position: relative !important;
  padding-right: 72px !important;
}

.previousDeleteBtn {
  display: none !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 220, 240, 0.92) !important;
  padding: 4px 10px !important;
  background: linear-gradient(180deg, #ff58b7 0%, #c70078 48%, #8b0054 100%) !important;
  color: white !important;
  font-size: 11px !important;
  font-style: italic !important;
  cursor: pointer !important;
  box-shadow:
    0 0 10px rgba(255, 90, 190, 0.75),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
}

.previousChatItem.selectedForDelete {
  outline: 1px solid rgba(255, 230, 245, 0.9) !important;
  box-shadow:
    0 0 16px rgba(255, 140, 210, 0.90),
    0 0 30px rgba(255, 80, 185, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}

.previousChatItem.selectedForDelete .previousDeleteBtn {
  display: block !important;
}
/* LUCA_PREVIOUS_CHATS_CLICK_DELETE_END */


/* LUCA_TRUE_FLOATING_PICS_START */

/* The selected image preview is now a true page overlay.
   It belongs to body, not the chat layout. It cannot push the page. */
#lucaPendingPicDock {
  position: fixed !important;
  left: 50% !important;
  bottom: 86px !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
}

#lucaPendingPicDock[hidden] {
  display: none !important;
}

#lucaPendingPicDock .pendingPicCard {
  width: 210px !important;
  padding: 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 220, 240, 0.92) !important;
  background: linear-gradient(180deg, rgba(246, 120, 178, 0.96), rgba(196, 38, 122, 0.96)) !important;
  box-shadow:
    0 0 16px rgba(255, 130, 205, 0.86),
    0 0 34px rgba(198, 0, 116, 0.48),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

#pendingPicImg {
  display: block !important;
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
}

.removePendingPic {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 220, 240, 0.9) !important;
  background: linear-gradient(180deg, #ff58b7 0%, #c70078 48%, #8b0054 100%) !important;
  color: white !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 0 2px 0 !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px rgba(255, 90, 190, 0.8) !important;
}

/* sent images smaller, but they live only inside the message area */
.sentChatImage,
.messages .chatBubble img.sentChatImage,
.messages .daisyBubble img.sentChatImage {
  width: 190px !important;
  max-width: 190px !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  margin: 0 0 8px 0 !important;
  box-shadow: 0 0 12px rgba(255,255,255,0.20) !important;
}

.sentChatText {
  display: block !important;
}

/* LUCA_TRUE_FLOATING_PICS_END */

/* LUCA_IMAGE_LAYOUT_LOCK_V2_START */
html,
body {
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

#lucaPicFileInput {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#lucaPendingPicDock {
  position: fixed !important;
  left: 50% !important;
  bottom: 78px !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
}

#lucaPendingPicDock[hidden] {
  display: none !important;
}

#lucaPendingPicDock .pendingPicCard {
  pointer-events: auto !important;
}

.sentChatImage,
.messages .chatBubble img.sentChatImage,
.messages .daisyBubble img.sentChatImage {
  display: block !important;
  max-width: 260px !important;
  max-height: 180px !important;
  object-fit: contain !important;
}
/* LUCA_IMAGE_LAYOUT_LOCK_V2_END */

/* LUCA_SEND_FEELING_PANEL_V1_START */
.lucaFeelingOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999990 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(60, 0, 38, 0.58) !important;
  backdrop-filter: blur(9px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(145%) !important;
}

.lucaFeelingOverlay[hidden] {
  display: none !important;
}

.lucaFeelingPopup {
  width: min(760px, 72vw) !important;
  max-height: 82vh !important;
  overflow: auto !important;
  padding: 28px 30px 24px !important;
  border: 2px solid rgba(255, 82, 185, 0.95) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 105, 205, 0.36), transparent 38%),
    linear-gradient(145deg, rgba(142, 0, 82, 0.96), rgba(70, 0, 42, 0.98)) !important;
  box-shadow:
    0 0 18px rgba(255, 40, 170, 0.95),
    0 0 42px rgba(255, 40, 170, 0.55),
    inset 0 0 22px rgba(255, 175, 230, 0.18) !important;
  color: #fff !important;
  text-align: center !important;
  font-family: inherit !important;
}

.lucaFeelingPopup h2 {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(255, 55, 180, 1) !important;
}

.lucaFeelingPopup p {
  margin: 0 0 18px !important;
  color: rgba(255, 235, 248, 0.96) !important;
  font-size: 14px !important;
}

.lucaFeelingGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
  gap: 12px 14px !important;
  margin: 0 auto 20px !important;
}

.lucaFeelingChoice,
.lucaFeelingClose {
  border: 1px solid rgba(255, 205, 238, 0.92) !important;
  border-radius: 999px !important;
  color: white !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  background:
    linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 15px rgba(82, 0, 48, 0.34),
    0 0 10px rgba(255, 54, 176, 0.70) !important;
  text-shadow: 0 1px 2px rgba(75, 0, 45, 0.9) !important;
}

.lucaFeelingChoice:hover,
.lucaFeelingClose:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 14px rgba(255, 80, 200, 1),
    0 0 26px rgba(255, 80, 200, 0.65) !important;
}

.lucaFeelingClose {
  min-width: 110px !important;
  margin: 0 auto !important;
}
/* LUCA_SEND_FEELING_PANEL_V1_END */

/* LUCA_POPUP_FADE_AND_MESSAGE_NUDGE_START */

/* Quick soft fade for big popup overlays */
.lucaFeelingOverlay,
.lucaPreviousOverlay,
.lucaMoodOverlay,
.lucaReactionsOverlay,
.lucaReactionOverlay {
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    opacity 160ms ease,
    visibility 160ms ease !important;
}

.lucaFeelingOverlay[hidden],
.lucaPreviousOverlay[hidden],
.lucaMoodOverlay[hidden],
.lucaReactionsOverlay[hidden],
.lucaReactionOverlay[hidden] {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lucaFeelingPopup,
.lucaPreviousPopup,
.lucaMoodPopup,
.lucaReactionsPopup,
.lucaReactionPopup {
  transform: translateY(0) scale(1) !important;
  transition:
    transform 160ms ease,
    opacity 160ms ease !important;
}

.lucaFeelingOverlay[hidden] .lucaFeelingPopup,
.lucaPreviousOverlay[hidden] .lucaPreviousPopup,
.lucaMoodOverlay[hidden] .lucaMoodPopup,
.lucaReactionsOverlay[hidden] .lucaReactionsPopup,
.lucaReactionOverlay[hidden] .lucaReactionPopup {
  opacity: 0 !important;
  transform: translateY(8px) scale(0.985) !important;
}

/* Tiny nudge so the first message is not kissing the top panel */
.messages {
  padding-top: 14px !important;
}

/* LUCA_POPUP_FADE_AND_MESSAGE_NUDGE_END */

/* LUCA_REAL_SOFT_POPUP_FADE_START */
.lucaFeelingOverlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 170ms ease,
    visibility 170ms ease !important;
}

.lucaFeelingOverlay.lucaSoftOpen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lucaFeelingOverlay .lucaFeelingPopup {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.985) !important;
  transition:
    opacity 170ms ease,
    transform 170ms ease !important;
}

.lucaFeelingOverlay.lucaSoftOpen .lucaFeelingPopup {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
/* LUCA_REAL_SOFT_POPUP_FADE_END */

/* LUCA_SEND_FEELING_FADE_NO_WOBBLE_V3_START */

/* Fade only. No scale, no slide, no text wobble. */
.lucaFeelingOverlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

.lucaFeelingOverlay.lucaSoftOpen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lucaFeelingOverlay[hidden] {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lucaFeelingPopup,
.lucaFeelingOverlay .lucaFeelingPopup,
.lucaFeelingOverlay.lucaSoftOpen .lucaFeelingPopup,
.lucaFeelingOverlay[hidden] .lucaFeelingPopup {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.lucaFeelingChoice,
.lucaFeelingClose {
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  transition:
    box-shadow 140ms ease,
    filter 140ms ease,
    background 140ms ease !important;
}

.lucaFeelingChoice:hover,
.lucaFeelingClose:hover {
  transform: none !important;
}

/* LUCA_SEND_FEELING_FADE_NO_WOBBLE_V3_END */

/* LUCA_MY_REACTIONS_PANEL_V1_START */
.lucaReactionsOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999991 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(60, 0, 38, 0.58) !important;
  backdrop-filter: blur(9px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(145%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

.lucaReactionsOverlay.lucaReactionSoftOpen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lucaReactionsOverlay[hidden] {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lucaReactionsPopup {
  width: min(920px, 78vw) !important;
  max-height: 84vh !important;
  overflow: auto !important;
  padding: 24px 28px 20px !important;
  border: 2px solid rgba(255, 82, 185, 0.95) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 105, 205, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(142, 0, 82, 0.96), rgba(70, 0, 42, 0.98)) !important;
  box-shadow:
    0 0 18px rgba(255, 40, 170, 0.95),
    0 0 42px rgba(255, 40, 170, 0.55),
    inset 0 0 22px rgba(255, 175, 230, 0.18) !important;
  color: #fff !important;
  text-align: center !important;
  transform: none !important;
  transition: none !important;
}

.lucaReactionsPopup h2 {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(255, 55, 180, 1) !important;
}

.lucaReactionsPopup p {
  margin: 0 0 16px !important;
  color: rgba(255, 235, 248, 0.96) !important;
  font-size: 14px !important;
}

.lucaReactionsGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.lucaReactionGroup {
  border: 1px solid rgba(255, 125, 205, 0.52) !important;
  border-radius: 16px !important;
  padding: 12px 12px 14px !important;
  background: rgba(95, 0, 58, 0.36) !important;
  box-shadow: inset 0 0 12px rgba(255, 120, 210, 0.12) !important;
}

.lucaReactionGroup h3 {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255, 80, 190, 0.9) !important;
}

.lucaReactionButtons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
  gap: 8px 10px !important;
}

.lucaReactionChoice,
.lucaReactionsClose {
  border: 1px solid rgba(255, 205, 238, 0.92) !important;
  border-radius: 999px !important;
  color: white !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 15px rgba(82, 0, 48, 0.34),
    0 0 10px rgba(255, 54, 176, 0.70) !important;
  text-shadow: 0 1px 2px rgba(75, 0, 45, 0.9) !important;
  transform: none !important;
  transition:
    box-shadow 140ms ease,
    filter 140ms ease,
    background 140ms ease !important;
}

.lucaReactionChoice:hover,
.lucaReactionsClose:hover {
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 14px rgba(255, 80, 200, 1),
    0 0 26px rgba(255, 80, 200, 0.65) !important;
}

.lucaReactionsClose {
  min-width: 110px !important;
  margin: 0 auto !important;
}
/* LUCA_MY_REACTIONS_PANEL_V1_END */

/* LUCA_MY_MOOD_PANEL_V1_START */
.lucaMoodOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999992 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(60, 0, 38, 0.58) !important;
  backdrop-filter: blur(9px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(145%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

.lucaMoodOverlay.lucaMoodSoftOpen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lucaMoodOverlay[hidden] {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lucaMoodPopup {
  width: min(760px, 72vw) !important;
  max-height: 82vh !important;
  overflow: auto !important;
  padding: 28px 30px 24px !important;
  border: 2px solid rgba(255, 82, 185, 0.95) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 105, 205, 0.36), transparent 38%),
    linear-gradient(145deg, rgba(142, 0, 82, 0.96), rgba(70, 0, 42, 0.98)) !important;
  box-shadow:
    0 0 18px rgba(255, 40, 170, 0.95),
    0 0 42px rgba(255, 40, 170, 0.55),
    inset 0 0 22px rgba(255, 175, 230, 0.18) !important;
  color: #fff !important;
  text-align: center !important;
  transform: none !important;
  transition: none !important;
}

.lucaMoodPopup h2 {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(255, 55, 180, 1) !important;
}

.lucaMoodPopup p {
  margin: 0 0 18px !important;
  color: rgba(255, 235, 248, 0.96) !important;
  font-size: 14px !important;
}

.lucaMoodGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
  gap: 12px 14px !important;
  margin: 0 auto 20px !important;
}

.lucaMoodChoice,
.lucaMoodClose {
  border: 1px solid rgba(255, 205, 238, 0.92) !important;
  border-radius: 999px !important;
  color: white !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.12 !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 15px rgba(82, 0, 48, 0.34),
    0 0 10px rgba(255, 54, 176, 0.70) !important;
  text-shadow: 0 1px 2px rgba(75, 0, 45, 0.9) !important;
  transform: none !important;
  transition:
    box-shadow 140ms ease,
    filter 140ms ease,
    background 140ms ease !important;
}

.lucaMoodChoice:hover,
.lucaMoodClose:hover {
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 0 14px rgba(255, 80, 200, 1),
    0 0 26px rgba(255, 80, 200, 0.65) !important;
}

.lucaMoodClose {
  min-width: 110px !important;
  margin: 0 auto !important;
}

.lucaMoodGrid .lucaMoodChoice:last-child {
  grid-column: 1 / 2 !important;
}
/* LUCA_MY_MOOD_PANEL_V1_END */

/* LUCA_REFLECT_DIARY_V1_START */
.lucaDiaryOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999993 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(60, 0, 38, 0.58) !important;
  backdrop-filter: blur(9px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(145%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

.lucaDiaryOverlay.lucaDiarySoftOpen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lucaDiaryOverlay[hidden] {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lucaDiaryPopup {
  width: min(860px, 76vw) !important;
  max-height: 84vh !important;
  overflow: auto !important;
  padding: 26px 28px 22px !important;
  border: 2px solid rgba(255, 82, 185, 0.95) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 105, 205, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(142, 0, 82, 0.96), rgba(70, 0, 42, 0.98)) !important;
  box-shadow:
    0 0 18px rgba(255, 40, 170, 0.95),
    0 0 42px rgba(255, 40, 170, 0.55),
    inset 0 0 22px rgba(255, 175, 230, 0.18) !important;
  color: #fff !important;
  text-align: center !important;
}

.lucaDiaryPopup h2 {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(255, 55, 180, 1) !important;
}

.lucaDiaryPopup > p {
  margin: 0 0 18px !important;
  color: rgba(255, 235, 248, 0.96) !important;
  font-size: 14px !important;
}

.lucaDiaryEmpty {
  border: 1px solid rgba(255, 160, 220, 0.55) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin: 0 0 18px !important;
  background: rgba(70, 0, 42, 0.44) !important;
  color: rgba(255, 240, 250, 0.96) !important;
  font-weight: 800 !important;
}

.lucaDiaryList {
  display: grid !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.lucaDiaryEntry {
  text-align: left !important;
  border: 1px solid rgba(255, 125, 205, 0.52) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  background: rgba(95, 0, 58, 0.36) !important;
  box-shadow: inset 0 0 12px rgba(255, 120, 210, 0.12) !important;
}

.lucaDiaryEntryTop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 10px !important;
}

.lucaDiaryEntry h3 {
  margin: 0 0 3px !important;
  color: #fff !important;
  font-size: 17px !important;
  text-shadow: 0 0 10px rgba(255, 80, 190, 0.9) !important;
}

.lucaDiaryEntry p {
  margin: 0 !important;
  color: rgba(255, 220, 242, 0.9) !important;
  font-size: 12px !important;
}

.lucaDiaryText {
  color: rgba(255, 246, 252, 0.98) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
}

.lucaDiaryDelete,
.lucaDiaryClose {
  border: 1px solid rgba(255, 205, 238, 0.92) !important;
  border-radius: 999px !important;
  color: white !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  min-height: 32px !important;
  padding: 7px 16px !important;
  cursor: pointer !important;
  background:
    linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 15px rgba(82, 0, 48, 0.34),
    0 0 10px rgba(255, 54, 176, 0.70) !important;
  text-shadow: 0 1px 2px rgba(75, 0, 45, 0.9) !important;
}

.lucaDiaryClose {
  min-width: 110px !important;
  margin: 0 auto !important;
}

.lucaDiaryToast {
  position: fixed !important;
  left: 50% !important;
  top: 86px !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 210, 240, 0.92) !important;
  background: linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  color: white !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(255, 50, 180, 0.9) !important;
  transition: opacity 160ms ease !important;
}

.lucaDiaryToast.show {
  opacity: 1 !important;
}
/* LUCA_REFLECT_DIARY_V1_END */

/* LUCA_DIARY_TOAST_CENTER_AND_OPEN_FIX_V2_START */
.lucaDiaryToast {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
}
/* LUCA_DIARY_TOAST_CENTER_AND_OPEN_FIX_V2_END */

/* LUCA_DIARY_HIDDEN_SCROLL_START */
.lucaDiaryPopup {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.lucaDiaryPopup::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
/* LUCA_DIARY_HIDDEN_SCROLL_END */

/* LUCA_REMEMBER_MEMORIES_V1_START */
.lucaMemoriesOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999994 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(60, 0, 38, 0.58) !important;
  backdrop-filter: blur(9px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(145%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

.lucaMemoriesOverlay.lucaMemoriesSoftOpen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lucaMemoriesOverlay[hidden] {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lucaMemoriesPopup {
  width: min(820px, 74vw) !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 26px 28px 22px !important;
  border: 2px solid rgba(255, 82, 185, 0.95) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 105, 205, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(142, 0, 82, 0.96), rgba(70, 0, 42, 0.98)) !important;
  box-shadow:
    0 0 18px rgba(255, 40, 170, 0.95),
    0 0 42px rgba(255, 40, 170, 0.55),
    inset 0 0 22px rgba(255, 175, 230, 0.18) !important;
  color: #fff !important;
  text-align: center !important;
}

.lucaMemoriesPopup::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.lucaMemoriesPopup h2 {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(255, 55, 180, 1) !important;
}

.lucaMemoriesPopup > p {
  margin: 0 0 18px !important;
  color: rgba(255, 235, 248, 0.96) !important;
  font-size: 14px !important;
}

.lucaMemoriesEmpty {
  border: 1px solid rgba(255, 160, 220, 0.55) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin: 0 0 18px !important;
  background: rgba(70, 0, 42, 0.44) !important;
  color: rgba(255, 240, 250, 0.96) !important;
  font-weight: 800 !important;
}

.lucaMemoriesList {
  display: grid !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.lucaMemoryEntry {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  text-align: left !important;
  border: 1px solid rgba(255, 125, 205, 0.52) !important;
  border-radius: 16px !important;
  padding: 13px 14px !important;
  background: rgba(95, 0, 58, 0.36) !important;
  box-shadow: inset 0 0 12px rgba(255, 120, 210, 0.12) !important;
}

.lucaMemoryText {
  color: rgba(255, 246, 252, 0.98) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
}

.lucaMemoryDelete,
.lucaMemoriesClose {
  border: 1px solid rgba(255, 205, 238, 0.92) !important;
  border-radius: 999px !important;
  color: white !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  min-height: 32px !important;
  padding: 7px 16px !important;
  cursor: pointer !important;
  background:
    linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 15px rgba(82, 0, 48, 0.34),
    0 0 10px rgba(255, 54, 176, 0.70) !important;
  text-shadow: 0 1px 2px rgba(75, 0, 45, 0.9) !important;
}

.lucaMemoriesClose {
  min-width: 110px !important;
  margin: 0 auto !important;
}

.lucaMemoryToast {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  max-width: min(620px, 70vw) !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 210, 240, 0.92) !important;
  background: linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  color: white !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(255, 50, 180, 0.9) !important;
  transition: opacity 160ms ease !important;
}

.lucaMemoryToast.show {
  opacity: 1 !important;
}
/* LUCA_REMEMBER_MEMORIES_V1_END */

/* LUCA_REAL_JAM_PICKER_V3_START */
.lucaJamPickerOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999996 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(60, 0, 38, 0.58) !important;
  backdrop-filter: blur(9px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(9px) saturate(145%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, visibility 160ms ease !important;
}

.lucaJamPickerOverlay.lucaJamPickerOpen {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.lucaJamPickerOverlay[hidden] {
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.lucaJamPickerPanel {
  position: relative !important;
  width: min(900px, 78vw) !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 26px 28px 22px !important;
  border: 2px solid rgba(255, 82, 185, 0.95) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 105, 205, 0.34), transparent 38%),
    linear-gradient(145deg, rgba(142, 0, 82, 0.96), rgba(70, 0, 42, 0.98)) !important;
  box-shadow:
    0 0 18px rgba(255, 40, 170, 0.95),
    0 0 42px rgba(255, 40, 170, 0.55),
    inset 0 0 22px rgba(255, 175, 230, 0.18) !important;
  color: #fff !important;
  text-align: center !important;
}

.lucaJamPickerPanel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.lucaJamPickerPanel h2 {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 18px rgba(255, 55, 180, 1) !important;
}

.lucaJamPickerPanel p {
  margin: 0 0 18px !important;
  color: rgba(255, 235, 248, 0.96) !important;
  font-size: 14px !important;
}

.lucaJamPickerClose {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 210, 240, 0.9) !important;
  background: linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  color: white !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.lucaJamSongList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  gap: 10px 12px !important;
}

.lucaJamSongRow {
  min-height: 36px !important;
  display: grid !important;
  grid-template-columns: 1fr 34px 34px !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 5px 3px 12px !important;
  border: 1px solid rgba(255, 205, 238, 0.92) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 93, 190, 0.98), rgba(172, 0, 98, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -8px 15px rgba(82, 0, 48, 0.34),
    0 0 10px rgba(255, 54, 176, 0.70) !important;
}

.lucaJamSongRow.isCurrentSong {
  background:
    linear-gradient(180deg, rgba(255, 236, 251, 1), rgba(255, 95, 196, 1), rgba(184, 0, 112, 1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.86),
    0 0 16px rgba(255, 230, 250, 1),
    0 0 32px rgba(255, 55, 185, 0.92) !important;
  border-color: rgba(255, 245, 253, 1) !important;
}

.lucaJamSongRow.isPlayingSong {
  animation: lucaJamCurrentPulse 1100ms ease-in-out infinite !important;
}

.lucaJamSongTitleButton,
.lucaJamMiniButton {
  border: 0 !important;
  background: transparent !important;
  color: white !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(75, 0, 45, 0.9) !important;
  cursor: pointer !important;
}

.lucaJamSongTitleButton {
  text-align: center !important;
  font-size: 12px !important;
  padding: 7px 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.lucaJamMiniButton {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  background: rgba(70, 0, 42, 0.32) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 0 8px rgba(255, 225, 248, 0.54) !important;
}

.lucaJamMiniButton:hover {
  background: rgba(255, 225, 248, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 0 12px rgba(255, 245, 253, 0.9) !important;
}

@keyframes lucaJamCurrentPulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}
/* LUCA_REAL_JAM_PICKER_V3_END */

/* LUCA_IMPACT_FIXED_GAP_EQUALIZER_V5_START */
.lucaImpactFixedGapEqualizer {
  position: fixed !important;
  height: 40px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  pointer-events: none !important;
  z-index: 999998 !important;
}

.lucaImpactFixedGapEqualizer span {
  width: 4px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, #fff7fd 0%, #ffbee9 28%, #ff55c0 68%, #93005c 100%) !important;
  box-shadow:
    0 0 7px rgba(255, 235, 252, 0.96),
    0 0 13px rgba(255, 78, 194, 0.76),
    0 0 21px rgba(255, 78, 194, 0.42) !important;
  opacity: 0.45 !important;
  animation: lucaImpactFixedGapBounce 820ms ease-in-out infinite !important;
  animation-delay: calc(var(--i) * -43ms) !important;
  animation-play-state: paused !important;
}

.lucaImpactFixedGapEqualizer.isPlaying span {
  animation-play-state: running !important;
  opacity: 0.96 !important;
}

.lucaImpactFixedGapEqualizer:not(.isPlaying) span {
  height: 7px !important;
  opacity: 0.42 !important;
}

@keyframes lucaImpactFixedGapBounce {
  0%, 100% { height: 7px; opacity: 0.52; }
  20% { height: 17px; opacity: 0.82; }
  48% { height: 34px; opacity: 1; }
  74% { height: 14px; opacity: 0.78; }
}
/* LUCA_IMPACT_FIXED_GAP_EQUALIZER_V5_END */


/* LUCA_EQUALIZER_AUDIO_ANALYSER_V8_START */
#lucaImpactFixedGapEqualizer span {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  transform-origin: bottom center !important;
  transform: scaleY(0.18);
  animation: none !important;
  transition:
    transform 55ms linear,
    opacity 55ms linear !important;
}
/* LUCA_EQUALIZER_AUDIO_ANALYSER_V8_END */