/* ─────────────────────────────────────────────────────────────────────────────
   Rosetta — the Hub guide, as a widget any page can load.

   She lived inside hub-dashboard.html and nowhere else: 1 page out of 41. The
   moment a member opened the course player, the directory, their profile,
   messages or support, there was no way to reach her at all. She now knows who
   the member is, what they have completed and which screen they are on, which
   made "only on one screen" the thing holding her back.

   Loaded with /js/hub-rosetta.js. Two lines per page.

   SELF-CONTAINED ON PURPOSE. The dashboard's copy leaned on that page's own
   variables (--green, --sidebar, --border) which most pages do not define, so
   every value here is literal. The colours are the Hub's own, taken from the
   dashboard's :root so she looks identical wherever she appears.

   Namespaced .rosetta-*, not .guide-*, so this can sit beside the dashboard's
   existing markup during the changeover without either fighting the other.
   ───────────────────────────────────────────────────────────────────────────── */

.rosetta-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  border-radius: 50%; clip-path: circle(50%);
  border: 3px solid #256B42;
  background: #1E2A3A;
  cursor: pointer; padding: 0; overflow: hidden;
  box-shadow: 0 4px 16px rgba(30,42,58,.28);
  z-index: 500;
  transition: transform .15s, box-shadow .15s;
}
.rosetta-fab img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 50%; display: block; }
.rosetta-fab:hover { transform: scale(1.07); box-shadow: 0 6px 22px rgba(30,42,58,.35); }
.rosetta-fab-label {
  position: absolute; bottom: 66px; right: 0;
  background: #1E2A3A; color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.rosetta-fab:hover .rosetta-fab-label { opacity: 1; transform: translateY(0); }

/* --rkb is the on-screen keyboard's height, published from JS off
   visualViewport. It is 0px on desktop and whenever the keyboard is closed, so
   these read as plain 90px/480px there. Without it, tapping into Rosetta on a
   phone opens the keyboard straight over the panel: position:fixed pins to the
   layout viewport, and the layout viewport does not shrink for a keyboard. */
.rosetta-panel {
  position: fixed; right: 24px;
  bottom: calc(90px + var(--rkb, 0px));
  width: 340px;
  max-height: min(480px, calc(100dvh - var(--rkb, 0px) - 140px));
  background: #fff; border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  z-index: 499;
  opacity: 0; pointer-events: none; transform: translateY(12px) scale(.97);
  transition: opacity .2s, transform .2s;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.rosetta-panel.open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }

.rosetta-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.07); flex-shrink: 0; }
.rosetta-header-info { flex: 1; }
.rosetta-header-name { font-size: 12px; font-weight: 700; color: #1E2A3A; }
.rosetta-header-sub  { font-size: 11px; color: #6B7A8D; }

.rosetta-clear {
  background: none; border: none; cursor: pointer; color: #6B7A8D;
  padding: 6px; border-radius: 6px; font-family: inherit;
  display: none; transition: color .15s, background .15s;
}
.rosetta-clear:hover { color: #C0392B; background: rgba(192,57,43,.07); }

/* 26px was below the 44px minimum touch target, so on a phone you aimed at it
   and missed, which reads as "the chatbot cannot be dismissed". The circle
   still looks 26px; the hit area around it is 44px. */
.rosetta-close {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: #F5F7FA; cursor: pointer; color: #6B7A8D;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; transition: background .15s;
}
.rosetta-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); }
.rosetta-close:hover { background: rgba(0,0,0,.08); }

.rosetta-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px;
}
.rosetta-msg { max-width: 88%; font-size: 13px; line-height: 1.5; padding: 10px 13px; border-radius: 12px; word-break: break-word; }
.rosetta-msg-guide { background: #F5F7FA; color: #1E2A3A; border-radius: 12px 12px 12px 3px; align-self: flex-start; }
.rosetta-msg-user  { background: #1E2A3A; color: #fff;    border-radius: 12px 12px 3px 12px; align-self: flex-end; }
.rosetta-msg a { color: #256B42; }

.rosetta-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: #F5F7FA; border-radius: 12px 12px 12px 3px; }
.rosetta-typing span { width: 6px; height: 6px; border-radius: 50%; background: #6B7A8D; animation: rosettaPulse 1.2s ease-in-out infinite; }
.rosetta-typing span:nth-child(2) { animation-delay: .2s; }
.rosetta-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes rosettaPulse { 0%,80%,100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

.rosetta-input-row { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(0,0,0,.07); flex-shrink: 0; }
.rosetta-input {
  flex: 1; padding: 9px 12px;
  border: 1.5px solid rgba(0,0,0,.07); border-radius: 10px;
  font-family: inherit; font-size: 16px; color: #1E2A3A;
  resize: none; outline: none; line-height: 1.4;
  max-height: 80px; overflow-y: auto; overscroll-behavior: contain;
  transition: border-color .15s;
}
.rosetta-input:focus { border-color: #256B42; }
.rosetta-send {
  width: 36px; height: 36px; border-radius: 10px;
  background: #1E2A3A; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity .15s;
}
.rosetta-send:hover { opacity: .85; }
.rosetta-send:disabled { opacity: .4; cursor: default; }

@media (max-width: 640px) {
  .rosetta-panel {
    width: calc(100vw - 32px); right: 16px;
    bottom: calc(86px + var(--rkb, 0px));
    max-height: min(480px, calc(100dvh - var(--rkb, 0px) - 120px));
  }

  /* While the keyboard is up the panel anchors to the TOP of the screen rather
     than trying to sit above it.
     Measuring the keyboard and lifting the panel by that much is the tidier
     answer and is what every other browser gets. It did not work on Miranda's
     iPhone: the app shell pins html and body so the page cannot scroll, and a
     page that cannot scroll is exactly where iOS stops reliably reporting a
     shrunken visualViewport, so --rkb can read 0 while the keyboard is very
     much there. This stops measuring. The keyboard always occupies the bottom,
     so the top is always safe. */
  .rosetta-panel.typing { top: calc(10px + env(safe-area-inset-top)); bottom: auto; max-height: min(52dvh, 440px); }

  /* Clear of a bottom nav where one exists, and of the home indicator where
     one does not. */
  .rosetta-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); right: 16px; }

  /* The panel starts at bottom:86px and the head sat at the same 86px with a
     higher z-index, covering the input row and send button. */
  body.rosetta-open .rosetta-fab { display: none; }
}

/* The dashboard hides its chat head while the mobile nav drawer is open. Same
   rule for this one, so a page with that drawer behaves identically. */
body.mobile-nav-open .rosetta-fab { display: none; }