/* Laptop kit: a MacBook Pro-style device holding a 1440×900 logical screen,
 * and the pieces of Kima's own app (kima-ui) drawn on that screen.
 *
 * Sizing: the scene sets --lt-w (a length) on .lt. Every frame part is a
 * fraction of it, so the device scales as one object. The app inside is laid
 * out at 1440×900 in plain px and scaled with --k (= screen width / 1440),
 * which assets/v2/scenes/memoria.js measures. Proportions, as fractions of
 * --lt-w: lid .885 wide; bezel .017 top, .0135 sides, .022 bottom; screen
 * .858 × .53625; hinge .007; base lip .021. Total height .60325 × --lt-w.
 *
 * kima-ui look: tokens from kima-ui/packages/theme/src/tokens.ts (the same
 * ink palette as base.css), shell and page layout from apps/web/src
 * (Layout.tsx sidebar + topbar, LeadDetailPage, CalendarPage week view).
 * Type is set larger than the real app (body 20px instead of 15.5px) so it
 * stays legible once the screen is scaled down. */

.lt {
  /* device finish: not brand colours, so they live here, not in base.css */
  --lt-bezel: #050605;
  --lt-rim: #2b2e2a;
  --lt-rim-hi: #4b4f49;
  --lt-alu-hi: #b3b6af;
  --lt-alu: #757872;
  --lt-alu-lo: #30332e;
  --lt-w: 900px;
  position: relative;
  width: var(--lt-w);
}

/* lid: black bezel with a thin graphite rim */
.lt-lid {
  position: relative;
  width: 88.5%;
  margin: 0 auto;
  padding: calc(var(--lt-w) * .017) calc(var(--lt-w) * .0135) calc(var(--lt-w) * .022);
  background: var(--lt-bezel);
  border-radius: calc(var(--lt-w) * .019) calc(var(--lt-w) * .019) calc(var(--lt-w) * .006) calc(var(--lt-w) * .006);
  box-shadow:
    0 0 0 1px var(--lt-rim),
    0 0 0 2px rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 calc(var(--lt-w) * .05) calc(var(--lt-w) * .09) calc(var(--lt-w) * -.03) rgba(0, 0, 0, .85);
}
.lt-notch {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--lt-w) * .017 - 1px);
  width: calc(var(--lt-w) * .108); height: calc(var(--lt-w) * .0175);
  transform: translateX(-50%);
  background: var(--lt-bezel);
  border-radius: 0 0 calc(var(--lt-w) * .007) calc(var(--lt-w) * .007);
}
.lt-notch::after { /* camera */
  content: ""; position: absolute; left: 50%; top: 42%;
  width: calc(var(--lt-w) * .0045); height: calc(var(--lt-w) * .0045); border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #233448, #0a0d12 70%);
}

/* screen: 16:10, black when off. It does not clip, so the scene can hang
 * annotations outside it; the app clips itself (rounded like the panel). */
.lt-screen {
  position: relative;
  aspect-ratio: 1440 / 900;
  background: #000;
  border-radius: calc(var(--lt-w) * .009) calc(var(--lt-w) * .009) calc(var(--lt-w) * .003) calc(var(--lt-w) * .003);
}
.lt-glare { /* a faint diagonal reflection on the glass */
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .015) 30%, rgba(255, 255, 255, 0) 46%);
}

/* hinge + aluminium base lip with the thumb scoop */
.lt-hinge {
  display: block; width: 84%; height: calc(var(--lt-w) * .007); margin: 0 auto;
  background: linear-gradient(#1b1d1a, #0a0b0a);
}
.lt-base {
  position: relative; display: block; width: 100%; height: calc(var(--lt-w) * .021);
  background: linear-gradient(var(--lt-alu-hi) 0%, var(--lt-alu) 38%, var(--lt-alu-lo) 100%);
  border-radius: calc(var(--lt-w) * .002) calc(var(--lt-w) * .002) calc(var(--lt-w) * .04) calc(var(--lt-w) * .04) / calc(var(--lt-w) * .002) calc(var(--lt-w) * .002) calc(var(--lt-w) * .018) calc(var(--lt-w) * .018);
}
.lt-base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 46%; transform: translateX(-50%);
  background: linear-gradient(var(--lt-alu-lo), var(--lt-alu));
  border-radius: 0 0 calc(var(--lt-w) * .008) calc(var(--lt-w) * .008);
}
.lt-base::after { /* contact shadow */
  content: ""; position: absolute; left: 6%; right: 6%; top: 70%; height: calc(var(--lt-w) * .03); z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
  filter: blur(calc(var(--lt-w) * .006));
}

/* ------------------------------------------------------------------ */
/* kima-ui on the screen: the app shell (sidebar + topbar + page).      */
/* Everything below is in logical px of the 1440×900 screen.           */
/* ------------------------------------------------------------------ */

.ku-app {
  position: relative; width: 1440px; height: 900px; overflow: hidden;
  transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--k, .6)); transform-origin: 0 0; /* --ox/--oy: pan inside the screen */
  display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr);
  background: var(--canvas); color: var(--ink);
  font: 400 21px/1.42 var(--sans); letter-spacing: 0;
  border-radius: 14px 14px 5px 5px;
}
.ku-app svg { display: inline-block; flex: none; }
.ku-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* sidebar: brand + nav, the active item in lime with a left rule (kima-ui .nav-item--active) */
.ku-side {
  grid-row: 1 / 3; display: flex; flex-direction: column; gap: 30px;
  padding: 26px 16px; background: var(--surface); border-right: 1px solid var(--hair);
}
.ku-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.ku-brand img { width: 34px; height: 34px; }
.ku-brand span { font: 400 40px/1 var(--serif); letter-spacing: .01em; }
.ku-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ku-nav-i {
  display: flex; align-items: center; gap: 12px; padding: 13px 12px;
  border-left: 3px solid transparent; color: var(--ink-2); font-size: 19px; font-weight: 500; white-space: nowrap;
}
.ku-nav-i .ku-ico { width: 22px; height: 22px; color: var(--muted); }
.ku-nav-i.is-active { border-left-color: var(--signal); background: var(--signal-wash); color: var(--signal); }
.ku-nav-i.is-active .ku-ico { color: var(--signal); }

/* topbar: workspace on the left (clear of the notch), the user on the right */
.ku-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; background: var(--surface); border-bottom: 1px solid var(--hair);
}
.ku-ws { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 18px; }
.ku-ws .ku-ico { width: 20px; height: 20px; color: var(--muted); }
.ku-me { width: 38px; height: 38px; border-radius: 50%; background: var(--raised); border: 1px solid var(--hair-2); }

/* page */
.ku-page { position: relative; min-width: 0; min-height: 0; padding: 32px 44px 34px; }
.ku-head { display: flex; align-items: center; gap: 22px; }
.ku-head-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ku-title { font: 400 54px/1.04 var(--serif); letter-spacing: -.015em; margin: 0; }
.ku-badges { display: flex; align-items: center; gap: 10px; }
.ku-actions { margin-left: auto; display: flex; gap: 10px; }
.ku-btn {
  width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-2); border-radius: 2px; color: var(--ink-2);
}
.ku-rule { height: 1px; background: var(--hair); margin: 24px 0 26px; }

/* small pills: stage badge (outlined, stage colour), corretor tag (hairline) */
.ku-stage, .ku-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px; border-radius: 999px;
  font-size: 17px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.ku-stage { color: var(--signal); border: 1px solid var(--signal); }
.ku-tag { color: var(--ink-2); border: 1px solid var(--hair-2); padding-left: 5px; }

/* avatars (webp, square, cropped to a circle) */
.ku-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--raised); }
.ku-av--xs { width: 26px; height: 26px; }
.ku-av--lg { width: 78px; height: 78px; }

/* card + messages. Kima's own voice is lime in kima-ui; here it is the lime
 * wash, so the one solid-lime highlight on screen can carry the signal. */
.ku-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 2px; padding: 20px; }
.ku-card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 20px/1.2 var(--sans); }
.ku-card-title .ku-ico { width: 22px; height: 22px; color: var(--muted); }
.ku-msg { max-width: 86%; padding: 10px 14px; border-radius: 3px; font-size: 19.5px; line-height: 1.42; margin: 0; }
.ku-msg--in { align-self: flex-start; background: var(--hair); }
.ku-msg--out { align-self: flex-end; background: var(--signal-wash); box-shadow: inset 0 0 0 1px rgba(205, 245, 70, .16); }

/* week view (CalendarPage): bordered day columns, visit chips with a blue rule */
.ku-day { border: 1px solid var(--hair); border-radius: 2px; padding: 10px; min-width: 0; }
.ku-day-h { margin: 0 0 12px; font-size: 18px; color: var(--muted); white-space: nowrap; }
.ku-visit {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 13px; align-items: start;
  padding: 13px 14px; border-left: 4px solid var(--info); border-radius: 2px; background: var(--hair);
}
.ku-visit .ku-av { width: 46px; height: 46px; grid-row: 1 / 5; margin-top: 2px; }
.ku-visit-t { font: 500 17px/1.35 ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--muted); }
.ku-visit-n { font-size: 22px; font-weight: 500; line-height: 1.3; }
.ku-visit-w, .ku-visit-p { font-size: 18px; line-height: 1.35; color: var(--ink-2); }
.ku-ok { font-style: normal; color: var(--success); }