/* ════════════════════════════════════════════════════════════════
   site.css — components shared by every page.
   Cursor, sidebar shell, chat trigger and chat panel, plus their
   mobile rules. Tokens, fonts and the reset live in base.css.
   ════════════════════════════════════════════════════════════════ */

/* ═══ CURSOR — one shape that morphs (assets/js/cursor.js). Desktop / fine pointer only. ═══
   A soft circle trails the pointer. Over anything with
   [data-cursor-label] it stretches into a pill showing that label;
   over other clickables it hides so their own affordance shows. */
@media (hover: hover) and (pointer: fine) {
  html { cursor: none; }
}
.ds-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* circle (the cursor.svg look): 26px, #EEEEEE @ 40%, #E3E3E9 outline */
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(238, 238, 238, 0.4);
  border: 1px solid #E3E3E9;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    width 300ms cubic-bezier(0.22, 1, 0.36, 1),
    height 300ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 300ms ease,
    border-color 300ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}
.ds-cursor.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ds-cursor.show.down { transform: translate(-50%, -50%) scale(0.85); }
/* pill — width is set from the label's measured size in cursor.js */
.ds-cursor.is-label {
  height: 32px;
  background: #F7F7F7;
  border-color: #E4E4E4;
}
.ds-cursor-text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #8a8a8a;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms ease;
}
.ds-cursor.is-label .ds-cursor-text {
  opacity: 1;
  transition-delay: 120ms;   /* text appears once the pill has room */
}

/* ═══ SIDEBAR — shell, logo, clock, mobile menu trigger, nav labels, footer slot. ═══ */
/* ── Sidebar — the fixed left column on every page (336px wide). Sticky
   on desktop; on mobile (<900px) it becomes a static top bar. ── */
.sidebar {
  width: calc(var(--sidebar-left) + var(--sidebar-width) + var(--divider-gap));
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  padding: var(--sidebar-inset-y) var(--divider-gap) var(--sidebar-inset-y) var(--sidebar-left);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* Desktop only: its own page-transition layer, so it holds still while
   the page changes. Not on mobile — a view-transition-name makes the
   sidebar a stacking context, which would trap the floating chat ghost
   and the full-screen menu (both inside it) underneath the page content. */
@media (min-width: 901px) {
  .sidebar { view-transition-name: sidebar; }
}
@media (max-width: 900px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.sidebar-logo { display: block; }
.sidebar-logo img {
  width: 44px;
  height: 44px;
  display: block;
}
.sidebar-clock {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Mobile menu trigger — sits where the clock is; hidden on desktop,
   where Sections/Links are always visible inline. */
.sidebar-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.sidebar-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  transition: transform 200ms ease, opacity 200ms ease;
}
.sidebar-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-hamburger.open span:nth-child(2) { opacity: 0; }
.sidebar-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.sidebar-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.sidebar-footer { margin-top: auto; }
.sidebar-credit {
  font-family: "VT323", monospace;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 14px;
  /* always one line — it may run into the sidebar's right padding */
  white-space: nowrap;
}
/* Mobile-only copy inside the burger menu (case studies); see case-study.css. */
.sidebar-credit--menu { display: none; }
/* Typewriter caret while the credit types itself out (site.js). */
.sidebar-credit.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: credit-caret 0.9s steps(1) infinite;
}
@keyframes credit-caret { 50% { opacity: 0; } }
@media (max-width: 900px) {
  .sidebar-clock { display: none; }
  .sidebar-hamburger { display: flex; }

  /* Full-screen takeover (same pattern as the chat panel on
     mobile), not an inline expansion within the sidebar's own
     flow -- opens over everything, .sidebar-top stays above it
     via z-index so the hamburger (now an X) still closes it. */
  .sidebar-top {
    position: relative;
    z-index: 3001;
  }
  .sidebar-nav-menu {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--paper);
    z-index: 3000;
    padding: 90px 24px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.34, 1.06, 0.64, 1);
  }
  .sidebar-nav-menu.open { transform: translateX(0); }
}


/* ═══ CHAT TRIGGER — the pink avatar, its "Chat with Alaa" tooltip, and the credit line. ═══ */
/* ── Chat trigger — an always-open avatar pill under the Sections nav
   showing "Alaa / AI chat assistant", opens the chat panel on click. ── */
.chat-trigger-wrap { margin-bottom: 24px; }
.chat-trigger {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.chat-trigger-avatar {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease;
  /* holds the saved ghost still until the live one draws (site.js) */
  background: center / contain no-repeat;
}
.chat-trigger:hover .chat-trigger-avatar { transform: scale(1.08); }
.chat-trigger[data-chat-tooltip] { overflow: visible; }
.chat-trigger[data-chat-tooltip]::after {
  content: attr(data-chat-tooltip);
  position: absolute;
  left: 92px;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  background: var(--ink);
  color: var(--paper);
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.chat-trigger[data-chat-tooltip]::before {
  content: '';
  position: absolute;
  left: 82px;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  border: 6px solid transparent;
  border-right-color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.chat-trigger[data-chat-tooltip]:hover::after,
.chat-trigger[data-chat-tooltip]:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
@media (max-width: 900px) {
  /* Floating on mobile -- fixed to the bottom-right corner,
     always on top of ordinary page content, instead of sitting
     inline in the sidebar where it could be scrolled out of
     reach or buried under content. Hidden (via .chat-open on
     body) while the panel itself is open. */
  .chat-trigger-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin-bottom: 0;
    z-index: 4000;
  }
}


/* ═══ CHAT PANEL — desktop: a real column that pushes content narrower; mobile: full-screen drawer. ═══ */
/* ── Chat panel — attached to the page as a real layout column
   (a 3rd flex child of .case-layout, alongside .sidebar and
   .content-col), not an overlay/drawer floating over the
   content. Collapsed to 0 width by default. ── */
.chat-overlay { display: none; }
.chat-panel {
  width: 0;
  flex-shrink: 0;
  /* clip, not hidden: it hides the chat while the panel grows, but
     (unlike hidden) doesn't make a scroll container, so the sticky
     .chat-panel-inner still pins to the viewport. */
  overflow: clip;
  border-left: 1px solid var(--line);
  transition: width var(--panel-duration) var(--panel-ease);
}
.chat-panel.open { width: 420px; }
.chat-panel-inner {
  /* position:sticky lives here, not on the animated-width .chat-panel
     itself -- combining sticky + a width transition on the same
     element is a known browser quirk where the layout never
     properly resolves after the transition ends. */
  position: sticky;
  top: 0;
  width: 420px;
  height: 100vh;
  flex-shrink: 0;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.chat-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 150ms, background-color 150ms;
}
.chat-icon-btn:hover {
  color: var(--text-primary);
  background: var(--line);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-welcome {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.chat-suggestion {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 5px;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: "Geist Sans", "Inter", sans-serif;
  transition: background-color 150ms, border-color 150ms;
}
.chat-suggestion:hover {
  background: var(--line);
  border-color: var(--text-muted);
}
.chat-suggestion::before {
  content: "↳ ";
  color: var(--text-muted);
}
.chat-msg {
  max-width: 88%;
  font-size: 15px;
  line-height: 1.6;
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-radius: 5px;
  padding: 10px 15px;
}
.chat-msg-assistant {
  align-self: flex-start;
  color: var(--text-primary);
}
.chat-msg-loading {
  align-self: flex-start;
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic;
}
.chat-msg-error {
  align-self: flex-start;
  color: #b3261e;
  font-size: 14px;
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 5px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: "Geist Sans", "Inter", sans-serif;
  color: var(--text-primary);
  outline: none;
}
.chat-input:focus { border-color: var(--text-muted); }
.chat-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--paper);
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: opacity 150ms;
}
.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (max-width: 900px) {
  /* z-index stack on mobile, lowest to highest:
     sidebar-nav-menu 3000 < sidebar-top 3001 (stays above the
     menu it toggles) < chat-trigger-wrap 4000 (floats above
     everything while closed) < chat-overlay/panel 5000/5001
     (covers the trigger and sidebar-top too once open -- the
     trigger is also hidden via JS while open, belt and braces). */
  .chat-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.15);
    z-index: 5000;
  }
  .chat-overlay.open { display: block; }
  .chat-panel {
    position: fixed;
    top: 0;
    right: -100vw;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    border-left: none;
    box-shadow: -12px 0 32px rgba(0,0,0,0.12);
    z-index: 5001;
    transition: right 280ms cubic-bezier(0.34, 1.06, 0.64, 1);
  }
  .chat-panel.open {
    right: 0;
    width: 100vw;
  }
  .chat-panel-inner { width: 100vw; }
  body.chat-open .chat-trigger-wrap { display: none; }
}