/* The persistent workspace is desktop-only. Smaller screens keep their layout. */
.portfolio-showcase {
  display: none;
}

.followup-desktop-label {
  display: none;
}

@media (min-width: 1024px) {
  :root {
    --bg-page: var(--ink-0);
    --desktop-surface: var(--ink-1);
  }

  .loader.desktop-layout {
    /* The chat panel reads as a phone: a phone screen's width (360px) at
       any monitor size, and never wider than 9:16 of the panel's own height
       on a short window. The sidebar is the panel plus its gap either side. */
    --sidebar-width: calc(min(360px, (100dvh - 32px) * 9 / 16) + 32px);
    --workspace-panel-gap: 16px;
    --workspace-panel-radius: var(--radius-lg);
    --workspace-panel-border: 1px solid var(--line-faint);
    --chat-surface-padding: clamp(16px, 1.2vw, 24px);
    --sidebar-inset: calc(var(--workspace-panel-gap) + var(--chat-surface-padding));
    --showcase-padding: clamp(28px, 3vw, 56px);
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-page);
  }

  /* The chat sits on the stage itself, no panel: a full-height hairline on
     its right edge sets it apart. */
  .loader.desktop-layout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sidebar-width) - 1px);
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }

  .loader.desktop-layout .mascot-hold,
  .loader.desktop-layout.has-preview .mascot-hold {
    --m-y: 0px;
    --m-scale: 1;
    top: calc(var(--workspace-panel-gap) + clamp(28px, 6dvh, 64px));
    left: calc(var(--sidebar-width) / 2);
    width: clamp(176px, 15vw, 220px);
    transition: none;
  }

  .loader.desktop-layout .assistant-console {
    --chat-width: calc(var(--sidebar-width) - var(--sidebar-inset) * 2);
    --desktop-composer-height: 54px;
    --suggestions-bottom: calc(var(--chat-surface-padding) + var(--desktop-composer-height) + 16px);
    inset: var(--workspace-panel-gap) auto var(--workspace-panel-gap) var(--sidebar-inset);
    width: var(--chat-width);
    transform: none;
    animation: none;
    opacity: 1;
    transition: none;
    pointer-events: none;
  }

  .loader.desktop-layout .assistant-console::after {
    display: none;
  }

  .loader.desktop-layout .assistant-console .thread {
    position: absolute;
    top: calc(clamp(28px, 6dvh, 64px) + clamp(176px, 15vw, 220px) * 0.625 + 28px);
    bottom: calc(var(--suggestions-bottom) + var(--followup-rail-h, 76px) + 24px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 24px;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    scrollbar-width: none;
    transition: none;
  }

  .loader.desktop-layout .assistant-console:not(.has-user) .thread {
    top: 50%;
    bottom: auto;
    padding: 0;
    transform: translateY(-50%);
    overflow: visible;
  }

  /* Three shared text styles for the desktop home and conversation. */
  .loader.desktop-layout .showcase-name,
  .loader.desktop-layout .assistant-console:not(.has-user) .agent-message {
    font-size: clamp(28px, 2.1vw, 32px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .loader.desktop-layout .showcase-role,
  .loader.desktop-layout .followup,
  .loader.desktop-layout .contact-chip,
  .loader.desktop-layout .assistant-console .prompt-input,
  .loader.desktop-layout .assistant-console.has-user .agent-message,
  .loader.desktop-layout .assistant-console .user-message {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
  }

  .loader.desktop-layout .assistant-console.has-user .agent-message {
    line-height: 1.55;
  }

  .loader.desktop-layout .case-card-title {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
  }

  .loader.desktop-layout .assistant-console:not(.has-user) .agent-message {
    text-wrap: balance;
  }

  .loader.desktop-layout .assistant-console .composer,
  .loader.desktop-layout .assistant-console .followup-rail {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    pointer-events: auto;
    transition: none;
  }

  .loader.desktop-layout .assistant-console .composer {
    bottom: var(--chat-surface-padding);
  }

  .loader.desktop-layout .assistant-console .followup-rail {
    bottom: var(--suggestions-bottom);
  }

  .loader.desktop-layout .assistant-console .followups {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    margin: 0;
    padding: 0;
    max-height: 35dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .loader.desktop-layout .assistant-console:not(.has-user) .followups {
    max-height: min(35dvh, calc(50dvh - var(--workspace-panel-gap) - var(--suggestions-bottom) - 48px));
  }

  .loader.desktop-layout .followup {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    width: 100%;
    max-width: none;
    min-height: 36px;
    padding: 8px 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--text-soft);
    transition: color 160ms var(--ease-out);
  }

  .loader.desktop-layout .followup::before {
    content: "";
    width: 18px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d=%22M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z%22/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d=%22M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z%22/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  }

  .loader.desktop-layout .followup-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .loader.desktop-layout .followup-arrow,
  .loader.desktop-layout .followup-compact-label {
    display: none;
  }

  .loader.desktop-layout .followup-desktop-label {
    display: inline;
  }

  .loader.desktop-layout .followup:hover,
  .loader.desktop-layout .followup:active,
  .loader.desktop-layout .followup:focus-visible {
    color: var(--text-primary);
  }

  .loader.desktop-layout .followup:focus-visible {
    outline: 1px solid rgba(var(--paper-rgb), 0.6);
    outline-offset: -1px;
  }

  .loader.desktop-layout .followup-scroll {
    display: none;
  }

  .loader.desktop-layout .followup[data-enrichment="contacts"],
  .loader.desktop-layout .followup[data-download="cv"] {
    display: none;
  }

  /* Reply attachments stay inside the narrow conversation column. */
  .loader.desktop-layout .assistant-console .case-preview-shell {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .loader.desktop-layout .assistant-console .case-preview-rail {
    padding: 6px 0 10px;
    scroll-padding: 0;
  }

  .loader.desktop-layout .assistant-console .is-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .loader.desktop-layout .assistant-console .is-grid .case-card {
    grid-column: auto;
  }

  .loader.desktop-layout .portfolio-showcase {
    display: block;
    position: absolute;
    inset: 0 0 0 var(--sidebar-width);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--showcase-padding);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--paper-rgb), 0.18) transparent;
  }

  .showcase-header {
    display: flex;
    flex-wrap: nowrap;
    /* A grid item: without this its unwrapped row would widen the column. */
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
  }

  /* The name and role keep their line; the links make room for them. */
  .showcase-identity {
    min-width: 0;
    white-space: nowrap;
  }

  /* Never wraps: what does not fit folds into the chevron (.showcase-more). */
  .showcase-links {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .showcase-links .contact-chip {
    gap: 7px;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .loader.desktop-layout .showcase-links .contact-icon-link {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
  }

  .showcase-links .contact-icon-link .contact-chip-icon {
    width: 20px;
    height: 20px;
  }

  .showcase-links .contact-icon-link .contact-chip-label {
    display: none;
  }

  .showcase-name {
    margin: 0 0 8px;
    color: var(--text-primary);
  }

  .showcase-role {
    margin: 0;
    color: var(--text-soft);
  }

  .portfolio-showcase .home-work {
    width: 100%;
    margin: 0;
  }

  .portfolio-showcase .home-work-grid {
    gap: 20px;
  }

  .portfolio-showcase .home-work-label {
    display: none;
  }


  .loader.desktop-layout .case-preview-panel {
    inset: var(--workspace-panel-gap) var(--workspace-panel-gap) var(--workspace-panel-gap) calc(var(--sidebar-width) + var(--workspace-panel-gap));
    background: var(--desktop-surface);
    border: var(--workspace-panel-border);
    border-radius: var(--workspace-panel-radius);
    transform: translate3d(0, 8px, 0);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }

  .loader.desktop-layout.has-preview .case-preview-panel {
    transform: none;
  }

  .loader.desktop-layout.has-preview .portfolio-showcase {
    visibility: hidden;
  }

  .loader.desktop-layout .home-scroll-fade {
    display: none;
  }

  /* Surfaces, card styling and focus states live in theme.css. */
}

/* Weighted rows fill the available width regardless of the visible case count.
   The controller preserves card height and adds scrolling when more rows fit. */
@media (min-width: 1024px) {
  .loader.desktop-layout .portfolio-showcase {
    display: grid;
    grid-template-rows: auto max-content;
    align-content: start;
    gap: clamp(20px, 3dvh, 32px);
    overflow-y: auto;
  }

  .portfolio-showcase .showcase-header {
    margin-bottom: 0;
  }

  .portfolio-showcase .home-work {
    min-height: 0;
  }

  .portfolio-showcase .home-work-grid {
    --showcase-gap: clamp(12px, 1.4vw, 20px);
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--showcase-gap);
    padding: 3px;
  }

  /* The controller assigns rows; each card's width is its share of its own
     row, in CSS, so a row always fits the current width even before the
     controller runs again on resize. The 1px slack keeps subpixel rounding
     from wrapping a row; flex-grow hands it back by the same weights. */
  .portfolio-showcase .home-work-grid[data-count] .case-card {
    flex: var(--case-weight, 2) 0
      calc((100% - var(--case-row-gaps, 0) * var(--showcase-gap)) * var(--case-share, 1) - 1px);
    min-width: 0;
    height: var(--showcase-row-height, 280px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .portfolio-showcase .home-work-grid .case-card[hidden] {
    display: none;
  }

  .loader.desktop-layout .portfolio-showcase .home-work-grid[data-count] .case-preview-art {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* Showcase card titles hold a fixed line count set by the layout controller
   from the card's shape: one line on wide cards, two on squarish, three on
   tall narrow ones. The caption height never changes with the text, so the
   grid does not jump. */
@media (min-width: 1024px) {
  .loader.desktop-layout .portfolio-showcase .case-card-title {
    -webkit-line-clamp: var(--case-title-lines, 2);
    line-clamp: var(--case-title-lines, 2);
    height: calc(21px * var(--case-title-lines, 2));
    min-height: 0;
  }
}