/* widget.css — Campus AI program-advisor chat widget
   Palette and type echo the existing thegreatindiancampus site tokens
   (--paper #fff9f7, --ink #241719, --crimson #b3132b, DM Sans + Fraunces)
   so the widget reads as part of the site, not a bolted-on SaaS chat box. */

.iv-ai-root, .iv-ai-root * {
  box-sizing: border-box;
}

.iv-ai-root {
  --iv-paper: #fff9f7;
  --iv-paper-2: #ffffff;
  --iv-ink: #241719;
  --iv-muted: #75676a;
  --iv-line: #eadbdd;
  --iv-crimson: #b3132b;
  --iv-crimson-2: #8f0f22;
  --iv-cream: #fff0f2;
  --iv-shadow: 0 20px 60px rgba(36, 23, 25, 0.18);
  --iv-radius: 22px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: fixed;
  z-index: 2147483000;
  right: 20px;
  bottom: 20px;
  color: var(--iv-ink);
}

/* ---------- launcher ---------- */
.iv-ai-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  background: var(--iv-crimson);
  color: #fff9f7;
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  box-shadow: var(--iv-shadow);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, background 0.15s ease;
}
.iv-ai-launcher:hover { background: var(--iv-crimson-2); transform: translateY(-1px); }
.iv-ai-launcher:focus-visible { outline: 2px solid var(--iv-ink); outline-offset: 3px; }
.iv-ai-launcher-mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff0f2;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.iv-ai-launcher-mark span { color: var(--iv-crimson); font-size: 13px; line-height: 1; font-family: "Fraunces", serif; }
.iv-ai-root.iv-open .iv-ai-launcher { display: none; }

/* ---------- panel ---------- */
.iv-ai-panel {
  display: none;
  flex-direction: column;
  width: min(392px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 100px));
  background: var(--iv-paper);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius);
  box-shadow: var(--iv-shadow);
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
}
.iv-ai-root.iv-open .iv-ai-panel { display: flex; }

.iv-ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  background: var(--iv-paper-2);
  border-bottom: 1px solid var(--iv-line);
  flex: none;
}
.iv-ai-header-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--iv-crimson);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.iv-ai-header-mark span { font-family: "Fraunces", serif; color: #fff0f2; font-size: 16px; }
.iv-ai-header-text { flex: 1; min-width: 0; }
.iv-ai-header-text strong {
  display: block; font-family: "Fraunces", serif; font-size: 16px; font-weight: 600; line-height: 1.2;
}
.iv-ai-header-text small { color: var(--iv-muted); font-size: 12.5px; }
.iv-ai-close {
  border: none; background: transparent; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--iv-muted); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.iv-ai-close:hover { background: var(--iv-cream); color: var(--iv-ink); }

/* ---------- messages ---------- */
.iv-ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iv-ai-row { display: flex; }
.iv-ai-row.user { justify-content: flex-end; }
.iv-ai-bubble {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.iv-ai-row.assistant .iv-ai-bubble {
  background: var(--iv-paper-2);
  border: 1px solid var(--iv-line);
  border-bottom-left-radius: 4px;
}
.iv-ai-row.user .iv-ai-bubble {
  background: var(--iv-crimson);
  color: #fff9f7;
  border-bottom-right-radius: 4px;
}
.iv-ai-bubble ul { margin: 6px 0; padding-left: 18px; }
.iv-ai-bubble li { margin: 2px 0; }
.iv-ai-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.iv-ai-row.assistant .iv-ai-bubble a { color: var(--iv-crimson-2); }

.iv-ai-typing { display: flex; gap: 4px; padding: 6px 2px; }
.iv-ai-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--iv-muted);
  opacity: 0.5; animation: iv-blink 1.1s infinite ease-in-out;
}
.iv-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.iv-ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes iv-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 0.9; transform: translateY(-2px); } }

/* ---------- structured cards (tool results) ---------- */
.iv-ai-card {
  background: var(--iv-paper-2);
  border: 1px solid var(--iv-line);
  border-radius: 16px;
  overflow: hidden;
  max-width: 92%;
}
.iv-ai-card-accent { height: 3px; background: var(--iv-crimson); }
.iv-ai-card-body { padding: 14px 16px; }
.iv-ai-card-eyebrow { font-size: 11.5px; color: var(--iv-crimson-2); font-weight: 600; margin-bottom: 4px; }
.iv-ai-card-title { font-family: "Fraunces", serif; font-size: 16.5px; font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
.iv-ai-card-sub { font-size: 13px; color: var(--iv-muted); margin: 0 0 10px; line-height: 1.45; }
.iv-ai-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.iv-ai-chip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  background: var(--iv-cream); color: var(--iv-crimson-2); border: 1px solid var(--iv-line);
}
.iv-ai-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-ai-btn {
  border-radius: 999px; padding: 9px 14px; font-size: 13px; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid transparent; cursor: pointer;
}
.iv-ai-btn.primary { background: var(--iv-crimson); color: #fff9f7; }
.iv-ai-btn.primary:hover { background: var(--iv-crimson-2); }
.iv-ai-btn.secondary { background: transparent; color: var(--iv-ink); border-color: var(--iv-line); }
.iv-ai-btn.secondary:hover { background: var(--iv-cream); }

/* ---------- suggestions ---------- */
.iv-ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; flex: none; }
.iv-ai-suggestion {
  border: 1px solid var(--iv-line); background: var(--iv-paper-2);
  border-radius: 999px; padding: 7px 12px; font-size: 12.5px; color: var(--iv-ink);
  cursor: pointer;
}
.iv-ai-suggestion:hover { background: var(--iv-cream); border-color: var(--iv-crimson); }

/* ---------- composer ---------- */
.iv-ai-composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px; border-top: 1px solid var(--iv-line); background: var(--iv-paper-2); flex: none;
}
.iv-ai-input {
  flex: 1; resize: none; border: 1px solid var(--iv-line); border-radius: 16px;
  padding: 10px 13px; font-size: 14px; font-family: inherit; max-height: 90px;
  background: var(--iv-paper); color: var(--iv-ink);
}
.iv-ai-input:focus { outline: none; border-color: var(--iv-crimson); }
.iv-ai-send {
  border: none; background: var(--iv-crimson); color: #fff9f7; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.iv-ai-send:disabled { opacity: 0.45; cursor: default; }
.iv-ai-send:not(:disabled):hover { background: var(--iv-crimson-2); }
.iv-ai-footnote { font-size: 10.5px; color: var(--iv-muted); text-align: center; padding: 0 12px 10px; flex: none; }

@media (max-width: 480px) {
  .iv-ai-root { right: 12px; bottom: 12px; left: 12px; }
  .iv-ai-panel { width: 100%; height: min(78vh, 640px); right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .iv-ai-launcher, .iv-ai-typing span { transition: none; animation: none; }
}
@media (max-width: 640px){
  .iv-ai-root{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));}
  .iv-ai-launcher{width:100%;justify-content:center;padding:14px 18px;min-height:52px}
  .iv-ai-panel{position:fixed;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));width:auto;height:min(82dvh,720px);max-height:calc(100dvh - 16px);border-radius:22px}
  .iv-ai-body{padding:14px 12px;gap:10px}
  .iv-ai-bubble{max-width:92%;font-size:14px}
  .iv-ai-suggestions{padding:0 12px 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .iv-ai-suggestion{flex:0 0 auto;min-height:42px;padding:9px 12px}
  .iv-ai-composer{padding:9px}
  .iv-ai-input{font-size:16px;min-height:42px}
  .iv-ai-send{width:44px;height:44px}
}

/* =========================================================
   FINAL MOBILE HARDENING — Campus AI
   ========================================================= */
@media (max-width: 640px) {
  .iv-ai-root {
    left: auto;
    right: 10px;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px));
    width: auto;
    max-width: calc(100vw - 20px);
  }
  .iv-ai-launcher {
    width: auto;
    max-width: calc(100vw - 20px);
    min-height: 50px;
    padding: 12px 16px;
    justify-content: center;
    white-space: nowrap;
  }
  .iv-ai-panel {
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: max(6px, env(safe-area-inset-bottom));
    width: auto;
    height: min(82dvh, 720px);
    max-height: calc(100dvh - 12px - env(safe-area-inset-top));
    border-radius: 20px;
    min-height: 0;
  }
  .iv-ai-header { padding: 13px 12px; gap: 9px; }
  .iv-ai-header-mark { width: 34px; height: 34px; }
  .iv-ai-header-text strong { font-size: 15px; }
  .iv-ai-header-text small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .iv-ai-close { width: 40px; height: 40px; flex: 0 0 40px; }
  .iv-ai-body {
    min-height: 0;
    padding: 12px 10px;
    gap: 9px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .iv-ai-row { min-width: 0; }
  .iv-ai-bubble {
    max-width: 94%;
    padding: 10px 12px;
    font-size: 14px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .iv-ai-card {
    max-width: 96%;
    width: 100%;
  }
  .iv-ai-card-body { padding: 12px 13px; }
  .iv-ai-card-title { font-size: 16px; overflow-wrap: anywhere; }
  .iv-ai-chip-row { gap: 5px; }
  .iv-ai-chip { max-width: 100%; overflow-wrap: anywhere; }
  .iv-ai-card-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .iv-ai-card-actions > * { width: 100%; min-height: 44px; }
  .iv-ai-suggestions {
    min-width: 0;
    max-width: 100%;
    padding: 0 10px 9px;
    gap: 6px;
  }
  .iv-ai-suggestion { min-height: 44px; max-width: 82vw; }
  .iv-ai-composer { padding: 8px; gap: 7px; }
  .iv-ai-input {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    max-height: 110px;
    font-size: 16px;
  }
  .iv-ai-send { width: 44px; height: 44px; }
  .iv-ai-footnote { font-size: 9.5px; padding: 0 9px 8px; }
}

@media (max-width: 380px) {
  .iv-ai-root { right: 8px; max-width: calc(100vw - 16px); }
  .iv-ai-launcher { max-width: calc(100vw - 16px); padding-inline: 13px; font-size: 14px; }
  .iv-ai-panel { left: 4px; right: 4px; border-radius: 18px; }
  .iv-ai-header-text small { display: none; }
}

@media (max-width: 640px) {
  .iv-ai-panel { max-height: calc(var(--iv-visual-height, 100dvh) - 12px); }
}

/* =========================================================
   PREMIUM FLOATING BAR — final responsive layout
   ========================================================= */
.iv-ai-root{right:20px;bottom:20px;}
.iv-ai-launcher{
  min-width:248px;
  min-height:58px;
  padding:9px 12px 9px 10px;
  border-radius:18px;
  gap:10px;
  justify-content:flex-start;
  box-shadow:0 14px 34px rgba(179,19,43,.24),0 3px 10px rgba(36,23,25,.08);
  border:1px solid rgba(255,255,255,.16);
}
.iv-ai-launcher-mark{
  width:38px;height:38px;
  box-shadow:inset 0 0 0 1px rgba(179,19,43,.08);
}
.iv-ai-launcher-mark span{font-size:17px}
.iv-ai-launcher-copy{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.15;
}
.iv-ai-launcher-copy strong{font-size:14px;font-weight:800;letter-spacing:-.01em}
.iv-ai-launcher-copy small{margin-top:3px;font-size:10.5px;opacity:.78;white-space:nowrap}
.iv-ai-launcher-live{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.iv-ai-launcher-live i{
  width:6px;height:6px;border-radius:50%;
  background:#8ee2ad;
  box-shadow:0 0 0 3px rgba(142,226,173,.12);
}

/* Cleaner desktop panel positioning and proportions. */
@media (min-width:641px){
  .iv-ai-panel{
    width:410px;
    height:min(660px,calc(100vh - 56px));
    border-radius:24px;
  }
}

/* Mobile: AI stays as a compact floating bar above the full-width WhatsApp action. */
@media (max-width:640px){
  .iv-ai-root{
    left:auto;
    right:10px;
    bottom:max(72px,calc(env(safe-area-inset-bottom) + 62px));
    width:auto;
    max-width:calc(100vw - 20px);
  }
  .iv-ai-launcher{
    width:min(292px,calc(100vw - 20px));
    min-width:0;
    min-height:58px;
    padding:9px 10px;
    border-radius:18px;
    gap:9px;
  }
  .iv-ai-launcher-mark{width:38px;height:38px;flex:0 0 38px}
  .iv-ai-launcher-copy strong{font-size:13.5px}
  .iv-ai-launcher-copy small{font-size:10px;max-width:145px;overflow:hidden;text-overflow:ellipsis}
  .iv-ai-launcher-live{padding:5px 6px;font-size:8.5px}
  .iv-ai-panel{
    left:5px;right:5px;
    bottom:max(5px,env(safe-area-inset-bottom));
    width:auto;
    height:min(84dvh,740px);
    max-height:calc(100dvh - 10px - env(safe-area-inset-top));
    border-radius:22px;
  }
  .iv-ai-header{padding:12px 12px}
  .iv-ai-body{padding:12px 10px}
  .iv-ai-card,.iv-ai-bubble{max-width:100%}
}

@media (max-width:380px){
  .iv-ai-root{right:8px;max-width:calc(100vw - 16px)}
  .iv-ai-launcher{width:calc(100vw - 16px);max-width:300px}
  .iv-ai-launcher-live span{display:none}
  .iv-ai-launcher-live{width:10px;height:10px;padding:0;background:transparent}
}