/* =================================================================
   AMIT ADAV — AI CHAT PORTFOLIO THEME
   ChatGPT-style · Poppins · Indigo-Orange · Dark/Light
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');

/* ── TOKENS ── */
:root {
  --bg:       #080c12;
  --bg2:      #0d1117;
  --bg3:      #111720;
  --surface:  #141e2c;
  --surface2: #1a2640;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.11);
  --text:     #e8f0ff;
  --text2:    #7a90b8;
  --text3:    #3d5070;
  --c1:       #818cf8;
  --c2:       #6366f1;
  --c3:       #f97316;
  --c4:       #34d399;
  --grad:     linear-gradient(135deg,#818cf8 0%,#6366f1 45%,#f97316 100%);
  --grad2:    linear-gradient(135deg,rgba(129,140,248,.12) 0%,rgba(99,102,241,.08) 50%,rgba(249,115,22,.06) 100%);
  --glow:     rgba(99,102,241,.22);
  --glow2:    rgba(249,115,22,.18);
  --sw:       262px;
  --r:        14px;
  --rs:       9px;
  --ease:     .3s cubic-bezier(.4,0,.2,1);
}

/* Light theme overrides */
body.light-mode {
  --bg:#f5f5ff; --bg2:#ececfd; --bg3:#e4e4fb;
  --surface:#fff; --surface2:#f0f0fe;
  --border:rgba(0,0,0,.07); --border2:rgba(0,0,0,.12);
  --text:#0f0f2a; --text2:#3d3d6b; --text3:#8080b0;
  --c1:#4f46e5; --c2:#4338ca; --c3:#ea580c; --c4:#059669;
  --glow:rgba(79,70,229,.14); --glow2:rgba(234,88,12,.12);
  --grad:linear-gradient(135deg,#6366f1 0%,#4f46e5 50%,#f97316 100%);
  --grad2:linear-gradient(135deg,rgba(99,102,241,.1) 0%,rgba(79,70,229,.07) 50%,rgba(249,115,22,.05) 100%);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background var(--ease),color var(--ease);
}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ══════════════════════════════
   APP SHELL — ChatGPT layout
══════════════════════════════ */
#app{
  display:flex;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* ── SIDEBAR ── */
#sidebar{
  width:var(--sw);
  flex-shrink:0;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:10;
  transition:transform var(--ease),background var(--ease);
}
#sidebar::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:220px;
  background:var(--grad2);
  pointer-events:none;
}

/* Logo */
.sb-logo{
  padding:18px 16px 14px;
  display:flex;align-items:center;gap:11px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.sb-mark{
  width:38px;height:38px;
  background:var(--grad);
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#fff;
  flex-shrink:0;
  box-shadow:0 6px 20px var(--glow);
  transition:transform var(--ease);
}
.sb-logo:hover .sb-mark{transform:scale(1.08) rotate(-4deg);}
.sb-name{font-size:14px;font-weight:700;line-height:1.2;}
.sb-role{font-size:10px;color:var(--text3);font-weight:400;margin-top:1px;}

/* Connect CTA */
.sb-connect{
  margin:12px 12px 6px;
  padding:9px 14px;
  border-radius:var(--rs);
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text);
  font-family:'Poppins',sans-serif;
  font-size:12px;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:all var(--ease);
  text-decoration:none;
}
.sb-connect:hover{background:var(--surface);border-color:var(--c1);color:var(--c1);}

/* Section label */
.sb-section-label{
  padding:10px 16px 3px;
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);font-weight:700;
}

/* Nav */
.sb-nav{padding:3px 8px;flex:1;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  border-radius:var(--rs);
  cursor:pointer;
  font-size:12.5px;font-weight:500;
  color:var(--text2);
  transition:all .2s;
  margin-bottom:2px;
  position:relative;
  border:1px solid transparent;
  user-select:none;
}
.nav-item:hover{background:var(--surface);color:var(--text);}
.nav-item.active{
  background:var(--surface);
  color:var(--text);
  border-color:var(--border2);
  animation:navPop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes navPop{0%{transform:scaleX(.96);}100%{transform:scaleX(1);}}
.nav-item.active::before{
  content:'';
  position:absolute;left:0;top:22%;bottom:22%;
  width:3px;background:var(--grad);
  border-radius:0 3px 3px 0;
}
.nav-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0;}
.nav-badge{
  margin-left:auto;
  background:var(--grad);color:#fff;
  font-size:9px;padding:2px 7px;border-radius:20px;font-weight:700;
}

/* Footer */
.sb-footer{
  padding:12px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.sb-avatar{
  width:34px;height:34px;
  background:var(--grad);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;flex-shrink:0;
}
.sb-footer-info{flex:1;min-width:0;}
.sb-footer-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-footer-sub{font-size:10px;color:var(--text3);}
.theme-btn{
  width:30px;height:30px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all var(--ease);flex-shrink:0;
}
.theme-btn:hover{border-color:var(--c1);transform:scale(1.1);}

/* ── MAIN ── */
#main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}

/* Topbar */
#topbar{
  height:54px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  flex-shrink:0;
  transition:background var(--ease);
}
.tb-left{display:flex;align-items:center;gap:10px;}
#tb-title{font-size:14px;font-weight:700;}
.tb-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);}
.status-dot{
  width:7px;height:7px;background:var(--c4);border-radius:50%;
  box-shadow:0 0 8px rgba(52,211,153,.7);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}

/* Hamburger */
.hamburger{
  display:none;
  width:32px;height:32px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  align-items:center;justify-content:center;
  font-size:16px;cursor:pointer;flex-shrink:0;
  transition:all var(--ease);
}
.hamburger:hover{border-color:var(--c1);}

/* ── CONTENT AREA ── */
#content-area{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

/* ── PAGES (ChatGPT tab panels) ── */
.page{
  display:none;
  flex:1;
  overflow-y:auto;
  animation:pageIn .38s cubic-bezier(.4,0,.2,1) forwards;
}
.page.active{display:flex;flex-direction:column;}
@keyframes pageIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

.page-scroll{
  flex:1;
  overflow-y:auto;
  padding:28px 0 40px;
}
.page-inner{
  max-width:800px;
  margin:0 auto;
  padding:0 28px;
}

/* Chat page is special — flex column with input at bottom */
#page-chat{
  display:none;flex-direction:column;flex:1;overflow:hidden;
}
#page-chat.active{display:flex;}

/* ══════════════════════════════
   CHAT INTERFACE
══════════════════════════════ */
.chat-scroll{
  flex:1;overflow-y:auto;
  padding:20px 0;
}
.chat-inner{max-width:780px;margin:0 auto;padding:0 24px;}

/* Welcome */
.welcome-wrap{
  text-align:center;
  padding:44px 20px 32px;
  position:relative;
}
.welcome-wrap::before{
  content:'';
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:500px;height:280px;
  background:radial-gradient(ellipse at center,rgba(99,102,241,.09) 0%,transparent 70%);
  pointer-events:none;
  animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.6;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.15);}}

.welcome-av{
  width:72px;height:72px;
  background:var(--grad);border-radius:20px;
  margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:#fff;
  box-shadow:0 16px 40px var(--glow);
  position:relative;
}
.welcome-av::after{
  content:'✦';
  position:absolute;top:-8px;right:-8px;
  width:22px;height:22px;background:var(--c3);border-radius:50%;
  font-size:9px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px var(--glow2);
  animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.welcome-wrap h1{
  font-size:clamp(22px,3.5vw,30px);
  font-weight:800;margin-bottom:8px;
}
.welcome-wrap h1 span{
  background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.welcome-wrap p{
  font-size:13px;color:var(--text2);
  max-width:420px;margin:0 auto 24px;line-height:1.7;
}

/* Suggestion grid */
.sug-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:9px;max-width:520px;margin:0 auto;
}
.sug-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;
  cursor:pointer;text-align:left;transition:all var(--ease);
  position:relative;overflow:hidden;
}
.sug-card::before{
  content:'';position:absolute;inset:0;
  background:var(--grad2);opacity:0;
  transition:opacity var(--ease);pointer-events:none;
}
.sug-card:hover{border-color:var(--c1);transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);}
.sug-card:hover::before{opacity:1;}
.sug-card:active{transform:translateY(0);}
.sug-icon{font-size:18px;margin-bottom:5px;}
.sug-title{font-size:12px;font-weight:600;margin-bottom:2px;}
.sug-sub{font-size:10.5px;color:var(--text3);}

/* Messages */
.message{
  display:flex;gap:12px;margin-bottom:22px;
  animation:msgIn .35s ease forwards;
}
@keyframes msgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.message.user{flex-direction:row-reverse;}

.msg-av{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px;
}
.msg-av.ai{background:var(--grad);color:#fff;}
.msg-av.user{background:var(--surface2);border:1px solid var(--border2);font-size:14px;}

.msg-body{flex:1;max-width:84%;}
.message.user .msg-body{display:flex;flex-direction:column;align-items:flex-end;}

.bubble{
  padding:12px 16px;
  border-radius:var(--r);
  font-size:13px;line-height:1.75;
}
.message.ai .bubble{
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px var(--r) var(--r) var(--r);
  animation:bubbleL .25s cubic-bezier(.34,1.4,.64,1);
}
.message.user .bubble{
  background:var(--grad);color:#fff;
  border-radius:var(--r) 4px var(--r) var(--r);
  animation:bubbleR .25s cubic-bezier(.34,1.4,.64,1);
}
@keyframes bubbleL{from{transform:scale(.93) translateX(-6px);opacity:0;}to{transform:scale(1) translateX(0);opacity:1;}}
@keyframes bubbleR{from{transform:scale(.93) translateX(6px);opacity:0;}to{transform:scale(1) translateX(0);opacity:1;}}

.msg-time{font-size:10px;color:var(--text3);margin-top:4px;padding:0 2px;}

/* Inline rich content in chat bubbles */
.bubble-card{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--rs);padding:12px;margin-top:10px;
}
.bubble-card-label{
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c1);margin-bottom:8px;
}
.bubble-tags{display:flex;flex-wrap:wrap;gap:5px;}
.btag{
  padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:600;
  border:1px solid rgba(99,102,241,.35);color:var(--c1);
  background:rgba(99,102,241,.08);
}
.btag.o{border-color:rgba(249,115,22,.35);color:var(--c3);background:rgba(249,115,22,.08);}

/* Typing */
.typing-wrap{display:flex;gap:12px;margin-bottom:20px;}
.typing-bubble{
  display:flex;align-items:center;gap:5px;
  padding:12px 16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px var(--r) var(--r) var(--r);
}
.typing-dot{
  width:7px;height:7px;border-radius:50%;
  animation:tdot 1.2s infinite;
}
.typing-dot:nth-child(1){background:var(--c1);}
.typing-dot:nth-child(2){background:var(--c2);animation-delay:.2s;}
.typing-dot:nth-child(3){background:var(--c3);animation-delay:.4s;}
@keyframes tdot{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-6px);opacity:1;}}

/* Chat input */
.chat-input-wrap{
  padding:14px 24px 18px;
  flex-shrink:0;
  background:var(--bg);
  transition:background var(--ease);
}
.chat-input-inner{max-width:780px;margin:0 auto;}

.quick-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px;}
.qchip{
  padding:4px 12px;border-radius:20px;
  font-size:11px;font-weight:500;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap;
}
.qchip:hover{border-color:var(--c1);color:var(--c1);}

.input-box{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:14px;padding:11px 14px;
  display:flex;align-items:flex-end;gap:9px;
  transition:all var(--ease);
}
.input-box:focus-within{border-color:var(--c1);box-shadow:0 0 0 3px var(--glow);}
.input-box textarea{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-family:'Poppins',sans-serif;
  font-size:13px;line-height:1.5;resize:none;
  max-height:140px;min-height:22px;
}
.input-box textarea::placeholder{color:var(--text3);}
.send-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--grad);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--ease);flex-shrink:0;color:#fff;font-size:16px;
}
.send-btn:hover{transform:scale(1.08);box-shadow:0 6px 18px var(--glow);}
.send-btn:active{transform:scale(.93);}
.send-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

.input-note{text-align:center;font-size:10px;color:var(--text3);margin-top:8px;}

/* ══════════════════════════════
   PAGE COMPONENTS
══════════════════════════════ */

/* Hero banner inside pages */
.page-hero{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:32px;
  display:flex;gap:24px;align-items:center;
  margin-bottom:20px;position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:250px;height:250px;
  background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 70%);
  pointer-events:none;
}
.page-hero-av{
  width:80px;height:80px;flex-shrink:0;
  background:var(--grad);border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;color:#fff;
  box-shadow:0 14px 36px var(--glow);position:relative;
}
.page-hero-av .ai-pip{
  position:absolute;bottom:-6px;right:-6px;
  width:22px;height:22px;background:var(--c3);border-radius:50%;
  font-size:9px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px var(--glow2);animation:spin 6s linear infinite;
}
.page-hero-title{font-size:22px;font-weight:800;margin-bottom:4px;}
.page-hero-title span{
  background:var(--grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.page-hero-sub{font-size:12.5px;color:var(--text2);line-height:1.65;margin-bottom:12px;max-width:480px;}

/* Section header */
.sec-hdr{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c1);margin:22px 0 12px;
  display:flex;align-items:center;gap:10px;
}
.sec-hdr::after{content:'';flex:1;height:1px;background:var(--border);}

/* Cards */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:20px;
  transition:all var(--ease);position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;
  background:var(--grad2);opacity:0;
  transition:opacity var(--ease);pointer-events:none;
}
.card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.25);}
.card:hover::before{opacity:1;}
.card-title{font-size:13.5px;font-weight:700;margin-bottom:6px;}
.card-body{font-size:12.5px;color:var(--text2);line-height:1.7;}
.card-num{
  font-size:30px;font-weight:800;line-height:1;margin-bottom:4px;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.card-lbl{font-size:10px;color:var(--text3);font-weight:600;}

/* Grid */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px;}

/* Tags */
.tag{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:10.5px;font-weight:600;border:1px solid var(--border2);
  color:var(--text2);margin:3px;transition:all .2s;
}
.tag.c{border-color:rgba(99,102,241,.4);color:var(--c1);background:rgba(99,102,241,.08);}
.tag.o{border-color:rgba(249,115,22,.4);color:var(--c3);background:rgba(249,115,22,.08);}
.tag.g{border-color:rgba(5,150,105,.4);color:#059669;background:rgba(5,150,105,.08);}
body:not(.light-mode) .tag.g{color:var(--c4);border-color:rgba(52,211,153,.35);background:rgba(52,211,153,.07);}

/* Skill bars */
.skill-row{margin-bottom:13px;}
.skill-meta{display:flex;justify-content:space-between;font-size:11.5px;font-weight:500;color:var(--text2);margin-bottom:5px;}
.skill-track{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden;}
.skill-fill{height:100%;border-radius:3px;background:var(--grad);width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1);}

/* AI tools grid */
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.ai-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rs);padding:13px 11px;text-align:center;
  transition:all var(--ease);
}
.ai-card:hover{border-color:var(--c1);transform:translateY(-2px);box-shadow:0 6px 20px var(--glow);}
.ai-card .ei{font-size:22px;margin-bottom:5px;display:block;}
.ai-card .nm{font-size:10.5px;font-weight:700;margin-bottom:2px;}
.ai-card .us{font-size:9.5px;color:var(--text3);line-height:1.4;}

/* Portfolio grid */
.port-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.port-card{
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  cursor:pointer;transition:all var(--ease);
}
.port-card:hover{border-color:var(--c1);transform:translateY(-3px);box-shadow:0 12px 36px var(--glow);}
.port-thumb{
  height:120px;display:flex;align-items:center;justify-content:center;
  font-size:34px;position:relative;overflow:hidden;
}
.port-thumb::after{content:'';position:absolute;inset:0;background:var(--grad2);}
.port-info{padding:14px;}
.port-cat{font-size:9.5px;color:var(--c1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;}
.port-title{font-size:13px;font-weight:700;margin-bottom:7px;}
.port-tags{display:flex;flex-wrap:wrap;gap:4px;}
.ptag{padding:2px 8px;border-radius:20px;font-size:9.5px;background:var(--surface2);border:1px solid var(--border);color:var(--text3);}

/* Case study cards */
.cs-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:22px;margin-bottom:14px;
  cursor:pointer;transition:all var(--ease);
}
.cs-card:hover{border-color:var(--c1);box-shadow:0 10px 36px var(--glow);transform:translateX(5px);}
.cs-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:9px;}
.cs-title{font-size:15px;font-weight:700;}
.cs-badge{
  padding:3px 10px;border-radius:20px;font-size:9.5px;font-weight:700;
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.3);
  color:var(--c1);white-space:nowrap;
}
.cs-desc{font-size:12.5px;color:var(--text2);line-height:1.65;margin-bottom:12px;}
.cs-footer{display:flex;gap:16px;flex-wrap:wrap;}
.cs-stat{font-size:11px;color:var(--text3);}
.cs-stat strong{color:var(--c4);}

/* Timeline */
.timeline{padding:4px 0 4px 28px;position:relative;}
.timeline::before{
  content:'';position:absolute;left:5px;top:0;bottom:0;
  width:2px;background:linear-gradient(to bottom,var(--c1),var(--c3),transparent);
  border-radius:2px;
}
.tl-item{position:relative;margin-bottom:24px;}
.tl-item::before{
  content:'';position:absolute;left:-24px;top:4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 10px var(--glow);
}
.tl-period{font-size:10px;font-weight:700;color:var(--c1);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.tl-role{font-size:14px;font-weight:700;margin-bottom:2px;}
.tl-co{font-size:12px;color:var(--c3);font-weight:600;margin-bottom:6px;}
.tl-desc{font-size:12px;color:var(--text2);line-height:1.65;margin-bottom:8px;}

/* Blog cards */
.blog-card{
  display:flex;gap:16px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px;margin-bottom:12px;
  cursor:pointer;transition:all var(--ease);
}
.blog-card:hover{border-color:var(--c1);transform:translateX(5px);}
.blog-icon{
  width:48px;height:48px;border-radius:11px;
  background:var(--surface2);display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
}
.blog-body{flex:1;}
.blog-tag{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c3);margin-bottom:5px;}
.blog-title{font-size:13.5px;font-weight:700;margin-bottom:5px;line-height:1.35;}
.blog-excerpt{font-size:11.5px;color:var(--text2);line-height:1.6;margin-bottom:7px;}
.blog-meta{font-size:10px;color:var(--text3);}

/* Resume */
.rb{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px;margin-bottom:10px;
}
.rb-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px;}
.rb-title{font-size:13px;font-weight:700;}
.rb-period{font-size:10px;color:var(--text3);}
.rb-co{font-size:11.5px;color:var(--c1);font-weight:600;margin-bottom:7px;}
.rb-body{font-size:12px;color:var(--text2);line-height:1.65;}
.rb-list{list-style:none;}
.rb-list li{font-size:12px;color:var(--text2);padding:2px 0 2px 14px;position:relative;}
.rb-list li::before{content:'▸';position:absolute;left:0;color:var(--c1);}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.contact-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:18px;text-align:center;
  cursor:pointer;transition:all var(--ease);
}
.contact-card:hover{border-color:var(--c1);transform:translateY(-3px);box-shadow:0 10px 28px var(--glow);}
.contact-icon{font-size:26px;margin-bottom:7px;}
.contact-label{font-size:9.5px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.contact-val{font-size:12.5px;font-weight:600;color:var(--c1);}

/* Form */
.contact-form{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:22px;
}
.form-row{margin-bottom:13px;}
.form-g2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px;}
.form-label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:6px;}
.form-input,.form-textarea{
  width:100%;padding:10px 13px;
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--rs);color:var(--text);
  font-family:'Poppins',sans-serif;font-size:12.5px;
  outline:none;transition:all var(--ease);
}
.form-input:focus,.form-textarea:focus{border-color:var(--c1);box-shadow:0 0 0 3px var(--glow);}
.form-textarea{height:100px;resize:none;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text3);}
.form-btn{
  width:100%;padding:11px;border-radius:var(--rs);
  background:var(--grad);border:none;color:#fff;
  font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:all var(--ease);
}
.form-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);}

/* Stat badges row */
.stat-row{display:flex;gap:14px;margin-bottom:14px;}
.stat-badge{
  flex:1;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rs);padding:14px;text-align:center;
}
.stat-num{
  font-size:26px;font-weight:800;line-height:1;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-lbl{font-size:9.5px;color:var(--text3);font-weight:600;margin-top:3px;}

/* Scroll to top */
#scroll-top{
  position:fixed;bottom:24px;right:24px;
  width:38px;height:38px;border-radius:50%;
  background:var(--grad);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
  box-shadow:0 6px 20px var(--glow);
  opacity:0;transform:translateY(8px);
  transition:all var(--ease);z-index:200;
}
#scroll-top.show{opacity:1;transform:translateY(0);}
#scroll-top:hover{transform:translateY(-3px);}

/* Mobile overlay */
#sb-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:9;
  backdrop-filter:blur(3px);
}

/* ── RESPONSIVE ── */
@media(max-width:740px){
  #sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);
    transition:transform var(--ease);
    z-index:10;
  }
  #sidebar.open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.5);}
  .hamburger{display:flex;}
  #sb-overlay.show{display:block;}
  .g2,.g3,.port-grid,.contact-grid{grid-template-columns:1fr;}
  .ai-grid{grid-template-columns:1fr 1fr;}
  .sug-grid{grid-template-columns:1fr;}
  .page-hero{flex-direction:column;text-align:center;}
  .page-inner{padding:0 16px;}
  .chat-input-wrap{padding:10px 14px 14px;}
  .form-g2{grid-template-columns:1fr;}
  #scroll-top{bottom:80px;right:14px;}
}