:root{
  --bg:#0B0F14;
  --panel:#0E131B;
  --card:#121826;
  --ink:#EAF0FF;
  --muted:#9AA4BF;
  --border:rgba(234,240,255,0.12);
  --cyan:#00E5FF;
  --magenta:#D946EF;
  --orange:#FF8A3D;
  --shadow:0 18px 60px rgba(0,0,0,0.55);

  --topH:62px;
  --footerH:64px;
  --toolW:380px;
  --gap:14px;
}

*{box-sizing:border-box}

html,body{
  height:100%;
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
a,
input,
select,
textarea,
[role="button"],
.ddBtn,
.menuBtn,
.newsMiniBtn,
.rpClose,
.rpMax,
.chatFs,
.chatClose,
.chatAttach,
.chatSend,
.chatActionBtn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* =========================
   BACKGROUND
========================= */
.bg,
.bgImg,
.bgFx,
.bgGrid{
  pointer-events:none !important;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
}

.bgImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
  filter:saturate(1.05) contrast(1.05);
  transform:scale(1.02);
}

.bgFx{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,15,20,.55), rgba(11,15,20,.92));
}

.bgGrid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(234,240,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,240,255,.04) 1px, transparent 1px);
  background-size:46px 46px;
  opacity:.25;
}

/* =========================
   TOP BAR
========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:rgba(11,15,20,.70);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  overflow:visible !important;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}

.brandMark{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  color:#001014;
  flex:0 0 auto;
}

.brandName{
  font-weight:900;
  letter-spacing:.5px;
  line-height:1;
}

.brandSub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.topActions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.pill{
  border:1px solid var(--border);
  background:rgba(234,240,255,.06);
  color:var(--ink);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:900;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.pill:hover{
  border-color:rgba(0,229,255,0.55);
  background:rgba(234,240,255,.10);
}

/* =========================
   TOP NAV DROPDOWNS
========================= */
.topNav{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  justify-content:center;
  min-width:0;
  overflow:visible !important;
}

.dd{
  position:relative;
  z-index:400;
  overflow:visible !important;
  flex:0 0 auto;
}

.ddBtn{
  border:1px solid var(--border);
  background:rgba(234,240,255,.05);
  color:rgba(234,240,255,0.90);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:900;
  transition:border-color .18s ease, background .18s ease;
  position:relative;
  z-index:2;
}

.ddBtn:hover{
  border-color:rgba(0,229,255,0.55);
}

.ddPanel{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:280px;
  width:320px;
  max-width:min(320px, calc(100vw - 20px));
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(234,240,255,0.14);
  background:rgba(11,15,20,0.98);
  backdrop-filter:blur(12px);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  flex-direction:column;
  gap:8px;
  z-index:9999;
}

.dd.open .ddPanel{
  display:flex !important;
}

.ddPanel .menuBtn{
  border-radius:14px;
  min-height:50px;
}

.ddPanel .mSub{
  display:block;
}

/* =========================
   MAIN LAYOUT
========================= */
.scene{
  padding:var(--gap);
}

.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap);
  align-items:start;
  min-height:calc(100dvh - var(--topH) - var(--footerH) - (var(--gap) * 2));
  min-width:0;
}

.layout.hasTool{
  grid-template-columns:var(--toolW) minmax(0,1fr);
}

#rightPanel[hidden]{
  display:none !important;
  pointer-events:none !important;
}

.centerHero{
  min-width:0;
  border:1px solid rgba(234,240,255,0.10);
  background:rgba(11,15,20,0.18);
  backdrop-filter:none;
  border-radius:18px;
  min-height:min(720px, calc(100dvh - 140px));
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,420px);
  gap:18px;
  align-items:stretch;
  padding:24px;
}

.centerHero > *{
  position:relative;
  z-index:10;
  min-width:0;
}

.centerHero.is-single{
  grid-template-columns:minmax(0,1fr) !important;
}

.centerHero.is-single > .newsWidget,
.centerHero.is-single > .defectWidget{
  grid-column:1 / -1;
  width:100%;
  max-width:none;
  justify-self:stretch;
  align-self:stretch;
}

/* =========================
   NEWS WIDGET
========================= */
.newsWidget{
  position:relative;
  width:100%;
  min-width:0;
  max-width:none;
  height:100%;
  min-height:460px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:24px;
  background:rgba(7,18,28,0.72);
  border:1px solid rgba(120,200,255,0.18);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  z-index:20;
  overflow:hidden;
  align-self:stretch;
  justify-self:stretch;
}

.newsWidget[hidden]{
  display:none !important;
}

.newsWidgetHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.newsWidgetEyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7dd3fc;
  opacity:.9;
}

.newsWidgetTitle{
  margin:4px 0 0;
  font-size:22px;
  line-height:1.1;
  color:#eef6ff;
}

.newsWidgetControls{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.newsMiniBtn{
  min-width:36px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#eef6ff;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.newsMiniBtn:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.18);
}

.newsMiniBtn:active{
  transform:translateY(1px);
}

.newsWidgetMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  flex-wrap:wrap;
}

.newsTopicBadge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(120,200,255,0.12);
  border:1px solid rgba(120,200,255,0.2);
  color:#dff4ff;
  font-size:13px;
  font-weight:700;
  max-width:100%;
}

.newsWidgetStatus{
  font-size:13px;
  color:#d8e6f5;
  opacity:.9;
  flex:0 0 auto;
}

.newsWidgetBody{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.newsWidgetItems{
  height:100%;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-right:4px;
  min-width:0;
}

.newsWidgetItems::-webkit-scrollbar{
  width:8px;
}

.newsWidgetItems::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.16);
  border-radius:999px;
}

.newsCard{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  min-width:0;
}

.newsCardTop{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.newsBadge{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  color:#dcecff;
}

.newsCardTitle{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.35;
  word-break:break-word;
}

.newsCardTitle a{
  color:#ffffff;
  text-decoration:none;
}

.newsCardTitle a:hover{
  text-decoration:underline;
}

.newsCardText{
  font-size:13px;
  line-height:1.5;
  color:#d9e7f5;
  opacity:.95;
  overflow-wrap:anywhere;
}

.newsCardActions{
  margin-top:12px;
}

.newsLinkBtn{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  background:rgba(108,92,231,0.22);
  border:1px solid rgba(180,160,255,0.22);
  transition:border-color .18s ease, background .18s ease;
}

.newsLinkBtn:hover{
  background:rgba(108,92,231,0.30);
  border-color:rgba(180,160,255,0.34);
}

.newsWidgetFooter{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:#cddbeb;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:10px;
  flex-wrap:wrap;
}

.newsEmpty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  padding:20px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  color:#d6e4f3;
}

/* =========================
   DEFECT DASHBOARD WIDGET
========================= */
.defectWidget{
  position:relative;
  width:100%;
  min-width:0;
  min-height:460px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:24px;
  background:rgba(7,18,28,0.72);
  border:1px solid rgba(120,200,255,0.18);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  z-index:20;
}

.defectWidget[hidden]{
  display:none !important;
}

.defectWidgetHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.defectWidgetControls{
  display:flex;
  gap:8px;
}

.defectWidgetMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.defectWidgetBody{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.defectChartWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
  padding:6px 0;
}

#defectChart{
  display:block;
  width:100%;
  max-width:280px;
  height:auto;
}

.defectLegend{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:4px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.defectLegend::-webkit-scrollbar{
  width:8px;
}

.defectLegend::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.16);
  border-radius:999px;
}

.defectLegendRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
}

.defectLegendLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.defectDot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
}

.defectLegendName{
  font-size:13px;
  font-weight:700;
  color:#eef6ff;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.defectLegendValue{
  font-size:13px;
  font-weight:800;
  color:#ffffff;
  flex:0 0 auto;
}

.defectLegendSub{
  font-size:11px;
  color:#cddbeb;
  opacity:.9;
}

.defectEmpty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
  padding:20px;
  text-align:center;
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  color:#d6e4f3;
}

/* =========================
   TOOL PANEL
========================= */
#rightPanel{
  border:1px solid rgba(234,240,255,0.14);
  background:rgba(11,15,20,0.78);
  backdrop-filter:blur(12px);
  border-radius:18px;
  box-shadow:0 18px 70px rgba(0,0,0,0.55);
  overflow:hidden;
  height:min(720px, calc(100dvh - 140px));
  position:sticky;
  top:78px;
  z-index:40;
  min-width:0;
  pointer-events:auto;
}

#rightPanel[hidden] *{
  pointer-events:none !important;
}

.rpTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(234,240,255,0.10);
  min-height:57px;
}

.rpTitle{
  font-weight:900;
  letter-spacing:.2px;
}

.rpActions{
  display:flex;
  align-items:center;
  gap:8px;
}

.rpClose,
.rpMax{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(234,240,255,0.16);
  background:rgba(234,240,255,0.08);
  color:rgba(234,240,255,0.92);
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}

.rpClose:hover,
.rpMax:hover{
  border-color:rgba(0,229,255,0.55);
}

#rpFrame{
  width:100%;
  height:calc(100% - 57px);
  border:none;
  background:transparent;
  display:block;
  min-width:0;
  pointer-events:auto;
}

/* =========================
   MENU BUTTONS
========================= */
.menuBtn{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(234,240,255,0.06);
  color:rgba(234,240,255,0.92);
  padding:10px 10px 9px;
  font-weight:900;
  text-align:left;
  cursor:pointer;
  min-height:42px;
  display:flex;
  flex-direction:column;
  gap:2px;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
  position:relative;
  z-index:2;
}

.menuBtn:hover{
  border-color:rgba(0,229,255,0.55);
  background:rgba(234,240,255,0.08);
}

.menuBtn.isActive{
  border-color:rgba(0,229,255,0.85);
  box-shadow:0 0 0 2px rgba(0,229,255,0.12);
}

.mIcon{
  font-size:15px;
  margin-right:8px;
}

.mSub{
  font-size:12px;
  font-weight:700;
  color:rgba(234,240,255,0.70);
  line-height:1.2;
  display:none;
}

.menuBtn:hover .mSub{
  display:block;
}

/* =========================
   OPTIONAL FULLSCREEN TOOL MODAL
========================= */
#rpBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:9998;
}

#rpBackdrop[hidden]{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}

#rpBackdrop.open{
  opacity:1;
  pointer-events:auto;
}

#rightPanel.open{
  position:fixed !important;
  inset:14px !important;
  width:auto !important;
  height:calc(100dvh - 28px) !important;
  max-width:1280px !important;
  margin:auto !important;
  background:rgba(10,14,20,.94) !important;
  border:1px solid rgba(234,240,255,.16) !important;
  border-radius:18px !important;
  box-shadow:0 30px 90px rgba(0,0,0,.60) !important;
  z-index:9999 !important;
}

#rightPanel.open #rpFrame{
  height:calc(100% - 57px) !important;
  background:#0b0f14 !important;
}

body.toolModalOpen .layout{
  grid-template-columns:minmax(0,1fr) !important;
}

body.toolModalOpen #rightPanel{
  grid-area:auto !important;
}

body.toolModalOpen .centerHero{
  filter:none;
  opacity:1;
  pointer-events:auto;
}

body.toolModalOpen .bg{
  filter:none;
  opacity:1;
}

body.toolModalOpen .topbar,
body.toolModalOpen .footer{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   CHAT
========================= */
.chat{
  position:fixed;
  right:14px;
  left:auto;
  bottom:14px;
  width:min(520px, calc(100vw - 28px));
  max-height:min(74dvh, 720px);
  background:rgba(11,15,20,0.92);
  border:1px solid rgba(234,240,255,0.14);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.60);
  overflow:hidden;
  z-index:80;
}

.chat[hidden]{
  display:none !important;
  pointer-events:none !important;
}

.chat.is-open{
  display:block;
}

.chat.is-fullscreen{
  inset:10px;
  width:auto;
  max-height:none;
  border-radius:18px;
  z-index:10000;
}

.chatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(234,240,255,0.10);
}

.chatTitle{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.chatDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  flex:0 0 auto;
}

.chatName{
  font-weight:900;
}

.chatSub{
  font-size:12px;
  color:rgba(234,240,255,0.70);
  margin-top:2px;
}

.chatHeaderActions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.chatFs,.chatClose{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(234,240,255,0.16);
  background:rgba(234,240,255,0.08);
  color:rgba(234,240,255,0.92);
  cursor:pointer;
}

.chatFs:hover,.chatClose:hover{
  border-color:rgba(0,229,255,0.55);
}

.chatBody{
  padding:12px;
  overflow:auto;
  max-height:calc(74dvh - 120px);
}

.chat.is-fullscreen .chatBody{
  max-height:calc(100dvh - 160px);
}

.msg{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(234,240,255,0.10);
  background:rgba(0,0,0,0.22);
  white-space:pre-wrap;
  line-height:1.35;
  font-size:13px;
  margin-bottom:10px;
  max-width:100%;
  overflow-wrap:anywhere;
}

.msg.user{
  margin-left:auto;
  background:rgba(0,229,255,0.10);
  border-color:rgba(0,229,255,0.18);
}

.msg.ai{
  margin-right:auto;
}

.chatActionsWrap{
  margin-bottom:10px;
}

.chatActionsRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chatActionBtn{
  border-radius:14px;
  border:1px solid rgba(234,240,255,0.14);
  background:rgba(234,240,255,0.08);
  color:rgba(234,240,255,0.92);
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
}

.chatActionBtn:hover{
  border-color:rgba(0,229,255,0.55);
}

.chatActionBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.chatInput{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid rgba(234,240,255,0.10);
  align-items:center;
}

#chatNote{
  flex:1;
  min-width:0;
  border-radius:14px;
  border:1px solid rgba(234,240,255,0.14);
  background:rgba(0,0,0,0.22);
  color:rgba(234,240,255,0.92);
  padding:10px 12px;
  outline:none;
}

#chatNote:focus{
  border-color:rgba(0,229,255,0.55);
}

.chatAttach,.chatSend{
  border-radius:14px;
  border:1px solid rgba(234,240,255,0.14);
  background:rgba(234,240,255,0.08);
  color:rgba(234,240,255,0.92);
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
  transition:border-color .18s ease, background .18s ease;
}

.chatAttach:hover,.chatSend:hover{
  border-color:rgba(0,229,255,0.55);
}

.chat-upload-preview{
  width:100%;
}

/* =========================
   FOOTER
========================= */
.footer{
  padding:12px 16px;
  border-top:1px solid rgba(234,240,255,0.10);
  background:rgba(11,15,20,.45);
  backdrop-filter:blur(10px);
}

.footerBrand{
  font-weight:900;
}

.footerSub{
  font-size:12px;
  color:rgba(234,240,255,0.70);
  margin-top:2px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px){
  .centerHero{
    grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  }

  #defectChart{
    max-width:250px;
  }
}

@media (max-width: 980px){
  .topbar{
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
  }

  .topActions{
    flex:0 0 auto;
  }

  .topNav{
    display:flex;
    order:3;
    width:100%;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
    padding:2px 2px 6px;
    overflow:visible !important;
  }

  .ddBtn{
    white-space:nowrap;
    font-size:14px;
    line-height:1.1;
    padding:9px 12px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .ddPanel{
    top:calc(100% + 8px);
    left:0;
    right:auto;
    width:min(320px, calc(100vw - 20px));
    max-width:calc(100vw - 20px);
    max-height:60dvh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .dd:last-child .ddPanel,
  .dd:nth-last-child(2) .ddPanel{
    left:auto;
    right:0;
  }

  .layout,
  .layout.hasTool{
    grid-template-columns:1fr;
    grid-template-areas:
      "hero"
      "panel";
  }

  .centerHero{
    grid-area:hero;
    min-height:min(620px, calc(100dvh - 180px));
    grid-template-columns:1fr;
    padding:16px;
  }

  #rightPanel{
    grid-area:panel;
    position:static;
    top:auto;
    height:560px;
  }

  body.toolModalOpen #rightPanel{
    position:fixed !important;
    grid-area:auto !important;
  }

  .chat{
    right:10px;
    bottom:10px;
    width:min(560px, calc(100vw - 20px));
    max-height:min(78dvh, 720px);
  }

  .newsWidget,
  .defectWidget{
    width:100%;
    min-width:0;
  }

  .newsWidget{
    min-height:380px;
    height:auto;
  }

  .defectWidget{
    min-height:380px;
    margin:0;
  }

  .defectChartWrap{
    min-height:240px;
  }

  #defectChart{
    max-width:240px;
  }
}

@media (max-width: 760px){
  #rightPanel{
    height:min(78dvh, 640px);
    border-radius:16px;
  }

  #rightPanel.open{
    inset:8px !important;
    width:auto !important;
    height:calc(100dvh - 16px) !important;
    max-width:none !important;
    border-radius:16px !important;
  }

  .topbar{
    padding:10px 10px;
    gap:8px;
  }

  .brand{
    gap:8px;
  }

  .brandMark{
    width:34px;
    height:34px;
    border-radius:11px;
  }

  .brandName{
    font-size:14px;
  }

  .brandSub{
    display:none;
  }

  .topActions .pill{
    padding:8px 11px;
    min-height:38px;
  }

  .topNav{
    gap:7px;
    margin-top:6px;
    padding-bottom:4px;
    flex-wrap:wrap;
    overflow:visible !important;
  }

  .ddBtn{
    font-size:13px;
    padding:8px 10px;
    min-height:38px;
  }

  .ddPanel{
    top:calc(100% + 7px);
    width:min(300px, calc(100vw - 16px));
    max-width:calc(100vw - 16px);
    border-radius:14px;
    padding:8px;
    max-height:58dvh;
  }

  .ddPanel .menuBtn{
    border-radius:12px;
    min-height:50px;
  }

  .scene{
    padding:10px;
  }

  .centerHero{
    border-radius:16px;
    min-height:min(520px, calc(100dvh - 170px));
    grid-template-columns:1fr;
    padding:12px;
  }

  .chat{
    right:8px;
    left:8px;
    width:auto;
    bottom:8px;
    border-radius:16px;
    max-height:min(82dvh, 720px);
  }

  .chatHeader{
    padding:10px;
  }

  .chatBody{
    padding:10px;
    max-height:calc(82dvh - 122px);
  }

  .chatInput{
    padding:10px;
    gap:6px;
    flex-wrap:wrap;
  }

  #chatNote{
    min-width:100%;
  }

  .chatAttach,
  .chatSend,
  .chatActionBtn{
    min-height:42px;
  }

  .footer{
    padding:10px 12px;
  }

  .newsWidget{
    min-height:360px;
    height:auto;
    padding:14px;
    border-radius:18px;
  }

  .newsWidgetTitle{
    font-size:18px;
  }

  .newsWidgetMeta,
  .defectWidgetMeta{
    flex-direction:column;
    align-items:flex-start;
  }

  .newsCardTitle{
    font-size:15px;
  }

  .newsCardText{
    font-size:12px;
  }

  .defectWidget{
    min-height:360px;
    padding:14px;
    border-radius:18px;
  }

  .defectChartWrap{
    min-height:220px;
  }

  #defectChart{
    max-width:220px;
  }
}

@media (max-width: 480px){
  .topbar{
    padding:8px 8px;
  }

  .brandName{
    font-size:13px;
    letter-spacing:.03em;
  }

  .ddBtn{
    font-size:12px;
    padding:8px 9px;
    min-height:36px;
  }

  .ddPanel{
    width:min(280px, calc(100vw - 12px));
    max-width:calc(100vw - 12px);
    max-height:56dvh;
  }

  #rightPanel{
    height:460px;
  }

  .chat{
    right:6px;
    left:6px;
    bottom:6px;
    border-radius:14px;
  }

  .chat.is-fullscreen{
    inset:6px;
  }

  .newsWidget{
    min-height:340px;
    height:auto;
    padding:12px;
    border-radius:16px;
  }

  .newsMiniBtn{
    min-width:32px;
    height:32px;
  }

  .newsTopicBadge{
    font-size:12px;
    padding:7px 10px;
  }

  .newsWidgetFooter{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .defectWidget{
    min-height:340px;
    padding:12px;
    border-radius:16px;
  }

  .defectLegendRow{
    padding:9px 10px;
  }

  .defectLegendName,
  .defectLegendValue{
    font-size:12px;
  }

  .defectLegendSub{
    font-size:10px;
  }

  .defectChartWrap{
    min-height:200px;
  }

  #defectChart{
    max-width:200px;
  }
}

/* =========================
   CONTACT PAGE / MENU POLISH
========================= */
.dd[data-dd="contact"] .ddBtn{
  background:rgba(217,70,239,0.08);
  border-color:rgba(217,70,239,0.20);
}

.dd[data-dd="contact"] .ddBtn:hover{
  border-color:rgba(217,70,239,0.45);
  background:rgba(217,70,239,0.12);
}

.dd[data-dd="contact"] .menuBtn.isActive{
  border-color:rgba(217,70,239,0.72);
  box-shadow:0 0 0 2px rgba(217,70,239,0.12);
}

.dd[data-dd="contact"] .mIcon{
  margin-right:8px;
}

body:not(.toolModalOpen) .centerHero{
  transition:border-color .18s ease, background .18s ease;
}

/* =========================
   CONTACT FULLSCREEN PANEL
========================= */
#rightPanel.open[data-tool="contact"]{
  position:fixed !important;
  inset:12px !important;
  width:auto !important;
  height:calc(100dvh - 24px) !important;
  max-width:1400px !important;
  margin:auto !important;
  border-radius:20px !important;
  z-index:9999 !important;
}

#rightPanel.open[data-tool="contact"] #rpFrame{
  height:calc(100% - 57px) !important;
  background:#0b0f14 !important;
}
/* =========================================================
   COATDOCTOR MOBILE / TOUCH / SAFE-AREA PATCH
========================================================= */

:root{
  --cd-safe-top: env(safe-area-inset-top, 0px);
  --cd-safe-right: env(safe-area-inset-right, 0px);
  --cd-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cd-safe-left: env(safe-area-inset-left, 0px);

  --cd-touch: 46px;
  --cd-radius: 14px;
  --cd-gap: 12px;
}

/* Better box model */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  min-height:100%;
  width:100%;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  min-height:100dvh;
  overscroll-behavior-y:none;
  touch-action:manipulation;
}

/* само за WebKit (Safari / iOS) */
@supports (-webkit-touch-callout: none) {
  body{
    -webkit-text-size-adjust:100%;
  }
}

/* Prevent accidental horizontal overflow */
img,
canvas,
iframe,
video{
  max-width:100%;
  height:auto;
}

/* Make buttons and inputs more touch-friendly */
button,
input,
select,
textarea{
  font:inherit;
}

button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

input,
textarea,
select{
  min-height:var(--cd-touch);
}

/* Topbar safe area */
.topbar{
  padding-top:calc(10px + var(--cd-safe-top));
  padding-left:calc(12px + var(--cd-safe-left));
  padding-right:calc(12px + var(--cd-safe-right));
}

/* Main scene / layout */
.scene{
  min-height:calc(100vh - 80px);
  min-height:calc(100dvh - 80px);
  padding-left:max(12px, var(--cd-safe-left));
  padding-right:max(12px, var(--cd-safe-right));
  padding-bottom:max(12px, var(--cd-safe-bottom));
}

.layout{
  width:100%;
  min-width:0;
}

/* Tool panel / iframe panel */
.toolPanel{
  min-width:0;
  overflow:hidden;
}

.rpTop{
  padding-top:max(10px, var(--cd-safe-top));
  padding-left:12px;
  padding-right:12px;
  gap:10px;
}

.rpActions{
  display:flex;
  align-items:center;
  gap:8px;
}

.rpMax,
.rpClose,
.chatFs,
.chatClose,
.newsMiniBtn{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}

/* Chat panel */
.chat{
  width:min(100%, 460px);
  max-width:100%;
  min-width:0;
  border-radius:18px;
  overflow:hidden;
}

.chatDock{
  max-height:calc(100dvh - 24px - var(--cd-safe-top) - var(--cd-safe-bottom));
}

.chat.is-fullscreen,
.chatDock.is-fullscreen{
  position:fixed;
  inset:0;
  width:100vw;
  width:100dvw;
  height:100vh;
  height:100dvh;
  max-height:none;
  border-radius:0;
  z-index:9999;
  padding-top:var(--cd-safe-top);
  padding-right:var(--cd-safe-right);
  padding-bottom:var(--cd-safe-bottom);
  padding-left:var(--cd-safe-left);
}

.chatHeader{
  position:sticky;
  top:0;
  z-index:2;
  padding:12px;
  gap:10px;
}

.chatHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.chatTitle{
  min-width:0;
}

.chatName,
.chatSub{
  word-break:break-word;
}

.chatBody{
  min-width:0;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:12px;
  gap:10px;
}

.msg{
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.msg img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:12px;
}

/* Chat input area */
.chatInput{
  position:sticky;
  bottom:0;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  gap:8px;
  padding:12px;
  padding-bottom:max(12px, var(--cd-safe-bottom));
  align-items:center;
}

.chatInput input[type="text"],
.chatInput textarea,
#chatNote{
  width:100%;
  min-width:0;
  border-radius:12px;
  padding:12px 14px;
}

.chatAttach,
.chatSend,
#analyzeBtn,
#uploadBtn,
#sendBtn{
  min-height:46px;
  min-width:46px;
  padding:0 14px;
  border-radius:12px;
  white-space:nowrap;
}

/* Chat cards */
.chatResultCard{
  width:100%;
  min-width:0;
  border-radius:16px;
  overflow:hidden;
}

.chatResultTitle{
  font-size:13px;
  line-height:1.3;
  word-break:break-word;
}

.chatResultBody{
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* Action rows */
.chatActionsWrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  min-width:0;
}

.chatActionBtn{
  min-height:46px;
  padding:10px 14px;
  border-radius:12px;
  flex:1 1 220px;
  max-width:100%;
  white-space:normal;
  text-align:left;
  line-height:1.35;
}

/* Home widgets */
.centerHero{
  min-width:0;
}

.newsWidget,
.defectWidget{
  min-width:0;
  overflow:hidden;
  border-radius:18px;
}

.newsWidgetHead,
.defectWidgetHead,
.newsWidgetMeta,
.newsWidgetFooter{
  gap:10px;
}

.newsWidgetTitle{
  word-break:break-word;
}

.newsWidgetBody,
.defectWidgetBody{
  min-width:0;
}

.newsWidgetItems,
.defectLegend{
  min-width:0;
}

.newsEmpty{
  word-break:break-word;
}

/* Defect dashboard */
.defectWidgetBody{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:14px;
  align-items:start;
}

.defectChartWrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

#defectChart{
  width:min(100%, 280px);
  height:auto;
}

.defectLegendRow--rich,
.defectSummaryCard,
.defectSessionRow,
.defectActionRow{
  min-width:0;
}

.defectLegendText,
.defectSummaryValue--small,
.defectActionText,
.defectSessionMeta{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Footer safe area */
.footer{
  padding-left:max(12px, var(--cd-safe-left));
  padding-right:max(12px, var(--cd-safe-right));
  padding-bottom:max(12px, var(--cd-safe-bottom));
}

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1100px){
  .layout{
    display:block;
  }

  .centerHero{
    width:100%;
  }

  .toolPanel{
    width:100%;
    margin-top:12px;
  }

  .defectWidgetBody{
    grid-template-columns:1fr;
  }

  .defectChartWrap{
    justify-content:center;
  }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 820px){
  .topbar{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .brand{
    min-width:0;
  }

  .brandText{
    min-width:0;
  }

  .brandName,
  .brandSub{
    overflow-wrap:anywhere;
  }

  .topNav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    min-width:0;
  }

  .dd{
    flex:1 1 calc(50% - 8px);
    min-width:0;
  }

  .ddBtn{
    width:100%;
    min-height:46px;
    border-radius:12px;
  }

  .ddPanel{
    width:min(100vw - 24px, 420px);
    max-width:100%;
  }

  .menuBtn{
    min-height:46px;
    align-items:flex-start;
  }

  .scene{
    padding-top:10px;
  }

  .centerHero{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .newsWidgetControls,
  .defectWidgetControls{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .chat{
    width:100%;
  }

  .chatDock{
    position:fixed;
    left:max(8px, var(--cd-safe-left));
    right:max(8px, var(--cd-safe-right));
    bottom:max(8px, var(--cd-safe-bottom));
    width:auto;
    max-width:none;
    z-index:4000;
  }

  .chatInput{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "note note"
      "upload send"
      "analyze analyze";
  }

  #chatNote{
    grid-area:note;
  }

  #uploadBtn{
    grid-area:upload;
  }

  #sendBtn{
    grid-area:send;
  }

  #analyzeBtn{
    grid-area:analyze;
    width:100%;
  }

  .chatActionBtn{
    flex:1 1 100%;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 520px){
  .topbar{
    padding-left:max(10px, var(--cd-safe-left));
    padding-right:max(10px, var(--cd-safe-right));
  }

  .scene{
    padding-left:max(10px, var(--cd-safe-left));
    padding-right:max(10px, var(--cd-safe-right));
  }

  .brand{
    gap:10px;
  }

  .brandMark{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  .brandName{
    font-size:16px;
    line-height:1.1;
  }

  .brandSub{
    font-size:11px;
    line-height:1.3;
  }

  .dd{
    flex:1 1 100%;
  }

  .newsWidget,
  .defectWidget{
    border-radius:16px;
  }

  .newsWidgetHead,
  .defectWidgetHead,
  .newsWidgetMeta,
  .newsWidgetFooter{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
  }

  .newsWidgetTitle{
    font-size:18px;
    line-height:1.2;
  }

  .chatHeader{
    padding:10px;
  }

  .chatBody{
    padding:10px;
  }

  .chatInput{
    padding:10px;
    padding-bottom:max(10px, var(--cd-safe-bottom));
  }

  .msg{
    font-size:13px;
    line-height:1.45;
  }

  .chatResultTitle{
    font-size:12px;
  }

  .chatResultBody{
    font-size:12px;
  }

  .chatActionBtn,
  .chatAttach,
  .chatSend,
  #analyzeBtn,
  #uploadBtn,
  #sendBtn{
    min-height:48px;
  }

  #defectChart{
    width:min(100%, 240px);
  }
}

/* =========================================================
   iPhone keyboard / viewport helpers
========================================================= */
@supports (height: 100dvh){
  .chatDock{
    max-height:calc(100dvh - 16px - var(--cd-safe-top) - var(--cd-safe-bottom));
  }

  .scene{
    min-height:calc(100dvh - 80px);
  }
}

/* Better focus for touch and keyboard */
.chatActionBtn:focus-visible,
.chatAttach:focus-visible,
.chatSend:focus-visible,
.ddBtn:focus-visible,
.menuBtn:focus-visible,
.newsMiniBtn:focus-visible,
.rpClose:focus-visible,
.rpMax:focus-visible,
.chatClose:focus-visible,
.chatFs:focus-visible,
#chatNote:focus-visible{
  outline:2px solid rgba(0,229,255,.9);
  outline-offset:2px;
}
.bgFx,
.bgGrid{
  display:none !important;
}

.bgImg{
  filter:none !important;
  opacity:1 !important;
}
/* =========================================================
   COATDOCTOR HOME — EXECUTIVE ENTERPRISE LAYOUT
========================================================= */

.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.centerHero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  width:100%;
  min-width:0;
}

.newsWidget,
.defectWidget{
  width:100%;
  min-width:0;
  max-width:none;
}

/* =========================================================
   HERO DASHBOARD
========================================================= */

.defectWidget--hero{
  position:relative;
  border:1px solid rgba(234,240,255,.12);
  background:
    linear-gradient(180deg, rgba(6,21,31,.84) 0%, rgba(8,18,29,.92) 100%);
  border-radius:24px;
  padding:22px;
  box-shadow:
    0 24px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  overflow:hidden;
}

.defectWidget--hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(0,229,255,.10), transparent 28%),
    radial-gradient(circle at top left, rgba(217,70,239,.10), transparent 24%);
  pointer-events:none;
}

.defectHeroHead{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:14px;
}

.defectHeroTitleWrap{
  min-width:0;
  max-width:980px;
}

.defectHeroTitle{
  margin:6px 0 8px;
  font-size:36px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.02em;
  color:rgba(234,240,255,.98);
}

.defectHeroSub{
  max-width:920px;
  font-size:15px;
  line-height:1.55;
  color:rgba(234,240,255,.78);
}

.defectHeroActions{
  flex:0 0 auto;
}

.defectWidgetMeta--hero{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

/* =========================================================
   EXECUTIVE KPI ROW
========================================================= */

.defectExecutiveTop{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}

.executiveKpiCard{
  border:1px solid rgba(234,240,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:16px 16px 14px;
  min-height:104px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.executiveKpiLabel{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
  margin-bottom:10px;
}

.executiveKpiValue{
  font-size:34px;
  line-height:1;
  font-weight:900;
  color:rgba(234,240,255,.98);
  word-break:break-word;
}

.executiveKpiValue--small{
  font-size:18px;
  line-height:1.25;
}

/* =========================================================
   MAIN DASHBOARD GRID
========================================================= */

.defectExecutiveMain{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(320px, 420px) minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.defectChartPanel,
.defectInsightsPanel{
  border:1px solid rgba(234,240,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:18px;
  min-width:0;
}

.defectChartPanelTitle,
.defectInsightsPanelTitle{
  font-size:13px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.72;
  margin-bottom:12px;
}

.defectChartWrap--hero{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:360px;
  width:100%;
}

#defectChart{
  width:320px;
  height:320px;
  max-width:100%;
}

.defectLegend--hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  width:100%;
  min-width:0;
}

/* =========================================================
   SUMMARY / INSIGHT CARDS
========================================================= */

.defectSummaryCard{
  border:1px solid rgba(234,240,255,.10);
  background:rgba(10,18,30,.42);
  border-radius:18px;
  padding:14px;
  backdrop-filter:blur(8px);
}

.defectSummaryGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.defectSummaryItem{
  border:1px solid rgba(234,240,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  min-height:92px;
}

.defectSummaryLabel{
  font-size:11px;
  line-height:1.2;
  opacity:.72;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.defectSummaryValue{
  font-size:22px;
  line-height:1.08;
  font-weight:900;
  color:rgba(234,240,255,.96);
  word-break:break-word;
}

.defectSummaryValue--small{
  font-size:14px;
  line-height:1.4;
  font-weight:800;
}

.defectSummarySource{
  margin-top:12px;
  font-size:12px;
  line-height:1.55;
  opacity:.84;
  word-break:break-word;
}

/* =========================================================
   RECENT / ACTION LISTS
========================================================= */

.defectSessionList,
.defectActionList{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}

.defectSessionRow,
.defectActionRow{
  border:1px solid rgba(234,240,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}

.defectSessionMain{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}

.defectSessionMeta,
.defectActionText{
  font-size:12px;
  line-height:1.5;
  opacity:.8;
  margin-top:6px;
}

.defectActionTitle{
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}

/* =========================================================
   DEFECT ROWS
========================================================= */

.defectLegendRow--rich{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(234,240,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px 14px;
}

.defectLegendLeft{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}

.defectDot{
  width:12px;
  height:12px;
  border-radius:999px;
  margin-top:6px;
  flex:0 0 auto;
  box-shadow:0 0 14px rgba(255,255,255,.14);
}

.defectLegendText{
  min-width:0;
  flex:1 1 auto;
}

.defectLegendName{
  font-size:14px;
  font-weight:900;
  line-height:1.3;
  word-break:break-word;
}

.defectLegendSub{
  font-size:12px;
  opacity:.86;
  margin-top:5px;
  line-height:1.5;
  word-break:break-word;
}

.defectLegendMeta{
  font-size:11px;
  opacity:.68;
  margin-top:5px;
  line-height:1.45;
  word-break:break-word;
}

.defectLegendValue{
  flex:0 0 auto;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  color:rgba(234,240,255,.96);
}

/* =========================================================
   NEWS — SECONDARY / QUIETER
========================================================= */

.newsWidget--secondary{
  border:1px solid rgba(234,240,255,.10);
  background:rgba(8,18,29,.78);
  border-radius:22px;
  padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.24);
}

.newsWidgetHead--compact{
  margin-bottom:8px;
}

.newsWidget--secondary .newsWidgetTitle{
  font-size:24px;
  line-height:1.15;
}

.newsWidget--secondary .newsWidgetBody{
  margin-top:12px;
}

.newsWidget--secondary .newsWidgetItems{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}

.newsWidget--secondary .newsCard{
  border:1px solid rgba(234,240,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:14px;
}

.newsWidget--secondary .newsCardTitle{
  font-size:18px;
  line-height:1.3;
}

.newsWidget--secondary .newsCardText{
  font-size:13px;
  line-height:1.5;
  opacity:.82;
}

.newsWidget--secondary .newsCardActions{
  margin-top:8px;
}

.newsWidgetFooter{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px){
  .defectExecutiveTop{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .defectExecutiveMain{
    grid-template-columns:minmax(0,1fr);
  }

  .defectSummaryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .defectWidget--hero,
  .newsWidget--secondary{
    padding:16px;
  }

  .defectHeroTitle{
    font-size:28px;
  }

  .defectExecutiveTop{
    grid-template-columns:minmax(0,1fr);
  }

  .defectSummaryGrid{
    grid-template-columns:minmax(0,1fr);
  }

  .defectLegendRow--rich{
    flex-direction:column;
    align-items:flex-start;
  }

  #defectChart{
    width:260px;
    height:260px;
  }

  .defectChartWrap--hero{
    min-height:280px;
  }
}
/* =========================================================
   COATDOCTOR HOME — EXECUTIVE ENTERPRISE OVERRIDE
   Put this at the VERY END of style.css
========================================================= */

/* ---------- HOME LAYOUT ---------- */
.layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:22px !important;
  align-items:start !important;
}

.layout.hasTool{
  grid-template-columns:var(--toolW) minmax(0,1fr) !important;
}

.centerHero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:22px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:auto !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.centerHero > *{
  min-width:0 !important;
}

/* ---------- DASHBOARD HERO ---------- */
.defectWidget--hero{
  position:relative;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:22px !important;
  border:1px solid rgba(234,240,255,.12) !important;
  border-radius:24px !important;
  background:
    linear-gradient(180deg, rgba(6,21,31,.84) 0%, rgba(8,18,29,.92) 100%) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter:blur(14px) !important;
  overflow:hidden !important;
}

.defectWidget--hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(0,229,255,.10), transparent 28%),
    radial-gradient(circle at top left, rgba(217,70,239,.10), transparent 24%);
  pointer-events:none;
}

.defectHeroHead{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:14px;
}

.defectHeroTitleWrap{
  min-width:0;
  max-width:980px;
}

.defectHeroTitle{
  margin:6px 0 8px;
  font-size:36px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.02em;
  color:rgba(234,240,255,.98);
}

.defectHeroSub{
  max-width:920px;
  font-size:15px;
  line-height:1.55;
  color:rgba(234,240,255,.78);
}

.defectHeroActions{
  flex:0 0 auto;
}

.defectWidgetMeta--hero{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

/* ---------- EXECUTIVE KPI ROW ---------- */
.defectExecutiveTop{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}

.executiveKpiCard{
  border:1px solid rgba(234,240,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:16px 16px 14px;
  min-height:104px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.executiveKpiLabel{
  font-size:11px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
  margin-bottom:10px;
}

.executiveKpiValue{
  font-size:34px;
  line-height:1;
  font-weight:900;
  color:rgba(234,240,255,.98);
  word-break:break-word;
}

.executiveKpiValue--small{
  font-size:18px;
  line-height:1.25;
}

/* ---------- DASHBOARD MAIN GRID ---------- */
.defectExecutiveMain{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(320px,420px) minmax(0,1fr);
  gap:20px;
  align-items:start;
}

.defectChartPanel,
.defectInsightsPanel{
  border:1px solid rgba(234,240,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  padding:18px;
  min-width:0;
}

.defectChartPanelTitle,
.defectInsightsPanelTitle{
  font-size:13px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.72;
  margin-bottom:12px;
}

.defectChartWrap--hero{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:360px !important;
  width:100% !important;
}

#defectChart{
  display:block;
  width:320px !important;
  height:320px !important;
  max-width:100% !important;
}

.defectLegend--hero{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  max-height:none !important;
  overflow:visible !important;
  padding-right:0 !important;
}

/* ---------- SUMMARY / INSIGHT CARDS ---------- */
.defectSummaryCard{
  border:1px solid rgba(234,240,255,.10) !important;
  background:rgba(10,18,30,.42) !important;
  border-radius:18px !important;
  padding:14px !important;
  backdrop-filter:blur(8px);
  margin-bottom:0 !important;
}

.defectSummaryGrid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
}

.defectSummaryItem{
  border:1px solid rgba(234,240,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  border-radius:14px !important;
  padding:12px !important;
  min-height:92px !important;
}

.defectSummaryLabel{
  font-size:11px !important;
  line-height:1.2 !important;
  opacity:.72 !important;
  margin-bottom:8px !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}

.defectSummaryValue{
  font-size:22px !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  color:rgba(234,240,255,.96) !important;
  word-break:break-word !important;
}

.defectSummaryValue--small{
  font-size:14px !important;
  line-height:1.4 !important;
  font-weight:800 !important;
}

.defectSummarySource{
  margin-top:12px !important;
  font-size:12px !important;
  line-height:1.55 !important;
  opacity:.84 !important;
  word-break:break-word !important;
}

/* ---------- RECENT / ACTION LIST ---------- */
.defectSessionList,
.defectActionList{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:10px !important;
}

.defectSessionRow,
.defectActionRow{
  border:1px solid rgba(234,240,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  border-radius:14px !important;
  padding:12px !important;
}

.defectSessionMain{
  display:flex !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

.defectSessionMeta,
.defectActionText{
  font-size:12px !important;
  line-height:1.5 !important;
  opacity:.8 !important;
  margin-top:6px !important;
}

.defectActionTitle{
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
}

/* ---------- DEFECT ROWS ---------- */
.defectLegendRow--rich{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  border:1px solid rgba(234,240,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-bottom:0 !important;
}

.defectLegendLeft{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}

.defectDot{
  width:12px !important;
  height:12px !important;
  border-radius:999px !important;
  margin-top:6px !important;
  flex:0 0 auto !important;
  box-shadow:0 0 14px rgba(255,255,255,.14) !important;
}

.defectLegendText{
  min-width:0 !important;
  flex:1 1 auto !important;
}

.defectLegendName{
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1.3 !important;
  word-break:break-word !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.defectLegendSub{
  font-size:12px !important;
  opacity:.86 !important;
  margin-top:5px !important;
  line-height:1.5 !important;
  word-break:break-word !important;
}

.defectLegendMeta{
  font-size:11px !important;
  opacity:.68 !important;
  margin-top:5px !important;
  line-height:1.45 !important;
  word-break:break-word !important;
}

.defectLegendValue{
  flex:0 0 auto !important;
  font-size:14px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  color:rgba(234,240,255,.96) !important;
}

/* ---------- NEWS SECONDARY ---------- */
.newsWidget--secondary{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:auto !important;
  border:1px solid rgba(234,240,255,.10) !important;
  background:rgba(8,18,29,.78) !important;
  border-radius:22px !important;
  padding:18px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.24) !important;
}

.newsWidgetHead--compact{
  margin-bottom:8px;
}

.newsWidget--secondary .newsWidgetTitle{
  font-size:24px !important;
  line-height:1.15 !important;
}

.newsWidget--secondary .newsWidgetBody{
  margin-top:12px;
}

.newsWidget--secondary .newsWidgetItems{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:10px !important;
  height:auto !important;
  overflow:visible !important;
  padding-right:0 !important;
}

.newsWidget--secondary .newsCard{
  border:1px solid rgba(234,240,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  border-radius:16px !important;
  padding:14px !important;
}

.newsWidget--secondary .newsCardTitle{
  font-size:18px !important;
  line-height:1.3 !important;
}

.newsWidget--secondary .newsCardText{
  font-size:13px !important;
  line-height:1.5 !important;
  opacity:.82 !important;
}

.newsWidget--secondary .newsCardActions{
  margin-top:8px !important;
}

/* ---------- FOOTER ROWS ---------- */
.newsWidgetFooter{
  display:flex !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

/* ---------- TOOL MODE ---------- */
@media (min-width: 981px){
  .layout.hasTool .centerHero{
    gap:18px !important;
  }
}

/* ---------- TABLET ---------- */
@media (max-width: 1200px){
  .defectExecutiveTop{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .defectExecutiveMain{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .defectSummaryGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px){
  .defectWidget--hero,
  .newsWidget--secondary{
    padding:16px !important;
    border-radius:18px !important;
  }

  .defectHeroHead{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .defectHeroTitle{
    font-size:28px !important;
  }

  .defectHeroSub{
    font-size:14px !important;
  }

  .defectWidgetMeta--hero{
    align-items:flex-start !important;
  }

  .defectExecutiveTop{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .defectSummaryGrid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .defectLegendRow--rich{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  #defectChart{
    width:260px !important;
    height:260px !important;
  }

  .defectChartWrap--hero{
    min-height:280px !important;
  }

  .newsWidget--secondary .newsWidgetTitle{
    font-size:20px !important;
  }
}

@media (max-width: 480px){
  .defectWidget--hero,
  .newsWidget--secondary{
    padding:14px !important;
    border-radius:16px !important;
  }

  .defectHeroTitle{
    font-size:24px !important;
  }

  .executiveKpiValue{
    font-size:28px !important;
  }

  .executiveKpiValue--small{
    font-size:16px !important;
  }

  #defectChart{
    width:220px !important;
    height:220px !important;
  }

  .defectChartWrap--hero{
    min-height:230px !important;
  }
}
/* =========================================================
   iPhone / Safari dropdown tap fix
   Put at VERY END of style.css
========================================================= */

.topbar{
  isolation:isolate;
  overflow:visible !important;
}

.topNav{
  position:relative;
  z-index:4000;
  overflow:visible !important;
}

.dd{
  position:relative;
  z-index:4100;
  overflow:visible !important;
}

.ddBtn{
  position:relative;
  z-index:4101;
}

.ddPanel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:99999 !important;
  pointer-events:auto !important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

.ddPanel,
.ddPanel *{
  pointer-events:auto !important;
}

.menuBtn{
  position:relative;
  z-index:2;
  pointer-events:auto !important;
}

@supports (-webkit-touch-callout: none) {
  .topbar{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .ddPanel{
    box-shadow:0 24px 70px rgba(0,0,0,.55);
  }
}

@media (max-width: 980px){
  .topbar{
    z-index:5000 !important;
  }

  .topNav{
    z-index:5001 !important;
  }

  .dd{
    z-index:5002 !important;
  }

  .ddPanel{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 140px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    z-index:99999 !important;
  }

  .dd.open:nth-of-type(1) .ddPanel{ top:118px !important; }
  .dd.open:nth-of-type(2) .ddPanel{ top:118px !important; }
  .dd.open:nth-of-type(3) .ddPanel{ top:118px !important; }
  .dd.open:nth-of-type(4) .ddPanel{ top:118px !important; }
  .dd.open:nth-of-type(5) .ddPanel{ top:118px !important; }
}

@media (max-width: 520px){
  .ddPanel{
    left:10px !important;
    right:10px !important;
    top:112px !important;
    max-height:calc(100dvh - 128px) !important;
  }
}
/* =========================================================
COATDOCTOR — ENTERPRISE COMPARE EXTENSIONS
========================================================= */

/* ===========================
AQL PANEL (UPGRADE)
=========================== */

.aqlPanel{
  margin-top:16px;
  border-radius:18px;
  padding:16px;
  border:1px solid rgba(234,240,255,.12);

  background:
    linear-gradient(180deg, rgba(0,229,255,.08), rgba(255,255,255,.02));

  box-shadow:
    0 20px 60px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.aqlTitle{
  font-weight:900;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:10px;
  color:#e6fbff;
}

.aqlSub{
  font-size:12px;
  opacity:.7;
  margin-bottom:12px;
}

/* ===========================
FIELDS
=========================== */

.aqlGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

@media(max-width:900px){
  .aqlGrid{grid-template-columns:1fr 1fr}
}

@media(max-width:500px){
  .aqlGrid{grid-template-columns:1fr}
}

.aqlField label{
  display:block;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:4px;
}

.aqlField input,
.aqlField select{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(234,240,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
}

.aqlField input:focus,
.aqlField select:focus{
  outline:none;
  border-color:rgba(0,229,255,.5);
  box-shadow:0 0 0 2px rgba(0,229,255,.12);
}

/* ===========================
AQL METRICS
=========================== */

.aqlMetrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}

.aqlMetric{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(234,240,255,.1);
  background:rgba(255,255,255,.03);
}

.aqlMetricLabel{
  font-size:10px;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:6px;
}

.aqlMetricValue{
  font-size:20px;
  font-weight:900;
}

/* ===========================
FINAL DECISION BLOCK
=========================== */

.aqlDecision{
  margin-top:14px;
  padding:16px;
  border-radius:16px;
  text-align:center;
  font-weight:900;
  font-size:20px;
}

.aqlDecision.pass{
  background:linear-gradient(180deg, rgba(34,197,94,.18), rgba(34,197,94,.08));
  border:1px solid rgba(34,197,94,.4);
  color:#dcffe8;
}

.aqlDecision.review{
  background:linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.08));
  border:1px solid rgba(245,158,11,.4);
  color:#fff1d6;
}

.aqlDecision.reject{
  background:linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.08));
  border:1px solid rgba(239,68,68,.4);
  color:#ffe4e4;
}

/* ===========================
OPERATOR ACTION PANEL
=========================== */

.operatorPanel{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(234,240,255,.1);
  background:rgba(255,255,255,.03);
}

.operatorTitle{
  font-size:12px;
  font-weight:900;
  margin-bottom:8px;
  text-transform:uppercase;
  opacity:.85;
}

.operatorAction{
  font-size:13px;
  line-height:1.6;
}

/* ===========================
LINE STATUS BADGES
=========================== */

.lineStatus{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}

.lineBadge{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}

.lineBadge.run{
  background:rgba(34,197,94,.15);
  color:#caffdd;
}

.lineBadge.hold{
  background:rgba(245,158,11,.15);
  color:#fff2d2;
}

.lineBadge.stop{
  background:rgba(239,68,68,.15);
  color:#ffdede;
}

/* ===========================
SMOOTH HOVER EFFECTS
=========================== */

.card{
  transition:transform .18s ease, box-shadow .18s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
/* =========================
   MENU SYSTEM — ENTERPRISE
========================= */

.ddPanel{
  position:absolute;
  top:100%;
  left:0;
  min-width:260px;
  background:rgba(10,18,30,.96);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:8px;
  z-index:9999;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.menuBtn{
  display:flex;
  flex-direction:column;
  gap:2px;
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  color:#eaf0ff;
  background:transparent;
  border:none;
  cursor:pointer;
  transition:.18s;
}

.menuBtn:hover{
  background:rgba(77,163,255,.12);
  transform:translateX(4px);
}

.mSub{
  font-size:11px;
  color:#8fa6c6;
}

/* GROUPS */
.menuGroupTitle{
  font-size:10px;
  text-transform:uppercase;
  color:#6e8db3;
  padding:6px 10px;
  font-weight:700;
}

.menuDivider{
  height:1px;
  margin:6px 8px;
  background:rgba(255,255,255,.08);
}

/* SUB MENU */
.menuSubGroup{
  position:relative;
}

.menuSubTitle{
  padding:10px;
  cursor:pointer;
  color:#cfe3ff;
}

.menuSubPanel{
  position:absolute;
  top:0;
  left:100%;
  min-width:220px;
  background:rgba(10,18,30,.96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:8px;
  display:none;
}

.menuSubGroup:hover .menuSubPanel{
  display:block;
}

/* BUTTON STYLE */
.ddBtn{
  font-weight:600;
  letter-spacing:.02em;
  transition:.2s;
}

.ddBtn:hover{
  color:#4da3ff;
}
/* =========================================================
   COATDOCTOR MENU / PANEL HARD SYNC PATCH
   PUT THIS AT THE VERY END OF style.css
========================================================= */

/* dropdown must really open */
.dd{
  position:relative !important;
  overflow:visible !important;
}

.ddBtn{
  position:relative !important;
  z-index:4101 !important;
  pointer-events:auto !important;
}

.ddPanel{
  display:none !important;
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  z-index:99999 !important;
  pointer-events:auto !important;
  flex-direction:column !important;
}

.dd.open .ddPanel{
  display:flex !important;
}

.ddPanel,
.ddPanel *{
  pointer-events:auto !important;
}

/* active menu button sync with JS */
.menuBtn.active,
.menuBtn.isActive{
  border-color:rgba(0,229,255,0.75) !important;
  box-shadow:0 0 0 2px rgba(0,229,255,0.14) !important;
  background:rgba(77,163,255,.10) !important;
}

/* right panel normal open = side panel */
.layout.hasTool{
  grid-template-columns:var(--toolW) minmax(0,1fr) !important;
}

/* backdrop sync */
#rpBackdrop.open{
  display:block !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* only maximized panel should use .open fullscreen */
#rightPanel:not(.open){
  position:sticky !important;
  top:78px !important;
  inset:auto !important;
  width:auto !important;
  height:min(720px, calc(100dvh - 140px)) !important;
  max-width:none !important;
  margin:0 !important;
  z-index:40 !important;
}

/* mobile dropdown stronger */
@media (max-width: 980px){
  .dd.open .ddPanel{
    display:flex !important;
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:118px !important;
    width:auto !important;
    max-width:none !important;
    max-height:calc(100dvh - 140px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    z-index:99999 !important;
  }
}

@media (max-width: 520px){
  .dd.open .ddPanel{
    left:10px !important;
    right:10px !important;
    top:112px !important;
    max-height:calc(100dvh - 128px) !important;
  }
}
console.log("COATDOCTOR menu loaded — ENTERPRISE ORCHESTRATION V17 CAPTURE SYNC");

(() => {
  "use strict";

  if (window.__COATDOCTOR_MENU_LOADED) return;
  window.__COATDOCTOR_MENU_LOADED = true;

  function bootMenu() {
    const dds = Array.from(document.querySelectorAll(".dd"));

    const body = document.body;
    const layout = document.getElementById("layout");
    const panel = document.getElementById("rightPanel");
    const frame = document.getElementById("rpFrame");
    const title = document.getElementById("rpTitle");
    const closeBtn = document.getElementById("rpClose");
    const maxBtn = document.getElementById("rpMax");
    const backdrop = document.getElementById("rpBackdrop");
    const newsHome = document.getElementById("newsHome");
    const defectHome = document.getElementById("defectHome");
    const centerHero = document.getElementById("centerHero");
    const chat = document.getElementById("chat");

    let activeTool = null;
    let loadingTool = null;
    let panelMaximized = false;

    const TOOL_META = {
      capture:      { group: "capture",   label: "Capture",              url: null, mode: "chat" },
      archive:      { group: "capture",   label: "Archive",              url: "/archive.html", mode: "panel" },
      compare:      { group: "capture",   label: "Compare",              url: "/compare/index.html", mode: "panel" },
      "multi-caps": { group: "capture",   label: "Multi Caps / Sheets",  url: "/multi-caps.html", mode: "panel" },

      eccentricity: { group: "tools",     label: "Eccentricity",         url: "/tools/eccentricity/index.html", mode: "panel" },
      tests:        { group: "tools",     label: "Tests",                url: "/tests.html", mode: "panel" },
      setup:        { group: "tools",     label: "Machine setup",        url: "/setup.html", mode: "panel" },
      ink:          { group: "tools",     label: "Ink formulation",      url: "/ink.html", mode: "panel" },
      tintfactor:   { group: "tools",     label: "Tint Factor",          url: "/tools/tint-factor/index.html", mode: "panel" },

      sop:          { group: "knowledge", label: "SOP",                  url: "/sop.html", mode: "panel" },
      sopadmin:     { group: "knowledge", label: "SOP Admin",            url: "/sop-admin.html", mode: "panel" },

      news:         { group: "news",      label: "Industry News",        url: null, mode: "route" },
      contact:      { group: "contact",   label: "Contact",              url: "/contact.html", mode: "panel" }
    };

    const normalizeTool = (t) => String(t || "").trim().toLowerCase();
    const safeObj = (v) => (v && typeof v === "object" && !Array.isArray(v)) ? v : {};

    function getDdTrigger(dd) {
      return dd?.querySelector(".ddBtn, .dd-toggle, .dd-head, .dd-btn") || null;
    }

    function resolveToolUrl(tool) {
      return TOOL_META[tool]?.url || "";
    }

    function setHomeWidgets(mode) {
      if (newsHome) {
        newsHome.hidden = !(mode === "news" || mode === "both");
      }

      if (defectHome) {
        defectHome.hidden = !(mode === "defect" || mode === "both");
      }

      if (centerHero) {
        centerHero.hidden = (mode === "none");
      }
    }

    function closeAllDropdowns() {
      dds.forEach((dd) => {
        dd.classList.remove("open");
        const trigger = getDdTrigger(dd);
        if (trigger) trigger.setAttribute("aria-expanded", "false");
      });
    }

    function syncTopLevelDropdownState(tool) {
      const normalized = normalizeTool(tool);
      const meta = TOOL_META[normalized];

      dds.forEach((dd) => {
        const ddName = normalizeTool(dd.dataset.dd);
        const trigger = getDdTrigger(dd);

        const active =
          ddName === normalized ||
          (meta && normalizeTool(meta.group) === ddName);

        dd.classList.toggle("isActive", !!active);

        if (trigger) {
          trigger.classList.toggle("isActive", !!active);
          trigger.setAttribute("aria-current", active ? "page" : "false");
        }
      });
    }

    function syncActiveMenuButton(tool) {
      const normalized = normalizeTool(tool);

      document.querySelectorAll(".menuBtn").forEach((btn) => {
        const target = normalizeTool(btn.dataset.target);
        const active = target === normalized;
        btn.classList.toggle("isActive", active);
        btn.classList.toggle("active", active);
        btn.setAttribute("aria-pressed", active ? "true" : "false");
      });

      syncTopLevelDropdownState(normalized);
    }

    function updatePanelTitle(text) {
      if (title) title.textContent = text || "Tool";
    }

    function setPanelOpenState(isOpen) {
      if (!panel) return;

      panel.hidden = !isOpen;
      panel.setAttribute("aria-hidden", isOpen ? "false" : "true");

      if (layout) {
        layout.classList.toggle("hasTool", !!isOpen);
      }

      if (backdrop) {
        backdrop.hidden = !isOpen || !panelMaximized;
        backdrop.classList.toggle("open", !!isOpen && !!panelMaximized);
      }

      if (body) {
        body.classList.toggle("toolModalOpen", !!isOpen && !!panelMaximized);
      }

      if (!isOpen) {
        panel.classList.remove("open");
        panel.dataset.tool = "";
        panelMaximized = false;

        if (maxBtn) {
          maxBtn.classList.remove("active");
          maxBtn.setAttribute("aria-pressed", "false");
        }
      }
    }

    function setPanelMaximized(next) {
      if (!panel) return;

      panelMaximized = !!next;
      panel.classList.toggle("open", panelMaximized);

      if (backdrop) {
        backdrop.hidden = !panelMaximized;
        backdrop.classList.toggle("open", panelMaximized);
      }

      if (body) {
        body.classList.toggle("toolModalOpen", panelMaximized);
      }

      if (maxBtn) {
        maxBtn.classList.toggle("active", panelMaximized);
        maxBtn.setAttribute("aria-pressed", panelMaximized ? "true" : "false");
      }
    }

    function toggleMaximize() {
      setPanelMaximized(!panelMaximized);
    }

    function postToFrame(message, retries = 8) {
      if (!frame) return;

      let i = 0;

      const send = () => {
        try {
          frame.contentWindow?.postMessage(message, "*");
        } catch {}

        i += 1;
        if (i < retries) setTimeout(send, 180);
      };

      send();
    }

    function tryInitFrame(tool, meta) {
      if (!frame || !tool) return;

      postToFrame({
        type: "coatdoctor:host-context",
        tool,
        label: meta?.label || tool,
        group: meta?.group || "",
        hostPath: window.location.pathname
      }, 6);
    }

    function resetFrameToBlank() {
      if (!frame) return;

      try {
        frame.removeAttribute("src");
      } catch {}

      try {
        frame.src = "about:blank";
      } catch {}
    }

    function showChat() {
      if (!chat) return;

      chat.hidden = false;
      chat.setAttribute("aria-hidden", "false");
      chat.classList.add("is-open");

      try {
        window.COATDOCTOR_CHAT?.toggleChat?.(true);
      } catch {}
    }

    function hideChat() {
      if (!chat) return;

      chat.hidden = true;
      chat.setAttribute("aria-hidden", "true");
      chat.classList.remove("is-open", "is-fullscreen");

      try {
        window.COATDOCTOR_CHAT?.toggleChat?.(false);
      } catch {}
    }

    function openCapture() {
      closeAllDropdowns();
      closeTool({ keepRouteWidgets: true, silentChatClose: true });

      activeTool = "capture";
      loadingTool = null;

      syncActiveMenuButton("capture");
      setHomeWidgets("both");
      showChat();
    }

    function openTool(tool, label) {
      tool = normalizeTool(tool);
      if (!panel || !frame) return;

      const meta = TOOL_META[tool];
      if (!meta) return;

      if (meta.mode === "chat") {
        openCapture();
        return;
      }

      const url = resolveToolUrl(tool);
      if (!url) return;

      if (loadingTool === tool) return;
      loadingTool = tool;

      closeAllDropdowns();
      hideChat();

      updatePanelTitle(label || meta.label);
      panel.dataset.tool = tool;
      syncActiveMenuButton(tool);
      setPanelOpenState(true);

      const currentSrc = frame.getAttribute("src") || "";
      const sameTool = activeTool === tool;
      const sameSrc = currentSrc === url;

      if (!sameTool || !sameSrc) {
        frame.src = url;
      } else {
        tryInitFrame(tool, meta);
      }

      activeTool = tool;

      if (tool === "contact") {
        setHomeWidgets("both");
      } else {
        setHomeWidgets("none");
      }

      setTimeout(() => {
        loadingTool = null;
      }, 180);
    }

    function closeTool(options = {}) {
      const keepRouteWidgets = !!options.keepRouteWidgets;
      const silentChatClose = !!options.silentChatClose;

      closeAllDropdowns();

      activeTool = null;
      loadingTool = null;

      setPanelOpenState(false);
      resetFrameToBlank();

      if (!silentChatClose) {
        hideChat();
      }

      syncActiveMenuButton("");

      if (keepRouteWidgets) {
        bootHomeWidgetsOnly();
      } else {
        setHomeWidgets("both");
      }
    }

    function bootHomeWidgetsOnly() {
      const path = window.location.pathname;

      if (path.startsWith("/news")) {
        setHomeWidgets("news");
        return;
      }

      setHomeWidgets("both");
    }

    function findToolByPath(pathname) {
      for (const [tool, meta] of Object.entries(TOOL_META)) {
        if (!meta?.url) continue;
        if (pathname === meta.url) return tool;
      }
      return null;
    }

    function bootNewsRoute() {
      closeAllDropdowns();
      closeTool({ keepRouteWidgets: true });
      syncActiveMenuButton("news");
      setHomeWidgets("news");
    }

    function bootDefaultRoute() {
      syncActiveMenuButton("");
      hideChat();
      setHomeWidgets("both");
    }

    function bootRouteState() {
      const path = window.location.pathname;

      if (path.startsWith("/news")) {
        bootNewsRoute();
        return;
      }

      const directTool = findToolByPath(path);
      if (directTool && panel && frame) {
        openTool(directTool, TOOL_META[directTool].label);
        return;
      }

      bootDefaultRoute();
    }

    function bootFromRoute() {
      bootRouteState();
    }

    function pushRoute(path) {
      if (!path || window.location.pathname === path) {
        bootFromRoute();
        return;
      }

      try {
        window.history.pushState({}, "", path);
      } catch {
        window.location.assign(path);
        return;
      }

      bootFromRoute();
    }

    function handleMenuTarget(tool) {
      const meta = TOOL_META[tool];
      if (!meta) return;

      if (tool === "capture") {
        openCapture();
        return;
      }

      if (tool === "news") {
        pushRoute("/news");
        return;
      }

      if (tool === "contact") {
        openTool("contact", "Contact");
        return;
      }

      openTool(tool, meta.label);
    }

    document.querySelectorAll(".menuBtn").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        e.stopPropagation();

        const tool = normalizeTool(btn.dataset.target);
        if (!tool) return;

        handleMenuTarget(tool);
      });
    });

    dds.forEach((dd) => {
      const trigger = getDdTrigger(dd);
      if (!trigger) return;

      trigger.addEventListener("click", (e) => {
        e.preventDefault();
        e.stopPropagation();

        const willOpen = !dd.classList.contains("open");
        closeAllDropdowns();
        dd.classList.toggle("open", willOpen);
        trigger.setAttribute("aria-expanded", willOpen ? "true" : "false");
      });
    });

    document.addEventListener("click", (e) => {
      if (!e.target.closest(".dd")) {
        closeAllDropdowns();
      }
    });

    if (closeBtn) {
      closeBtn.addEventListener("click", () => closeTool({ keepRouteWidgets: true }));
    }

    if (maxBtn) {
      maxBtn.addEventListener("click", () => toggleMaximize());
    }

    if (backdrop) {
      backdrop.addEventListener("click", () => {
        if (panelMaximized) {
          setPanelMaximized(false);
        } else {
          closeTool({ keepRouteWidgets: true });
        }
      });
    }

    document.addEventListener("keydown", (e) => {
      if (e.key !== "Escape") return;

      const hasOpenDropdown = dds.some((dd) => dd.classList.contains("open"));
      if (hasOpenDropdown) {
        closeAllDropdowns();
        return;
      }

      if (chat && !chat.hidden) {
        hideChat();
        syncActiveMenuButton("");
        return;
      }

      if (panel && !panel.hidden) {
        if (panelMaximized) {
          setPanelMaximized(false);
        } else {
          closeTool({ keepRouteWidgets: true });
        }
      }
    });

    if (frame) {
      frame.addEventListener("load", () => {
        if (!activeTool || activeTool === "capture") return;
        const meta = TOOL_META[activeTool];
        tryInitFrame(activeTool, meta);
      });
    }

    window.addEventListener("message", (e) => {
      const data = safeObj(e.data);
      if (!data.type) return;

      if (data.type === "coatdoctor:open-tool-request") {
        const requestedTool = normalizeTool(data.tool);
        if (!TOOL_META[requestedTool]) return;

        handleMenuTarget(requestedTool);
        return;
      }

      if (data.type === "coatdoctor:close-tool-request") {
        closeTool({ keepRouteWidgets: true });
        return;
      }

      if (data.type === "coatdoctor:set-title") {
        updatePanelTitle(data.title || TOOL_META[activeTool]?.label || "Tool");
        return;
      }

      if (data.type === "coatdoctor:maximize-tool-request") {
        if (!panelMaximized) setPanelMaximized(true);
        return;
      }

      if (data.type === "coatdoctor:minimize-tool-request") {
        if (panelMaximized) setPanelMaximized(false);
        return;
      }

      if (data.type === "coatdoctor:navigate-route") {
        const path = String(data.path || "").trim();
        if (!path) return;
        pushRoute(path);
      }
    });

    const chatClose = document.getElementById("chatClose");
    const chatFs = document.getElementById("chatFs");

    if (chatClose) {
      chatClose.addEventListener("click", () => {
        hideChat();
        syncActiveMenuButton("");
      });
    }

    if (chatFs && chat) {
      chatFs.addEventListener("click", () => {
        chat.classList.toggle("is-fullscreen");
      });
    }

    window.addEventListener("popstate", () => {
      bootFromRoute();
    });

    bootFromRoute();

    window.COATDOCTOR_UI = {
      openTool,
      openCapture,
      closeTool,
      postToFrame,
      toggleMaximize,
      bootFromRoute,
      getActiveTool: () => activeTool
    };
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", bootMenu, { once: true });
  } else {
    bootMenu();
  }
})();