/* ==========================================================================
   Claude-style app shell: collapsible left sidebar (projects list) +
   main chat column + full-page "project view". Lives only inside the
   locked #hero gateway screen.
   ========================================================================== */

/* While locked, pin the whole chat gateway to the viewport with
   position:fixed — taking it fully out of document flow. This is what
   actually makes it behave like a self-contained chat app instead of "a
   tall section on a scrolling page": there is no ancestor scroll
   relationship left to leak through (focus-scroll, sticky quirks, etc.),
   because a fixed element's box is anchored to the viewport itself, not to
   any scrolling container. Reverts to a normal in-flow section the moment
   .chat-locked is removed (the "Web View" / CTA exit path). */
html.chat-locked .chat-gate-screen {
  position: fixed;
  inset: 0;
  z-index: 400;
}

/* The legacy floating FAQ-chatbot widget is a separate, older feature.
   It now visually collides with the wider composer's submit button and is
   redundant with the new sidebar chat anyway — hide it while locked. */
html.chat-locked .chatbot {
  display: none;
}

.chat-gate-screen {
  padding: 0;
  background: #f4f3ee;

  /* Force a fixed light palette here regardless of the site-wide dark/light
     toggle, so text always reads as proper dark ink on the cream canvas
     instead of inheriting the dark theme's near-white text color. */
  --bg-primary: #f4f3ee;
  --bg-secondary: #f4f3ee;
  --bg-elevated: #ffffff;
  --surface-glass: rgba(38, 36, 33, 0.045);
  --surface-glass-strong: rgba(38, 36, 33, 0.07);
  --border-glass: rgba(38, 36, 33, 0.13);
  --border-glass-strong: rgba(38, 36, 33, 0.2);

  --text-primary: #17160f;
  --text-secondary: #43413a;
  --text-muted: #6c6a61;

  --sidebar-bg: #f4f3ee;
  --sidebar-bg-hover: rgba(38, 36, 33, 0.07);
  --sidebar-bg-active: rgba(201, 118, 42, 0.2);
  --sidebar-border: rgba(38, 36, 33, 0.13);
}

.chat-gate-screen .hero-bg {
  display: none;
}

/* The greeting/subtitle are the first thing a visitor sees — they should
   never depend on a scroll-triggered reveal animation (which can leave
   text sitting at its dim pre-reveal opacity if the observer's timing
   doesn't line up with this being a position:fixed overlay, not a
   normally-scrolled section). Force full visibility here. */
.chat-gate-screen [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ---------------- Profile intro card (LinkedIn-style banner + avatar) ----------------
   --avatar-size and --avatar-overlap drive both the avatar's own size AND the body's
   top padding, so the gap between the avatar and the name is always the true minimum
   (a small fixed breathing-room constant) — never overlapping, never oversized —
   regardless of how tall .profile-intro-banner is set. Changing the banner's height
   here never needs a second matching edit anywhere else. */
.profile-intro-card {
  position: relative;
  --avatar-size: clamp(56px, 9vw, 72px);
  --avatar-overlap: 0.82;
  width: 66%;
  margin-inline: auto;
  margin-bottom: 1.75rem;
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  background: var(--bg-elevated);
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;;
}

/* Full banner image at its native aspect ratio (1967 / 800) — shown
   whole, like LinkedIn's own banner, not cropped down to a sliver.
   Only this div's height changes the banner's size; avatar/body below
   auto-adjust via top:100% + the shared --avatar-size formula. */
.profile-intro-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1967 / 800;
  max-height: 170px;
  background-image: url("../assets/images/projects/ChatGPT Image Jun 15, 2026, 03_00_50 AM.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.profile-intro-avatar {
  position: absolute;
  left: clamp(0.75rem, 3vw, 1rem);
  top: 100%;
  transform: translateY(calc(-1 * var(--avatar-overlap) * 100%));
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bg-elevated);
  background: var(--bg-elevated);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.profile-intro-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.profile-intro-body {
  /* top clearance = exactly how far the avatar dips below the banner
     (size * (1 - overlap)) + a small fixed gap — nothing more. */
  padding-top: calc(var(--avatar-size) * (1 - var(--avatar-overlap)) + 0.5rem);
  padding-inline: clamp(0.75rem, 3vw, 1rem);
  padding-bottom: 0.85rem;
  text-align: left;
}

.profile-intro-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.profile-intro-verify {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent-2);
  border: 1px dashed var(--accent-1);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

.profile-intro-tagline {
  color: var(--text-primary);
  font-size: 0.76rem;
  line-height: 1.5;
  max-width: 100%;
  margin-bottom: 0.4rem;
}

.profile-intro-meta {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.profile-intro-contact-link {
  color: var(--accent-2);
  font-weight: 600;
}

/* ---------------- Greeting ----------------
   Same minimal pattern as Claude's own homepage greeting: a small accent
   asterisk beside a large serif line of text, no card/border/background —
   just plain type sitting in the space above the composer. */
.explorer-greeting {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 66%;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}

.explorer-greeting-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-2);
}

.explorer-greeting-text {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.claude-shell {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #f4f3ee;
}

/* ---------------- Sidebar ---------------- */
.claude-sidebar {
  flex-shrink: 0;
  width: 272px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f4f3ee;
  border-right: 1px solid rgba(38, 36, 33, 0.1);
  overflow: hidden;
  transition: width var(--transition-base), opacity var(--transition-base), border-color var(--transition-base);
}

.claude-shell.is-collapsed .claude-sidebar {
  width: 0;
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0.9rem 0.75rem;
  flex-shrink: 0;
}

.sidebar-logo {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

.sidebar-top-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.sidebar-icon-btn,
.sidebar-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-icon-btn:hover,
.sidebar-expand-btn:hover {
  background: var(--sidebar-bg-hover);
  color: var(--text-primary);
  border-color: var(--sidebar-border);
}

.sidebar-expand-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
}

/* .sidebar-expand-btn's own `display: inline-flex` above has equal
   specificity to the browser's `[hidden] { display: none }` UA rule, and
   author rules always win over UA rules — so it was rendering even while
   `hidden`, as a stray icon-button-shaped blob over the logo. Force it. */
.sidebar-expand-btn[hidden] {
  display: none;
}

.sidebar-new-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0.75rem 0.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--sidebar-border);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.sidebar-new-btn:hover {
  background: var(--sidebar-bg-hover);
  border-color: var(--accent-1);
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--surface-glass-strong);
  border: 1px solid var(--sidebar-border);
  color: var(--text-muted);
  flex-shrink: 0;
}

.sidebar-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
}

.sidebar-search input:focus-visible {
  outline: none;
}

/* ---------------- Accordion (Projects / Open Source / Experience / Resume & Contact) ---------------- */
.sidebar-accordion {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.5rem 0.75rem;
}

.sidebar-group + .sidebar-group {
  margin-top: 0.15rem;
}

.sidebar-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sidebar-group-header:hover {
  background: var(--sidebar-bg-hover);
}

.sidebar-group-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.sidebar-group-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-group-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.sidebar-group-header.is-open .sidebar-group-chevron {
  transform: rotate(180deg);
}

.sidebar-group-content {
  padding: 0.4rem 0.25rem 0.6rem 0.5rem;
}

.sidebar-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-info-list li {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  font-size: 0.8rem;
}

.sidebar-info-list li strong {
  color: var(--text-primary);
  font-size: 0.82rem;
}

.sidebar-info-list li span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.sidebar-info-links li {
  padding: 0;
}

.sidebar-info-links a {
  display: block;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-info-links a:hover {
  background: var(--sidebar-bg-hover);
  color: var(--text-primary);
}

.sidebar-project-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-project-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.83rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-project-item:hover {
  background: var(--sidebar-bg-hover);
  color: var(--text-primary);
}

.sidebar-project-item.is-active {
  background: var(--sidebar-bg-active);
  color: var(--text-primary);
  font-weight: 600;
}

.sidebar-project-item-icon {
  flex-shrink: 0;
  font-size: 0.9rem;
  width: 18px;
  text-align: center;
}

.sidebar-project-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-empty {
  padding: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sidebar-bottom {
  flex-shrink: 0;
  padding: 0.75rem;
  /* border-top: 1px solid var(--sidebar-border); */
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  transition: background var(--transition-fast);
}

.sidebar-profile:hover {
  background: var(--sidebar-bg-hover);
}

.sidebar-profile img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-profile-info strong {
  font-size: 0.83rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-info small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---------------- Main column ----------------
   .claude-main is a plain (non-scrolling) positioning context — it must
   NOT be the scroller, or an absolutely-positioned child (the composer)
   would still scroll along with the content, because scrolling affects
   everything inside the scrollport regardless of position:absolute when
   the scrolling element is also the containing block. .claude-scroll is
   the ONLY thing that scrolls; .explorer-composer sits outside it, pinned
   against .claude-main instead. */
.claude-main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f4f3ee;
}

.claude-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(1.25rem, 3vh, 2.5rem) clamp(0.75rem, 2vw, 1.25rem);
}

/* ---------------- Thin Claude-style scrollbars ---------------- */
.claude-scroll,
.sidebar-accordion,
.project-view {
  scrollbar-width: thin;
  scrollbar-color: rgba(38, 36, 33, 0.22) transparent;
}

.claude-scroll::-webkit-scrollbar,
.sidebar-accordion::-webkit-scrollbar,
.project-view::-webkit-scrollbar {
  width: 8px;
}

.claude-scroll::-webkit-scrollbar-track,
.sidebar-accordion::-webkit-scrollbar-track,
.project-view::-webkit-scrollbar-track {
  background: transparent;
}

.claude-scroll::-webkit-scrollbar-thumb,
.sidebar-accordion::-webkit-scrollbar-thumb,
.project-view::-webkit-scrollbar-thumb {
  background-color: rgba(38, 36, 33, 0.18);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.claude-scroll:hover::-webkit-scrollbar-thumb,
.sidebar-accordion:hover::-webkit-scrollbar-thumb,
.project-view:hover::-webkit-scrollbar-thumb {
  background-color: rgba(38, 36, 33, 0.32);
}

.claude-scroll .chat-gate-inner {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.claude-sidebar {
  min-height: 0;
}

.sidebar-accordion {
  min-height: 0;
}

/* .explorer-panel/.explorer-response-wrap were originally a flex:1;
   min-height:0 pair sized to host their OWN internal scrollbar. Now that
   claude-main is the single scroll container and this area uses
   overflow:visible, that flex-collapse sizing model is wrong: a
   flex:1/min-height:0 box does not grow to fit overflow:visible content,
   it stays at its flex-resolved (small) height while children merely
   *paint* outside it — so the composer, as the next flex sibling, would
   render where the collapsed box ends, not where the content visually
   ends. Switch both back to normal content-sized boxes. */
.chat-gate-screen .explorer-panel {
  display: block;
  flex: none;
  min-height: 0;
}

.explorer-response-wrap {
  flex: none;
  min-height: 0;
  overflow-y: visible !important;
}

.explorer-response-wrap.is-open {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.chat-gate-screen .explorer-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  margin-inline: 0;
}

/* ---------------- Chat-thread behavior ----------------
   The composer is a fixed bar pinned to the bottom of .claude-main at all
   times — a sibling of the scrollable content, positioned absolute so it
   never depends on how much content is above it (a real chat app's input
   bar, always at the bottom, from the very first load). */
.explorer-composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 0.65rem clamp(0.75rem, 2vw, 1.25rem) clamp(1rem, 3vh, 1.75rem);
  background: #f4f3ee;
  /* border-top: 1px solid var(--border-glass); */
}

.explorer-composer-inner {
  max-width: 1320px;
  margin-inline: auto;
}

.explorer-composer .explorer-chips {
  margin-top: 0;
  margin-bottom: 0.75rem;
  justify-content: flex-start;
  gap: 0.4rem;
}

.explorer-composer .explorer-chip {
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  font-size: 0.74rem;
  gap: 0.35rem;
}

.explorer-composer .explorer-chip-icon {
  width: 20px;
  height: 20px;
  font-size: 0.75rem;
  border-radius: 7px;
}

.explorer-composer .explorer-input-row {
  padding: 0.3rem 0.4rem 0.3rem 1.25rem;
}

.explorer-composer .explorer-input-row input {
  padding-block: 0.6rem;
}

.explorer-composer .explorer-input-row button {
  width: 38px;
  height: 38px;
}

.has-conversation .explorer-intro {
  display: none;
}

/* The fixed composer overlays the bottom of the scroll area, so the
   scrollable content needs its own clearance to avoid hiding behind it. */
.claude-main .chat-gate-inner {
  padding-bottom: 6.5rem;
}

.explorer-turn + .explorer-turn {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-glass);
}

/* User's message — a real "sent" chat bubble, right-aligned, distinct from
   the assistant's plain full-width response below it. */
.explorer-turn-query-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.1rem;
}

.explorer-turn-query {
  display: inline-block;
  max-width: 80%;
  padding: 0.6rem 1rem;
  border-radius: 16px 16px 4px 16px;
  background: rgba(var(--accent-1-rgb), 0.18);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  word-break: break-word;
}

.explorer-turn .explorer-response-title {
  padding-top: 0;
  border-top: none;
}

/* ---------------- Full-page project view ---------------- */
.project-view {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #f4f3ee;
  overflow-y: auto;
  padding: clamp(1.25rem, 3vh, 2.5rem) 1.5rem clamp(2rem, 6vh, 4rem);
}

.project-view-inner {
  max-width: 1080px;
  margin-inline: auto;
}

.project-view-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.project-view-back:hover {
  color: var(--text-primary);
  border-color: var(--accent-1);
}

.project-view-hero {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.project-view-thumb {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-glass);
  flex-shrink: 0;
  background: var(--surface-glass-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.project-view-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.project-view-headline {
  flex: 1;
  min-width: 220px;
}

.project-view-headline h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.project-view-category {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-1);
}

.project-view-tagline {
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

.project-view-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.project-view-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.82rem;
}

.project-view-links a {
  color: var(--accent-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-view-desc {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-glass);
}

.project-view-section {
  margin-bottom: 1.5rem;
}

.project-view-section h3 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.project-view-section p {
  color: var(--text-secondary);
  line-height: 1.65;
}

.project-view-section ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.project-view-section li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.92rem;
}

.project-view-section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-1);
}

@keyframes projectViewRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-view-inner > * {
  animation: projectViewRise 420ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .project-view-inner > * {
    animation: none;
  }
}

/* ---------------- Responsive: sidebar becomes an overlay drawer ---------------- */
@media (max-width: 860px) {
  .claude-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 5;
    width: 78vw;
    max-width: 300px;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.25);
  }

  .claude-shell.is-collapsed .claude-sidebar {
    transform: translateX(-100%);
    opacity: 1;
    pointer-events: auto;
    width: 78vw;
    max-width: 300px;
  }

  .claude-shell:not(.is-collapsed)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 4;
  }

  .claude-main {
    padding-inline: 1rem;
  }
}