/* Bella page additions: welcome screen, deep colours, small self-view. */

/* The visitor's own picture: always a small thumbnail in the corner, before and during the call. */
.local-video-container {
  top: auto !important;
  left: 12px !important;
  bottom: 12px !important;
  width: 22% !important;
  max-width: 120px !important;
  height: auto !important;
  aspect-ratio: 3 / 4;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  background: #000 !important;
}
.local-video-container .local-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Start prompt: hide the camera icon; the whole area stays clickable. */
.access-wrap .icon-wrap {
  display: none !important;
}
.access-wrap {
  cursor: pointer;
  font: 600 20px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f1f1f;
  text-align: center;
}

/* ---- Colours: deep peacock water with a copper light. Chosen to sit opposite the warm
        skin and hair tones of the portrait, so she comes forward. ---- */
:root {
  --bella-abyss: #041a20;
  --bella-peacock: #0b4a55;
  --bella-lagoon: #1c8c8c;
  --bella-copper: #e0914f;
  --bella-copper-light: #f2b079;
  --bella-copper-deep: #9a5524;
  --bella-bone: #f3ebdd;
}

/* The stock page behind the welcome screen, in the same colours. */
html,
body,
#app {
  background: var(--bella-abyss) !important;
}
.wrap {
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(28, 140, 140, 0.45) 0%, rgba(28, 140, 140, 0) 58%),
    radial-gradient(90% 80% at 88% 92%, rgba(154, 85, 36, 0.5) 0%, rgba(154, 85, 36, 0) 60%),
    var(--bella-abyss) !important;
}
.remote-video-container {
  background: #0a2f36 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.access-wrap {
  color: var(--bella-bone);
}
.chat-btn.start-chat {
  background: linear-gradient(var(--bella-copper-light), var(--bella-copper)) !important;
  color: #2a1206 !important;
  box-shadow: 0 6px 0 var(--bella-copper-deep), 0 16px 26px rgba(0, 0, 0, 0.4);
}
.chat-btn.start-chat span {
  color: #2a1206 !important;
  font-weight: 700;
}

/* ---- Welcome screen ---- */
#bella-welcome {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 64px);
  overflow: hidden;
  perspective: 1400px;
  color: var(--bella-bone);
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(28, 140, 140, 0.55) 0%, rgba(28, 140, 140, 0) 58%),
    radial-gradient(90% 80% at 88% 92%, rgba(154, 85, 36, 0.6) 0%, rgba(154, 85, 36, 0) 60%),
    var(--bella-abyss);
  transition: opacity 0.45s ease, visibility 0.45s;
}
#bella-welcome.bw-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#bella-welcome .bw-stage {
  display: grid;
  grid-template-columns: minmax(220px, 420px) minmax(260px, 520px);
  gap: clamp(32px, 7vw, 96px);
  align-items: center;
  width: 100%;
  max-width: 1100px;
}

/* The portrait is a thick square slab, turned slightly towards the words. */
#bella-welcome .bw-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 9%;
  transform-style: preserve-3d;
  transform: rotateY(calc(21deg + var(--ry, 0deg))) rotateX(calc(6deg + var(--rx, 0deg)));
  transition: transform 0.25s ease-out;
  box-shadow: 0 60px 90px -20px rgba(0, 0, 0, 0.7), 0 20px 40px rgba(0, 0, 0, 0.35);
  animation: bw-settle 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#bella-welcome .bw-card::before,
#bella-welcome .bw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
#bella-welcome .bw-card::before {
  background: #062a31;
  transform: translateZ(-44px);
}
#bella-welcome .bw-card::after {
  background: var(--bella-peacock);
  transform: translateZ(-22px);
}
#bella-welcome .bw-card img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform: translateZ(0.1px);
}
#bella-welcome .bw-gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(0.2px);
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 36%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 -40px 60px -30px rgba(4, 26, 32, 0.55);
}
@keyframes bw-settle {
  from {
    opacity: 0;
    transform: rotateY(42deg) rotateX(10deg) translateY(30px);
  }
}

#bella-welcome .bw-copy h1 {
  margin: 0 0 clamp(24px, 3.5vw, 40px);
  font: 600 clamp(30px, 4.2vw, 54px) / 1.1 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
#bella-welcome .bw-button {
  display: inline-block;
  border: 0;
  border-radius: 16px;
  padding: 20px 36px;
  cursor: pointer;
  color: #2a1206;
  font: 700 clamp(20px, 2.2vw, 26px) / 1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(var(--bella-copper-light), var(--bella-copper));
  box-shadow: 0 7px 0 var(--bella-copper-deep), 0 20px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
}
#bella-welcome .bw-button:hover {
  filter: brightness(1.06);
}
#bella-welcome .bw-button:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--bella-copper-deep), 0 8px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
#bella-welcome .bw-button:focus-visible {
  outline: 3px solid var(--bella-bone);
  outline-offset: 5px;
}
#bella-welcome .bw-note {
  margin: 26px 0 0;
  max-width: 34ch;
  font: 400 15px / 1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgba(243, 235, 221, 0.72);
}

@media (max-width: 760px) {
  #bella-welcome .bw-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 34px;
  }
  #bella-welcome .bw-card {
    width: min(64vw, 300px);
    transform: rotateY(calc(10deg + var(--ry, 0deg))) rotateX(calc(4deg + var(--rx, 0deg)));
  }
  #bella-welcome .bw-note {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bella-welcome,
  #bella-welcome .bw-card,
  #bella-welcome .bw-button {
    animation: none;
    transition: none;
  }
}

/* ---- Call screen ---- */

/* Bella's picture is square on every screen. The stock page starts at 9:16 and only
   corrects itself on some browsers, which cropped her face on phones. */
.video-container {
  aspect-ratio: 1 / 1 !important;
}
.chat-btn {
  background: linear-gradient(var(--bella-copper-light), var(--bella-copper)) !important;
}
.chat-btn .stop-chat-inner {
  background: #2a1206 !important;
}

/* Phones and other upright screens: the square picture sits exactly in the middle of the
   screen, the stop button hangs just below it, and the small controls sit on the picture. */
@media (max-width: 760px), (orientation: portrait) {
  .page-container {
    padding: 12px !important;
    align-items: stretch !important;
  }
  .content-container {
    --bella-square: min(calc(100vw - 24px), 58vh);
    position: relative;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .video-container {
    flex: none;
    width: var(--bella-square) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }
  .player-controls {
    position: absolute !important;
    left: 0;
    right: 0;
    top: calc(50% + var(--bella-square) / 2 + 6px);
    height: 68px !important;
    min-height: 0 !important;
  }
  .actions {
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
  }
  .local-video-container {
    max-width: 84px !important;
  }
}

/* The sound-level bars beside the stop button, in copper instead of the stock purple. */
.input-audio-wave {
  filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15);
}

/* A short message from Bella's page, such as the end of the call time. */
.bella-notice {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1001;
  max-width: calc(100vw - 32px);
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--bella-bone);
  color: #2a1206;
  font: 600 16px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* Recording: a quiet note while it runs, and the offer to keep the file when the call ends. */
#bella-recording {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(4, 26, 32, 0.72);
  color: var(--bella-bone);
  font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
#bella-recording::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2574c;
}

#bella-session {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1001;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(4, 26, 32, 0.94);
  border: 1px solid rgba(243, 235, 221, 0.16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  color: var(--bella-bone);
  font: 500 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#bella-session p {
  margin: 0 4px 0 0;
}
#bella-session a,
#bella-session button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
#bella-session a {
  background: linear-gradient(180deg, var(--bella-copper-light), var(--bella-copper));
  color: #2a1206;
  border: 0;
}
#bella-session button {
  background: transparent;
  color: var(--bella-bone);
  border: 1px solid rgba(243, 235, 221, 0.4);
}
#bella-session a:focus-visible,
#bella-session button:focus-visible {
  outline: 3px solid var(--bella-bone);
  outline-offset: 2px;
}
@media (max-width: 360px) {
  #bella-session a,
  #bella-session button {
    padding: 0 12px;
  }
}