/* =========================================================
   ESSAYDEW AI SYSTEM
   File: application/modules/academics/assets/css/ai.css
   Covers: AI mini strip + AI drawers + AI report blocks
   ========================================================= */


/* =========================================================
   1. AI MINI STRIP
   ========================================================= */

.acad-aiMiniStrip{
  position:relative;
  overflow:hidden;

  margin:8px 0;
  min-height:50px;
  padding:9px 11px;
  border-radius:18px;

  display:flex;
  align-items:center;
  gap:11px;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  border:1px solid rgba(233,198,125,.24);

  background:
    radial-gradient(circle at 10% 50%, rgba(233,198,125,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.30));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 8px 22px rgba(0,0,0,.24);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.acad-aiMiniStrip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,231,168,.10) 38%,
    transparent 72%
  );
  opacity:.48;
  transform:translateX(-70%);
  transition:transform .45s ease;
}

.acad-aiMiniStrip:hover::before,
.acad-aiMiniStrip:focus-visible::before{
  transform:translateX(70%);
}

.acad-aiMiniStrip:active{
  transform:scale(.985);
}

.acad-aiMiniStrip:focus-visible{
  outline:none;
  border-color:rgba(255,231,168,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 0 0 3px rgba(233,198,125,.10),
    0 10px 24px rgba(0,0,0,.28);
}

.acad-aiMiniStrip__mark{
  position:relative;
  z-index:1;

  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:14px;

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

  font-size:16px;
  line-height:1;
  font-weight:950;

  color:#1a1307;
  background:linear-gradient(135deg,#ffe7a8,#d59a32);

  box-shadow:
    0 0 16px rgba(233,198,125,.28),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.acad-aiMiniStrip__text{
  position:relative;
  z-index:1;

  min-width:0;
  flex:1;

  display:flex;
  flex-direction:column;
  gap:3px;
}

.acad-aiMiniStrip__line{
  color:#ffe5a3;
  font-size:13px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.01em;

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

.acad-aiMiniStrip__tags,
.acad-aiMiniStrip__micro{
  color:rgba(248,244,234,.72);
  font-size:11.5px;
  line-height:1.1;

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

.acad-aiMiniStrip__micro{
  color:rgba(233,198,125,.82);
}

.acad-aiMiniStrip__arrow{
  position:relative;
  z-index:1;

  flex:0 0 auto;

  color:rgba(255,231,168,.82);
  font-size:25px;
  line-height:1;

  transition:transform .16s ease, opacity .16s ease;
}

.acad-aiMiniStrip:hover,
.acad-aiMiniStrip:focus-visible{
  border-color:rgba(233,198,125,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 10px 26px rgba(0,0,0,.28),
    0 0 20px rgba(233,198,125,.08);
}

.acad-aiMiniStrip:hover .acad-aiMiniStrip__arrow,
.acad-aiMiniStrip:focus-visible .acad-aiMiniStrip__arrow{
  transform:translateX(3px);
}


/* =========================================================
   2. MINI STRIP STATUS TONES
   ========================================================= */

.acad-aiMiniStrip--idle{
  border-color:rgba(233,198,125,.22);
}

.acad-aiMiniStrip--notice{
  border-color:rgba(233,198,125,.38);
  background:
    radial-gradient(circle at 10% 50%, rgba(233,198,125,.22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(0,0,0,.30));
}

.acad-aiMiniStrip--warn{
  border-color:rgba(255,118,88,.42);
  background:
    radial-gradient(circle at 10% 50%, rgba(255,118,88,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(0,0,0,.31));
}

.acad-aiMiniStrip--clear{
  border-color:rgba(91,220,145,.34);
  background:
    radial-gradient(circle at 10% 50%, rgba(91,220,145,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.065), rgba(0,0,0,.30));
}

.acad-aiMiniStrip--clear .acad-aiMiniStrip__mark{
  background:linear-gradient(135deg,#c8ffd9,#4fd987);
  box-shadow:
    0 0 16px rgba(91,220,145,.22),
    inset 0 1px 0 rgba(255,255,255,.38);
}

.acad-aiMiniStrip--notice .acad-aiMiniStrip__mark{
  background:linear-gradient(135deg,#ffe9ad,#dda13c);
}

.acad-aiMiniStrip--warn .acad-aiMiniStrip__mark{
  background:linear-gradient(135deg,#ffd1c1,#ff7658);
  box-shadow:
    0 0 16px rgba(255,118,88,.24),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.acad-aiMiniStrip--notice .acad-aiMiniStrip__mark,
.acad-aiMiniStrip--warn .acad-aiMiniStrip__mark{
  animation:acadAiSoftPulse 2.6s ease-in-out infinite;
}

@keyframes acadAiSoftPulse{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.035);
  }
}


/* =========================================================
   3. AI REPORT DRAWERS
   ========================================================= */

.acad-aiReportDrawer{
  background:
    radial-gradient(circle at top, rgba(233,198,125,.17), transparent 58%),
    radial-gradient(circle at bottom, rgba(233,198,125,.07), transparent 54%),
    linear-gradient(180deg, #0c0a06 0%, #050403 100%);
}

.acad-aiReportSub{
  font-size:12px;
  color:rgba(248,244,234,.64);
  margin-top:2px;
  line-height:1.25;
}

.acad-aiReportBody{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.acad-aiReportDynamic{
  display:grid;
  gap:11px;
}

.acad-aiReportActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.acad-aiReportActions .academics-btn{
  width:100%;
}


/* =========================================================
   4. AI LOADING / EMPTY STATES
   ========================================================= */

.acad-aiLoading{
  text-align:center;
  padding:28px 12px;
}

.acad-aiLoading__orb{
  width:58px;
  height:58px;
  margin:0 auto 14px;
  border-radius:50%;

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

  font-size:25px;

  background:
    radial-gradient(circle, rgba(255,244,210,.44), rgba(233,198,125,.20) 44%, transparent 72%),
    linear-gradient(135deg, #f3d38a, #d8a84b);

  box-shadow:
    0 0 34px rgba(233,198,125,.28),
    inset 0 0 18px rgba(0,0,0,.38);

  animation:acadAiGlow 1.5s infinite ease-in-out alternate;
}

@keyframes acadAiGlow{
  from{
    transform:scale(.96);
    opacity:.86;
  }
  to{
    transform:scale(1.05);
    opacity:1;
  }
}

.acad-aiLoading h4,
.acad-aiReportEmpty h4{
  color:#fff8ea;
  font-size:16px;
  margin:0 0 6px;
  font-weight:950;
}

.acad-aiLoading p,
.acad-aiReportEmpty p{
  margin:0;
  color:rgba(248,244,234,.66);
  font-size:13px;
  line-height:1.5;
}

.acad-aiReportEmpty{
  padding:24px 12px;
  text-align:center;
  border-radius:18px;
  border:1px dashed rgba(233,198,125,.20);
  background:
    radial-gradient(circle at top, rgba(233,198,125,.07), transparent 60%),
    rgba(255,255,255,.04);
}


/* =========================================================
   5. AI REPORT CONTENT BLOCKS
   ========================================================= */

.acad-aiBlock{
  position:relative;
  border-radius:18px;
  padding:14px 14px;

  border:1px solid rgba(233,198,125,.18);

  background:
    radial-gradient(circle at 15% 0%, rgba(233,198,125,.10), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.28));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 10px 26px rgba(0,0,0,.22);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

.acad-aiBlock:hover{
  border-color:rgba(233,198,125,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 30px rgba(0,0,0,.28),
    0 0 18px rgba(233,198,125,.08);
}

.acad-aiBlock--hero{
  border-color:rgba(233,198,125,.36);

  background:
    radial-gradient(circle at 20% 0%, rgba(233,198,125,.22), transparent 65%),
    linear-gradient(160deg, rgba(243,211,138,.12), rgba(0,0,0,.30));

  box-shadow:
    0 0 30px rgba(233,198,125,.12),
    0 12px 34px rgba(0,0,0,.28);
}

.acad-aiBlock h5{
  margin:0 0 6px;

  color:rgba(233,198,125,.92);
  font-size:10.5px;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:950;
}

.acad-aiBlock p{
  margin:0;
  font-size:13px;
  color:#fff6df;
  line-height:1.55;
}

.acad-aiBlock p strong{
  color:#ffffff;
  font-weight:950;
}

.acad-aiBlock ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
}

.acad-aiBlock li{
  color:#fff6df;
  font-size:13px;
  line-height:1.5;
}


/* =========================================================
   6. SHARED AI DIVIDER REFINEMENT
   ========================================================= */

.acad-aiReportDrawer .acad-hr{
  height:1px;
  border:0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(233,198,125,.24),
      transparent
    );
}


/* =========================================================
   7. MOBILE TIGHTENING
   ========================================================= */

@media(max-width:640px){
  .acad-aiLoading{
    padding:24px 10px;
  }

  .acad-aiLoading__orb{
    width:54px;
    height:54px;
    font-size:24px;
  }

  .acad-aiBlock{
    padding:12px;
    border-radius:15px;
  }

  .acad-aiReportBody{
    gap:10px;
  }
}

@media(max-width:420px){
  .acad-aiMiniStrip{
    min-height:48px;
    padding:8px 10px;
    border-radius:17px;
    gap:10px;
  }

  .acad-aiMiniStrip__mark{
    flex-basis:32px;
    width:32px;
    height:32px;
    border-radius:13px;
    font-size:15px;
  }

  .acad-aiMiniStrip__line{
    font-size:12.5px;
  }

  .acad-aiMiniStrip__tags,
  .acad-aiMiniStrip__micro{
    font-size:11px;
  }

  .acad-aiMiniStrip__arrow{
    font-size:24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .acad-aiMiniStrip,
  .acad-aiMiniStrip::before,
  .acad-aiMiniStrip__arrow,
  .acad-aiMiniStrip__mark,
  .acad-aiLoading__orb,
  .acad-aiBlock{
    animation:none !important;
    transition:none !important;
  }
}




/* ===== NEXT AI INTELLIGENCE LAYER ===== */

.acad-aiMiniStrip{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* subtle breathing glow */
.acad-aiMiniStrip--clear{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 26px rgba(0,0,0,.30),
    0 0 0 1px rgba(91,220,145,.15),
    0 0 24px rgba(91,220,145,.12);
}

/* premium “active intelligence” shimmer */
.acad-aiMiniStrip--idle::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,231,168,.18) 40%,
      transparent 70%
    );
  opacity:.25;
  animation:acadAiFlow 3.2s linear infinite;
}

@keyframes acadAiFlow{
  0%{ transform:translateX(-80%); }
  100%{ transform:translateX(80%); }
}