most-box 0.0.4 → 0.0.7

package/out/chat.css

@@ -1,378 +0,0 @@
-/* =============================================
-   Chat Page Styles
-   Chat-specific components (reuses app.css for layout)
-   ============================================= */
-
-/* === Dark Theme Support === */
-[data-theme="dark"] {
-  --chat-bg-secondary: #1e293b;
-  --chat-bg-tertiary: #334155;
-  --chat-border-color: rgba(255, 255, 255, 0.08);
-}
-
-/* === Messages Area === */
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.chat-messages-empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-  gap: 12px;
-
-  .empty-icon {
-    width: 64px;
-    height: 64px;
-    border-radius: 16px;
-    background: var(--bg-tertiary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-muted);
-  }
-
-  p {
-    font-size: 14px;
-  }
-}
-
-.chat-message {
-  display: flex;
-  flex-direction: column;
-  max-width: 70%;
-  animation: fadeIn 0.2s ease;
-
-  &.self {
-    align-self: flex-end;
-    align-items: flex-end;
-
-    .message-bubble {
-      background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-secondary));
-      border: 1px solid color-mix(in srgb, var(--accent-blue) 20%, var(--border-color));
-      border-radius: 18px 18px 4px 18px;
-    }
-  }
-
-  &.other {
-    align-self: flex-start;
-    align-items: flex-start;
-
-    .message-bubble {
-      background: var(--bg-tertiary);
-      border-radius: 18px 18px 18px 4px;
-    }
-  }
-
-  .message-author {
-    font-size: 11px;
-    color: var(--text-muted);
-    margin-bottom: 4px;
-    padding: 0 12px;
-  }
-
-  .message-bubble {
-    padding: 12px 16px;
-    font-size: 14px;
-    line-height: 1.5;
-    word-break: break-word;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-
-  .message-time {
-    font-size: 10px;
-    color: var(--text-muted);
-    margin-top: 4px;
-    padding: 0 12px;
-  }
-
-  &.pending .message-bubble {
-    opacity: 0.6;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* === Input Area === */
-.chat-input-area {
-  display: flex;
-  gap: 12px;
-  padding: 16px 24px;
-  border-top: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-
-  .chat-input {
-    flex: 1;
-    padding: 12px 18px;
-    border-radius: 24px;
-    border: 1.5px solid var(--border-color);
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    font-size: 14px;
-    outline: none;
-    transition: border-color 0.15s;
-
-    &::placeholder {
-      color: var(--text-muted);
-    }
-
-    &:focus {
-      border-color: var(--accent-blue);
-    }
-  }
-
-  .send-btn {
-    width: 44px;
-    height: 44px;
-    border-radius: 50%;
-    border: none;
-    background: var(--accent-blue);
-    color: #fff;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.15s;
-    flex-shrink: 0;
-
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--accent-blue) 85%, black);
-      transform: scale(1.05);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}
-
-/* === Toast === */
-.chat-toast {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 200;
-  padding: 12px 24px;
-  border-radius: 12px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-  border: 1px solid var(--border-color);
-  animation: toastIn 0.3s ease;
-}
-
-@keyframes toastIn {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-/* === Welcome State (no channel selected) === */
-.chat-welcome {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  text-align: center;
-  background: var(--bg-primary);
-
-  .welcome-icon {
-    width: 80px;
-    height: 80px;
-    border-radius: 20px;
-    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 15%, var(--bg-secondary)), color-mix(in srgb, var(--accent-blue) 5%, var(--bg-tertiary)));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--accent-blue);
-    margin-bottom: 20px;
-    box-shadow: 0 10px 40px color-mix(in srgb, var(--accent-blue) 20%, transparent);
-  }
-
-  h2 {
-    font-size: 22px;
-    font-weight: 700;
-    margin-bottom: 8px;
-  }
-
-  p {
-    font-size: 14px;
-    color: var(--text-secondary);
-    max-width: 320px;
-    line-height: 1.6;
-  }
-}
-
-/* === Create Channel Button === */
-.create-channel-btn {
-  margin: 8px;
-  padding: 10px;
-  border-radius: 8px;
-  border: 1.5px dashed var(--border-color);
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.15s;
-
-  &:hover {
-    border-color: var(--accent-blue);
-    color: var(--accent-blue);
-    background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
-  }
-}
-
-/* === Peer Info === */
-.peer-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 11px;
-  color: var(--text-secondary);
-
-  .peer-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--success);
-  }
-
-  .peer-id {
-    font-family: monospace;
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-/* === Back Button (for chat sidebar) === */
-.back-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.15s;
-
-  &:hover {
-    background: var(--bg-tertiary);
-  }
-}
-
-/* === Mobile === */
-.chat-sidebar-overlay {
-  display: none;
-}
-
-@media (max-width: 768px) {
-  .chat-sidebar {
-    position: fixed;
-    left: -240px;
-    top: 0;
-    bottom: 0;
-    z-index: 50;
-    transition: left 0.3s ease;
-
-    &.open {
-      left: 0;
-    }
-  }
-
-  .chat-sidebar-overlay {
-    display: block;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 40;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-
-    &.visible {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  .chat-messages {
-    padding: 16px;
-  }
-
-  .chat-message {
-    max-width: 85%;
-  }
-
-  .chat-input-area {
-    padding: 12px 16px;
-  }
-
-  .sidebar-nav-btn .leave-channel-btn {
-    opacity: 1;
-  }
-}
-
-/* === Leave Channel Button === */
-.leave-channel-btn {
-  margin-left: auto;
-  opacity: 0;
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: opacity 0.15s, color 0.15s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.sidebar-nav-btn:hover .leave-channel-btn {
-  opacity: 1;
-}
-
-.leave-channel-btn:hover {
-  color: var(--danger);
-  background: color-mix(in srgb, var(--danger) 10%, transparent);
-}
-
-