{"version":3,"sources":["extension/installed/index.scss","extension/installed/index.css"],"names":[],"mappings":"AAIA,wBACE,UAAA,eAAA,IAAA,SAGF,0BACE,GACE,UAAA,SACA,QAAA,EAEF,IACE,UAAA,WAEF,KACE,UAAA,SACA,QAAA,GAKJ,mBACE,UAAA,MAIF,oBACE,MAAA,MAEA,yBAHF,oBAII,MAAA,MAKJ,qBACE,MAAA,KACA,OAAA,KAGF,qBACE,MAAA,KACA,OAAA,KACA,WAAA,QAIF,6BACE,MAAA,KACA,OAAA,KACA,WAAA,QAOF,iBACE,eAAA,KAEA,+BACE,MAAA,KACA,OAAA,KAEA,mCACE,MAAA,KACA,OAAA,KAIJ,8BACE,MAAA,KACA,OAAA,KACA,IAAA,KACA,KAAA,KACA,QAAA,EAOA,wDACE,UAAA,kBAAA,KAAA,SAAA,SAGF,uDACE,UAAA,mBAAA,KAAA,SAAA,SAKN,6BAEE,GACE,UAAA,qBAGF,IACE,UAAA,sBAGF,IACE,UAAA,sBAGF,KAAA,MACE,UAAA,sBAIJ,8BACE,GAAA,IACE,QAAA,EACA,UAAA,sBAAA,UAEF,IAAA,IACE,QAAA,GACA,UAAA,sBAAA,WAEF,IAAA,IACE,QAAA,GACA,UAAA,sBAAA,WAEF,KAAA,IACE,QAAA,EACA,UAAA,sBAAA,WAOA,qDACE,UAAA,eAAA,KAAA,SAAA,SAGF,oDACE,UAAA,gBAAA,KAAA,SAAA,SAKN,0BAEE,GACE,UAAA,qBAGF,IACE,UAAA,sBAGF,IACE,UAAA,sBAGF,KAAA,MACE,UAAA,sBAIJ,2BACE,GAAA,IACE,QAAA,EACA,UAAA,sBAAA,UAEF,IAAA,IACE,QAAA,GACA,UAAA,sBAAA,WAEF,IAAA,IACE,QAAA,GACA,UAAA,sBAAA,WAEF,KAAA,IACE,QAAA,EACA,UAAA,sBAAA,WASJ,4BACE,WAAA,MAKF,iBACE,SAAA,SAEA,yCACE,QAAA,KAEA,qDACE,UAAA,CAAA,CAAA,EACA,WAAA,OACA,WAAA,OACA,QAAA,EACA,WAAA,QAAA,KAAA,SACA,QAAA,KACA,eAAA,OAEA,4DACE,WAAA,QACA,QAAA,EAGF,wEC9CN,iEDgDQ,WAAA,OAKF,iEACE,KAAA,EACA,QAAA,KACA,eAAA,OACA,gBAAA,OAOR,mBACE,QAAA,YACA,YAAA,OACA,gBAAA,OACA,MAAA,KACA,OAAA,KACA,cAAA,IACA,WAAA,kBACA,MAAA,KACA,UAAA,OACA,YAAA,IACA,cAAA,OAIF,YACE,YAAA,IACA,cAAA,KAIF,qBACE,QAAA,KACA,YAAA,OACA,gBAAA,cACA,WAAA,QACA,YAAA,KACA,WAAA,IAAA,MAAA,uBAIF,YACE,QAAA,KACA,IAAA,IACA,YAAA,OAEA,sBACE,MAAA,KACA,OAAA,KACA,cAAA,IACA,WAAA,uBACA,OAAA,KACA,QAAA,EACA,OAAA,QACA,WAAA,WAAA,GAAA,CAAA,UAAA,IAEA,6BACE,WAAA,kBACA,UAAA,WAGF,yCACE,WAAA","file":"pages/extension/installed/index.bundle.css","sourcesContent":["// Extension Installed Page Styles\n// Only custom styles that cannot be achieved with Bootstrap\n\n// Success icon animation\n.extension-success-icon {\n  animation: success-appear 0.6s ease-out;\n}\n\n@keyframes success-appear {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  50% {\n    transform: scale(1.2);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n// URL bar min width\n.extension-url-bar {\n  min-width: 100px;\n}\n\n// Extension dropdown width\n.extension-dropdown {\n  width: 280px;\n\n  @media (max-width: 576px) {\n    width: 100%;\n  }\n}\n\n// Icon/brandmark sizing\n.extension-item-icon {\n  width: 28px;\n  height: 28px;\n}\n\n.extension-brandmark {\n  width: 20px;\n  height: 20px;\n  object-fit: contain;\n}\n\n// Toolbar brandmark (pinned state in step 4)\n.extension-toolbar-brandmark {\n  width: 16px;\n  height: 16px;\n  object-fit: contain;\n}\n\n// ============================================================================\n// Click Indicator Animation (same pattern as download page)\n// ============================================================================\n\n.click-indicator {\n  pointer-events: none;\n\n  .pointer-icon {\n    width: 48px;\n    height: 48px;\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .click-pulse {\n    width: 30px;\n    height: 30px;\n    top: -2px;\n    left: -2px;\n    opacity: 0;\n  }\n}\n\n// Step 1: Puzzle piece - mouse moves to target, clicks, snaps back\n.extension-puzzle-target {\n  .click-indicator {\n    .pointer-icon {\n      animation: puzzle-mouse-move 2.5s ease-out infinite;\n    }\n\n    .click-pulse {\n      animation: puzzle-click-pulse 2.5s ease-out infinite;\n    }\n  }\n}\n\n@keyframes puzzle-mouse-move {\n  // Start off-screen (bottom-right)\n  0% {\n    transform: translate(40px, 30px);\n  }\n  // Arrive at target (cursor tip on button)\n  30% {\n    transform: translate(-5px, -12px);\n  }\n  // Stay on target during clicks\n  70% {\n    transform: translate(-5px, -12px);\n  }\n  // Snap back instantly\n  70.1%, 100% {\n    transform: translate(40px, 30px);\n  }\n}\n\n@keyframes puzzle-click-pulse {\n  0%, 35% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n  40%, 50% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  55%, 65% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  70%, 100% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n}\n\n// Step 3: Pin button - mouse moves to target, clicks, snaps back\n.extension-pin-target {\n  .click-indicator {\n    .pointer-icon {\n      animation: pin-mouse-move 2.5s ease-out infinite;\n    }\n\n    .click-pulse {\n      animation: pin-click-pulse 2.5s ease-out infinite;\n    }\n  }\n}\n\n@keyframes pin-mouse-move {\n  // Start off-screen (bottom-right)\n  0% {\n    transform: translate(35px, 25px);\n  }\n  // Arrive at target (cursor tip on button)\n  30% {\n    transform: translate(-5px, -12px);\n  }\n  // Stay on target during clicks\n  70% {\n    transform: translate(-5px, -12px);\n  }\n  // Snap back instantly\n  70.1%, 100% {\n    transform: translate(35px, 25px);\n  }\n}\n\n@keyframes pin-click-pulse {\n  0%, 35% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n  40%, 50% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  55%, 65% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  70%, 100% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n}\n\n// ============================================================================\n// Steps Slideshow (mirrored from download page)\n// ============================================================================\n\n// Instruction step container\n.instruction-step-container {\n  min-height: 200px;\n}\n\n// Steps slideshow — uses a grid stack so all slides overlap in the same cell,\n// making the container always the height of the tallest slide (no jitter).\n.steps-slideshow {\n  position: relative;\n\n  .steps-slideshow-slides {\n    display: grid;\n\n    > .step-slide {\n      grid-area: 1 / 1;\n      text-align: center;\n      visibility: hidden;\n      opacity: 0;\n      transition: opacity 0.35s ease-out;\n      display: flex;\n      flex-direction: column;\n\n      &.active {\n        visibility: visible;\n        opacity: 1;\n      }\n\n      .step-number-badge,\n      .step-title {\n        align-self: center;\n      }\n\n      // The last child (visual content area) grows to fill remaining space\n      // and centers its content vertically\n      > :last-child {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n    }\n  }\n}\n\n// Big step number badge\n.step-number-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: var(--bs-primary);\n  color: #fff;\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n// Step title\n.step-title {\n  font-weight: 600;\n  margin-bottom: 1rem;\n}\n\n// Navigation bar\n.steps-slideshow-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--bs-border-color);\n}\n\n// Progress dots\n.steps-dots {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  .step-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: var(--bs-border-color);\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.2s;\n\n    &.active {\n      background: var(--bs-primary);\n      transform: scale(1.3);\n    }\n\n    &:hover:not(.active) {\n      background: var(--bs-secondary);\n    }\n  }\n}\n\n// Slide fade-in animation\n@keyframes step-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n",".extension-success-icon {\n  animation: success-appear 0.6s ease-out;\n}\n\n@keyframes success-appear {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  50% {\n    transform: scale(1.2);\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n.extension-url-bar {\n  min-width: 100px;\n}\n\n.extension-dropdown {\n  width: 280px;\n}\n@media (max-width: 576px) {\n  .extension-dropdown {\n    width: 100%;\n  }\n}\n\n.extension-item-icon {\n  width: 28px;\n  height: 28px;\n}\n\n.extension-brandmark {\n  width: 20px;\n  height: 20px;\n  object-fit: contain;\n}\n\n.extension-toolbar-brandmark {\n  width: 16px;\n  height: 16px;\n  object-fit: contain;\n}\n\n.click-indicator {\n  pointer-events: none;\n}\n.click-indicator .pointer-icon {\n  width: 48px;\n  height: 48px;\n}\n.click-indicator .pointer-icon svg {\n  width: 100%;\n  height: 100%;\n}\n.click-indicator .click-pulse {\n  width: 30px;\n  height: 30px;\n  top: -2px;\n  left: -2px;\n  opacity: 0;\n}\n\n.extension-puzzle-target .click-indicator .pointer-icon {\n  animation: puzzle-mouse-move 2.5s ease-out infinite;\n}\n.extension-puzzle-target .click-indicator .click-pulse {\n  animation: puzzle-click-pulse 2.5s ease-out infinite;\n}\n\n@keyframes puzzle-mouse-move {\n  0% {\n    transform: translate(40px, 30px);\n  }\n  30% {\n    transform: translate(-5px, -12px);\n  }\n  70% {\n    transform: translate(-5px, -12px);\n  }\n  70.1%, 100% {\n    transform: translate(40px, 30px);\n  }\n}\n@keyframes puzzle-click-pulse {\n  0%, 35% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n  40%, 50% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  55%, 65% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  70%, 100% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n}\n.extension-pin-target .click-indicator .pointer-icon {\n  animation: pin-mouse-move 2.5s ease-out infinite;\n}\n.extension-pin-target .click-indicator .click-pulse {\n  animation: pin-click-pulse 2.5s ease-out infinite;\n}\n\n@keyframes pin-mouse-move {\n  0% {\n    transform: translate(35px, 25px);\n  }\n  30% {\n    transform: translate(-5px, -12px);\n  }\n  70% {\n    transform: translate(-5px, -12px);\n  }\n  70.1%, 100% {\n    transform: translate(35px, 25px);\n  }\n}\n@keyframes pin-click-pulse {\n  0%, 35% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n  40%, 50% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  55%, 65% {\n    opacity: 0.8;\n    transform: translate(-5px, -12px) scale(1.3);\n  }\n  70%, 100% {\n    opacity: 0;\n    transform: translate(-5px, -12px) scale(0.5);\n  }\n}\n.instruction-step-container {\n  min-height: 200px;\n}\n\n.steps-slideshow {\n  position: relative;\n}\n.steps-slideshow .steps-slideshow-slides {\n  display: grid;\n}\n.steps-slideshow .steps-slideshow-slides > .step-slide {\n  grid-area: 1/1;\n  text-align: center;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.35s ease-out;\n  display: flex;\n  flex-direction: column;\n}\n.steps-slideshow .steps-slideshow-slides > .step-slide.active {\n  visibility: visible;\n  opacity: 1;\n}\n.steps-slideshow .steps-slideshow-slides > .step-slide .step-number-badge,\n.steps-slideshow .steps-slideshow-slides > .step-slide .step-title {\n  align-self: center;\n}\n.steps-slideshow .steps-slideshow-slides > .step-slide > :last-child {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.step-number-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: var(--bs-primary);\n  color: #fff;\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0.75rem;\n}\n\n.step-title {\n  font-weight: 600;\n  margin-bottom: 1rem;\n}\n\n.steps-slideshow-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 1.25rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--bs-border-color);\n}\n\n.steps-dots {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.steps-dots .step-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--bs-border-color);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  transition: background 0.2s, transform 0.2s;\n}\n.steps-dots .step-dot.active {\n  background: var(--bs-primary);\n  transform: scale(1.3);\n}\n.steps-dots .step-dot:hover:not(.active) {\n  background: var(--bs-secondary);\n}\n\n@keyframes step-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}"]}