/* =========================================================
   V2.4.1 PREMIUM VISUAL UI HOTFIX
   Responsive containment + premium icon system + subtle motion
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:clip!important}
body{position:relative}
main,section,header,footer,.wrap,.pagehero,.smartHero,.smartSection,.visualSection{min-width:0;max-width:100%}
img,svg,canvas,video{max-width:100%;height:auto}
.smartHeroGrid>*,.smartBody>*,.visualBody>*,.visualGrid>*,.aiVisionGrid>*,.smartAssistantBanner>*,.grid>*{min-width:0}

.noise:after{content:"";position:absolute;inset:-25% -10%;background:linear-gradient(105deg,transparent 35%,rgba(31,187,255,.035) 48%,rgba(92,87,255,.045) 52%,transparent 65%);transform:translateX(-35%);animation:ttiScreenSweep 13s ease-in-out infinite;will-change:transform}
@keyframes ttiScreenSweep{0%,18%{transform:translateX(-45%)}58%,100%{transform:translateX(45%)}}

.card,.formulaCard,.indexHubCallout,.smartShell,.visualShell,.aiVisionPanel,.smartAssistantBanner{position:relative;isolation:isolate}
.card:after,.formulaCard:after,.smartAssistantBanner:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.045) 50%,transparent 68%);transform:translateX(-125%);transition:transform .7s ease}
.card:hover:after,.formulaCard:hover:after,.smartAssistantBanner:hover:after{transform:translateX(125%)}
.card,.formulaCard,.btn,.smartTiny,.visualAction,.aiBtn,.quickbtn{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.card:hover,.formulaCard:hover{transform:translateY(-4px);border-color:rgba(92,193,255,.28);box-shadow:0 24px 64px rgba(0,0,0,.22),0 0 34px rgba(46,142,255,.06)}
.btn:hover,.smartTiny:hover,.visualAction:hover,.aiBtn:hover,.quickbtn:hover{transform:translateY(-2px)}

.premiumIcon,.civilCard .icon,.formulaMiniIcon{filter:drop-shadow(0 14px 24px rgba(24,119,255,.16))}
.civilCard .icon{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(30,129,255,.13),rgba(35,220,255,.04));border:1px solid rgba(87,190,255,.18);overflow:hidden;font-size:0}
.civilCard .icon img{width:100%;height:100%;object-fit:contain;display:block}

.premiumAssistantVisual{height:auto!important;min-height:290px!important;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:20px 10px}
.premiumAssistantCore{position:relative;width:142px;height:142px;border-radius:42px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(70,223,255,.2),transparent 45%),linear-gradient(145deg,rgba(17,63,130,.9),rgba(4,20,46,.95));border:1px solid rgba(104,219,255,.35);box-shadow:0 28px 70px rgba(0,0,0,.34),0 0 48px rgba(30,150,255,.16),inset 0 1px rgba(255,255,255,.12);animation:assistantFloat 5.8s ease-in-out infinite}
.premiumAssistantCore:before,.premiumAssistantCore:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(94,201,255,.16);inset:-12px;animation:corePulse 3.8s ease-out infinite}
.premiumAssistantCore:after{inset:-25px;animation-delay:1.2s}
.premiumAssistantCore img{width:94px;height:94px}
@keyframes assistantFloat{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-6px) rotateX(2deg)}}
@keyframes corePulse{0%{opacity:.05;transform:scale(.86)}45%{opacity:.5}100%{opacity:0;transform:scale(1.12)}}

.assistantDomainMatrix{width:min(100%,330px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.assistantDomainCell{position:static!important;transform:none!important;inset:auto!important;display:flex!important;align-items:center;gap:9px;min-width:0;min-height:52px;padding:9px 11px!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(9,30,62,.92),rgba(5,18,39,.92))!important;border:1px solid rgba(88,174,255,.16)!important;color:#dcebff!important;font-size:10px!important;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.assistantDomainCell img{width:32px;height:32px;flex:0 0 32px}
.assistantDomainCell b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.premiumProcessVisual{height:auto!important;min-height:0!important;display:flex!important;flex-direction:column;gap:15px;align-items:center;justify-content:center;padding:22px;border:1px solid rgba(73,166,255,.13);border-radius:26px;background:radial-gradient(circle at 50% 22%,rgba(27,168,255,.13),transparent 48%),linear-gradient(155deg,rgba(5,20,44,.88),rgba(3,12,29,.92));overflow:hidden}
.premiumProcessCore{width:130px;height:130px;border-radius:38px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(13,83,169,.9),rgba(4,28,68,.95));border:1px solid rgba(90,208,255,.32);box-shadow:0 28px 72px rgba(0,0,0,.3),0 0 44px rgba(29,157,255,.13)}
.premiumProcessCore img{width:88px;height:88px}
.premiumProcessGrid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.premiumProcessStep{display:flex;align-items:center;gap:9px;min-width:0;padding:10px;border-radius:13px;border:1px solid rgba(83,171,255,.14);background:rgba(255,255,255,.025);color:#b9d8f3;font-size:9px}
.premiumProcessStep b{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:linear-gradient(145deg,#118cdf,#445fff);color:white;font-size:8px;flex:0 0 27px}
.premiumProcessStep span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.visualShell,.aiVisionPanel,.smartShell{width:100%;max-width:100%;min-width:0;overflow:hidden}
.visualBody,.visualMain,.visualGrid,.visualCard,.visualControls,.visualResults,.aiVisionGrid,.aiVisionControl,.aiReportBox,.aiReport,.aiReportSection,.smartConversation,.smartMessages,.smartBubble{min-width:0;max-width:100%}
.visualMain,.visualSide{width:100%;max-width:100%;min-width:0}
.visualSelect,.visualTextarea,.visualInput,.aiSelect,.aiTextarea,textarea,input,select,button{max-width:100%;min-width:0}
.visualTiny,.visualAction,.aiBtn,.smartTiny,.btn{overflow-wrap:anywhere;word-break:normal;white-space:normal;line-height:1.25;text-align:center}
.visualStat b,.visualOcr,.aiReportSection,.aiSpec b,.smartBubble,.smartCalc,.smartData{overflow-wrap:anywhere;word-break:break-word}
.aiVisionPanel{outline:1px solid rgba(67,194,255,.05);outline-offset:-8px}
.aiVisionPanel:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 25%,rgba(59,198,255,.035) 48%,transparent 70%);transform:translateX(-120%);animation:aiPanelSweep 10s ease-in-out infinite}
@keyframes aiPanelSweep{0%,24%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
.aiVisionPanel>*{position:relative;z-index:1}

@media(max-width:1024px){
  .smartHeroGrid{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .smartHeroGrid>*{width:100%;max-width:100%}
  .smartArchitecture{width:100%!important;max-width:100%!important;margin-inline:0!important}
  .visualBody{grid-template-columns:minmax(0,1fr)!important}
  .visualSide{border-right:0!important;border-bottom:1px solid rgba(94,144,213,.12)}
  .visualGrid,.aiVisionGrid{grid-template-columns:minmax(0,1fr)!important}
  .smartAssistantBanner{grid-template-columns:minmax(0,1fr)!important}
  .premiumAssistantVisual{min-height:250px!important}
}
@media(max-width:620px){
  .wrap,.smartHero .wrap,.smartSection .wrap,.visualSection>.wrap{width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;margin-left:auto!important;margin-right:auto!important}
  .smartHero{padding-left:0!important;padding-right:0!important}
  .smartHero h1{max-width:100%;font-size:clamp(29px,9.2vw,40px)!important;line-height:1.04!important;overflow-wrap:anywhere}
  .smartHero p{max-width:100%;overflow-wrap:anywhere}
  .premiumProcessVisual{padding:13px;border-radius:19px}
  .premiumProcessCore{width:98px;height:98px;border-radius:29px}.premiumProcessCore img{width:68px;height:68px}
  .premiumProcessGrid{gap:7px}.premiumProcessStep{padding:8px 7px;font-size:8px}.premiumProcessStep b{width:24px;height:24px;flex-basis:24px}
  .smartShell,.visualShell,.aiVisionPanel{border-radius:18px!important}
  .smartTopbar,.visualTopbar,.visualMain,.visualSide,.aiVisionPanel{padding-left:13px!important;padding-right:13px!important}
  .smartTopActions,.visualTopActions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;overflow:visible!important}
  .smartTiny,.visualTiny{width:100%;min-height:38px;padding:8px 6px!important;font-size:8px!important}
  .visualUploader,.visualModeGrid,.visualMeta,.visualBands,.aiButtonRow,.aiReportActions{grid-template-columns:minmax(0,1fr)!important}
  .visualUploadBtn,.visualAction,.aiBtn{width:100%;min-height:46px;padding:10px!important;font-size:10px}
  .visualPreview{min-height:190px!important}
  .visualTopbar{align-items:flex-start!important}
  .visualTopbar h2{font-size:21px!important}
  .aiVisionHead h3{font-size:20px!important}
  .assistantDomainMatrix{width:100%;max-width:320px}
  .assistantDomainCell{min-height:48px;padding:8px!important}
  .premiumAssistantCore{width:118px;height:118px;border-radius:35px}.premiumAssistantCore img{width:80px;height:80px}
}
@media(max-width:380px){
  .smartTopActions{grid-template-columns:1fr!important}
  .assistantDomainMatrix{grid-template-columns:1fr 1fr}
  .assistantDomainCell b{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .noise:after,.premiumAssistantCore,.premiumAssistantCore:before,.premiumAssistantCore:after,.aiVisionPanel:before{animation:none!important}
  .card,.formulaCard,.btn,.smartTiny,.visualAction,.aiBtn,.quickbtn{transition:none!important}
}


/* =========================================================
   V2.4.1.2 — ACTION BUTTONS READABILITY HOTFIX
   LOCK: no other visual/layout areas are changed.
   ========================================================= */

/* Keep action labels horizontal and readable everywhere. */
.visualTopActions{
  min-width:max-content;
}
.visualTopActions .visualTiny{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
}
.visualTopActions .visualTiny::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  filter:drop-shadow(0 5px 9px rgba(52,157,255,.22));
}
.visualTopActions .visualTiny:nth-child(1)::before{background-image:url("/assets/icons/action-text.svg")}
.visualTopActions .visualTiny:nth-child(2)::before{background-image:url("/assets/icons/action-copy.svg")}
.visualTopActions .visualTiny:nth-child(3)::before{background-image:url("/assets/icons/action-tools.svg")}

@media(max-width:620px){
  /* The heading gets the whole row first; actions sit below it as a clean dock. */
  .visualTopbar{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:16px!important;
  }
  .visualTopbar>div:first-child{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .visualTopActions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow:visible!important;
  }
  .visualTopActions .visualTiny{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:10px 7px!important;
    border-radius:14px!important;
    font-size:10px!important;
    line-height:1.1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    background:
      linear-gradient(145deg,rgba(13,42,83,.96),rgba(5,20,43,.96))!important;
    border:1px solid rgba(96,183,255,.19)!important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.045),
      0 10px 24px rgba(0,0,0,.13)!important;
  }
  .visualTopActions .visualTiny::before{
    width:17px;
    height:17px;
    flex-basis:17px;
  }
}

/* On very narrow phones keep horizontal text, but stack buttons for zero squeeze. */
@media(max-width:350px){
  .visualTopActions{
    grid-template-columns:1fr!important;
  }
  .visualTopActions .visualTiny{
    justify-content:flex-start!important;
    padding-inline:14px!important;
  }
}