opus-react 0.3.6 → 0.3.7

package/dist/index.css

@@ -5927,6 +5927,308 @@
   margin: 0;
 }
 
+.opus_ADVJmy_root[data-variant="card"] {
+  --tabs-card-border: color-mix(in srgb, #4a5068 36%, color-mix(in srgb, var(--opus-accent) 8%, #2a2f3d));
+  --tabs-card-rail-bg: color-mix(in srgb, var(--dashboard-section-bg, var(--opus-panel)) 84%, #05070f 16%);
+  --tabs-card-active-fill: color-mix(in srgb,
+    var(--opus-accent) 10%,
+    color-mix(in srgb, var(--dashboard-section-panel, var(--opus-panel)) 78%, #0b0f1a 22%));
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+}
+
+[data-preview-root][data-theme="light"] .opus_ADVJmy_root[data-variant="card"], [data-theme="light"] .opus_ADVJmy_root[data-variant="card"], [data-shell-theme="light"] .opus_ADVJmy_root[data-variant="card"] {
+  --tabs-card-border: color-mix(in srgb, var(--opus-border) 72%, var(--opus-accent) 28%);
+  --tabs-card-rail-bg: color-mix(in srgb,
+    var(--dashboard-section-bg, var(--opus-panel)) 58%,
+    color-mix(in srgb, var(--opus-accent) 6%, #d7dceb) 42%);
+  --tabs-card-active-fill: color-mix(in srgb,
+    var(--opus-accent) 4%,
+    var(--dashboard-section-panel, var(--opus-input-fill, #fff)));
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_header {
+  --tabs-card-tab-height: 43px;
+  --tabs-card-rail-pad-top: 10px;
+  box-sizing: border-box;
+  min-height: calc(var(--tabs-card-tab-height) + var(--tabs-card-rail-pad-top) + 1px);
+  padding-top: var(--tabs-card-rail-pad-top);
+  border-bottom: 1px solid var(--tabs-card-border);
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+}
+
+[data-preview-root][data-theme="light"] .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled .opus_ADVJmy_tabLabel, [data-theme="light"] .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled .opus_ADVJmy_tabLabel, [data-shell-theme="light"] .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled .opus_ADVJmy_tabLabel {
+  color: color-mix(in srgb, var(--opus-muted) 28%, transparent);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_list {
+  align-items: stretch;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab {
+  z-index: 1;
+  width: auto;
+  min-width: 0;
+  height: var(--tabs-card-tab-height);
+  color: var(--dashboard-section-muted, var(--opus-muted));
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  flex: none;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0 0 -1px;
+  padding: 0 52px 0 46px;
+  font-size: .88rem;
+  font-weight: 650;
+  transition: color .42s cubic-bezier(.22, 1, .36, 1), z-index 0s linear .2s;
+  display: flex;
+  position: relative;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab + .opus_ADVJmy_tab {
+  margin-left: -56px;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled {
+  cursor: not-allowed;
+  opacity: .58;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled .opus_ADVJmy_tabLabel {
+  color: color-mix(in srgb, var(--dashboard-section-muted, var(--opus-muted)) 34%, transparent);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled .opus_ADVJmy_tabShape path {
+  fill: color-mix(in srgb, var(--tabs-card-rail-bg) 92%, var(--opus-muted) 8%);
+  stroke: color-mix(in srgb, var(--tabs-card-border) 28%, transparent);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled .opus_ADVJmy_cardTabLine {
+  opacity: 0;
+  transform: scaleX(.82);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled:hover, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:disabled:focus-visible {
+  color: var(--dashboard-section-muted, var(--opus-muted));
+  outline: none;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tabShape {
+  z-index: -1;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tabShape svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tabShape path {
+  fill: #0000;
+  stroke: #0000;
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+  transition: fill .42s cubic-bezier(.22, 1, .36, 1), stroke .42s cubic-bezier(.22, 1, .36, 1);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tabLabel {
+  z-index: 1;
+  transition: color .42s cubic-bezier(.22, 1, .36, 1);
+  position: relative;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab[aria-selected="true"] {
+  z-index: 3;
+  color: var(--dashboard-section-text, var(--opus-text));
+  transition: color .42s cubic-bezier(.22, 1, .36, 1), z-index;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab[aria-selected="true"] .opus_ADVJmy_tabShape path {
+  fill: var(--tabs-card-active-fill);
+  stroke: var(--tabs-card-border);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_cardTabLine {
+  --tab-active-line-width: calc(100% - 88px);
+  --tab-active-line-min-width: 0;
+  width: var(--tab-active-line-width);
+  opacity: 0;
+  transform-origin: 0 100%;
+  transition: opacity .36s cubic-bezier(.22, 1, .36, 1), transform .42s cubic-bezier(.22, 1, .36, 1);
+  bottom: 0;
+  left: 46px;
+  right: auto;
+  transform: scaleX(.82);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab[aria-selected="true"] .opus_ADVJmy_cardTabLine {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab:focus-visible {
+  outline: 2px solid var(--opus-accent);
+  outline-offset: -4px;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_trailing {
+  box-sizing: border-box;
+  height: calc(var(--tabs-card-tab-height) + var(--tabs-card-rail-pad-top));
+  margin-top: calc(-1 * var(--tabs-card-rail-pad-top));
+  flex-wrap: nowrap;
+  align-self: stretch;
+  align-items: center;
+  padding: 0 14px 0 0;
+  display: flex;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_trailing button {
+  white-space: nowrap;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panel {
+  box-sizing: border-box;
+  background: var(--tabs-card-active-fill);
+  min-width: 0;
+  min-height: 0;
+  box-shadow: none;
+  color: inherit;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border)) transparent;
+  border: 0;
+  border-radius: 0;
+  flex-direction: column;
+  flex: auto;
+  padding: 0;
+  display: flex;
+  position: relative;
+  overflow: auto;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panel::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border));
+  border-radius: 999px;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panel::-webkit-scrollbar-track {
+  background: none;
+}
+
+.opus_ADVJmy_root[data-variant="card"][data-card-panel-padding="true"] .opus_ADVJmy_panel {
+  flex-direction: column;
+  padding: 8px 14px 28px;
+  display: flex;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent {
+  box-sizing: border-box;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform-origin: top;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border)) transparent;
+  z-index: 0;
+  padding: 8px 14px 28px;
+  transition: opacity .38s cubic-bezier(.22, 1, .36, 1), transform .46s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s;
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  transform: translate3d(0, 10px, 0) scale(.985);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent[data-active="true"] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  z-index: 1;
+  transition: opacity .42s cubic-bezier(.16, 1, .3, 1), transform .48s cubic-bezier(.16, 1, .3, 1), visibility;
+  transform: translate3d(0, 0, 0) scale(1);
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent::-webkit-scrollbar {
+  width: 8px;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border));
+  border-radius: 999px;
+}
+
+.opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent::-webkit-scrollbar-track {
+  background: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab[aria-selected="true"], .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tabLabel, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tabShape path, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_cardTabLine, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent[data-active="true"] {
+    transition: none;
+  }
+
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_cardTabLine, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent, .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_panelContent[data-active="true"] {
+    transform: none;
+  }
+}
+
+@media (width <= 1100px) {
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_trailing {
+    border-top: 1px solid var(--opus-border);
+    justify-content: flex-start;
+    align-self: stretch;
+    height: auto;
+    margin-top: 0;
+    padding: 10px 16px;
+  }
+}
+
+@media (width <= 760px) {
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_list {
+    width: 100%;
+  }
+
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab {
+    flex: auto;
+    width: auto;
+    min-width: 0;
+    padding: 0 40px;
+  }
+
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tab + .opus_ADVJmy_tab {
+    margin-left: -48px;
+  }
+
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_tabShape {
+    inset: 0 4px;
+  }
+
+  .opus_ADVJmy_root[data-variant="card"] .opus_ADVJmy_trailing {
+    flex-wrap: wrap;
+  }
+}
+
 @media (width <= 680px) {
   .opus_ADVJmy_root[data-orientation="vertical"] {
     grid-template-columns: 1fr;
@@ -8907,18 +9209,462 @@
   overflow: hidden;
 }
 
-/* components/ImageThumbnail/ImageThumbnail.module.css */
-.opus_Gp1o-9_thumbnail {
+/* components/VideoPlayer/VideoPlayer.module.css */
+.opus_g_RHVI_player {
+  border: 1px solid var(--opus-border-strong);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--opus-accent) 14%, transparent), transparent 42%),
+    color-mix(in srgb, var(--opus-panel) 94%, transparent);
   width: 100%;
-  min-width: 0;
-  max-width: var(--thumbnail-max-width);
-  gap: 10px;
-  display: grid;
+  box-shadow: var(--opus-shadow);
+  color: var(--opus-text);
+  border-radius: 14px;
+  position: relative;
+  overflow: hidden;
 }
 
-.opus_Gp1o-9_thumbnail[data-size="small"] {
-  --thumbnail-max-width: 220px;
-  --thumbnail-height: 124px;
+.opus_g_RHVI_player[data-fullscreen="true"] {
+  width: 100%;
+  height: 100%;
+  box-shadow: none;
+  background: #05070f;
+  border-radius: 0;
+  outline: none;
+  flex-direction: column;
+  display: flex;
+  border: 0 !important;
+}
+
+.opus_g_RHVI_player[data-fullscreen="true"][data-controls-visible="false"] {
+  cursor: none;
+}
+
+.opus_g_RHVI_stage {
+  aspect-ratio: 16 / 9;
+  background: color-mix(in srgb, var(--opus-input-bg) 84%, black 16%);
+  position: relative;
+  overflow: hidden;
+}
+
+.opus_g_RHVI_player[data-fullscreen="true"] .opus_g_RHVI_stage {
+  aspect-ratio: auto;
+  flex: auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.opus_g_RHVI_video {
+  object-fit: contain;
+  background: #05070f;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.opus_g_RHVI_centerPlay {
+  z-index: 2;
+  color: #fff;
+  cursor: pointer;
+  filter: drop-shadow(0 2px 10px #0000008c);
+  background: none;
+  border: 0;
+  border-radius: 999px;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  transition: opacity .18s, transform .18s, color .16s;
+  display: grid;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.opus_g_RHVI_centerPlay .opus_g_RHVI_icon {
+  width: 28px;
+  height: 28px;
+  font-size: 28px;
+}
+
+.opus_g_RHVI_centerPlay[data-visible="false"] {
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(-50%, -50%) scale(.92);
+}
+
+.opus_g_RHVI_centerPlay:hover, .opus_g_RHVI_centerPlay:focus-visible {
+  color: var(--opus-accent);
+  outline: none;
+}
+
+.opus_g_RHVI_controls {
+  gap: 10px;
+  padding: 12px 14px 14px;
+  transition: opacity .22s, transform .22s;
+  display: grid;
+}
+
+.opus_g_RHVI_player[data-fullscreen="true"] .opus_g_RHVI_controls {
+  z-index: 3;
+  background: linear-gradient(#0000 0%, #05070fb8 42%, #05070feb 100%);
+  padding: 28px 18px 18px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.opus_g_RHVI_player[data-fullscreen="true"][data-controls-visible="false"] .opus_g_RHVI_controls {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(10px);
+}
+
+.opus_g_RHVI_title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  font-size: .88rem;
+  font-weight: 650;
+  overflow: hidden;
+}
+
+.opus_g_RHVI_progress {
+  cursor: pointer;
+  touch-action: none;
+  height: 18px;
+  position: relative;
+}
+
+.opus_g_RHVI_progressTrack, .opus_g_RHVI_progressFill {
+  border-radius: 999px;
+  height: 4px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.opus_g_RHVI_progressTrack {
+  background: color-mix(in srgb, var(--opus-border) 78%, transparent);
+  width: 100%;
+}
+
+.opus_g_RHVI_progressFill {
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--opus-accent) 78%, white 8%),
+    var(--opus-accent));
+}
+
+.opus_g_RHVI_progressThumb {
+  border: 2px solid color-mix(in srgb, var(--opus-accent) 40%, white 20%);
+  background: var(--opus-accent);
+  width: 12px;
+  height: 12px;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opus-accent) 18%, transparent);
+  pointer-events: none;
+  border-radius: 999px;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.opus_g_RHVI_toolbar {
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  display: flex;
+}
+
+.opus_g_RHVI_iconButton {
+  width: 32px;
+  height: 32px;
+  color: var(--opus-text);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  line-height: 0;
+  transition: color .16s;
+  display: inline-flex;
+}
+
+.opus_g_RHVI_icon {
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+}
+
+.opus_g_RHVI_iconButton:hover, .opus_g_RHVI_iconButton:focus-visible {
+  color: var(--opus-accent);
+  outline: none;
+}
+
+.opus_g_RHVI_time {
+  color: var(--opus-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  font-size: .76rem;
+  font-weight: 600;
+}
+
+.opus_g_RHVI_spacer {
+  flex: auto;
+  min-width: 8px;
+}
+
+.opus_g_RHVI_volume {
+  width: 84px;
+  height: 4px;
+  accent-color: var(--opus-accent);
+  cursor: pointer;
+}
+
+@media (width <= 640px) {
+  .opus_g_RHVI_volume {
+    display: none;
+  }
+
+  .opus_g_RHVI_centerPlay .opus_g_RHVI_icon {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+}
+
+/* components/AudioPlayer/AudioPlayer.module.css */
+.opus_pJZZp1_player {
+  border: 1px solid var(--opus-border-strong);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--opus-accent) 14%, transparent), transparent 42%),
+    color-mix(in srgb, var(--opus-panel) 94%, transparent);
+  width: 100%;
+  box-shadow: var(--opus-shadow);
+  color: var(--opus-text);
+  border-radius: 14px;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 16px;
+  padding: 16px;
+  display: grid;
+}
+
+.opus_pJZZp1_artwork {
+  border: 1px solid color-mix(in srgb, var(--opus-accent) 35%, var(--opus-border));
+  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--opus-accent) 42%, transparent), transparent 55%),
+    linear-gradient(160deg, #121b2d, #070d18);
+  border-radius: 14px;
+  width: 96px;
+  height: 96px;
+  position: relative;
+  overflow: hidden;
+}
+
+.opus_pJZZp1_artworkImage {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.opus_pJZZp1_artworkGlow {
+  filter: blur(18px);
+  background: #0284c747;
+  border-radius: 50%;
+  width: 70%;
+  height: 70%;
+  position: absolute;
+  inset: auto -20% -30% auto;
+}
+
+.opus_pJZZp1_artworkMark {
+  color: color-mix(in srgb, var(--opus-text) 78%, transparent);
+  place-items: center;
+  font-size: 1.8rem;
+  display: grid;
+  position: absolute;
+  inset: 0;
+}
+
+.opus_pJZZp1_body {
+  align-content: center;
+  gap: 12px;
+  min-width: 0;
+  display: grid;
+}
+
+.opus_pJZZp1_meta {
+  gap: 2px;
+  min-width: 0;
+  display: grid;
+}
+
+.opus_pJZZp1_title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  font-size: .95rem;
+  font-weight: 700;
+  overflow: hidden;
+}
+
+.opus_pJZZp1_artist {
+  color: var(--opus-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+  font-size: .78rem;
+  font-weight: 600;
+  overflow: hidden;
+}
+
+.opus_pJZZp1_trackCount {
+  color: color-mix(in srgb, var(--opus-muted) 82%, transparent);
+  letter-spacing: .02em;
+  text-transform: uppercase;
+  margin: 2px 0 0;
+  font-size: .68rem;
+  font-weight: 600;
+}
+
+.opus_pJZZp1_progress {
+  cursor: pointer;
+  touch-action: none;
+  height: 18px;
+  position: relative;
+}
+
+.opus_pJZZp1_progressTrack, .opus_pJZZp1_progressFill {
+  border-radius: 999px;
+  height: 4px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.opus_pJZZp1_progressTrack {
+  background: color-mix(in srgb, var(--opus-border) 78%, transparent);
+  width: 100%;
+}
+
+.opus_pJZZp1_progressFill {
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--opus-accent) 78%, white 8%),
+    var(--opus-accent));
+}
+
+.opus_pJZZp1_progressThumb {
+  border: 2px solid color-mix(in srgb, var(--opus-accent) 40%, white 20%);
+  background: var(--opus-accent);
+  width: 12px;
+  height: 12px;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opus-accent) 18%, transparent);
+  pointer-events: none;
+  border-radius: 999px;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.opus_pJZZp1_toolbar {
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  display: flex;
+}
+
+.opus_pJZZp1_playButton, .opus_pJZZp1_iconButton {
+  width: 32px;
+  height: 32px;
+  color: var(--opus-text);
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 8px;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  line-height: 0;
+  transition: color .16s, opacity .16s;
+  display: inline-flex;
+}
+
+.opus_pJZZp1_icon {
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+}
+
+.opus_pJZZp1_playButton .opus_pJZZp1_icon {
+  width: 15px;
+  height: 15px;
+  font-size: 15px;
+}
+
+.opus_pJZZp1_playButton:hover, .opus_pJZZp1_playButton:focus-visible, .opus_pJZZp1_iconButton:hover, .opus_pJZZp1_iconButton:focus-visible {
+  color: var(--opus-accent);
+  outline: none;
+}
+
+.opus_pJZZp1_iconButton:disabled {
+  cursor: not-allowed;
+  opacity: .38;
+}
+
+.opus_pJZZp1_iconButton:disabled:hover, .opus_pJZZp1_iconButton:disabled:focus-visible {
+  color: var(--opus-text);
+}
+
+.opus_pJZZp1_time {
+  color: var(--opus-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  font-size: .76rem;
+  font-weight: 600;
+}
+
+.opus_pJZZp1_spacer {
+  flex: auto;
+  min-width: 8px;
+}
+
+.opus_pJZZp1_volume {
+  width: 84px;
+  height: 4px;
+  accent-color: var(--opus-accent);
+  cursor: pointer;
+}
+
+@media (width <= 640px) {
+  .opus_pJZZp1_player {
+    grid-template-columns: 1fr;
+  }
+
+  .opus_pJZZp1_artwork {
+    width: 100%;
+    height: 140px;
+  }
+
+  .opus_pJZZp1_volume {
+    width: 64px;
+  }
+}
+
+/* components/ImageThumbnail/ImageThumbnail.module.css */
+.opus_Gp1o-9_thumbnail {
+  width: 100%;
+  min-width: 0;
+  max-width: var(--thumbnail-max-width);
+  gap: 10px;
+  display: grid;
+}
+
+.opus_Gp1o-9_thumbnail[data-size="small"] {
+  --thumbnail-max-width: 220px;
+  --thumbnail-height: 124px;
 }
 
 .opus_Gp1o-9_thumbnail[data-size="medium"] {
@@ -13333,13 +14079,19 @@
                        "opus_ThZ-Bi_footer";
 }
 
+.opus_ThZ-Bi_root[data-show-tabs="false"][data-show-footer="false"] {
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-areas: "opus_ThZ-Bi_composer"
+                       "opus_ThZ-Bi_feed";
+}
+
 .opus_ThZ-Bi_root[data-density="compact"] .opus_ThZ-Bi_tab {
   padding-bottom: 10px;
   font-size: .76rem;
 }
 
 .opus_ThZ-Bi_root[data-density="compact"] .opus_ThZ-Bi_footer {
-  padding: 8px 0 14px;
+  padding: 8px 0;
 }
 
 .opus_ThZ-Bi_tabsRow {
@@ -13824,7 +14576,7 @@
   border-top: 1px solid
     color-mix(in srgb, var(--dashboard-section-text) 10%, transparent);
   grid-area: opus_ThZ-Bi_footer;
-  padding: 10px 0 14px;
+  padding: 10px 0;
 }
 
 .opus_ThZ-Bi_footerAction {
@@ -15769,301 +16521,127 @@
   display: inline-flex;
 }
 
-.opus_9xh2Bk_primaryMark {
-  border: 1px solid color-mix(in srgb, var(--opus-accent) 34%, var(--opus-border));
-  background: color-mix(in srgb, var(--opus-accent) 14%, transparent);
-  color: color-mix(in srgb, var(--opus-accent) 72%, var(--opus-text));
-  letter-spacing: .02em;
-  text-transform: uppercase;
-  border-radius: 999px;
-  padding: 1px 6px;
-  font-size: .62rem;
-  font-weight: 700;
-}
-
-[data-theme="light"] .opus_9xh2Bk_primaryMark, [data-preview-root][data-theme="light"] .opus_9xh2Bk_primaryMark, [data-shell-theme="light"] .opus_9xh2Bk_primaryMark {
-  border-color: color-mix(in srgb, var(--opus-accent) 40%, var(--opus-border));
-  background: color-mix(in srgb, var(--opus-accent) 16%, #fff);
-  color: color-mix(in srgb, var(--opus-accent) 82%, #4c0519);
-}
-
-.opus_9xh2Bk_companyCopy small {
-  color: var(--opus-muted);
-  font-size: .74rem;
-  line-height: 1.3;
-}
-
-.opus_9xh2Bk_status {
-  margin-top: 4px;
-}
-
-@media (width <= 760px) {
-  .opus_9xh2Bk_identity {
-    min-height: 330px;
-    padding: 0 0 20px;
-  }
-}
-
-/* components/MoreActionsMenu/MoreActionsMenu.module.css */
-.opus_ajkihk_trigger {
-  width: var(--opus-control-height);
-  min-width: var(--opus-control-height);
-  border-color: color-mix(in srgb, var(--opus-accent) 46%, var(--opus-border));
-  background: var(--opus-input-bg);
-  color: var(--opus-text);
-  padding-inline: 0;
-}
-
-.opus_ajkihk_trigger:hover {
-  border-color: var(--opus-accent);
-  background: color-mix(in srgb, var(--opus-accent) 12%, var(--opus-input-bg));
-}
-
-.opus_ajkihk_trigger svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-/* components/ContactDetails/ContactSummaryCard.module.css */
-.opus_8ccRnS_detailsCard {
-  --contact-tab-height: 43px;
-  --contact-tab-rail-pad-top: 10px;
-  height: var(--contact-summary-height, 432px);
-  min-width: 0;
-}
-
-.opus_8ccRnS_actions {
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 9px;
-  display: flex;
-}
-
-.opus_8ccRnS_actions button {
-  gap: 8px;
-}
-
-.opus_8ccRnS_actions button svg {
-  width: 15px;
-  height: 15px;
-}
-
-.opus_8ccRnS_detailsToolbar {
-  --contact-tab-border: color-mix(in srgb, #4a5068 36%, color-mix(in srgb, var(--opus-accent) 8%, #2a2f3d));
-  --contact-tab-rail-bg: color-mix(in srgb, var(--dashboard-section-bg, var(--opus-panel)) 84%, #05070f 16%);
-  --contact-tab-active-fill: color-mix(in srgb,
-    var(--opus-accent) 10%,
-    color-mix(in srgb, var(--dashboard-section-panel, var(--opus-panel)) 78%, #0b0f1a 22%));
-  box-sizing: border-box;
-  min-width: 0;
-  min-height: calc(var(--contact-tab-height) + var(--contact-tab-rail-pad-top) + 1px);
-  padding-top: var(--contact-tab-rail-pad-top);
-  border-bottom: 1px solid var(--contact-tab-border);
-  background: var(--contact-tab-rail-bg);
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 16px;
-  display: flex;
-}
-
-.opus_8ccRnS_detailsTabs {
-  align-items: stretch;
-  gap: 0;
-  min-width: 0;
-  display: flex;
-}
-
-.opus_8ccRnS_detailsTab {
-  z-index: 1;
-  width: auto;
-  min-width: 0;
-  height: var(--contact-tab-height, 43px);
-  color: var(--dashboard-section-muted, var(--opus-muted));
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-  background: none;
-  border: 0;
-  flex: none;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0 0 -1px;
-  padding: 0 52px 0 46px;
-  font-size: .88rem;
-  font-weight: 650;
-  transition: color .42s cubic-bezier(.22, 1, .36, 1), z-index 0s linear .2s;
-  display: flex;
-  position: relative;
-}
-
-.opus_8ccRnS_detailsTab + .opus_8ccRnS_detailsTab {
-  margin-left: -56px;
-}
-
-.opus_8ccRnS_detailsTabShape {
-  z-index: -1;
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-}
-
-.opus_8ccRnS_detailsTabShape svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-  overflow: visible;
-}
-
-.opus_8ccRnS_detailsTabShape path {
-  fill: #0000;
-  stroke: #0000;
-  stroke-width: 1px;
-  vector-effect: non-scaling-stroke;
-  transition: fill .42s cubic-bezier(.22, 1, .36, 1), stroke .42s cubic-bezier(.22, 1, .36, 1);
-}
-
-.opus_8ccRnS_detailsTabLabel {
-  z-index: 1;
-  transition: color .42s cubic-bezier(.22, 1, .36, 1);
-  position: relative;
-}
-
-.opus_8ccRnS_detailsTab[data-active="true"] {
-  z-index: 3;
-  color: var(--dashboard-section-text, var(--opus-text));
-  transition: color .42s cubic-bezier(.22, 1, .36, 1), z-index;
-}
-
-.opus_8ccRnS_detailsTab[data-active="true"] .opus_8ccRnS_detailsTabShape path {
-  fill: var(--contact-tab-active-fill);
-  stroke: var(--contact-tab-border);
-}
-
-.opus_8ccRnS_detailsTab .opus_8ccRnS_detailsTabLine {
-  --tab-active-line-width: calc(100% - 88px);
-  --tab-active-line-min-width: 0;
-  width: var(--tab-active-line-width);
-  opacity: 0;
-  transform-origin: 0 100%;
-  transition: opacity .36s cubic-bezier(.22, 1, .36, 1), transform .42s cubic-bezier(.22, 1, .36, 1);
-  bottom: 0;
-  left: 46px;
-  right: auto;
-  transform: scaleX(.82);
+.opus_9xh2Bk_primaryMark {
+  border: 1px solid color-mix(in srgb, var(--opus-accent) 34%, var(--opus-border));
+  background: color-mix(in srgb, var(--opus-accent) 14%, transparent);
+  color: color-mix(in srgb, var(--opus-accent) 72%, var(--opus-text));
+  letter-spacing: .02em;
+  text-transform: uppercase;
+  border-radius: 999px;
+  padding: 1px 6px;
+  font-size: .62rem;
+  font-weight: 700;
 }
 
-.opus_8ccRnS_detailsTab[data-active="true"] .opus_8ccRnS_detailsTabLine {
-  opacity: 1;
-  transform: scaleX(1);
+[data-theme="light"] .opus_9xh2Bk_primaryMark, [data-preview-root][data-theme="light"] .opus_9xh2Bk_primaryMark, [data-shell-theme="light"] .opus_9xh2Bk_primaryMark {
+  border-color: color-mix(in srgb, var(--opus-accent) 40%, var(--opus-border));
+  background: color-mix(in srgb, var(--opus-accent) 16%, #fff);
+  color: color-mix(in srgb, var(--opus-accent) 82%, #4c0519);
 }
 
-[data-preview-root][data-theme="light"] .opus_8ccRnS_detailsToolbar, [data-theme="light"] .opus_8ccRnS_detailsToolbar, [data-shell-theme="light"] .opus_8ccRnS_detailsToolbar {
-  --contact-tab-border: color-mix(in srgb, var(--opus-border) 72%, var(--opus-accent) 28%);
-  --contact-tab-rail-bg: color-mix(in srgb,
-    var(--dashboard-section-bg, var(--opus-panel)) 58%,
-    color-mix(in srgb, var(--opus-accent) 6%, #d7dceb) 42%);
-  --contact-tab-active-fill: color-mix(in srgb,
-    var(--opus-accent) 4%,
-    var(--dashboard-section-panel, var(--opus-input-fill, #fff)));
+.opus_9xh2Bk_companyCopy small {
+  color: var(--opus-muted);
+  font-size: .74rem;
+  line-height: 1.3;
 }
 
-.opus_8ccRnS_detailsTab:focus-visible {
-  outline: 2px solid var(--opus-accent);
-  outline-offset: -4px;
+.opus_9xh2Bk_status {
+  margin-top: 4px;
 }
 
-.opus_8ccRnS_detailsToolbar .opus_8ccRnS_actions {
-  box-sizing: border-box;
-  height: calc(var(--contact-tab-height) + var(--contact-tab-rail-pad-top));
-  margin-top: calc(-1 * var(--contact-tab-rail-pad-top));
-  flex-wrap: nowrap;
-  align-self: stretch;
-  align-items: center;
-  padding: 0 14px 0 0;
-  display: flex;
+@media (width <= 760px) {
+  .opus_9xh2Bk_identity {
+    min-height: 330px;
+    padding: 0 0 20px;
+  }
 }
 
-.opus_8ccRnS_detailsToolbar .opus_8ccRnS_actions button {
-  white-space: nowrap;
+/* components/MoreActionsMenu/MoreActionsMenu.module.css */
+.opus_ajkihk_trigger {
+  width: var(--opus-control-height);
+  min-width: var(--opus-control-height);
+  border-color: color-mix(in srgb, var(--opus-accent) 46%, var(--opus-border));
+  background: var(--opus-input-bg);
+  color: var(--opus-text);
+  padding-inline: 0;
 }
 
-.opus_8ccRnS_detailsPanel {
-  box-sizing: border-box;
-  height: calc(var(--contact-summary-height, 432px) - var(--contact-tab-height, 43px) - var(--contact-tab-rail-pad-top, 10px) - 1px);
-  min-width: 0;
-  position: relative;
-  overflow: hidden;
+.opus_ajkihk_trigger:hover {
+  border-color: var(--opus-accent);
+  background: color-mix(in srgb, var(--opus-accent) 12%, var(--opus-input-bg));
 }
 
-.opus_8ccRnS_detailsPanelContent {
-  box-sizing: border-box;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transform-origin: top;
-  scrollbar-gutter: stable;
-  scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border)) transparent;
-  z-index: 0;
-  padding: 8px 14px 28px;
-  transition: opacity .38s cubic-bezier(.22, 1, .36, 1), transform .46s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .38s;
-  position: absolute;
-  inset: 0;
-  overflow: auto;
-  transform: translate3d(0, 10px, 0) scale(.985);
+.opus_ajkihk_trigger svg {
+  width: 1rem;
+  height: 1rem;
 }
 
-.opus_8ccRnS_detailsPanelContent[data-active="true"] {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  z-index: 1;
-  transition: opacity .42s cubic-bezier(.16, 1, .3, 1), transform .48s cubic-bezier(.16, 1, .3, 1), visibility;
-  transform: translate3d(0, 0, 0) scale(1);
+/* components/ContactDetails/ContactSummaryCard.module.css */
+.opus_8ccRnS_detailsCard {
+  --contact-tab-rail-bg: color-mix(in srgb, var(--dashboard-section-bg, var(--opus-panel)) 84%, #05070f 16%);
+  --contact-tab-widget-bg: radial-gradient(85% 65% at 14% 0%, #9333ea29, transparent 58%),
+    radial-gradient(72% 58% at 100% 100%, #0284c71f, transparent 62%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--dashboard-section-bg, #070d18) 94%, #fff 3%),
+      var(--dashboard-section-bg, #070d18));
+  --contact-tab-widget-fill: color-mix(in srgb,
+    #9333ea 16%,
+    color-mix(in srgb, var(--dashboard-section-bg, #070d18) 94%, #fff 3%));
+  height: var(--contact-summary-height, 432px);
+  background: var(--contact-tab-rail-bg);
+  background-image: none;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  display: flex;
 }
 
-.opus_8ccRnS_detailsPanelContent::-webkit-scrollbar {
-  width: 8px;
+.opus_8ccRnS_summaryTabs {
+  flex: auto;
+  min-width: 0;
+  height: auto;
+  min-height: 0;
 }
 
-.opus_8ccRnS_detailsPanelContent::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border));
-  border-radius: 999px;
+.opus_8ccRnS_detailsCard .opus_8ccRnS_summaryTabs[data-variant="card"] {
+  --tabs-card-rail-bg: var(--contact-tab-rail-bg);
+  --tabs-card-active-fill: var(--contact-tab-widget-fill);
 }
 
-.opus_8ccRnS_detailsPanelContent::-webkit-scrollbar-track {
-  background: none;
+.opus_8ccRnS_summaryPanel {
+  background: var(--contact-tab-widget-bg) !important;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .opus_8ccRnS_detailsTab, .opus_8ccRnS_detailsTab[data-active="true"], .opus_8ccRnS_detailsTabLabel, .opus_8ccRnS_detailsTabShape path, .opus_8ccRnS_detailsTabLine, .opus_8ccRnS_detailsPanelContent, .opus_8ccRnS_detailsPanelContent[data-active="true"] {
-    transition: none;
-  }
-
-  .opus_8ccRnS_detailsTabLine, .opus_8ccRnS_detailsPanelContent, .opus_8ccRnS_detailsPanelContent[data-active="true"] {
-    transform: none;
-  }
+[data-preview-root][data-theme="light"] .opus_8ccRnS_detailsCard, [data-theme="light"] .opus_8ccRnS_detailsCard, [data-shell-theme="light"] .opus_8ccRnS_detailsCard {
+  --contact-tab-rail-bg: color-mix(in srgb,
+    var(--dashboard-section-bg, var(--opus-panel)) 58%,
+    color-mix(in srgb, var(--opus-accent) 6%, #d7dceb) 42%);
+  --contact-tab-widget-bg: radial-gradient(85% 65% at 14% 0%, #9333ea1a, transparent 58%),
+    radial-gradient(72% 58% at 100% 100%, #0284c714, transparent 62%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--dashboard-section-bg, #f8fbff) 94%, #fff 6%),
+      var(--dashboard-section-bg, #f8fbff));
+  --contact-tab-widget-fill: color-mix(in srgb,
+    #9333ea 10%,
+    var(--dashboard-section-bg, #f8fbff));
 }
 
 .opus_8ccRnS_detailsGrid {
-  --detail-row-size: 2.85rem;
-  --detail-row-gap: .85rem;
+  --detail-row-gap: 1rem;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-auto-rows: var(--detail-row-size);
-  row-gap: var(--detail-row-gap);
+  align-items: start;
   column-gap: 0;
   min-width: 0;
   display: grid;
 }
 
 .opus_8ccRnS_detailsColumn {
-  grid-template-rows: subgrid;
-  grid-row: span var(--detail-rows, 5);
+  gap: var(--detail-row-gap);
   border-left: 1px solid color-mix(in srgb, var(--opus-border) 78%, transparent);
-  align-items: start;
+  flex-direction: column;
   min-width: 0;
-  padding: 2px 14px;
-  display: grid;
+  padding: 16px 14px 12px;
+  display: flex;
 }
 
 .opus_8ccRnS_detailsColumn:first-child {
@@ -16073,7 +16651,6 @@
 .opus_8ccRnS_detailItem {
   z-index: 0;
   grid-template-columns: 24px minmax(0, 1fr);
-  align-self: start;
   gap: 11px;
   min-width: 0;
   display: grid;
@@ -16110,6 +16687,10 @@
   font-weight: 600;
 }
 
+.opus_8ccRnS_statusValue {
+  color: var(--opus-success, #3ecf8e);
+}
+
 .opus_8ccRnS_owner {
   align-items: center;
   gap: 8px;
@@ -16141,36 +16722,12 @@
 }
 
 @media (width <= 1100px) {
-  .opus_8ccRnS_detailsToolbar {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0;
-  }
-
-  .opus_8ccRnS_detailsToolbar .opus_8ccRnS_actions {
-    border-top: 1px solid var(--opus-border);
-    justify-content: flex-start;
-    align-self: stretch;
-    height: auto;
-    margin-top: 0;
-    padding: 10px 16px;
-  }
-
-  .opus_8ccRnS_detailsPanel {
-    height: calc(var(--contact-summary-height, 552px) - 118px);
+  .opus_8ccRnS_detailsCard {
+    height: var(--contact-summary-height, 552px);
   }
 
   .opus_8ccRnS_detailsGrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    row-gap: 0;
-  }
-
-  .opus_8ccRnS_detailsColumn {
-    align-content: start;
-    gap: var(--detail-row-gap, .85rem);
-    grid-row: auto;
-    grid-template-rows: none;
-    display: grid;
   }
 
   .opus_8ccRnS_detailsColumn:last-child {
@@ -16183,48 +16740,16 @@
 }
 
 @media (width <= 760px) {
-  .opus_8ccRnS_actions {
-    justify-content: flex-start;
-  }
-
-  .opus_8ccRnS_detailsTabs {
-    width: 100%;
-  }
-
-  .opus_8ccRnS_detailsTab {
-    flex: auto;
-    width: auto;
-    min-width: 0;
-    padding: 0 40px;
-  }
-
-  .opus_8ccRnS_detailsTab + .opus_8ccRnS_detailsTab {
-    margin-left: -48px;
-  }
-
-  .opus_8ccRnS_detailsTabShape {
-    inset: 0 4px;
-  }
-
-  .opus_8ccRnS_detailsToolbar .opus_8ccRnS_actions {
-    flex-wrap: wrap;
-  }
-
   .opus_8ccRnS_detailsGrid {
     grid-template-columns: 1fr;
-    row-gap: 0;
   }
 
   .opus_8ccRnS_detailsColumn, .opus_8ccRnS_detailsColumn:last-child {
-    align-content: start;
-    gap: var(--detail-row-gap, .85rem);
     border-top: 1px solid var(--opus-border);
     border-left: 0;
-    grid-area: auto;
-    grid-template-rows: none;
+    grid-column: auto;
     margin: 0;
     padding: 20px 0;
-    display: grid;
   }
 
   .opus_8ccRnS_detailsColumn:first-child {
@@ -16293,11 +16818,122 @@
 }
 
 /* components/ContactDetails/ContactNotesActivity.module.css */
-.opus_542jf0_tabsCard {
-  padding: 0 24px 18px;
+.opus_542jf0_tabsCardLine {
+  --notes-workspace-panel-height: 23.25rem;
+  padding: 0 24px 12px;
   overflow: hidden;
 }
 
+.opus_542jf0_tabsCardCard {
+  --notes-workspace-panel-height: 23.25rem;
+  --contact-tab-rail-bg: color-mix(in srgb, var(--dashboard-section-bg, var(--opus-panel)) 84%, #05070f 16%);
+  --notes-tab-widget-bg: radial-gradient(85% 65% at 14% 0%, #9333ea29, transparent 58%),
+    radial-gradient(72% 58% at 100% 100%, #0284c71f, transparent 62%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--dashboard-section-bg, #070d18) 94%, #fff 3%),
+      var(--dashboard-section-bg, #070d18));
+  --notes-tab-widget-fill: color-mix(in srgb,
+    #9333ea 16%,
+    color-mix(in srgb, var(--dashboard-section-bg, #070d18) 94%, #fff 3%));
+  background: var(--contact-tab-rail-bg);
+  background-image: none;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  display: flex;
+}
+
+.opus_542jf0_workspaceTabs {
+  min-width: 0;
+}
+
+.opus_542jf0_tabsCardLine .opus_542jf0_workspaceTabs {
+  height: 100%;
+}
+
+.opus_542jf0_tabsCardCard .opus_542jf0_workspaceTabs[data-variant="card"] {
+  --tabs-card-active-fill: var(--notes-tab-widget-fill);
+  --tabs-card-rail-bg: var(--contact-tab-rail-bg);
+  width: 100%;
+  height: auto;
+  min-height: 0;
+}
+
+.opus_542jf0_scrollPanel, .opus_542jf0_cardNotesPanel {
+  height: var(--notes-workspace-panel-height) !important;
+  min-height: var(--notes-workspace-panel-height) !important;
+  max-height: var(--notes-workspace-panel-height) !important;
+}
+
+.opus_542jf0_scrollPanel {
+  padding: 0 !important;
+  overflow: hidden !important;
+}
+
+.opus_542jf0_cardNotesPanel {
+  width: 100% !important;
+  min-width: 0 !important;
+  box-shadow: none !important;
+  background: var(--notes-tab-widget-bg) !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  flex: none !important;
+  padding: 0 !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+.opus_542jf0_cardNotesPanelContent {
+  padding: 0 !important;
+}
+
+.opus_542jf0_notesActivity {
+  --notes-activity-gap: 0;
+  --notes-activity-height: 100%;
+  height: 100%;
+}
+
+.opus_542jf0_notesActivity footer {
+  display: none !important;
+}
+
+.opus_542jf0_notesActivity [data-custom-scrollbar-root=""] {
+  padding-right: 0;
+}
+
+.opus_542jf0_notesActivity [data-content-timeline-list="true"] {
+  box-sizing: border-box;
+  padding: 16px 14px 14px;
+}
+
+.opus_542jf0_emptyPanel {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 100%;
+  color: var(--dashboard-section-muted, var(--opus-muted));
+  align-items: flex-start;
+  padding: 28px 18px;
+  font-size: .9rem;
+  font-weight: 550;
+  display: flex;
+}
+
+[data-preview-root][data-theme="light"] .opus_542jf0_tabsCardCard, [data-theme="light"] .opus_542jf0_tabsCardCard, [data-shell-theme="light"] .opus_542jf0_tabsCardCard {
+  --contact-tab-rail-bg: color-mix(in srgb,
+    var(--dashboard-section-bg, var(--opus-panel)) 58%,
+    color-mix(in srgb, var(--opus-accent) 6%, #d7dceb) 42%);
+  --notes-tab-widget-bg: radial-gradient(85% 65% at 14% 0%, #9333ea1a, transparent 58%),
+    radial-gradient(72% 58% at 100% 100%, #0284c714, transparent 62%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--dashboard-section-bg, #f8fbff) 94%, #fff 6%),
+      var(--dashboard-section-bg, #f8fbff));
+  --notes-tab-widget-fill: color-mix(in srgb,
+    #9333ea 10%,
+    var(--dashboard-section-bg, #f8fbff));
+}
+
 .opus_542jf0_workspaceAction {
   border: 1px solid color-mix(in srgb, var(--opus-accent) 42%, var(--dashboard-section-border, var(--opus-border)));
   background: color-mix(in srgb, var(--opus-accent) 14%, transparent);
@@ -16327,19 +16963,8 @@
   display: block;
 }
 
-.opus_542jf0_notesActivity {
-  --notes-activity-height: 31rem;
-}
-
-.opus_542jf0_emptyPanel {
-  box-sizing: border-box;
-  height: 31rem;
-  color: var(--opus-muted);
-  padding: 30px 4px;
-}
-
 @media (width <= 760px) {
-  .opus_542jf0_tabsCard {
+  .opus_542jf0_tabsCardLine {
     padding-inline: 14px;
   }
 }
@@ -18184,7 +18809,10 @@ button.opus_H9TUGj_root:hover, button.opus_H9TUGj_root:focus-visible {
 
 .opus_ub1fhz_searchWrap {
   border-bottom: 1px solid var(--opus-border);
+  align-items: center;
+  gap: 8px;
   padding: 10px;
+  display: flex;
 }
 
 .opus_ub1fhz_search {
@@ -18192,8 +18820,10 @@ button.opus_H9TUGj_root:hover, button.opus_H9TUGj_root:focus-visible {
   border-radius: var(--opus-input-radius-large, 6px);
   background: var(--opus-input-fill);
   width: 100%;
+  min-width: 0;
   height: 36px;
   color: var(--opus-text);
+  flex: auto;
   padding: 0 11px;
   font-size: .8rem;
 }
@@ -18202,6 +18832,28 @@ button.opus_H9TUGj_root:hover, button.opus_H9TUGj_root:focus-visible {
   border-color: var(--opus-accent);
 }
 
+.opus_ub1fhz_reset {
+  border: 1px solid color-mix(in srgb, var(--opus-accent) 42%, var(--opus-border));
+  border-radius: var(--opus-input-radius-large, 6px);
+  background: color-mix(in srgb, var(--opus-accent) 12%, transparent);
+  height: 36px;
+  color: var(--opus-text);
+  cursor: pointer;
+  font: inherit;
+  white-space: nowrap;
+  flex: none;
+  margin: 0;
+  padding: 0 12px;
+  font-size: .76rem;
+  font-weight: 650;
+}
+
+.opus_ub1fhz_reset:hover, .opus_ub1fhz_reset:focus-visible {
+  border-color: color-mix(in srgb, var(--opus-accent) 70%, var(--opus-border));
+  background: color-mix(in srgb, var(--opus-accent) 20%, transparent);
+  outline: none;
+}
+
 .opus_ub1fhz_options {
   scrollbar-color: color-mix(in srgb, var(--opus-accent) 50%, transparent) transparent;
   scrollbar-width: thin;