/* ===== screen-choice.css — экран 2: выбор (есть код / создать новое) ===== */

.screen-choice .robot-wrap { 
    transform: translateX(-150vw); 
    opacity: 0;
  }

.screen-choice.active .robot-wrap.fly-in {
    animation: robot-fly-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

@keyframes robot-fly-in {
    from { transform: translateX(-150vw); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

.robot-wrap.fly-out-left {
    animation: robot-fly-out-left 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  }

@keyframes robot-fly-out-left {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    40% { transform: translate(30px, -20px) scale(1.1); opacity: 1; }
    100% { transform: translate(-150vw, -100px) scale(0.5); opacity: 0; }
  }

.screen-choice .stage { gap: clamp(14px, 3vh, 22px); }

.options { width:100%; display:flex; flex-direction:column; gap: 12px; margin-top: 2px; }

.option-card {
    position:relative; display:flex; align-items:center; gap: 14px;
    width:100%; text-align:left;
    background: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 18px;
    padding: 16px 16px;
    cursor:pointer;
    transition: transform .15s ease, border-color .2s ease, background .2s ease;
    overflow:hidden;
    outline: none;
    -webkit-appearance: none;
  }

.option-card::before {
    content:""; position:absolute; inset:0;
    background: linear-gradient(100deg, rgba(124,92,252,0.12), transparent 60%);
    opacity:0; transition: opacity .2s ease;
  }

.option-card:active { transform: scale(0.98); }

.option-card.selected { border-color: var(--accent-neon); background: rgba(0,255,163,0.06); }

.option-card.selected::before { opacity:1; }

.option-icon {
    width:44px; height:44px; flex-shrink:0; border-radius: 13px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, rgba(124,92,252,0.35), rgba(0,255,163,0.18));
    position:relative; z-index:1;
  }

.option-icon svg { width:20px; height:20px; color: var(--accent-neon); }

.option-text { flex:1; position:relative; z-index:1; }

.option-title { font-family:'Chakra Petch', sans-serif; font-weight:700; font-size:15px; color: var(--text-primary); margin-bottom: 2px; }

.option-sub { font-size:12.5px; color: var(--text-muted); line-height:1.4; }

.option-chevron { flex-shrink:0; width:18px; height:18px; color: var(--text-muted); position:relative; z-index:1; transition: transform .2s ease, color .2s ease; }

.option-card:hover .option-chevron,
  .option-card.selected .option-chevron { transform: translateX(3px); color: var(--accent-neon); }

.option-badge {
    position:absolute; top:10px; right:14px;
    font-family:'Share Tech Mono', monospace; font-size:9.5px;
    letter-spacing:0.05em; text-transform:uppercase;
    color: var(--accent-neon);
    background: rgba(0,255,163,0.1);
    border: 1px solid rgba(0,255,163,0.3);
    padding: 3px 8px; border-radius: 100px; z-index:1;
  }