/* =========================================================
   AR BEAUTY LABS — AI BEAUTY CHAT AGENT
   ========================================================= */

.bc-app{
  position:relative;

  width:100%;
  max-width:1180px;

  margin:0 auto;
  padding:8px 18px 26px;

  box-sizing:border-box;

  color:#fff;
}

.bc-app *,
.bc-app *::before,
.bc-app *::after{
  box-sizing:border-box;
}

.bc-app [hidden]{
  display:none !important;
}


/* =========================================================
   INTRO
   ========================================================= */

.bc-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:28px;

  margin-bottom:17px;
}

.bc-intro-copy{
  max-width:650px;
}

.bc-kicker{
  display:block;

  margin-bottom:6px;

  color:#F06C9F;

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

  letter-spacing:.15em;
  text-transform:uppercase;
}

.bc-intro h3{
  margin:0;

  color:#fff;

  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(27px,3vw,38px);
  font-weight:400;
  line-height:1.08;
}

.bc-intro p{
  max-width:600px;

  margin:9px 0 0;

  color:rgba(255,255,255,.44);

  font-size:9px;
  line-height:1.65;
}


/* STATUS */

.bc-status{
  display:flex;
  align-items:center;

  gap:9px;

  padding:9px 12px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;

  background:rgba(255,255,255,.025);
}

.bc-status-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#63D69C;

  box-shadow:
    0 0 0 4px rgba(99,214,156,.08);
}

.bc-status div{
  display:flex;
  flex-direction:column;

  gap:2px;
}

.bc-status strong{
  font-size:8px;
  font-weight:650;
}

.bc-status small{
  color:rgba(255,255,255,.32);

  font-size:6.5px;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.bc-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(350px,.95fr);

  gap:12px;

  min-height:570px;
}


/* =========================================================
   CHAT PANEL — LIGHT / PINK
   ========================================================= */

.bc-chat-panel{
  min-width:0;
  min-height:570px;

  display:flex;
  flex-direction:column;
  overflow:hidden;

  border:1px solid rgba(232,74,138,.16);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(232,74,138,.08),
      transparent 34%
    ),
    #fff;

  box-shadow:
    0 18px 45px rgba(20,15,18,.12);
}


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

.bc-chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:15px;

  padding:14px 16px;

  border-bottom:1px solid #F1E5EA;

  background:
    linear-gradient(
      135deg,
      #FFF 0%,
      #FFF6FA 100%
    );
}

.bc-agent-avatar{
  width:36px;
  height:36px;

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

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #E84A8A,
      #C72D70
    );

  box-shadow:
    0 6px 18px rgba(232,74,138,.20);

  color:#fff;

  font-size:8px;
  font-weight:800;
}

.bc-agent strong{
  color:#2A2A30;
  font-size:9px;
}

.bc-agent small{
  color:#8B7D84;
  font-size:6.5px;
}

.bc-reset{
  padding:6px 10px;

  border:1px solid #F0DCE5;
  border-radius:999px;

  background:#FFF8FB;

  color:#B73A70;

  font:inherit;
  font-size:6.5px;

  cursor:pointer;
}

.bc-reset:hover{
  border-color:#E84A8A;
  background:#FDE7F0;
}


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

.bc-messages{
  flex:1;
  min-height:0;

  padding:20px 16px;

  overflow-y:auto;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #FFFBFD 100%
    );

  scroll-behavior:smooth;
}

.bc-messages::-webkit-scrollbar{
  width:4px;
}

.bc-messages::-webkit-scrollbar-thumb{
  border-radius:20px;
  background:#EED4DF;
}


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

.bc-message{
  display:flex;
  gap:9px;

  margin-bottom:16px;
}

.bc-message-user{
  justify-content:flex-end;
}

.bc-message-avatar{
  width:29px;
  height:29px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 29px;

  border-radius:9px;

  background:#FDE7F0;

  color:#D53D7C;

  font-size:6px;
  font-weight:800;
}


/* ASSISTANT MESSAGE */

.bc-message-content{
  max-width:78%;
}

.bc-message-bubble{
  padding:10px 12px;

  border:1px solid #F0E5EA;
  border-radius:5px 14px 14px 14px;

  background:#F8F5F6;

  color:#4E454A;

  box-shadow:
    0 4px 12px rgba(34,23,28,.025);

  font-size:8.5px;
  line-height:1.65;
}


/* USER MESSAGE */

.bc-message-user .bc-message-content{
  max-width:74%;
}

.bc-message-user .bc-message-bubble{
  border-color:#E84A8A;
  border-radius:14px 5px 14px 14px;

  background:
    linear-gradient(
      135deg,
      #E84A8A,
      #D83B7A
    );

  color:#fff;

  box-shadow:
    0 7px 18px rgba(232,74,138,.16);
}


/* =========================================================
   MESSAGE ACTION BUTTONS
   ========================================================= */

.bc-message-actions{
  display:flex;
  flex-wrap:wrap;

  gap:5px;

  margin-top:7px;
}

.bc-message-actions button{
  display:flex;
  align-items:center;

  gap:6px;

  padding:7px 10px;

  border:1px solid #F1C7D8;
  border-radius:999px;

  background:#FFF5F9;

  color:#C73370;

  font:inherit;
  font-size:6.5px;
  font-weight:700;

  cursor:pointer;
}

.bc-message-actions button:hover{
  border-color:#E84A8A;
  background:#FDE7F0;
}


/* =========================================================
   QUICK PROMPTS
   ========================================================= */

.bc-quick-prompts{
  padding:10px 15px 12px;

  border-top:1px solid #F5EBEF;

  background:#fff;
}

.bc-quick-prompts > span{
  display:block;

  margin-bottom:7px;

  color:#A68C97;

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

  letter-spacing:.11em;
}

.bc-prompt-list{
  display:flex;
  flex-wrap:wrap;

  gap:5px;
}

.bc-prompt-list button{
  padding:7px 10px;

  border:1px solid #F0DCE5;
  border-radius:999px;

  background:#FFF8FB;

  color:#775E69;

  font:inherit;
  font-size:6.5px;

  cursor:pointer;

  transition:.2s ease;
}

.bc-prompt-list button:hover{
  transform:translateY(-1px);

  border-color:#E84A8A;

  background:#FDE7F0;

  color:#C52F6E;
}


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

.bc-typing{
  display:flex;
  align-items:center;

  gap:4px;

  padding:8px 16px;

  background:#fff;
}

.bc-typing > span{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#E84A8A;

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

.bc-typing > span:nth-child(2){
  animation-delay:.15s;
}

.bc-typing > span:nth-child(3){
  animation-delay:.30s;
}

.bc-typing small{
  margin-left:5px;

  color:#9A858E;

  font-size:6px;
}


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

.bc-composer{
  display:grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  gap:7px;

  padding:11px 12px;

  border-top:1px solid #F0E5EA;

  background:#fff;
}

.bc-composer input{
  width:100%;
  min-width:0;
  min-height:42px;

  padding:0 13px;

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

  outline:none;

  background:#FAF7F8;

  color:#2A2A30;

  font:inherit;
  font-size:8.5px;
}

.bc-composer input::placeholder{
  color:#A9979F;
}

.bc-composer input:focus{
  border-color:#E84A8A;

  background:#fff;

  box-shadow:
    0 0 0 3px rgba(232,74,138,.07);
}

.bc-composer button{
  min-width:78px;

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

  gap:7px;

  padding:0 13px;

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

  background:
    linear-gradient(
      135deg,
      #E84A8A,
      #D83B7A
    );

  color:#fff;

  font:inherit;
  font-size:7.5px;
  font-weight:700;

  cursor:pointer;

  box-shadow:
    0 6px 16px rgba(232,74,138,.16);
}

.bc-composer button:hover{
  background:#C92E6D;
}


/* =========================================================
   SHOP PANEL
   ========================================================= */

.bc-shop-panel{
  min-width:0;
  min-height:570px;

  overflow:hidden;

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

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(232,74,138,.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );
}


/* EMPTY */

.bc-shop-empty{
  height:100%;
  min-height:570px;

  display:flex;
  flex-direction:column;

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

  padding:35px;

  text-align:center;
}

.bc-shop-empty-art{
  position:relative;

  width:110px;
  height:110px;

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

  margin-bottom:20px;
}

.bc-shop-empty-art strong{
  position:relative;

  z-index:2;

  width:48px;
  height:48px;

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

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #E84A8A,
      #8A455F
    );

  box-shadow:
    0 12px 35px
    rgba(232,74,138,.17);

  color:#fff;

  font-size:11px;
}

.bc-orbit{
  position:absolute;

  inset:0;

  border:
    1px solid rgba(232,74,138,.15);
  border-radius:50%;
}

.bc-orbit-two{
  inset:17px;

  border-color:
    rgba(255,255,255,.10);
}

.bc-shop-empty h4{
  max-width:300px;

  margin:0;

  color:#fff;

  font-family:
    'Fraunces',Georgia,serif;
  font-size:22px;
  font-weight:400;
  line-height:1.15;
}

.bc-shop-empty p{
  max-width:330px;

  margin:10px 0 0;

  color:
    rgba(255,255,255,.35);

  font-size:8px;
  line-height:1.65;
}


/* =========================================================
   RESULTS
   ========================================================= */

.bc-shop-results{
  height:100%;

  display:flex;
  flex-direction:column;

  padding:15px;
}

.bc-results-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:11px;
}

.bc-results-head h4{
  margin:0;

  color:#fff;

  font-family:
    'Fraunces',Georgia,serif;
  font-size:21px;
  font-weight:400;
}

.bc-result-count{
  padding:6px 8px;

  border-radius:999px;

  background:
    rgba(232,74,138,.08);

  color:#F06C9F;

  font-size:6.5px;
}


/* =========================================================
   PRODUCTS
   ========================================================= */

.bc-products{
  display:flex;
  flex-direction:column;

  gap:6px;

  max-height:350px;

  padding-right:3px;

  overflow-y:auto;
}

.bc-products::-webkit-scrollbar{
  width:4px;
}

.bc-products::-webkit-scrollbar-thumb{
  border-radius:10px;

  background:
    rgba(255,255,255,.09);
}

.bc-product{
  position:relative;

  display:grid;

  grid-template-columns:
    18px
    48px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:8px;

  padding:8px;

  border:
    1px solid rgba(255,255,255,.07);
  border-radius:12px;

  background:
    rgba(255,255,255,.022);
}


/* CHECK */

.bc-product-check{
  cursor:pointer;
}

.bc-product-check input{
  position:absolute;

  opacity:0;
  pointer-events:none;
}

.bc-product-check span{
  width:15px;
  height:15px;

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

  border:
    1px solid rgba(255,255,255,.15);
  border-radius:5px;

  background:
    rgba(255,255,255,.02);
}

.bc-product-check
input:checked + span{
  border-color:#E84A8A;

  background:#E84A8A;
}

.bc-product-check
input:checked + span::after{
  content:"✓";

  color:#fff;

  font-size:8px;
}


/* VISUAL */

.bc-product-visual{
  width:48px;
  height:48px;

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

  overflow:hidden;

  border-radius:10px;

  background:
    rgba(255,255,255,.04);
}

.bc-product-visual img{
  width:100%;
  height:100%;

  object-fit:contain;
}

.bc-product-swatch{
  width:27px;
  height:27px;

  display:block;

  border:
    3px solid rgba(255,255,255,.10);
  border-radius:50%;

  box-shadow:
    0 4px 14px rgba(0,0,0,.16);
}


/* COPY */

.bc-product-copy{
  min-width:0;
}

.bc-product-category{
  display:block;

  margin-bottom:2px;

  color:#F06C9F;

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

  letter-spacing:.08em;
  text-transform:uppercase;
}

.bc-product-copy strong{
  display:block;

  overflow:hidden;

  color:#fff;

  font-size:8.5px;

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

.bc-product-copy small{
  display:block;

  margin-top:2px;

  color:
    rgba(255,255,255,.34);

  font-size:6.5px;
}


/* PRODUCT COMMERCE */

.bc-product-commerce{
  display:flex;
  flex-direction:column;

  align-items:flex-end;

  gap:5px;
}

.bc-product-commerce > strong{
  color:#fff;

  font-size:8px;
}

.bc-product-commerce > div{
  display:flex;

  gap:4px;
}

.bc-product-commerce button{
  padding:5px 7px;

  border:
    1px solid rgba(232,74,138,.23);
  border-radius:999px;

  background:
    rgba(232,74,138,.06);

  color:#F06C9F;

  font:inherit;
  font-size:5.8px;
  font-weight:650;

  cursor:pointer;
}

.bc-product-commerce button:last-child{
  border-color:
    rgba(232,74,138,.50);

  background:
    rgba(232,74,138,.13);

  color:#fff;
}


/* =========================================================
   LOOK SUMMARY
   ========================================================= */

.bc-look-summary{
  margin-top:auto;
  padding-top:12px;

  border-top:
    1px solid rgba(255,255,255,.07);
}

.bc-look-summary-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;
}

.bc-look-summary-head > div{
  display:flex;
  flex-direction:column;

  gap:2px;
}

.bc-look-summary-head span{
  color:#F06C9F;

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

  letter-spacing:.09em;
}

.bc-look-summary-head strong{
  color:#fff;

  font-size:9px;
}

.bc-look-summary-head > strong{
  font-size:11px;
}

.bc-look-summary p{
  margin:6px 0 10px;

  color:
    rgba(255,255,255,.32);

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

.bc-look-actions{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:6px;
}

.bc-look-actions button{
  min-height:39px;

  border-radius:10px;

  font:inherit;
  font-size:7px;
  font-weight:700;

  cursor:pointer;
}

.bc-secondary-action{
  border:
    1px solid rgba(255,255,255,.11);

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

  color:#fff;
}

.bc-secondary-action:hover{
  border-color:
    rgba(232,74,138,.40);
}

.bc-primary-action{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  padding:0 11px;

  border:1px solid #E84A8A;

  background:#E84A8A;

  color:#fff;
}

.bc-primary-action:hover{
  background:#CB3D77;
}

.bc-primary-action:disabled{
  opacity:.4;

  cursor:not-allowed;
}


/* =========================================================
   TOAST
   ========================================================= */

.bc-toast{
  position:absolute;

  right:22px;
  bottom:20px;

  z-index:100;

  min-width:235px;

  display:flex;
  align-items:center;

  gap:9px;

  padding:10px 12px;

  border:
    1px solid rgba(255,255,255,.10);
  border-radius:12px;

  background:#2F292D;

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.22);
}

.bc-toast > span{
  width:27px;
  height:27px;

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

  border-radius:50%;

  background:
    rgba(232,74,138,.13);

  color:#F06C9F;
}

.bc-toast strong{
  display:block;

  color:#fff;

  font-size:8px;
}

.bc-toast small{
  display:block;

  margin-top:2px;

  color:
    rgba(255,255,255,.34);

  font-size:6.5px;
}


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

@media(max-width:900px){

  .bc-intro{
    align-items:flex-start;
    flex-direction:column;

    gap:10px;
  }

  .bc-layout{
    grid-template-columns:1fr;
  }

  .bc-chat-panel{
    min-height:540px;
  }

  .bc-shop-panel{
    min-height:auto;
  }

  .bc-shop-empty{
    min-height:350px;
  }

  .bc-shop-results{
    min-height:480px;
  }

}


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

@media(max-width:640px){

  .bc-app{
    padding:4px 5px 20px;
  }

  .bc-status{
    display:none;
  }

  .bc-chat-panel{
    min-height:520px;
  }

  .bc-message-content,
  .bc-message-user
  .bc-message-content{
    max-width:88%;
  }

  .bc-product{
    grid-template-columns:
      17px
      42px
      minmax(0,1fr);

    align-items:center;
  }

  .bc-product-visual{
    width:42px;
    height:42px;
  }

  .bc-product-commerce{
    grid-column:2 / -1;

    flex-direction:row;
    align-items:center;
    justify-content:space-between;

    padding-top:4px;
  }

  .bc-look-actions{
    grid-template-columns:1fr;
  }

  .bc-composer button{
    min-width:48px;
  }

  .bc-composer button span{
    display:none;
  }

}
/* =========================================================
   BEAUTY CHAT — READABILITY / FONT SIZE OVERRIDES
   ========================================================= */

/* Intro */
.bc-kicker{
  font-size:11px;
}

.bc-intro h3{
  font-size:clamp(30px, 3vw, 40px);
}

.bc-intro p{
  font-size:14px;
  line-height:1.6;
}


/* Status */
.bc-status strong{
  font-size:13px;
}

.bc-status small{
  font-size:11px;
}


/* Chat header */
.bc-agent strong{
  font-size:14px;
}

.bc-agent small{
  font-size:11px;
}

.bc-reset{
  font-size:12px;
}


/* Chat messages */
.bc-message-avatar{
  font-size:10px;
}

.bc-message-bubble{
  font-size:14px;
  line-height:1.6;

  padding:12px 14px;
}


/* Message action buttons */
.bc-message-actions button{
  font-size:12px;

  padding:8px 12px;
}


/* Quick prompts */
.bc-quick-prompts > span{
  font-size:10px;
}

.bc-prompt-list button{
  font-size:12px;

  padding:8px 12px;
}


/* Typing indicator */
.bc-typing small{
  font-size:11px;
}


/* Chat input */
.bc-composer input{
  min-height:46px;

  font-size:14px;
}

.bc-composer button{
  min-width:88px;

  font-size:13px;
}


/* =========================================================
   RECOMMENDATION SIDE
   ========================================================= */

.bc-shop-empty .bc-kicker,
.bc-results-head .bc-kicker{
  font-size:10px;
}

.bc-shop-empty h4{
  font-size:26px;
}

.bc-shop-empty p{
  font-size:13px;
  line-height:1.6;
}

.bc-results-head h4{
  font-size:24px;
}

.bc-result-count{
  font-size:11px;
}


/* Product cards */
.bc-product-category{
  font-size:9px;
}

.bc-product-copy strong{
  font-size:13px;
}

.bc-product-copy small{
  font-size:11px;
}

.bc-product-commerce > strong{
  font-size:13px;
}

.bc-product-commerce button{
  font-size:11px;

  padding:6px 10px;
}


/* Complete look */
.bc-look-summary-head span{
  font-size:9px;
}

.bc-look-summary-head strong{
  font-size:13px;
}

.bc-look-summary-head > strong{
  font-size:15px;
}

.bc-look-summary p{
  font-size:11px;
  line-height:1.5;
}

.bc-look-actions button{
  min-height:43px;

  font-size:12px;
}


/* Toast */
.bc-toast strong{
  font-size:13px;
}

.bc-toast small{
  font-size:11px;
}