/* Panel chrome matches Figma's real "Keyboard/Default" frame (node
   937:6160's own wrapper): dark translucent bg + blur + a faint inset
   highlight/shadow pair that gives the whole keyboard its own subtle
   glass edge, distinct from --glass-blur (that token's for header/nav
   glass, this is the keyboard's own real fetched values). */
/* position:absolute (not fixed) — mounted inside .figma-frame, same
   convention as every other overlay in this app (#chat-thread-root,
   #team-modal-root, etc., see index.html). position:fixed positions
   against the real browser viewport, not the phone frame, which on a wide
   desktop monitor would dock the keyboard to the actual bottom of the
   screen instead of the bottom of the phone mockup — this project already
   hit and fixed this exact bug once for modals. */
.keyboard-mockup {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  box-sizing: border-box;
  width: 100%;
  /* 80px bottom padding (not the earlier guessed 34px) — real fetched
     value from node 329:17964's own pb-[80px], leaves room for the
     absolutely-positioned emoji icon below the last row. */
  padding: 8px 4px 80px;
  background-color: rgba(28, 28, 28, 0.86);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  /* Top corners (27px) match Figma's real fetched value. Bottom corners
     were also a real fetched value (62.16px) but are flattened to 0 here
     per explicit instruction — the keyboard sits flush against the phone
     frame's own bottom edge, so a rounded bottom read as visibly wrong
     there regardless of what Figma's own isolated component shows. */
  border-radius: 27px 27px 0 0;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(100%);
  transition: transform var(--transition-standard);
  pointer-events: none;
}

.keyboard-mockup--visible {
  pointer-events: auto;
  transform: translateY(0);
}

.keyboard-layout {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.keyboard-layout--active {
  display: flex;
}

.keyboard-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.5px;
  height: 45px;
  padding: 0 3px;
}

.keyboard-row--bottom {
  gap: 6px;
}

/* Real fetched two-level gap for shift/letters/backspace (node 329:17964):
   14px between [shift, letter-group, backspace], 6.5px between the letters
   WITHIN that group — a single flattened 6.5px gap (the first build's
   approach) bunched the letters visibly closer to shift/backspace than
   Figma actually shows. */
.keyboard-row--third {
  gap: 14px;
}

.keyboard-row__group {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  gap: 6.5px;
}

.keyboard-key {
  box-sizing: border-box;
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  border: none;
  border-radius: 8.5px;
  background-color: rgba(255, 255, 255, 0.27);
  color: #fff;
  font-family: -apple-system, "SF Compact Text", "Plus Jakarta Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: default;
  position: relative;
  transition: background-color var(--transition-standard);
}

/* Default active-state flash for non-letter keys — Figma's own fetched
   "Keyboard/Default" instance doesn't show a pressed state for these (only
   the letter key's Active variant is real fetched data), so this is a
   reasonable general iOS-accurate affordance, not a literal Figma value. */
.keyboard-key--active {
  background-color: rgba(255, 255, 255, 0.45);
}

/* A letter/digit/symbol key's real Active variant (node 329:17964,
   dark="Active") has NO background class at all — fully transparent, not
   lighter/darker — while its popup shows above it. Applies to every
   poppable key (letters, numbers, symbols), not letters only — real iOS
   magnifies digits/symbols on press too. The first build's lighter-flash
   treatment stays correct for the special/action keys above (shift,
   backspace, space, return, toggle) which have no popup. */
.keyboard-key--letter.keyboard-key--active,
.keyboard-key--symbol.keyboard-key--active {
  background-color: transparent;
}

.keyboard-key__label {
  font-size: 25px;
  line-height: normal;
  pointer-events: none;
}

.keyboard-key--symbol .keyboard-key__label,
.keyboard-key--special .keyboard-key__label {
  font-size: 20px;
  text-transform: uppercase;
}

.keyboard-key--shift,
.keyboard-key--backspace {
  flex: 0 0 42px;
}

.keyboard-key--space {
  flex: 1 0 0;
}

/* Shift/backspace/return draw a real inline SVG icon (currentColor, so it
   inherits the key's own white text color) instead of a Unicode glyph
   character — Unicode symbols like the ones tried first (⌃/⌫/⏎) don't
   render reliably across every OS/font combination (reported blank on
   Chrome); an SVG path always paints the same regardless of installed
   fonts. */
.keyboard-key--icon {
  color: #fff;
}

/* Real fetched value (node 372:9519's own KeyAction, type="Return",
   active="Off") is 50% opacity by default in Figma — dropped here per
   explicit instruction: keep this key's current full-brightness look
   (same colour as every other key), not the Figma instance's own
   opacity-50 "inactive, nothing to submit" treatment for an empty field.
   This app has no real submit-state to gate it on anyway. */

/* The chat-name screen's own real keyboard (node 198:10670) has a
   structurally different bottom row — see keyboard-mockup.js for the two
   full row markups, both always in the DOM. This class (set on
   .keyboard-mockup by js/app.js when a "done"-variant input is focused)
   swaps which one is visible. */
.keyboard-row--bottom-done {
  display: none;
}

.keyboard-mockup--done .keyboard-row--bottom-default {
  display: none;
}

.keyboard-mockup--done .keyboard-row--bottom-done {
  display: flex;
}

/* Real fetched positions (both keyboard instances' own "language"/"mic"
   layers, metadata coords on the 390x306 keyboard frame — identical on
   372:9519 and 198:10670): language left:27 bottom:25.5 31x31, mic
   right:28.5 bottom:24 27x32. Shared by both variants, always visible. */
.keyboard-mockup__language,
.keyboard-mockup__mic {
  position: absolute;
  pointer-events: none;
}

.keyboard-mockup__language {
  left: 27px;
  bottom: 25.5px;
  width: 31px;
  height: 31px;
}

.keyboard-mockup__mic {
  right: 28.5px;
  bottom: 24px;
  width: 27px;
  height: 32px;
}

/* Real fetched grouping (both keyboard instances): 123 + emoji sit
   together as two equal-width keys inside one 91px-wide group with their
   own 6px internal gap, shared by both variants. */
.keyboard-row__group--secondary {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 0 0 91px;
  gap: 6px;
}

.keyboard-key--secondary {
  flex: 1 0 0;
  height: 100%;
}

/* 27x27 real fetched size, shared by both variants. */
.keyboard-key--emoji img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
}

/* Real fetched width (44px) for the period key, shared by both variants. */
.keyboard-key--period {
  flex: 0 0 44px;
}

.keyboard-key--period .keyboard-key__label {
  font-size: 17px;
  text-transform: none;
}

/* Real fetched values (node 198:10670's own "Key/Action" instance): 64px
   wide, bg #0091ff (a real literal — get_variable_defs on this node
   returned nothing bound, so this isn't a guessed color). The checkmark
   itself is the user's real uploaded asset (img/keyboard/check.svg, see
   CHECK_ICON_SVG in keyboard-mockup.js), rendered at its own real 13x13
   size via .keyboard-key--icon's color:#fff. Tapping this key blurs the
   real input (js/app.js) — reuses the existing blur→hideKeyboardMockup
   wiring, this is the one bottom-row key in either variant that actually
   DOES something instead of being a visual-only affordance. */
.keyboard-key--done {
  flex: 0 0 64px;
  background-color: #0091ff;
}

/* Real fetched width (64px, node 372:9519's own "Key/Action") for the
   default variant's return key — same width as the done variant's own
   action key, but keeps the app's existing plain-arrow look (default
   .keyboard-key background, no color override) per explicit instruction:
   not blue, not the Figma instance's own opacity-50 "inactive" treatment
   for an empty field — same colour/brightness as every other key. */
.keyboard-key--return {
  flex: 0 0 64px;
}

/* Poppable keys (letters, numbers, symbols) hide their own flat label
   while the magnified popup is showing — real iOS does this too (the key
   itself goes visually blank, all the attention on the bubble above it). */
.keyboard-key--letter.keyboard-key--active .keyboard-key__label,
.keyboard-key--symbol.keyboard-key--active .keyboard-key__label {
  opacity: 0;
}

/* The popup bubble: two real Figma-exported SVG shapes stacked (the outer
   glass panel + inner highlight), scaled proportionally to the key's own
   size rather than Figma's fixed px offsets (58.7x121.9px for a ~33px-wide
   reference key) — this layout is flex/responsive, so key width isn't
   fixed the way Figma's reference frame was; proportional scaling keeps
   the same visual relationship at any actual rendered key width.
   bottom:0 (anchored to the KEY'S OWN bottom edge), not bottom:100% (which
   floats the whole popup above the key with a visible gap) — Figma's real
   offsets (left:-12.9px, top:-75.67px, height:121.86px on a ~46.4px-tall
   key) put the shape's own bottom edge at ~46.19px from the key's top, i.e.
   flush with the key's BOTTOM, not its top: the bubble grows up out of the
   key's own position, covering it, rather than sitting in the empty space
   above it. transform-origin bottom-center means scaling 0.4→1 keeps that
   bottom edge anchored throughout — no separate translate needed. */
.keyboard-key__popup {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 179%;
  aspect-ratio: 58.7 / 121.9;
  transform: translateX(-50%) scale(0.4);
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  /* 100ms, not the earlier 200ms — real key-press feedback reads as
     sluggish at 200ms, especially shrinking back down on release (which,
     combined with app.js now clearing the active state on the literal
     mouseup instead of a 600ms fallback timer, means this shrink now both
     starts immediately AND finishes fast). */
  transition: transform 100ms ease-out, opacity 100ms ease-out;
}

.keyboard-key--letter.keyboard-key--active .keyboard-key__popup,
.keyboard-key--symbol.keyboard-key--active .keyboard-key__popup {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.keyboard-key__popup-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.keyboard-key__popup-bg--1 {
  background-image: url("../img/keyboard/key-popup-bg2.svg");
}

.keyboard-key__popup-bg--2 {
  background-image: url("../img/keyboard/key-popup-bg1.svg");
}

.keyboard-key__popup-label {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 235%;
  line-height: normal;
  pointer-events: none;
}