/* Borishim: the iPhone as large as the screen takes, below the notch, with
   Home and the App Switcher under it. */
:root {
  color-scheme: dark;
  --capsule: rgba(31, 31, 33, 0.94);
  --edge: rgba(255, 255, 255, 0.13);
  --group: rgba(255, 255, 255, 0.06);
  --group-edge: rgba(255, 255, 255, 0.07);
  --secondary: rgba(235, 235, 245, 0.6);
  --blue: #0a84ff;
  --cell: #1c1c1e;
  --turn: 0.42s cubic-bezier(0.65, 0, 0.35, 1);
  /* The notch and the home indicator, for the layout in app.js. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Pretendard",
    "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden;
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.ic { fill: currentColor; display: block; }

/* Sign-in */
#gate {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  text-align: center;
}
#gate .tile {
  width: 84px; height: 84px; border-radius: 20px; background: var(--cell); display: flex;
  align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 0 0 1px var(--edge);
}
#gate h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 22px 0 6px; }
#gate p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--secondary); max-width: 320px; }
.primary {
  margin-top: 30px; width: min(320px, 100%); height: 52px; border-radius: 14px; background: var(--blue);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; transition: opacity 0.15s, transform 0.15s;
}
.primary:active { transform: scale(0.98); opacity: 0.85; }
.primary:disabled { opacity: 0.4; }
#gate .error { margin-top: 14px; color: #ff6961; min-height: 1.45em; }

/* The phone */
#stage { position: fixed; inset: 0; }
#phone {
  position: absolute; left: 0; top: 0; background: #000; overflow: hidden; transform-origin: 50% 50%;
  will-change: transform;
}
#phone.animate { transition: transform var(--turn), width var(--turn), height var(--turn), left var(--turn), top var(--turn), border-radius var(--turn), clip-path var(--turn); }
.control.animate { transition: left var(--turn), top var(--turn), background 0.12s, transform 0.12s; }
#screen { width: 100%; height: 100%; display: block; }
#touch { position: absolute; touch-action: none; cursor: default; }

/* Notes over the phone: connecting, asleep, ... */
#note {
  position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: opacity 0.2s;
}
#note.gone { opacity: 0; }
#note.tap { pointer-events: auto; cursor: pointer; }
#note .card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 26px; max-width: 86%;
  border-radius: 22px; background: rgba(28, 28, 30, 0.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px var(--edge); text-align: center;
}
#note .card b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
#note .card span { font-size: 14px; color: var(--secondary); line-height: 1.4; }
#note .card .action { color: var(--blue); font-weight: 600; font-size: 15px; }
.spinner {
  width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.85); animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Home and the App Switcher under the phone, at its two ends (and, on a
   computer, typing between them). */
.control {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 23px;
  background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center; touch-action: manipulation;
  transition: background 0.12s, transform 0.12s;
}
.control:active { background: rgba(255, 255, 255, 0.24); transform: scale(0.94); }
@media (hover: hover) { .control:hover { background: rgba(255, 255, 255, 0.16); } }


/* Typing */
#sheet {
  position: absolute; left: 0; right: 0; padding: 12px calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left));
  background: rgba(28, 28, 30, 0.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-radius: 22px 22px 0 0; box-shadow: inset 0 1px 0 var(--edge);
}
#sheet .row { display: flex; align-items: center; gap: 8px; }
#sheet .row + .row { margin-top: 10px; }
#sheet input {
  flex: 1; min-width: 0; height: 44px; border-radius: 22px; border: 0; outline: none; padding: 0 16px;
  background: #2c2c2e; color: #fff; font: inherit; font-size: 17px; -webkit-user-select: text; user-select: text;
}
#sheet input::placeholder { color: rgba(235, 235, 245, 0.3); }
#sheet .round { width: 44px; height: 44px; border-radius: 22px; background: var(--blue); display: flex; align-items: center; justify-content: center; }
#sheet .keys button {
  height: 40px; min-width: 52px; padding: 0 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.92);
}
#sheet .keys button:active { background: rgba(255, 255, 255, 0.22); }
#sheet .spacer { flex: 1; }