/*
 * The simulated phone screen (chat-app.ts): adopted inside its shadow root,
 * so the page's styles never reach it and these never leak out. The page
 * around it (stage, captions, modals) is chat-simulator.css.
 *
 * .ws-*   the screen (iOS chat app, light mode, 1 CSS px = 1 pt).
 * .kb-*   the fake iOS keyboard.
 */

/* Cut every inherited property at the boundary; the screen sets its own. */
:host {
  all: initial;
  display: block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ---------- Phone screen ---------- */

.ws-screen {
  --ws-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  /* "White" surfaces stay a hair below white, so highlights at pure white
     (and brighter on HDR screens, below) read as brighter than the surface. */
  --ws-surface: #fbfbfc;
  --ws-hl: #fff;
  --ws-glass-face: rgba(246, 246, 247, 0.8);
  --ws-glass-rim: rgba(0, 0, 0, 0.15);
  --ws-green: #45a663;
  --ws-green-text: #2c9655;
  --ws-out: #dcf9d2;
  --ws-in: #fbfbfb;
  --ws-wall: #f3efe8;
  --ws-label: #000;
  --ws-secondary: #85858b;
  --ws-separator: rgba(60, 60, 67, 0.16);
  --ws-read: #3579f3;
  --ws-top: 58px;
  --ws-home-space: 26px;
  position: relative;
  width: 402px;
  height: 874px;
  /* clip, not hidden: a hidden overflow can still be scrolled (by focus),
     which would shift the screen inside the phone. */
  overflow: hidden;
  overflow: clip;
  border-radius: 55px;
  background: var(--ws-surface);
  color: var(--ws-label);
  font-family: var(--ws-font);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  backface-visibility: hidden;
}

.ws-screen *,
.ws-screen *::before,
.ws-screen *::after {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.ws-screen .ws-input,
.ws-screen .ws-caption-input {
  -webkit-user-select: text;
  user-select: text;
}

/* The fingertip cursor (finger-cursor.ts) replaces the native one while
   the mouse is over the screen. */
.ws-screen.has-finger,
.ws-screen.has-finger * {
  cursor: none !important;
}

/* Clip with clip-path too: border-radius + overflow doesn't clip composited
   children (backdrop filters, transforms) inside a 3D-transformed element in
   WebKit. Same radius as the phone's screen opening (phone-body.ts). */
.ws-screen.ws-mode-phone {
  clip-path: inset(0 round 55px);
}

.ws-screen.ws-mode-full {
  --ws-top: 10px;
  /* Room like the phone's home-indicator area: at least 12 px, more where
     the device has a bottom inset (viewport-fit=cover reports it). */
  --ws-home-space: max(12px, env(safe-area-inset-bottom));
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.ws-screen button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

/* Form controls inside the phone: no browser chrome (iOS shows only the
   caret); the pills around them carry the look. */
:where(.ws-screen) input,
:where(.ws-screen) textarea {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
  color: inherit;
  font: inherit;
  caret-color: var(--ws-green);
}

:where(.ws-screen) input[type="search"]::-webkit-search-decoration,
:where(.ws-screen) input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Keyboard navigation only: a soft ring (on the pill, for text fields). */
.ws-screen :focus-visible:not(input, textarea) {
  outline: 2px solid rgba(10, 132, 255, 0.7);
  outline-offset: 2px;
}

.ws-screen input:focus-visible,
.ws-screen textarea:focus-visible {
  outline: none;
}

.ws-gif-search:has(input:focus-visible),
.ws-field:has(textarea:focus-visible) {
  box-shadow: 0 0 0 2px rgba(69, 166, 99, 0.35);
}

.ws-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
}

@media (dynamic-range: high) {
  .ws-screen {
    --ws-hl: color(display-p3 1 1 1);
    --ws-surface: #f9f9fa;
    --ws-glass-face: rgba(243, 243, 245, 0.82);
  }
}

/* Liquid Glass: blurred, saturated, translucent face; a thin crisp rim; a
   soft wide shadow; and specular crescents along the top and bottom edges,
   the brightest thing on screen. */
.glass,
.ws-screen button.glass {
  position: relative;
  background: var(--ws-glass-face);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  backdrop-filter: blur(14px) saturate(1.8);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 0 0 0.5px var(--ws-glass-rim);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.6px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--ws-hl) 0%,
    rgba(255, 255, 255, 0.35) 16%,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 0.5) 86%,
    var(--ws-hl) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}

.glass-green,
.ws-screen button.glass-green {
  --ws-glass-rim: rgba(30, 110, 55, 0.35);
  background: linear-gradient(180deg, #5bb575, #47a062);
  color: #fff;
}

.glass-green::before {
  background: linear-gradient(
    180deg,
    rgba(214, 255, 222, 0.95) 0%,
    rgba(214, 255, 222, 0.3) 16%,
    rgba(214, 255, 222, 0) 34%,
    rgba(214, 255, 222, 0) 66%,
    rgba(214, 255, 222, 0.4) 86%,
    rgba(214, 255, 222, 0.95) 100%
  );
}

/* Status bar, island, home indicator */
.ws-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: 54px;
  pointer-events: none;
}

.ws-status-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 8px 34px 0 42px;
}

.ws-status-time {
  width: 54px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-align: center;
}

.ws-status-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-signal {
  width: 18px;
  height: 12px;
}

.ws-wifi {
  width: 17px;
  height: 12px;
}

.ws-battery {
  position: relative;
  display: grid;
  place-items: center;
  width: 27px;
  height: 13px;
  margin-right: 3px;
  border-radius: 4px;
  background: #000;
  color: var(--ws-surface);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1;
}

.ws-battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 4.5px;
  width: 1.6px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: rgba(0, 0, 0, 0.45);
}

/* The island's size and place follow the phone's drawings (20.76 × 6.07 mm,
   centered 7.99 mm below the top edge; 1 px = 0.1656 mm on this screen). */
.ws-island {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 41;
  width: 125px;
  height: 37px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #000;
  pointer-events: none;
}

/* The hardware under the island, barely visible: IR camera, dot projector,
   front camera (with a faint coating reflection). Black at a glance. */
.ws-island span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.ws-island-ir {
  left: 37px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 45%, #0d0d10, #060607 70%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.03);
}

.ws-island-dots {
  left: 58px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #0b0b0e 0 40%, #070708 41%);
}

.ws-island-camera {
  right: 13px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(150, 140, 255, 0.45) 0 0.8px, rgba(150, 140, 255, 0) 1.6px),
    radial-gradient(circle at 60% 66%, rgba(80, 110, 255, 0.18) 0 1px, rgba(80, 110, 255, 0) 2.4px),
    radial-gradient(circle, #0d0d16 0 34%, #08080b 36% 62%, #0e0e11 64% 100%);
  box-shadow: 0 0 0 0.75px #111114;
}

.ws-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 41;
  width: 140px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #000;
  pointer-events: none;
}

.ws-mode-full .ws-status,
.ws-mode-full .ws-island,
.ws-mode-full .ws-home {
  display: none;
}

/* Views and the push transition */
.ws-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  /* A backdrop root: the blur and glass inside sample only the view itself,
     never the page behind the phone (which leaked green at the edges). */
  filter: brightness(1);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.ws-list {
  z-index: 0;
  background: var(--ws-surface);
}

.ws-list::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.ws-thread {
  z-index: 1;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.1);
}

.is-thread .ws-list {
  transform: translateX(-30%);
}

.is-thread .ws-list::after {
  opacity: 1;
}

.is-thread .ws-thread {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ws-view,
  .ws-list::after,
  .kb,
  .ws-toast {
    transition: none !important;
  }
}

/* ---------- Chat list ---------- */



.ws-list-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: calc(var(--ws-top) + 54px) 0 110px;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.ws-list-scroll::-webkit-scrollbar {
  display: none;
}

.ws-list-top {
  position: absolute;
  top: var(--ws-top);
  left: 20px;
  right: 20px;
  z-index: 5;
  display: flex;
  gap: 12px;
}

.ws-spacer {
  flex: 1;
}

.ws-round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.ws-round .ws-icon {
  width: 22px;
  height: 22px;
}

.ws-title {
  margin: 4px 20px 10px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 41px;
}

.ws-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  margin: 0 20px;
  padding: 0 12px;
  border-radius: 20px;
  background: #f0f0f2;
  color: var(--ws-secondary);
}

.ws-search .ws-icon {
  width: 20px;
  height: 20px;
}

.ws-chips {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ws-chips::-webkit-scrollbar {
  display: none;
}

.ws-chip {
  flex: none;
  height: 31px;
  padding: 0 13px !important;
  border: 1px solid #dcdcde !important;
  border-radius: 16px;
  color: #4a4a4f !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 29px !important;
}

.ws-chip.is-selected {
  border-color: #bde6b0 !important;
  background: #dcf8d3 !important;
  color: #0e5a2c !important;
}

.ws-archived {
  display: flex;
  align-items: center;
  height: 50px;
  margin-top: 12px;
  padding: 0 16px 0 37px;
  color: #4a4a50;
}

.ws-archived .ws-icon {
  width: 22px;
  height: 22px;
}

.ws-archived-label {
  flex: 1;
  margin-left: 30px;
  font-weight: 600;
}

.ws-archived-count {
  color: var(--ws-secondary);
  font-size: 15px;
}

.ws-chat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-chat {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 13px;
  align-items: center;
  width: 100%;
  height: 77px;
  padding: 0 0 0 20px !important;
  text-align: left;
}

.ws-chat:active {
  background: rgba(0, 0, 0, 0.05) !important;
}

.ws-avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
  object-fit: cover;
}

.ws-avatar-img {
  background: #0b3a1a;
}

.ws-chat-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ws-chat-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-chat-time {
  flex: none;
  color: var(--ws-secondary);
  font-size: 15px;
}

.ws-chat.is-unread .ws-chat-time,
.ws-chat-time.is-unread {
  color: var(--ws-green-text);
}

.ws-chat-preview {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ws-secondary);
  font-size: 15px;
  line-height: 20px;
}

.ws-chat-ticks:empty {
  display: none !important;
}

.ws-chat-preview .ws-ticks,
.ws-chat-ticks {
  display: inline-block;
  margin-right: 3px;
  vertical-align: -1px;
}

.ws-chat-preview .ws-ticks .ws-icon,
.ws-chat-ticks .ws-icon {
  display: inline-block;
  width: 17px;
  height: 12px;
}

.ws-badge {
  flex: none;
  min-width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ws-green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.ws-badge[hidden] {
  display: none;
}

/* Tab bar */
.ws-tabbar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(var(--ws-home-space) - 4px);
  z-index: 6;
  display: flex;
  align-items: stretch;
  height: 62px;
  padding: 4px;
  border-radius: 31px;
  --ws-glass-face: rgba(247, 247, 248, 0.74);
}

.ws-tab {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 27px;
  color: #1c1c1e;
}

.ws-tab.is-selected {
  background: rgba(0, 0, 0, 0.065) !important;
}

.ws-tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  height: 28px;
}

.ws-tab-icon .ws-icon {
  width: 27px;
  height: 27px;
}

.ws-tab-label {
  display: inline-block;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 12px;
}

.ws-tab-badge {
  position: absolute;
  top: -6px;
  left: 17px;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ws-green);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.ws-tab-updates .ws-tab-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  right: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ws-green);
}

.ws-tab-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #c9b8f5, #7e64d8);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* Notice: a glass capsule above the composer. */
.ws-toast {
  position: absolute;
  bottom: 104px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 340px;
  padding: 10px 16px 10px 12px;
  transform: translate(-50%, 10px);
  border-radius: 22px;
  font-size: 14px;
  line-height: 19px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.ws-toast.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.ws-toast-icon {
  width: 20px;
  height: 20px;
  color: var(--ws-green);
}

@media (prefers-reduced-motion: reduce) {
  .ws-toast,
  .ws-toast.is-shown {
    transform: translate(-50%, 0);
  }
}

/* ---------- Chat thread ---------- */

.ws-wallpaper {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ws-wall);
  background-image: var(--ws-wallpaper);
  background-size: 360px 360px;
}

/* Progressive blur bands (chat-app.ts progressiveBlur): three layers of
   increasing blur, each masked to fade toward the content, over a tint. */
.ws-pblur {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}

.ws-pblur span {
  position: absolute;
  inset: 0;
}

.ws-pblur-top {
  top: 0;
  background: linear-gradient(180deg, var(--ws-pblur-tint) 0%, var(--ws-pblur-tint) 72%, var(--ws-pblur-clear) 100%);
}

.ws-pblur-bottom {
  bottom: 0;
  background: linear-gradient(0deg, var(--ws-pblur-tint) 0%, var(--ws-pblur-clear) 100%);
}

.ws-pblur span:nth-child(1) {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.ws-pblur span:nth-child(2) {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.ws-pblur span:nth-child(3) {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.ws-pblur-top span:nth-child(1) {
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent);
  mask-image: linear-gradient(180deg, #000 85%, transparent);
}

.ws-pblur-top span:nth-child(2) {
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 92%);
}

.ws-pblur-top span:nth-child(3) {
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 50%, transparent 80%);
}

.ws-pblur-bottom span:nth-child(1) {
  -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent);
  mask-image: linear-gradient(0deg, #000 40%, transparent);
}

.ws-pblur-bottom span:nth-child(2) {
  -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 80%);
  mask-image: linear-gradient(0deg, #000 20%, transparent 80%);
}

.ws-pblur-bottom span:nth-child(3) {
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 55%);
  mask-image: linear-gradient(0deg, #000, transparent 55%);
}

/* Thread: covers the status bar and the whole header row (back pill,
   avatar, name and subtitle, call pill), easing out 16 px below it. */
.ws-thread-top {
  --ws-pblur-tint: rgba(243, 242, 238, 0.9);
  --ws-pblur-clear: rgba(243, 242, 238, 0);
  height: calc(var(--ws-top) + 44px + 18px);
}



/* Chat list: under the status bar and the floating buttons. */
.ws-list-blur {
  --ws-pblur-tint: rgba(251, 251, 252, 0.9);
  --ws-pblur-clear: rgba(251, 251, 252, 0);
  z-index: 4;
  height: calc(var(--ws-top) + 44px + 16px);
}

.ws-thread-header {
  position: absolute;
  top: var(--ws-top);
  left: 20px;
  right: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
}

.ws-back {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 44px;
  padding: 0 13px 0 7px !important;
  border-radius: 22px;
  font-size: 17px !important;
}

.ws-back .ws-icon {
  width: 22px;
  height: 22px;
}

.ws-contact {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ws-contact-avatar {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  object-fit: cover;
}

.ws-contact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ws-contact-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-contact-subtitle {
  overflow: hidden;
  color: #66666b;
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 58px;
  height: 44px;
  border-radius: 22px;
}

.ws-call .ws-icon {
  width: 25px;
  height: 25px;
}

.ws-call .ws-call-chevron {
  width: 13px;
  height: 13px;
  margin-left: -1px;
}

.ws-messages-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

.ws-messages {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: calc(var(--ws-top) + 44px + 12px) 0 12px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.ws-messages::-webkit-scrollbar {
  display: none;
}

.ws-messages:focus-visible {
  outline: none;
}

.ws-messages-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: flex-end;
  padding: 0 16px;
}

.ws-day,
.ws-system {
  display: flex;
  justify-content: center;
  margin: 12px 0 4px;
}

.ws-day-chip,
.ws-system span {
  padding: 4px 11px;
  border-radius: 10px;
  background: rgba(253, 253, 253, 0.9);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.08);
  color: #59595e;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 16px;
  text-transform: capitalize;
}

.ws-system span {
  max-width: 300px;
  padding: 6px 12px;
  background: #fdf6cf;
  color: #54493b;
  text-align: center;
  text-transform: none;
}

/* Bubbles */
.ws-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.ws-row.is-first {
  margin-top: 11px;
}

.ws-row.is-out {
  justify-content: flex-end;
}

.ws-bubble {
  position: relative;
  max-width: 80%;
  padding: 6px 12px 6px;
  border-radius: 18px;
  background: var(--ws-in);
  box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.07);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.is-out .ws-bubble {
  background: var(--ws-out);
}

.is-last.is-out .ws-bubble {
  border-bottom-right-radius: 6px;
}

.is-last.is-in .ws-bubble {
  border-bottom-left-radius: 6px;
}

.is-last .ws-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 17px;
  background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 17'%3E%3Cpath d='M0 0h6c0 7.5 1.8 12.6 6 16.6.2.2.1.4-.2.4C7.8 17 3.4 17 0 17Z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 17'%3E%3Cpath d='M0 0h6c0 7.5 1.8 12.6 6 16.6.2.2.1.4-.2.4C7.8 17 3.4 17 0 17Z'/%3E%3C/svg%3E") no-repeat;
}

.is-last.is-out .ws-bubble::after {
  right: -6px;
}

.is-last.is-in .ws-bubble::after {
  left: -6px;
  transform: scaleX(-1);
}

.ws-text strong {
  font-weight: 600;
}

.ws-text code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
}

.ws-text a {
  color: #0b7bd9;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ws-meta-spacer {
  display: inline-block;
  width: 40px;
  height: 10px;
}

.ws-meta-spacer.is-out {
  width: 60px;
}

.ws-meta {
  position: absolute;
  right: 11px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 15px;
  white-space: nowrap;
}

.ws-ticks {
  display: inline-flex;
}

.ws-ticks .ws-icon {
  width: 17px;
  height: 12px;
}

.ws-ticks.is-read {
  color: var(--ws-read);
}

.ws-ticks.is-pending .ws-icon {
  width: 14px;
}

.ws-retry {
  display: none;
  color: #e5484d;
  align-self: center;
}

.ws-retry .ws-icon {
  width: 22px;
  height: 22px;
}

.is-failed .ws-retry {
  display: block;
}

/* Voice notes */
.ws-bubble-audio {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 262px;
  padding: 11px 11px 9px 4px;
  white-space: normal;
}

.ws-play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #5d6266;
}

/* Centered on the 30px track rather than on the track and duration rows
   together (and specific enough to beat the button reset's margin). */
.ws-bubble-audio .ws-play {
  margin-top: -3px;
}

.ws-play .ws-icon {
  width: 26px;
  height: 26px;
}

.ws-icon-pause,
.is-playing .ws-icon-play {
  display: none;
}

.is-playing .ws-icon-pause {
  display: block;
}

.ws-wave {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  cursor: pointer;
}

.ws-bar {
  flex: 1;
  min-width: 2px;
  max-width: 3px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.24);
}

.ws-bar.is-played {
  background: #4c6a55;
}

.ws-wave-knob {
  position: absolute;
  top: 50%;
  left: calc(var(--progress, 0) * (100% - 12px));
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--ws-green);
}

.ws-audio-info {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 16px;
}

.ws-duration {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 15px;
}

.ws-audio-info .ws-meta {
  position: static;
}

/* Media */
.ws-bubble-media {
  padding: 3px;
  white-space: normal;
}

.ws-media {
  display: block;
  max-width: 250px;
  border-radius: 15px;
  overflow: hidden;
}

.ws-media img,
video.ws-media {
  display: block;
  max-width: 250px;
  max-height: 320px;
  border-radius: 15px;
}

.ws-bubble-media:not(.has-caption) > .ws-meta {
  right: 10px;
  bottom: 8px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

.ws-bubble-media.has-caption .ws-text {
  display: inline;
  padding: 0 8px;
}

.ws-document {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  padding: 10px 50px 18px 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  color: inherit;
  text-decoration: none;
}

.ws-document-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 36px;
  border-radius: 5px;
  background: #e5484d;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.ws-document-name {
  font-size: 15px;
  line-height: 19px;
}

.ws-scroll-bottom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transform: scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.ws-scroll-bottom.is-shown {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

.ws-scroll-bottom .ws-icon {
  width: 20px;
  height: 20px;
}

/* Composer */
.ws-composer {
  position: relative;
  z-index: 4;
  display: grid;
  flex: none;
  grid-template-columns: 46px 1fr 50px 40px;
  align-items: end;
  padding: 8px 8px calc(8px + var(--ws-home-space)) 0;
  /* Like WhatsApp: its own bar (warm light gray, slightly translucent,
     blurred only behind itself) with a hairline top edge. */
  border-top: 0.5px solid rgba(60, 60, 67, 0.18);
  background: rgba(243, 241, 236, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}

.ws-mode-full .ws-composer {
  padding-bottom: calc(8px + var(--ws-home-space));
}

.is-keyboard .ws-composer {
  padding-bottom: 10px;
}

.ws-attach,
.ws-composer-camera {
  display: grid;
  place-items: center;
  height: 32px;
}

.ws-attach .ws-icon {
  width: 27px;
  height: 27px;
}

.ws-composer-camera .ws-icon {
  width: 26px;
  height: 26px;
}

.ws-field {
  position: relative;
  display: flex;
  min-height: 32px;
  border: 0.5px solid #cfcfd2;
  border-radius: 17px;
  background: var(--ws-surface);
}

.ws-input {
  display: block;
  width: 100%;
  height: 22px;
  min-height: 22px;
  margin: 5px 38px 4px 13px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  caret-color: var(--ws-green);
  color: var(--ws-label);
  font: inherit;
  letter-spacing: inherit;
  resize: none;
  outline: none !important;
  user-select: text;
  -webkit-user-select: text;
}

.ws-sticker {
  position: absolute;
  right: 7px;
  bottom: 4px;
}

.ws-sticker .ws-icon {
  width: 23px;
  height: 23px;
}

.ws-action {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--ws-green) !important;
  color: #fff !important;
  transition: transform 0.15s;
}

.ws-action .ws-icon {
  width: 18px;
  height: 18px;
}

.ws-icon-send,
.has-text .ws-icon-mic {
  display: none;
}

.has-text .ws-icon-send {
  display: block;
}

.is-recording:not(.is-locked) .ws-action {
  transform: scale(1.35);
  background: #e5484d !important;
}

/* Recording */
.ws-rec {
  position: absolute;
  top: 0;
  left: 0;
  right: 56px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px 0 16px;
  background: rgb(243, 241, 236);
}

.is-recording .ws-rec {
  display: flex;
}

.is-locked .ws-rec {
  right: 0;
}

.ws-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5484d;
  animation: ws-blink 1s steps(2, start) infinite;
}

@keyframes ws-blink {
  to {
    visibility: hidden;
  }
}

.ws-rec-timer {
  min-width: 38px;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.ws-rec-hint {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ws-secondary);
  font-size: 15px;
  transform: translateX(var(--slide, 0));
}

.ws-rec-hint .ws-icon {
  width: 16px;
  height: 16px;
}

.ws-rec-wave {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 26px;
  overflow: hidden;
}

.ws-rec-wave .ws-bar {
  flex: none;
  width: 2.5px;
  background: #6b6b70;
}

.ws-rec-trash,
.ws-rec-send {
  display: none !important;
}

.is-locked .ws-rec-hint {
  display: none;
}

.is-locked .ws-rec-wave {
  display: flex;
}

.is-locked .ws-rec-trash,
.is-locked .ws-rec-send {
  display: grid !important;
  place-items: center;
}

.ws-rec-trash {
  color: #4a4a50;
}

.ws-rec-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ws-green) !important;
  color: #fff !important;
}

.ws-rec-send .ws-icon {
  width: 18px;
  height: 18px;
}

/* ---------- Fake keyboard ---------- */

.kb {
  position: relative;
  z-index: 5;
  flex: none;
  height: 0;
  overflow: hidden;
  overflow: clip;
  transition: height 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  --kb-key: calc((402px - 12px - 54px) / 10);
}

.kb.is-open {
  height: 340px;
}

.kb.is-settled {
  overflow: visible;
}

.kb-sheet {
  position: absolute;
  top: 0;
  left: 1px;
  right: 1px;
  height: 340px;
  border-radius: 36px 36px 54px 54px;
  background: rgba(223, 224, 229, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 0.6px 0 var(--ws-hl),
    0 -0.5px 0 rgba(0, 0, 0, 0.1);
  color: #000;
}

.ws-mode-full .kb {
  display: none;
}

.kb-suggestions {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 6px 8px 0;
}

.kb-suggestion {
  flex: 1;
  height: 38px;
  overflow: hidden;
  color: #3a3a3e !important;
  font-size: 17px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-divider {
  flex: none;
  width: 1px;
  height: 25px;
  background: #c3c4c9;
}

.kb-keys {
  padding: 3px 6px 0;
}

.kb-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  height: 45px;
  margin-bottom: 11px;
}

.kb-key {
  position: relative;
  display: grid !important;
  flex: 0 0 var(--kb-key);
  place-items: center;
  height: 45px;
  border-radius: 9px;
  background: #fdfdfd !important;
  color: #000 !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  touch-action: none;
}

.kb-key.is-pressed {
  background: #d3d4d9 !important;
}

.kb-key .ws-icon {
  width: 25px;
  height: 25px;
}

.kb-row-3 .kb-fn {
  flex: 0 0 46px;
}

.kb-group {
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 6px;
  padding: 0 7px;
}

.kb-keys[data-layer="numbers"] .kb-group .kb-key,
.kb-keys[data-layer="symbols"] .kb-group .kb-key {
  flex: 1 1 0;
}

.kb-row-4 .kb-mode {
  flex: 0 0 44px;
  font-size: 18px !important;
}

.kb-row-3 .kb-text {
  font-size: 15px !important;
}

.kb-row-4 .kb-emoji {
  flex: 0 0 43px;
}

.kb-row-4 .kb-emoji .ws-icon {
  width: 27px;
  height: 27px;
}

.kb-space {
  flex: 1 1 auto !important;
}

.kb-lang {
  position: absolute;
  right: 6px;
  bottom: 3px;
  color: #a9a9ae;
  font-size: 10px;
  font-stretch: condensed;
  letter-spacing: -0.4px;
  line-height: 1;
}

.kb-row-4 .kb-return {
  flex: 0 0 93px;
  color: #c4c4c8 !important;
}

.kb.has-text .kb-return {
  color: #000 !important;
}

.kb-bottom {
  position: absolute;
  top: 280px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 28px;
  color: #1c1c1e;
}

.kb-bottom .ws-icon {
  width: 26px;
  height: 26px;
}

.kb-pop {
  position: absolute;
  z-index: 5;
  height: 65px;
  border-radius: 13px;
  background: #fdfdfd;
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.16),
    0 0 0 0.5px rgba(0, 0, 0, 0.05);
  color: #000;
  font-size: 46px;
  line-height: 62px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.kb-pop.is-shown {
  opacity: 1;
}

.kb-accents {
  position: absolute;
  top: -18px;
  z-index: 6;
  display: none;
  height: 67px;
  padding: 8px 10px;
  border-radius: 20px;
  background: #fdfdfd;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.16),
    0 0 0 0.5px rgba(0, 0, 0, 0.05);
}

.kb-accents.is-shown {
  display: flex;
}

.kb-accent {
  display: grid;
  flex: 0 0 41px;
  place-items: center;
  height: 51px;
  border-radius: 11px;
  font-size: 23px;
}

.kb-accent.is-current {
  background: #e4e4e9;
}

/* Emoji layer */
.is-emoji .kb-suggestions {
  display: none;
}

.kb-emoji-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 10px 2px 4px;
  padding: 0 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  color: #8e8e93;
}

.kb-emoji-search .ws-icon {
  width: 20px;
  height: 20px;
}

.kb-emoji-grid {
  display: grid;
  grid-auto-columns: 48px;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 45px);
  height: 184px;
  overflow-x: auto;
  scrollbar-width: none;
}

.kb-emoji-grid::-webkit-scrollbar {
  display: none;
}

.kb-emoji {
  font-size: 33px !important;
  line-height: 1 !important;
}

.kb-emoji-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
}

.kb-emoji-bar .kb-key {
  flex: 0 0 48px;
  height: 36px;
  background: transparent !important;
  font-size: 17px !important;
}

.kb-categories {
  display: flex;
  flex: 1;
  justify-content: space-between;
  min-width: 0;
}

.kb-category {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #6c6c71 !important;
}

.kb-category.is-current {
  background: rgba(0, 0, 0, 0.09) !important;
  color: #1c1c1e !important;
}

.kb-category .ws-icon {
  width: 20px;
  height: 20px;
}

/* Idle hints: what to use next (the IARA chat, then the composer). */
.ws-chat.is-hint {
  animation: ws-hint-row 1.8s ease-in-out infinite;
}

@keyframes ws-hint-row {
  50% {
    background: rgba(69, 166, 99, 0.13);
  }
}

.ws-field.is-hint,
.ws-action.is-hint {
  animation: ws-hint-ring 1.8s ease-in-out infinite;
}

@keyframes ws-hint-ring {
  50% {
    box-shadow: 0 0 0 4px rgba(69, 166, 99, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-chat.is-hint,
  .ws-field.is-hint,
  .ws-action.is-hint {
    animation: none;
  }

  .ws-chat.is-hint {
    background: rgba(69, 166, 99, 0.12) !important;
  }

  .ws-field.is-hint,
  .ws-action.is-hint {
    box-shadow: 0 0 0 3px rgba(69, 166, 99, 0.3);
  }
}

/* In-phone alert (iOS style). */
.ws-alert-backdrop {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.22);
}

.ws-alert {
  width: 286px;
  overflow: hidden;
  border-radius: 26px;
  background: rgba(246, 246, 247, 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.ws-alert-title {
  margin: 20px 18px 4px;
  font-size: 17px;
  font-weight: 600;
}

.ws-alert-text {
  margin: 0 18px 18px;
  font-size: 13px;
  line-height: 18px;
}

.ws-screen .ws-alert-button {
  display: block;
  width: calc(100% - 28px);
  height: 46px;
  margin: 0 14px 14px;
  border-radius: 23px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ws-green-text);
  font-size: 17px;
  font-weight: 600;
}

/* ---------- Attachments ---------- */

.ws-sheet {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s;
}

.ws-sheet.is-open {
  background: rgba(0, 0, 0, 0.18);
}

.ws-sheet-panel {
  transform: translateY(105%);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  outline: none;
}

.ws-sheet.is-open .ws-sheet-panel {
  transform: none;
}

.ws-attach-sheet {
  display: flex;
  flex-direction: column;
  margin: 0 10px calc(var(--ws-home-space) + 6px);
  padding: 8px 8px 10px;
  border-radius: 32px;
  --ws-glass-face: rgba(248, 248, 249, 0.88);
}

.ws-sheet-grabber {
  align-self: center;
  width: 36px;
  height: 5px;
  margin: 0 0 8px;
  border-radius: 3px;
  background: rgba(60, 60, 67, 0.3);
}

.ws-attach-option {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 12px !important;
  border-radius: 18px;
  font-size: 17px;
  text-align: left;
}

.ws-attach-option:active {
  background: rgba(0, 0, 0, 0.06) !important;
}

.ws-attach-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
}

.ws-attach-icon .ws-icon {
  width: 20px;
  height: 20px;
}

.ws-attach-icon.is-blue {
  background: #1d8cf8;
}

.ws-attach-icon.is-gray {
  background: #3a3a3c;
}

.ws-attach-icon.is-indigo {
  background: #5e5ce6;
}

.ws-picker {
  display: flex;
  flex-direction: column;
  height: calc(100% - var(--ws-top) - 6px);
  overflow: hidden;
  border-radius: 34px 34px 0 0;
  background: var(--ws-surface);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
}

.ws-picker-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 56px;
  padding: 0 16px;
}

.ws-picker-cancel {
  justify-self: start;
  color: #0a84ff !important;
}

.ws-picker-title {
  font-weight: 600;
}

.ws-picker-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: none;
}

.ws-picker-photo {
  aspect-ratio: 1;
  overflow: hidden;
}

.ws-picker-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-picker-footer {
  padding: 10px 16px calc(var(--ws-home-space) + 8px);
  border-top: 0.5px solid var(--ws-separator);
}

.ws-picker-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  border-radius: 23px;
  background: rgba(0, 0, 0, 0.06) !important;
  color: #0a84ff !important;
  font-weight: 600 !important;
}

.ws-picker-more .ws-icon {
  width: 20px;
  height: 20px;
}

.ws-preview {
  position: absolute;
  inset: 0;
  z-index: 56;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s;
}

.ws-preview.is-open {
  opacity: 1;
}

.ws-preview-top {
  display: flex;
  padding: calc(var(--ws-top) - 4px) 16px 8px;
}

.ws-preview-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14) !important;
}

.ws-preview-image {
  display: grid;
  flex: 1;
  min-height: 0;
  place-items: center;
}

.ws-preview-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ws-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(var(--ws-home-space) + 10px);
}

.ws-preview-field {
  flex: 1;
  height: 38px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.14);
}

.ws-caption-input {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  caret-color: var(--ws-green);
  color: #fff;
  font: inherit;
}

.ws-caption-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.ws-preview-send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ws-green) !important;
}

.ws-preview-send .ws-icon {
  width: 20px;
  height: 20px;
}

/* Sticker panel, in the keyboard's place */
.ws-sticker-panel {
  position: relative;
  z-index: 5;
  flex: none;
  height: 0;
  overflow: hidden;
  overflow: clip;
  transition: height 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

.ws-sticker-panel.is-open {
  height: 320px;
}

.ws-sticker-sheet {
  position: absolute;
  inset: 0 1px auto;
  display: flex;
  flex-direction: column;
  height: 320px;
  padding-bottom: var(--ws-home-space);
  border-radius: 36px 36px 54px 54px;
  background: rgba(239, 239, 242, 0.96);
}

.ws-mode-full .ws-sticker-sheet {
  border-radius: 24px 24px 0 0;
}

.ws-segments-row {
  display: flex;
  justify-content: center;
  padding: 12px 16px 6px;
}

.ws-segments {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 18px;
  --ws-glass-face: rgba(255, 255, 255, 0.6);
}

.ws-screen .ws-segment {
  min-width: 92px;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  color: #3a3a3e;
  font-size: 14px;
  font-weight: 600;
}

.ws-screen .ws-segment.is-current {
  background: #fdfdfd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: #000;
}

.ws-segment[hidden],
.ws-gif-view[hidden],
.ws-sticker-view[hidden],
.ws-sticker-grid[hidden] {
  display: none !important;
}

.ws-gif-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.ws-gif-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 4px 12px 8px;
  padding: 0 12px;
  border-radius: 18px;
  background: rgba(118, 118, 128, 0.12);
  color: #8e8e93;
}

.ws-gif-search .ws-icon {
  width: 18px;
  height: 18px;
}

.ws-gif-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
}

.ws-gif-grid {
  display: flex;
  flex: 1;
  gap: 4px;
  min-height: 0;
  padding: 0 12px;
  overflow-y: auto;
  scrollbar-width: none;
}

.ws-gif-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  height: max-content;
}

.ws-gif-cell {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06) !important;
}

.ws-gif-cell img,
.ws-gif img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-gif-attribution {
  margin: 0;
  padding: 4px 0 2px;
  color: #8e8e93;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.ws-gif {
  position: relative;
  width: 220px;
}

.ws-gif-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.ws-sticker-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: max-content;
  gap: 6px;
  padding: 6px 12px 10px;
  overflow-y: auto;
  scrollbar-width: none;
}

.ws-sticker-cell {
  aspect-ratio: 1;
  border-radius: 14px;
}

.ws-sticker-cell:active {
  background: rgba(0, 0, 0, 0.06) !important;
}

.ws-sticker-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ws-sticker.is-active {
  color: var(--ws-green);
}

.is-stickers .ws-composer {
  padding-bottom: 10px;
}

/* Searching GIFs: the panel sits above the keyboard, like iOS. */
.is-searching .ws-composer {
  display: none;
}

.is-searching .ws-sticker-panel.is-open {
  height: 250px;
}

.is-searching .ws-sticker-sheet {
  height: 250px;
  padding-bottom: 0;
  border-radius: 24px 24px 0 0;
}

/* Sticker bubbles: no bubble, a time chip under the sticker. */
.ws-bubble-sticker,
.is-out .ws-bubble-sticker {
  padding: 0;
  background: none;
  box-shadow: none;
}

.ws-bubble-sticker::after {
  display: none;
}

.ws-bubble-sticker img {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.ws-bubble-sticker .ws-meta {
  position: static;
  justify-content: flex-end;
  width: max-content;
  margin: 2px 0 0 auto;
  padding: 1px 7px;
  border-radius: 9px;
  background: rgba(253, 253, 253, 0.9);
}

/* A faint hover hint under the fingertip (iOS has no hover; keep it light). */
.has-finger .ws-chat:hover {
  background: rgba(0, 0, 0, 0.025) !important;
}

/* Glass reacting to the fingertip or keyboard focus: a slight springy lift,
   a brighter rim and face, a faint inner glow. No outline or ring. */
.ws-screen .glass {
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s,
    box-shadow 0.2s;
}

.ws-screen .glass::before {
  opacity: 0.85;
  transition: opacity 0.2s;
}

.has-finger .glass:hover,
.ws-screen .glass:focus-visible {
  --ws-glass-face: rgba(250, 250, 251, 0.88);
  transform: scale(1.04);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.09),
    0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 0 10px rgba(255, 255, 255, 0.55),
    inset 0 0 0 0.5px var(--ws-glass-rim);
}

.has-finger .glass:hover::before,
.ws-screen .glass:focus-visible::before {
  opacity: 1;
}

.ws-screen .glass:focus-visible {
  outline: none;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.09),
    inset 0 0 12px rgba(69, 166, 99, 0.22),
    inset 0 0 0 0.5px var(--ws-glass-rim);
}

/* The tab bar is wide: no lift, its tabs brighten instead. */
.has-finger .ws-tabbar.glass:hover,
.ws-screen .ws-tabbar.glass:focus-visible {
  transform: none;
}

.has-finger .ws-tab:hover:not(.is-selected) {
  background: rgba(255, 255, 255, 0.4) !important;
}

@media (prefers-reduced-motion: reduce) {
  .has-finger .glass:hover,
  .ws-screen .glass:focus-visible {
    transform: none;
  }
}

/* Refraction is sized for the phone's controls; the full-screen layout keeps
   the plain glass. */
.ws-mode-full .glass {
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  backdrop-filter: blur(14px) saturate(1.8) !important;
}

.ws-screen {
  transition: border-radius 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ws-screen {
    transition: none;
  }
}

/* Off-axis look of the display (OLED): seen at a steep angle, a subtle cool
   cast and a little less brightness. phone3d.ts sets --offaxis (0..1) from
   the viewing angle; a multiply overlay is cheap and keeps text crisp. */
.ws-offaxis {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: rgb(192, 210, 230);
  mix-blend-mode: multiply;
  opacity: var(--offaxis, 0);
  pointer-events: none;
}

/* Full screen: the tab bar floats above the bottom with room to breathe; the
   list scrolls fully above it. */
.ws-mode-full .ws-tabbar {
  bottom: calc(var(--ws-home-space) + 4px);
}

.ws-mode-full .ws-list-scroll {
  padding-bottom: calc(62px + var(--ws-home-space) + 24px);
}

/* Full screen on wider windows: the sticker/GIF panel keeps phone-like
   proportions (centered, capped width, fixed height). */
.ws-mode-full .ws-sticker-panel.is-open {
  height: min(320px, 45vh);
}

.ws-mode-full .ws-sticker-sheet {
  right: 0;
  left: 0;
  height: min(320px, 45vh);
  max-width: 560px;
  margin: 0 auto;
}

.ws-mode-full .ws-sticker-grid {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}

.ws-mode-full .ws-sticker-cell {
  max-width: 110px;
}

.ws-mode-full .ws-gif-grid {
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

/* Stickers: the selected pack's grid, and the pack icons below it. */
.ws-sticker-view {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.ws-pack-bar {
  display: flex;
  flex: none;
  gap: 6px;
  justify-content: center;
  padding: 4px 12px 2px;
  border-top: 0.5px solid rgba(60, 60, 67, 0.14);
}

.ws-screen .ws-pack {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border-radius: 10px;
  color: #6c6c71;
}

.ws-screen .ws-pack.is-current {
  background: rgba(0, 0, 0, 0.08);
  color: #1c1c1e;
}

.ws-pack img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.ws-pack .ws-icon {
  width: 20px;
  height: 20px;
}

/* Kiosk: the idle countdown banner inside the phone; no way off the page. */
.ws-kiosk-banner {
  position: absolute;
  top: calc(var(--ws-top) + 52px);
  left: 50%;
  z-index: 52;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 340px;
  padding: 10px 16px 10px 12px;
  transform: translateX(-50%);
  border-radius: 22px;
  font-size: 14px;
}

.ws-kiosk-banner[hidden] {
  display: none;
}

.ws-kiosk-banner .ws-icon {
  width: 20px;
  height: 20px;
  color: var(--ws-green);
}

.is-touch-scrolling {
  cursor: inherit;
}

.ws-chat-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  min-width: 0;
  padding: 10px 16px 0 0;
  border-top: 0.5px solid var(--ws-separator);
}

.ws-audio-body {
  flex: 1;
  min-width: 0;
}