/* Compact Telegram-style video recording action in the story editor. */
.story-editor .story-camera-launch {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  width: 92px;
  height: 92px;
  min-height: 92px;
  margin: 4px auto 8px;
  padding: 8px;
  aspect-ratio: 1;
  border: 2px solid #c9b2f4;
  border-radius: 50%;
  color: var(--text);
  background: #f0e8ff;
  text-align: center;
  box-shadow: 0 5px 16px rgba(91, 54, 160, .16);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.story-editor .story-camera-launch:hover,
.story-editor .story-camera-launch:focus-visible {
  border-color: var(--purple);
  background: #e8dcff;
  outline: none;
  transform: translateY(-1px);
}

.story-editor .story-camera-launch:active { transform: scale(.96); }
.story-editor .story-camera-launch > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--purple); font-size: 18px; line-height: 1; }
.story-editor .story-camera-launch strong { max-width: 76px; color: var(--text); font-size: 9px; line-height: 1.08; text-align: center; }
.story-editor .story-camera-launch small { display: none; }
body.skin-sunshine .story-editor .story-camera-launch { border-color: #f2c36c; color: #11100e; background: #fff0c9; box-shadow: 0 5px 16px rgba(224, 137, 28, .18); }
body.skin-sunshine .story-editor .story-camera-launch:hover,
body.skin-sunshine .story-editor .story-camera-launch:focus-visible { border-color: #ef9a32; background: #ffe4a5; }
body.skin-sunshine .story-editor .story-camera-launch > span { color: #11100e; background: #ffc35c; }
body.skin-sunshine .story-editor .story-camera-launch strong { color: #11100e; }

@media (max-width: 430px) {
  .story-editor .story-camera-launch { width: 82px; height: 82px; min-height: 82px; }
  .story-editor .story-camera-launch > span { width: 27px; height: 27px; font-size: 16px; }
}

.story-effects { display: grid; gap: 8px; margin-top: 4px; }
.story-effects > strong, .story-overlay-field > span { color: var(--text-muted, #a9a2b5); font-size: 12px; font-weight: 700; }
.story-effect-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 5px; scrollbar-width: none; }
.story-effect-list::-webkit-scrollbar { display: none; }
.story-effect-btn { display: grid; flex: 0 0 58px; min-height: 58px; place-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 14px; color: var(--text, #fff); background: var(--surface-2, rgba(255,255,255,.06)); }
.story-effect-btn span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: var(--accent, #c9a8ff); background: rgba(255,255,255,.1); font-size: 14px; font-weight: 800; }
.story-effect-btn small { font-size: 10px; white-space: nowrap; }
.story-effect-btn.active { border-color: var(--accent, #c9a8ff); box-shadow: 0 0 0 2px rgba(201,168,255,.14); }
.story-overlay-field { display: grid; gap: 6px; margin-top: 8px; }
.story-overlay-field input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 12px; color: var(--text, #fff); background: var(--surface-2, rgba(255,255,255,.06)); }
.story-text-position-hint { color: var(--text-muted, #a9a2b5); font-size: 11px; }
.story-live-text { position: absolute; z-index: 4; left: 50%; top: 87.5%; width: min(78%, 520px); transform: translate(-50%, -50%); color: #fff; font: 700 22px/1.2 system-ui, sans-serif; text-align: center; text-shadow: 0 2px 5px rgba(0,0,0,.8); pointer-events: auto; cursor: grab; touch-action: none; user-select: none; overflow-wrap: anywhere; }
.story-live-text[data-dragging="true"] { cursor: grabbing; }