<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Sobhan Panda</title>
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"/>
  <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
  <style>
  :root {
    --ink: #0f0e0c;
    --paper: #f5f2eb;
    --paper2: #ede9e0;
    --paper3: #e4dfd3;
    --red: #d4351c;
    --red-dim: rgba(212,53,28,0.06);
    --muted: #6b6760;
    --mono: 'IBM Plex Mono', monospace;
    --sans: 'Syne', sans-serif;
    --serif: 'Instrument Serif', serif;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
  }
  a { color: inherit; text-decoration: none; }

  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
      linear-gradient(rgba(15,14,12,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,14,12,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none; z-index: 0;
  }

  /* ── HEADER ── */
  header {
    position: relative; z-index: 10;
    border-bottom: 2px solid var(--ink);
    display: grid; grid-template-columns: 1fr auto;
    align-items: stretch;
  }
  .header-left {
    padding: 16px 32px; border-right: 2px solid var(--ink);
    display: flex; align-items: center; gap: 20px;
  }
  .logo { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
  .header-sep { width: 1px; height: 20px; background: var(--paper3); }
  .status-dot { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: blink 2s ease-in-out infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
  .header-nav { display: flex; align-items: center; }
  .header-nav a {
    display: flex; align-items: center; padding: 0 22px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); border-left: 1px solid var(--paper3); transition: background 0.15s, color 0.15s;
    height: 100%;
  }
  .header-nav a:hover { background: var(--ink); color: var(--paper); }

  /* ── CONTACT NAV BUTTON ── */
  .contact-nav-btn {
    position: relative;
    color: #e8e8e8;
    padding: 0 44px;
    min-width: 140px;
    height: 100%;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    border-left: 1px solid var(--paper3);
    overflow: hidden;
    background: linear-gradient(-45deg, #cc0000 0%, #ff4444 100%);
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
  }
  .contact-nav-btn span,
  .contact-nav-btn span::before {
    position: absolute;
    top: 0%; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center;
    pointer-events: none; justify-content: center;
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    font-weight: 700;
  }
  .contact-nav-btn span::before { content: 'Say Hi!'; top: -100%; }
  .contact-nav-btn::before { top:0; left:0; border-top:2px solid #fff; border-left:2px solid #fff; }
  .contact-nav-btn::after  { bottom:0; right:0; border-bottom:2px solid #fff; border-right:2px solid #fff; }
  .contact-nav-btn::after,
  .contact-nav-btn::before {
    content:""; position:absolute;
    width:18px; height:18px;
    pointer-events:none;
    transition: all 0.3s cubic-bezier(0.215,0.610,0.355,1);
  }
  .contact-nav-btn:hover {
    box-shadow: 0 0 28px rgba(204,0,0,0.6), 0 0 28px rgba(255,68,68,0.4);
  }
  .contact-nav-btn:hover::before,
  .contact-nav-btn:hover::after { width:100%; height:100%; }
  .contact-nav-btn:hover span { top: 100%; }
  .contact-nav-btn:active { scale:0.97; }

  /* ══════════════════════════════════════
    HERO — FULL VIEWPORT AI SECTION
  ══════════════════════════════════════ */
  .ai-hero {
    position: relative; z-index: 1;
    min-height: calc(100vh - 56px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
  }

  .ai-hero-left {
    padding: 60px 48px 60px 32px;
    border-right: 2px solid var(--ink);
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .hero-eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--red); margin-bottom: 32px;
    display: flex; align-items: center; gap: 10px;
  }
  .hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--red); }
  .hero-heading {
    font-family: var(--serif);
    font-size: clamp(52px, 6vw, 80px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
  }
  .hero-heading em { font-style: italic; color: var(--red); }
  .hero-sub { font-size: 14px; color: var(--muted); line-height: 1.8; max-width: 400px; margin-bottom: 40px; }
  .scroll-hint {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  }
  .scroll-hint::after { content: ''; flex: 1; max-width: 60px; height: 1px; background: var(--paper3); }

  .ai-hero-right { display: flex; flex-direction: column; background: var(--ink); position: relative; }
  .server-status {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.4);
    flex-shrink: 0;
  }
  .s-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.15); flex-shrink: 0; }
  .s-dot.ok { background: #22c55e; }
  .s-dot.err { background: var(--red); }

  .chat-messages {
    flex: 1; overflow-y: auto; padding: 28px 24px;
    display: flex; flex-direction: column; gap: 20px;
    scroll-behavior: smooth; min-height: 0;
  }
  .chat-messages::-webkit-scrollbar { width: 3px; }
  .chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }

  .msg { display: flex; gap: 10px; }
  .msg.user { flex-direction: row-reverse; }
  .msg-avatar {
    width: 30px; height: 30px; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
    color: rgba(255,255,255,0.5); border-radius: 2px;
  }
  .msg.user .msg-avatar { background: var(--red); color: #fff; border-color: var(--red); }
  .msg-bubble {
    max-width: 78%; padding: 12px 16px; font-size: 13px; line-height: 1.72;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(245,242,235,0.88); border-radius: 2px;
  }
  .msg.user .msg-bubble { background: var(--red); color: #fff; border-color: var(--red); }
  .msg.error .msg-bubble { background: rgba(212,53,28,0.12); border-color: rgba(212,53,28,0.4); }

  .quick-row { padding: 0 24px 16px; display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
  .quick-q {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
    padding: 6px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 2px;
    background: transparent; color: rgba(245,242,235,0.5); cursor: pointer; transition: all 0.15s; text-align: left;
  }
  .quick-q:hover { background: rgba(255,255,255,0.07); color: rgba(245,242,235,0.9); border-color: rgba(255,255,255,0.25); }

  .chat-input-bar { border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: stretch; flex-shrink: 0; }
  #chat-input {
    flex: 1; padding: 16px 20px; background: transparent; border: none; outline: none;
    font-family: inherit; font-size: 14px; color: rgba(245,242,235,0.9);
    resize: none; height: 54px; line-height: 1.4;
  }
  #chat-input::placeholder { color: rgba(245,242,235,0.25); }
  .send-btn {
    width: 54px; flex-shrink: 0; background: var(--red); color: #fff;
    border: none; border-left: 1px solid rgba(255,255,255,0.1);
    cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
  }
  .send-btn:hover { background: #b52d16; }
  .send-btn:disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.2); cursor: not-allowed; }

  .typing { display: flex; gap: 5px; align-items: center; padding: 2px 0; }
  .typing span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.3); animation: tdot 1.2s infinite; }
  .typing span:nth-child(2) { animation-delay: 0.2s; }
  .typing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes tdot { 0%,80%,100%{transform:translateY(0);opacity:.3} 40%{transform:translateY(-4px);opacity:1} }

  /* ══════════════════════════════════════
    SKILLS BAR
  ══════════════════════════════════════ */
  .skills-bar { position: relative; z-index: 1; border-bottom: 2px solid var(--ink); display: flex; flex-wrap: wrap; background: var(--ink); }
  .skills-bar-label {
    padding: 13px 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: #ff5538; border-right: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap; display: flex; align-items: center; text-shadow: 0 0 12px rgba(255,85,56,0.5);
  }
  .skill-pill {
    padding: 13px 16px; font-family: var(--mono); font-size: 11px;
    color: rgba(245,242,235,0.72); border-right: 1px solid rgba(255,255,255,0.07);
    transition: color 0.15s, background 0.15s; cursor: default;
  }
  .skill-pill:hover { color: #ff5538; background: rgba(255,85,56,0.07); text-shadow: 0 0 10px rgba(255,85,56,0.4); }

  /* ══════════════════════════════════════
    MAIN CONTENT GRID
  ══════════════════════════════════════ */
  .main-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--ink); }
  .projects-col { border-right: 2px solid var(--ink); }
  .col-header {
    padding: 18px 32px; border-bottom: 2px solid var(--ink);
    display: flex; align-items: center; justify-content: space-between;
  }
  .col-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .col-count { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--paper3); }

  .project-item { border-bottom: 1px solid var(--paper3); padding: 26px 32px; transition: background 0.15s; cursor: pointer; }
  .project-item:last-child { border-bottom: none; }
  .project-item:hover { background: var(--red-dim); }
  .project-item:hover .proj-arrow { transform: translateX(4px); }
  .proj-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
  .proj-name { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
  .proj-arrow { font-size: 15px; color: var(--muted); transition: transform 0.2s; flex-shrink: 0; margin-top: 2px; }
  .proj-stack { font-family: var(--mono); font-size: 10px; color: var(--red); letter-spacing: 0.05em; margin-bottom: 9px; }
  .proj-desc { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 12px; }
  .proj-highlights { display: flex; flex-wrap: wrap; gap: 5px; }
  .proj-tag { font-family: var(--mono); font-size: 10px; padding: 2px 7px; border: 1px solid var(--paper3); color: var(--muted); border-radius: 2px; }

  .right-col { display: flex; flex-direction: column; }
  .exp-block { border-bottom: 2px solid var(--ink); }
  .exp-item-inner { padding: 26px 32px; }
  .exp-badge { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--ink); margin-bottom: 12px; }
  .exp-role { font-family: var(--serif); font-size: 22px; margin-bottom: 4px; }
  .exp-company { font-family: var(--mono); font-size: 12px; color: var(--red); letter-spacing: 0.06em; margin-bottom: 12px; }
  .exp-list { list-style: none; }
  .exp-list li { font-size: 13px; color: var(--muted); padding: 4px 0 4px 20px; position: relative; line-height: 1.6; }
  .exp-list li::before { content: '→'; position: absolute; left: 0; color: var(--paper3); }

  .edu-block { padding: 26px 32px; border-bottom: 2px solid var(--ink); }
  .edu-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .edu-sub { font-family: var(--mono); font-size: 11px; color: var(--red); margin-bottom: 7px; }
  .edu-detail { font-size: 13px; color: var(--muted); line-height: 1.6; }

  .contact-strip { display: flex; flex-direction: column; flex: 1; }
  .contact-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--paper3); }
  .contact-row:last-child { border-bottom: none; }
  .contact-label {
    width: 100px; flex-shrink: 0; padding: 15px 16px;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    border-right: 1px solid var(--paper3); display: flex; align-items: center; background: var(--paper2);
  }
  .contact-val { padding: 15px 16px; font-size: 13px; font-weight: 500; display: flex; align-items: center; transition: color 0.15s; }
  .contact-row:hover .contact-val { color: var(--red); }

  footer {
    position: relative; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 32px; flex-wrap: wrap; gap: 10px;
    border-top: 2px solid var(--ink);
  }
  footer p { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
  footer span { color: var(--red); }

  @media(max-width: 860px) {
    .ai-hero { grid-template-columns: 1fr; min-height: auto; }
    .ai-hero-left { border-right: none; border-bottom: 2px solid var(--ink); padding: 40px 24px; }
    .ai-hero-right { min-height: 520px; }
    .main-grid { grid-template-columns: 1fr; }
    .projects-col { border-right: none; }
    .header-nav a { display: none; }
    .contact-nav-btn { display: flex; }
    footer { padding: 18px 24px; }
  }

  /* ══════════════════════════════════════
    PROJECT FLASHCARD MODAL
  ══════════════════════════════════════ */
  .project-modal-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(15,14,12,0.72);
    display: none; align-items: center; justify-content: center;
    padding: 24px; perspective: 1600px;
    backdrop-filter: blur(3px);
  }
  .project-modal-overlay.open { display: flex; }

  .project-modal-card {
    width: min(780px, 100%);
    max-height: 88vh; overflow-y: auto;
    background: var(--red);
    border: 2px solid var(--ink);
    position: relative;
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) inset;
    transform: rotateX(18deg) rotateY(-4deg) scale(0.82) translateY(50px);
    opacity: 0;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(.22,.9,.24,1.15), opacity 0.35s ease;
  }
  .project-modal-overlay.open .project-modal-card {
    transform: rotateX(0deg) rotateY(0deg) scale(1) translateY(0);
    opacity: 1;
  }

  .project-modal-close {
    position: absolute; top: 14px; right: 18px;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
    color: #fff; font-size: 18px; line-height: 1; cursor: pointer; z-index: 2;
    transition: background 0.15s, transform 0.15s;
  }
  .project-modal-close:hover { background: rgba(0,0,0,0.32); transform: rotate(90deg); }

  .project-modal-eyebrow {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.7); padding: 18px 36px 0;
  }

  .project-modal-body { display: grid; grid-template-columns: 1.15fr 1fr; }
  .project-modal-left { padding: 18px 36px 36px; border-right: 1px solid rgba(255,255,255,0.22); }
  .project-modal-title { font-family: var(--serif); font-size: 30px; line-height: 1.15; color: #fff; margin-bottom: 18px; }
  .project-modal-desc { font-size: 14px; line-height: 1.8; color: #fff; opacity: 0.94; margin-bottom: 24px; }
  .project-modal-highlights { display: flex; flex-wrap: wrap; gap: 8px; }
  .project-modal-tag {
    font-family: var(--mono); font-size: 10px; padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.55); border-radius: 2px; color: #fff; letter-spacing: 0.03em;
  }

  .project-modal-right { padding: 18px 30px 36px; display: flex; flex-direction: column; }
  .project-modal-stack-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.75); margin-bottom: 14px;
  }
  .project-modal-stack { display: flex; flex-direction: column; gap: 14px; }
  .stack-box-3d {
    background: #f5f2eb; color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 500;
    padding: 13px 16px; text-align: center; letter-spacing: 0.02em;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3), 6px 6px 0 rgba(0,0,0,0.16), 9px 9px 0 rgba(0,0,0,0.08);
    transform: perspective(500px) rotateX(6deg) rotateY(-2deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .stack-box-3d:hover {
    transform: perspective(500px) rotateX(0deg) rotateY(0deg) translateY(-3px);
    box-shadow: 4px 6px 0 rgba(0,0,0,0.3), 8px 10px 0 rgba(0,0,0,0.14);
  }

  .project-modal-github-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 18px; margin-top: 4px;
    background: var(--ink); color: #fff; text-decoration: none;
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
    border-top: 2px solid var(--ink); cursor: pointer;
    transition: background 0.2s ease, letter-spacing 0.2s ease;
  }
  .project-modal-github-btn:hover { background: #000; letter-spacing: 0.18em; }
  .project-modal-github-btn svg { width: 16px; height: 16px; fill: #fff; }

  @media (max-width: 700px) {
    .project-modal-body { grid-template-columns: 1fr; }
    .project-modal-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.22); }
  }

  .reveal { opacity: 0; transform: translateY(10px); animation: rev 0.5s forwards; }
  .reveal:nth-child(2) { animation-delay: 0.1s; }
  .reveal:nth-child(3) { animation-delay: 0.2s; }
  @keyframes rev { to { opacity:1; transform:translateY(0); } }

  /* ══════════════════════════════════════════════════
    LLM CONTROL SIDEBAR
  ══════════════════════════════════════════════════ */
  #llm-sidebar-toggle {
    position: fixed; top: 50%; right: 0;
    transform: translateY(-50%); z-index: 9999;
    width: 32px; height: 80px;
    background: linear-gradient(180deg, #c0211a 0%, #8b0f0a 100%);
    border: none; border-right: none; border-radius: 6px 0 0 6px;
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    box-shadow: -3px 0 16px rgba(0,0,0,0.35);
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1), background 0.15s;
  }
  #llm-sidebar-toggle:hover { background: linear-gradient(180deg, #d4351c 0%, #9e1209 100%); }
  #llm-sidebar-toggle .toggle-icon { font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1; transition: transform 0.35s; }
  #llm-sidebar-toggle .toggle-label { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.6); writing-mode: vertical-rl; transform: rotate(180deg); }

  #llm-sidebar {
    position: fixed; top: 0; right: -320px; width: 316px; height: 100vh;
    z-index: 9998; background: #100d0c; border-left: 1px solid rgba(212,53,28,0.25);
    display: flex; flex-direction: column; overflow: hidden;
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.5);
  }
  #llm-sidebar.open { right: 0; }
  #llm-sidebar-toggle.open { right: 316px; }
  #llm-sidebar::before {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none; opacity: 0.6; z-index: 0;
  }
  .sb-header { position: relative; z-index: 1; padding: 16px 20px 14px; border-bottom: 1px solid rgba(212,53,28,0.2); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; background: linear-gradient(135deg, rgba(180,20,10,0.12) 0%, transparent 60%); }
  .sb-header-left { display: flex; flex-direction: column; gap: 2px; }
  .sb-title { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #ff4d30; font-weight: 500; text-shadow: 0 0 12px rgba(255,77,48,0.5); }
  .sb-subtitle { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.25); letter-spacing: 0.06em; }
  .sb-close { width: 28px; height: 28px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; color: rgba(255,255,255,0.4); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .sb-close:hover { background: rgba(212,53,28,0.2); border-color: rgba(212,53,28,0.4); color: #fff; }
  .sb-body { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 22px; }
  .sb-body::-webkit-scrollbar { width: 2px; }
  .sb-body::-webkit-scrollbar-thumb { background: rgba(212,53,28,0.3); border-radius: 2px; }
  .sb-section-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #ff5538; text-shadow: 0 0 10px rgba(255,85,56,0.45); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
  .sb-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,85,56,0.25); }
  .sb-ctrl { display: flex; flex-direction: column; gap: 8px; animation: sbFadeIn 0.3s ease both; }
  @keyframes sbFadeIn { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:none; } }
  .sb-ctrl-header { display: flex; align-items: center; justify-content: space-between; }
  .sb-ctrl-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.8); letter-spacing: 0.05em; }
  .sb-ctrl-value { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #ff5538; font-weight: 500; min-width: 36px; text-align: right; text-shadow: 0 0 8px rgba(255,85,56,0.45); }
  .sb-ctrl-hint { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.22); line-height: 1.5; letter-spacing: 0.02em; }
  .sb-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); outline: none; cursor: pointer; position: relative; }
  .sb-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #d4351c; cursor: pointer; border: 2px solid rgba(255,255,255,0.15); box-shadow: 0 0 8px rgba(212,53,28,0.5); transition: transform 0.15s, box-shadow 0.15s; }
  .sb-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 14px rgba(212,53,28,0.7); }
  .sb-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #d4351c; cursor: pointer; border: 2px solid rgba(255,255,255,0.15); box-shadow: 0 0 8px rgba(212,53,28,0.5); }
  .sb-slider.filled { background: linear-gradient(to right, rgba(212,53,28,0.7) 0%, rgba(212,53,28,0.7) var(--pct, 70%), rgba(255,255,255,0.08) var(--pct, 70%)); }
  .sb-toggle-group { display: flex; gap: 4px; }
  .sb-toggle-btn { flex: 1; padding: 7px 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; color: rgba(255,255,255,0.35); font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.06em; cursor: pointer; transition: all 0.15s; text-align: center; line-height: 1.4; }
  .sb-toggle-btn:hover { border-color: rgba(212,53,28,0.3); color: rgba(255,255,255,0.6); }
  .sb-toggle-btn.active { background: linear-gradient(135deg, rgba(212,53,28,0.25) 0%, rgba(180,20,10,0.15) 100%); border-color: rgba(212,53,28,0.6); color: #f87060; box-shadow: 0 0 10px rgba(212,53,28,0.15); }
  .sb-select { width: 100%; padding: 9px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: rgba(255,255,255,0.75); font-family: 'IBM Plex Mono', monospace; font-size: 11px; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(212,53,28,0.6)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; transition: border-color 0.15s; }
  .sb-select:focus { border-color: rgba(212,53,28,0.5); }
  .sb-select option { background: #1a0e0c; color: rgba(255,255,255,0.8); }
  .sb-switch-row { display: flex; align-items: center; justify-content: space-between; }
  .sb-switch-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.8); letter-spacing: 0.05em; }
  .sb-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
  .sb-switch input { opacity: 0; width: 0; height: 0; }
  .sb-switch-track { position: absolute; inset: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); border-radius: 11px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
  .sb-switch-track::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.3); top: 2px; left: 2px; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; }
  .sb-switch input:checked + .sb-switch-track { background: rgba(212,53,28,0.25); border-color: rgba(212,53,28,0.5); }
  .sb-switch input:checked + .sb-switch-track::after { transform: translateX(18px); background: #d4351c; box-shadow: 0 0 8px rgba(212,53,28,0.6); }
  .sb-advanced-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; padding: 0; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #ff5538; }
  .sb-advanced-toggle:hover { color: #fd7057; text-shadow: 0 0 10px rgba(255,85,56,0.5); }
  .sb-advanced-toggle::before { content: ''; flex: 1; height: 1px; background: #ff5538; }
  .sb-advanced-toggle::after { content: ''; flex: 1; height: 1px; background: #ff5538; }
  .sb-adv-arrow { display: inline-block; font-size: 10px; transition: transform 0.25s; }
  .sb-advanced-toggle.open .sb-adv-arrow { transform: rotate(180deg); }
  .sb-advanced-section { display: flex; flex-direction: column; gap: 22px; overflow: hidden; max-height: 0; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s; opacity: 0; }
  .sb-advanced-section.open { max-height: 600px; opacity: 1; }
  .sb-footer { position: relative; z-index: 1; padding: 12px 20px; border-top: 1px solid rgba(212,53,28,0.15); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .sb-active-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.2); letter-spacing: 0.08em; }
  .sb-reset-btn { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #ff5538; background: none; border: 1px solid rgba(255,85,56,0.35); border-radius: 3px; padding: 4px 10px; cursor: pointer; transition: all 0.15s; }
  .sb-reset-btn:hover { border-color: #ff5538; color: #fff; background: rgba(255,85,56,0.15); }
  .sb-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 0 -20px; }

  /* ══════════════════════════════════════
    CONTACT MODAL
  ══════════════════════════════════════ */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }

  .contact-modal {
    position: relative;
    width: min(480px, 92vw);
    background: #ffffff;
    border-left: 6px solid #cc0000;
    padding: 42px 36px 36px;
    transform: translateY(24px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 60px rgba(0,0,0,0.35);
  }
  .modal-overlay.open .contact-modal { transform: translateY(0) scale(1); }

  .modal-close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: none; color: #aaa;
    font-size: 1.5rem; cursor: pointer; line-height: 1; transition: color 0.2s;
  }
  .modal-close:hover { color: #cc0000; }

  .modal-heading {
    display: block; color: #111;
    font-family: var(--sans); font-size: 2.6rem; font-weight: 900;
    letter-spacing: 0em; margin-bottom: 28px;
  }

  .cf-field-wrap { margin-bottom: 16px; }

  .contact-modal input,
  .contact-modal textarea {
    width: 100%; background: #f0f0f0;
    border: 2.5px solid #000; outline: none;
    color: #111; font-family: var(--mono);
    font-size: 0.95rem; font-weight: 600;
    padding: 14px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .contact-modal input:focus,
  .contact-modal textarea:focus {
    border-color: #cc0000;
    box-shadow: inset 0 0 0 1px rgba(204,0,0,0.1);
  }
  .contact-modal input::placeholder,
  .contact-modal textarea::placeholder { color: #999; font-weight: 600; }
  .contact-modal textarea { resize: none; height: 160px; font-family: var(--mono); }

  .cf-btn-row { display: flex; align-items: center; gap: 16px; margin-top: 20px; }

  /* Send — gradient button */
  .cf-send-btn {
    position: relative; color: #e8e8e8;
    padding: 0 30px; flex: 1; height: 52px;
    font-family: var(--mono); font-weight: 700; font-size: 13px;
    letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; border: none; overflow: hidden;
    background: linear-gradient(-45deg, #cc0000 0%, #ff4444 100%);
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
  }
  .cf-send-btn span,
  .cf-send-btn span::before {
    position: absolute; top: 0%; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; pointer-events: none;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    font-weight: 700;
  }
  .cf-send-btn span::before { content: '✉ Sent!'; top: -100%; }
  .cf-send-btn::before { top:0; left:0; border-top:2px solid #fff; border-left:2px solid #fff; }
  .cf-send-btn::after  { bottom:0; right:0; border-bottom:2px solid #fff; border-right:2px solid #fff; }
  .cf-send-btn::after,
  .cf-send-btn::before { content:""; position:absolute; width:20px; height:20px; pointer-events:none; transition: all 0.3s cubic-bezier(0.215,0.610,0.355,1); }
  .cf-send-btn:hover { box-shadow: 0 0 28px rgba(204,0,0,0.5), 0 0 28px rgba(255,68,68,0.4); }
  .cf-send-btn:hover::before,
  .cf-send-btn:hover::after { width:100%; height:100%; }
  .cf-send-btn:hover span { top: 100%; }
  .cf-send-btn:active { scale:0.97; }
  .cf-send-btn:disabled { opacity:0.45; cursor:not-allowed; }

  .cf-reset-btn {
    background: transparent; border: 2.5px solid #cc0000;
    color: #cc0000; font-family: var(--mono);
    font-weight: 800; font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0 22px; height: 52px; cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }
  .cf-reset-btn:hover { background: #cc0000; color: #fff; }

  .cf-status {
    margin-top: 12px; font-family: var(--mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; min-height: 16px;
  }
  .cf-status.success { color: #16a34a; }
  .cf-status.error   { color: #cc0000; }
  .cf-status.sending { color: #888; }
  </style>
  </head>
  <body>

  <!-- HEADER -->
  <header>
    <div class="header-left">
      <span class="logo">SP//Portfolio</span>
      <div class="header-sep"></div>
      <div class="status-dot"><span class="dot"></span>Available for work</div>
    </div>
    <nav class="header-nav">
      <a href="#projects">Projects</a>
      <a href="#experience">Experience</a>
      <button class="contact-nav-btn" id="openContactModal"><span>Contact</span></button>
    </nav>
  </header>

  <!-- HERO -->
  <section class="ai-hero">
    <div class="ai-hero-left">
      <div>
        <div class="hero-eyebrow reveal">Sobhan Panda · AI Engineer</div>
        <h1 class="hero-heading reveal">
          Talk to<br/>my <em>AI.</em><br/>It knows<br/>everything.
        </h1>
        <p class="hero-sub reveal">
          Don't scroll through a resume — just ask. My AI knows every project I've built,
          every tool I've used, and every problem I've solved. Try it →
        </p>
      </div>
      <div class="scroll-hint reveal">Scroll for full portfolio below</div>
    </div>

    <div class="ai-hero-right">
      <div class="server-status">
        <div class="s-dot" id="s-dot"></div>
        <span id="s-label">Connecting to AI server...</span>
      </div>
      <div class="chat-messages" id="chat-messages">
        <div class="msg ai">
          <div class="msg-avatar">SP</div>
          <div class="msg-bubble">
            Hey! I'm Sobhan's AI. Ask me anything — his projects, tech stack, experience, what he's looking for. If you want to change the AI responses, click the sidebar button on the right to open the LLM control panel.
          </div>
        </div>
      </div>
      <div class="quick-row">
        <button class="quick-q" onclick="sendQuick(this)">Best projects?</button>
        <button class="quick-q" onclick="sendQuick(this)">Tech stack?</button>
        <button class="quick-q" onclick="sendQuick(this)">Work experience?</button>
        <button class="quick-q" onclick="sendQuick(this)">Open to work?</button>
        <button class="quick-q" onclick="sendQuick(this)">What makes you different?</button>
      </div>
      <div class="chat-input-bar">
        <textarea id="chat-input" placeholder="Ask anything about Sobhan..." onkeydown="handleKey(event)"></textarea>
        <button class="send-btn" id="send-btn" onclick="sendMessage()">↑</button>
      </div>
    </div>
  </section>

  <!-- SKILLS BAR -->
  <div class="skills-bar">
    <div class="skills-bar-label">Stack //</div>
    <div class="skill-pill">Python</div>
    <div class="skill-pill">LangChain</div>
    <div class="skill-pill">LangGraph</div>
    <div class="skill-pill">MCP</div>
    <div class="skill-pill">FAISS</div>
    <div class="skill-pill">FastAPI</div>
    <div class="skill-pill">HuggingFace</div>
    <div class="skill-pill">Transformers</div>
    <div class="skill-pill">Docker</div>
    <div class="skill-pill">MLflow</div>
    <div class="skill-pill">C++</div>
    <div class="skill-pill">JavaScript</div>
  </div>

  <!-- PROJECTS + INFO -->
  <div class="main-grid" id="projects">
    <div class="projects-col">
      <div class="col-header">
        <span class="col-title">// some of my best projects and many more yet to come </span>
        <span class="col-count">04</span>
      </div>
      <div class="project-item" onclick="openProjectModal(0)">
        <div class="proj-header"><div class="proj-name">Agentic AI — Multi-Tool Assistant</div><div class="proj-arrow">↗</div></div>
        <div class="proj-stack">Python · LangChain · LangGraph · FAISS · MCP</div>
        <p class="proj-desc">Multi-agent system routing requests across weather, Gmail, translation, web search, and math. Intent-routing, planning, memory, and self-evaluation with ChatGroq LLM.</p>
        <div class="proj-highlights"><span class="proj-tag">Multi-agent</span><span class="proj-tag">LangGraph</span><span class="proj-tag">Real-time</span></div>
      </div>
      <div class="project-item" onclick="openProjectModal(1)">
        <div class="proj-header"><div class="proj-name">Multi-RAG Chatbot</div><div class="proj-arrow">↗</div></div>
        <div class="proj-stack">Python · LangChain · FAISS · HuggingFace</div>
        <p class="proj-desc">RAG chatbot running semantic search, knowledge graph, and BM25 simultaneously — picks the highest-accuracy answer. Ingests text, PDF, and structured data dynamically.</p>
        <div class="proj-highlights"><span class="proj-tag">3 RAG algos</span><span class="proj-tag">Accuracy scoring</span><span class="proj-tag">FAISS</span></div>
      </div>
      <div class="project-item" onclick="openProjectModal(2)">
        <div class="proj-header"><div class="proj-name">Avalanche-Susceptibility-Mapping-for-Vegetation-Restoration</div><div class="proj-arrow">↗</div></div>
        <div class="proj-stack">Python · U-KAN · MUltiSSL · Earth-Engine </div>
        <p class="proj-desc">This project focuses on identifying barren or underutilized land suitable for vegetation restoration in both plains and hilly regions using satellite imagery and Google Earth Engine. The system analyzes geographical and environmental factors such as slope, steepness to determine areas with high restoration potential</p>
        <div class="proj-highlights"><span class="proj-tag">AutoML</span><span class="proj-tag">MLflow</span><span class="proj-tag">FastAPI</span></div>
      </div>
    </div>

    <!-- PROJECT FLASHCARD MODAL -->
    <div class="project-modal-overlay" id="projectModalOverlay" onclick="closeProjectModal(event)">
      <div class="project-modal-card" id="projectModalCard" onclick="event.stopPropagation()">
        <button class="project-modal-close" onclick="closeProjectModal(event, true)" aria-label="Close">&times;</button>
        <span class="project-modal-eyebrow">// project insights</span>
        <div class="project-modal-body">
          <div class="project-modal-left">
            <h2 class="project-modal-title" id="modalProjTitle"></h2>
            <p class="project-modal-desc" id="modalProjDesc"></p>
            <div class="project-modal-highlights" id="modalProjHighlights"></div>
          </div>
          <div class="project-modal-right">
            <span class="project-modal-stack-label">Tech Stack</span>
            <div class="project-modal-stack" id="modalProjStack"></div>
          </div>
        </div>
        <a href="#" target="_blank" rel="noopener" class="project-modal-github-btn" id="modalGithubBtn">
          <svg viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
          GITHUB
        </a>
      </div>
    </div>

    <div class="right-col" id="experience">
      <div class="exp-block">
        <div class="col-header"><span class="col-title">// Experience</span></div>
        <div class="exp-item-inner">
          <span class="exp-badge">Internship</span>
          <div class="exp-role">Team Lead & AI Engineer</div>
          <div class="exp-company">@Internpro</div>
          <ul class="exp-list">
            <li>Sole AI developer — owned the complete Generative AI solution end-to-end</li>
            <li>Built real-time voice AI interviewer using Web Speech API and Google Gemini</li>
            <li>Designed prompt flow, conversational logic, and contextual response handling</li>
            <li>Collaborated with frontend developers on HTML/CSS/JS implementation</li>
          </ul>
        </div>
      </div>
      <div class="edu-block">
        <div class="col-header" style="border-bottom: 1px solid var(--paper3);"><span class="col-title">// Education</span></div>
        <div style="padding: 20px 0;">
          <div style="margin-bottom: 18px;">
            <div class="edu-name">Jaypee Institute of Information Technology</div>
            <div class="edu-sub">B.Tech Computer Science · Aug 2023 – May 2027</div>
            <div class="edu-detail">Data Structures · Algorithms · OS · Computer Security · Architecture</div>
          </div>
          <div>
            <div class="edu-name">Modern Vidya Niketan School</div>
            <div class="edu-sub">Faridabad, Haryana</div>
            <div class="edu-detail">10th: 94.3% &nbsp;|&nbsp; 12th: 75%</div>
          </div>
        </div>
      </div>
      <div class="contact-strip">
        <div class="contact-row"><div class="contact-label">Email</div><a class="contact-val" href="/cdn-cgi/l/email-protection#c6b5a9a4aea7a8b6a7a8a2a7f4f4f6f286a1aba7afaae8a5a9ab"><span class="__cf_email__" data-cfemail="64170b060c050a14050a000556565450240309050d084a070b09">[email&#160;protected]</span></a></div>
        <div class="contact-row"><div class="contact-label">Phone</div><a class="contact-val" href="tel:9910180247">+91 9910180247</a></div>
        <div class="contact-row"><div class="contact-label">GitHub</div><a class="contact-val" href="https://github.com/sobhan2204" target="_blank">github.com/sobhan2204</a></div>
        <div class="contact-row"><div class="contact-label">LinkedIn</div><a class="contact-val" href="https://linkedin.com/in/sobhan-panda-2277b7297" target="_blank">linkedin.com/in/sobhan</a></div>
      </div>
    </div>
  </div>

  <footer>
    <p>© 2026 Sobhan Panda — Noida, Uttar Pradesh</p>
  </footer>

  <!-- LLM SIDEBAR TOGGLE -->
  <button id="llm-sidebar-toggle" onclick="toggleSidebar()" aria-label="Toggle LLM Controls">
    <span class="toggle-icon" id="sb-toggle-icon">⚙</span>
    <span class="toggle-label">LLM</span>
  </button>

  <!-- SIDEBAR PANEL -->
  <div id="llm-sidebar">
    <div class="sb-header">
      <div class="sb-header-left">
        <div class="sb-title">LLM Controls</div>
        <div class="sb-subtitle">Tune AI behavior in real-time</div>
      </div>
      <button class="sb-close" onclick="toggleSidebar()">✕</button>
    </div>
    <div class="sb-body">
      <div>
        <div class="sb-section-label">Tier 1 — Primary</div>
        <div class="sb-ctrl" style="margin-bottom:18px">
          <div class="sb-ctrl-header"><span class="sb-ctrl-label">Creativity</span><span class="sb-ctrl-value" id="val-temperature">0.70</span></div>
          <input type="range" class="sb-slider filled" id="sl-temperature" min="0" max="1" step="0.05" value="0.7" oninput="updateSlider('temperature', this.value, 0, 1)">
          <div class="sb-ctrl-hint">Controls randomness and creativity of responses</div>
        </div>
        <div class="sb-ctrl" style="margin-bottom:18px">
          <div class="sb-ctrl-header"><span class="sb-ctrl-label">Response Length</span><span class="sb-ctrl-value" id="val-max_tokens">300</span></div>
          <input type="range" class="sb-slider filled" id="sl-max_tokens" min="50" max="1000" step="50" value="300" oninput="updateSlider('max_tokens', this.value, 50, 1000)">
          <div class="sb-ctrl-hint">Controls how long the response will be</div>
        </div>
        <div class="sb-ctrl" style="margin-bottom:18px">
          <div class="sb-ctrl-header"><span class="sb-ctrl-label">Thinking Depth</span></div>
          <div class="sb-toggle-group" id="tg-reasoning">
            <button class="sb-toggle-btn" data-val="low" onclick="setToggle('reasoning', 'low', this)"> Fast</button>
            <button class="sb-toggle-btn active" data-val="medium" onclick="setToggle('reasoning', 'medium', this)"> Balanced</button>
            <button class="sb-toggle-btn" data-val="high" onclick="setToggle('reasoning', 'high', this)"> Deep</button>
          </div>
        </div>
        <div class="sb-ctrl">
          <div class="sb-ctrl-header"><span class="sb-ctrl-label">Response Style</span></div>
          <select class="sb-select" id="sel-style" onchange="updateStyle(this.value)">
            <option value="Casual" selected>Casual</option>
            <option value="Formal">Formal</option>
            <option value="Technical">Technical</option>
            <option value="Simple">Simple</option>
          </select>
        </div>
      </div>
      <div class="sb-divider"></div>
      <div>
        <button class="sb-advanced-toggle" id="adv-toggle" onclick="toggleAdvanced()">Advanced Controls<span class="sb-adv-arrow">▾</span></button>
        <div class="sb-advanced-section" id="adv-section" style="margin-top:14px">
          <div class="sb-ctrl">
            <div class="sb-ctrl-header"><span class="sb-ctrl-label">Diversity</span><span class="sb-ctrl-value" id="val-top_p">1.00</span></div>
            <input type="range" class="sb-slider filled" id="sl-top_p" min="0" max="1" step="0.05" value="1" oninput="updateSlider('top_p', this.value, 0, 1)">
            <div class="sb-ctrl-hint">Controls variety of word choices</div>
          </div>
          <div class="sb-ctrl">
            <div class="sb-ctrl-header"><span class="sb-ctrl-label">Avoid Repetition</span><span class="sb-ctrl-value" id="val-freq_penalty">0.0</span></div>
            <input type="range" class="sb-slider filled" id="sl-freq_penalty" min="0" max="2" step="0.1" value="0" oninput="updateSlider('freq_penalty', this.value, 0, 2)">
            <div class="sb-ctrl-hint">Penalizes tokens already used frequently</div>
          </div>
          <div class="sb-ctrl">
            <div class="sb-ctrl-header"><span class="sb-ctrl-label">Encourage New Topics</span><span class="sb-ctrl-value" id="val-pres_penalty">0.0</span></div>
            <input type="range" class="sb-slider filled" id="sl-pres_penalty" min="0" max="2" step="0.1" value="0" oninput="updateSlider('pres_penalty', this.value, 0, 2)">
            <div class="sb-ctrl-hint">Encourages the model to explore new topics</div>
          </div>
          <div class="sb-ctrl">
            <div class="sb-switch-row">
              <span class="sb-switch-label">Consistency Mode</span>
              <label class="sb-switch"><input type="checkbox" id="sw-seed" onchange="updateSeed(this.checked)"><span class="sb-switch-track"></span></label>
            </div>
            <div class="sb-ctrl-hint" style="margin-top:4px">ON = fixed seed (42) for reproducible outputs</div>
          </div>
        </div>
      </div>
    </div>
    <div class="sb-footer">
      <span class="sb-active-label" id="sb-active-count">7 params active</span>
      <button class="sb-reset-btn" onclick="resetParams()">↺ Reset</button>
    </div>
  </div>

  <!-- ══════════════════════════════════════
      CONTACT MODAL
  ══════════════════════════════════════ -->
  <div class="modal-overlay" id="contactOverlay" role="dialog" aria-modal="true">
    <div class="contact-modal">
      <button class="modal-close" id="closeContactModal" aria-label="Close">✕</button>
      <span class="modal-heading">Get in touch</span>
      <div class="cf-field-wrap">
        <input id="cf-name" type="text" placeholder="Name" autocomplete="name"/>
      </div>
      <div class="cf-field-wrap">
        <input id="cf-email" type="email" placeholder="Email" autocomplete="email"/>
      </div>
      <div class="cf-field-wrap">
        <textarea id="cf-message" placeholder="Say Hello"></textarea>
      </div>
      <div class="cf-btn-row">
        <button class="cf-send-btn" id="cf-send"><span>Send</span></button>
        <button class="cf-reset-btn" id="cf-reset">Reset</button>
      </div>
      <p class="cf-status" id="cf-status"></p>
    </div>
  </div>

  <script>

  const EMAILJS_PUBLIC_KEY  = 'O0Bc5fcBAyX2RggPl';
  const EMAILJS_SERVICE_ID  = 'service_b6nje1i';
  const EMAILJS_TEMPLATE_ID = 'template_huj21smz';

  if (typeof emailjs === 'undefined') {
    console.error('EmailJS SDK failed to load — check network/ad-blocker or the <script> tag in <head>.');
  } else {
    emailjs.init({ publicKey: EMAILJS_PUBLIC_KEY });
  }

  /* ── CONTACT MODAL ── */
  const overlay = document.getElementById('contactOverlay');
  document.getElementById('openContactModal').addEventListener('click', () => overlay.classList.add('open'));
  document.getElementById('closeContactModal').addEventListener('click', closeContact);
  overlay.addEventListener('click', e => { if (e.target === overlay) closeContact(); });
  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeContact(); });

  function closeContact() {
    overlay.classList.remove('open');
    document.getElementById('cf-status').className = 'cf-status';
    document.getElementById('cf-status').textContent = '';
  }

  document.getElementById('cf-reset').addEventListener('click', () => {
    ['cf-name','cf-email','cf-message'].forEach(id => document.getElementById(id).value = '');
    document.getElementById('cf-status').className = 'cf-status';
    document.getElementById('cf-status').textContent = '';
  });

  document.getElementById('cf-send').addEventListener('click', async () => {
    const name    = document.getElementById('cf-name').value.trim();
    const email   = document.getElementById('cf-email').value.trim();
    const message = document.getElementById('cf-message').value.trim();
    const btn     = document.getElementById('cf-send');
    const status  = document.getElementById('cf-status');

    if (!name || !email || !message) { status.className='cf-status error'; status.textContent='⚠  Fill in all fields.'; return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { status.className='cf-status error'; status.textContent='⚠  Invalid email address.'; return; }

    if (typeof emailjs === 'undefined') {
      status.className = 'cf-status error';
      status.textContent = '✕ Mailer failed to load. Email me: pandasobhan22@gmail.com';
      return;
    }

    btn.disabled = true;
    status.className = 'cf-status sending'; status.textContent = 'Sending…';

    try {
      const res = await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, {
        name: name,          // matches {{name}}
        email: email,        // add {{email}} to template if you want it shown
        message: message,    // matches {{message}}
        time: new Date().toLocaleString()  // matches {{time}}
      });
      console.log('EmailJS success:', res.status, res.text);
      status.className = 'cf-status success'; status.textContent = '✓ Message sent! I\'ll get back to you soon.';
      ['cf-name','cf-email','cf-message'].forEach(id => document.getElementById(id).value = '');
      setTimeout(closeContact, 2500);
    } catch(err) {
      // Surface the real reason in the console so it's actually debuggable.
      console.error('EmailJS send failed:', err);
      const code   = err && err.status ? err.status : '?';
      const reason = err && err.text ? err.text : (err && err.message ? err.message : 'Unknown error');
      status.className = 'cf-status error';
      status.textContent = `✕ Failed (${code}: ${reason}). Email me: pandasobhan22@gmail.com`;
    } finally { btn.disabled = false; }
  });

  /* ═══════════════════════════════════════════
    CHAT LOGIC
  ═══════════════════════════════════════════ */
  const API_BASE = "https://portfolio-g3f3.onrender.com";
  let conversationHistory = [];
  let serverOnline = false;

  async function checkServer() {
    try {
      const res = await fetch(`${API_BASE}/health`, { signal: AbortSignal.timeout(3000) });
      if (res.ok) { serverOnline = true; document.getElementById('s-dot').className = 's-dot ok'; document.getElementById('s-label').textContent = 'AI server connected — ready to chat'; }
      else throw new Error();
    } catch { serverOnline = false; document.getElementById('s-dot').className = 's-dot err'; document.getElementById('s-label').textContent = 'Render offline'; }
  }
  checkServer(); setInterval(checkServer, 15000);

  function handleKey(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }
  function sendQuick(btn) { document.getElementById('chat-input').value = btn.textContent; sendMessage(); }

  const IMPORTANT_KEYWORDS = ['Python','C++','JavaScript','HTML','CSS','MongoDB','LangChain','LangGraph','MCP','Transformers','FAISS','FastAPI','HuggingFace','Docker','Git','Jupyter Notebook','MLflow','Vercel','scikit-learn','RAG','LLM','AI','ML','NLP','Web Speech API','Google Gemini','BM25'];
  function escapeRegExp(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
  function processContent(text) {
    text = text.replace(/(https?:\/\/[^\s)]+)/g, m => { let u=m.replace(/[.,;:!?'"]+$/,''); return `<a href="${u}" target="_blank" style="color:var(--red);text-decoration:underline">${u}</a>`; });
    IMPORTANT_KEYWORDS.forEach(k => { text = text.replace(new RegExp(`\\b${escapeRegExp(k)}\\b`,'g'), `<span style="color:var(--red);font-weight:500">${k}</span>`); });
    return text;
  }
  function appendMsg(role, content, isError=false) {
    const box=document.getElementById('chat-messages'), wrap=document.createElement('div');
    wrap.className=`msg ${role}${isError?' error':''}`;
    const av=document.createElement('div'); av.className='msg-avatar'; av.textContent=role==='ai'?'SP':'You';
    const bub=document.createElement('div'); bub.className='msg-bubble';
    if(role==='ai'&&!isError) bub.innerHTML=processContent(content); else bub.textContent=content;
    wrap.appendChild(av); wrap.appendChild(bub); box.appendChild(wrap); box.scrollTop=box.scrollHeight;
  }
  function showTyping() {
    const box=document.getElementById('chat-messages'), wrap=document.createElement('div');
    wrap.className='msg ai'; wrap.id='typing-msg';
    const av=document.createElement('div'); av.className='msg-avatar'; av.textContent='SP';
    const bub=document.createElement('div'); bub.className='msg-bubble';
    bub.innerHTML='<div class="typing"><span></span><span></span><span></span></div>';
    wrap.appendChild(av); wrap.appendChild(bub); box.appendChild(wrap); box.scrollTop=box.scrollHeight;
  }
  function removeTyping() { const t=document.getElementById('typing-msg'); if(t) t.remove(); }

  async function sendMessage() {
    const input=document.getElementById('chat-input'), text=input.value.trim();
    if(!text) return;
    if(!serverOnline) { appendMsg('ai','Hii ! render backend is taking some time to boot up. Until then you can scroll around and find more about me.',true); return; }
    input.value=''; document.getElementById('send-btn').disabled=true;
    appendMsg('user',text); showTyping();
    try {
      const payload=buildChatPayload(text);
      const res=await fetch(`${API_BASE}/chat`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
      const data=await res.json(); removeTyping();
      if(!res.ok) throw new Error(data.detail||'Server error');
      conversationHistory=data.history; appendMsg('ai',data.reply);
    } catch(err) { removeTyping(); appendMsg('ai',`Error: ${err.message}`,true); }
    document.getElementById('send-btn').disabled=false; input.focus();
  }

  /* ═══════════════════════════════════════════
    LLM SIDEBAR
  ═══════════════════════════════════════════ */
  const llmParams = { temperature:0.7, max_tokens:300, reasoning_effort:'medium', response_style:'Casual', top_p:1.0, freq_penalty:0.0, pres_penalty:0.0, seed_enabled:false };
  const STYLE_PROMPTS = { Formal:'Respond in a formal and professional tone.', Casual:'Respond in a friendly and casual tone.', Technical:'Respond in a highly technical and precise manner.', Simple:'Explain in very simple and easy-to-understand language.' };
  function buildChatPayload(message) {
    return { message, history:conversationHistory, llm_params:{ temperature:llmParams.temperature, max_completion_tokens:llmParams.max_tokens, reasoning_effort:llmParams.reasoning_effort, top_p:llmParams.top_p, frequency_penalty:llmParams.freq_penalty, presence_penalty:llmParams.pres_penalty, seed:llmParams.seed_enabled?42:null, style_prompt:STYLE_PROMPTS[llmParams.response_style]||'' } };
  }
  let sidebarOpen=false;
  function toggleSidebar() { sidebarOpen=!sidebarOpen; document.getElementById('llm-sidebar').classList.toggle('open',sidebarOpen); document.getElementById('llm-sidebar-toggle').classList.toggle('open',sidebarOpen); document.getElementById('sb-toggle-icon').textContent=sidebarOpen?'✕':'⚙'; }
  function updateSlider(key,val,min,max) {
    const num=parseFloat(val); llmParams[key]=num;
    const display=(max<=1)?num.toFixed(2):(key==='freq_penalty'||key==='pres_penalty')?num.toFixed(1):Math.round(num).toString();
    const valEl=document.getElementById(`val-${key}`); if(valEl) valEl.textContent=display;
    const slider=document.getElementById(`sl-${key}`); if(slider){ const pct=((num-min)/(max-min))*100; slider.style.setProperty('--pct',pct+'%'); }
    updateActiveCount();
  }
  function setToggle(group,val,btn) { if(group==='reasoning') llmParams.reasoning_effort=val; document.querySelectorAll(`#tg-${group} .sb-toggle-btn`).forEach(b=>b.classList.toggle('active',b===btn)); updateActiveCount(); }
  function updateStyle(val) { llmParams.response_style=val; updateActiveCount(); }
  function updateSeed(checked) { llmParams.seed_enabled=checked; updateActiveCount(); }
  let advOpen=false;
  function toggleAdvanced() { advOpen=!advOpen; document.getElementById('adv-section').classList.toggle('open',advOpen); document.getElementById('adv-toggle').classList.toggle('open',advOpen); }
  function updateActiveCount() {
    const defaults={temperature:0.7,max_tokens:300,reasoning_effort:'medium',response_style:'Casual',top_p:1.0,freq_penalty:0.0,pres_penalty:0.0,seed_enabled:false};
    let count=0; for(const key of Object.keys(defaults)){ if(llmParams[key]!==defaults[key]) count++; }
    document.getElementById('sb-active-count').textContent=count>0?`${count} param${count!==1?'s':''} modified`:'7 params active';
  }
  function resetParams() {
    llmParams.temperature=0.7; llmParams.max_tokens=300; llmParams.reasoning_effort='medium'; llmParams.response_style='Casual'; llmParams.top_p=1.0; llmParams.freq_penalty=0.0; llmParams.pres_penalty=0.0; llmParams.seed_enabled=false;
    [{id:'sl-temperature',key:'temperature',min:0,max:1},{id:'sl-max_tokens',key:'max_tokens',min:50,max:1000},{id:'sl-top_p',key:'top_p',min:0,max:1},{id:'sl-freq_penalty',key:'freq_penalty',min:0,max:2},{id:'sl-pres_penalty',key:'pres_penalty',min:0,max:2}].forEach(({id,key,min,max})=>{ const el=document.getElementById(id); if(el){el.value=llmParams[key];updateSlider(key,llmParams[key],min,max);}});
    document.querySelectorAll('#tg-reasoning .sb-toggle-btn').forEach(b=>b.classList.toggle('active',b.dataset.val==='medium'));
    document.getElementById('sel-style').value='Casual';
    document.getElementById('sw-seed').checked=false;
    updateActiveCount();
  }
  /* ══════════════════════════════════════
    PROJECT FLASHCARD MODAL
  ══════════════════════════════════════ */
  const projectsData = [
    {
      title: "AI Agent Framework with Dynamic MCP Tool Orchestration",
      desc: "Built a AI Agent framwork/pipelien that can dynamically accomodate any tools with the help of MCP registery - What this means is that you can add or remove any tool just by chaing one or two line of code and rest of the pipeline will automatically accomodeate it. It also hase Long term shot term memory where the user is identifed by using JWT authentication. Each query is pasesed through  Planner, Worker, Solver, and Refiner stages using the REWOO architecture",
      tags: ["Agentic AI", "MCP", "LangChain", "LSTM" , "REWOO"],
      stack: ["Python", "LangChain", "LangGraph", "FAISS and SQLite", "MCP","JWT","HuggingFaceEmbeddings"],
      github: "https://github.com/sobhan2204/Agentic_AI"
    },
    {
      title: "Comparative Study of Multi-RAG Architectures",
      desc: "RAG chatbot running semantic search, knowledge graph, and BM25 simultaneously — picks the highest-accuracy answer. Ingests text, PDF, and structured data dynamically, then scores each retrieval strategy in real time so the response always draws from whichever method returns the most relevant context. It also validated the asnwer using a LLM-as-a-judge validator measuring cross-model consensus , groundedness and retrieval quality , after passing the test the answer is present to the user.",
      tags: ["BM25","Knoledge graph" ,"sementic search", "LLM validation", "FAISS"],
      stack: ["Python", "LangChain", "FAISS", "HuggingFace"],
      github: "https://github.com/sobhan2204/multi-rag-chatbot"
    },
    {
      title: "Avalanche Susceptibility Mapping for Vegetation Restoration",
      desc: "Identifies barren or underutilized land suitable for vegetation restoration in both plains and hilly regions using satellite imagery and Google Earth Engine. The system analyzes geographical and environmental factors such as slope and steepness to determine areas with high restoration potential, packaged as an automated, deployable pipeline.",
      tags: ["AutoML", "MLflow", "FastAPI"],
      stack: ["Python", "U-KAN", "MultiSSL Nural network", "Earth Engine"],
      github: "https://github.com/sobhan2204/Avalanche-Susceptibility-Mapping-for-Vegetation-Restoration"
    }
  ];

  function openProjectModal(idx) {
    const p = projectsData[idx];
    if (!p) return;
    document.getElementById('modalProjTitle').textContent = p.title;
    document.getElementById('modalProjDesc').textContent = p.desc;
    document.getElementById('modalProjHighlights').innerHTML = p.tags.map(t => `<span class="project-modal-tag">${t}</span>`).join('');
    document.getElementById('modalProjStack').innerHTML = p.stack.map(s => `<div class="stack-box-3d">${s}</div>`).join('');
    document.getElementById('modalGithubBtn').setAttribute('href', p.github);
    document.getElementById('projectModalOverlay').classList.add('open');
    document.body.style.overflow = 'hidden';
  }

  function closeProjectModal(e, force) {
    if (force || e.target.id === 'projectModalOverlay') {
      document.getElementById('projectModalOverlay').classList.remove('open');
      document.body.style.overflow = '';
    }
  }

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeProjectModal(e, true);
  });

  (function initSliders(){
    [{id:'sl-temperature',key:'temperature',min:0,max:1},{id:'sl-max_tokens',key:'max_tokens',min:50,max:1000},{id:'sl-top_p',key:'top_p',min:0,max:1},{id:'sl-freq_penalty',key:'freq_penalty',min:0,max:2},{id:'sl-pres_penalty',key:'pres_penalty',min:0,max:2}].forEach(({id,key,min,max})=>{ const el=document.getElementById(id); if(el){const pct=((llmParams[key]-min)/(max-min))*100;el.style.setProperty('--pct',pct+'%');}});
  })();
  </script>
  </body>
  </html>