/* ========= Base ========= */
:root{
  --text:#2f3b49;
  --muted:#5b6b7e;

  /* Apple-like glass */
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.18);

  --cta:#8ea0b6;
  --cta-text:#ffffff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#ffffff;
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ========= Hero ========= */
.hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
}

/* moving background */
.bg{
  position:absolute;
  inset:-7%;
  background: url("assets/bg.png") center/cover no-repeat;
  transform: translate3d(0,0,0) scale(1.10);
  will-change: transform;
  filter: saturate(1.02) contrast(1.02);
}

/* fixed frame that sits above bg */
.frame{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding: 0 56px;
}

/* ========= Top bar (Apple-like) ========= */
.topbar{

  top: 0;
  z-index: 40;


  margin-right: 78px; 

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

  padding: 12px 0;
  border-radius: 12px;

  background: rgba(255,255,255,0);
  border: 1px solid rgba(255,255,255,0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}

/* becomes visible on scroll (script adds .scrolled to body) */
body.scrolled .topbar{
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(20, 35, 55, .10);
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  user-select:none;
  margin-right: auto;
}


.logo-img{
  height: 200px;   /* максимально близко к референсу */
  width: auto;
  display:block;
  opacity:.88;
  filter: brightness(0) saturate(100%) invert(24%) sepia(10%) saturate(450%) hue-rotate(175deg) brightness(92%) contrast(88%);
}


.nav{
  display:flex;
  align-items:center;
  gap: 64px;
  font-family: Montserrat, Inter, sans-serif;
  font-weight:400;
  font-size:18px;
  color:var(--muted);
  opacity:.9;
}
.nav a{
  color:inherit;
  text-decoration:none;
}
.nav a:hover{ opacity:.8; }

.burger{
  width:44px;
  height:44px;
  border: 1px solid rgba(110, 130, 155, .35);
  background: rgba(255,255,255,.18);
  border-radius: 10px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;

  cursor:pointer;
  opacity:.7;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.burger span{
  display:block;
  height:2px;
  width:20px;
  background:#6a7a8d;
  border-radius:2px;
}

/* ========= Glass panel ========= */
.glass{
  position: absolute;
  inset: 78px 78px 78px 78px;

  /* ultra-light like in ref */
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

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

  /* Apple-like depth */
  box-shadow:
    0 30px 70px rgba(30, 55, 85, .10),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* subtle top-left glow (like iOS cards) */
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 6px;
  background: radial-gradient(1200px 600px at 18% 20%,
    rgba(255,255,255,.25),
    rgba(255,255,255,0) 58%);
  pointer-events:none;
}

/* subtle vignette to keep text readable */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* keep content sharp */
.content{
  position:relative;
  z-index:2;
  padding: 140px 0 0 78px;
  max-width: 820px;
}

h1{
  margin:0 0 22px 0;
  font-family: Montserrat, Inter, sans-serif;
  font-weight:300;
  font-size:54px;
  line-height:1.2;
  letter-spacing:.2px;
  color:#2f3b49;
  opacity:.92;
}

.sub{
  margin:0 0 28px 0;
  font-size:18px;
  line-height:1.7;
  color:#5a6a7d;
  opacity:.98;
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 14px 26px;
  border-radius: 6px;
  text-decoration:none;
  font-family: Montserrat, Inter, sans-serif;
  font-weight:500;
  font-size:16px;
  color: var(--cta-text);
  background: rgba(142,160,182,.95);
  box-shadow: 0 10px 22px rgba(45, 70, 95, .18);
}
.cta:hover{ filter: brightness(0.98); }
.arrow{ font-size:18px; opacity:.95; transform: translateY(1px); }

/* ========= Robot ========= */
.robot-wrap{
  position:absolute;
  right: 210px;
  bottom: -70px;
  height: 92vh;
  max-height: 1080px;
  width:auto;
  z-index:1; /* behind text */
  user-select:none;
  pointer-events:none;

  filter:
    drop-shadow(0 22px 40px rgba(0,0,0,.10))
    drop-shadow(0 8px 18px rgba(60, 100, 140, .08));
  opacity:.985;

  display: grid;

  /* Smooth shift/turn animation (chat open) */
  transform: translate3d(0,0,0) rotateY(0deg);
  transform-style: preserve-3d;
  transition:
    transform 900ms cubic-bezier(.22,1,.36,1),
    right 900ms cubic-bezier(.22,1,.36,1);
}

/* On chat open: shift a bit right + slight turn to the right */
body.chat-active .robot-wrap{
  transform: translate3d(70px, 0, 0) rotateY(10deg);
}

/* ===== Reply mode button (text / voice) ===== */
.mode-btn{
  position:absolute;
  right: 86px;
  bottom: 290px;
  z-index: 60;

  display:flex;
  align-items:center;
  gap:10px;

  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.18);
  color: rgba(47,59,73,.92);
  cursor:pointer;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(20, 35, 55, .10);
}
.mode-btn:hover{ filter: brightness(0.98); }
.mode-btn:active{ transform: translateY(1px); }

.mode-ic{
  width:18px;
  height:18px;
  display:block;
  background: rgba(47,59,73,.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5 6 9H3v6h3l5 4V5Zm2.5 2.2v1.7a5 5 0 0 1 0 6.2v1.7a7 7 0 0 0 0-9.6ZM16 4.3v1.8a9 9 0 0 1 0 11.8v1.8a11 11 0 0 0 0-15.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5 6 9H3v6h3l5 4V5Zm2.5 2.2v1.7a5 5 0 0 1 0 6.2v1.7a7 7 0 0 0 0-9.6ZM16 4.3v1.8a9 9 0 0 1 0 11.8v1.8a11 11 0 0 0 0-15.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mode-txt{
  font-family: Montserrat, Inter, sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:.2px;
}

.mode-btn.is-text .mode-ic{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v2H13v14h-2V6H4V4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v2H13v14h-2V6H4V4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width: 900px){
  .mode-btn{ right: 20px; bottom: 260px; }
}

/* Robot crossfade turn */
.robot-img{
  grid-area: 1 / 1;
  height: 100%;
  width: auto;
  align-self: end;
  justify-self: end;
  transform-origin: 70% 55%;
  transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1), filter 900ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
}

.robot-side{ opacity: 1; transform: translateX(0) scale(1); filter: blur(0px); }
.robot-front{ opacity: 0; transform: translateX(240px) scale(.985); filter: blur(.6px); }

body.robot-facing .robot-side{ opacity: 0; transform: translateX(-18px) scale(.985); filter: blur(.6px); }
body.robot-facing .robot-front{ opacity: 1; transform: translateX(0) scale(1); filter: blur(0px); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .robot-img{ transition: none !important; }
}


/* ========= Responsiveness ========= */
@media (max-width: 1200px){
  .frame{ padding: 18px 26px; }
  .nav{ gap:22px; font-size:16px; }
  .content{ padding-left: 44px; padding-top: 120px; }
  h1{ font-size:46px; }
  .robot{ right: 240px; }
  .glass{ inset: 66px 34px 66px 34px; }
}
@media (max-width: 900px){
  .nav{ display:none; }
  .content{ padding: 90px 28px 0 28px; }
  .robot{ right: -40px; opacity:.92; height: 86vh; }
  h1{ font-size:40px; }
}
@media (max-width: 560px){
  .logo-img{ height: 36px; }
  h1{ font-size:32px; }
  .sub{ font-size:16px; }
  .robot{ height: 72vh; bottom:-40px; }
  .glass{ inset: 70px 16px 38px 16px; }
}

/* ========= Seamless transition to Chat ========= */

/* soften bg during chat */
body.chat-active .bg{
  filter: saturate(1.02) contrast(1.02) blur(2px);
  transform: translate3d(0,0,0) scale(1.10);
}

/* Keep glass as the shared container, animate its "scene" */
.hero-screen{
  position:relative;
  z-index:2;
  transition: opacity .55s ease, transform .55s ease;
}

.chat-screen{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.22,1);
  z-index:3;
}

/* when chat active */
body.chat-active .hero-screen{
  opacity:0;
  transform: translateY(-14px);
  pointer-events:none;
}

body.chat-active .chat-screen{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

/* robot slides away */
.robot{
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.22,1);
}
body.chat-active .robot{
  opacity:0;
  transform: translateY(28px);
}

/* topbar can stay, but slightly fade */
body.chat-active .topbar{
  opacity:.92;
}

/* ========= Chat UI (inside glass) ========= */
.chat-wrapper{
  width: min(860px, 92%);
  height: min(74vh, 760px);
  border-radius: 14px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 70px rgba(30, 55, 85, .12);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.chat-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(120,140,165,.22);
}

.chat-back{
  width:40px;
  height:40px;
  border-radius: 10px;
  border: 1px solid rgba(110, 130, 155, .35);
  background: rgba(255,255,255,.18);
  cursor:pointer;
  color:#516174;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.chat-back:hover{ filter: brightness(0.98); }

.chat-title{
  font-family: Montserrat, Inter, sans-serif;
  font-weight:500;
  color:#2f3b49;
  opacity:.92;
}

.chat-messages{
  flex:1;
  padding: 18px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.message{
  max-width: 72%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 10px 18px rgba(20, 35, 55, .06);
}

.message.ai{
  align-self:flex-start;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(120,140,165,.16);
  color:#2f3b49;
}

.message.user{
  align-self:flex-end;
  background: rgba(142,160,182,.95);
  color: #fff;
}

.typing{
  padding: 0 18px 10px 18px;
}
.typing span{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background: rgba(90, 110, 130, .55);
  margin-right:6px;
  animation: dot 1.1s infinite ease-in-out;
}
.typing span:nth-child(2){ animation-delay: .12s; }
.typing span:nth-child(3){ animation-delay: .24s; }

@keyframes dot{
  0%, 80%, 100% { transform: translateY(0); opacity:.55; }
  40% { transform: translateY(-5px); opacity:1; }
}

.chat-input{
  display:flex;
  gap: 10px;
  padding: 14px 14px;
  border-top: 1px solid rgba(120,140,165,.22);
  background: rgba(255,255,255,.22);
}

.chat-input input{
  flex:1;
  border-radius: 12px;
  border: 1px solid rgba(120,140,165,.22);
  background: rgba(255,255,255,.55);
  padding: 12px 12px;
  font-size: 15px;
  outline:none;
}

.chat-input button{
  border-radius: 12px;
  border: none;
  background: rgba(142,160,182,.95);
  color:#fff;
  padding: 0 16px;
  font-family: Montserrat, Inter, sans-serif;
  font-weight:500;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(45, 70, 95, .18);
}
.chat-input button:hover{ filter: brightness(0.98); }

@media (max-width: 560px){
  .chat-wrapper{ height: 72vh; }
  .message{ max-width: 86%; }
}

/* ===== Patch v3: reference-like chat + fix click ===== */
.glass{ z-index: 10; }
body.chat-active .glass{ z-index: 70; } /* above topbar */
body.chat-active .topbar{ pointer-events:none; opacity:.75; }

/* place chat like a floating widget */
.chat-screen{
  align-items:flex-end;
  justify-content:flex-start;
  padding: 48px;
  background: transparent;
}

.chat-wrapper{
  width: min(760px, 92%);
  height: auto;
  min-height: 380px;
  border-radius: 18px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 70px rgba(30,55,85,.14), inset 0 1px 0 rgba(255,255,255,.30);
}

.chat-header{
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.20);
}

.chat-head-left{ display:flex; align-items:center; gap:12px; }
.chat-avatar{
  width:34px; height:34px; border-radius:12px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(180,200,230,.35));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 18px rgba(20,35,55,.10);
}
.chat-brand{
  font-family: Montserrat, Inter, sans-serif;
  font-weight:500;
  color:#2f3b49;
  opacity:.92;
}

.chat-head-right{ display:flex; align-items:center; gap:10px; }
.chat-dots{ display:flex; gap:6px; padding-right:6px; opacity:.8; }
.chat-dots span{
  width:5px; height:5px; border-radius:50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 6px rgba(20,35,55,.10);
}

.chat-back{ z-index: 5; } /* ensure clickable */

.chat-messages{
  padding: 16px;
  gap: 12px;
}

.message.ai{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.35);
}

.quick-replies{
  display:flex;
  gap: 12px;
  padding: 0 16px 14px 16px;
  flex-wrap:wrap;
}

.chip{
  border: 1px solid rgba(255,255,255,.30);
  background: rgba(255,255,255,.22);
  color: rgba(47,59,73,.88);
  padding: 10px 12px;
  border-radius: 999px;
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 400;
  cursor:pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chip:hover{ filter: brightness(0.98); }

.chat-input{
  padding: 12px 12px;
  gap: 10px;
  background: rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.20);
}

.icon-btn, .mic-btn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.20);
  cursor:pointer;
  color:#516174;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.icon-btn:hover, .mic-btn:hover{ filter: brightness(0.98); }

.input-wrap{ flex:1; }
.chat-input input{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.50);
  padding: 12px 14px;
}

.send-btn{
  width:56px; height:44px;
  border-radius: 14px;
  border: none;
  background: rgba(142,160,182,.95);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  box-shadow: 0 10px 22px rgba(45, 70, 95, .18);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.send-btn:hover{ filter: brightness(0.98); }

/* Send icon (paper plane) */
.send-btn::before{
  content:"";
  width:18px;
  height:18px;
  background:#fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2L11 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z' stroke='%23000' stroke-width='2' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2L11 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M22 2L15 22L11 13L2 9L22 2Z' stroke='%23000' stroke-width='2' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Reply mode switch only visible when chat is open */
#replyModeWrap{ opacity:0; pointer-events:none; transform: translateY(6px); transition: .25s ease; }
body.chat-active #replyModeWrap{ opacity:1; pointer-events:auto; transform:none; }

@media (max-width: 560px){
  .chat-screen{ padding: 18px; justify-content:center; }
  .quick-replies{ gap:10px; }
}

/* ===== Patch v4: closer to reference chat + mic button ===== */

/* In chat mode we DO NOT hide the robot; keep hero look */
body.chat-active .hero-screen{ opacity:0; transform: translateY(-14px); pointer-events:none; }
body.chat-active .robot{ opacity:1; transform:none; } /* keep robot visible */

/* Chat as a floating widget in bottom-left inside glass */
body.chat-active .topbar{ pointer-events:auto; opacity:1; } /* keep topbar usable */

.chat-screen{
  align-items:flex-end;
  justify-content:flex-start;
  padding: 56px;
  background: transparent;
}

.chat-wrapper{
  width: min(860px, 92%);
  border-radius: 18px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 30px 80px rgba(30,55,85,.16), inset 0 1px 0 rgba(255,255,255,.28);
}

/* Header like reference */
.chat-header{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.chat-brand{
  font-weight:600;
  letter-spacing:.2px;
}

/* Big message bubble */
.chat-messages{
  padding: 14px 16px 10px 16px;
}
.message{
  max-width: 100%;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 14px 28px rgba(20,35,55,.08);
  white-space: pre-line;
}

/* Chips like reference */
.quick-replies{
  padding: 0 16px 12px 16px;
}
.chip{
  border-radius: 12px;
  padding: 10px 14px;
}

/* Input row like reference: attachment left, input center, mic round right */
.chat-input{
  padding: 12px 14px;
  gap: 12px;
}

.icon-btn{
  width:44px; height:44px;
  border-radius: 14px;
  font-size: 20px;
}

.input-wrap{
  position:relative;
}
.chat-input input{
  height:44px;
  border-radius: 14px;
  padding: 0 14px;
}

/* Mic as circular blue button */
.mic-btn{
  width:48px; height:48px;
  border-radius: 999px;
  border: none;
  background: rgba(66, 132, 255, .95);
  box-shadow: 0 12px 24px rgba(45, 70, 95, .22);
  color:#fff;
  font-size: 18px;
}
.mic-btn::before{
  content:"";
  width:18px; height:18px;
  display:block;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  background:#fff;
}
.mic-btn.listening{
  background: rgba(30, 105, 255, .98);
  box-shadow: 0 0 0 6px rgba(66,132,255,.22), 0 16px 28px rgba(45,70,95,.24);
}

/* Hide send button (Enter still works) */
/* Speech hint */
.speech-hint{
  padding: 0 16px 10px 16px;
  font-size: 13px;
  color: rgba(47,59,73,.68);
}

@media (max-width: 560px){
  .chat-screen{ padding: 18px; }
  .chat-wrapper{ width: 100%; }
}

/* ===== Patch v5: keep big logo visible in chat mode ===== */

/* Do NOT hide entire hero-screen */
body.chat-active .hero-screen{
  opacity:1;
  transform:none;
  pointer-events:none; /* disable interactions only */
}

/* Hide only main content text block inside glass */
body.chat-active .hero-screen .content{
  opacity:0;
  transform: translateY(-20px);
  transition: opacity .45s ease, transform .45s ease;
}

/* Keep logo fully visible */
body.chat-active .brand{
  opacity:1 !important;
}

/* Ensure robot stays visible */
body.chat-active .robot{
  opacity:1;
  transform:none;
}

/* ===== Patch v6: keep top logo visible (do not cover topbar) ===== */
body.chat-active .glass{ z-index: 10 !important; }  /* was raised earlier -> covered logo */
.topbar{ position: relative; z-index: 80; }         /* ensure always above glass/chat */
body.chat-active .topbar{ pointer-events:auto !important; opacity:1 !important; }
body.chat-active .brand{ opacity:1 !important; filter: none; } /* keep crisp if any filter applied */

/* ===== Patch v7: robot "faces user" (3D tilt) ===== */
.hero{ perspective: 1200px; }
.robot{
  transform-origin: 50% 45%;
  transform: translateY(0) rotateY(var(--robot-ry, 0deg)) rotateX(var(--robot-rx, 0deg));
  will-change: transform;
}
body.chat-active .robot{
  --robot-ry: 0deg;
  --robot-rx: 0deg;
  transition: transform .8s cubic-bezier(.22,.8,.22,1), opacity .55s ease;
}

/* Optional: a tiny "glow" to sell the turn */
.robot{
  filter:
    drop-shadow(0 22px 40px rgba(0,0,0,.10))
    drop-shadow(0 8px 18px rgba(60, 100, 140, .08));
}

/* ===== v10 fixes: robot facing + chat height ===== */

/* 3D perspective for robot */
#hero{ perspective: 1200px; transform-style: preserve-3d; }
.robot{
  transform-origin: 50% 60%;
  transform: translateZ(0) rotateX(var(--robot-rx, 0deg)) rotateY(var(--robot-ry, 0deg));
  will-change: transform;
}

/* Keep robot visible in chat, just rotate to face */
body.chat-active .robot{
  opacity: 1 !important;
  transform: translateZ(0) rotateX(var(--robot-rx, 0deg)) rotateY(var(--robot-ry, 0deg)) !important;
}

/* Chat should not climb too high: fixed height with scroll inside */
.chat-wrapper{
  height: min(70vh, 640px) !important;
  max-height: min(70vh, 640px) !important;
}
.chat-messages{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: none !important;
}

/* Keep widget-like placement but not too high */
.chat-screen{
  padding: 40px !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
}


/* Typewriter effect */
.tw-caret{
  display:inline-block;
  margin-left:2px;
  opacity:1;
  animation: twBlink 0.9s steps(1,end) infinite;
}
@keyframes twBlink{
  50%{opacity:0;}
}

.chat-suggest, .quick-replies{display:none !important;}


/* Chat input buttons (Edge-safe) */
.chat-input .send-btn{display:flex;}
.chat-input .mic-btn{display:flex;}

.glass, .chat-panel, .hero-card, .cases-card, .menu-panel{ -webkit-backdrop-filter: blur(18px); }

/* ===== V6 overrides (cache-busted via ?v=6) ===== */
/* Robot a bit more to the right */
.robot-wrap{ right: 90px !important; }
body.chat-active .robot-wrap{ transform: translate3d(120px, 0, 0) rotateY(12deg) !important; }

/* Bigger reply mode button, vertically centered near robot */
.mode-btn{
  top: 55% !important;
  bottom: auto !important;
  right: 28px !important;
  transform: translateY(-50%) !important;
  padding: 14px 26px !important;
  border-radius: 16px !important;
}
.mode-txt{ font-size: 16px !important; }
.mode-ic{ width: 20px !important; height: 20px !important; }

@media (max-width: 900px){
  .robot-wrap{ right: 20px !important; }
  .mode-btn{ right: 16px !important; top: auto !important; bottom: 260px !important; transform: none !important; }
}



/* ========= Reply mode (iOS switch) ========= */
.reply-mode{
  position:absolute;
  right: 60px;
  top: 55%;
  transform: translateY(-50%);
  z-index: 60;

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

  padding: 12px 16px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.16);
  color: rgba(47,59,73,.92);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(20, 35, 55, .10);
}

.reply-mode__label{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2px;
  opacity: .72;
  user-select:none;
}

.reply-mode.is-text .reply-mode__label--text{ opacity: 1; }
.reply-mode.is-voice .reply-mode__label--voice{ opacity: 1; }

.ios-switch{
  position: relative;
  display:inline-block;
  width: 54px;
  height: 30px;
  flex: 0 0 auto;
}

.ios-switch input{
  opacity:0;
  width:0;
  height:0;
}

.ios-switch__slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

.ios-switch__slider:before{
  content:"";
  position:absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.92);
  border-radius: 50%;
  transition: transform .25s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* ON */
.ios-switch input:checked + .ios-switch__slider{
  background: rgba(142,160,182,.55);
  border-color: rgba(142,160,182,.75);
}
.ios-switch input:checked + .ios-switch__slider:before{
  transform: translate(24px, -50%);
}

/* Focus */
.ios-switch input:focus + .ios-switch__slider{
  box-shadow: 0 0 0 4px rgba(142,160,182,.20), inset 0 1px 2px rgba(0,0,0,.06);
}

/* Mobile positioning tweak */
@media (max-width: 900px){
  .reply-mode{
    right: 18px;
    top: 62%;
  }
}