/* Highlighted skill keywords */
.skill-key {
  display: inline-block;
  background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%);
  color: #fff;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 15px;
  margin: 0 2px;
  box-shadow: 0 1px 4px rgba(37,99,235,0.10);
  transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s;
  cursor: pointer;
}
.skill-key:hover {
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 4px 16px -4px #38bdf8;
  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
}
/* Base layout & typography */
html, body { margin:0; padding:0; font-family:"Poppins", system-ui, sans-serif; background:#0b0f17; color:#e2e8f0; }
body { -webkit-font-smoothing:antialiased; }
:root {
  --brand:#0f172a;
  --brand-accent:#2563eb;
  --brand-accent-hover:#1d4ed8;
  --brand-gradient:linear-gradient(135deg,#111827 0%,#1e293b 55%,#0f172a 100%);
  --radius-xs:4px; --radius-sm:6px; --radius:10px; --radius-lg:18px; --radius-full:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.04);
  --shadow:0 4px 14px rgba(0,0,0,.08);
  --shadow-lg:0 10px 28px -4px rgba(0,0,0,.2);
  --grad-hero:linear-gradient(145deg,#0f172a 0%,#1e293b 40%,#0d213e 100%);
  --code-bg:#1e293b;
}

img { max-width:100%; display:block; }
button { font-family:inherit; }

/* Navbar */
.navbar { position:fixed; top:0; left:0; right:0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:rgba(11,15,23,0.9); backdrop-filter:blur(14px); border-bottom:1px solid #1e2533; z-index:200; }
.nav-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; display:inline-block; box-shadow:0 0 0 2px rgba(255,255,255,0.08); }
.navbar-left { display:flex; align-items:center; gap:16px; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:18px; color:#fff; padding:8px 12px; border-radius:var(--radius-sm); transition:.25s; }
.nav-logo:hover { background:#111827; color:#fff; }
.nav-links { display:flex; align-items:center; gap:28px; font-size:15px; }
.nav-toggle { display:none; background:none; border:none; padding:10px; margin:-4px 0 -4px auto; cursor:pointer; border-radius:10px; transition:background .25s; }
.nav-toggle:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }
.nav-toggle-bar { width:22px; height:2px; background:#cbd5e1; display:block; margin:5px 0; border-radius:2px; transition:.35s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); z-index:110; opacity:0; pointer-events:none; transition:opacity .3s; }
.mobile-nav-backdrop.active { opacity:1; pointer-events:auto; }
.nav-links a { color:#cbd5e1; text-decoration:none; position:relative; padding:6px 2px; font-weight:500; }
.nav-links a:after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:#2563eb; transition:width .25s; }
.nav-links a:hover:after, .nav-links a:focus-visible:after { width:100%; }
.nav-links a.active { color:#fff; }
.nav-links a.active:after { width:100%; }
@media (max-width:780px){ .nav-links { gap:18px; font-size:14px;} }
@media (max-width:840px){
  .nav-toggle { display:block; }
  .nav-links { position:fixed; top:76px; left:50%; transform:translate(-50%, -10px) scale(.96); right:auto; bottom:auto; width:94%; max-width:520px; background:linear-gradient(145deg,#0f172a 0%,#16283d 100%); flex-direction:column; align-items:stretch; padding:24px 20px 28px; gap:10px; border:1px solid #1e2f41; border-radius:18px; box-shadow:0 24px 60px -18px rgba(0,0,0,.65),0 4px 18px -4px rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .35s, transform .4s cubic-bezier(.4,0,.2,1); }
  .nav-links a { width:100%; padding:14px 14px; font-size:15px; border-radius:12px; background:rgba(255,255,255,0.02); border:1px solid #1d3143; display:flex; align-items:center; gap:10px; }
  .nav-links a:hover { background:#1e2f44; color:#fff; }
  .nav-links a.active { background:#2563eb; border-color:#1d4ed8; color:#fff; }
  .nav-links a:after { display:none; }
  .nav-links.open { opacity:1; pointer-events:auto; transform:translate(-50%,0) scale(1); }
  body.nav-open { overflow:hidden; }
  .mobile-nav-backdrop { display:none; }
}

/* Hero */
.hero { padding:120px 24px 80px; background:var(--grad-hero); color:#fff; position:relative; overflow:hidden; }
.hero-inner { display:grid; }
@media (max-width:640px){ .hero { padding:100px 18px 60px; } }
.hero h1 { font-size:clamp(2.6rem,5.2vw,3.6rem); letter-spacing:-1px; margin:0 0 14px; }
.hero p.lead { max-width:480px; }
.hero-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:56px; align-items:center; }
.hero h1 { font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.1; margin:0 0 24px; font-weight:700; letter-spacing:-1px; }
.hero p.lead { font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.5; max-width:640px; margin:0 0 32px; color:#dbeafe; }
.hero-portrait { position:relative; }
.hero-portrait img { border-radius:24px; box-shadow:0 18px 45px -10px rgba(0,0,0,.45); object-fit:cover; width:100%; height:100%; }
.hero-actions { display:flex; flex-wrap:wrap; gap:16px; }
.btn { --btn-bg:#fff; --btn-color:#111827; background:var(--btn-bg); color:var(--btn-color); padding:14px 24px; font-weight:600; font-size:15px; border-radius:var(--radius-sm); text-decoration:none; display:inline-flex; align-items:center; gap:8px; position:relative; border:2px solid #fff; cursor:pointer; transition:.28s cubic-bezier(.4,0,.2,1); }
.btn:hover { transform:translateY(-3px); box-shadow:0 10px 22px -6px rgba(0,0,0,.35); }
.btn-primary { --btn-bg:#2563eb; --btn-color:#fff; border-color:#1d4ed8; }
.btn-primary:hover { background:#1d4ed8; }
.btn-outline { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4); }
.btn-outline:hover { background:rgba(255,255,255,.16); }

/* Sections */
.section { padding:80px 24px; position:relative; }
.section.alt { background:#101726; }
.section.dark { background:#0f172a; color:#cbd5e1; }
.section-inner { max-width:1180px; margin:0 auto; }
.section h2 { font-size:clamp(2rem,4vw,2.4rem); margin:0 0 18px; letter-spacing:-.5px; line-height:1.15; }
.section p.sec-lead { font-size:1.02rem; max-width:860px; color:#94a3b8; margin:0 0 32px; line-height:1.55; }
.section.dark p.sec-lead { color:#94a3b8; }

/* About */
.about-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:50px; align-items:start; }
@media (max-width:640px){ .about-grid { gap:40px; } }
.about-block h2 { margin-top:0; }
.skills-list { display:flex; flex-direction:column; gap:26px; margin-top:8px; }
.skill-group h3 { margin:0 0 6px; font-size:15px; color:#38bdf8; letter-spacing:.5px; text-transform:uppercase; font-weight:600; }
.skill-group p { margin:0; font-size:14px; line-height:1.55; color:#cbd5e1; }

/* Projects vertical */
.projects-vertical { display:flex; flex-direction:column; gap:34px; margin-top:20px; }
.project-card { background:#0f172a; border:1px solid #1e293b; border-radius:16px; padding:28px 30px; position:relative; box-shadow:0 4px 18px -6px rgba(0,0,0,.6); }
.project-card h3 { margin:0 0 14px; font-size:20px; font-weight:600; color:#fff; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.badge-live { background:#16a34a; color:#f0fdf4; font-size:11px; padding:4px 8px; border-radius:999px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.project-summary { margin:0 0 14px; font-size:15px; line-height:1.55; color:#cbd5e1; }
.project-points { margin:0 0 18px 18px; padding:0; display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.5; color:#94a3b8; }
.project-points li { padding-left:4px; }
.project-actions { display:flex; gap:16px; }
.visit-btn { display:inline-flex; align-items:center; gap:6px; background:#2563eb; color:#fff; text-decoration:none; font-weight:500; padding:10px 18px; border-radius:10px; font-size:14px; box-shadow:0 2px 8px -2px rgba(37,99,235,0.5); transition:background .2s,transform .2s; }
.visit-btn:hover { background:#1d4ed8; transform:translateY(-2px); }

/* Expandable cards */
.project-card.expandable { transition:box-shadow .35s ease, border-color .35s ease, background .35s ease; overflow:hidden; }
.project-card.expandable:hover { border-color:#334155; box-shadow:0 8px 26px -4px rgba(0,0,0,.55); }
.project-card .project-extra { max-height:0; opacity:0; transform:translateY(-4px); transition:max-height .6s cubic-bezier(.4,0,.2,1), opacity .45s ease, transform .45s ease; display:flex; flex-direction:column; gap:14px; font-size:14px; line-height:1.55; color:#a5b4c5; }
.project-card[data-collapsed="false"] .project-extra { max-height:480px; opacity:1; transform:translateY(0); margin-top:4px; }
.toggle-more-btn { background:#1e293b; color:#cbd5e1; border:1px solid #334155; padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; letter-spacing:.5px; display:inline-flex; align-items:center; gap:6px; transition:background .25s, color .25s, border-color .25s, transform .25s; }
.toggle-more-btn:hover { background:#253347; color:#fff; }
.toggle-more-btn:active { transform:scale(.97); }
.project-card[data-collapsed="false"] .toggle-more-btn { background:#2563eb; border-color:#1d4ed8; color:#fff; }
.project-card[data-collapsed="false"] .toggle-more-btn:hover { background:#1d4ed8; }

/* Micro animations */
@keyframes subtle-pop { 0%{ transform:scale(.98); opacity:0;} 100%{ transform:scale(1); opacity:1;} }
.project-card { animation:subtle-pop .5s ease; }

/* Enhancements: toggle buttons interaction & accessibility */
.toggle-more-btn { position:relative; user-select:none; -webkit-user-select:none; line-height:1; }
.toggle-more-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.toggle-more-btn span { pointer-events:none; }
.toggle-more-btn:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }
.project-actions { align-items:center; flex-wrap:wrap; }
.project-actions a, .project-actions button { position:relative; z-index:1; }
.project-actions a, .toggle-more-btn { pointer-events:auto; }

/* AI section theme alignment */
.chat-section.alt-bg { background:#0d1522; border-top:1px solid #162231; }
/* Chat panel refined palette */
.chat-panel { background:#0f1b2b; border:1px solid #1d2b3b; box-shadow:0 14px 38px -12px rgba(0,0,0,.65),0 4px 18px -6px rgba(0,0,0,.55); transition:box-shadow .4s ease,border-color .4s ease; }
.chat-panel:focus-within { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.35),0 14px 40px -10px rgba(0,0,0,.65); }
.chat-header { background:linear-gradient(135deg,#13263b 0%,#102133 70%,#102033 100%); border-bottom:1px solid #1f3042; }
.chat-header h3 { color:#f1f5f9; }
.clear-chat-btn { background:#142537; color:#cdd6e2; border:1px solid #203345; }
.clear-chat-btn:hover { background:#2563eb; border-color:#1d4ed8; color:#fff; }
.chat-messages { background:linear-gradient(180deg,#0f1b2b 0%,#102033 12%,#0f1b2b 100%); }
.message-text { transition:background .3s, border-color .3s, transform .3s; }
.ai-message .message-text { background:#162a41; border:1px solid #243d55; color:#e2ecf5; }
.ai-message .message-text code { background:#22415d; color:#fff; }
.ai-message .message-text pre { background:#132437; border-left:3px solid #2563eb; }
.user-message .message-text { background:linear-gradient(140deg,#2563eb 0%,#1d4ed8 60%,#1a45c2 100%); color:#fff; border:none; box-shadow:0 4px 14px -4px rgba(37,99,235,.55); }
.ai-typing-dots { background:#162a41; border:1px solid #243d55; }
#chat-input { background:#162a41; border:1px solid #24384d; color:#f1f5f9; }
#chat-input::placeholder { color:#94a3b8; }
#chat-input:focus { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,0.35); }
.send-button { background:#2563eb; box-shadow:0 4px 14px -4px rgba(37,99,235,.6); }
.send-button:hover:not(:disabled) { background:#1d4ed8; }
.send-button:disabled { background:#2d3e52; }
/* Re-assert chat input container styling & improvements */
.chat-input-area { border-top:1px solid #1d2c3a; background:#101d2c; padding:16px; flex-shrink:0; }
#chat-input { flex:1; border-radius:12px; padding:12px 18px; font-size:14px; resize:none; height:46px; min-height:46px; max-height:160px; line-height:1.32; transition:background .25s,border-color .25s,box-shadow .25s; box-shadow:0 1px 3px rgba(0,0,0,.35) inset,0 0 0 1px rgba(255,255,255,.03); box-sizing:border-box; overflow:hidden; scrollbar-width:thin; scrollbar-color:#2563eb #162a41; }
.chat-input-container { display:flex; gap:10px; align-items:center; padding:0 4px; }
.chat-messages::-webkit-scrollbar { width:12px; }
.chat-messages::-webkit-scrollbar-track { background:#0f1b2b; border-left:1px solid #142a3e; }
.chat-messages::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#2563eb 0%,#1d4ed8 80%); border:3px solid #0f1b2b; border-radius:14px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#1d4ed8 0%,#1a45c2 80%); }
.chat-messages { scrollbar-width:thin; scrollbar-color:#2563eb #0f1b2b; }

/* Global scrollbar styling */
html { scrollbar-width:thin; scrollbar-color:#2563eb #0b1220; }
html::-webkit-scrollbar { width:14px; }
html::-webkit-scrollbar-track { background:#0b1220; }
html::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#1e3a8a 0%,#2563eb 70%); border-radius:14px; border:3px solid #0b1220; }
html::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#1d4ed8 0%,#1e40af 70%); }

/* Toast notifications */
.toast-root { position:fixed; top:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:10px; z-index:300; pointer-events:none; }
.toast { background:#13263b; color:#e2ecf5; padding:10px 16px; border:1px solid #1d3a55; border-radius:12px; font-size:13px; font-weight:500; letter-spacing:.3px; box-shadow:0 6px 20px -6px rgba(0,0,0,.55); display:flex; align-items:center; gap:8px; animation:toastIn .45s cubic-bezier(.4,0,.2,1), fadeOut .4s ease 3s forwards; backdrop-filter:blur(4px); }
.toast svg { width:16px; height:16px; color:#38bdf8; flex-shrink:0; }
@keyframes toastIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { to { opacity:0; } }
#chat-input::-webkit-scrollbar { width:8px; }
#chat-input::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#1e3a8a 0%,#2563eb 70%); border-radius:8px; border:2px solid #162a41; }
.send-button { width:46px; height:46px; border:none; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s,transform .25s,box-shadow .3s; color:#fff; background:#2563eb; box-shadow:0 1px 3px rgba(0,0,0,.6); }
.send-button svg { pointer-events:none; }
.send-button:active:not(:disabled){ transform:scale(.94); }
.send-button:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }
.send-button:disabled { cursor:not-allowed; opacity:.55; box-shadow:none; }
.clear-chat-btn { font-size:12px; font-weight:600; padding:8px 16px; border-radius:12px; letter-spacing:.5px; cursor:pointer; transition:background .25s,border-color .25s,color .25s,transform .25s; user-select:none; -webkit-user-select:none; }
.clear-chat-btn:active { transform:scale(.95); }
.clear-chat-btn:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }

/* Adjust AI section spacing to ensure panel fits neatly under navbar */
#ai.chat-section .chat-single-container { padding:46px 24px 70px; }
@media (min-width: 841px) and (max-height:880px){
  #ai.chat-section .chat-single-container { padding:36px 20px 56px; }
  .chat-panel { height:560px; max-height:560px; }
}
@media (min-width: 841px) and (max-height:740px){
  .chat-panel { height:520px; max-height:520px; }
  #ai.chat-section .chat-single-container { padding:30px 16px 50px; }
}

/* Floating subtle focus ring on active project card */
.project-card:focus-within { outline:2px solid #2563eb; outline-offset:2px; }

/* Smooth anchor scroll behavior */
html { scroll-behavior:smooth; }

/* Scroll appear animations */
.pre-fade { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.in-view { opacity:1; transform:translateY(0); }

/* Contact */
.contact-inner { max-width:1080px; }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin-top:32px; align-items:center; }
/* Desktop: one row, spacing based on link widths (not card widths) */
@media (min-width: 1100px){
  .contact-inner { max-width:1280px; padding-left:48px; padding-right:48px; }
  .contact-grid { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:space-between; gap:12px; }
  .contact-item { flex:0 0 auto; }
  .contact-item p { white-space: nowrap; }
}
.contact-item h3 { margin:0 0 6px; font-size:15px; color:#38bdf8; text-transform:uppercase; letter-spacing:.5px; }
.contact-item p { margin:0; font-size:15px; }
.contact-item a { color:#60a5fa; text-decoration:none; }
.contact-item a:hover { text-decoration:underline; }
.copy-btn { background:none; border:none; color:#60a5fa; cursor:pointer; padding:4px; border-radius:4px; transition:color 0.2s; display:inline-flex; align-items:center; justify-content:center; }
.copy-btn:hover { color:#3b82f6; }
.copy-btn:active, .copy-btn.copied { color:#16a34a; }
.copy-btn svg { pointer-events:none; }

/* Anchor scroll offset */
#about,#projects,#ai,#contact { scroll-margin-top:72px; }

/* Hide legacy grid if present */
.card-grid { display:none; }

/* Responsive tweaks */
@media (max-width:640px){
  .hero { padding-top:100px; }
  .project-card { padding:24px 22px; }
  .project-card h3 { font-size:18px; }
  .section { padding:70px 20px; }
}
@media (max-width:640px){ .projects-vertical { gap:28px; } }
@media (max-width:840px){ .chat-panel { height:560px; max-height:none; border-radius:24px; } }
@media (max-width:640px){ .chat-panel { height:520px; } }
@media (max-width:640px){ .chat-messages { padding:18px 18px 24px; gap:16px; } }
@media (max-width:640px){ .chat-input-area { padding:14px 14px 16px; } }
@media (max-width:640px){ .contact-grid { gap:28px; } }
@media (max-width:420px){ .nav-links { width:78%; } .hero h1 { font-size:2.1rem; } .chat-panel { border-radius:20px; } #chat-input { font-size:13px; } }

/* Mobile chat refinements (parity with transcript mobile) */
@media (max-width:640px){
  /* Ensure input and send button maintain intended size */
  #chat-input { min-height:46px; max-height:160px; padding:12px 18px; line-height:1.32; }
  .send-button { width:46px; height:46px; }
  /* Hide avatars and widen message bubbles on mobile */
  .user-avatar, .ai-avatar, .ai-typing-message .ai-avatar { display:none !important; }
  .user-message, .ai-message { gap:0; }
  .message-content, .ai-typing-message .message-content { max-width:100%; }
}

/* Grid cards */
.card-grid { display:grid; gap:32px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.card { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:28px 26px 30px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow-sm); transition:.4s; }
.card:hover { box-shadow:0 14px 38px -10px rgba(0,0,0,.25); transform:translateY(-6px); }
.card h3 { margin:0 0 6px; font-size:20px; letter-spacing:-.5px; }
.card p { margin:0; line-height:1.5; font-size:15px; color:#475569; }
.card.badge::after { content:attr(data-badge); position:absolute; top:14px; right:-38px; background:var(--brand-accent); color:#fff; font-size:13px; font-weight:600; padding:6px 50px; transform:rotate(40deg); box-shadow:0 6px 16px -4px rgba(0,0,0,.35); }

/* Chat single-container layout (mirrors transcript chat styles) */
/* Unified chat structural styles (non-color) */
.chat-section { border-top:1px solid #162231; }
.chat-single-container { max-width:1080px; margin:0 auto; padding:32px 24px 40px; }
.chat-panel { position:relative; border-radius:26px; padding:0; display:flex; flex-direction:column; overflow:hidden; height:calc(100vh - 64px - 32px - 40px); max-height:620px; }
.chat-header { padding:16px 24px 14px; display:flex; align-items:center; justify-content:space-between; }
.chat-container { flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-messages { flex:1; padding:22px 24px 30px; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:18px; }
.user-message, .ai-message, .ai-typing-message { display:flex; align-items:flex-start; gap:10px; animation:fadeIn .35s ease; }
.user-message { justify-content:flex-end; }
.user-avatar, .ai-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff; border:2px solid rgba(255,255,255,.15); box-shadow:0 2px 6px rgba(0,0,0,.35); flex-shrink:0; }
.user-avatar { background:#1d4ed8; }
.ai-avatar { background:linear-gradient(145deg,#0f172a 0%,#2563eb 100%); }
.message-content { max-width:78%; display:flex; flex-direction:column; }
.message-text { padding:14px 18px; border-radius:18px; font-size:14px; line-height:1.6; word-wrap:break-word; box-shadow:0 1px 3px rgba(0,0,0,.25); }
@media (max-width:780px){ .chat-single-container { padding:28px 16px 34px; } .chat-messages { padding:20px 18px 26px; } .chat-panel { height:calc(100vh - 64px - 28px - 34px); } }

/* Footer */
.site-footer { background:#0f172a; color:#94a3b8; padding:48px 24px; }
.footer-inner { max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start; }
.footer-brand { flex:1 1 320px; }
.footer-brand h3 { margin:0 0 14px; font-size:18px; letter-spacing:.5px; color:#fff; }
.footer-meta { font-size:13px; margin-top:14px; }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }
.fade-in { animation:fadeIn .5s ease; }

/* Utilities */
.max-w-prose { max-width:780px; }
.muted { color:#64748b; }
.hidden { display:none !important; }

/* Scrollbars */
.messages::-webkit-scrollbar, .history-scroll::-webkit-scrollbar { width:10px; }
.messages::-webkit-scrollbar-track, .history-scroll::-webkit-scrollbar-track { background:transparent; }
.messages::-webkit-scrollbar-thumb, .history-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:20px; border:3px solid #f1f5f9; }
.messages::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

/* Responsive refinements */
@media (max-width:680px){
  .hero { padding:120px 20px 70px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .chat-panel { height:540px; }
  .messages { padding:20px 20px 26px; }
  /* textarea.chat-input { min-height:px; } */
}

/* Mobile-only: make the AI chat panel taller and stable across browser UI bars */
@media (max-width: 680px){
  /* Reduce outer padding on the chat area to reclaim space */
  #ai.chat-section .chat-single-container { padding: 20px 14px 24px; }
  /* Use modern dynamic units with a JS-updated CSS var fallback for iOS/Android */
  .chat-panel {
    max-height: none;
    height: calc(100svh - 64px - 20px - 24px);
    height: calc(100dvh - 64px - 20px - 24px);
    height: calc(var(--vh, 1vh) * 100 - 64px - 20px - 24px);
  }
}