:root{
--blue:#0a1a3c;
--gold:#d4af37;
--ink:#e8edf7;
--white:#ffffff;
--glassA:rgba(255,255,255,.06);
--glassB:rgba(255,255,255,.02);
--goldBorder:rgba(212,175,55,.25);
}

/* Reset / Base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:var(--blue);
color:var(--white);
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
  scroll-behavior: smooth;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ================== NAVBAR (desktop) ================== */
.site-header{
position:sticky; top:0; z-index:40;
background:rgba(0,0,0,.55);
backdrop-filter:blur(6px);
}
.nav{
max-width:1100px; margin:0 auto; padding:14px 20px;
display:flex; align-items:center; gap:22px;
}
.brand{ display:flex; align-items:center }
.logo{ height:50px; width:auto }

.primary-nav{
margin-left:auto; display:flex; gap:18px; flex-wrap:wrap;
}
.primary-nav a{
color:var(--gold); text-decoration:none; font-weight:600; transition:color .2s;
}
.primary-nav a:hover{ color:var(--white) }
.primary-nav .active{ border-bottom:2px solid var(--gold) }

/* ================== SIDEBAR (mobile drawer – JS-based) ================== */
.hamburger{ display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer }
.hamburger span{ display:block; width:26px; height:3px; background:var(--gold); margin:5px 0; transition:transform .25s, opacity .2s }
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.hamburger.active span:nth-child(2){ opacity:0 }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* (Keeping this in case you use the JS drawer elsewhere) */
.sidebar{
position:fixed; top:0; right:0; bottom:0;
width:min(320px,86vw);
background:var(--blue); color:var(--white);
border-left:1px solid var(--goldBorder);
transform:translateX(100%);
transition:transform .28s ease-in-out;
z-index:1000;
display:flex; flex-direction:column; padding:16px;
}
.sidebar.open{ transform:translateX(0) }
.sidebar__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.sidebar .logo{ height:34px }
.sidebar .close{ background:none; border:0; color:var(--gold); font-size:28px; line-height:1; cursor:pointer }
.sidebar__nav{ display:flex; flex-direction:column; gap:10px; margin-top:10px }
.sidebar__nav a{
color:var(--gold); text-decoration:none; font-weight:600;
padding:10px 8px; border-radius:10px; display:block;
}
.sidebar__nav a:hover{ background:rgba(212,175,55,.12) }

/* Dim overlay for JS drawer (class-based) */
.overlay{
position:fixed; inset:0; background:rgba(0,0,0,.5);
z-index:900; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.overlay.show{ opacity:1; pointer-events:auto }

/* Mobile switch */
@media (max-width:900px){
.primary-nav{ display:none }
.hamburger{ display:block }
}

/* ================== Layout & Typography ================== */
.container{ width:min(1100px,92%); margin-inline:auto; padding:32px 0 60px }
h1{ color:var(--gold); font-size:clamp(28px,3vw,40px); margin-bottom:20px; text-align:center }
h2{ color:var(--gold); font-size:20px; text-align: center;}
p{ text-align: center;}
.sub{ text-align:center; opacity:.9; margin-bottom:28px }

/* ================== Cards (Services, About, Reviews, etc.) ================== */
.cards{
display:grid; gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card{
  display: flex;
  text-align: center;
background:linear-gradient(180deg, var(--glassA), var(--glassB));
border:1px solid var(--goldBorder);
border-radius:16px; padding:18px;
box-shadow:0 10px 20px rgba(0,0,0,.25);
transition:transform .15s, box-shadow .15s, border-color .2s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 28px rgba(0,0,0,.35); border-color:rgba(212,175,55,.5) }
 .card .icon{
width:54px; height:54px; border-radius:12px; display:grid; place-items:center; margin-bottom:10px;
background:rgba(212,175,55,.12); font-size:26px;
justify-self: center;
}
.cards .card .icon{
  background:none;
  justify-content: center;
  
}

.card p{ color:var(--ink)}
.meta{ font-size:13px; opacity:.85 }

/* ================== Bento Grid (Home) ================== */
.bento{
display:grid; gap:18px;
grid-template-columns:repeat(12,1fr);
grid-auto-rows:120px;
}
.tile{
grid-column:span 4;
display:flex; flex-direction:column; gap:8px; padding:18px;
text-decoration:none; color:var(--white);
background:linear-gradient(180deg, var(--glassA), var(--glassB));
border:1px solid var(--goldBorder); border-radius:16px;
box-shadow:0 10px 20px rgba(0,0,0,.25);
transition:transform .15s, box-shadow .15s, border-color .2s;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 16px 28px rgba(0,0,0,.35); border-color:rgba(212,175,55,.5) } 
.tile.tall .tile__icon{
  align-self: center;
width:54px; height:54px; border-radius:12px; display:grid; place-items:center; font-size:26px;
background:rgba(212,175,55,.12); justify-content: center; align-items: center;
}
.tile h2{ margin-top: 2px; }
.tile p{ color:var(--ink); font-size:14px }
.tile .btn{ margin-top:auto }

.tile.wide{ grid-column:span 8 }
.tile.tall{ grid-row:span 2; text-align: center;}
.tile.big{ grid-column:span 8; grid-row:span 2 }

@media (max-width:1100px){
.bento{ grid-template-columns:repeat(8,1fr); grid-auto-rows:120px }
.tile{ grid-column:span 4 }
.tile.wide{ grid-column:span 8 }
.tile.big{ grid-column:span 8; grid-row:span 2 }
}
@media (max-width:700px){
.bento{ grid-template-columns:repeat(4,1fr); grid-auto-rows:110px }
.tile, .tile.wide, .tile.big{ grid-column:span 4 }
.tile.tall, .tile.big{ grid-row:span 2 }
}

/* ================== Buttons & Links ================== */
.btn{
display:flex; padding:10px 14px; border-radius:12px;
border:1px solid var(--gold); color:#ffffff; font-weight:700; text-decoration:none;
transition: .2s ease-in-out; background: 0.2s;
text-align: center;
font-size: 18px;
justify-content: center;
border-bottom: 0 4px 12px rgba(0,0,0,0.4);
transform: scale(1.05);
text-decoration: none;
margin-right: 20%;
margin-left: 20%;
}
.btn:hover{ 
  background: #ff9e00;
}
.card .btn{
  display: flex;
  justify-self: center;
  justify-content: center;
  color:#ffffff;
  margin-top: 10px;
}
  #btn{
  color: #ffffff;
  display:flex; padding:10px 14px; border-radius:12px;
border:1px solid var(--gold);  font-weight:700; text-decoration:none;
transition: .2s ease-in-out; background: 0.2s;
text-align: center;
font-size: 18px;
justify-content: center;
border-bottom: 0 4px 12px rgba(0,0,0,0.4);
transform: scale(1.05);
text-decoration: none;

}

/* ================== Forms (Booking) ================== */
form.form, form{ /* use class="form" or plain form */
max-width:560px; margin:0 auto;
background:linear-gradient(180deg, var(--glassA), var(--glassB));
border:1px solid var(--goldBorder); border-radius:16px; padding:18px;
box-shadow:0 10px 20px rgba(0,0,0,.25);
}
label{ display:block; margin:10px 0 6px }
input, select, textarea{
width:100%; padding:12px; border-radius:10px; border:1px solid var(--goldBorder);
background:rgba(255,255,255,.06); color:var(--white);
}
input::placeholder, textarea::placeholder{ color:#cfd6ea}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:640px){ .row{ grid-template-columns:1fr } }
.actions{ margin-top:14px }
.actions .btn{ width:100%; text-align:center; justify-self: center; color: var(--gold);}
.actions .btn:hover{
  color: #ffffff;
}


/* ================== Footer ================== */
.site-footer{
border-top:1px solid var(--goldBorder);
padding:22px 0; text-align:center; opacity:.9; font-size:14px;
}

/* ================== Utilities ================== */
.center{text-align:center; justify-content: center}
.hidden{display:none !important}
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}

/* ===== Hero video: cover the area without stretching ===== */
/* support both naming styles from your HTML */
.hero, .hero-section{
position: relative;
min-height: 80vh;
display: grid;
place-items: center;
overflow: hidden;
}
.hero .bg-video,
.hero-section .video-bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* keep aspect ratio; no stretch */
object-position: center; /* center the focal point */
pointer-events: none; /* clicks pass through */
z-index: -1;
}


/* Show hamburger on mobile, hide desktop links */
@media (max-width:900px){
.primary-nav{ display:none; }
.hamburger{ display:inline-flex; }
}

/* Make hamburger definitely clickable */
.hamburger{
margin-left:auto;
background:none; border:0;
width:44px; height:44px;
align-items:center; justify-content:center;
cursor:pointer; position:relative; z-index:1101;
}
.hamburger span{ display:block; width:26px; height:3px; background:var(--gold); margin:5px 0; }

/* Right-side drawer */
.sidebar{
position:fixed; top:0; right:0; bottom:0;
width:min(320px,86vw);
background:var(--blue); color:var(--white);
border-left:1px solid var(--goldBorder);
transform:translateX(100%); /* hidden off-screen */
transition:transform .28s ease-in-out;
z-index:1000; display:flex; flex-direction:column; padding:16px;
}
.sidebar.open{ transform:translateX(0); } /* shown */

.drawer-close{
background:none; border:0; color:var(--gold);
font-size:28px; line-height:1; cursor:pointer;
}

/* Dim overlay */
.overlay{
position:fixed; inset:0; background:rgba(0,0,0,.5);
z-index:900; opacity:0; pointer-events:none; transition:opacity .25s;
}
.overlay.show{ opacity:1; pointer-events:auto; }

/* Service background image*/

.hero .bg-image{
    position: absolute;      /* Full cover */
    inset: 0;
    background: url("service_photo.jpg") center/cover no-repeat;
     z-index: -1;                 /* push behind text*/
}

/* ================== Cards ================== */
.cards {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Make both <a class="card"> and <article class="card"> look the same */
.card {
background: linear-gradient(180deg, var(--glassA), var(--glassB));
border: 1px solid var(--goldBorder);
border-radius: 16px;
padding: 18px;
box-shadow: 0 10px 20px rgba(0,0,0,.25);
transition: transform .15s, box-shadow .15s, border-color .2s;
text-decoration: none; /* removes underline from links */
color: inherit; /* keep text color same as body */
display: block; /* makes <a> behave like <article> */
}

.card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(0,0,0,.35);
border-color: rgba(212,175,55,.5);
}

/* Icon inside cards */
.card .icon {
width: 54px;
height: 54px;
border-radius: 12px;
display: grid;
place-items: center;
margin-bottom: 10px;
background: rgba(212,175,55,.12);
font-size: 26px;
}


/*Barber Card image*/
.card .barber-photo {
width: 10px;
height: 1%; /* consistent card image height */
object-fit: cover; /* crop to fill box without distortion */
border-radius: 12px; /* smooth rounded corners */
display: block;
}


/* === HERO background image support (same behavior as video) === */
.hero img.bg-image{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center;
pointer-events:none; z-index:-1;
}

/* === Profile page === */
.profile-card{
max-width:900px;
margin:40px auto 0;
padding:22px;
background:linear-gradient(180deg, var(--glassA), var(--glassB));
border:1px solid var(--goldBorder);
border-radius:16px;
box-shadow:0 10px 20px rgba(0,0,0,.25);
}

.profile-header{
display:flex; align-items:center; gap:16px; margin-bottom:12px;
}

.profile-photo{
width:110px; height:110px; object-fit:cover;
border-radius:16px;
border:3px solid var(--gold);
display:block;
}

.profile-name{ color:var(--gold); font-size:28px; line-height:1.2 }
.profile-role{ opacity:.9 }

.bio{ margin:10px 0 14px; opacity:.95 }

/* little pill list */
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 2px; padding:0 }
.chips li{
border:1px solid var(--goldBorder);
background:rgba(255,255,255,.06);
padding:6px 10px; border-radius:999px; font-size:14px; opacity:.95;
}

.cta-row{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap }

/* About page card spacing */
section.cards,
#about .cards,
.about-page .cards {
display: flex; /* column layout for cards */
flex-direction: column;
gap: 18px; /* <-- space between cards */
}

/* make sure individual cards don't add extra spacing */
.about-page .card,
#about .card {
margin: 0;
}

/* --- Gallery tweaks (reuses your .cards/.card) --- */
.gallery-cards .card.photo {
padding: 12px; /* a bit tighter around photos */
}
.gallery-cards .card.photo img {
width: 100%;
aspect-ratio: 4 / 3; /* consistent tile shape; adjust to taste */
object-fit: cover; /* fill without distortion */
border-radius: 12px;
display: block;
}
.gallery-cards .card.photo .meta {
margin-top: 10px;
text-align: center;
}
/*End*/

/*Start*/
/* ===== Contact form extras ===== */
.field-error {
display: block;
min-height: 1em;
font-size: 12px;
color: #ffb3b3;
margin-top: 6px;
opacity: .95;
}

.alert {
padding: 10px 12px;
border-radius: 10px;
margin-top: 10px;
background: linear-gradient(180deg, var(--glassA), var(--glassB));
border: 1px solid var(--goldBorder);
}
.alert.success { color: #9fe7a4; }
.alert.error { color: #ffb3b3; }

/* optional: nicer focus */
input:focus, textarea:focus, select:focus {
outline: 2px solid rgba(212,175,55,.35);
outline-offset: 2px;
}


/* Sidebar extras */
.sidebar__extra {
margin: 16px;
padding-top: 16px;
border-top: 1px solid var(--goldBorder, rgba(212,175,55,.35));
}

.btn--wide {
display: block;
width: 100%;
text-align: center;
margin-bottom: 12px;
}

.social-icons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.social-icons a {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1px solid var(--goldBorder, rgba(212,175,55,.35));
color: #fff;
transition: all .2s ease;
}

.social-icons a:hover {
transform: translateY(-2px);
background: rgba(255,255,255,.15);
box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* (Optional colors) */
.social.instagram { color: #E1306C; }
.social.facebook { color: #1877F2; }
.social.tiktok { color: #fff; }
.social.youtube { color: #FF0000; }


/* Sidebar social (scoped so it won't touch .btn) */
.sidebar-social{
display:flex;
gap:14px;
margin-top:16px;
align-items:center;
}

.sidebar-social .social-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:50%;
border:1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.08);
box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.sidebar-social .social-btn svg{
color:#fff; fill:#fff; width:22px; height:22px;
}

.sidebar-social .social-btn.instagram{ background:#E4405F; }
.sidebar-social .social-btn.facebook { background:#1877F2; }
.sidebar-social .social-btn.tiktok { background:#000000; }
.sidebar-social .social-btn.youtube { background:#FF0000; }

.sidebar-social .social-btn:hover{
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
filter: brightness(1.05);
}

/* Site Footer like miso rastaurant--same*/
.site-footer {
  background: #0a1633;
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  margin-top: 60px;
}

.site-footer a {
  color: #f1c40f;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.newsletter-form input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 220px;
}

.newsletter-form button {
  padding: 8px 16px;
  background: #f1c40f;
  color: #0a1633;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.newsletter-form button:hover {
  background: #ffd700;
}

.footer-social {
  margin-bottom: 20px;
}

.footer-social a {
  margin: 0 10px;
  font-size: 18px;
}

.footer-bottom {
  font-size: 14px;
  opacity: 0.8;
}

/* ===== Mobile Sticky Footer ===== same*/
@media (max-width: 700px) {
  :root {
    --footer-height: 240px; /* adjust height if needed */
  }

  body {
    padding-bottom: var(--footer-height);
  }

  .site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 24px 16px;
    box-shadow: 0 -8px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
  }

  .newsletter-form {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .newsletter-form input {
    max-width: 100%;
  }
  .footer-social a {
    font-size: 20px;
  }
  .footer-bottom {
    font-size: 12px;
  }
}


/*Addition to footer and stiky nav bar*------same*//* ===== Sidebar tidy + social block ===== */
.sidebar { 
  position: fixed; 
  inset: 0 0 0 auto;       /* right drawer */
  width: 300px;
  height: 100%;
  z-index: 1000;           /* stays above footer */
  overflow-y: auto;        /* scroll if tall */
}

.sidebar__nav { 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
  padding: 16px 20px 28px;
}

.sidebar_extra {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
}

.btn.btn-wide { 
  width: 100%; 
  display: inline-flex; 
  justify-content: center; 
}

/* Social icon row in drawer */
.sidebar-social {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.social-btn {
  width: 44px; height: 44px;
  border-radius: 9999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  transition: transform .18s, background-color .18s, border-color .18s;
}
.social-btn:hover { 
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
}

/* ===== Footer (newsletter + links) ===== same */
.site-footer {
  position: relative;      /* separate stacking from sidebar */
  z-index: 1;
}

.site-footer .container { max-width: 980px; }

.newsletter-form {
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap;
  margin: 14px 0 10px;
  justify-self: center;
}
.newsletter-form input[type="email"]{
  min-width: 260px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--goldBorder, rgba(255,255,255,.22));
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}
.newsletter-form button{
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--goldBorder, rgba(255,255,255,.22));
  background: linear-gradient(180deg, rgba(255,215,128,.25), rgba(255,215,128,.15));
  color: var(--gold, #ffd36b);
  font-weight: 700;
  cursor: pointer;
}

.footer-social{
  display: flex; 
  gap: 24px; 
  justify-content: center; 
  margin: 14px 0 18px;
}
.footer-social a{
  color: var(--gold, #ffd36b);
  text-decoration: none;
  font-weight: 600;
}
.footer-social a:hover{ text-decoration: underline; }

.footer-bottom p{ 
  margin: 4px 0; 
  opacity: .85; 
  font-size: .95rem;
}
.footer-bottom a{ color: #fff; opacity: .9; }
.footer-bottom a:hover{ opacity: 1; }

/* Make sure the hero/video below the drawer doesn't get clipped on tiny screens */
@media (max-height: 650px){
  .sidebar__nav { padding-bottom: 40px; }
}

/*Start*/
/*===Footer log icon favicon===*/
.footer-logo {
  display: flex;
  justify-self: center;
  align-items: center;
  margin-bottom: 20px 0;
}

.footer-logo img {
  display: block;
  margin: 0 auto;
  width: 70px;   /* adjust size */
  height: 70px;
  border-radius: 50%;  /* keeps it round like favicon */
  object-fit: contain;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
/*End*/

/*Start*/
/*========Booking Page===*/
/* Booking Page */
.booking-page {
  background: #f9f9f9;       /* Light background */
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.booking-page .container {
  max-width: 1100px;
  width: 100%;
  background: #fff;          /* White card style */
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  text-align: center;
}

.booking-page h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #222;
}

.booking-page .hint {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
}

.booking-page iframe {
  width: 100%;
  height: 800px;
  border: none;
  border-radius: 12px;       /* Rounded edges */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/*end*/

/* Start*/
/* ANFA Chatbot Styles */
#anfa-chatbot { position: fixed; right: 20px; bottom: 50px; z-index: 99999; font-family: system-ui, -apple-system, "Poppins", Arial, sans-serif; }
#anfa-chatbot * { box-sizing: border-box; }

.anfa-launcher { width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: 50px; background: #0b2447; color: #fff; }

.anfa-panel { width: min(420px, 94vw); height: 600px; background: #fff; border-radius: 16px; box-shadow: 0 20px 48px rgba(0,0,0,.22); overflow: hidden; display: none; flex-direction: column; }
#anfa-chatbot.anfa-open .anfa-panel { display: flex; }
#anfa-chatbot.anfa-open .anfa-launcher { display: none; }

.anfa-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #0b2447; color: #fff; }
.anfa-header h3 { margin: 0; font-weight: 700; font-size: 16px; }
.anfa-status { margin: 0; font-size: 12px; opacity: .9; }
.anfa-close { background: transparent; color: #fff; border: 0; font-size: 18px; cursor: pointer; }

.anfa-body { flex: 1; padding: 12px; overflow-y: auto; background: #111; }
.anfa-msg { display: grid; gap: 8px; margin-bottom: 14px; }
.anfa-bot, .anfa-user { max-width: 82%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.anfa-bot { background: #fff; border: 1px solid #e9eef5; color: #111; }
.anfa-user { background: #0b2447; color: #fff; margin-left: auto; }

.anfa-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: #fff; border-top: 1px solid #e9eef5; }
.anfa-quick button { background: #e9eef5; border: 0; border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.anfa-input { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; padding: 8px 12px; background: #fff; border-top: 1px solid #e9eef5;}
.anfa-input input { border: 1px solid #cfd8e3; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: #111 !important; -webkit-text-fill-color: #111 !important; caret-color: #111; background-color: #fff;}
.anfa-input button { border: 0; border-radius: 10px; background: #0b2447; color: #fff; cursor: pointer; }
.anfa-input input::placeholder{ color: #667085;}
#anfa-mic { background: #e9eef5; display: flex; align-items: center; justify-content: center; font-size: 18px; }
#anfa-mic.is-listening { background: #ff4d4d; color: #fff; }

@media (max-width: 420px) {
#anfa-chatbot { right: 12px; bottom: 12px; }
.anfa-panel { height: 84vh; }
}
/* End*/