/* ------------------------
   CSS VARIABLES & THEMES
-------------------------*/
:root {
  --bg: #0b1020;          /* slate-950-ish */
  --bg-elev: #0f172a;     /* slate-900 */
  --text: #e5e7eb;        /* slate-200 */
  --muted: #94a3b8;       /* slate-400 */
  --accent: #7c3aed;      /* violet-600 */
  --accent-2: #22d3ee;    /* cyan-400 */
  --card: #111827;        /* gray-900 */
  --border: #1f2937;      /* gray-800 */
  --success: #22c55e;     /* green-500 */
  --warning: #f59e0b;     /* amber-500 */
  --danger: #ef4444;      /* red-500 */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
[data-theme="light"] {
  --bg: #f8fafc;          /* slate-50 */
  --bg-elev: #ffffff;
  --text: #0b1020;        /* deep slate */
  --muted: #475569;       /* slate-600 */
  --accent: #6d28d9;      /* violet-700 */
  --accent-2: #0891b2;    /* cyan-700 */
  --card: #ffffff;
  --border: #e2e8f0;      /* slate-200 */
  --shadow: 0 8px 20px rgba(2,6,23,.08);
}

/* ------------------------
   GLOBAL RESETS
-------------------------*/
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(124,58,237,.15), transparent 60%),
              radial-gradient(900px 500px at 0% 0%, rgba(34,211,238,.08), transparent 50%),
              var(--bg);
  line-height: 1.6;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1200px, 92vw); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ------------------------
   ACCESSIBILITY ENHANCEMENTS
-------------------------*/
/* Focus indicators */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Enhanced button focus */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: color-mix(in oklab, var(--accent) 15%, var(--card));
}

/* Card focus states */
.card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Skip links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--accent);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .orb, .orb2 {
    animation: none;
  }
}

/* ------------------------
   NAVBAR
-------------------------*/
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg-elev) 80%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0;
}
.brand { font-weight: 800; letter-spacing: .3px; }
nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
nav a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .9rem; border-radius: .6rem; color: var(--muted);
  min-height: 44px; min-width: 44px;
}
nav a:hover, nav a:focus { color: var(--text); background: color-mix(in oklab, var(--card) 80%, transparent); }

/* Brand link with tiny avatar */
.brand-link { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; }
.brand-link img { width:28px; height:28px; border-radius:50%; display:block; }

.theme-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--border); border-radius: 999px; padding: .35rem .65rem;
  background: var(--card); cursor: pointer;
  min-height: 44px;
}
.theme-toggle input { appearance: none; width: 34px; height: 18px; background: var(--border); border-radius: 999px; position: relative; outline: none; }
.theme-toggle input::after { content: ""; position: absolute; inset: 3px auto auto 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transition: transform .2s ease; }
.theme-toggle input:checked::after { transform: translateX(16px); }

/* ------------------------
   HERO
-------------------------*/
.hero {
  padding: clamp(3rem, 6vw + 1rem, 7rem) 0;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: center;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.headline { font-size: clamp(1.6rem, 2.8vw + 1rem, 2.3rem); line-height: 1.15; letter-spacing: .2px; margin: 0 0 1rem; }
.subline { color: var(--muted); font-size: clamp(1rem, .8rem + .6vw, 1.25rem); margin-bottom: 1.5rem; }

/* Availability badge */
.availability-badge {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .4rem .75rem .45rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: color-mix(in oklab, var(--accent) 25%, var(--card));
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border));
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* CTA group */
.cta-group { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-bottom:1rem; }

.cta { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .9rem 1.2rem; border-radius: .8rem; font-weight: 600; border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--border));
       background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, var(--card)) 0%, var(--card) 100%);
  box-shadow: var(--shadow);
  min-height: 48px; min-width: 48px;
}
.cta:hover { transform: translateY(-1px); }

/* Secondary CTA variant */
.cta.secondary { background: var(--card); border:1px solid var(--border); box-shadow:none; }
.cta.secondary:hover { background: color-mix(in oklab, var(--card) 88%, transparent); }

.hero-visual {
  aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--card);
  position: relative; box-shadow: var(--shadow);
}
/* Subtle animated effect: gradient orbits */
.orb { position: absolute; inset: -10% -10% auto auto; width: 260px; height: 260px; background: radial-gradient(closest-side, rgba(34,211,238,.35), transparent);
       filter: blur(20px); border-radius: 50%; animation: float 10s ease-in-out infinite alternate; }
.orb2 { left: -10%; top: 40%; width: 320px; height: 320px; background: radial-gradient(closest-side, rgba(124,58,237,.35), transparent); animation-duration: 13s; }
@keyframes float { from { transform: translateY(-10px) translateX(0); } to { transform: translateY(10px) translateX(10px); } }

/* ------------------------
   SECTIONS
-------------------------*/
section { padding: 3.5rem 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.section-title { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); margin: 0; }
.muted { color: var(--muted); }

/* ------------------------
   FILTER CONTROLS
-------------------------*/
.filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { border:1px solid var(--border); background: var(--card); color: var(--muted);
  padding:.45rem .9rem; border-radius:999px; cursor:pointer; user-select:none; min-height: 44px; }
.chip[aria-pressed="true"] { color: var(--text); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }

/* ------------------------
   PROJECT GRID
-------------------------*/
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.card { grid-column: span 4; background: var(--card); border:1px solid var(--border); border-radius:1rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.card-click { cursor: pointer; position: relative; }
.card-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-click:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
@media (max-width: 1100px) { .card { grid-column: span 6; } }
@media (max-width: 700px)  { .card { grid-column: span 12; } }
.thumb { aspect-ratio: 16/9; background: #0a0a0a; position: relative; }
.thumb img, .thumb video, .thumb iframe { width:100%; height:100%; object-fit:cover; }
.card-body { padding: 1rem 1rem 1.2rem; display:flex; flex-direction:column; gap:.65rem; }
.card-title { margin:0; font-size:1.1rem; }
.tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.tag { font-size:.8rem; padding:.18rem .5rem; border-radius:.5rem; border:1px solid var(--border); color: var(--text); }
.card-actions { margin-top:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:1px solid var(--border); background: transparent; color: var(--text); padding:.5rem .8rem; border-radius:.6rem; cursor:pointer; min-height: 44px; min-width: 44px; }
.btn:hover { background: color-mix(in oklab, var(--card) 85%, transparent); }

/* ------------------------
   ABOUT
-------------------------*/
.about { display:grid; grid-template-columns: 1fr 2fr; gap:2rem; align-items:start; }
@media (max-width: 900px) { .about { grid-template-columns:1fr; } }
.avatar { width: 140px; aspect-ratio:1; border-radius: 50%; border:2px solid var(--border); overflow:hidden; box-shadow:var(--shadow); }
.skills { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; }
@media (max-width: 700px) { .skills { grid-template-columns:1fr; } }
.skill-box { border:1px solid var(--border); background: var(--card); border-radius:.8rem; padding: .9rem; }
.skill-box h4 { margin:.2rem 0 .4rem; font-size: .95rem; }
.skill-box ul { margin:0; padding-left:1rem; color: var(--muted); }

/* ------------------------
   CONTACT
-------------------------*/
form { display:grid; gap:.8rem; max-width: 640px; }
label { font-weight: 600; }
input, textarea {
  background: var(--bg-elev); border:1px solid var(--border); color:var(--text); border-radius:.6rem; padding:.7rem .8rem; font: inherit;
}
textarea { min-height: 140px; resize: vertical; }
.submit { background: var(--accent); border: none; color: white; }
.submit:hover { filter: brightness(1.05); }
.error-message {
  color: var(--danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  min-height: 1.25rem;
}
input:invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--danger);
}
label::after {
  content: " *";
  color: var(--danger);
}
label[for="message"]::after {
  content: " *";
}

/* ------------------------
   BLOG / UPDATES
-------------------------*/
.posts { display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.post { grid-column: span 6; border:1px solid var(--border); background: var(--card); border-radius:.8rem; padding:1rem; }
@media (max-width: 900px) { .post { grid-column: span 12; } }

/* ------------------------
   PROJECT DETAIL (in-page template)
-------------------------*/
dialog.project-detail { width:min(980px, 92vw); border:1px solid var(--border); border-radius:1rem; background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { backdrop-filter: blur(3px); background: rgba(0,0,0,.35); }
.detail-header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); padding:1rem; }
.detail-body { padding: 1rem 1rem 1.3rem; display:grid; gap:1rem; }
.detail-grid { display:grid; grid-template-columns: 2fr 1fr; gap:1rem; }
@media (max-width:900px){ .detail-grid { grid-template-columns:1fr; } }
.downloads a { display:inline-block; margin:.25rem .25rem 0 0; border:1px solid var(--border); padding:.4rem .6rem; border-radius:.5rem; }

/* ------------------------
   FOOTER
-------------------------*/
footer { border-top:1px solid var(--border); padding:2rem 0; color: var(--muted); }
.footer-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width:800px){ .footer-grid { grid-template-columns: 1fr; text-align:center; } }

/* ------------------------
  WORK TOGETHER CTA / RESUME
-------------------------*/
.work-together { display:grid; grid-template-columns: 1.2fr 1fr; gap:2rem; margin: 0 0 2.5rem; padding:1.5rem 1.75rem; border:1px solid var(--border); background: var(--card); border-radius:1rem; box-shadow: var(--shadow); }
@media (max-width: 900px){ .work-together { grid-template-columns:1fr; } }
.work-together h3 { margin-top:0; font-size:1.6rem; }
.cta-buttons { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem; }
.cta-buttons .cta { box-shadow:none; border:1px solid var(--border); background:color-mix(in oklab, var(--card) 94%, transparent); }
.cta-buttons .cta:hover { background: color-mix(in oklab, var(--card) 85%, transparent); }
.resume-pane { display:flex; flex-direction:column; gap:.75rem; }
.resume-embed { position:relative; border:1px solid var(--border); border-radius:.6rem; overflow:hidden; aspect-ratio: 8.5 / 11; background: #161d2c; }
.resume-embed object { width:100%; height:100%; }
.resume-actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.resume-actions .btn { background: var(--card); }
.resume-actions .btn:hover { background: color-mix(in oklab, var(--card) 85%, transparent); }

/* ------------------------
   ASSISTANT DOCK PANEL
-------------------------*/
/* Chip button */
.assistant-chip{
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9998;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem; border-radius: 999px;
  background: var(--lk-surface-2); color: var(--lk-text);
  border: 1px solid var(--lk-border); box-shadow: var(--lk-shadow);
}
.assistant-chip .chip-icon{ width:18px; height:18px; opacity:.9 }
.assistant-chip:is(:hover,:focus-visible){
  border-color: color-mix(in srgb, var(--lk-accent) 65%, white 35%);
}
.assistant-chip.is-hidden{ display:none; }

/* Hide dock when [hidden] */
.assistant-dock[hidden]{ display:none !important; }
/* Panel */
.assistant-dock{
  position: fixed; right: 1rem; bottom: calc(1rem + var(--assistant-bottom-offset, 0px)); z-index: 9999;
  width: min(420px, 92vw);
  background: color-mix(in srgb, var(--lk-surface) 92%, transparent);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--lk-shadow);
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--lk-text);
  transform-origin: bottom right; animation: dockIn .16s ease-out;
}
@keyframes dockIn { from { transform: scale(.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .assistant-dock { animation: none; } }
.assistant-header{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.7rem .9rem .5rem; border-bottom:1px solid var(--lk-border);
  font: 600 14px/1.2 ui-sans-serif, system-ui, Inter, Segoe UI, Roboto, Arial;
}
.assistant-title{ display:flex; align-items:center; gap:.5rem; }
.assistant-close{ margin-left:.6rem; background:none; border:0; color:var(--lk-muted); cursor:pointer }

/* System bar under header */
.assistant-systembar{
  display:flex; align-items:center; gap:.5rem; justify-content:flex-start;
  padding:.4rem .9rem; border-bottom:1px dashed var(--lk-border);
  background: color-mix(in srgb, var(--lk-surface) 96%, transparent);
}
.assistant-systembar .served-by{ margin-left:0; color: var(--lk-muted); font-weight:500; font-size:12px }

/* In-panel agent status chip */
.agent-status{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .5rem; border-radius:999px;
  background: color-mix(in srgb, var(--lk-surface-2) 90%, transparent);
  border:1px solid var(--lk-border);
  color: var(--lk-text); font-size:12px; line-height:1.2;
  cursor: default; position: relative;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.agent-status .agent-dot{ width:.55rem; height:.55rem; border-radius:50%; display:inline-block }
.agent-status .agent-kv{ opacity:.9 }
.agent-status.ok{ border-color: color-mix(in srgb, #2ecc71 60%, var(--lk-border)); }
.agent-status.warn{ border-color: color-mix(in srgb, #f1c40f 60%, var(--lk-border)); }
.agent-status.err{ border-color: color-mix(in srgb, #e74c3c 60%, var(--lk-border)); }
.agent-status:hover{ background: color-mix(in srgb, var(--lk-surface-2) 96%, transparent); box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* Simple hover tooltip for details */
.agent-status[data-tip]{
  --tip-bg: color-mix(in srgb, var(--lk-bg) 95%, black 5%);
}
.agent-status[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 8px);
  white-space: pre-wrap; max-width: 260px;
  background: var(--tip-bg); color: var(--lk-text);
  border: 1px solid var(--lk-border); border-radius: .5rem;
  padding: .45rem .6rem; box-shadow: var(--lk-shadow);
  z-index: 10000; font-size: 12px; line-height: 1.25;
}
/* Tooltip arrow */
.agent-status[data-tip]:hover::before{
  content:""; position:absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: var(--lk-border);
}
/*.agent-status:hover::before can draw an arrow if desired*/

/* Messages */
.chat-log{
  list-style:none; margin:0; padding: .75rem .75rem 0; overflow:auto; max-height: 48vh;
  display:flex; flex-direction: column; gap:.75rem;
}
/* Scrollbar polish */
.chat-log::-webkit-scrollbar{ width: 10px; height:10px }
.chat-log::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--lk-border) 80%, var(--lk-surface-2)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box }
.chat-log::-webkit-scrollbar-track{ background: transparent }
.msg{ display:flex; gap:.6rem; align-items:flex-end }
.msg .avatar{
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--lk-surface-2);
  border:1px solid var(--lk-border-strong);
  display:grid; place-items:center;
  font: 700 12px/1 ui-sans-serif; color: color-mix(in srgb, var(--lk-accent) 75%, white 25%);
}

/* Bubbles */
.msg .bubble{
  max-width: 75%;
  padding:.6rem .75rem;
  border-radius: 16px;
  border:1px solid var(--lk-border);
  word-wrap: break-word; overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
}
.from-user{ justify-content:flex-end }
.from-user .bubble{
  background: var(--lk-accent);
  color: var(--lk-accent-contrast);
  border-color: color-mix(in srgb, var(--lk-accent) 85%, black 15%);
}
.from-user .avatar{
  order:2; background: var(--lk-accent); color: var(--lk-accent-contrast);
  border-color: color-mix(in srgb, var(--lk-accent) 85%, black 15%);
}
.from-ai .bubble{
  background: var(--lk-surface-2);
  color: var(--lk-text);
}
.from-ai .avatar{ background: var(--lk-surface-2) }

/* Bubble tails */
.from-user .bubble{ position:relative }
.from-user .bubble::after{
  content:""; position:absolute; right:-6px; bottom:6px; width:10px; height:10px;
  background: var(--lk-accent);
  transform: rotate(45deg);
  border-right:1px solid color-mix(in srgb, var(--lk-accent) 85%, black 15%);
  border-bottom:1px solid color-mix(in srgb, var(--lk-accent) 85%, black 15%);
}
.from-ai .bubble{ position:relative }
.from-ai .bubble::before{
  content:""; position:absolute; left:-6px; bottom:6px; width:10px; height:10px;
  background: var(--lk-surface-2);
  transform: rotate(45deg);
  border-left:1px solid var(--lk-border);
  border-bottom:1px solid var(--lk-border);
}

/* Typographic polish inside bubbles */
.bubble h4{ margin:.2rem 0 .35rem; font-size:14px; color: var(--lk-text) }
.bubble p{ margin:.25rem 0; opacity:.95 }
.bubble ul{ margin:.25rem 0 .25rem 1rem; padding:0 }
.bubble li{ margin:.15rem 0 }
.bubble code{
  background: var(--lk-bg);
  padding:.1rem .3rem; border-radius:6px;
  border:1px solid var(--lk-border);
  color: color-mix(in srgb, var(--lk-text) 90%, var(--lk-accent) 10%);
}
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .assistant-dock, .agent-status{ transition: none !important; }
}

/* Composer */
.chat-composer{
  display:flex; gap:.5rem; padding:.6rem; border-top:1px solid var(--lk-border);
  background: color-mix(in srgb, var(--lk-surface) 96%, transparent);
}
.chat-composer input{
  flex:1; background: var(--lk-bg); color: var(--lk-text);
  border:1px solid var(--lk-border);
  border-radius: 12px; padding:.65rem .8rem; outline:none;
}
.chat-composer input:focus{
  border-color: color-mix(in srgb, var(--lk-accent) 70%, white 30%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lk-accent) 25%, transparent);
}
.chat-composer button{
  padding:.6rem .9rem; border-radius:12px; border:0;
  background: var(--lk-accent); color: var(--lk-accent-contrast);
  font-weight:600; cursor:pointer;
}
.chat-composer button:hover{ filter: brightness(1.05); }

/* Streaming cursor */
.cursor{
  display:inline-block; width:.55em; height:1em; vertical-align:bottom;
  background: var(--lk-text); opacity:.75; margin-left:2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Links inside the panel */
.assistant-dock a{ color: color-mix(in srgb, var(--lk-accent) 85%, white 15%) }