:root {
  --bg: #170013;
  --panel: rgba(48, 4, 38, 0.82);
  --panel-strong: rgba(74, 5, 55, 0.9);
  --pink: #ff3fa4;
  --soft-pink: #ffc0df;
  --hot-pink: #ff1f94;
  --plum: #330022;
  --deep-plum: #210019;
  --cyan: #35d8ff;
  --cream: #fff0f8;
  --text: #fff7fb;
  --muted: #ffd2ea;
  --shadow: 0 0 30px rgba(255, 47, 160, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 63, 164, 0.28), transparent 32rem),
    radial-gradient(circle at top right, rgba(53, 216, 255, 0.18), transparent 28rem),
    linear-gradient(135deg, #180013 0%, #390026 45%, #13000f 100%);
  overflow: hidden;
}

button,
input {
  font: inherit;
}

.page {
  width: 100vw;
  height: 100vh;
  padding: 10px;
  display: grid;
  grid-template-rows: 150px minmax(0, 1fr);
  gap: 10px;
}

.banner {
  position: relative;
  border: 1px solid rgba(255, 140, 205, 0.75);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(49, 0, 34, 0.8), rgba(116, 12, 70, 0.72), rgba(45, 0, 40, 0.85)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 18px);
  box-shadow: var(--shadow);
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 40%, rgba(255, 72, 170, 0.4), transparent 16rem),
    radial-gradient(circle at 85% 60%, rgba(53, 216, 255, 0.18), transparent 18rem);
  pointer-events: none;
}

.banner-title {
  position: relative;
  z-index: 2;
  text-align: center;
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  padding-top: 3px;
}

.script-line {
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(28px, 4vw, 58px);
  line-height: 0.9;
  color: #fff0fb;
  text-shadow:
    0 0 8px rgba(255, 85, 185, 1),
    0 0 22px rgba(255, 39, 148, 0.9);
}

.banner h1 {
  margin: 2px 0 0;
  font-size: clamp(34px, 5vw, 78px);
  letter-spacing: 0.02em;
  color: #ffdaec;
  text-transform: uppercase;
  text-shadow:
    0 0 7px rgba(255, 255, 255, 0.85),
    0 0 22px rgba(255, 35, 151, 0.95),
    0 5px 0 rgba(91, 0, 54, 0.6);
}

.banner p {
  margin: 2px 0 0;
  font-size: clamp(12px, 1.3vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffd1e8;
}

.banner p span {
  color: var(--pink);
  text-shadow: 0 0 12px var(--pink);
}

.banner-tools {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 24px;
  width: 260px;
  height: 112px;
  border-radius: 18px;
  background: linear-gradient(145deg, #a81362, #4a052f);
  border: 1px solid rgba(255, 171, 217, 0.65);
  box-shadow: inset 0 0 24px rgba(255,255,255,0.08), 0 0 20px rgba(255, 31, 148, 0.35);
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 9px;
  padding-bottom: 18px;
}

.banner-tools::before {
  content: "♡";
  position: absolute;
  inset: auto 0 30px;
  text-align: center;
  font-size: 54px;
  color: #ffbbda;
  text-shadow: 0 0 20px var(--pink);
}

.banner-tools span {
  position: relative;
  z-index: 2;
  font-size: 38px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

.banner-tools span:nth-child(even) {
  transform: rotate(10deg);
}

.chainsaw {
  margin-left: 8px;
}

.banner-note {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 42px;
  width: 150px;
  min-height: 92px;
  padding: 14px;
  transform: rotate(-5deg);
  background: #ffd7df;
  color: #4d1632;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.32);
  text-align: center;
}

.banner-note strong,
.banner-note span {
  display: block;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: 24px;
  line-height: 1.05;
}

.workbench {
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 230px;
  gap: 10px;
}

.side-panel,
.chat-panel,
.right-panel {
  min-height: 0;
  border: 1px solid rgba(255, 95, 181, 0.8);
  background: var(--panel);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.side-panel {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.workbench-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 8px;
}

.crossed-tools {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: #ffd8ed;
  border: 1px solid rgba(255, 120, 200, 0.7);
  box-shadow: 0 0 18px rgba(255, 63, 164, 0.65);
}

.workbench-title h2 {
  margin: 0;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: 23px;
  line-height: 1.12;
  color: #fff2fb;
  text-shadow: 0 0 12px var(--pink);
}

.pill {
  width: 100%;
  height: 54px;
  border: 1px solid rgba(255, 159, 215, 0.75);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 72, 168, 0.72), rgba(126, 5, 76, 0.8));
  color: #fff7fb;
  display: grid;
  grid-template-columns: 38px 1fr 22px;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 0 18px rgba(255, 31, 148, 0.46);
  transition: transform 0.16s ease, filter 0.16s ease;
}

.pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.pill span {
  font-size: 24px;
}

.pill b {
  text-align: left;
  font-size: 17px;
}

.pill em {
  font-style: normal;
  font-size: 30px;
  opacity: 0.9;
}

.bench-photo {
  position: relative;
  margin-top: auto;
  min-height: 210px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 105, 190, 0.8);
  background:
    radial-gradient(circle at 40% 25%, rgba(255, 90, 180, 0.3), transparent 8rem),
    linear-gradient(145deg, #230018, #4b0633);
}

.bench-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.bench-photo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  padding: 20px;
  color: #ffd7ec;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  text-shadow: 0 0 14px var(--pink);
}

.bench-photo-fallback strong,
.bench-photo-fallback span {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.chat-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 92px minmax(0, 1fr) 74px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 80, 170, 0.18), transparent 18rem),
    linear-gradient(180deg, rgba(66, 4, 50, 0.88), rgba(39, 0, 29, 0.93));
}

.corner-card {
  position: absolute;
  top: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(19, 0, 15, 0.52);
  border: 1px solid rgba(255, 136, 205, 0.6);
  box-shadow: 0 0 18px rgba(255, 63, 164, 0.28);
}

.daisy-card {
  left: 20px;
}

.luca-card {
  right: 20px;
  flex-direction: row-reverse;
}

.portrait-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 40% 30%, #ffd0e8, #ff4aa8 48%, #4b0035 100%);
  border: 2px solid rgba(255, 198, 229, 0.95);
  box-shadow: 0 0 18px rgba(255, 63, 164, 0.7);
}

.luca-card .portrait-ring {
  background:
    radial-gradient(circle at 40% 30%, #d9fbff, #35d8ff 42%, #330029 100%);
  box-shadow: 0 0 18px rgba(53, 216, 255, 0.55);
}

.portrait-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-ring img[src="assets/daisy.png"],
.portrait-ring img[src="assets/luca.png"] {
  display: none;
}

.portrait-ring::after {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
}

.daisy-card .portrait-ring::after {
  content: "Daisy";
}

.luca-card .portrait-ring::after {
  content: "Luca";
}

.corner-card span {
  font-weight: 800;
  color: #ffe1f1;
}

.today-pill {
  justify-self: center;
  align-self: start;
  margin-top: 28px;
  padding: 8px 34px;
  border-radius: 999px;
  background: rgba(255, 63, 164, 0.28);
  border: 1px solid rgba(255, 141, 206, 0.35);
  color: #ffd4ea;
  font-weight: 700;
}

.messages {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 28px 20px;
  scroll-behavior: smooth;
}

.message {
  display: flex;
  flex-direction: column;
  margin: 18px 0;
  max-width: min(58%, 760px);
}

.message.daisy {
  align-items: flex-start;
  margin-right: auto;
}

.message.luca {
  align-items: flex-end;
  margin-left: auto;
}

.name-row {
  margin: 0 12px 7px;
  font-weight: 800;
  color: #ffe1f1;
}

.name-row span {
  margin-left: 8px;
  font-weight: 500;
  color: rgba(255, 226, 242, 0.68);
}

.bubble {
  border-radius: 22px;
  padding: 16px 20px;
  line-height: 1.45;
  font-size: 17px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  word-wrap: break-word;
}

.daisy .bubble {
  color: #3b0628;
  background: linear-gradient(180deg, #ffc9e2, #ff91c6);
  border: 1px solid rgba(255, 235, 246, 0.85);
  border-top-left-radius: 8px;
}

.luca .bubble {
  color: #fff4fb;
  background: linear-gradient(180deg, rgba(68, 7, 51, 0.96), rgba(37, 0, 30, 0.96));
  border: 1px solid rgba(53, 216, 255, 0.9);
  border-top-right-radius: 8px;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.25),
    0 0 15px rgba(53, 216, 255, 0.18);
}

.input-bar {
  grid-row: 3;
  margin: 0 20px 18px;
  height: 56px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255, 238, 247, 0.96);
  border: 2px solid rgba(255, 63, 164, 0.9);
  box-shadow: 0 0 24px rgba(255, 63, 164, 0.45);
  padding: 5px;
}

.attach-btn,
.send-btn {
  border: 0;
  cursor: pointer;
}

.attach-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  color: #8d1456;
  font-size: 22px;
}

#messageInput {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #6a0b41;
  font-size: 18px;
}

#messageInput::placeholder {
  color: rgba(123, 23, 77, 0.65);
}

.send-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff62b6, #ff168c);
  color: white;
  font-size: 23px;
  box-shadow: 0 0 15px rgba(255, 31, 148, 0.58);
}

.right-panel {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(60, 2, 46, 0.86), rgba(27, 0, 21, 0.9)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,0.035) 18px 19px);
}

.check-card,
.mug-card,
.notes-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 120, 200, 0.55);
  background: rgba(26, 0, 20, 0.48);
  padding: 16px;
  box-shadow: inset 0 0 20px rgba(255, 65, 165, 0.09);
}

.check-card h3,
.notes-card h3 {
  margin: 0 0 12px;
  color: #ffd8ed;
}

.check-card label {
  display: block;
  margin: 9px 0;
  color: #ffd7ec;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: 20px;
}

.check-card input {
  accent-color: var(--hot-pink);
}

.mug-card {
  text-align: center;
}

.mug {
  font-size: 56px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.22));
}

.mug-card p {
  margin: 5px 0 0;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #ffe2f2;
}

.notes-card p {
  margin: 9px 0;
  color: #ffd7ec;
}

.hidden-file {
  display: none;
}

dialog {
  width: min(560px, calc(100vw - 40px));
  border: 1px solid rgba(255, 125, 200, 0.8);
  border-radius: 22px;
  background: rgba(38, 0, 29, 0.98);
  color: white;
  box-shadow: 0 0 60px rgba(255, 63, 164, 0.6);
}

dialog::backdrop {
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dialog-head h2 {
  margin: 0 0 12px;
}

#closePreviousBtn {
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: white;
  background: #ff2d9b;
  cursor: pointer;
  font-size: 24px;
}

.previous-list {
  display: grid;
  gap: 10px;
}

.previous-item {
  border: 1px solid rgba(255, 151, 211, 0.55);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.previous-item:hover {
  background: rgba(255, 63, 164, 0.18);
}

@media (max-width: 1180px) {
  .workbench {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .right-panel {
    display: none;
  }

  .message {
    max-width: min(64%, 720px);
  }
}

@media (max-width: 850px) {
  body {
    overflow: auto;
  }

  .page {
    height: auto;
    min-height: 100vh;
    grid-template-rows: auto auto;
  }

  .banner-tools,
  .banner-note {
    display: none;
  }

  .workbench {
    grid-template-columns: 1fr;
  }

  .side-panel {
    order: 2;
  }

  .chat-panel {
    min-height: 640px;
  }

  .message {
    max-width: 82%;
  }

  .corner-card span {
    display: none;
  }
}

/* Daisy + Luca emergency build page image patch */
.bench-photo {
  min-height: 270px;
}

.bench-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 270px;
  object-fit: cover;
  object-position: center center;
}

.bench-photo-fallback {
  display: none !important;
}

.corner-card {
  top: 14px;
  padding: 8px 13px;
}

.portrait-ring {
  width: 72px;
  height: 72px;
}

.portrait-ring img {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daisy-card .portrait-ring img {
  object-position: center 0%;
}

.luca-card .portrait-ring img {
  object-position: center 18%;
}

.portrait-ring::after {
  content: none !important;
}

.mini-ideas-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 120, 200, 0.55);
  background: rgba(26, 0, 20, 0.42);
  padding: 12px 14px;
  text-align: center;
  box-shadow: inset 0 0 20px rgba(255, 65, 165, 0.08);
}

.mini-ideas-card strong,
.mini-ideas-card span {
  display: block;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  color: #ffd7ec;
  text-shadow: 0 0 12px rgba(255, 63, 164, 0.8);
}

.mini-ideas-card strong {
  font-size: 23px;
  line-height: 1;
}

.mini-ideas-card span {
  font-size: 19px;
  margin-top: 3px;
}

.messages {
  padding-top: 18px;
}

.message {
  max-width: min(56%, 720px);
}

/* ===== EMERGENCY BUILD PAGE OVAL PORTRAIT PATCH ===== */

/* hide Daisy/Luca text beside the top portraits */
.corner-card > span {
  display: none !important;
}

/* make the top cards neat image-only ovals */
.corner-card {
  top: 14px !important;
  width: 128px !important;
  height: 76px !important;
  padding: 5px !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: rgba(19, 0, 15, 0.56) !important;
}

/* oval frame, not a tiny circle */
.portrait-ring {
  width: 116px !important;
  height: 66px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* remove fallback text inside the portrait if image styling gets weird */
.portrait-ring::after {
  content: none !important;
  display: none !important;
}

.portrait-ring img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: auto !important;
}

/* Daisy and Luca crop positions */
.daisy-card .portrait-ring img {
  object-position: center 0% !important;
}

.luca-card .portrait-ring img {
  object-position: center 42% !important;
}

/* bottom-left workbench couple picture */
.bench-photo {
  min-height: 270px !important;
}

.bench-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 270px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.bench-photo-fallback {
  display: none !important;
}

/* tighten right-hand boxes */
.right-panel {
  gap: 10px !important;
}

.check-card,
.mug-card,
.notes-card {
  padding: 13px !important;
}

.check-card label {
  margin: 6px 0 !important;
  font-size: 18px !important;
}

.mug-card {
  padding: 10px !important;
}

.mug {
  font-size: 42px !important;
}

.mug-card p {
  font-size: 12px !important;
  line-height: 1.15 !important;
}

.notes-card p {
  margin: 6px 0 !important;
  font-size: 13px !important;
}

.mini-ideas-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 120, 200, 0.55) !important;
  background: rgba(26, 0, 20, 0.42) !important;
  padding: 8px 10px !important;
  text-align: center !important;
  box-shadow: inset 0 0 20px rgba(255, 65, 165, 0.08) !important;
}

.mini-ideas-card strong,
.mini-ideas-card span {
  display: block !important;
  font-family: "Segoe Script", "Brush Script MT", cursive !important;
  color: #ffd7ec !important;
  text-shadow: 0 0 12px rgba(255, 63, 164, 0.8) !important;
}

.mini-ideas-card strong {
  font-size: 19px !important;
  line-height: 1 !important;
}

.mini-ideas-card span {
  font-size: 16px !important;
  line-height: 1.05 !important;
  margin-top: 2px !important;
}

.message {
  max-width: min(56%, 720px) !important;
}

/* ===== FINAL POLISH PATCH ===== */

/* 1) Daisy top portrait: zoom out a bit and lift slightly */
.daisy-card .portrait-ring img {
  object-position: center 0% !important;
  transform: scale(0.90) !important;
}

/* keep Luca portrait as-is */
.luca-card .portrait-ring img {
  object-position: center 42% !important;
  transform: scale(1) !important;
}

/* 2) hide repeated speaker names above every message */
.message-label,
.message-name,
.chat-name,
.bubble-name,
.msg-name,
.sender-name,
.message-header,
.message-meta strong,
.message-meta .name {
  display: none !important;
}

/* also tighten message spacing a touch in case labels were taking room */
.message-meta {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) make Luca bubbles the same light plum tone as the left-side pills */
.message.assistant,
.message.luca,
.bot-message,
.reply-message,
.message.message-right {
  background: linear-gradient(180deg, #c93d95 0%, #a81b73 100%) !important;
  border: 1px solid rgba(255, 170, 220, 0.55) !important;
  color: #fff4fb !important;
  box-shadow:
    0 0 10px rgba(255, 93, 184, 0.25),
    inset 0 0 10px rgba(255,255,255,0.05) !important;
}

/* keep Daisy/user bubble softer pink */
.message.user,
.message.daisy,
.user-message,
.message.message-left {
  background: linear-gradient(180deg, #f7b3d3 0%, #ef9dc6 100%) !important;
  border: 1px solid rgba(255, 215, 235, 0.65) !important;
  color: #6b1748 !important;
}

/* just in case the page uses generic bubble classes */
.message p,
.user-message p,
.bot-message p {
  margin: 0 !important;
}

/* === DL_FINAL_POLISH_V4 === */

/* Top portrait clean-up */
.top-avatar,
.avatar-top,
.chat-top-avatar,
.header-avatar,
.profile-oval,
.top-profile,
.portrait-top,
.face-oval {
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.top-avatar img,
.avatar-top img,
.chat-top-avatar img,
.header-avatar img,
.profile-oval img,
.top-profile img,
.portrait-top img,
.face-oval img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Daisy top-left portrait lifted up a touch */
.top-avatar.left img,
.avatar-top.left img,
.chat-top-avatar.left img,
.header-avatar.left img,
.profile-oval.left img,
.top-profile.left img,
.portrait-top.left img,
.face-oval.left img,
.top-avatar:first-of-type img,
.avatar-top:first-of-type img,
.chat-top-avatar:first-of-type img,
.header-avatar:first-of-type img,
.profile-oval:first-of-type img,
.top-profile:first-of-type img,
.portrait-top:first-of-type img,
.face-oval:first-of-type img {
  object-position: center 18% !important;
}

/* Kill the ugly outer message boxes/wrappers */
.message,
.message-row,
.chat-message,
.chat-row,
.msg-row,
.message-wrap,
.message-shell,
.message-outer,
.message-card,
.chat-card,
.message-container,
.msg-container,
.bubble-wrap,
.bubble-shell,
.bubble-outer,
.chat-bubble-wrap,
.chat-bubble-outer,
.chat-entry,
.chat-entry-wrap,
.chat-entry-outer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Base bubble clean-up */
.message-bubble,
.chat-bubble,
.bubble,
.msg,
.message-text,
.bubble-inner {
  box-shadow: none !important;
  outline: none !important;
}

/* Daisy bubbles */
.user .message-bubble,
.user .chat-bubble,
.user .bubble,
.message.user .message-bubble,
.message.user .chat-bubble,
.message.user .bubble,
.daisy .message-bubble,
.daisy .chat-bubble,
.daisy .bubble {
  background: linear-gradient(180deg, #f8bdd7 0%, #f2aacb 100%) !important;
  border: 1px solid rgba(255,219,236,.95) !important;
  color: #5a1738 !important;
}

/* Luca bubbles = soft plum like the left pill buttons */
.assistant .message-bubble,
.assistant .chat-bubble,
.assistant .bubble,
.message.assistant .message-bubble,
.message.assistant .chat-bubble,
.message.assistant .bubble,
.luca .message-bubble,
.luca .chat-bubble,
.luca .bubble,
.bot .message-bubble,
.bot .chat-bubble,
.bot .bubble {
  background: linear-gradient(180deg, #bf4c93 0%, #a1337b 100%) !important;
  border: 1px solid rgba(255,166,221,.85) !important;
  color: #fff7fc !important;
}

/* Hide repeated Daisy/Luca names above bubbles if still present */
.message-name,
.sender-name,
.bubble-name,
.chat-speaker,
.speaker-name,
.label-name,
.msg-name,
.entry-name {
  display: none !important;
}

/* Top portraits, remove frame and any dark box */
.top-avatar,
.avatar-top,
.chat-top-avatar,
.header-avatar,
.profile-oval,
.top-profile,
.portrait-top,
.face-oval,
.avatar-badge,
.top-photo,
.chat-avatar-top {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Images inside top portraits */
.top-avatar img,
.avatar-top img,
.chat-top-avatar img,
.header-avatar img,
.profile-oval img,
.top-profile img,
.portrait-top img,
.face-oval img,
.avatar-badge img,
.top-photo img,
.chat-avatar-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: block !important;
}

/* Lift Daisy image up a bit more */
.top-avatar.left img,
.avatar-top.left img,
.chat-top-avatar.left img,
.header-avatar.left img,
.profile-oval.left img,
.top-profile.left img,
.portrait-top.left img,
.face-oval.left img,
.avatar-badge.left img,
.top-photo.left img,
.chat-avatar-top.left img,
.top-avatar:first-of-type img,
.avatar-top:first-of-type img,
.chat-top-avatar:first-of-type img,
.header-avatar:first-of-type img,
.profile-oval:first-of-type img,
.top-profile:first-of-type img,
.portrait-top:first-of-type img,
.face-oval:first-of-type img,
.avatar-badge:first-of-type img,
.top-photo:first-of-type img,
.chat-avatar-top:first-of-type img {
  object-position: center 10% !important;
}

/* Remove square outer boxes around message rows */
.message,
.message-row,
.chat-message,
.chat-row,
.msg-row,
.message-wrap,
.message-shell,
.message-outer,
.message-card,
.chat-card,
.message-container,
.msg-container,
.bubble-wrap,
.bubble-shell,
.bubble-outer,
.chat-bubble-wrap,
.chat-bubble-outer,
.chat-entry,
.chat-entry-wrap,
.chat-entry-outer {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove any extra box directly around bubbles */
.message-bubble,
.chat-bubble,
.bubble,
.msg,
.message-text,
.bubble-inner {
  box-shadow: none !important;
  outline: none !important;
}

/* Daisy bubble */
.user .message-bubble,
.user .chat-bubble,
.user .bubble,
.message.user .message-bubble,
.message.user .chat-bubble,
.message.user .bubble,
.daisy .message-bubble,
.daisy .chat-bubble,
.daisy .bubble {
  background: linear-gradient(180deg, #f8bdd7 0%, #f2aacb 100%) !important;
  border: 1px solid rgba(255,219,236,.95) !important;
  color: #5a1738 !important;
}

/* Luca bubble */
.assistant .message-bubble,
.assistant .chat-bubble,
.assistant .bubble,
.message.assistant .message-bubble,
.message.assistant .chat-bubble,
.message.assistant .bubble,
.luca .message-bubble,
.luca .chat-bubble,
.luca .bubble,
.bot .message-bubble,
.bot .chat-bubble,
.bot .bubble {
  background: linear-gradient(180deg, #bf4c93 0%, #a1337b 100%) !important;
  border: 1px solid rgba(255,166,221,.85) !important;
  color: #fff7fc !important;
}

/* Bottom-left work image, make it fit nicely */
.workbench-couple,
.workbench-image,
.pics-image,
.side-image,
.panel-image,
.gallery-image,
.photo-panel img,
.pics-panel img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  max-height: 200px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 18px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* If the bottom-left image sits inside a box, keep that tidy too */
.photo-panel,
.pics-panel,
.image-panel,
.side-photo-box,
.left-photo-box {
  overflow: hidden !important;
}


/* DAISY_TOP_OVAL_LIFT_ONLY */
.daisy-card .portrait-ring img {
  object-position: center 0% !important;
}

/* DAISY_TOP_OVAL_EXACT_LIFT_FINAL */
.daisy-card .portrait-ring img[src="assets/me.jpeg"] {
  object-position: center 0% !important;
}

/* BUBBLE_OUTER_BOX_REMOVE_ONLY */
article.message,
.message {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

article.message.daisy,
article.message.luca,
.message.daisy,
.message.luca {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
}

/* hide the repeated Daisy/Luca name strips above bubbles */
article.message .name-row,
.message .name-row {
  display: none !important;
}

/* keep the real rounded bubbles only */
article.message .bubble,
.message .bubble {
  box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
}

/* Daisy bubble */
article.message.daisy .bubble,
.message.daisy .bubble {
  background: linear-gradient(180deg, #ffc9e2, #ff91c6) !important;
  border: 1px solid rgba(255, 235, 246, 0.85) !important;
  color: #3b0628 !important;
}

/* Luca bubble, plum/pink */
article.message.luca .bubble,
.message.luca .bubble {
  background: linear-gradient(180deg, #bf4c93 0%, #a1337b 100%) !important;
  border: 1px solid rgba(255,166,221,.85) !important;
  color: #fff7fc !important;
}

/* LUCA_BUBBLE_MATCH_PICS_PILL_ONLY */
article.message.luca .bubble,
.message.luca .bubble {
  background: linear-gradient(180deg, rgba(255, 72, 168, 0.72), rgba(126, 5, 76, 0.8)) !important;
  border: 1px solid rgba(255, 159, 215, 0.75) !important;
  color: #fff7fb !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 18px rgba(255, 31, 148, 0.28) !important;
}

/* BOTTOM_RIGHT_ME_AND_LUCA_TUNE_ONLY */
#dl-bottom-right-photo,
.dl-bottom-right-photo {
  transform: translate(8px, 24px) !important;
  width: calc(100% - 8px) !important;
  height: 128px !important;
  max-height: 128px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#dl-bottom-right-photo img,
.dl-bottom-right-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 58% 35% !important;
  display: block !important;
}



/* RIGHT_PANEL_BOXES_DROP_ONLY */
.right-panel .mug-card {
  transform: translateY(0px) !important;
}

.right-panel .notes-card {
  transform: translateY(8px) !important;
}

.right-panel .mini-ideas-card {
  transform: translateY(16px) !important;
}

/* TOOLBOX_LOVE_REAL_BOX */
.banner-tools.left-tools.toolbox-love-box {
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(60, 0, 42, 0.55) !important;
  border: 1px solid rgba(255, 171, 217, 0.65) !important;
}

.banner-tools.left-tools.toolbox-love-box::before {
  content: none !important;
  display: none !important;
}

.banner-tools.left-tools.toolbox-love-box img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center 56% !important;
}

/* TOOLBOX_LOVE_WIDE_IMAGE_FINAL */
.banner-tools.left-tools.toolbox-love-box {
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.banner-tools.left-tools.toolbox-love-box::before {
  content: none !important;
  display: none !important;
}

.banner-tools.left-tools.toolbox-love-box img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: none !important;
  box-shadow: none !important;
}

/* HEADER_TITLE_SHRINK_ONLY */
.banner-title {
  padding-top: 8px !important;
}

.banner-title .script-line {
  font-size: clamp(24px, 3.2vw, 46px) !important;
  line-height: 0.92 !important;
}

.banner-title h1 {
  font-size: clamp(30px, 4.1vw, 62px) !important;
  line-height: 0.98 !important;
  margin-top: 4px !important;
}

.banner-title p {
  margin-top: 5px !important;
}