:root{
    /* --accent:#811E1E; --accent-pressed:#9f1111; */
    --accent:#811E1E; --accent-pressed:white;
    --shadow:0 8px 24px rgba(0,0,0,.16);
    --margin:12px;
    --snap-ms:320ms;                     /* slower snap (adjust to taste) */
    --snap-ease:cubic-bezier(.22,.61,.36,1); /* gentle ease-out */
  }
  /* html,body{height:100%;margin:0;background:#f6f7fb;font:14px/1.4 system-ui,Segoe UI,Roboto,Arial;} */
  #dragBtn{
    position:fixed; left:0; top:0;
    transform:translate(20px,20px);      /* initial placeholder; JS sets real top-right */
    border:0;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;
    box-shadow:var(--shadow); cursor:grab; touch-action:none; user-select:none; will-change:transform;
    transition:none;  
    height: 60px; width: 60px;
    font-size: 13px;
    border-radius: 50%;
    text-wrap: wrap;   
    box-shadow: inset 4px 4px 10px 2px #ff0004ff,
     3px 3px 7px black;
    font-family: sans-serif;
    background: var(--accent);
    color: white;
    visibility: hidden;
    /* Light source (top-left) */
    text-shadow: -1px -1px 2px #ff0004ff, 2px 2px 4px black
    /* text-shadow: 2px 3px 0px black */
  }
  .survey-notif {
    display: flex; justify-content: center; align-items: center;
    background: yellow; 
    color: #ff0004ff;
    position: absolute; 
    width: 20px; height: 20px; top: 0; right: -5px; border-radius: 50%;
    box-shadow: inset 1px 1px 1px 1px #ff7300ff,
     -3px 3px 5px black;
    text-shadow: none !important;
    font-size: 12px;
  }
  .show-survey { z-index: 1011 !important; }
  #dragBtn.snap{ transition:transform var(--snap-ms) var(--snap-ease); } /* animate snaps only */
  #dragBtn:active{ cursor:grabbing !important; }
  #dragBtn:hover{ cursor:pointer; }
  .hint{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; color:#666; font-size:12px; }
  @media (prefers-reduced-motion: reduce) { #dragBtn.snap{ transition:none; } }