/* diaspora.ro — Melissa launcher shared by secondary pages.
   The panel styles mirror the Mobile Pro source of truth. */
#melissa-mobile-pro-fab {
  position: fixed !important;
  left: auto;
  top: auto;
  right: 18px;
  bottom: calc(var(--melissa-bottom, 20px) + env(safe-area-inset-bottom, 0px));
  z-index: 10500;
  isolation: isolate;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  overflow: visible;
}
#melissa-mobile-pro-fab .mel-anna-orb {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
  background-size: 200% 200%;
  box-shadow: 0 6px 22px rgba(124,58,237,.6), 0 0 0 4px rgba(168,85,247,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 11px;
  overflow: hidden;
  animation: melOrbGrad 4s ease infinite;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
#melissa-mobile-pro-fab:active .mel-anna-orb {
  transform: scale(.88);
  box-shadow: 0 3px 10px rgba(124,58,237,.4);
}
#melissa-mobile-pro-fab .mel-anna-orb svg { width: 100%; height: 100%; display: block; }
@keyframes melOrbGrad {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── MELISSA PANEL — copied from Mobile Pro ── */
.melissa-panel {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.melissa-panel.open { opacity: 1; pointer-events: all; }
.melissa-panel-inner {
  background: var(--card,#fff);
  border-radius: 20px 20px 0 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.melissa-panel.open .melissa-panel-inner { transform: translateY(0); }
.mel-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border,#dde0e6);
  flex-shrink: 0;
}
.mel-panel-orb { font-size: 28px; flex-shrink: 0; }
.mel-panel-info { flex: 1; }
.mel-panel-name { font: 700 14px var(--font,system-ui),sans-serif; color: var(--ink,#1c1e21); }
.mel-panel-status {
  font: 400 12px var(--font,system-ui),sans-serif;
  color: var(--green,#2ea84b);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.mel-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green,#2ea84b); flex-shrink: 0; }
.mel-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--card2,#f3f4f6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mel-close svg { width: 15px; height: 15px; }
.mel-context-badge {
  text-align: center;
  font: 400 11px var(--font,system-ui),sans-serif;
  color: var(--muted,#8a8d91);
  padding: 6px 0 2px;
  flex-shrink: 0;
}
.mel-suggestions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 8px 14px 0;
  flex-shrink: 0;
}
.mel-sug-chip {
  background: var(--card2,#f3f4f6);
  border: 1.5px solid var(--border,#dde0e6);
  border-radius: 20px;
  padding: 5px 13px;
  font: 500 12px var(--font,system-ui),sans-serif;
  color: var(--ink,#1c1e21);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.mel-sug-chip:hover { border-color: var(--brandl,#c084fc); background: var(--brand-a10, rgba(99,102,241,.08)); }
.mel-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mel-msg {
  max-width: 85%;
  font: 400 14.5px var(--font,system-ui),sans-serif;
  line-height: 1.58;
  padding: 11px 14px;
  word-break: break-word;
  white-space: pre-wrap;
}
.mel-msg.mel {
  background: #f0ebff;
  color: #1a0042;
  border-radius: 4px 18px 18px 18px;
  align-self: flex-start;
}
.mel-msg.user {
  background: linear-gradient(135deg, var(--brand,#7c3aed), var(--brand2,#a855f7));
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  align-self: flex-end;
  box-shadow: 0 2px 8px rgba(124,58,237,.25);
}
.mel-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: #f5f3ff;
  border-radius: 4px 16px 16px 16px;
}
.mel-dot { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; animation: melDot 1.4s ease-in-out infinite; }
.mel-dot:nth-child(2) { animation-delay: .2s; }
.mel-dot:nth-child(3) { animation-delay: .4s; }
@keyframes melDot { 0%,80%,100% { transform: scale(.6); } 40% { transform: scale(1); } }
.mel-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border,#dde0e6);
  padding-bottom: calc(10px + var(--safe-bot,0px));
  flex-shrink: 0;
}
.mel-panel-inp {
  flex: 1;
  height: 40px;
  border-radius: 20px;
  background: var(--card2,#f3f4f6);
  border: 1px solid var(--border,#dde0e6);
  padding: 0 14px;
  font: 400 14px var(--font,system-ui),sans-serif;
  color: var(--ink,#1c1e21);
  outline: none;
}
.mel-panel-send {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--brand,#7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.mel-panel-send svg { width: 15px; height: 15px; fill: #fff; }

@media (max-width: 640px) {
  #melissa-mobile-pro-fab { right: 14px; bottom: calc(var(--melissa-bottom, 88px) + env(safe-area-inset-bottom, 0px)); }
  .melissa-panel { padding: 0; }
  .melissa-panel-inner { min-height: 42vh; border-radius: 20px 20px 0 0; }
}

/* Mobile Pro token lock: secondary pages must not leak their page theme into Melissa. */
.melissa-panel,
.melissa-panel-inner {
  color: #0c4a6e;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.melissa-panel-inner {
  width: 100%;
  background: #fff;
}
.mel-panel-head { border-bottom-color: #7dd3fc; }
.mel-panel-name { font: 700 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #0c4a6e; }
.mel-panel-status { font: 400 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #2ea84b; }
.mel-live-dot { background: #2ea84b; }
.mel-close {
  padding: 0;
  background: #bae6fd;
  color: #000;
  font: inherit;
}
.mel-context-badge { color: #0ea5e9; font: 400 11px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.mel-sug-chip {
  background: #bae6fd;
  border-color: #7dd3fc;
  color: #0c4a6e;
  font: 500 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.mel-messages { color: #0c4a6e; }
.mel-msg { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.mel-msg.user { background: linear-gradient(135deg, #0284c7, #0ea5e9); }
.mel-footer { border-top-color: #7dd3fc; }
.mel-panel-inp {
  background: #bae6fd;
  border-color: #7dd3fc;
  color: #0c4a6e;
  font: 400 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.mel-panel-send {
  padding: 0;
  background: #0284c7;
  font: inherit;
}

/* Match Mobile Pro's inherited Hub typography and native button metrics exactly. */
.melissa-panel,
.melissa-panel-inner {
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.mel-close,
.mel-panel-send {
  font: 13.3333px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Melissa interaction controls: true fullscreen panel, with close only. */
.melissa-panel { justify-content: stretch; align-items: stretch; padding: 0; }
.melissa-panel-inner { width: 100%; max-width: none; height: 100dvh; min-height: 100vh; max-height: none; border-radius: 0; box-shadow: none; transform: translateY(0) scale(1); }
.melissa-panel.open .melissa-panel-inner { transform: translateY(0) scale(1); }
.mel-panel-controls { display: flex; align-items: center; gap: 7px; }
.mel-close:hover { filter: brightness(.96); }
.mel-file-list { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 8px; }
.mel-file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px 5px 10px; border: 1px solid #7dd3fc; border-radius: 9px; background: #e0f2fe; color: #0c4a6e; font-size: 11px; }
.mel-file-chip button { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: #0c4a6e; cursor: pointer; font-size: 16px; line-height: 1; }
.mel-attach { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 9px; border: 1px solid #7dd3fc; border-radius: 18px; background: #e0f2fe; color: #0c4a6e; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mel-attach span:first-child { font-size: 18px; line-height: 1; }
.mel-msg-files { margin-top: 6px; font-size: 11px; opacity: .9; }
@media (max-width: 640px) { .melissa-panel { padding: 0; } .melissa-panel-inner { width: 100%; height: 100dvh; min-height: 100vh; border-radius: 0; } .mel-attach span:last-of-type { display: inline; } }

/* Keep the floating launcher out of the conversation surface while Melissa is open. */
#melissa-mobile-pro-fab { transition: opacity .2s ease, transform .2s ease; }
body.melissa-open #melissa-mobile-pro-fab { opacity: 0; pointer-events: none; transform: scale(.78); }
body.melissa-open #melissa-panel.melissa-panel { z-index: 11001; }

/* Final responsive frame: desktop popup, mobile bottom-sheet. */
#melissa-panel.melissa-panel {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: rgba(15, 23, 42, .34) !important;
  overflow: hidden !important;
}
#melissa-panel .melissa-panel-inner {
  width: min(430px, calc(100vw - 48px)) !important;
  height: min(720px, calc(100vh - 48px)) !important;
  min-height: 0 !important;
  max-width: 430px !important;
  max-height: calc(100vh - 48px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(14, 165, 233, .22) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24), 0 4px 16px rgba(15, 23, 42, .12) !important;
  transform: translateY(18px) scale(.985) !important;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1) !important;
}
#melissa-panel.open .melissa-panel-inner {
  transform: translateY(0) scale(1) !important;
}
#melissa-panel .mel-panel-head,
#melissa-panel .mel-footer {
  flex: 0 0 auto !important;
}
#melissa-panel .mel-messages {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
@media (max-width: 640px) {
  #melissa-panel.melissa-panel {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 12px 0 0 !important;
  }
  #melissa-panel .melissa-panel-inner {
    width: 100% !important;
    max-width: none !important;
    height: min(720px, calc(100dvh - 12px)) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 22px 22px 0 0 !important;
    transform: translateY(100%) !important;
  }
  #melissa-panel.open .melissa-panel-inner {
    transform: translateY(0) !important;
  }
}
@media (max-width: 400px) {
  #melissa-panel.melissa-panel { padding-top: 8px !important; }
  #melissa-panel .melissa-panel-inner {
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* Melissa identity and context surface — 2026-09-08 */
#melissa-panel .melissa-panel-inner {
  background:
    linear-gradient(145deg, rgba(24,31,86,.94), rgba(88,47,139,.91) 55%, rgba(15,105,139,.90)),
    url('/assets/img/homepage-wave-background-20260907.jpg?v=20260920-wave1') center / cover no-repeat !important;
  border-color: rgba(255,255,255,.30) !important;
  box-shadow: 0 26px 80px rgba(12,18,52,.35), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

#melissa-panel .mel-panel-head {
  border-bottom-color: rgba(255,255,255,.20) !important;
}

#melissa-panel .mel-panel-name,
#melissa-panel .mel-panel-status,
#melissa-panel .mel-context-badge {
  color: #fff !important;
}

#melissa-panel .mel-panel-status { opacity: .88; }
#melissa-panel .mel-close { background: rgba(255,255,255,.16) !important; color: #fff !important; }
#melissa-panel .mel-close svg { stroke: #fff; }
#melissa-panel .mel-suggestions { gap: 8px; padding: 9px 14px 4px; }

#melissa-panel .mel-sug-chip {
  border-color: rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(12,18,52,.14);
}

#melissa-panel .mel-sug-chip:hover,
#melissa-panel .mel-sug-chip:focus-visible {
  border-color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.26) !important;
  color: #fff !important;
}

#melissa-panel .mel-messages {
  background:
    linear-gradient(rgba(19,27,78,.28), rgba(19,27,78,.40)),
    url('/assets/img/homepage-wave-background-20260907.jpg?v=20260920-wave1') center / cover no-repeat !important;
}

#melissa-panel .mel-msg.mel {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(12,18,52,.14);
}

#melissa-panel .mel-footer {
  background: rgba(13,20,61,.56) !important;
  border-top-color: rgba(255,255,255,.18) !important;
}

#melissa-panel .mel-panel-inp {
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.24) !important;
}

#melissa-panel .mel-panel-inp::placeholder { color: rgba(255,255,255,.70) !important; }

@media (max-width: 640px) {
  #melissa-panel .melissa-panel-inner {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 18px 18px 0 0 !important;
  }

  #melissa-panel .mel-suggestions {
    max-height: 126px;
    overflow-y: auto;
  }
}

/* Footer fit: keep the composer usable on narrow screens. */
.mel-footer {
  min-width: 0;
}
.mel-attach {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(13rem, 32vw);
  overflow: hidden;
}
.mel-attach span:last-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mel-panel-inp {
  min-width: 0;
  width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
}
.mel-panel-send {
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .mel-footer {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mel-attach {
    flex: 0 0 38px;
    width: 38px;
    max-width: 38px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .mel-attach span:first-child {
    font-size: 16px;
  }
  .mel-attach span:last-of-type {
    display: none !important;
  }
  .mel-panel-inp {
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Melissa mobile touch contract — source-owned controls, 2026-09-20. */
@media (max-width: 900px) {
  .mel-close,
  .mel-panel-send {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .mel-panel-inp {
    height: 44px;
    min-height: 44px;
  }

  .mel-attach {
    min-width: 44px;
    min-height: 44px;
  }

  .mel-file-chip button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}