/* Player */

 .player-container {
   max-width: 690px;
   height: 400px;
   padding: 24px;
   background-image: url('/imgs/audio-player-bg.jpg');
   background-size: cover;
   background-position: center;
   border-radius: 24px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
 }

 /* Glassmorphism Audio Player Bar Capsule */
 .audio-player-bar {
   width: 100%;
   height: 72px;
   background: rgba(12, 12, 12, 0.75);
   backdrop-filter: blur(28px) saturate(180%);
   -webkit-backdrop-filter: blur(28px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   display: flex;
   align-items: center;
   padding: 0 16px 0 12px;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   user-select: none;
 }

 /* Left: Track Info Section */
 .track-info {
   display: flex;
   align-items: center;
   min-width: 190px;
   column-gap: 12px;
 }

 .album-art-wrapper {
   position: relative;
   width: 48px;
   height: 48px;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }

 /* Colorful gradient resembling album art in mockup */
 .album-art {
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #ee9ca7 100%);
   position: relative;
 }

 /* Create the grainy overlay on the album art */
 .album-art::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('/imgs/audio-player-bg.jpg');
   background-size: cover;
   background-position: center;
   opacity: 0.55;
   mix-blend-mode: color-burn;
 }

 .metadata {
   margin-left: 12px;
   display: flex;
   flex-direction: column;
   margin-top: 8px;
 }

 .track-title {
   color: #ffffff;
   font-size: 14px;
   font-weight: 600;
   line-height: 22px;
   margin: 0;
 }

 .track-artist {
   color: rgba(255, 255, 255, 0.8);
   font-size: 12px;
   font-weight: 400;
   margin-top: 2px;
   line-height: 12px;
 }

 /* Play/Pause Button */
 .play-pause-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #ffffff;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 12px;
   flex-shrink: 0;
   transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }

 .play-pause-btn:hover {
   transform: scale(1.06);
   background-color: #f3f3f7;
 }

 .play-pause-btn:active {
   transform: scale(0.96);
 }

 .play-pause-icon {
   width: 16px;
   height: 16px;
   color: #16161a;
   transition: transform 0.15s ease;
 }

 /* Center: Interactive Waveform & Duration Wrapper */
 .waveform-wrapper {
   display: flex;
   align-items: center;
   flex-grow: 1;
   height: 100%;
 }

 /* Group container holding the bars and time closely together */
 .waveform-time-group {
   display: flex;
   align-items: center;
   gap: 12px;
   /* Exactly 12px gap between waveform bars and duration text */
   padding: 0 12px;
   /* 12px space on the left side next to play/pause */
   height: 100%;
 }

 .waveform-container {
   display: flex;
   align-items: center;
   gap: 2px;
   /* 2px gap between individual bars */
   height: 100%;
   cursor: pointer;
 }

 .track-duration {
   font-size: 11px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.6);
   /* Small secondary color text */
   letter-spacing: 0.5px;
   flex-shrink: 0;
 }



 .waveform-bar {
   width: 2px;
   background-color: rgba(255, 255, 255, 0.4);
   border-radius: 9999px;
   transition:
     transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
     background-color 0.2s ease,
     height 0.25s cubic-bezier(0.25, 1, 0.5, 1),
     box-shadow 0.2s ease;
   transform-origin: center;
 }

 /* Active bars have white background */
 .waveform-bar.active {
   background-color: #ffffff;
 }

 /* Hovering an individual waveform line makes it grow taller and glow */
 .waveform-bar:hover {
   transform: scaleY(1.4);
   background-color: #ffffff !important;
 }


 /* Right Section Container */
 .controls-right {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
 }

 /* Volume Layout Wrapper (maintains spacing in the document bar flow) */
 .volume-container-wrapper {
   position: relative;
   width: 38px;
   height: 38px;
   flex-shrink: 0;
 }

 /* Volume Capsule (absolute positioned inside the wrapper to expand over waveform) */
 .volume-control-capsule {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 20;
   /* High z-index to overlay waveform */
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   border-radius: 9999px;
   padding: 6px;
   height: 38px;
   box-sizing: border-box;
   width: 38px;
   /* Standby width (matches wrapper) */
   overflow: hidden;
   transition:
     width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
     background-color 0.25s ease,
     border-color 0.25s ease,
     padding 0.35s cubic-bezier(0.25, 1, 0.5, 1),
     box-shadow 0.35s ease;
 }

 /* Hovering volume wrapper triggers absolute capsule width expansion to the left */
 .volume-container-wrapper:hover .volume-control-capsule {
   width: 140px;
   /* Expanded width */
   background: rgba(12, 12, 12, 1);
   padding-right: 4px;
   /* Drop shadow over waveform */
 }

 /* Volume Slider Wrapper - controls opacity and width scaling */
 .volume-slider-wrapper {
   width: 0;
   opacity: 0;
   overflow: hidden;
   transition:
     width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
     opacity 0.25s ease;
   display: flex;
   align-items: center;
   height: 100%;
 }

 .volume-container-wrapper:hover .volume-slider-wrapper {
   width: 82px;
   opacity: 1;
   margin: 0 8px;
 }


 /* Custom Range Input (No Knob) */
 .volume-slider {
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
   width: 82px;
   height: 26px;
   /* Larger hover target container */
   cursor: pointer;
   outline: none;
   display: flex;
   align-items: center;
 }

 /* Webkit Track Styling */
 .volume-slider::-webkit-slider-runnable-track {
   width: 100%;
   height: 4px;
   /* Normal height */
   border-radius: 9999px;
   /* Use linear-gradient with custom CSS variable updated in JS */
   background: linear-gradient(to right,
       #ffffff var(--vol-percent, 75%),
       rgba(255, 255, 255, 0.25) var(--vol-percent, 75%));
   transition: height 0.2s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* Hovering the slider makes it vertically bigger */
 .volume-slider:hover::-webkit-slider-runnable-track {
   height: 8px;
 }

 /* Hide Thumb for Webkit */
 .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 0;
   height: 0;
   background: transparent;
   border: none;
 }

 /* Firefox Track Styling */
 .volume-slider::-moz-range-track {
   width: 100%;
   height: 4px;
   border-radius: 9999px;
   background: linear-gradient(to right,
       #ffffff var(--vol-percent, 75%),
       rgba(255, 255, 255, 0.25) var(--vol-percent, 75%));
   transition: height 0.2s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .volume-slider:hover::-moz-range-track {
   height: 8px;
 }

 /* Hide Thumb for Firefox */
 .volume-slider::-moz-range-thumb {
   width: 0;
   height: 0;
   background: transparent;
   border: none;
 }

 /* Volume Button (Icon) */
 .volume-toggle-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   width: 32px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
   opacity: 0.95;
   transition: opacity 0.2s ease, transform 0.15s ease;
   flex-shrink: 0;
 }

 .volume-toggle-btn:hover {
   opacity: 1;
   transform: scale(1.05);
 }

 .volume-toggle-btn:active {
   transform: scale(0.95);
 }

 .volume-icon-svg {
   width: 20px;
   height: 20px;
 }

 /* Volume Wave States managed by JS classes */
 .volume-icon-svg .mute-cross {
   display: none;
 }

 /* 0% volume */
 .volume-icon-svg.muted .mute-cross {
   display: block;
 }

 .volume-icon-svg.muted .volume-wave {
   display: none !important;
 }

 /* 1% - 49% volume */
 .volume-icon-svg.low-volume .wave-2 {
   display: none;
 }

 .volume-icon-svg.low-volume .wave-1 {
   display: block;
 }

 .volume-icon-svg.low-volume .mute-cross {
   display: none;
 }

 /* 50% - 100% volume */
 .volume-icon-svg.high-volume .wave-1,
 .volume-icon-svg.high-volume .wave-2 {
   display: block;
 }

 .volume-icon-svg.high-volume .mute-cross {
   display: none;
 }

 /* Options Button (...) */
 .options-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.8);
   transition: color 0.2s ease, transform 0.15s ease;
 }

 .options-btn:hover {
   color: #ffffff;
   transform: scale(1.08);
 }

 .options-icon {
   width: 20px;
   height: 20px;
 }

 /* Responsive Media Queries for Mobile Screens */
 @media (max-width: 600px) {
   .player-container {
     height: 360px;
     padding: 16px;
   }

   .audio-player-bar {
     display: grid;
     grid-template-columns: auto 1fr auto;
     /* 3 columns for Play, Waveform, Volume */
     height: auto;
     padding: 18px;
     border-radius: 20px;
     row-gap: 16px;
     column-gap: 8px;
     /* Tighter spacing for mobile */
     position: relative;
   }

   .track-info {
     grid-column: 1 / -1;
     /* Spans across all columns */
     width: calc(100% - 36px);
     /* Leave room for absolute options button */
   }

   .album-art-wrapper {
     display: none;
     /* Hide album art on smaller screens */
   }

   .metadata {
     margin-left: 0;
     /* Align text to the left margin of the bar */
   }

   .waveform-wrapper {
     grid-column: 2;
     /* Waveform wrapper sits in the middle */
     padding: 0 4px;
     height: 36px;
     width: 100%;
   }

   .waveform-time-group {
     padding: 0;
   }

   .play-pause-btn {
     grid-column: 1;
     /* Play/Pause button on the left */
     margin-left: 0;
   }

   .controls-right {
     grid-column: 3;
     /* Volume controls on the right */
     justify-self: end;
     display: flex;
     align-items: center;
     gap: 12px;
   }

   .options-btn {
     position: absolute;
     top: 18px;
     right: 25px;
   }

   .track-duration {
     display: none;
   }

 }




 /* Sidebar */

 :root {
   /* Colors matching screenshot */
   --bg-page: #08090b;
   --bg-app: #191919;
   --bg-sidebar: #161616;
   --border-sidebar: rgba(255, 255, 255, 0.05);

   --text-idle: #969696;
   --text-hover: #e4e4e7;
   --text-active: #fbfbfb;

   --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

   --indicator-gradient: linear-gradient(90deg, rgba(40, 40, 40, 1) 0%, rgba(30, 30, 30, 1) 100%);
   --indicator-border: rgba(255, 255, 255, 0.08);
   --accent-color: #3b82f6;
 }

 .player-container,
 .player-container *,
 .dashboard-container,
 .dashboard-container *,
 .sandbox-ai-prompt-container,
 .sandbox-ai-prompt-container *,
 .sandbox-balance-container,
 .sandbox-balance-container *,
 .sandbox-calendar-container,
 .sandbox-calendar-container *,
 .sandbox-color-picker-container,
 .sandbox-color-picker-container *,
 .empty-container,
 .empty-container * {
   box-sizing: border-box;
   margin: 0;

 }

 .metadata {
   row-gap: 4px;
 }


 .player-container,
 .dashboard-container,
 .empty-container,
 .sandbox-ai-prompt-container,
 .sandbox-calendar-container {
   border-radius: var(--radius-lg, 24px);
   box-shadow: var(--shadow-elevated);
   border: 1px solid rgb(34 34 34);
 }

 .empty-container {
   color: var(--text-idle);
   background-color: var(--bg-app);
   max-width: 690px;
   height: 400px;
   display: flex;
   overflow: hidden;
   position: relative;
   container-type: inline-size;
   align-items: center;
   justify-content: center;
 }


 /* Container div max-width 680px and responsive */
 .dashboard-container {
   max-width: 690px;
   height: 400px;
   background-color: var(--bg-app);
   display: flex;
   overflow: hidden;
   position: relative;
   container-type: inline-size;
 }

 /* --- SIDEBAR STYLE --- */
 .sidebar {
   width: 220px;
   background-color: var(--bg-sidebar);
   border-right: 1px solid var(--border-sidebar);
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   z-index: 10;
   transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
   flex-shrink: 0;
 }

 .sidebar.collapsed {
   width: 68px;
 }

 /* Sidebar Header */
 .sidebar-header {
   height: 72px;
   padding: 0 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .sidebar.collapsed .sidebar-header {
   justify-content: center;
   padding: 0;
   height: 72px;
 }

 .sidebar.collapsed .toggle-btn {
   display: none;
 }

 .sidebar.collapsed .logo-group {
   cursor: e-resize;
 }

 .sidebar.collapsed .logo-group:hover {
   transform: scale(1.08);
 }

 /* Tooltips */
 [data-tooltip]::after {
   content: attr(data-tooltip);
   position: absolute;
   left: calc(100% + 8px);
   top: 50%;
   transform: translateY(-50%) scale(0.9);
   background-color: #131313;
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: #ffffff;
   padding: 0px 8px;
   font-size: 12px;
   font-weight: 500;
   border-radius: 8px;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
   z-index: 999;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 }

 [data-tooltip]::before {
   content: '';
   position: absolute;
   left: calc(100% + 4px);
   top: 50%;
   transform: translateY(-50%);
   border-width: 4px 4px 4px 0;
   border-style: solid;
   border-color: transparent #17181c transparent transparent;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
   z-index: 999;
 }

 /* Hover States for Tooltips */
 .sidebar [data-tooltip].is-tooltip-visible::after,
 .sidebar [data-tooltip].is-tooltip-visible::before,
 .sidebar [data-tooltip]:focus-visible::after,
 .sidebar [data-tooltip]:focus-visible::before {
   opacity: 1;
   transform: translateY(-50%) scale(1);
 }

 .sidebar.is-tooltip-chain [data-tooltip]::after,
 .sidebar.is-tooltip-chain [data-tooltip]::before {
   transition: none;
 }

 /* Prevent tooltip from showing when sidebar is expanded */
 .sidebar:not(.collapsed) .logo-group::after,
 .sidebar:not(.collapsed) .logo-group::before,
 .sidebar:not(.collapsed) .menu-item[data-tooltip]::after,
 .sidebar:not(.collapsed) .menu-item[data-tooltip]::before {
   display: none !important;
 }

 /* Brand Logo */
 .logo-group {
   display: flex;
   align-items: center;
   gap: 10px;
   user-select: none;
   transition: opacity 0.2s ease, transform 0.2s ease;
   position: relative;
 }

 .logo-svg {
   width: 24px;
   height: 24px;
   color: #ffffff;
   flex-shrink: 0;
 }

 .logo-name {
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0.5px;
   color: #ffffff;
   white-space: nowrap;
   transition: opacity 0.15s ease, width 0.15s ease;
 }

 .sidebar.collapsed .logo-name {
   opacity: 0;
   width: 0;
   pointer-events: none;
 }

 /* Toggle Button */
 .toggle-btn {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: none;
   border: none;
   color: var(--text-idle);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: w-resize;
   transition: all 0.2s ease;
   flex-shrink: 0;
   outline: none;
   position: relative;
   /* ensure tooltip is relative to it */
 }

 .toggle-btn:hover {
   color: var(--text-hover);
   background-color: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.15);
 }

 .toggle-icon {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   stroke-width: 2px;
   transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .sidebar.collapsed .toggle-icon {
   transform: rotate(180deg);
 }

 /* Sidebar Menu */
 .sidebar-menu {
   padding: 16px 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
   position: relative;
   flex-grow: 1;
 }

 /* Sliding background indicator */
 .active-indicator {
   position: absolute;
   top: 0;
   left: 12px;
   right: 12px;
   border-radius: 12px;
   background: var(--indicator-gradient);

   pointer-events: none;
   z-index: 1;
   opacity: 0;
   /* hidden initially until placed */
   transition:
     transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
     height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
     opacity 0.15s ease;
 }


 /* Menu Items */
 .menu-item {
   display: flex;
   align-items: center;
   width: calc(100% - 24px);
   height: 44px;
   margin: 0 12px;
   padding: 0 12px;
   background: transparent;
   border: none;
   border-radius: 12px;
   color: var(--text-idle);
   font-family: var(--font-sans);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   position: relative;
   z-index: 2;
   box-sizing: border-box;
   text-align: left;
   transition: color 0.2s ease;
   outline: none;
   -webkit-tap-highlight-color: transparent;
 }

 .menu-item svg {
   width: 20px;
   height: 20px;
   stroke: var(--text-idle);
   stroke-width: 1.8px;
   transition: stroke 0.2s ease;
   flex-shrink: 0;
 }

 .menu-item .label {
   margin-left: 12px;
   opacity: 1;
   transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
   white-space: nowrap;
   font-size: 14px;
   font-weight: 500;
 }

 .menu-item .badge {
   margin-left: auto;
   line-height: 22px;
   font-size: 11px;
   height: 22px;
   font-weight: 500;
   color: var(--text-idle);
   background-color: rgba(255, 255, 255, 0.05);
   padding: 0px 8px;
   border-radius: 6px;
   transition: opacity 0.15s ease, transform 0.15s ease;
 }

 /* Muted colors & hover states */
 .menu-item:hover {
   color: var(--text-hover);
 }

 .menu-item:hover svg {
   stroke: var(--text-hover);
 }

 .menu-item:hover .badge {
   color: var(--text-hover);
   background-color: rgba(255, 255, 255, 0.08);
 }

 /* Selected state colors */
 .menu-item.active {
   color: var(--text-active);
 }

 .menu-item.active svg {
   stroke: var(--text-active);
 }

 .menu-item.active .badge {
   color: var(--text-active);
   background-color: rgba(255, 255, 255, 0.12);
 }

 /* Collapsed menu item layout overrides */
 .sidebar.collapsed .menu-item {
   width: 44px;
   height: 44px;
   margin: 0 auto;
   padding: 0;
   justify-content: center;
 }

 .sidebar.collapsed .menu-item .label {
   opacity: 0;
   width: 0;
   margin: 0;
   pointer-events: none;
   position: absolute;
 }

 .sidebar.collapsed .menu-item .badge {
   opacity: 0;
   transform: scale(0.6);
   pointer-events: none;
   position: absolute;
 }

 /* --- DASHBOARD CONTENT STYLE --- */
 .main-content {
   flex-grow: 1;
   padding: 24px;
   position: relative;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
 }

 /* Tab content transitions */
 .tab-content {
   position: absolute;
   top: 24px;
   left: 24px;
   right: 24px;
   bottom: 24px;
   opacity: 0;
   pointer-events: none;
   transition:
     opacity 0.80s cubic-bezier(0.2, 0.8, 0.2, 1),
     transform 0.80s cubic-bezier(0.2, 0.8, 0.2, 1);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: 16px;
 }

 .tab-content.active {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
 }

 .dashboard-container h2 {
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 4px;
   letter-spacing: -0.2px;
 }

 .subtitle {
   font-size: 13px;
   color: var(--text-idle);
   margin-bottom: 8px;
 }

 /* Cards */
 .card-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   padding-bottom: 24px;
 }

 .card {
   background-color: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.04);
   border-radius: 12px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .card-title {
   font-size: 12px;
   color: var(--text-idle);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .card-val {
   font-size: 20px;
   font-weight: 600;
 }

 .card-change {
   font-size: 11px;
   color: #3FECB3;
   display: flex;
   align-items: center;
   gap: 4px;
 }

 /* Accounts Tab content list */
 .acc-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding-bottom: 20px;
 }

 .acc-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.04);
   padding: 12px 16px;
   border-radius: 10px;
 }

 .acc-name {
   font-size: 14px;
   font-weight: 500;
 }

 .acc-value {
   font-size: 12px;
 }

 .acc-details {
   font-size: 12px;
   color: var(--text-idle);
 }

 .acc-balance {
   font-size: 15px;
   font-weight: 600;
   text-align: right;
 }

 .acc-badge {
   height: 20px;
   font-size: 10px;
   line-height: 20px;
   background-color: rgba(16, 185, 129, 0.1);
   color: #10b981;
   padding: 0px 8px;
   border-radius: 4px;
   display: inline-block;
   margin-top: 4px;
 }

 /* Holdings Tab items */
 .holding-item {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 6px;
 }

 .holding-info {
   display: flex;
   justify-content: space-between;
 }

 .holding-name {
   font-size: 14px;
 }

 .holding-val {
   font-weight: 600;
   font-size: 14px;
 }

 .progress-bar {
   height: 6px;
   background-color: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
   overflow: hidden;
   position: relative;
 }

 .progress-fill {
   height: 100%;
   border-radius: 3px;
   width: 0;
   transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .progress-fill.stocks {
   background: linear-gradient(90deg, #6366f1, #3b82f6);
 }

 .progress-fill.crypto {
   background: linear-gradient(90deg, #a855f7, #6366f1);
 }

 .progress-fill.cash {
   background: linear-gradient(90deg, #10b981, #34d399);
 }

 /* Trigger width transition when Holdings tab is active */
 .tab-content.active .progress-fill.stocks {
   width: 62%;
 }

 .tab-content.active .progress-fill.crypto {
   width: 23%;
 }

 .tab-content.active .progress-fill.cash {
   width: 15%;
 }

 /* Net Worth Chart Graphic */
 .chart-container {
   background-color: rgba(255, 255, 255, 0.01);
   border: 1px solid rgba(255, 255, 255, 0.03);
   border-radius: 12px;
   padding: 16px;
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .net-worth-chart {
   width: 100%;
   max-height: 180px;
   overflow: visible;
 }

 .chart-line {
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .tab-content.active .chart-line {
   stroke-dashoffset: 0;
 }

 @keyframes pulse {
   0% {
     r: 5px;
     opacity: 1;
   }

   100% {
     r: 15px;
     opacity: 0;
   }
 }

 .pulse {
   animation: pulse 2s infinite ease-out;
   transform-origin: center;
 }

 /* Container query for responsiveness */
 @container (max-width: 540px) {
   .sidebar {
     width: 68px !important;
   }

   .logo-name {
     display: none !important;
   }

   .toggle-btn {
     display: none !important;
   }

   .sidebar-header {
     justify-content: center !important;
     padding: 0 !important;
     height: 72px !important;
   }

   .menu-item {
     width: 44px !important;
     height: 44px !important;
     margin: 0 auto !important;
     padding: 0 !important;
     justify-content: center !important;
   }

   .menu-item .label,
   .menu-item .badge {
     display: none !important;
   }

   /* Hide tooltips on mobile container */
   [data-tooltip]::after,
   [data-tooltip]::before {
     display: none !important;
   }

   .acc-item {
     flex-wrap: wrap;
   }

   .acc-balance {
     text-align: left;
   }

 }

 @container (max-width: 540px) {

   .card-grid {
     grid-template-columns: repeat(1, 1fr);
   }





 }

 /* --- COLOR PICKER DESIGN SYSTEM --- */
 .sandbox-color-picker-container {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #191919;
   border-radius: 24px;
   height: 400px;
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
   transition: background-color 0.35s cubic-bezier(0.25, 1, 0.5, 1);
   box-shadow: var(--shadow-elevated);
   border: 1px solid rgb(34 34 34);
 }

 .sandbox-color-picker-controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: rgba(20, 20, 20, 0.85);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   padding: 10px 10px 10px 16px;
   border-radius: 99px;
   height: 64px;
   width: 100%;
   box-sizing: border-box;
   z-index: 10;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }

 .sandbox-slider-wrapper {
   flex-grow: 1;
   display: flex;
   align-items: center;
   margin-right: 16px;
 }

 .sandbox-color-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 38px;
   border-radius: 9999px;
   outline: none;
   cursor: pointer;
   margin: 0;
   padding: 0;
   background: linear-gradient(to right, #b2ebf2, #00e5ff);
   /* Fallback */
   transition: background 0.1s ease;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 /* Chrome/Safari thumb */
 .sandbox-color-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 2px solid #fbfbfb;
   background: transparent;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   cursor: pointer;
   transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .sandbox-color-slider::-webkit-slider-thumb:hover {
   transform: scale(1.15);
 }

 /* Firefox thumb */
 .sandbox-color-slider::-moz-range-thumb {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 2px solid #fbfbfb;
   background: transparent;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   cursor: pointer;
   transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
 }

 .sandbox-color-slider::-moz-range-thumb:hover {
   transform: scale(1.15);
 }

 .sandbox-wheel-wrapper {
   position: relative;
   width: 44px;
   height: 44px;
   flex-shrink: 0;
   cursor: pointer;
 }

 .sandbox-native-color {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   cursor: pointer;
   z-index: 5;
 }

 .sandbox-wheel-btn {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
   border: 1px solid #111111;
   box-sizing: border-box;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease;
 }

 .sandbox-wheel-wrapper:hover .sandbox-wheel-btn {
   transform: scale(1.1);

 }

 /* Copy Button Styling */
 .sandbox-copy-btn {
   position: absolute;
   bottom: 20px;
   right: 20px;
   background-color: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 0px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   padding: 8px 14px;
   color: #fbfbfb;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 120px;
   font-family: var(--font-sans);
   font-size: 14px !important;
   font-weight: 500;
   transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);

   outline: none;
   z-index: 10;
 }

 .sandbox-copy-btn span {
   font-size: 14px !important;
 }

 .sandbox-copy-btn:hover {
   background-color: rgba(0, 0, 0, 0.4);
   transform: scale(1.02);
 }

 .sandbox-copy-btn:active {
   transform: scale(0.95);
 }

 .sandbox-copy-btn svg {
   stroke: #fbfbfb;
   transition: stroke 0.2s ease;
 }

 .sandbox-copy-btn:hover svg {
   stroke: #fbfbfb;
 }

 /* --- BALANCE CARD DESIGN --- */
 .sandbox-balance-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: var(--bg-app);
   border-radius: 24px;
   height: 400px;
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
   box-shadow: var(--shadow-elevated);
   border: 1px solid rgb(34 34 34);
   container-type: inline-size;
 }

 .balance-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }

 .balance-title {
   font-size: 20px;
   font-weight: 600;
   color: #D5D7D9;
 }

 .balance-segmented-control {
    display: flex;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    position: relative;
  }

  .balance-active-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    background-color: #ffffff;
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 0;
  }

  .balance-segment-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 2px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    position: relative;
    z-index: 1;
  }

  .balance-segment-btn:hover {
    color: rgba(255, 255, 255, 0.8);
  }

  .balance-segment-btn.active {
    color: #191919;
  }

 .balance-body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
   margin-top: 10px;
   margin-bottom: 20px;
 }

 .balance-amount-display {
   display: flex;
   align-items: flex-start;
   gap: 6px;
   will-change: filter;
 }

 .balance-currency-symbol {
   font-size: 40px;
   font-weight: 500;
   color: #ffffff;
   margin-top: 14px;
   line-height: 1;
   width: 32px;
   text-align: center;
 }

 .balance-value {
   font-size: 96px;
   font-weight: 500;
   color: #ffffff;
   line-height: 0.95;
   letter-spacing: -0.03em;
 }

 .balance-secondary {
   font-size: 18px;
   color: #969696;
   margin-top: 12px;
   font-weight: 500;
   padding-left: 2px;
 }

 .balance-footer {
   display: flex;
   justify-content: flex-start;
   width: 100%;
 }

 .balance-btn {
   background-color: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: #ffffff;
   padding: 10px 24px;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
   outline: none;
 }

 .balance-btn:hover {
   background-color: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15);
 }

 .balance-btn:active {
   transform: scale(0.96);
 }

 /* Responsive Container Queries for smaller/responsive cards */
 @container (max-width: 500px) {
   .balance-value {
     font-size: 76px;
   }

   .balance-currency-symbol {
     font-size: 32px;
     margin-top: 10px;
   }

   .balance-secondary {
     font-size: 16px;
   }
 }

 @container (max-width: 380px) {
   .balance-value {
     font-size: 58px;
   }

   .balance-currency-symbol {
     font-size: 26px;
     margin-top: 8px;
   }
 }

 /* --- CALENDAR DESIGN --- */
 .sandbox-calendar-container {
   --cal-accent: #fbfbfb;
   --cal-text: #fbfbfb;
   --cal-muted: #fbfbfb;
   --cal-outside: #808080;

   display: flex;
   flex-direction: column;
   justify-content: center;
   background-color: var(--bg-app);
   border-radius: 24px;
   height: 400px;
   width: 100%;
   max-width: 690px;
   padding: 28px 32px;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
   container-type: inline-size;
 }

 .sandbox-calendar-container.is-month-scrolling {
   overflow: visible;
   z-index: 2;
 }

 .sandbox-calendar-container.is-month-scrolling .cal-body {
   overflow: visible;
 }

 .calendar-figure {
   overflow: hidden;
 }

 .sandbox-calendar {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   gap: 20px;
   padding-bottom: 20px;
 }

 .cal-body {
   flex: 1;
   min-height: 0;
   overflow: hidden;
   touch-action: pan-y;
 }

 .cal-body.is-swiping {
   touch-action: none;
 }

 .cal-swipe-track {
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   gap: 4px;
   will-change: transform, filter;
   filter: blur(0px);
   transition: filter 0.12s ease-out;
 }

 .cal-swipe-track.is-animating {
   transition:
     transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
     filter 0.08s ease-out;
   filter: blur(2px);
 }

 @media (prefers-reduced-motion: reduce) {
   .cal-swipe-track.is-animating {
     filter: none;
   }
 }

 .cal-header {
   display: grid;
   grid-template-columns: 32px 1fr 32px;
   align-items: center;
   width: 100%;
 }

 .cal-nav-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   padding: 0;
   border: none;
   background: transparent;
   color: var(--cal-text);
   cursor: pointer;
   border-radius: 8px;
   transition: background-color 0.2s ease, color 0.2s ease;
 }

 .cal-nav-btn:hover {
   background-color: rgba(255, 255, 255, 0.06);
   color: var(--cal-accent);
 }

 .cal-nav-btn:focus-visible {
   outline: 2px solid var(--cal-accent);
   outline-offset: 2px;
 }

 .cal-nav-btn svg {
   width: 16px;
   height: 16px;
   stroke: currentColor;
 }

 .cal-month-label {
   text-align: center;
   font-size: 18px;
   font-weight: 600;
   line-height: 1.2;
   color: var(--cal-text);
   letter-spacing: 0.01em;
 }

 .cal-weekdays,
 .cal-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   width: 100%;
 }

 .cal-weekdays {
   margin-bottom: 0;
   flex-shrink: 0;
 }

 .cal-weekday {
   text-align: center;
   font-size: 11px;
   font-weight: 500;
   line-height: 1;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--cal-muted);
   padding: 4px 0;
 }

 .cal-grid {
   flex: 1;
   grid-template-rows: repeat(6, 1fr);
   row-gap: 2px;
   column-gap: 2px;
 }

 .cal-day {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 6px 0 0;
   border: none;
   background: transparent;
   color: var(--cal-text);
   cursor: pointer;
   border-radius: 8px;
   min-height: 0;
   transition: background-color 0.15s ease;
 }

 .cal-day:hover {
   background-color: rgba(255, 255, 255, 0.04);
 }

 .cal-day.is-today {
   background-color: #fbfbfb;
 }

 .cal-day.is-today:hover,
 .cal-day.is-today.is-outside:hover {
   background-color: #fbfbfb;
 }

 .cal-day:focus-visible {
   outline: 2px solid var(--cal-accent);
   outline-offset: -2px;
 }

 .cal-day.is-outside {
   color: var(--cal-outside);
   cursor: default;
 }

 .cal-day.is-outside:hover {
   background-color: transparent;
 }

 .cal-day-num {
   font-size: 15px;
   font-weight: 400;
   line-height: 1;
   color: inherit;
 }

 .cal-day-marker {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 6px;
   min-height: 6px;
 }

 .cal-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background-color: var(--cal-accent);
 }

 .cal-underline {
   display: block;
   width: 14px;
   height: 2px;
   border-radius: 1px;
   background-color: var(--cal-accent);
 }

 .cal-day.is-today .cal-day-num,
 .cal-day.is-today:hover .cal-day-num,
 .cal-day.is-today.is-outside .cal-day-num,
 .cal-day.is-today.is-outside:hover .cal-day-num {
   font-weight: 500;
   color: #191919;
 }

 .cal-day.is-today .cal-underline,
 .cal-day.is-today:hover .cal-underline,
 .cal-day.is-today.is-outside .cal-underline,
 .cal-day.is-today.is-outside:hover .cal-underline {
   background-color: #191919;
 }

 .cal-holiday-label {
   position: absolute;
   left: 32px;
   right: 32px;
   bottom: 14px;
   text-align: center;
   font-size: 12px;
   line-height: 1.3;
   color: var(--cal-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
 }

 @container (max-width: 500px) {
   .sandbox-calendar-container {
     padding: 20px 16px;
   }

   .cal-month-label {
     font-size: 16px;
   }

   .cal-weekday {
     font-size: 10px;
   }

   .cal-day-num {
     font-size: 13px;
   }

   .sandbox-calendar {
     gap: 14px;
   }
 }

 @container (max-width: 360px) {
   .sandbox-calendar-container {
     padding: 16px 10px;
   }

   .cal-weekday {
     letter-spacing: 0.02em;
     font-size: 9px;
   }

   .cal-day-num {
     font-size: 12px;
   }
 }

 /* --- AI PROMPT INPUT --- */
 .sandbox-ai-prompt-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: var(--bg-app);
   border-radius: 24px;
   height: 400px;
   width: 100%;
   max-width: 690px;
   padding: 24px;
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
   container-type: inline-size;
   font-family: var(--font-sans);
 }

 .sandbox-ai-prompt-container:has(.ai-prompt-tools-btn.is-open),
 .sandbox-ai-prompt-container:has(.ai-prompt-box.is-processing) {
   overflow: visible;
   z-index: 20;
 }

 .ai-prompt-heading {
   font-size: 22px;
   font-weight: 500;
   color: var(--text-active);
   text-align: center;
   margin-bottom: 28px;
   letter-spacing: -0.01em;
 }

 .ai-prompt-box {
   position: relative;
   width: 100%;
   max-width: 560px;
   --ai-prompt-box-bg-top: #2e2e2e;
   --ai-prompt-box-bg-bottom: #252525;
   background: linear-gradient(180deg, var(--ai-prompt-box-bg-top) 0%, var(--ai-prompt-box-bg-bottom) 100%);
   border-radius: 28px;
   border: 1px solid;
   border-color: rgba(255, 255, 255, 0.08);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
   padding: 8px 14px 14px 14px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   transition: box-shadow 0.2s ease;
 }

 .ai-prompt-box.is-processing {
   border-color: transparent;
   box-shadow: none;
   overflow: visible;
 }

 .ai-prompt-border-glow {
   display: none;
   position: absolute;
   top: -1px;
   right: -1px;
   bottom: -1px;
   left: -1px;
   border-radius: 28px;
   pointer-events: none;
   z-index: 0;
   overflow: hidden;
   -webkit-clip-path: inset(0 round 28px);
   clip-path: inset(0 round 28px);
 }

 .ai-prompt-box.is-processing .ai-prompt-border-glow {
   display: block;
 }

 .ai-prompt-border-glow-animated {
   position: absolute;
   top: 0;
   left: 0;
   width: 220%;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(
     90deg,
     rgba(255, 255, 255, 0.08) 0%,
     rgba(125, 180, 255, 0.55) 20%,
     rgba(180, 150, 255, 0.55) 40%,
     rgba(255, 170, 210, 0.45) 60%,
     rgba(125, 180, 255, 0.55) 80%,
     rgba(255, 255, 255, 0.08) 100%
   );
   will-change: transform;
 }

 .ai-prompt-border-glow-cover {
   position: absolute;
   top: 1px;
   right: 1px;
   bottom: 1px;
   left: 1px;
   border-radius: 27px;
   background: linear-gradient(180deg, var(--ai-prompt-box-bg-top) 0%, var(--ai-prompt-box-bg-bottom) 100%);
 }

 .ai-prompt-box.is-processing > *:not(.ai-prompt-border-glow) {
   position: relative;
   z-index: 1;
 }

 .ai-prompt-box.is-focused {
   
   box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08),
   0 4px 2px rgba(0, 0, 0, 0.08),
   0 8px 4px rgba(0, 0, 0, 0.08),
   0 16px 8px rgba(0, 0, 0, 0.08),
   0 32px 16px rgba(0, 0, 0, 0.08);
 }

 .ai-prompt-attachments {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 6px;
 }

 .ai-prompt-attachment {
   position: relative;
   width: 72px;
   height: 72px;
   border-radius: 12px;
   overflow: hidden;
   flex-shrink: 0;
 }

 .ai-prompt-attachment img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 12px;
 }

 .ai-prompt-attachment-remove {
   position: absolute;
   top: 4px;
   right: 4px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: none;
   background: rgba(0, 0, 0, 0.65);
   color: #fff;
   font-size: 14px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.15s ease, background-color 0.15s ease;
 }

 .ai-prompt-attachment:hover .ai-prompt-attachment-remove,
 .ai-prompt-attachment-remove:focus-visible {
   opacity: 1;
 }

 .ai-prompt-attachment-remove:hover {
   background: rgba(0, 0, 0, 0.85);
 }

 .ai-prompt-input-wrap {
   position: relative;
   width: 100%;
   z-index: 1;
 }

 .ai-prompt-processing-label {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
   font-family: var(--font-sans);
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: normal;
   pointer-events: none;
   user-select: none;
 }

 .ai-prompt-processing-label[hidden] {
   display: none !important;
 }

 .ai-prompt-processing-label:not([hidden]) {
   display: block;
   width: 100%;
 }

 .ai-prompt-processing-shimmer {
   display: inline-block;
   font-family: var(--font-sans);
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: normal;
   color: #969696;
   -webkit-text-fill-color: #969696;
   will-change: opacity, background-position;
 }

 .sandbox-ai-prompt-container.use-gradient-shimmer .ai-prompt-processing-shimmer {
   background: linear-gradient(
     90deg,
     #969696 0%,
     #969696 40%,
     rgba(255, 255, 255, 0.92) 50%,
     #969696 60%,
     #969696 100%
   );
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
 }

 .ai-prompt-input {
   width: 100%;
   min-height: 28px;
   max-height: 120px;
   background: transparent;
   border: none;
   outline: none;
   resize: none;
   color: var(--text-active);
   font-family: var(--font-sans);
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   padding: 0;
   overflow-y: auto;
 }

 .ai-prompt-input::placeholder {
   color: var(--text-idle);
 }

 .ai-prompt-input:disabled {
   cursor: default;
 }

 .ai-prompt-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 4px;
 }

 .ai-prompt-toolbar-left,
 .ai-prompt-toolbar-right {
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .ai-prompt-icon-btn {
   width: 32px;
   height: 32px;
   border: none;
   background: transparent;
   color: var(--text-idle);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color 0.15s ease, background-color 0.15s ease;
 }

 .ai-prompt-icon-btn svg {
   width: 18px;
   height: 18px;
 }

 .ai-prompt-icon-btn:hover {
   color: var(--text-hover);
   background-color: rgba(255, 255, 255, 0.06);
 }

 .ai-prompt-attach-wrap,
 .ai-prompt-tools-wrap,
 .ai-prompt-tooltip-wrap {
   position: relative;
 }

 .ai-prompt-tooltip {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%) translateY(4px) scale(0.9);
   background-color: #131313;
   border: 1px solid rgba(255, 255, 255, 0.08);
   color: #ffffff;
   font-size: 12px;
   font-weight: 500;
   padding: 0 8px;
   line-height: 24px;
   border-radius: 8px;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   transition:
     opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
     transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
     visibility 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
   z-index: 20;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 }

 .ai-prompt-tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-width: 4px 4px 0 4px;
   border-style: solid;
   border-color: #17181c transparent transparent transparent;
   pointer-events: none;
 }

 .ai-prompt-attach-wrap.is-tooltip-visible .ai-prompt-tooltip,
 .ai-prompt-tooltip-wrap.is-tooltip-visible .ai-prompt-tooltip,
 .ai-prompt-tooltip-wrap:has(.ai-prompt-send-btn):focus-within .ai-prompt-tooltip {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0) scale(1);
 }

 #sandboxAiPrompt.is-tooltip-chain .ai-prompt-tooltip {
   transition: none;
 }

 .ai-prompt-tools-btn {
   width: auto;
   padding: 0 12px 0 10px;
   gap: 6px;
   border-radius: 999px;
 }

 .ai-prompt-tools-label {
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
   white-space: nowrap;
 }

 .ai-prompt-tools-btn.is-open {
   color: var(--text-hover);
   background-color: rgba(255, 255, 255, 0.06);
 }

 .ai-prompt-tools-menu {
   position: absolute;
   bottom: calc(100% + 10px);
   left: 0;
   min-width: 220px;
   background: #333333;
   border: 1px solid;
   border-color: rgba(255, 255, 255, 0.08);
   border-radius: 15px;
   padding: 4px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
   z-index: 100;
   transform-origin: bottom left;
   animation: ai-prompt-menu-in 80ms ease-out;
   font-size: 16px;
 }

 @keyframes ai-prompt-menu-in {
   from {
     opacity: 0;
     transform: scale(0.96) translateY(4px);
   }

   to {
     opacity: 1;
     transform: scale(1) translateY(0);
   }
 }

 .ai-prompt-tools-item {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   padding: 10px 12px;
   border: none;
   border-radius: 10px;
   background: transparent;
   color: var(--text-active);
   font-family: var(--font-sans);
   font-size: 16px;
   font-weight: 400;
   text-align: left;
   cursor: pointer;
   transition: background-color 0.12s ease;
 }

 .ai-prompt-tools-item svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   color: currentColor;
 }

 .ai-prompt-tools-item span:first-of-type {
   flex: 1;
   font-size: 14px;
   line-height: 1.25;
 }

 .ai-prompt-tools-item:hover,
 .ai-prompt-tools-item:focus-visible {
   background: rgba(255, 255, 255, 0.08);
 }

 .ai-prompt-tools-item.is-selected {
   background: rgba(255, 255, 255, 0.1);
 }

 .ai-prompt-send-btn {
   width: 34px;
   height: 34px;
   border: none;
   border-radius: 50%;
   background: #1a1a1a;
   color: var(--text-idle);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
   flex-shrink: 0;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
 }

 .ai-prompt-send-btn svg {
   width: 18px;
   height: 18px;
 }

 .ai-prompt-processing-icon {
   display: none;
 }

 .ai-prompt-send-btn.is-processing .ai-prompt-send-icon {
   display: none;
 }

 .ai-prompt-send-btn.is-processing .ai-prompt-processing-icon {
   display: block;
   animation: ai-prompt-spin 0.8s linear infinite;
 }

 @keyframes ai-prompt-spin {
   to {
     transform: rotate(360deg);
   }
 }

 .ai-prompt-box.is-processing .ai-prompt-input {
   opacity: 0;
   cursor: default;
   pointer-events: none;
 }

 .ai-prompt-box.is-processing .ai-prompt-toolbar-left,
 .ai-prompt-box.is-processing .ai-prompt-mic-btn {
   opacity: 0.45;
   pointer-events: none;
 }

 .ai-prompt-send-btn:not(:disabled) {
   background: #ffffff;
   color: #191919;
   cursor: pointer;
 }

 .ai-prompt-send-btn:not(:disabled):hover {
   transform: scale(1.06);
 }

 .ai-prompt-send-btn:not(:disabled):active {
   transform: scale(0.96);
 }

 .ai-prompt-send-btn:disabled {
   cursor: not-allowed;
   opacity: 0.85;
 }

 .ai-prompt-send-btn.is-processing {
   background: #ffffff;
   color: #191919;
   opacity: 1;
   cursor: default;
 }

 .ai-prompt-send-btn.is-processing:hover,
 .ai-prompt-send-btn.is-processing:active {
   transform: none;
 }

 .ai-prompt-mic-btn .ai-prompt-audio-icon {
   display: none;
   width: 18px;
   height: 18px;
 }

 .ai-prompt-mic-btn.is-listening .ai-prompt-mic-icon {
   display: none;
 }

 .ai-prompt-mic-btn.is-listening .ai-prompt-audio-icon {
   display: block;
 }

 .ai-prompt-mic-btn.is-listening {
   color: var(--text-active);
   background-color: rgba(255, 255, 255, 0.06);
 }

 @container (max-width: 480px) {
   .sandbox-ai-prompt-container {
     padding: 24px 16px;
   }

   .ai-prompt-heading {
     font-size: 18px;
     margin-bottom: 20px;
   }

 }