/* Realistic iPhone frame + live survey. Loaded after styles.css so it overrides the old .phone rules. */
.phone-float{width:300px;padding:30px 0 38px;animation:phoneFloat 8s ease-in-out infinite}
.iphone{position:relative;width:274px;height:566px;margin:auto;padding:7px;border-radius:50px;
  background:linear-gradient(145deg,#8d8d92,#2a2a2d 18%,#58585d 42%,#222225 70%,#8a8a90);
  box-shadow:inset 0 0 0 1.5px #0d0d0f,inset 0 0 0 3px #4a4a4f,0 28px 60px #000a,0 0 0 1px #ffffff12;
  transform:perspective(1100px) rotateY(-7deg) rotateZ(2deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.iphone:hover,.iphone:focus-within{transform:perspective(1100px) rotateY(0) rotateZ(0)}
.iphone-btn{position:absolute;width:3px;background:linear-gradient(#6a6a6f,#38383c);border-radius:2px}
.btn-action{left:-3px;top:96px;height:22px}.btn-vol-up{left:-3px;top:138px;height:40px}.btn-vol-down{left:-3px;top:188px;height:40px}.btn-power{right:-3px;top:156px;height:64px}
.iphone-screen{position:relative;height:100%;border-radius:43px;overflow:hidden;background:#131215;border:3px solid #050506;display:flex;flex-direction:column}
.iphone-status{height:44px;flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 22px 0;font-size:11px;font-weight:600;background:#201a14;color:#fff}
.status-island{display:block;width:84px;height:24px;margin-top:2px}.status-island i{display:block;height:100%;background:#000;border-radius:20px;box-shadow:inset 0 0 0 1px #1a1a1c}
.status-icons{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.iphone .survey-brand{flex-shrink:0;height:50px}
.iphone .survey-body{padding:16px 18px 10px;flex:1;overflow:hidden}
.iphone .survey-body h2{font-size:32px}
.iphone .rating-picker{margin:18px -2px 6px}
.iphone .rating-picker button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.iphone .rating-picker button:active{transform:scale(.92)}
.iphone .survey-rating-caption{margin-bottom:10px;transition:opacity .2s}
.survey-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px;min-height:22px}
.survey-tags button{font:inherit;font-size:8px;line-height:1;color:#b9b3c0;background:#222024;border:1px solid #39343b;border-radius:20px;padding:6px 9px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
.survey-tags button:hover{border-color:#7a6030;color:#ecd9ae}
.survey-tags button:active{transform:scale(.95)}
.survey-tags button[aria-pressed=true]{background:#4b3818;border-color:var(--amber);color:#ffd987}
.iphone .survey-body textarea{height:46px;transition:border-color .2s}
.iphone .survey-body textarea:focus{outline:0;border-color:var(--amber)}
.iphone .survey-submit{cursor:pointer;transition:transform .15s,filter .2s}
.iphone .survey-submit:hover{filter:brightness(1.08)}.iphone .survey-submit:active{transform:scale(.98)}
.iphone .survey-secure{margin-top:9px}
.iphone .survey-thanks{flex:1;padding-top:44px;animation:thanksIn .45s both}
.iphone .phone-home{width:96px;height:4px;bottom:8px;background:#e9e9ee;opacity:.9;z-index:3}
@keyframes thanksIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* floating cards sit above/below the screen instead of covering the survey */
.floating-notification{top:0;left:48px;width:250px;transform:rotate(2deg);pointer-events:none;transition:background .4s}
.floating-notification.pulse{animation:notifPop .7s both}
@keyframes notifPop{0%{transform:rotate(2deg) scale(.94);box-shadow:0 0 0 0 #ffbd2866}50%{transform:rotate(2deg) scale(1.04)}100%{transform:rotate(2deg) scale(1);box-shadow:0 8px 30px #0005}}
.floating-mood{bottom:0;left:-62px;width:262px}
.floating-mood.neg{border-color:#a8483e88}.floating-mood.neg .mood-pulse{background:#ff8a7a}.floating-mood.neg .mood-smile{color:#ff8a7a}
@media(max-width:600px){.phone-float{width:290px}.floating-notification{left:34px}}
@media(prefers-reduced-motion:reduce){.iphone{transform:none!important}.iphone-btn{display:block}}