/* =========================================================
   ASTROQUE — LIGHT AESTHETIC ASTROLOGY THEME
========================================================= */

:root{
  --background:#fbf7f1;
  --background-soft:#fffdf9;
  --surface:#ffffff;
  --surface-soft:#f8f0f4;
  --surface-lavender:#f2edf8;
  --surface-gold:#fbf4df;

  --primary:#76507f;
  --primary-dark:#56375f;
  --primary-soft:#a98eb3;

  --gold:#b48b3e;
  --gold-dark:#8d6727;
  --gold-soft:#e9d5a7;

  --rose:#b97d82;
  --rose-soft:#f3dedf;

  --text:#352b38;
  --text-soft:#766a79;
  --text-muted:#998e9a;

  --border:#e8dde7;
  --border-gold:#e9d8b2;

  --success:#6d9273;
  --danger:#b76368;
  --warning:#b28a44;

  --shadow-small:
    0 10px 30px rgba(86,55,95,.08);

  --shadow-medium:
    0 20px 55px rgba(86,55,95,.12);

  --shadow-large:
    0 35px 90px rgba(86,55,95,.15);

  --radius-small:12px;
  --radius-medium:18px;
  --radius-large:28px;
  --radius-pill:999px;
}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
}

html{
  width:100%;
  min-height:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  width:100%;
  min-height:100vh;

  font-family:"Manrope",sans-serif;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(233,213,167,.38),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 18%,
      rgba(211,195,225,.42),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #fffdf9,
      #faf5ef 45%,
      #f7f0f5
    );

  color:var(--text);

  overflow-x:hidden;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  border:none;
  cursor:pointer;
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

input,
select,
textarea{
  outline:none;
}

a{
  color:inherit;
  text-decoration:none;
}

.hidden{
  display:none !important;
}


/* =========================================================
   COSMIC BACKGROUND
========================================================= */

.cosmicBackground{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.cosmicGlow{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  opacity:.55;
}

.cosmicGlowOne{
  width:420px;
  height:420px;

  top:-150px;
  left:-120px;

  background:
    radial-gradient(
      circle,
      rgba(233,213,167,.55),
      rgba(233,213,167,0)
    );
}

.cosmicGlowTwo{
  width:520px;
  height:520px;

  top:10%;
  right:-180px;

  background:
    radial-gradient(
      circle,
      rgba(199,178,214,.5),
      rgba(199,178,214,0)
    );
}

.cosmicGlowThree{
  width:420px;
  height:420px;

  bottom:-180px;
  left:35%;

  background:
    radial-gradient(
      circle,
      rgba(243,222,223,.55),
      rgba(243,222,223,0)
    );
}

.starField{
  position:absolute;
  inset:0;

  background-image:
    radial-gradient(
      circle,
      rgba(118,80,127,.28) 1px,
      transparent 1.5px
    );

  background-size:48px 48px;
  opacity:.3;
}

.starFieldTwo{
  transform:translate(22px,22px);
  background-size:72px 72px;
  opacity:.18;
}

.orbit{
  position:absolute;
  border:1px solid rgba(180,139,62,.18);
  border-radius:50%;
}

.orbitOne{
  width:340px;
  height:340px;
  right:7%;
  top:8%;
}

.orbitTwo{
  width:220px;
  height:220px;
  left:5%;
  bottom:8%;
}

.orbitPlanet{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;

  top:50%;
  left:-6px;

  background:var(--gold);
  box-shadow:0 0 18px rgba(180,139,62,.45);
}


/* =========================================================
   COMMON BRAND
========================================================= */

.brandIdentity{
  display:flex;
  align-items:center;
  gap:12px;
}

.brandSymbol{
  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #fff8e8,
      #eee3f3
    );

  border:1px solid var(--border-gold);

  box-shadow:var(--shadow-small);
}

.brandMoon{
  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  line-height:1;
  color:var(--gold-dark);
}

.brandText{
  display:flex;
  flex-direction:column;
}

.brandText strong{
  font-family:"Cormorant Garamond",serif;
  font-size:29px;
  line-height:1;
  color:var(--primary-dark);
}

.brandText small{
  margin-top:5px;
  color:var(--text-soft);
  font-size:11px;
  letter-spacing:.04em;
}

.compactBrand .brandSymbol{
  width:44px;
  height:44px;
}

.compactBrand .brandText strong{
  font-size:25px;
}


/* =========================================================
   ENTRY SCREEN
========================================================= */

.entryScreen{
  width:100%;
  min-height:100vh;
  padding:26px;
}

.entryShell{
  width:100%;
  max-width:1440px;
  margin:0 auto;
}

.topNavigation{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:8px 2px 26px;
}

.onlineIndicator{
  display:flex;
  align-items:center;
  gap:9px;

  min-height:42px;
  padding:0 16px;

  background:rgba(255,255,255,.7);

  border:1px solid var(--border);
  border-radius:var(--radius-pill);

  color:var(--text-soft);
  font-size:13px;

  box-shadow:var(--shadow-small);
  backdrop-filter:blur(18px);
}

.onlineIndicator b{
  color:var(--primary-dark);
}

.onlineDot{
  width:9px;
  height:9px;

  border-radius:50%;
  background:var(--success);

  box-shadow:
    0 0 0 5px rgba(109,146,115,.12);
}

.entryLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(480px,620px);
  gap:44px;
  align-items:start;
}

.entryIntroduction{
  padding:56px 20px 40px 6px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;

  padding:9px 14px;

  border:1px solid var(--border-gold);
  border-radius:var(--radius-pill);

  background:rgba(255,250,239,.75);

  color:var(--gold-dark);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.entryIntroduction h1{
  max-width:760px;
  margin:24px 0 18px;

  font-family:"Cormorant Garamond",serif;
  font-size:clamp(52px,6vw,88px);
  line-height:.92;
  letter-spacing:-.04em;

  color:var(--primary-dark);
}

.entryIntroduction h1 span{
  display:block;
  margin-top:10px;
  color:var(--gold-dark);
}

.heroDescription{
  max-width:720px;
  margin:0;

  color:var(--text-soft);
  font-size:17px;
  line-height:1.8;
}

.featureGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;

  margin-top:34px;
}

.featureCard{
  min-width:0;
  padding:18px;

  background:rgba(255,255,255,.7);

  border:1px solid var(--border);
  border-radius:var(--radius-medium);

  box-shadow:var(--shadow-small);
  backdrop-filter:blur(18px);
}

.featureIcon{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:13px;

  border-radius:50%;

  background:var(--surface-gold);
  color:var(--gold-dark);

  font-family:"Cormorant Garamond",serif;
  font-size:23px;
}

.featureCard h2{
  margin:0;
  color:var(--primary-dark);
  font-size:14px;
}

.featureCard p{
  margin:7px 0 0;
  color:var(--text-soft);
  font-size:12px;
  line-height:1.6;
}

.privacyNotice{
  display:flex;
  align-items:flex-start;
  gap:12px;

  max-width:690px;
  margin-top:26px;
  padding:14px 16px;

  background:rgba(243,222,223,.45);

  border:1px solid rgba(185,125,130,.2);
  border-radius:var(--radius-medium);
}

.privacyIcon{
  color:var(--rose);
  font-size:22px;
}

.privacyNotice p{
  margin:0;
  color:var(--text-soft);
  font-size:13px;
  line-height:1.65;
}


/* =========================================================
   ENTRY CARD
========================================================= */

.entryCard{
  padding:28px;

  background:rgba(255,255,255,.86);

  border:1px solid rgba(232,221,231,.95);
  border-radius:32px;

  box-shadow:var(--shadow-large);
  backdrop-filter:blur(24px);
}

.entryCardHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;

  padding-bottom:22px;
  border-bottom:1px solid var(--border);
}

.sectionLabel{
  display:block;
  margin-bottom:7px;

  color:var(--gold-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.entryCardHeader h2{
  margin:0;

  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  line-height:1.05;

  color:var(--primary-dark);
}

.zodiacSeal{
  width:64px;
  height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--surface-gold),
      var(--surface-lavender)
    );

  border:1px solid var(--border-gold);

  color:var(--gold-dark);
  font-size:25px;

  box-shadow:var(--shadow-small);
}

.formSection{
  padding:24px 0;
  border-bottom:1px solid var(--border);
}

.formSectionTitle{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:16px;

  color:var(--primary-dark);
  font-size:14px;
  font-weight:800;
}

.formSectionTitle span{
  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--surface-lavender);
  color:var(--primary);

  font-size:11px;
}

.formSectionNote{
  margin:-7px 0 16px 41px;

  color:var(--text-muted);
  font-size:12px;
  line-height:1.6;
}

.formGrid{
  display:grid;
  gap:14px;
}

.formGridTwo{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.formFieldFull{
  grid-column:1 / -1;
}

.formField label{
  display:block;
  margin:0 0 8px;

  color:var(--text-soft);
  font-size:12px;
  font-weight:700;
}

.formField input,
.formField select{
  width:100%;
  height:50px;

  padding:0 14px;

  background:var(--background-soft);
  color:var(--text);

  border:1px solid var(--border);
  border-radius:14px;

  font-size:14px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.formField input::placeholder{
  color:#afa4b0;
}

.formField input:focus,
.formField select:focus{
  background:#fff;
  border-color:var(--primary-soft);

  box-shadow:
    0 0 0 4px rgba(118,80,127,.09);
}

.checkOption{
  position:relative;

  display:flex;
  align-items:flex-start;
  gap:11px;

  margin-top:15px;

  color:var(--text-soft);
  font-size:12px;
  line-height:1.55;

  cursor:pointer;
}

.checkOption input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.customCheckbox{
  width:19px;
  height:19px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
  margin-top:1px;

  border:1px solid var(--border);
  border-radius:6px;

  background:#fff;

  transition:.2s ease;
}

.checkOption input:checked + .customCheckbox{
  background:var(--primary);
  border-color:var(--primary);
}

.checkOption input:checked + .customCheckbox::after{
  content:"✓";
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.agreementArea{
  padding-top:22px;
}

.formError{
  margin-top:16px;
  padding:12px 14px;

  background:#fff1f1;
  color:#a34d53;

  border:1px solid #efc7c9;
  border-radius:12px;

  font-size:13px;
  line-height:1.5;
}

.primaryActionButton{
  width:100%;
  min-height:56px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  margin-top:22px;
  padding:0 20px;

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      #8c6594
    );

  color:#fff;

  font-size:15px;
  font-weight:800;

  box-shadow:
    0 14px 30px rgba(118,80,127,.25);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.primaryActionButton:hover{
  transform:translateY(-2px);

  box-shadow:
    0 18px 38px rgba(118,80,127,.3);
}

.buttonArrow{
  font-size:21px;
}

.entryFootnote{
  margin:14px 8px 0;

  text-align:center;
  color:var(--text-muted);

  font-size:11px;
  line-height:1.6;
}


/* =========================================================
   CHAT SCREEN
========================================================= */

.chatScreen{
  width:100%;
  min-height:100vh;
  padding:14px;
}

.chatShell{
  width:100%;
  height:calc(100vh - 28px);

  display:grid;
  grid-template-columns:280px minmax(0,1fr) 285px;
  gap:14px;

  max-width:1680px;
  margin:0 auto;
}

.chatSidebar,
.informationPanel,
.chatMain{
  min-width:0;

  background:rgba(255,255,255,.82);

  border:1px solid var(--border);
  border-radius:24px;

  box-shadow:var(--shadow-medium);
  backdrop-filter:blur(24px);
}

.chatSidebar,
.informationPanel{
  padding:16px;
  overflow-y:auto;
}

.chatMain{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.sidebarBrand{
  padding:4px 4px 16px;
}

.sidebarCard,
.informationCard{
  padding:15px;

  background:rgba(255,253,249,.82);

  border:1px solid var(--border);
  border-radius:17px;

  box-shadow:
    0 8px 24px rgba(86,55,95,.05);
}

.sidebarCard + .sidebarCard,
.informationCard + .informationCard{
  margin-top:12px;
}

.userProfileCard{
  display:flex;
  align-items:center;
  gap:12px;
}

.userAvatar,
.partnerAvatar{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--surface-lavender),
      var(--surface-gold)
    );

  border:1px solid var(--border-gold);

  color:var(--primary-dark);
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  font-weight:700;
}

.userProfileContent{
  min-width:0;
}

.userProfileContent strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--primary-dark);
  font-size:14px;
}

.userProfileContent span{
  display:block;
  margin-top:4px;

  color:var(--text-muted);
  font-size:11px;
}

.sidebarCardTitle,
.informationCardLabel{
  margin-bottom:12px;

  color:var(--gold-dark);

  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.sessionDetail,
.profileDetailRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;

  padding:9px 0;

  border-bottom:1px solid var(--border);

  color:var(--text-soft);
  font-size:11px;
}

.sessionDetail:last-child,
.profileDetailRow:last-child{
  border-bottom:none;
}

.sessionDetail strong,
.profileDetailRow strong{
  max-width:60%;

  text-align:right;
  overflow-wrap:anywhere;

  color:var(--primary-dark);
  font-size:11px;
}

.birthSummaryLine{
  display:flex;
  align-items:center;
  gap:11px;

  padding:10px 0;

  border-bottom:1px solid var(--border);
}

.birthSummaryLine:last-of-type{
  border-bottom:none;
}

.birthSummaryIcon{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:50%;
  background:var(--surface-lavender);

  color:var(--primary);
  font-size:14px;
}

.birthSummaryLine small{
  display:block;

  color:var(--text-muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.birthSummaryLine strong{
  display:block;
  margin-top:2px;

  color:var(--text);
  font-size:11px;
  line-height:1.45;
}

.kundaliStatus{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:12px;
  padding:9px 10px;

  border-radius:11px;

  background:var(--surface-gold);

  color:var(--gold-dark);
  font-size:10px;
  line-height:1.4;
}

.kundaliStatusDot{
  width:7px;
  height:7px;

  flex-shrink:0;

  border-radius:50%;
  background:var(--warning);
}

.chatGuidanceCard p,
.disclaimerCard p{
  margin:0;

  color:var(--text-soft);
  font-size:11px;
  line-height:1.65;
}


/* =========================================================
   CHAT HEADER
========================================================= */

.chatHeader{
  min-height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:14px 16px;

  background:rgba(255,253,249,.9);
  border-bottom:1px solid var(--border);
}

.partnerIdentity{
  min-width:0;

  display:flex;
  align-items:center;
  gap:12px;
}

.partnerIdentityText{
  min-width:0;
}

.partnerNameRow{
  display:flex;
  align-items:center;
  gap:9px;
}

.partnerNameRow h1{
  margin:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  font-family:"Cormorant Garamond",serif;
  color:var(--primary-dark);

  font-size:24px;
  line-height:1;
}

.partnerIdentityText p{
  margin:5px 0 0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--text-muted);
  font-size:11px;
}

.partnerLabel{
  padding:5px 9px;

  border-radius:var(--radius-pill);

  background:var(--surface-lavender);
  border:1px solid var(--border);

  color:var(--primary);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.chatHeaderActions{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.secondaryButton,
.nextPartnerButton{
  min-height:40px;
  padding:0 14px;

  border-radius:12px;

  font-size:11px;
  font-weight:800;

  transition:.2s ease;
}

.secondaryButton{
  background:#fff;
  color:var(--primary);

  border:1px solid var(--border);
}

.secondaryButton:hover{
  background:var(--surface-lavender);
}

.nextPartnerButton{
  background:var(--rose-soft);
  color:#8d555a;

  border:1px solid rgba(185,125,130,.24);
}

.nextPartnerButton:hover{
  background:#edced0;
}


/* =========================================================
   MATCHING BANNER
========================================================= */

.matchingBanner{
  display:flex;
  align-items:center;
  gap:12px;

  margin:12px 14px 0;
  padding:12px 14px;

  background:
    linear-gradient(
      135deg,
      var(--surface-gold),
      #f8eef3
    );

  border:1px solid var(--border-gold);
  border-radius:14px;
}

.matchingSpinner{
  width:24px;
  height:24px;

  flex-shrink:0;

  border:2px solid rgba(180,139,62,.24);
  border-top-color:var(--gold-dark);
  border-radius:50%;

  animation:spin 1s linear infinite;
}

.matchingBanner strong{
  display:block;

  color:var(--primary-dark);
  font-size:11px;
}

.matchingBanner span:not(.matchingSpinner){
  display:block;
  margin-top:3px;

  color:var(--text-soft);
  font-size:10px;
  line-height:1.45;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   ASTROLOGER INTRODUCTION
========================================================= */

.astrologerIntroduction{
  display:flex;
  align-items:center;
  gap:14px;

  margin:12px 14px 0;
  padding:15px;

  background:
    linear-gradient(
      135deg,
      rgba(242,237,248,.95),
      rgba(251,244,223,.95)
    );

  border:1px solid var(--border);
  border-radius:17px;
}

.astrologerIntroSymbol{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:50%;

  background:#fff;
  border:1px solid var(--border-gold);

  color:var(--gold-dark);
  font-size:20px;
}

.astrologerIntroContent{
  min-width:0;
}

.astrologerIntroLabel{
  display:block;

  color:var(--gold-dark);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.astrologerIntroContent h2{
  margin:3px 0 4px;

  color:var(--primary-dark);

  font-family:"Cormorant Garamond",serif;
  font-size:21px;
}

.astrologerIntroContent p{
  margin:0;

  color:var(--text-soft);
  font-size:10px;
  line-height:1.5;
}

.expertiseTags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-top:9px;
}

.expertiseTags span{
  padding:5px 8px;

  background:rgba(255,255,255,.75);

  border:1px solid var(--border);
  border-radius:var(--radius-pill);

  color:var(--primary);
  font-size:9px;
  font-weight:700;
}


/* =========================================================
   MESSAGES AREA
========================================================= */

.messagesArea{
  flex:1;
  min-height:0;

  overflow-y:auto;

  padding:18px;

  scroll-behavior:smooth;
}

.welcomeMessage{
  width:min(100%,430px);

  margin:60px auto;
  padding:28px;

  text-align:center;

  background:rgba(255,255,255,.58);

  border:1px solid var(--border);
  border-radius:22px;

  box-shadow:var(--shadow-small);
}

.welcomeSymbol{
  width:56px;
  height:56px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 15px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--surface-gold),
      var(--surface-lavender)
    );

  color:var(--gold-dark);
  font-family:"Cormorant Garamond",serif;
  font-size:30px;
}

.welcomeMessage h2{
  margin:0;

  color:var(--primary-dark);
  font-family:"Cormorant Garamond",serif;
  font-size:25px;
}

.welcomeMessage p{
  margin:8px 0 0;

  color:var(--text-soft);
  font-size:12px;
  line-height:1.65;
}

.messageRow{
  display:flex;
  margin:9px 0;
}

.messageRow.sent{
  justify-content:flex-end;
}

.messageRow.received{
  justify-content:flex-start;
}

.messageBubble{
  width:fit-content;
  max-width:min(76%,680px);

  padding:11px 14px;

  border-radius:17px;

  font-size:13px;
  line-height:1.55;

  overflow-wrap:anywhere;
  word-break:break-word;
}

.messageRow.sent .messageBubble{
  background:
    linear-gradient(
      135deg,
      var(--primary),
      #8b6594
    );

  color:#fff;

  border-bottom-right-radius:5px;

  box-shadow:
    0 8px 22px rgba(118,80,127,.18);
}

.messageRow.received .messageBubble{
  background:#fff;
  color:var(--text);

  border:1px solid var(--border);
  border-bottom-left-radius:5px;

  box-shadow:
    0 8px 22px rgba(86,55,95,.06);
}

.messageMeta{
  margin-top:5px;

  color:inherit;
  opacity:.7;

  font-size:8px;
  text-align:right;
}

.systemMessage{
  width:100%;

  margin:10px 0;

  text-align:center;
  color:var(--text-muted);

  font-size:10px;
}


/* =========================================================
   TYPING INDICATOR
========================================================= */

.typingIndicator{
  display:flex;
  align-items:center;
  gap:5px;

  min-height:34px;

  padding:0 18px;

  color:var(--text-muted);
  font-size:10px;
}

.typingDot{
  width:5px;
  height:5px;

  border-radius:50%;
  background:var(--primary-soft);

  animation:typingBounce 1.2s infinite ease-in-out;
}

.typingDot:nth-child(2){
  animation-delay:.15s;
}

.typingDot:nth-child(3){
  animation-delay:.3s;
}

#typingText{
  margin-left:5px;
}

@keyframes typingBounce{
  0%,
  70%,
  100%{
    transform:translateY(0);
    opacity:.45;
  }

  35%{
    transform:translateY(-4px);
    opacity:1;
  }
}


/* =========================================================
   MESSAGE COMPOSER
========================================================= */

.messageComposer{
  display:flex;
  align-items:flex-end;
  gap:10px;

  padding:12px 14px 14px;

  border-top:1px solid var(--border);
  background:rgba(255,253,249,.92);
}

.messageInputWrapper{
  flex:1;
  min-width:0;

  background:#fff;

  border:1px solid var(--border);
  border-radius:16px;

  overflow:hidden;

  transition:.2s ease;
}

.messageInputWrapper:focus-within{
  border-color:var(--primary-soft);

  box-shadow:
    0 0 0 4px rgba(118,80,127,.08);
}

.messageInputWrapper textarea{
  width:100%;
  min-height:48px;
  max-height:130px;

  display:block;

  resize:none;

  padding:13px 14px 6px;

  border:none;
  background:transparent;

  color:var(--text);
  font-size:13px;
  line-height:1.45;
}

.messageInputWrapper textarea::placeholder{
  color:#aaa0ab;
}

.messageInputFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:0 14px 9px;

  color:var(--text-muted);
  font-size:8px;
}

.sendMessageButton{
  min-width:86px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  padding:0 14px;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      var(--gold),
      #c5a159
    );

  color:#fff;

  font-size:12px;
  font-weight:800;

  box-shadow:
    0 10px 24px rgba(180,139,62,.22);
}

.sendMessageButton:hover:not(:disabled){
  transform:translateY(-1px);
}

.sendIcon{
  font-size:18px;
}


/* =========================================================
   INFORMATION PANEL
========================================================= */

.connectionStatus{
  display:flex;
  align-items:center;
  gap:10px;
}

.connectionStatusDot{
  width:10px;
  height:10px;

  flex-shrink:0;

  border-radius:50%;
  background:var(--success);

  box-shadow:
    0 0 0 5px rgba(109,146,115,.1);
}

.connectionStatus strong{
  display:block;

  color:var(--primary-dark);
  font-size:11px;
}

.connectionStatus small{
  display:block;
  margin-top:3px;

  color:var(--text-muted);
  font-size:9px;
}

.partnerProfileEmpty{
  color:var(--text-muted);
  font-size:10px;
  line-height:1.6;
}

.suggestedQuestions{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.suggestedQuestionButton{
  width:100%;

  padding:10px 11px;

  text-align:left;

  border-radius:11px;

  background:var(--surface-soft);
  color:var(--primary-dark);

  border:1px solid var(--border);

  font-size:10px;
  font-weight:700;
  line-height:1.4;
}

.suggestedQuestionButton:hover{
  background:var(--surface-lavender);
  border-color:#d9cae0;
}


/* =========================================================
   TOASTS
========================================================= */

.toastContainer{
  position:fixed;
  right:18px;
  bottom:18px;

  z-index:9999;

  display:flex;
  flex-direction:column;
  gap:9px;

  width:min(90vw,360px);
}

.toast{
  padding:13px 15px;

  background:#fff;

  border:1px solid var(--border);
  border-radius:14px;

  box-shadow:var(--shadow-medium);

  color:var(--text);
  font-size:12px;
  line-height:1.5;
}

.toast.error{
  background:#fff3f3;
  border-color:#efc7c9;
  color:#9d4c52;
}

.toast.success{
  background:#f2f8f2;
  border-color:#cddfcf;
  color:#55785c;
}


/* =========================================================
   MODAL
========================================================= */

.modalOverlay{
  position:fixed;
  inset:0;

  z-index:9998;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:rgba(77,61,80,.24);
  backdrop-filter:blur(12px);
}

.confirmationModal{
  width:min(100%,440px);

  padding:28px;

  text-align:center;

  background:#fff;

  border:1px solid var(--border);
  border-radius:25px;

  box-shadow:var(--shadow-large);
}

.modalSymbol{
  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 15px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--surface-gold),
      var(--surface-lavender)
    );

  color:var(--gold-dark);

  font-family:"Cormorant Garamond",serif;
  font-size:31px;
}

.confirmationModal h2{
  margin:0;

  font-family:"Cormorant Garamond",serif;
  font-size:29px;

  color:var(--primary-dark);
}

.confirmationModal p{
  margin:10px 0 20px;

  color:var(--text-soft);
  font-size:12px;
  line-height:1.65;
}

.modalActions{
  display:flex;
  justify-content:center;
  gap:9px;
}


/* =========================================================
   SCROLLBARS
========================================================= */

*{
  scrollbar-width:thin;
  scrollbar-color:#d8c7db transparent;
}

*::-webkit-scrollbar{
  width:7px;
  height:7px;
}

*::-webkit-scrollbar-track{
  background:transparent;
}

*::-webkit-scrollbar-thumb{
  background:#d8c7db;
  border-radius:var(--radius-pill);
}

*::-webkit-scrollbar-thumb:hover{
  background:#c6b1ca;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1180px){

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

  .entryIntroduction{
    padding:30px 4px 10px;
  }

  .entryIntroduction h1{
    max-width:850px;
  }

  .entryCard{
    max-width:760px;
    margin:0 auto;
  }

  .chatShell{
    grid-template-columns:250px minmax(0,1fr);
  }

  .informationPanel{
    display:none;
  }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media(max-width:860px){

  .entryScreen{
    padding:16px;
  }

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

  .entryIntroduction h1{
    font-size:58px;
  }

  .chatScreen{
    padding:8px;
  }

  .chatShell{
    height:calc(100vh - 16px);
    grid-template-columns:1fr;
  }

  .chatSidebar{
    display:none;
  }

  .chatMain{
    border-radius:20px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

  body{
    background:
      linear-gradient(
        180deg,
        #fffdf9,
        #f7f0f5
      );
  }

  .entryScreen{
    padding:12px;
  }

  .topNavigation{
    padding-bottom:15px;
  }

  .brandSymbol{
    width:43px;
    height:43px;
  }

  .brandText strong{
    font-size:24px;
  }

  .brandText small{
    display:none;
  }

  .onlineIndicator{
    min-height:38px;
    padding:0 12px;
    font-size:11px;
  }

  .entryIntroduction{
    padding:20px 2px 8px;
  }

  .entryIntroduction h1{
    margin-top:18px;
    font-size:47px;
    line-height:.95;
  }

  .heroDescription{
    font-size:14px;
    line-height:1.7;
  }

  .privacyNotice{
    margin-top:18px;
  }

  .entryCard{
    padding:19px;
    border-radius:23px;
  }

  .entryCardHeader h2{
    font-size:28px;
  }

  .zodiacSeal{
    width:52px;
    height:52px;
  }

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

  .formFieldFull{
    grid-column:auto;
  }

  .formSectionNote{
    margin-left:0;
  }

  .chatScreen{
    padding:0;
  }

  .chatShell{
    height:100dvh;
    gap:0;
  }

  .chatMain{
    border:none;
    border-radius:0;
    box-shadow:none;
  }

  .chatHeader{
    min-height:70px;
    padding:10px 11px;
  }

  .partnerAvatar{
    width:42px;
    height:42px;
  }

  .partnerNameRow h1{
    font-size:20px;
  }

  .partnerLabel{
    display:none;
  }

  .secondaryButton{
    display:none;
  }

  .nextPartnerButton{
    min-height:38px;
    padding:0 11px;
  }

  .matchingBanner{
    margin:8px 9px 0;
  }

  .astrologerIntroduction{
    margin:8px 9px 0;
    padding:11px;
  }

  .astrologerIntroSymbol{
    width:42px;
    height:42px;
  }

  .messagesArea{
    padding:12px 10px;
  }

  .messageBubble{
    max-width:86%;
    font-size:13px;
  }

  .messageComposer{
    padding:9px;
  }

  .messageInputFooter span:last-child{
    display:none;
  }

  .sendMessageButton{
    min-width:58px;
    width:58px;
    padding:0;
  }

  .sendMessageButton span:first-child{
    display:none;
  }

  .modalActions{
    flex-direction:column;
  }

  .modalActions button{
    width:100%;
  }

}

/* =========================================================
   MOBILE ENTRY FORM POPUP
========================================================= */

/* Hidden on desktop */
.mobileEntryLauncher,
.mobileEntryClose,
.mobileEntryOverlay{
  display:none;
}

@media(max-width:768px){

  body{
    padding-bottom:92px;
  }

  .entryScreen{
    min-height:100vh;
    padding:16px 16px 110px;
  }

  .entryShell{
    width:100%;
  }

  .topNavigation{
    padding-bottom:18px;
  }

  .entryLayout{
    display:block;
  }

  .entryIntroduction{
    padding:24px 2px 30px;
  }

  .entryIntroduction h1{
    margin-top:18px;
    font-size:clamp(46px,14vw,68px);
    line-height:.94;
  }

  .heroDescription{
    font-size:15px;
    line-height:1.7;
  }

  .featureGrid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:26px;
  }

  .privacyNotice{
    margin-top:18px;
  }

  /* Existing form becomes a bottom-sheet popup */
  .entryCard{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    z-index:10002;

    width:100%;
    max-width:none;
    max-height:90dvh;

    margin:0;
    padding:
      22px
      18px
      calc(22px + env(safe-area-inset-bottom));

    overflow-y:auto;
    overscroll-behavior:contain;

    border-radius:28px 28px 0 0;

    background:rgba(255,255,255,.98);

    box-shadow:
      0 -20px 70px rgba(53,43,56,.22);

    transform:translateY(105%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      transform .32s ease,
      opacity .25s ease,
      visibility .25s ease;
  }

  body.mobileEntryOpen{
    overflow:hidden;
  }

  body.mobileEntryOpen .entryCard{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .entryCardHeader{
    position:relative;
    padding-right:44px;
  }

  .entryCardHeader h2{
    font-size:29px;
  }

  .zodiacSeal{
    width:52px;
    height:52px;
  }

  .mobileEntryClose{
    position:absolute;
    top:-8px;
    right:-4px;

    z-index:2;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid var(--border);
    border-radius:50%;

    background:#fff;
    color:var(--primary-dark);

    font-size:27px;
    line-height:1;

    box-shadow:var(--shadow-small);
  }

  /* Dark overlay behind popup */
  .mobileEntryOverlay{
    position:fixed;
    inset:0;

    z-index:10001;

    display:block;

    background:rgba(38,27,42,.52);
    backdrop-filter:blur(5px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
      opacity .25s ease,
      visibility .25s ease;
  }

  body.mobileEntryOpen .mobileEntryOverlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* Floating bottom launch button */
  .mobileEntryLauncher{
    position:fixed;

    left:14px;
    right:14px;
    bottom:
      calc(14px + env(safe-area-inset-bottom));

    z-index:10000;

    min-height:62px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;

    padding:10px 16px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:20px;

    background:
      linear-gradient(
        135deg,
        var(--primary-dark),
        var(--primary),
        #96709f
      );

    color:#fff;

    box-shadow:
      0 18px 45px rgba(86,55,95,.38);

    font-size:14px;
    font-weight:800;
    line-height:1.35;

    transition:
      transform .2s ease,
      opacity .2s ease;
  }

  .mobileEntryLauncher:active{
    transform:scale(.98);
  }

  .mobileEntryLauncherIcon{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    font-family:"Cormorant Garamond",serif;
    font-size:25px;
  }

  .mobileEntryLauncherText{
    flex:1;
    text-align:left;
  }

  .mobileEntryLauncherArrow{
    flex-shrink:0;
    font-size:22px;
  }

  body.mobileEntryOpen .mobileEntryLauncher{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }

  /* Better mobile form layout */
  .formGridTwo{
    grid-template-columns:1fr;
  }

  .formFieldFull{
    grid-column:auto;
  }

  .formSection{
    padding:20px 0;
  }

  .formSectionNote{
    margin-left:0;
  }

  .formField input,
  .formField select{
    height:52px;
    font-size:16px;
  }

  .primaryActionButton{
    min-height:58px;
  }
}

@media(max-width:420px){

  .entryScreen{
    padding-left:12px;
    padding-right:12px;
  }

  .entryIntroduction h1{
    font-size:44px;
  }

  .mobileEntryLauncher{
    left:10px;
    right:10px;
  }

  .mobileEntryLauncherText{
    font-size:13px;
  }

  .entryCard{
    padding-left:15px;
    padding-right:15px;
  }
}