@product7/product7-js 0.1.0

package/src/styles/messenger-views.js

@@ -0,0 +1,877 @@
+export const messengerViewsStyles = `
+/* ========================================
+   HOME VIEW
+   ======================================== */
+
+.messenger-home-view {
+  background: var(--msg-bg-header-gradient);
+  position: relative;
+  overflow: hidden;
+}
+
+.messenger-home-view::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 600px;
+  height: 600px;
+  background: var(--msg-bg-header-glow1);
+  filter: blur(60px);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.messenger-home-view::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 500px;
+  height: 500px;
+  background: var(--msg-bg-header-glow2);
+  filter: blur(60px);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.messenger-home-scroll {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.messenger-home-header {
+  padding: var(--spacing-6) var(--spacing-5);
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+}
+
+.messenger-home-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-8);
+  position: relative;
+  z-index: 2;
+}
+
+.messenger-home-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+  overflow: visible;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.messenger-home-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-lg);
+}
+
+.messenger-home-avatars {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  margin-right: var(--spacing-4);
+  margin-left: var(--spacing-4);
+}
+
+.messenger-home-welcome {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  position: relative;
+  z-index: 2;
+}
+
+.messenger-home-greeting {
+  font-size: 34px;
+  font-weight: var(--font-weight-bold);
+  color: var(--msg-text);
+  line-height: var(--line-height-tight);
+}
+
+.messenger-home-question {
+  font-size: 28px;
+  font-weight: var(--font-weight-bold);
+  color: var(--msg-text);
+  line-height: var(--line-height-tight);
+}
+
+.messenger-home-body {
+  flex: 1;
+  padding: 0 var(--spacing-5) var(--spacing-5);
+  position: relative;
+  z-index: 2;
+}
+
+.messenger-home-message-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-3) var(--spacing-5);
+  background: var(--msg-bg-surface);
+  border: 1px solid var(--msg-border);
+  border-radius: 8px;
+  color: var(--msg-text);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  margin-bottom: var(--spacing-2);
+  font-family: inherit;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.messenger-home-message-btn:hover {
+  background: var(--msg-bg-elevated);
+  transform: translateX(4px);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+}
+
+.messenger-home-message-btn:active {
+  transform: translateX(4px) translateY(1px);
+  transition-duration: 100ms;
+}
+
+.messenger-home-continue-btn {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+
+.messenger-home-continue-btn > svg {
+  flex-shrink: 0;
+}
+
+.messenger-home-continue-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  text-align: left;
+  flex: 1;
+}
+
+.messenger-home-continue-label {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+}
+
+.messenger-home-continue-preview {
+  font-size: var(--font-size-sm);
+  opacity: 0.6;
+  font-weight: var(--font-weight-normal);
+}
+
+.messenger-home-featured {
+  background: var(--msg-bg);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  margin-bottom: var(--spacing-5);
+  box-shadow: var(--msg-shadow-card);
+}
+
+.messenger-home-featured-image {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  display: block;
+}
+
+.messenger-home-featured-divider {
+  height: 1px;
+  background: var(--msg-border);
+}
+
+.messenger-home-featured-content {
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.messenger-home-featured-content h3 {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  line-height: var(--line-height-normal);
+}
+
+.messenger-home-featured-content p {
+  margin: 0;
+  font-size: var(--font-size-base);
+  color: var(--msg-text-tertiary);
+  line-height: var(--line-height-relaxed);
+}
+
+.messenger-home-featured-btn {
+  margin-top: var(--spacing-3);
+}
+
+.messenger-home-changelog-section {
+  margin-top: var(--spacing-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.messenger-home-changelog-card {
+  background: var(--msg-bg-surface);
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid var(--msg-border);
+  transition: all var(--transition-base);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.messenger-home-changelog-card:hover {
+  background: var(--msg-bg-hover);
+}
+
+.messenger-home-changelog-card:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.messenger-home-changelog-cover {
+  width: 100%;
+  height: 140px;
+  overflow: hidden;
+  position: relative;
+}
+
+.messenger-home-changelog-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.messenger-home-changelog-cover-text {
+  position: absolute;
+  bottom: var(--spacing-3);
+  left: var(--spacing-3);
+  right: var(--spacing-3);
+  color: #ffffff;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  line-height: var(--line-height-snug);
+}
+
+.messenger-home-changelog-card-content {
+  padding: var(--spacing-4);
+  border-top: 1px solid var(--msg-border);
+}
+
+.messenger-home-changelog-card-title {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  line-height: var(--line-height-snug);
+}
+
+.messenger-home-changelog-card-desc {
+  margin: 0;
+  font-size: var(--font-size-base);
+  color: var(--msg-text-secondary);
+  line-height: var(--line-height-relaxed);
+}
+
+.messenger-home-availability,
+.messenger-chat-availability {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-top: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  color: var(--msg-text-secondary);
+}
+
+.messenger-availability-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.messenger-availability-online {
+  background: var(--color-success);
+  box-shadow: 0 0 0 2px var(--color-success-light);
+}
+
+.messenger-availability-away {
+  background: var(--color-neutral-400);
+}
+
+.messenger-availability-text {
+  opacity: 0.9;
+}
+
+/* ========================================
+   CONVERSATIONS VIEW
+   ======================================== */
+
+.messenger-conversations-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-3) var(--spacing-5);
+  border-bottom: 1px solid var(--msg-border);
+  background: var(--msg-bg-header-gradient);
+  position: relative;
+  overflow: hidden;
+}
+
+.messenger-conversations-header h2 {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  text-align: center;
+  flex: 1;
+}
+
+.messenger-conversations-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.messenger-conversations-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.messenger-conversation-item + .messenger-conversation-item {
+  border-top: 1px solid var(--msg-border);
+}
+
+.messenger-conversation-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  padding: 10px var(--spacing-4);
+  cursor: pointer;
+  transition: background var(--transition-base);
+}
+
+.messenger-conversation-item:hover {
+  background: var(--msg-bg-hover);
+}
+
+.messenger-conversation-item:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.messenger-conversation-avatars {
+  flex-shrink: 0;
+}
+
+.messenger-conversation-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.messenger-conversation-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-1);
+  gap: var(--spacing-3);
+}
+
+.messenger-conversation-title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--msg-text);
+  line-height: var(--line-height-snug);
+}
+
+.messenger-conversation-time {
+  font-size: var(--font-size-sm);
+  color: var(--msg-text-secondary);
+  flex-shrink: 0;
+}
+
+.messenger-conversation-preview {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.messenger-conversation-message {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  color: var(--msg-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height-normal);
+}
+
+.messenger-conversation-item.unread .messenger-conversation-message {
+  color: var(--msg-text);
+  font-weight: var(--font-weight-medium);
+}
+
+.messenger-unread-dot {
+  width: 8px;
+  height: 8px;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+
+.messenger-conversations-footer {
+  padding: var(--spacing-4);
+  border-top: none;
+}
+
+.messenger-new-message-btn {
+  max-width: 220px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3) var(--spacing-4);
+  background: var(--msg-bg);
+  border: none;
+  border-radius: var(--radius-xl);
+  color: var(--msg-text);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  font-family: inherit;
+  box-shadow: var(--msg-shadow-card);
+}
+
+.messenger-new-message-btn:hover {
+  background: var(--msg-bg-hover);
+  transform: translateX(4px);
+  box-shadow: var(--msg-shadow-card-hover);
+}
+
+.messenger-new-message-btn:active {
+  transform: translateX(4px) translateY(1px);
+  transition-duration: 100ms;
+}
+
+.messenger-new-message-btn span {
+  flex: 1;
+  text-align: left;
+}
+
+/* ========================================
+   HELP VIEW
+   ======================================== */
+
+.messenger-help-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-5) var(--spacing-3);
+  border-bottom: 1px solid var(--msg-border);
+  flex-shrink: 0;
+  background: var(--msg-bg-header-gradient);
+  position: relative;
+  overflow: hidden;
+}
+
+.messenger-help-header::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  width: 200px;
+  height: 200px;
+  background: var(--msg-bg-header-glow1);
+  filter: blur(30px);
+  pointer-events: none;
+}
+
+.messenger-help-header::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: -20px;
+  width: 150px;
+  height: 150px;
+  background: var(--msg-bg-header-glow2);
+  filter: blur(25px);
+  pointer-events: none;
+}
+
+.messenger-help-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.messenger-help-header-top h2 {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+}
+
+.messenger-help-close-btn {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.messenger-help-search-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.messenger-help-search-icon {
+  position: absolute;
+  left: var(--spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--msg-text-tertiary);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.messenger-help-search-input {
+  width: 100%;
+  background: var(--msg-bg-input);
+  border: 1px solid var(--msg-border);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) calc(var(--spacing-3) + 16px + var(--spacing-2));
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-normal);
+  color: var(--msg-text);
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition-base), background var(--transition-base);
+  box-sizing: border-box;
+}
+
+.messenger-help-search-input:focus {
+  border-color: var(--color-primary);
+  background: var(--msg-bg);
+}
+
+.messenger-help-search-input::placeholder {
+  color: var(--msg-text-tertiary);
+}
+
+.messenger-help-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.messenger-help-collections-header {
+  display: none;
+}
+
+.messenger-help-collections {
+  padding: 0;
+}
+
+.messenger-help-collection {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-5);
+  cursor: pointer;
+  transition: background var(--transition-base);
+  border-bottom: 1px solid var(--msg-border);
+}
+
+.messenger-help-collection:hover {
+  background: var(--msg-bg-hover);
+}
+
+.messenger-help-collection:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.messenger-help-collection-icon {
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--msg-text-secondary);
+}
+
+.messenger-help-collection-icon svg,
+.messenger-help-collection-icon iconify-icon {
+  width: 2rem;
+  height: 2rem;
+  display: block;
+}
+
+.messenger-help-collection-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.messenger-help-collection-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  line-height: var(--line-height-snug);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.messenger-help-collection-desc {
+  margin: 2px 0 var(--spacing-1);
+  font-size: var(--font-size-sm);
+  color: var(--msg-text-secondary);
+  line-height: var(--line-height-normal);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.messenger-help-collection-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-top: 2px;
+}
+
+.messenger-help-collection-avatar {
+  display: none;
+}
+
+.messenger-help-collection-avatar--initials {
+  display: none;
+  line-height: 1;
+}
+
+.messenger-help-collection-count {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--msg-text-tertiary);
+}
+
+.messenger-help-footer {
+  padding: var(--spacing-4) var(--spacing-5);
+  border-top: 1px solid var(--msg-border);
+  text-align: center;
+}
+
+.messenger-help-footer-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--transition-base);
+}
+
+.messenger-help-footer-link:hover {
+  color: var(--color-primary);
+}
+
+/* ========================================
+   CHANGELOG VIEW
+   ======================================== */
+
+.messenger-changelog-header {
+  padding: var(--spacing-2) var(--spacing-5);
+  border-bottom: 1px solid var(--msg-border);
+  flex-shrink: 0;
+  background: var(--msg-bg-header-gradient);
+  position: relative;
+  overflow: hidden;
+}
+
+.messenger-changelog-header::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  width: 200px;
+  height: 200px;
+  background: var(--msg-bg-header-glow1);
+  filter: blur(30px);
+  pointer-events: none;
+}
+
+.messenger-changelog-header::after {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: -20px;
+  width: 150px;
+  height: 150px;
+  background: var(--msg-bg-header-glow2);
+  filter: blur(25px);
+  pointer-events: none;
+}
+
+.messenger-changelog-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.messenger-changelog-header-top h2 {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+}
+
+.messenger-changelog-close-btn {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.messenger-changelog-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.messenger-changelog-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.messenger-changelog-card {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-5);
+  border-bottom: 1px solid var(--msg-border);
+  cursor: pointer;
+  transition: background var(--transition-base);
+}
+
+.messenger-changelog-card:last-child {
+  border-bottom: none;
+}
+
+.messenger-changelog-card:hover {
+  background: var(--msg-bg-hover);
+}
+
+.messenger-changelog-card:hover .messenger-changelog-arrow {
+  color: var(--color-primary);
+  transform: translateX(3px);
+}
+
+.messenger-changelog-card:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.messenger-changelog-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.messenger-changelog-meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+
+.messenger-changelog-date {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--msg-text-tertiary);
+}
+
+.messenger-changelog-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+.messenger-changelog-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 8px;
+  border-radius: var(--radius-full);
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+}
+
+.messenger-changelog-title {
+  margin: 0;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  line-height: var(--line-height-snug);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.messenger-changelog-description {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--msg-text-secondary);
+  line-height: var(--line-height-normal);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.messenger-changelog-thumb {
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--msg-border);
+}
+
+.messenger-changelog-thumb img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.messenger-changelog-arrow {
+  flex-shrink: 0;
+  color: var(--msg-text-tertiary);
+  transition: all var(--transition-base);
+}
+`;