@chrryai/chrry 1.1.78

package/Checkbox.module.scss

@@ -0,0 +1,67 @@
+@use "toRem.scss";
+
+.formSwitch {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: toRem.toRem(5);
+  -webkit-tap-highlight-color: transparent;
+}
+.formSwitch i {
+  position: relative;
+  display: inline-block;
+  width: toRem.toRem(46);
+  height: toRem.toRem(26);
+  background-color: var(--shade-2);
+  border-radius: 23px;
+  vertical-align: text-bottom;
+  transition: all 0.3s linear;
+}
+.formSwitch i::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: toRem.toRem(42);
+  height: toRem.toRem(22);
+  background-color: var(--background);
+  border-radius: 11px;
+  transform: translate3d(toRem.toRem(2), toRem.toRem(2), 0) scale3d(1, 1, 1);
+  transition: all 0.25s linear;
+  background-size: toRem.toRem(1);
+}
+.formSwitch i::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: toRem.toRem(22);
+  height: toRem.toRem(22);
+  background-color: #fff;
+  border-radius: 11px;
+  box-shadow: var(--shadow);
+  transform: translate3d(toRem.toRem(2), toRem.toRem(2), 0);
+  transition: all 0.2s ease-in-out;
+  background-size: toRem.toRem(1);
+}
+.formSwitch:active i::after {
+  width: toRem.toRem(28);
+  transform: translate3d(toRem.toRem(2), toRem.toRem(2), 0);
+}
+.formSwitch:active input:checked + i::after {
+  transform: translate3d(toRem.toRem(16), toRem.toRem(2), 0);
+}
+.formSwitch input {
+  display: none;
+}
+.formSwitch input:checked + i {
+  background-color: var(--link-color);
+}
+.formSwitch input:checked + i::before {
+  transform: translate3d(toRem.toRem(18), toRem.toRem(2), 0) scale3d(0, 0, 0);
+}
+.formSwitch input:checked + i::after {
+  transform: translate3d(toRem.toRem(22), toRem.toRem(2), 0);
+}
+
+.formSwitch > span {
+  flex: 1;
+}

package/Chrry.module.scss

@@ -0,0 +1,69 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.container {
+  max-width: breakpoints.$breakpoint-mobile;
+  margin: 0 auto;
+  flex-direction: column;
+  display: flex;
+  padding: toRem.toRem(40) toRem.toRem(10) toRem.toRem(20) toRem.toRem(10);
+}
+
+.logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+}
+
+.description {
+  display: flex;
+  margin-top: toRem.toRem(0);
+}
+
+.links {
+  margin-top: toRem.toRem(10);
+  display: flex;
+  gap: toRem.toRem(25);
+  margin-bottom: toRem.toRem(20);
+}
+
+.link {
+  display: inline-flex;
+}
+
+.features {
+  display: flex;
+
+  flex-direction: column;
+  gap: toRem.toRem(10);
+}
+
+.feature {
+  display: flex;
+  gap: toRem.toRem(10);
+}
+
+.vex {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+  margin-top: toRem.toRem(10);
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: toRem.toRem(10);
+  width: 100%;
+}
+
+.featureTitle {
+  margin: 0;
+  margin-bottom: toRem.toRem(5);
+  display: flex;
+  gap: toRem.toRem(2.5);
+}

package/Collaborate.module.scss

@@ -0,0 +1,22 @@
+@use "./toRem.scss";
+@use "./breakpoints.scss";
+
+.collaborateTextarea {
+  min-height: toRem.toRem(200);
+  border-style: dashed;
+  font-size: toRem.toRem(15);
+}
+
+.modal {
+  width: 100% !important;
+  margin: 0 auto !important;
+  max-width: breakpoints.$breakpoint-mobile !important;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: toRem.toRem(7.5);
+  margin-top: toRem.toRem(10);
+  margin-left: auto;
+}

package/CollaborationStatus.module.scss

@@ -0,0 +1,17 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.collaborationStatus {
+  display: inline-flex;
+  gap: toRem.toRem(10);
+
+  span {
+    display: none;
+  }
+
+  @media (min-width: breakpoints.$breakpoint-mobile) {
+    span {
+      display: inline-flex;
+    }
+  }
+}

package/CollaborationTooltip.module.scss

@@ -0,0 +1,257 @@
+@use "./toRem.scss";
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 9998;
+  backdrop-filter: blur(toRem.toRem(2));
+}
+
+.tooltip {
+  position: fixed;
+  background: var(--shade-0);
+  border: toRem.toRem(1) solid var(--shade-2);
+  border-radius: 16px;
+  box-shadow: 0 toRem.toRem(20) toRem.toRem(40) rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  min-width: toRem.toRem(320);
+  max-width: toRem.toRem(400);
+  animation: tooltipFadeIn 0.3s ease-out;
+
+  // Default positioning (center of screen)
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.positioned {
+  // When positioned relative to an element
+  &.top {
+    transform: translate(-50%, -100%);
+    margin-top: toRem.toRem(-12);
+  }
+
+  &.bottom {
+    transform: translate(-50%, 0);
+    margin-top: toRem.toRem(12);
+  }
+
+  &.left {
+    transform: translate(-100%, -50%);
+    margin-left: toRem.toRem(-12);
+  }
+
+  &.right {
+    transform: translate(0, -50%);
+    margin-left: toRem.toRem(12);
+  }
+}
+
+.arrow {
+  position: absolute;
+  width: toRem.toRem(12);
+  height: toRem.toRem(12);
+  background: var(--shade-0);
+  border: toRem.toRem(1) solid var(--shade-2);
+  transform: rotate(45deg);
+
+  .top & {
+    bottom: toRem.toRem(-6);
+    left: 50%;
+    margin-left: toRem.toRem(-6);
+    border-top: none;
+    border-left: none;
+  }
+
+  .bottom & {
+    top: toRem.toRem(-6);
+    left: 50%;
+    margin-left: toRem.toRem(-6);
+    border-bottom: none;
+    border-right: none;
+  }
+
+  .left & {
+    right: toRem.toRem(-6);
+    top: 50%;
+    margin-top: toRem.toRem(-6);
+    border-top: none;
+    border-right: none;
+  }
+
+  .right & {
+    left: toRem.toRem(-6);
+    top: 50%;
+    margin-top: toRem.toRem(-6);
+    border-bottom: none;
+    border-left: none;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: toRem.toRem(16) toRem.toRem(20) 0;
+}
+
+.stepIndicator {
+  font-size: toRem.toRem(12);
+  color: var(--accent-4);
+  font-weight: 600;
+  background: var(--accent-1);
+  padding: toRem.toRem(4) toRem.toRem(8);
+  border-radius: 6px;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  color: var(--shade-4);
+  cursor: pointer;
+  padding: toRem.toRem(4);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--shade-1);
+    color: var(--shade-6);
+  }
+}
+
+.content {
+  padding: toRem.toRem(16) toRem.toRem(20);
+}
+
+.title {
+  font-size: toRem.toRem(18);
+  font-weight: 600;
+  color: var(--shade-6);
+  margin: 0 0 toRem.toRem(8) 0;
+}
+
+.description {
+  font-size: toRem.toRem(14);
+  color: var(--shade-5);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 toRem.toRem(20) toRem.toRem(20);
+  gap: toRem.toRem(16);
+}
+
+.navButton {
+  display: flex;
+  align-items: center;
+  gap: toRem.toRem(6);
+  padding: toRem.toRem(8) toRem.toRem(16);
+  border: toRem.toRem(1) solid var(--shade-2);
+  border-radius: 8px;
+  background: var(--shade-0);
+  color: var(--shade-6);
+  font-size: toRem.toRem(14);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: var(--shade-1);
+    border-color: var(--shade-3);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.nextButton {
+  background: var(--accent-4);
+  color: white;
+  border-color: var(--accent-4);
+
+  &:hover:not(:disabled) {
+    background: var(--accent-5);
+    border-color: var(--accent-5);
+  }
+}
+
+.dots {
+  display: flex;
+  gap: toRem.toRem(6);
+  align-items: center;
+}
+
+.dot {
+  width: toRem.toRem(8);
+  height: toRem.toRem(8);
+  border-radius: 50%;
+  background: var(--shade-3);
+  transition: all 0.2s ease;
+
+  &.active {
+    background: var(--accent-4);
+    transform: scale(1.2);
+  }
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .tooltip {
+    background: var(--shade-0);
+    border-color: var(--shade-1);
+    box-shadow: 0 toRem.toRem(20) toRem.toRem(40) rgba(0, 0, 0, 0.4);
+  }
+
+  .arrow {
+    background: var(--shade-0);
+    border-color: var(--shade-1);
+  }
+
+  .overlay {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* Mobile responsiveness */
+@media (max-width: toRem.toRem(768)) {
+  .tooltip {
+    min-width: toRem.toRem(280);
+    max-width: 90vw;
+    margin: toRem.toRem(20);
+  }
+
+  .navigation {
+    flex-direction: column;
+    gap: toRem.toRem(12);
+  }
+
+  .navButton {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .dots {
+    order: -1;
+  }
+}

package/ColorScheme.module.scss

@@ -0,0 +1,24 @@
+@use "./toRem.scss";
+
+.colorScheme {
+  display: flex;
+  gap: toRem.toRem(5);
+}
+
+.color {
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow);
+  z-index: 10000;
+
+  position: relative;
+
+  .check {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/EditThread.module.scss

@@ -0,0 +1,51 @@
+@use "./breakpoints.scss";
+@use "./toRem.scss";
+
+.editThreadContainer {
+}
+
+.editThreadInput {
+  width: 100%;
+  height: 100%;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: toRem.toRem(7.5);
+  margin-top: toRem.toRem(10);
+}
+
+.modal {
+  width: 100% !important;
+  margin: 0 auto !important;
+  max-width: breakpoints.$breakpoint-mobile !important;
+}
+
+.right {
+  margin-left: auto;
+  display: flex;
+  gap: toRem.toRem(7.5);
+  align-items: center;
+}
+
+.deleteThread {
+  margin-left: auto;
+}
+
+.charLeft,
+.maxCharCount {
+  color: var(--shade-6);
+  font-size: toRem.toRem(12);
+  color: var(--accent-4);
+  font-size: toRem.toRem(11);
+  font-weight: normal;
+
+  &.orange {
+    color: var(--accent-1);
+  }
+
+  &.red {
+    color: var(--accent-0);
+  }
+}

package/EmptyStateTips.module.scss

@@ -0,0 +1,52 @@
+@use "./toRem.scss";
+@use "./breakpoints.scss";
+
+.emptyStateTips {
+  margin-top: toRem.toRem(15);
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: toRem.toRem(13);
+
+    li {
+      display: none;
+    }
+
+    @media (min-height: toRem.toRem(600)) {
+      li:nth-child(1),
+      li:nth-child(2),
+      li:nth-child(3) {
+        display: block;
+      }
+    }
+
+    @media (min-height: toRem.toRem(700)) {
+      li:nth-child(4) {
+        display: block;
+      }
+    }
+
+    @media (min-height: toRem.toRem(800)) {
+      li:nth-child(5) {
+        display: block;
+      }
+    }
+
+    @media (min-height: toRem.toRem(900)) {
+      li {
+        display: block;
+      }
+    }
+  }
+}
+
+.tip {
+  margin-bottom: toRem.toRem(10);
+  position: relative;
+}
+
+.tipText {
+  opacity: 0.8;
+}

package/EnableNotifications.module.scss

@@ -0,0 +1,20 @@
+@use "./toRem.scss";
+
+.enableNotificationsButton {
+  display: inline-flex;
+  align-items: center;
+}
+
+.enableNotifications {
+  display: inline-flex;
+}
+
+.enableNotificationsContainer {
+  display: inline-flex;
+  align-items: center;
+  gap: toRem.toRem(10);
+}
+
+.withoutNotifications {
+  padding-top: 0 !important;
+}