:root{
  --navy:#16305c;
  --navy-dark:#0e2647;
  --navy-mid:#1c3a6e;
  --white:#ffffff;
  --muted:#5c6b85;
  --border:#e2e6ee;
  --radius:14px;
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--white);
  color:var(--navy);
  position:fixed;
  inset:0;
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}

/* ---------- layout screens ---------- */
.screen{
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 20px;
  position:relative;
  z-index:5;
}
.topbar-light{color:var(--navy);}
.icon-btn{
  background:none;
  border:none;
  font-size:22px;
  color:inherit;
  padding:6px;
  line-height:0;
}
.lang-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}
.lang-toggle span{opacity:.5;}
.lang-opt{
  background:none;
  border:none;
  font-size:13px;
  color:inherit;
  opacity:.5;
  padding:2px;
}
.lang-opt.active{opacity:1;font-weight:500;}

/* ---------- home screen ---------- */
.screen-home{
  position:relative;
  background:var(--white);
  color:var(--navy);
  justify-content:space-between;
  padding-bottom:12px;
}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-bg .wave{position:absolute;bottom:0;left:0;width:100%;height:100px;opacity:.06;}
.hero-bg .wave path{fill:var(--navy);}

.ad-strip{
  position:relative;
  z-index:5;
  width:100%;
  max-width:520px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 20px;
}
.ad-strip-top{border-bottom:.5px solid var(--border);}
.ad-strip-bottom{border-top:.5px solid var(--border);justify-content:center;}
.ad-label{font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;}
.ad-slot{
  display:flex;
  gap:8px;
  flex:1;
  justify-content:flex-end;
  min-height:26px;
}
.ad-strip-bottom .ad-slot{flex:none;justify-content:center;}
.ad-slot:empty::after{
  content:"";
  display:block;
  width:60px;
  height:26px;
  background:#f0f2f6;
  border-radius:6px;
}
.ad-slot img{height:26px;width:auto;border-radius:4px;object-fit:contain;background:#fff;padding:2px 6px;}
.ad-item{display:flex;align-items:center;}
.ad-slot span{
  font-size:12px;
  font-weight:700;
  color:var(--navy);
  background:#f0f2f6;
  padding:5px 12px;
  border-radius:14px;
  white-space:nowrap;
}

.hero-center{
  position:relative;
  z-index:5;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:12px 20px;
  min-height:0;
}
.brand-mark{text-align:center;}
.brand-logo{
  width:64px;height:58px;
  display:block;
  margin:0 auto 8px;
}
.brand-logo.small{width:28px;height:25px;margin:0;}
.brand-text{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  margin:0;
  color:var(--navy);
}
.brand-mark-inline{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--navy);}

.search-pill{
  width:100%;max-width:520px;
  display:flex;align-items:center;gap:10px;
  background:#f3f5f9;
  border:.5px solid var(--border);
  border-radius:28px;
  padding:13px 20px;
}
.search-pill i{font-size:18px;color:var(--navy);}
.search-pill input{
  border:none;outline:none;flex:1;
  font-size:15px;background:transparent;color:var(--navy);
}
.search-pill input::placeholder{color:#8a93a8;}

.chips{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:520px;
}
.chip{
  font-size:13px;
  padding:7px 16px;
  border-radius:18px;
  background:#fff;
  border:.5px solid var(--border);
  color:var(--navy);
}
.chip:hover{background:#f3f5f9;}

.services-strip{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  max-width:520px;
}
.services-link{
  display:flex;align-items:center;gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  background:none;
  border:none;
  padding:4px 8px;
}
.services-link i{font-size:15px;color:var(--navy);}
.services-link:hover{opacity:.7;}

/* ---------- results / chat screen ---------- */
.screen-results{background:var(--white);}
.chat-thread{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 20px 20px;
  max-width:560px;
  width:100%;
  margin:0 auto;
  overflow-y:auto;
}
.msg{
  max-width:82%;
  font-size:14px;
  line-height:1.6;
  padding:11px 15px;
  border-radius:16px;
}
.msg-user{
  align-self:flex-end;
  background:var(--navy);
  color:#fff;
  border-bottom-right-radius:3px;
}
.msg-bot{
  align-self:flex-start;
  background:#f3f5f9;
  color:var(--navy);
  border-bottom-left-radius:3px;
}
.boat-list{display:flex;flex-direction:column;gap:8px;}
.boat-card{
  display:flex;align-items:center;gap:12px;
  background:#f3f5f9;
  border:.5px solid var(--border);
  border-radius:12px;
  padding:11px 13px;
}
.boat-icon{
  width:42px;height:42px;border-radius:8px;
  background:#e6f1fb;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:20px;color:var(--navy);
}
.boat-info p{margin:0;font-size:13px;color:var(--navy);}
.boat-info .boat-name{font-weight:500;}
.boat-info .boat-meta{color:var(--muted);font-size:12px;margin-top:2px;}

.contact-fields{display:flex;flex-direction:column;gap:8px;margin-top:4px;max-width:82%;}
.contact-fields input{
  background:#f3f5f9;
  border:.5px solid var(--border);
  border-radius:10px;
  padding:11px 15px;
  font-size:14px;
  outline:none;
  color:var(--navy);
}
.contact-fields input:focus{border-color:var(--navy);}
.contact-fields input::placeholder{color:#9aa3b5;}

.search-pill-light{
  background:#f3f5f9;
  margin:0 20px 20px;
  width:auto;
  max-width:none;
}
.search-pill-light input{color:var(--navy);}
.icon-btn-inline{background:none;border:none;font-size:18px;color:var(--navy);line-height:0;padding:4px;}

.btn-primary{
  width:100%;
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:24px;
  padding:13px;
  font-size:14px;
  font-weight:500;
}
.btn-primary:hover{background:var(--navy-mid);}

/* ---------- success screen ---------- */
.screen-success{
  align-items:center;justify-content:center;
  padding:24px;
  background:var(--white);
}
.success-box{max-width:360px;text-align:center;}
.success-icon{
  width:56px;height:56px;border-radius:50%;
  background:#e6f1fb;color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;font-size:26px;
}
.success-title{font-size:18px;font-weight:500;margin:0 0 10px;}
.success-text{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 24px;}

/* ---------- hamburger drawer ---------- */
.drawer-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease;
  z-index:20;
}
.drawer-overlay.open{opacity:1;visibility:visible;}
.drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:300px;max-width:85vw;
  background:var(--navy);
  color:#fff;
  padding:24px 22px;
  overflow-y:auto;
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:21;
  display:flex;
  flex-direction:column;
}
.drawer.open{transform:translateX(0);}
.drawer-close{background:none;border:none;color:#fff;font-size:18px;margin-bottom:24px;align-self:flex-start;padding:0;}
.drawer-section{margin-bottom:20px;}
.drawer-heading{
  font-size:12px;font-weight:500;letter-spacing:.5px;
  text-transform:uppercase;margin:0 0 6px;color:#fff;
}
.drawer-text{font-size:12px;line-height:1.7;color:rgba(255,255,255,.65);margin:0;}
.drawer-links{
  display:flex;flex-direction:column;gap:2px;
  border-top:.5px solid rgba(255,255,255,.15);
  padding-top:14px;margin-top:6px;
}
.drawer-links a{
  display:flex;align-items:center;gap:10px;
  padding:10px 4px;
  color:#fff;text-decoration:none;font-size:13px;
}
.drawer-links a i{font-size:16px;}
.drawer-footer{
  margin-top:auto;padding-top:16px;
  border-top:.5px solid rgba(255,255,255,.15);
}
.drawer-footer p{font-size:11px;color:rgba(255,255,255,.6);margin:0 0 4px;}

/* ---------- responsive ---------- */
@media (max-width:480px){
  .brand-text{font-size:10px;}
  .search-pill{padding:11px 16px;}
}