/*
Theme Name: saranamitratek
Theme URI: https://saranamitratek.com
Author: PT. Profit Multi Sarana
Description: V9 neon glass theme with full running light animations on all boxes and buttons.
Version: 3.9
*/

:root{
  --cyan:#5de8f5;
  --blue:#2b8ef0;
  --pink:#d96ad6;
  --green:#19d96b;
  --white:#f4f8ff;
  --font:"Courier New", Courier, monospace;

  --page-gutter:5mm;
  --page-top:5mm;
  --page-bottom:5mm;
  --admin-height:0px;
}

*, *::before, *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ min-height:100%; }

body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family:var(--font);
  color:var(--white);
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 18% 78%, rgba(78,199,255,.38) 0%, rgba(78,199,255,0) 60%),
    radial-gradient(900px 600px at 82% 22%, rgba(90,110,255,.22) 0%, rgba(90,110,255,0) 58%),
    radial-gradient(700px 420px at 50% 100%, rgba(0,194,255,.18) 0%, rgba(0,194,255,0) 70%),
    linear-gradient(145deg, #040a2b 0%, #071a56 28%, #061347 52%, #050d35 72%, #030824 100%);
  background-attachment:fixed;
}

body.admin-bar{ --admin-height:32px; }
button, input{ font-family:inherit; }
button, a, input{ -webkit-tap-highlight-color:transparent; }
button{ touch-action:manipulation; }
img{ max-width:100%; }

@property --running-light-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes globalRunningLight {
  to { --running-light-angle: 360deg; }
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 9px),
    repeating-linear-gradient(25deg, rgba(120,200,255,.03) 0px, rgba(120,200,255,.03) 2px, transparent 2px, transparent 14px);
  mix-blend-mode:screen;
  opacity:.55;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1200px 500px at 50% 110%, rgba(0,220,255,.22) 0%, transparent 70%),
    radial-gradient(900px 500px at -10% 40%, rgba(78,160,255,.18) 0%, transparent 70%),
    radial-gradient(900px 500px at 110% 65%, rgba(130,90,255,.14) 0%, transparent 70%),
    radial-gradient(circle at center, transparent 45%, rgba(1,6,25,.45) 100%);
}

.main-wrapper{
  width:calc(100% - var(--page-gutter) - var(--page-gutter));
  margin:var(--page-top) var(--page-gutter) var(--page-bottom);
  min-height:calc(100vh - var(--admin-height) - var(--page-top) - var(--page-bottom));
  min-height:calc(100dvh - var(--admin-height) - var(--page-top) - var(--page-bottom));
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}

.left-panel-box, .right-panel-box{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
}

.company-header, .ai-header {
  position: relative;
  min-height: 95px;
  flex-shrink: 0;
  background: rgba(5, 13, 53, 0.4);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(60,190,255,.18));
  border: 1px solid transparent;
}

.company-header::before, .ai-header::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: conic-gradient(
    from var(--running-light-angle),
    transparent 0deg 270deg,
    var(--blue) 295deg,
    var(--cyan) 325deg,
    #ffffff 340deg,
    var(--pink) 352deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: globalRunningLight 3.5s linear infinite;
}

.company-home{ width:100%; padding:10px; background:transparent; border:0; color:inherit; cursor:pointer; }
.company-header h1{ margin:0; font-size:23px; font-weight:700; line-height:1.25; }

/* TUGAS 1: Perkecil teks sub-header perusahaan dan AI assistant */
.company-header p{ margin:5px 0 0; color:var(--cyan); font-size:16px; line-height:1.2; letter-spacing:.8px; }

.ai-header{ flex-direction:column; }
.ai-header h2{ margin:0; font-size:23px; line-height:1.25; }
.ai-header p{ margin:4px 0 0; color:var(--cyan); font-size:16px; line-height:1.2; letter-spacing:.8px; }

.progress-nav{ margin-top:10px; flex-shrink:0; }
.progress-track{ height:3px; overflow:hidden; border-radius:3px; background:rgba(93,232,245,.15); }

#progress-bar{
  display:block;
  width:20%;
  height:100%;
  background:linear-gradient(90deg, var(--blue), var(--cyan), var(--pink));
  box-shadow:0 0 8px rgba(93,232,245,.6);
  transition:width .3s ease;
}

.progress-steps{ display:flex; gap:6px; margin-top:6px; overflow-x:auto; scrollbar-width:thin; }
.progress-step{
  position:relative;
  flex:1 0 auto;
  min-height:44px;
  padding:6px 8px 17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:transparent;
  border:0;
  color:rgba(244,248,255,.65);
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s ease;
}

.progress-step i{ display:block; flex-shrink:0; width:7px; height:7px; border-radius:50%; background:rgba(93,232,245,.3); }
.progress-step.is-active{ color:var(--cyan); }
.progress-step.is-active i{ background:var(--green); box-shadow:0 0 7px rgba(25,217,107,.65); }

.active-badge, .section-active-status { display: none !important; }

.left-content{ display:flex; flex-direction:column; flex:1; min-height:0; margin-top:14px; }
.content-section{ width:100%; min-width:0; }

#section-home:not([hidden]){ display:flex; flex-direction:column; flex:1; }
#section-home > .menu-grid, #section-home > .home-inline-layout{ flex-shrink:0; }

.menu-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 30px; }

.menu-btn{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:106px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(43, 142, 240, 0.03);
  border:0;
  border-radius:18px;
  color:#fff;
  font-size:19px;
  font-weight:500;
  line-height:1.45;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}

.menu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--running-light-angle),
    transparent 0deg 260deg,
    var(--blue) 285deg,
    var(--cyan) 315deg,
    #ffffff 335deg,
    var(--pink) 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: globalRunningLight 3s linear infinite;
}

.menu-half{ grid-column:span 2; }
.whatsapp{ color:#0ed56a; font-weight:700; }
.menu-rfq{ grid-column:1/-1; flex-direction:column; white-space:nowrap; }

.rfq-eye-catching{ font-weight:600; letter-spacing:.5px; }
.rfq-btn-content{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; }
.rfq-grid-icon{ flex-shrink:0; color:var(--cyan); filter:drop-shadow(0 0 5px var(--cyan)); }
.rfq-eye-catching span{
  color:#fff;
  text-shadow:0 0 8px #d96ad6, 0 0 16px #b537f5, 0 0 25px #d96ad6;
  animation:rfqNeonPulse 2.5s ease-in-out infinite alternate;
}

@keyframes rfqNeonPulse{
  from{ text-shadow:0 0 6px #d96ad6, 0 0 12px #b537f5; }
  to{ text-shadow:0 0 12px #d96ad6, 0 0 24px #b537f5, 0 0 35px #ff79ff; }
}

/* ==================================================
   TUGAS 2: LAYOUT SEJAJAR, DIPERPENDEK, DIGESER KANAN
   ================================================== */
.home-inline-layout{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin-top:14px;
}

.product-gallery{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.product-gallery img{
  display:block;
  width:106px;
  height:130px;
  object-fit:contain;
  background:rgba(255, 255, 255, 0.03);
  border:1px solid rgba(93, 232, 245, 0.25);
  border-radius:8px;
  padding:4px;
}

.home-bottom-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  flex:1;
  min-width:0;
}

.pod-box, .another-web-box{
  position:relative;
  border-radius:12px;
  padding:10px 12px;
  background:rgba(43, 142, 240, 0.03);
  box-shadow:inset 0 0 15px rgba(93, 232, 245, 0.02);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.pod-box::after, .another-web-box::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--running-light-angle),
    transparent 0deg 280deg,
    var(--cyan) 310deg,
    var(--pink) 340deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: globalRunningLight 4s linear infinite;
}

.pod-header, .aw-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(93, 232, 245, 0.2);
  padding-bottom:4px;
  margin-bottom:6px;
}

.pod-title, .aw-title{ color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
.pod-date{ color:#fff; font-size:10px; }
.pod-content{ display:flex; flex-direction:column; gap:4px; font-size:10.5px; }
.pod-row{ display:flex; justify-content:space-between; align-items:center; color:#d0e2ff; }

.status-start{ color:var(--cyan); font-weight:bold; }
.status-progress{ color:#ffb703; font-weight:bold; }
.status-finish{ color:var(--green); font-weight:bold; }

.aw-list{ margin:0; padding-left:14px; font-size:10.5px; display:flex; flex-direction:column; gap:3px; }
.aw-list li a{ color:var(--white); text-decoration:none; }
.aw-list li a:hover{ color:var(--cyan); text-decoration:underline; }

.footer-text, .detail-footer{
  margin-top:auto;
  padding:16px 8px 8px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
}

.detail-section{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding:14px 18px 10px;
  border-radius:16px;
  background:transparent;
}

.detail-section::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--running-light-angle),
    transparent 0deg 270deg,
    var(--blue) 300deg,
    var(--cyan) 330deg,
    var(--pink) 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: globalRunningLight 3.5s linear infinite;
}

.detail-section h2{ margin:0 0 10px; text-align:center; font-size:23px; font-weight:500; }
.scrollable-content{ flex:1; min-height:0; overflow-y:auto; font-size:15px; line-height:1.7; color:#eef6ff; }
.service-list{ margin:0; padding:0; list-style:none; }
.service-list li{ position:relative; margin:0 0 6px; padding-left:16px; }
.service-list li::before{ content:"–"; position:absolute; left:0; }

.rfq-form{ display:grid; grid-template-columns:155px minmax(0,1fr); gap:12px 14px; margin-top:4px; }
.rfq-label-cell{ display:flex; align-items:center; padding:0 18px; border:1px solid transparent; border-image:linear-gradient(115deg,#55c7ff,#e262d8) 1; border-radius:8px; font-size:15px; }
.rfq-input-cell input{ width:100%; min-height:36px; padding:8px 14px; border:1px solid transparent; border-image:linear-gradient(115deg,#55c7ff,#e262d8) 1; border-radius:8px; background:transparent; color:#eaf5ff; font-size:15px; }
.rfq-spacer{ grid-column:1/-1; height:6px; }
.rfq-check-row{ grid-column:1/-1; display:grid; grid-template-columns:155px minmax(0,1fr) minmax(0,1fr); gap:12px 14px; }
.rfq-check-option{ display:flex; align-items:center; gap:9px; padding:6px 12px; border:1px solid transparent; border-image:linear-gradient(115deg,#55c7ff,#e262d8) 1; border-radius:8px; font-size:15px; }
.rfq-actions{ grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.rfq-actions button{ min-height:56px; border:1px solid transparent; border-image:linear-gradient(115deg,#55c7ff,#e262d8) 1; border-radius:8px; background:transparent; color:#eaf7ff; font-size:15px; cursor:pointer; }
.rfq-actions .rfq-whatsapp{ border-image:linear-gradient(115deg,#52c9e9,#58eb82) 1; color:#0fd66d; }

.ai-body{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding:12px;
  box-sizing:border-box;
  overflow:hidden;
  border:0;
  background:linear-gradient(160deg, rgba(43,142,240,.035), transparent 55%, rgba(217,106,214,.025));
}

.ai-body::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: conic-gradient(
    from var(--running-light-angle),
    transparent 0deg 280deg,
    var(--blue) 305deg,
    var(--cyan) 330deg,
    #ffffff 340deg,
    var(--pink) 352deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: globalRunningLight 4s linear infinite;
}

.chat-stage{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; margin-bottom:8px; }
.ai-empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; margin:auto 0; text-align:center; }
.ai-empty-state p{ margin:0 0 12px; color:var(--cyan); font-size:19px; }
.ai-dot-canvas{ display:block; max-width:140px; height:auto; margin:10px auto 0; border-radius:6px; box-shadow:0 0 15px rgba(0, 194, 255, 0.25); }

.ai-messages-box{ position:absolute; inset:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:6px; }
.bot-message, .user-message{ max-width:88%; padding:10px 14px; font-size:13px; line-height:1.65; white-space:pre-wrap; word-break:break-word; }
.bot-message{ align-self:flex-start; color:#5eead4; border:1px solid rgba(93,232,245,.18); border-left:2px solid #5eead4; border-radius:12px 12px 12px 3px; background:rgba(80,218,246,.15); }
.user-message{ align-self:flex-end; border:1px solid rgba(217,106,214,.18); border-right:2px solid var(--pink); border-radius:12px 12px 3px 12px; background:rgba(255,255,255,.12); }

.evo-quick-questions{ margin:6px 0; padding:0 4px; flex-shrink:0; }
.evo-quick-chips{ display:flex; gap:6px; }
.evo-chip{
  position:relative;
  flex:1;
  background:rgba(43, 142, 240, 0.08);
  border:0;
  color:var(--cyan);
  padding:7px 10px;
  border-radius:6px;
  font-size:11px;
  font-family:var(--font);
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.evo-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--running-light-angle),
    transparent 0deg 270deg,
    var(--pink) 310deg,
    var(--cyan) 340deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: globalRunningLight 2.5s linear infinite;
}

.evo-chip:hover{ background:var(--pink); color:#ffffff; transform:translateY(-1px); }

.ai-input-box{
  position:relative;
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:12px;
  min-height:65px;
  margin-top:auto;
  padding:10px 16px;
  border-radius:0;
  background:rgba(43, 142, 240, 0.05);
  border:0;
}

.ai-input-box::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  background: conic-gradient(
    from var(--running-light-angle),
    transparent 0deg 270deg,
    var(--blue) 295deg,
    var(--cyan) 325deg,
    #ffffff 340deg,
    var(--pink) 352deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: globalRunningLight 3.5s linear infinite;
}

.ai-input-box input{ width:100%; border:0; background:transparent; color:#fff; font-size:15px; }
.ai-input-box input::placeholder{ color:#00aaca; font-size:13px; }
.ai-input-box button{ width:44px; height:44px; border-radius:0; border:1px solid rgba(93,232,245,.35); background:rgba(93,232,245,.04); color:var(--cyan); cursor:pointer; }

.evo-typing{ display:flex; align-items:center; gap:10px; min-height:42px; }
.evo-typing-label{ font-weight:700; color:#5eead4; }
.evo-pingpong{ position:relative; width:62px; height:16px; overflow:hidden; border-radius:999px; background:rgba(94,234,212,.08); }
.evo-pingpong::before{ content:""; position:absolute; top:7px; left:7px; right:7px; height:2px; background:rgba(94,234,212,.2); }
.evo-pingpong::after{ content:""; position:absolute; top:4px; left:4px; width:8px; height:8px; border-radius:50%; background:#5eead4; box-shadow:0 0 8px rgba(94,234,212,.7); animation:evoPingPong .8s ease-in-out infinite alternate; }
@keyframes evoPingPong{ from{ transform:translateX(0); } to{ transform:translateX(46px); } }

@media (min-width:900px){
  html, body{ height:100vh; max-height:100vh; overflow:hidden; margin:0; padding:0; }
  .main-wrapper{
    grid-template-columns:minmax(0, calc(68.75% - 8px - 2cm)) minmax(0, 1fr);
    height:calc(100vh - var(--admin-height, 0px) - 10mm);
    max-height:calc(100vh - var(--admin-height, 0px) - 10mm);
    margin:5mm;
    width:calc(100% - 10mm);
    min-height:0;
    gap:12px;
    align-items:stretch;
    overflow:hidden;
  }
  .left-panel-box, .right-panel-box{
    height:100%;
    max-height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .company-header, .ai-header{
    height:clamp(66px, 8.8vh, 84px);
    min-height:0;
    padding:6px 14px;
    flex-shrink:0;
  }
  .company-home{ padding:4px; }
  .company-header-inner{ gap:14px; }
  .logo-neon-container{
    width:clamp(44px, 5.8vh, 54px);
    height:clamp(44px, 5.8vh, 54px);
  }
  .main-company-logo{
    width:clamp(36px, 4.8vh, 44px);
    height:clamp(36px, 4.8vh, 44px);
  }
  .company-header h1, .ai-header h2{
    font-size:clamp(17px, 2.1vh, 22px);
    line-height:1.2;
  }
  .company-header p, .ai-header p{
    font-size:clamp(12px, 1.4vh, 14.5px);
    margin:3px 0 0;
    line-height:1.2;
  }
  .progress-nav{
    margin-top:clamp(6px, 0.8vh, 10px);
    flex-shrink:0;
  }
  .progress-track{
    height:3px;
  }
  .progress-steps{
    margin-top:3px;
    gap:6px;
  }
  .progress-step{
    min-height:clamp(28px, 3.6vh, 34px);
    padding:2px 8px 6px;
    font-size:clamp(11px, 1.25vh, 12.5px);
  }
  .left-content{
    margin-top:clamp(6px, 0.9vh, 10px);
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  #section-home{
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:clamp(6px, 1vh, 10px);
    overflow:hidden;
  }
  .menu-grid{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-rows:repeat(4, minmax(0, 1fr));
    gap:clamp(6px, 1vh, 12px) clamp(10px, 1.6vw, 22px);
    margin-bottom:2px;
  }
  .menu-btn{
    height:100%;
    min-height:0;
    padding:clamp(6px, 0.9vh, 10px) 12px;
    font-size:clamp(14px, 1.7vh, 18px);
    font-weight:600;
    line-height:1.3;
    border-radius:14px;
  }
  .menu-rfq{
    white-space:normal;
  }
  .rfq-grid-icon{
    width:clamp(18px, 2.2vh, 22px);
    height:clamp(18px, 2.2vh, 22px);
  }
  .rfq-btn-content{
    gap:10px;
  }
  .home-inline-layout{
    display:flex;
    align-items:stretch;
    gap:10px;
    margin-top:2px;
    flex-shrink:0;
  }
  .product-gallery{
    gap:10px;
  }
  .product-gallery img{
    width:clamp(72px, 5.6vw, 92px);
    height:clamp(78px, 10.5vh, 105px);
    padding:3px;
    border-radius:8px;
  }
  .home-bottom-grid{
    gap:10px;
  }
  .pod-box, .another-web-box{
    padding:clamp(6px, 0.9vh, 10px) 12px;
    border-radius:10px;
  }
  .pod-header, .aw-header{
    margin-bottom:4px;
    padding-bottom:3px;
  }
  .pod-title, .aw-title{
    font-size:clamp(11px, 1.25vh, 12.5px);
  }
  .pod-date{
    font-size:10px;
  }
  .pod-content{
    font-size:clamp(9.5px, 1.15vh, 11px);
    gap:3px;
  }
  .aw-list{
    font-size:clamp(9.5px, 1.15vh, 11px);
    padding-left:14px;
    gap:3px;
  }
  .footer-text, .detail-footer{
    padding:clamp(4px, 0.6vh, 8px) 4px 2px;
    font-size:clamp(10px, 1.15vh, 11.5px);
    margin-top:auto;
    flex-shrink:0;
  }
  .ai-body{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(8px, 1.2vh, 14px);
    overflow:hidden;
  }
  .chat-stage{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
  }
  .ai-messages-box{
    position:absolute;
    inset:0;
    overflow-y:auto;
    padding-right:4px;
  }
  .ai-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .ai-empty-state p{
    margin:4px 0 8px;
    font-size:clamp(12px, 1.4vh, 14px);
  }
  .ai-dot-canvas{
    width:clamp(85px, 12vh, 125px);
    height:clamp(85px, 12vh, 125px);
  }
  .evo-quick-questions{
    margin:6px 0;
    flex-shrink:0;
  }
  .evo-quick-chips{
    gap:6px;
  }
  .evo-chip{
    font-size:clamp(10.5px, 1.2vh, 12px);
    padding:5px 10px;
  }
  .ai-input-box{
    min-height:clamp(42px, 5.4vh, 50px);
    padding:4px 10px;
    flex-shrink:0;
    margin-top:4px;
  }
  .ai-input-box input{
    font-size:clamp(12.5px, 1.4vh, 14.5px);
  }
  .ai-input-box button{
    width:clamp(34px, 4.2vh, 42px);
    height:clamp(34px, 4.2vh, 42px);
  }
}

@media (max-width:760px){
  html, body{ height:auto; overflow-x:hidden; }
  body{ background-attachment:scroll; }

  .main-wrapper{ display:flex; flex-direction:column; width:100%; padding:10px 8px; margin:0; }
  .home-inline-layout{ flex-direction:column; }
  .home-bottom-grid{ grid-template-columns:minmax(0, 1fr); }
  .menu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .menu-half, .menu-rfq{ grid-column:1/-1; }

  .right-panel-box{ height:calc(100dvh - 30px); display:flex; flex-direction:column; margin-top:15px; }
  .ai-body{ flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:8px !important; }

  .chat-stage{ min-height:160px !important; flex:1; position:relative; overflow:hidden; }
  .ai-messages-box{ position:absolute; inset:0; overflow-y:auto; padding-right:4px; }

  .evo-quick-questions{ margin:4px 0 !important; padding:0 !important; }
  .evo-quick-chips{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:6px !important; }
  .evo-chip{ font-size:10px !important; padding:6px 8px !important; text-align:center; white-space:nowrap; }

  .ai-input-box{ min-height:52px !important; padding:6px 10px !important; }
  .ai-input-box input{ font-size:14px !important; }
  .ai-input-box button{ width:38px !important; height:38px !important; }
}


/* ==========================================================================
   ENTERPRISE ENHANCEMENTS: LOGO DOT LIGHT, CABLE CALC, DUAL MODE & ESTIMATOR
   ========================================================================== */

/* Logo Neon Running Light Ring */
.company-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.logo-neon-container {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 11, 40, 0.9);
  box-shadow: 0 0 16px rgba(93, 232, 245, 0.45);
}

.logo-neon-container::before {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(
    from var(--running-light-angle, 0deg),
    transparent 0deg 240deg,
    var(--cyan) 290deg,
    #ffffff 335deg,
    var(--pink) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: globalRunningLight 2.2s linear infinite;
  pointer-events: none;
}

.main-company-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(93, 232, 245, 0.6));
  transition: transform 0.3s ease;
}

.logo-neon-container:hover .main-company-logo {
  transform: scale(1.08);
}

.company-titles {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Dual-Mode Badge (Public / Private) */
.ai-header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.evo-mode-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.evo-mode-badge.public {
  background: rgba(93, 232, 245, 0.12);
  border: 1px solid rgba(93, 232, 245, 0.4);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(93, 232, 245, 0.2);
}

.evo-mode-badge.private {
  background: rgba(217, 106, 214, 0.25);
  border: 1px solid var(--pink);
  color: #ffc2fa;
  box-shadow: 0 0 16px rgba(217, 106, 214, 0.6);
  animation: rfqNeonPulse 2s infinite alternate;
}

/* RFQ Live Cable Calculation Box */
.cable-calc-box {
  grid-column: 1 / -1;
  margin: 6px 0 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(93, 232, 245, 0.05);
  border: 1px solid rgba(93, 232, 245, 0.3);
  box-shadow: inset 0 0 12px rgba(93, 232, 245, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cable-calc-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cable-calc-body {
  font-size: 13.5px;
  color: #ffffff;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cable-calc-val {
  font-size: 18px;
  font-weight: bold;
  color: var(--green);
  text-shadow: 0 0 10px rgba(25, 217, 107, 0.5);
  font-family: monospace;
}

.cable-calc-formula {
  font-size: 11.5px;
  color: rgba(244, 248, 255, 0.65);
}

/* Interactive Cost & Radius Estimator */
.estimator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.estimator-card {
  position: relative;
  border-radius: 12px;
  padding: 12px;
  background: rgba(43, 142, 240, 0.04);
  border: 1px solid rgba(93, 232, 245, 0.2);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.estimator-card:hover, .estimator-card.is-selected {
  border-color: var(--cyan);
  background: rgba(93, 232, 245, 0.1);
  box-shadow: 0 0 15px rgba(93, 232, 245, 0.25);
  transform: translateY(-2px);
}

.estimator-card-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--cyan);
}

.estimator-card-radius {
  font-size: 11px;
  color: var(--green);
  font-family: monospace;
}

.estimator-card-desc {
  font-size: 11px;
  color: rgba(244, 248, 255, 0.7);
  line-height: 1.4;
}

.estimator-result-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(5, 13, 53, 0.7);
  border: 1px solid rgba(217, 106, 214, 0.3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.estimator-action-btn {
  margin-top: 6px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #19d96b, #00c2ff);
  border: 0;
  border-radius: 8px;
  color: #040a2b;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s;
}

.estimator-action-btn:hover {
  opacity: 0.9;
}

/* AI Speech Synthesis Audio Button */
.evo-voice-btn {
  background: transparent;
  border: 0;
  color: var(--cyan);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
}

.evo-voice-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.bot-media-card {
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(93, 232, 245, 0.25);
  background: rgba(0, 0, 0, 0.3);
}

.bot-media-img {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  display: block;
}

.bot-media-caption {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--cyan);
  background: rgba(4, 11, 40, 0.85);
}

.bot-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(217, 106, 214, 0.15);
  border: 1px solid var(--pink);
  color: #ffc2fa;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
}

.bot-pdf-btn:hover {
  background: var(--pink);
  color: #040a2b;
}

/* =========================================================================
 * RFQ Result Card & Instant Action Buttons (Evo.ai Automation)
 * ========================================================================= */
.rfq-result-card {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(8, 24, 60, 0.9);
  border: 1px solid rgba(93, 232, 245, 0.5);
  box-shadow: 0 0 20px rgba(93, 232, 245, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeIn 0.4s ease-out;
}

.rfq-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
}

.rfq-badge-success {
  font-size: 13px;
  font-weight: 700;
  color: #19d96b;
  text-shadow: 0 0 10px rgba(25, 217, 107, 0.4);
}

.rfq-result-id {
  font-family: monospace;
  font-size: 12px;
  color: #5de8f5;
  background: rgba(93, 232, 245, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.rfq-result-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rfq-result-lead {
  font-size: 13px;
  color: #eaf5ff;
  margin: 0;
  line-height: 1.5;
}

.rfq-result-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12.5px;
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.rfq-result-details strong {
  color: #5de8f5;
}

.rfq-result-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 600px) {
  .rfq-result-details, .rfq-result-buttons {
    grid-template-columns: 1fr;
  }
}

.rfq-btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.rfq-btn-download:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.rfq-btn-brosur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.rfq-btn-brosur:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.rfq-btn-instalasi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.rfq-btn-instalasi:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.rfq-btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 12px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
  transition: all 0.2s ease;
  text-align: center;
}

.rfq-btn-wa:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.rfq-btn-new {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: 0.2s;
  margin-top: 4px;
}

.rfq-btn-new:hover {
  border-color: #5de8f5;
  color: #5de8f5;
}