/* =========================================================
   BizTri AI – Global Styles (v1)
   Dark, responsive, package + booking friendly
   ========================================================= */

/* -------- Root + reset -------- */
:root{
  --bg: #0b1120;           /* page background */
  --card: #0f172a;         /* card background */
  --text: #e6edf5;         /* primary text */
  --muted: #9aa4b2;        /* secondary text */
  --line: #ffffff22;       /* borders */
  --line-soft: #ffffff14;
  --brand: #3b82f6;        /* blue */
  --brand-2: #10b981;      /* green */
  --danger: #ef4444;
  --warning: #f59e0b;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

/* Smooth anchor scroll */
html{scroll-behavior:smooth}

/* Generic utility */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.section{margin:36px 0}
.lead{color:#cfe0ff;opacity:.95}

/* Headings scale nicely */
h1{font-size: clamp(28px, 4.2vw, 56px); line-height:1.1; margin:8px 0 12px}
h2{font-size: clamp(22px, 3vw, 36px); line-height:1.2; margin:0 0 8px}
h3{font-size: clamp(18px, 2.2vw, 22px); margin:0 0 6px}

a{color:#9ec5ff;text-decoration:none}
a:hover{text-decoration:underline}

/* -------- Buttons -------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--text);
  border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;cursor:pointer;transition:filter .15s, background .15s, border-color .15s;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{background:#111a2e}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--line);color:#dbe9ff}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* -------- Nav -------- */
nav{position:sticky;top:0;z-index:50;background:rgba(11,17,32,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.logo{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
.logo img{display:block}
.logo span{font-weight:800}
.nav-links{display:flex;align-items:center;gap:10px}

/* Mobile nav friendliness: shrink + horizontal scroll if crowded */
@media (max-width:880px){
  .nav-inner{height:auto;padding:8px 0}
  .logo span{font-size:16px}
  .nav-links{
    gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:6px 0 10px; margin:0 -16px; padding-inline:16px;
    scroll-snap-type:x proximity;
  }
  .nav-links .btn{padding:8px 10px;font-size:14px;border-radius:10px;scroll-snap-align:start}
}

/* -------- Cards, grids, banners -------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;padding:16px;
  box-shadow:0 0 0 1px transparent;
}
.card.glow{
  background:
    radial-gradient(600px 220px at 90% 40%, rgba(59,130,246,.2), transparent),
    radial-gradient(600px 200px at 20% 30%, rgba(16,185,129,.25), transparent),
    var(--card);
}

.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){ .grid-2{grid-template-columns:1fr} }

.banner{
  background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(16,185,129,.18));
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:#dbe7ff
}
.kicker{display:flex;align-items:center;gap:8px;color:#b8c6dd}

/* -------- Packages (plans) -------- */
.plans-row{
  display:grid;gap:16px;
  grid-template-columns:repeat(4, minmax(260px, 1fr));
}
@media (max-width:1100px){ .plans-row{grid-template-columns:repeat(3, minmax(240px,1fr))} }
@media (max-width:860px) { .plans-row{grid-template-columns:repeat(2, minmax(220px,1fr))} }
@media (max-width:580px) { .plans-row{grid-template-columns:1fr} }

.plan-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.plan-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.35);border-color:#2b3752}

.plan-card header{margin-bottom:8px}
.plan-card .tagline{color:#c9d7f1}
.plan-card .subhead{margin-top:10px;color:#c9d7f1;font-weight:700}
.plan-card .bullets{margin:8px 0 0 18px}
.plan-card .bullets li{margin:4px 0}
.plan-card .fineprint{margin-top:10px;color:var(--muted);font-size:12px}
.plan-card .actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

.price-box{margin:6px 0 4px}
.price-box .now{font-weight:800;font-size:28px}
.price-box .was{color:var(--muted);font-size:12px}

.sale-badge{
  display:inline-block;border-radius:999px;padding:6px 10px;font-size:12px;color:#fff;
  background:linear-gradient(90deg,var(--brand), var(--brand-2));
}

/* Optional top-right "Most Popular" pill (if you use .ribbon-top in HTML) */
.ribbon-top{
  position:absolute;top:-10px;right:16px;z-index:2;
  background:linear-gradient(90deg,var(--danger),var(--warning));
  color:#fff;border-radius:12px;padding:6px 10px;font-weight:700;font-size:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* -------- Info page cards (hover glow/expand handled by page) -------- */
.info-card{
  position:relative;overflow:hidden;min-height:210px;border:1px solid var(--line);
  background:var(--card);border-radius:18px;padding:18px;transition:transform .25s,box-shadow .25s,border-color .25s
}
.info-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(17,24,39,.45),0 0 0 3px rgba(59,130,246,.20) inset}
.info-card .small{opacity:.8;font-size:.9em}
.info-card .plan{margin-top:6px;color:#9aa4b2;font-size:12px}

/* -------- "Works with" chips -------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:6px 10px;border-radius:999px;background:#0f172a;border:1px solid var(--line);color:#c9d7f1;font-size:12px
}

/* -------- Forms (global) -------- */
.input,.textarea{
  padding:12px 14px;background:transparent;border:1px solid var(--line);border-radius:12px;color:var(--text);
  width:100%;
}
.input::placeholder,.textarea::placeholder{color:#96a3b6}
.textarea{min-height:120px}

/* Rows for form layouts (book page uses these) */
.row{display:grid;gap:10px}
@media (min-width:680px){ .row.row-2{grid-template-columns:1fr 1fr} }

/* Checkbox lines (Terms/Privacy + "I don't have a website") */
.agree{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:680px;line-height:1.35;color:#c9d7f1;font-size:14px
}
.agree input{flex:0 0 auto;margin:0;transform:translateY(1px)}
.agree a{color:#9ec5ff}

label.muted{display:flex;gap:8px;align-items:center;color:var(--muted)}
label.muted input[type="checkbox"]{margin:0;transform:translateY(1px)}

/* Calendar iframe (book page) */
.cal-wrap iframe{width:100%;min-height:680px;border:1px solid var(--line-soft);border-radius:16px}

/* Booking recommendation mini plan (in case it's used globally) */
.mini-plan{
  border:1px solid var(--line);background:#0b1326;border-radius:14px;padding:14px
}
.mini-plan .head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.mini-plan .title{font-weight:800;font-size:18px;letter-spacing:.2px}
.mini-plan .badge{
  padding:4px 8px;font-size:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--danger),var(--warning));color:#fff
}
.mini-plan .price{font-size:18px;font-weight:800;margin:2px 0}
.mini-plan .was{font-size:12px;color:var(--muted)}
.mini-plan ul{margin:8px 0 0 18px}
.mini-plan li{margin:4px 0}

/* -------- Footer -------- */
.footer{border-top:1px solid var(--line-soft);margin-top:36px}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px 0;color:#cfe0ff
}
.footer-center a{margin:0 6px}
.social .ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--line);border-radius:999px;margin-right:8px;
  color:#cfe0ff;transition:background .15s,border-color .15s,transform .15s
}
.social .ico:hover{background:#111a2e;border-color:#2a3a61;transform:translateY(-1px)}

/* -------- Chat launcher (if you show it via app.js) -------- */
.chat-launcher{
  position:fixed;right:18px;bottom:18px;z-index:60;
  background:var(--brand);color:#fff;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;box-shadow:0 10px 24px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
}
.chat-launcher .bubble{width:18px;height:18px;border-radius:50%;background:#ffffff;opacity:.26}
.chat-launcher:hover{filter:brightness(1.05)}

/* -------- Responsive polish -------- */
@media (max-width:640px){
  .btn{padding:9px 12px}
  .price-box .now{font-size:24px}
  .footer-inner{justify-content:center;text-align:center}
}

/* ----- HERO LAYOUT (desktop side-by-side, mobile stacked) ----- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr);
  gap:18px;
  align-items:stretch;
}
.hero > .card{height:100%}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero > div:first-child{order:1}
  .hero > .card{order:2; min-height:220px}
}

/* ----- CHAT PANEL: sane sizes on desktop & mobile ----- */
.chat-panel{
  position:fixed; right:18px; bottom:18px; z-index:70;
  background:#0d1428; border:1px solid var(--line); border-radius:16px;
  width:min(420px, calc(100vw - 24px));
  height:min(560px, calc(100vh - 150px));
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  overflow:hidden; display:none; flex-direction:column;
}
.chat-panel.open{display:flex}

.chat-panel header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--line);
  font-weight:700; color:#dbe9ff
}
.chat-panel .chat-body{flex:1; background:#0b1120}
.chat-panel .chat-close{
  all:unset; cursor:pointer; padding:4px 8px; border-radius:8px;
  color:#cfe0ff; border:1px solid var(--line)
}
.chat-panel .chat-close:hover{background:#111a2e}

/* -------- Chat Messages Styles -------- */
.chat-messages {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.message {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.message.user {
  background: var(--brand);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  margin-left: auto;
}

.message.bot {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}

/* -------- Chat Input Area -------- */
.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--card);
}

.chat-input input {
  flex: 1;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.chat-input input:focus {
  border-color: var(--brand);
}

.chat-input input::placeholder {
  color: var(--muted);
}

.chat-input button {
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: filter 0.2s;
  white-space: nowrap;
}

.chat-input button:hover {
  filter: brightness(1.1);
}

.chat-input button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

/* -------- Typing Indicator -------- */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 14px;
}

.typing-indicator .dot {
  width: 6px;
  height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: typingDot 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* -------- Mobile Chat Adjustments -------- */
@media (max-width:640px){
  .chat-launcher{right:12px; bottom:12px}
  .chat-panel{right:12px; bottom:12px; width:calc(100vw - 24px); height:70vh}
  
  .chat-messages {
    padding: 12px;
    gap: 10px;
  }
  
  .message {
    max-width: 90%;
    padding: 9px 12px;
    font-size: 13px;
  }
  
  .chat-input {
    padding: 10px;
  }
  
  .chat-input input {
    font-size: 13px;
    padding: 9px 10px;
  }
  
  .chat-input button {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* -------- Scrollbar Styling for Chat -------- */
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* -------- Misc helpers -------- */
.small{font-size:.9em;color:#cfe0ff}
.dot{opacity:.6}

/* Hide the floating chat launcher when panel is open (any screen) */
.chat-open .chat-launcher{ display:none !important; }

/* On phones, don't show the floating bubble at all */
@media (max-width: 640px){
  .chat-launcher{ display:none !important; }
}
.chat-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 400px; /* or whatever fits your layout */
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
