@strands.gg/accui 1.7.3 → 1.9.0

package/dist/accui.css

@@ -1443,23 +1443,23 @@ input.pr-10[data-v-1fccfe97] {
 	background: #94a3b8;
 }
 
-.secured-footer[data-v-5202ff4e] {
+.secured-footer[data-v-6dfcdb8c] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding-top: 1rem;
   border-top: 1px solid #e5e7eb;
 }
-.secured-footer-with-content[data-v-5202ff4e] {
+.secured-footer-with-content[data-v-6dfcdb8c] {
   justify-content: space-between;
 }
-.secured-footer-centered[data-v-5202ff4e] {
+.secured-footer-centered[data-v-6dfcdb8c] {
   justify-content: center;
 }
-.secured-logo[data-v-5202ff4e] {
+.secured-logo[data-v-6dfcdb8c] {
   flex-shrink: 0;
 }
-.secured-logo-image[data-v-5202ff4e] {
+.secured-logo-image[data-v-6dfcdb8c] {
   height: 2rem;
 }
 
@@ -1874,76 +1874,76 @@ input.pr-10[data-v-1fccfe97] {
 }
 
 /* Simple fade transition - gentle and smooth */
-.fade-enter-active[data-v-6f6cb2ad],
-.fade-leave-active[data-v-6f6cb2ad] {
+.fade-enter-active[data-v-ba0feb8a],
+.fade-leave-active[data-v-ba0feb8a] {
   transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.fade-enter-from[data-v-6f6cb2ad],
-.fade-leave-to[data-v-6f6cb2ad] {
+.fade-enter-from[data-v-ba0feb8a],
+.fade-leave-to[data-v-ba0feb8a] {
   opacity: 0;
 }
 
 /* Smooth height transitions - handled entirely by JavaScript */
-.smooth-height-enter-active[data-v-6f6cb2ad],
-.smooth-height-leave-active[data-v-6f6cb2ad] {
+.smooth-height-enter-active[data-v-ba0feb8a],
+.smooth-height-leave-active[data-v-ba0feb8a] {
   /* JavaScript handles all transition logic */
 }
 
 /* Support block transition - gentle fade with subtle scale */
-.support-fade-enter-active[data-v-6f6cb2ad],
-.support-fade-leave-active[data-v-6f6cb2ad] {
+.support-fade-enter-active[data-v-ba0feb8a],
+.support-fade-leave-active[data-v-ba0feb8a] {
   transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.support-fade-enter-from[data-v-6f6cb2ad] {
+.support-fade-enter-from[data-v-ba0feb8a] {
   opacity: 0;
   transform: scale(0.97) translateY(8px);
 }
-.support-fade-leave-to[data-v-6f6cb2ad] {
+.support-fade-leave-to[data-v-ba0feb8a] {
   opacity: 0;
   transform: scale(0.99) translateY(-4px);
 }
-.support-fade-enter-to[data-v-6f6cb2ad],
-.support-fade-leave-from[data-v-6f6cb2ad] {
+.support-fade-enter-to[data-v-ba0feb8a],
+.support-fade-leave-from[data-v-ba0feb8a] {
   opacity: 1;
   transform: scale(1) translateY(0);
 }
 
 /* Expand transition - for alerts using modern height animation */
-.expand-enter-active[data-v-6f6cb2ad],
-.expand-leave-active[data-v-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a],
+.expand-leave-active[data-v-ba0feb8a] {
   overflow: hidden;
 }
 
 /* Modern browsers with interpolate-size support for expand */
 @supports (interpolate-size: allow-keywords) {
-.expand-enter-active[data-v-6f6cb2ad],
-  .expand-leave-active[data-v-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a],
+  .expand-leave-active[data-v-ba0feb8a] {
     interpolate-size: allow-keywords;
 }
-.expand-enter-active[data-v-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-leave-active[data-v-6f6cb2ad] {
+.expand-leave-active[data-v-ba0feb8a] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-enter-from[data-v-6f6cb2ad] {
+.expand-enter-from[data-v-ba0feb8a] {
     opacity: 0;
     height: 0;
     transform: scale(0.99) translateY(-2px);
 }
-.expand-leave-to[data-v-6f6cb2ad] {
+.expand-leave-to[data-v-ba0feb8a] {
     opacity: 0;
     height: 0;
     transform: scale(0.997) translateY(1px);
 }
-.expand-enter-to[data-v-6f6cb2ad],
-  .expand-leave-from[data-v-6f6cb2ad] {
+.expand-enter-to[data-v-ba0feb8a],
+  .expand-leave-from[data-v-ba0feb8a] {
     opacity: 1;
     height: auto;
     transform: scale(1) translateY(0);
@@ -1952,30 +1952,30 @@ input.pr-10[data-v-1fccfe97] {
 
 /* Fallback for expand in older browsers */
 @supports not (interpolate-size: allow-keywords) {
-.expand-enter-active[data-v-6f6cb2ad] {
+.expand-enter-active[data-v-ba0feb8a] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       max-height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-leave-active[data-v-6f6cb2ad] {
+.expand-leave-active[data-v-ba0feb8a] {
     transition: 
       opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
       max-height 550ms cubic-bezier(0.16, 1, 0.3, 1),
       transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.expand-enter-from[data-v-6f6cb2ad] {
+.expand-enter-from[data-v-ba0feb8a] {
     opacity: 0;
     max-height: 0;
     transform: scale(0.99) translateY(-2px);
 }
-.expand-leave-to[data-v-6f6cb2ad] {
+.expand-leave-to[data-v-ba0feb8a] {
     opacity: 0;
     max-height: 0;
     transform: scale(0.997) translateY(1px);
 }
-.expand-enter-to[data-v-6f6cb2ad],
-  .expand-leave-from[data-v-6f6cb2ad] {
+.expand-enter-to[data-v-ba0feb8a],
+  .expand-leave-from[data-v-ba0feb8a] {
     opacity: 1;
     max-height: 150px;
     transform: scale(1) translateY(0);
@@ -1983,7 +1983,7 @@ input.pr-10[data-v-1fccfe97] {
 }
 
 /* Loading pulse animation */
-@keyframes pulse-6f6cb2ad {
+@keyframes pulse-ba0feb8a {
 0%, 100% {
     opacity: 1;
 }
@@ -1991,12 +1991,12 @@ input.pr-10[data-v-1fccfe97] {
     opacity: 0.5;
 }
 }
-.animate-pulse[data-v-6f6cb2ad] {
-  animation: pulse-6f6cb2ad 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.animate-pulse[data-v-ba0feb8a] {
+  animation: pulse-ba0feb8a 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 /* Slide up animation for main container - elegant entrance */
-@keyframes slide-up-6f6cb2ad {
+@keyframes slide-up-ba0feb8a {
 from {
     opacity: 0;
     transform: translateY(24px) scale(0.96);
@@ -2008,12 +2008,12 @@ to {
     filter: blur(0px);
 }
 }
-.animate-slide-up[data-v-6f6cb2ad] {
-  animation: slide-up-6f6cb2ad 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.animate-slide-up[data-v-ba0feb8a] {
+  animation: slide-up-ba0feb8a 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Fade in animation for alerts - gentle appearance */
-@keyframes fade-in-6f6cb2ad {
+@keyframes fade-in-ba0feb8a {
 from {
     opacity: 0;
     transform: scale(0.97) translateY(6px);
@@ -2023,41 +2023,41 @@ to {
     transform: scale(1) translateY(0);
 }
 }
-.animate-fade-in[data-v-6f6cb2ad] {
-  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.animate-fade-in[data-v-ba0feb8a] {
+  animation: fade-in-ba0feb8a 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Email field spacing animation */
-.email-field-spacing[data-v-6f6cb2ad] {
+.email-field-spacing[data-v-ba0feb8a] {
   transition: margin-bottom 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.email-field-spacing.has-password[data-v-6f6cb2ad] {
+.email-field-spacing.has-password[data-v-ba0feb8a] {
   margin-bottom: 1rem; /* mb-4 equivalent */
 }
-.email-field-spacing.no-password[data-v-6f6cb2ad] {
+.email-field-spacing.no-password[data-v-ba0feb8a] {
   margin-bottom: 0;
 }
 
 /* Password field transitions now handled by JavaScript smooth-height system */
 
 /* Auth Container Styles */
-.auth-full-width[data-v-6f6cb2ad] {
+.auth-full-width[data-v-ba0feb8a] {
   width: 100%;
 }
-.auth-min-width[data-v-6f6cb2ad] {
-  min-width: 350px;
+.auth-min-width[data-v-ba0feb8a] {
+  min-width: 420px;
 }
-.auth-max-width[data-v-6f6cb2ad] {
+.auth-max-width[data-v-ba0feb8a] {
   max-width: 28rem;
 }
-.auth-center[data-v-6f6cb2ad] {
+.auth-center[data-v-ba0feb8a] {
   margin-left: auto;
   margin-right: auto;
 }
-.auth-slide-up[data-v-6f6cb2ad] {
-  animation: slide-up-6f6cb2ad 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.auth-slide-up[data-v-ba0feb8a] {
+  animation: slide-up-ba0feb8a 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.auth-card-modern[data-v-6f6cb2ad] {
+.auth-card-modern[data-v-ba0feb8a] {
   background: white;
   border-radius: 0.5rem;
   padding: 2rem;
@@ -2065,11 +2065,11 @@ to {
 }
 
 /* Header Styles */
-.auth-header[data-v-6f6cb2ad] {
+.auth-header[data-v-ba0feb8a] {
   text-align: center;
   margin-bottom: 2rem;
 }
-.auth-title[data-v-6f6cb2ad] {
+.auth-title[data-v-ba0feb8a] {
   font-size: 1.875rem;
   font-weight: 700;
   background: linear-gradient(135deg, #EA00A8 0%, #FF6B9D 100%);
@@ -2078,40 +2078,40 @@ to {
   -webkit-text-fill-color: transparent;
   margin-bottom: 0.5rem;
 }
-.auth-subtitle[data-v-6f6cb2ad] {
+.auth-subtitle[data-v-ba0feb8a] {
   color: #737373;
 }
 
 /* Tabs Container */
-.auth-tabs-container[data-v-6f6cb2ad] {
+.auth-tabs-container[data-v-ba0feb8a] {
   margin-bottom: 2rem;
 }
 
 /* OAuth Provider Styles */
-.auth-oauth-providers[data-v-6f6cb2ad] {
+.auth-oauth-providers[data-v-ba0feb8a] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
 }
-.auth-oauth-button[data-v-6f6cb2ad] {
+.auth-oauth-button[data-v-ba0feb8a] {
   /* Button styles will be handled by the UiButton component */
 }
-.auth-oauth-icon-container[data-v-6f6cb2ad] {
+.auth-oauth-icon-container[data-v-ba0feb8a] {
   width: 1.25rem;
   height: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.auth-oauth-icon[data-v-6f6cb2ad] {
+.auth-oauth-icon[data-v-ba0feb8a] {
   width: 1.25rem;
   height: 1.25rem;
 }
-.auth-oauth-github[data-v-6f6cb2ad] {
+.auth-oauth-github[data-v-ba0feb8a] {
   fill: currentColor;
 }
-.auth-oauth-generic-icon[data-v-6f6cb2ad] {
+.auth-oauth-generic-icon[data-v-ba0feb8a] {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: 50%;
@@ -2120,22 +2120,22 @@ to {
   align-items: center;
   justify-content: center;
 }
-.auth-oauth-generic-text[data-v-6f6cb2ad] {
+.auth-oauth-generic-text[data-v-ba0feb8a] {
   font-size: 0.75rem;
   font-weight: 600;
   color: #525252;
 }
-.auth-oauth-text[data-v-6f6cb2ad] {
+.auth-oauth-text[data-v-ba0feb8a] {
   font-weight: 500;
 }
 
 /* Divider Styles */
-.auth-divider[data-v-6f6cb2ad] {
+.auth-divider[data-v-ba0feb8a] {
   position: relative;
   margin: 1.5rem 0;
   text-align: center;
 }
-.auth-divider[data-v-6f6cb2ad]::before {
+.auth-divider[data-v-ba0feb8a]::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -2144,7 +2144,7 @@ to {
   height: 1px;
   background: #e5e5e5;
 }
-.auth-divider-text[data-v-6f6cb2ad] {
+.auth-divider-text[data-v-ba0feb8a] {
   background: white;
   padding: 0 1rem;
   color: #737373;
@@ -2154,61 +2154,61 @@ to {
 }
 
 /* Form Styles */
-.auth-form[data-v-6f6cb2ad] {
+.auth-form[data-v-ba0feb8a] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.auth-password-field[data-v-6f6cb2ad] {
+.auth-password-field[data-v-ba0feb8a] {
   margin-bottom: 1rem;
 }
-.auth-password-header[data-v-6f6cb2ad] {
+.auth-password-header[data-v-ba0feb8a] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.5rem;
 }
-.auth-password-label[data-v-6f6cb2ad] {
+.auth-password-label[data-v-ba0feb8a] {
   font-size: 0.875rem;
   font-weight: 500;
   color: #374151;
 }
 
 /* Alert Styles */
-.auth-success-alert[data-v-6f6cb2ad] {
+.auth-success-alert[data-v-ba0feb8a] {
   margin-top: 1.5rem;
-  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  animation: fade-in-ba0feb8a 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
-.auth-error-alert[data-v-6f6cb2ad] {
+.auth-error-alert[data-v-ba0feb8a] {
   margin-top: 1.5rem;
-  animation: fade-in-6f6cb2ad 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  animation: fade-in-ba0feb8a 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* Back Link Styles */
-.auth-back-link-container[data-v-6f6cb2ad] {
+.auth-back-link-container[data-v-ba0feb8a] {
   margin-top: 2rem;
   text-align: center;
 }
-.auth-back-link[data-v-6f6cb2ad] {
+.auth-back-link[data-v-ba0feb8a] {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
 }
-.auth-back-icon[data-v-6f6cb2ad] {
+.auth-back-icon[data-v-ba0feb8a] {
   width: 1rem;
   height: 1rem;
 }
 
 /* Support Text */
-.auth-support-text[data-v-6f6cb2ad] {
+.auth-support-text[data-v-ba0feb8a] {
   color: #a3a3a3;
   font-size: 0.875rem;
 }
 
 /* Modal-specific styles - removes border, radius, background, and padding */
-.auth-container-modal[data-v-6f6cb2ad] {
+.auth-container-modal[data-v-ba0feb8a] {
 }
-.auth-content-modal[data-v-6f6cb2ad] {
+.auth-content-modal[data-v-ba0feb8a] {
   /* Remove card styling when in modal */
   background: transparent;
   border: none;
@@ -4265,20 +4265,245 @@ to {
   max-width: 32rem;
 }
 
+/* Modal Header */
+.modal-header-content[data-v-60345e8c] {
+  text-align: center;
+}
+.modal-title[data-v-60345e8c] {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+  margin: 0 0 0.5rem 0;
+}
+.modal-subtitle[data-v-60345e8c] {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin: 0;
+}
+.strands-sessions-modal[data-v-60345e8c] {
+  max-width: 42rem;
+  min-width: 32rem;
+}
+
+/* Loading State */
+.sessions-loading[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  gap: 1rem;
+}
+.loading-text[data-v-60345e8c] {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* Empty State */
+.sessions-empty[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  text-align: center;
+}
+.empty-icon[data-v-60345e8c] {
+  color: #d1d5db;
+  margin-bottom: 1rem;
+}
+.empty-title[data-v-60345e8c] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+.empty-description[data-v-60345e8c] {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* Session Statistics */
+.session-stats[data-v-60345e8c] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: #f9fafb;
+  border-radius: 0.5rem;
+}
+.stat-card[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.stat-label[data-v-60345e8c] {
+  font-size: 0.75rem;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.stat-value[data-v-60345e8c] {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+/* Sessions List */
+.sessions-list[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.session-card[data-v-60345e8c] {
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: white;
+  transition: all 0.15s ease;
+}
+.session-card[data-v-60345e8c]:hover {
+  border-color: #d1d5db;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+.session-card.current-session[data-v-60345e8c] {
+  border-color: #a7f3d0;
+  background-color: #f0fdf9;
+}
+
+/* Session Header */
+.session-header[data-v-60345e8c] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+.session-device[data-v-60345e8c] {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  flex: 1;
+}
+.device-icon[data-v-60345e8c] {
+  padding: 0.5rem;
+  background-color: #f3f4f6;
+  border-radius: 0.375rem;
+  color: #6b7280;
+}
+.current-session .device-icon[data-v-60345e8c] {
+  background-color: #dcfce7;
+  color: #16a34a;
+}
+.device-info[data-v-60345e8c] {
+  flex: 1;
+}
+.device-name[data-v-60345e8c] {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #111827;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.current-badge[data-v-60345e8c] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  background-color: #dcfce7;
+  color: #15803d;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  border: 1px solid #bbf7d0;
+}
+.device-type[data-v-60345e8c] {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-top: 0.125rem;
+  text-transform: capitalize;
+}
+
+/* Session Details */
+.session-details[data-v-60345e8c] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-left: 3rem;
+}
+.detail-row[data-v-60345e8c] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: #6b7280;
+}
+.detail-icon[data-v-60345e8c] {
+  display: flex;
+  align-items: center;
+  color: #9ca3af;
+}
+.detail-text[data-v-60345e8c] {
+  flex: 1;
+}
+
+/* Bulk Actions */
+.bulk-actions[data-v-60345e8c] {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+.bulk-actions-hint[data-v-60345e8c] {
+  font-size: 0.75rem;
+  color: #6b7280;
+  text-align: center;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+.strands-sessions-modal[data-v-60345e8c] {
+    min-width: unset;
+    width: 100%;
+}
+.session-stats[data-v-60345e8c] {
+    grid-template-columns: 1fr 1fr;
+}
+.session-details[data-v-60345e8c] {
+    padding-left: 0;
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #f3f4f6;
+}
+}
+
+/* Current Session Button Styling */
+.current-session-button[data-v-60345e8c] {
+  border-color: #dc2626 !important;
+  color: #dc2626 !important;
+}
+.current-session-button[data-v-60345e8c]:hover {
+  background-color: #dc2626 !important;
+  color: white !important;
+}
+
 /* Container Styles */
-.profile-container-width[data-v-b880e15b] {
+.profile-container-width[data-v-dcc0db9b] {
   width: 100%;
 }
-.profile-max-width[data-v-b880e15b] {
+.profile-max-width[data-v-dcc0db9b] {
   max-width: 56rem;
 }
-.profile-centered[data-v-b880e15b] {
+.profile-centered[data-v-dcc0db9b] {
   margin: 0 auto;
 }
-.profile-animated[data-v-b880e15b] {
-  animation: slideUp-b880e15b 0.3s ease-out;
+.profile-animated[data-v-dcc0db9b] {
+  animation: slideUp-dcc0db9b 0.3s ease-out;
 }
-@keyframes slideUp-b880e15b {
+@keyframes slideUp-dcc0db9b {
 from {
     opacity: 0;
     transform: translateY(20px);
@@ -4288,12 +4513,12 @@ to {
     transform: translateY(0);
 }
 }
-.profile-content-layout[data-v-b880e15b] {
+.profile-content-layout[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-card-modern[data-v-b880e15b] {
+.profile-card-modern[data-v-dcc0db9b] {
   background: #ffffff;
   border: 1px solid #e5e7eb;
   border-radius: 1rem;
@@ -4302,10 +4527,10 @@ to {
 }
 
 /* Modal-specific styles */
-.profile-container-modal[data-v-b880e15b] {
+.profile-container-modal[data-v-dcc0db9b] {
   /* Remove any container-specific styles when in modal */
 }
-.profile-content-modal[data-v-b880e15b] {
+.profile-content-modal[data-v-dcc0db9b] {
   /* Remove card styling when in modal */
   background: transparent;
   border: none;
@@ -4315,39 +4540,39 @@ to {
 }
 
 /* Header */
-.profile-header[data-v-b880e15b] {
+.profile-header[data-v-dcc0db9b] {
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.profile-title[data-v-b880e15b] {
+.profile-title[data-v-dcc0db9b] {
   font-size: 1.5rem;
   font-weight: 700;
   color: #EA00A8;
 }
-.profile-subtitle[data-v-b880e15b] {
+.profile-subtitle[data-v-dcc0db9b] {
   color: #4b5563;
   font-size: 0.875rem;
 }
 
 /* Profile Image Section */
-.profile-image-section[data-v-b880e15b] {
+.profile-image-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.profile-image-container[data-v-b880e15b] {
+.profile-image-container[data-v-dcc0db9b] {
   position: relative;
 }
-.profile-image-wrapper[data-v-b880e15b] {
+.profile-image-wrapper[data-v-dcc0db9b] {
   position: relative;
   display: inline-block;
 }
-.profile-image-wrapper:hover .profile-upload-overlay[data-v-b880e15b] {
+.profile-image-wrapper:hover .profile-upload-overlay[data-v-dcc0db9b] {
   opacity: 1;
 }
-.profile-progress-ring[data-v-b880e15b] {
+.profile-progress-ring[data-v-dcc0db9b] {
   position: absolute;
   z-index: 10;
   top: 50%;
@@ -4355,22 +4580,22 @@ to {
   transform: translate(-50%, -50%);
   pointer-events: none;
 }
-.profile-avatar[data-v-b880e15b] {
+.profile-avatar[data-v-dcc0db9b] {
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
   position: relative;
 }
-.profile-avatar-with-image[data-v-b880e15b] {
+.profile-avatar-with-image[data-v-dcc0db9b] {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
-.profile-avatar-image[data-v-b880e15b] {
+.profile-avatar-image[data-v-dcc0db9b] {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
-.profile-avatar-initials[data-v-b880e15b] {
+.profile-avatar-initials[data-v-dcc0db9b] {
   background-color: #EA00A8;
   display: flex;
   align-items: center;
@@ -4381,7 +4606,7 @@ to {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
   z-index: 10;
 }
-.profile-upload-overlay[data-v-b880e15b] {
+.profile-upload-overlay[data-v-dcc0db9b] {
   position: absolute;
   inset: 0;
   border-radius: 50%;
@@ -4395,64 +4620,64 @@ to {
   border: none;
   cursor: pointer;
 }
-.profile-upload-overlay[data-v-b880e15b]:disabled {
+.profile-upload-overlay[data-v-dcc0db9b]:disabled {
   cursor: not-allowed;
 }
-.profile-upload-icon[data-v-b880e15b] {
+.profile-upload-icon[data-v-dcc0db9b] {
   width: 1.5rem;
   height: 1.5rem;
   color: white;
 }
-.profile-file-input[data-v-b880e15b] {
+.profile-file-input[data-v-dcc0db9b] {
   display: none;
 }
 
 /* Profile Form */
-.profile-form[data-v-b880e15b] {
+.profile-form[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
-.profile-form-grid[data-v-b880e15b] {
+.profile-form-grid[data-v-dcc0db9b] {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
 }
 @media (min-width: 768px) {
-.profile-form[data-v-b880e15b] {
+.profile-form[data-v-dcc0db9b] {
     gap: 1.5rem;
 }
-.profile-form-grid[data-v-b880e15b] {
+.profile-form-grid[data-v-dcc0db9b] {
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
 }
-.profile-title[data-v-b880e15b] {
+.profile-title[data-v-dcc0db9b] {
     font-size: 1.875rem;
 }
-.profile-subtitle[data-v-b880e15b] {
+.profile-subtitle[data-v-dcc0db9b] {
     font-size: 1rem;
 }
 }
 
 /* Section Styles */
-.profile-section[data-v-b880e15b] {
+.profile-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-section[data-v-b880e15b] {
+.profile-section[data-v-dcc0db9b] {
     gap: 1rem;
 }
 }
-.profile-section-title[data-v-b880e15b] {
+.profile-section-title[data-v-dcc0db9b] {
   font-size: 1.125rem;
   font-weight: 600;
   color: #111827;
 }
 
 /* Setting Cards */
-.profile-setting-card[data-v-b880e15b] {
+.profile-setting-card[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4460,49 +4685,49 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-setting-header[data-v-b880e15b] {
+.profile-setting-header[data-v-dcc0db9b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-.profile-setting-title[data-v-b880e15b] {
+.profile-setting-title[data-v-dcc0db9b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-setting-subtitle[data-v-b880e15b] {
+.profile-setting-subtitle[data-v-dcc0db9b] {
   font-size: 0.875rem;
   color: #4b5563;
 }
 
 /* Transitions */
-.expand-enter-active[data-v-b880e15b] {
+.expand-enter-active[data-v-dcc0db9b] {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
-.expand-leave-active[data-v-b880e15b] {
+.expand-leave-active[data-v-dcc0db9b] {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
 }
-.expand-enter-from[data-v-b880e15b] {
+.expand-enter-from[data-v-dcc0db9b] {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
 }
-.expand-leave-to[data-v-b880e15b] {
+.expand-leave-to[data-v-dcc0db9b] {
   max-height: 0;
   opacity: 0;
   transform: translateY(-10px);
 }
-.expand-enter-to[data-v-b880e15b],
-.expand-leave-from[data-v-b880e15b] {
+.expand-enter-to[data-v-dcc0db9b],
+.expand-leave-from[data-v-dcc0db9b] {
   max-height: 300px;
   opacity: 1;
   transform: translateY(0);
 }
 
 /* MFA Device Chip */
-.mfa-device-chip[data-v-b880e15b] {
+.mfa-device-chip[data-v-dcc0db9b] {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
@@ -4514,15 +4739,32 @@ to {
   transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 }
 
+/* MFA Chip Color Variants */
+.mfa-device-chip.chip-blue[data-v-dcc0db9b] {
+  background-color: #eff6ff;
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+.mfa-device-chip.chip-green[data-v-dcc0db9b] {
+  background-color: #f0fdf4;
+  color: #15803d;
+  border-color: #bbf7d0;
+}
+.mfa-device-chip.chip-purple[data-v-dcc0db9b] {
+  background-color: #faf5ff;
+  color: #7c3aed;
+  border-color: #e9d5ff;
+}
+
 
 /* New semantic classes for Tailwind conversion */
-.profile-change-form[data-v-b880e15b] {
+.profile-change-form[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   overflow: hidden;
 }
-.profile-field-section[data-v-b880e15b] {
+.profile-field-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -4530,76 +4772,76 @@ to {
   background-color: #f9fafb;
   border-radius: 0.75rem;
 }
-.profile-field-header[data-v-b880e15b] {
+.profile-field-header[data-v-dcc0db9b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
 }
-.profile-field-header-vertical[data-v-b880e15b] {
+.profile-field-header-vertical[data-v-dcc0db9b] {
   align-items: flex-start;
   gap: 1rem;
 }
-.profile-password-section[data-v-b880e15b] {
+.profile-password-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 @media (min-width: 768px) {
-.profile-password-section[data-v-b880e15b] {
+.profile-password-section[data-v-dcc0db9b] {
     gap: 1rem;
 }
 }
-.profile-mfa-content[data-v-b880e15b] {
+.profile-mfa-content[data-v-dcc0db9b] {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
-.profile-mfa-chips[data-v-b880e15b] {
+.profile-mfa-chips[data-v-dcc0db9b] {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
-.profile-actions-section[data-v-b880e15b] {
+.profile-actions-section[data-v-dcc0db9b] {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   padding-top: 1.5rem;
   border-top: 1px solid #e5e7eb;
-  animation: slideUp-b880e15b 0.3s ease-out;
+  animation: slideUp-dcc0db9b 0.3s ease-out;
 }
 @media (min-width: 640px) {
-.profile-actions-section[data-v-b880e15b] {
+.profile-actions-section[data-v-dcc0db9b] {
     flex-direction: row;
 }
 }
-.profile-help-item[data-v-b880e15b] {
+.profile-help-item[data-v-dcc0db9b] {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
 }
-.profile-help-icon[data-v-b880e15b] {
+.profile-help-icon[data-v-dcc0db9b] {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
-.profile-footer-actions[data-v-b880e15b] {
+.profile-footer-actions[data-v-dcc0db9b] {
   display: flex;
   gap: 1rem;
   align-items: stretch;
 }
-.profile-action-icon[data-v-b880e15b] {
+.profile-action-icon[data-v-dcc0db9b] {
   width: 1rem;
   height: 1rem;
 }
-.profile-footer-text[data-v-b880e15b] {
+.profile-footer-text[data-v-dcc0db9b] {
   color: #9ca3af;
   font-size: 0.875rem;
 }
 
 /* Avatar Editor Modal */
-.profile-avatar-modal-overlay[data-v-b880e15b] {
+.profile-avatar-modal-overlay[data-v-dcc0db9b] {
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -4609,7 +4851,7 @@ to {
   z-index: 50;
   padding: 1rem;
 }
-.profile-avatar-modal[data-v-b880e15b] {
+.profile-avatar-modal[data-v-dcc0db9b] {
   background-color: #ffffff;
   border-radius: 0.75rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
@@ -4618,18 +4860,18 @@ to {
   max-height: 90vh;
   overflow-y: auto;
 }
-.profile-avatar-modal-content[data-v-b880e15b] {
+.profile-avatar-modal-content[data-v-dcc0db9b] {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
-.profile-avatar-modal-header[data-v-b880e15b] {
+.profile-avatar-modal-header[data-v-dcc0db9b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.profile-avatar-modal-close[data-v-b880e15b] {
+.profile-avatar-modal-close[data-v-dcc0db9b] {
   color: #9ca3af;
   transition: color 0.2s ease;
   background: none;
@@ -4638,54 +4880,188 @@ to {
   padding: 0.25rem;
   border-radius: 0.25rem;
 }
-.profile-avatar-modal-close[data-v-b880e15b]:hover {
+.profile-avatar-modal-close[data-v-dcc0db9b]:hover {
   color: #4b5563;
 }
-.profile-avatar-modal-close-icon[data-v-b880e15b] {
+.profile-avatar-modal-close-icon[data-v-dcc0db9b] {
   width: 1.5rem;
   height: 1.5rem;
 }
 
 /* Profile field styles */
-.profile-field-title[data-v-b880e15b] {
+.profile-field-title[data-v-dcc0db9b] {
   font-weight: 500;
   color: #111827;
 }
-.profile-field-subtitle[data-v-b880e15b] {
+.profile-field-subtitle[data-v-dcc0db9b] {
   font-size: 0.875rem;
   color: #6b7280;
 }
-.profile-availability-message[data-v-b880e15b] {
+.profile-availability-message[data-v-dcc0db9b] {
   font-size: 0.75rem;
 }
-.profile-availability-message.success[data-v-b880e15b] {
+.profile-availability-message.success[data-v-dcc0db9b] {
   color: #16a34a;
 }
-.profile-availability-message.error[data-v-b880e15b] {
+.profile-availability-message.error[data-v-dcc0db9b] {
   color: #dc2626;
 }
-.profile-toggle-container[data-v-b880e15b] {
+.profile-toggle-container[data-v-dcc0db9b] {
   flex-shrink: 0;
 }
-.profile-alert-message[data-v-b880e15b] {
+.profile-alert-message[data-v-dcc0db9b] {
   font-weight: 500;
 }
-.profile-modal-title[data-v-b880e15b] {
+.profile-modal-title[data-v-dcc0db9b] {
   font-size: 1.25rem;
   font-weight: 700;
   color: #111827;
 }
 
 /* Sign out button styles */
-.profile-sign-out-button[data-v-b880e15b] {
+.profile-sign-out-button[data-v-dcc0db9b] {
   width: 100%;
 }
 @media (min-width: 640px) {
-.profile-sign-out-button[data-v-b880e15b] {
+.profile-sign-out-button[data-v-dcc0db9b] {
     width: auto;
 }
 }
 
+/* Sessions Modal Styles */
+.sessions-modal[data-v-dcc0db9b] {
+  min-width: 32rem;
+  max-width: 48rem;
+}
+.session-current-badge[data-v-dcc0db9b] {
+  background-color: #dcfdf7;
+  color: #065f46;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid #a7f3d0;
+}
+.modal-header[data-v-dcc0db9b] {
+  margin-bottom: 1.5rem;
+}
+.modal-title[data-v-dcc0db9b] {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 0.5rem;
+}
+.modal-subtitle[data-v-dcc0db9b] {
+  color: #6b7280;
+}
+.sessions-content[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.session-stats[data-v-dcc0db9b] {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #f9fafb;
+  border-radius: 0.5rem;
+}
+.stat-item[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+.stat-label[data-v-dcc0db9b] {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+.stat-value[data-v-dcc0db9b] {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #111827;
+}
+.sessions-list[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.sessions-loading[data-v-dcc0db9b] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  justify-content: center;
+  color: #6b7280;
+}
+.sessions-empty[data-v-dcc0db9b] {
+  text-align: center;
+  padding: 2rem;
+  color: #6b7280;
+}
+.session-card[data-v-dcc0db9b] {
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background-color: #ffffff;
+}
+.session-card-header[data-v-dcc0db9b] {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+}
+.session-device-info[data-v-dcc0db9b] {
+  flex: 1;
+}
+.session-device-name[data-v-dcc0db9b] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 0.25rem;
+}
+.session-card-details[data-v-dcc0db9b] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.session-detail-row[data-v-dcc0db9b] {
+  display: flex;
+  gap: 0.5rem;
+}
+.detail-label[data-v-dcc0db9b] {
+  font-weight: 500;
+  color: #6b7280;
+  min-width: 6rem;
+}
+.detail-value[data-v-dcc0db9b] {
+  color: #111827;
+}
+.session-actions[data-v-dcc0db9b] {
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+}
+@media (max-width: 640px) {
+.sessions-modal[data-v-dcc0db9b] {
+    min-width: auto;
+    width: 100%;
+    margin: 1rem;
+}
+.session-stats[data-v-dcc0db9b] {
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.session-card-header[data-v-dcc0db9b] {
+    flex-direction: column;
+    gap: 0.75rem;
+}
+.detail-label[data-v-dcc0db9b] {
+    min-width: 5rem;
+}
+}
+
 /* Override accui- prefixed Tailwind classes with CSS properties */
 .accui-w-full[data-v-0943ff6b] {
   width: 100%;