@ibgib/space-gib 0.0.33 → 0.0.34

package/src/client/ui/component/nested-chat/chat/chat.css

@@ -0,0 +1,654 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--clr-bg-surface, #0d1322);
+    color: var(--clr-text-primary, #f0f4fc);
+    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+    font-size: 0.85rem;
+    overflow: hidden;
+}
+
+.chat-child-root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* ── Context Header ── */
+.chat-context-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.6rem 0.9rem;
+    background: rgba(5, 8, 15, 0.45);
+    border-bottom: 1px solid var(--clr-border, rgba(255, 255, 255, 0.08));
+    flex-shrink: 0;
+}
+
+.chat-context-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+}
+
+.chat-context-icon {
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.chat-context-title {
+    font-size: 0.825rem;
+    font-weight: 600;
+    color: var(--clr-text-primary, #f0f4fc);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.chat-context-meta {
+    font-size: 0.725rem;
+    color: var(--clr-text-muted, #7e8c9f);
+    font-family: var(--font-mono, monospace);
+}
+
+/* ── Messages Stream Container ── */
+.chat-messages-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.85rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-height: 0;
+}
+
+.chat-empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2.5rem 1rem;
+    text-align: center;
+    color: var(--clr-text-muted, #7e8c9f);
+    gap: 0.5rem;
+}
+
+.empty-icon {
+    font-size: 2.2rem;
+    opacity: 0.6;
+}
+
+.empty-hint {
+    font-size: 0.75rem;
+    color: var(--clr-text-secondary, #b4c0d3);
+    max-width: 260px;
+    line-height: 1.35;
+}
+
+.chat-messages-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+/* ── Comment Card ── */
+.chat-comment-card {
+    background: rgba(18, 25, 42, 0.65);
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.08));
+    border-radius: 6px;
+    padding: 0.7rem 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    transition: all 140ms ease;
+    cursor: default;
+}
+
+.chat-comment-card:hover {
+    border-color: rgba(255, 255, 255, 0.16);
+    background: rgba(22, 31, 52, 0.75);
+}
+
+.comment-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.author-info {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.avatar {
+    font-size: 0.95rem;
+    line-height: 1;
+}
+
+.author-name {
+    font-weight: 600;
+    font-size: 0.825rem;
+    color: var(--clr-text-primary, #f0f4fc);
+}
+
+.role-badge {
+    font-size: 0.625rem;
+    padding: 0.1rem 0.35rem;
+    border-radius: 999px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.role-keystone {
+    background: rgba(120, 248, 126, 0.12);
+    color: var(--clr-accent, #78f87e);
+    border: 1px solid rgba(120, 248, 126, 0.25);
+}
+
+.role-peer {
+    background: rgba(99, 102, 241, 0.15);
+    color: #a5b4fc;
+    border: 1px solid rgba(99, 102, 241, 0.25);
+}
+
+.role-agent {
+    background: rgba(236, 72, 153, 0.15);
+    color: #f472b6;
+    border: 1px solid rgba(236, 72, 153, 0.25);
+}
+
+.header-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.anchor-badge {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.7rem;
+    font-family: var(--font-mono, monospace);
+    color: var(--clr-warn, #ffd166);
+    background: rgba(255, 209, 102, 0.08);
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 209, 102, 0.2);
+}
+
+.timestamp {
+    font-size: 0.7rem;
+    color: var(--clr-text-muted, #7e8c9f);
+}
+
+.comment-body {
+    font-size: 0.825rem;
+    line-height: 1.45;
+    color: var(--clr-text-secondary, #b4c0d3);
+}
+
+.comment-text {
+    margin: 0;
+    word-break: break-word;
+}
+
+/* ── Comment Actions & Drill Down Button ── */
+.comment-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 0.2rem;
+    padding-top: 0.35rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.btn-drill-down {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--clr-text-secondary, #b4c0d3);
+    padding: 0.25rem 0.55rem;
+    border-radius: 4px;
+    font-size: 0.725rem;
+    cursor: pointer;
+    transition: all 140ms ease;
+}
+
+.btn-drill-down:hover {
+    background: rgba(120, 248, 126, 0.1);
+    border-color: var(--clr-accent, #78f87e);
+    color: var(--clr-text-primary, #f0f4fc);
+    transform: translateX(1px);
+}
+
+.drill-icon {
+    color: var(--clr-accent, #78f87e);
+    font-size: 0.85rem;
+    font-weight: bold;
+}
+
+.drill-label {
+    font-weight: 500;
+}
+
+.drill-arrow {
+    font-size: 0.75rem;
+    opacity: 0.8;
+}
+
+/* ── Compose Bar ── */
+.chat-compose-container {
+    padding: 0.7rem 0.9rem;
+    background: rgba(5, 8, 15, 0.75);
+    border-top: 1px solid var(--clr-border, rgba(255, 255, 255, 0.08));
+    flex-shrink: 0;
+}
+
+.chat-compose-bar {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+    background: rgba(18, 25, 42, 0.8);
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.12));
+    border-radius: 6px;
+    padding: 0.4rem 0.6rem;
+    transition: border-color 150ms ease;
+}
+
+.chat-compose-bar:focus-within {
+    border-color: var(--clr-accent, #78f87e);
+    box-shadow: 0 0 0 1px rgba(120, 248, 126, 0.2);
+}
+
+.chat-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--clr-text-primary, #f0f4fc);
+    font-family: inherit;
+    font-size: 0.825rem;
+    line-height: 1.4;
+    resize: none;
+    min-height: 36px;
+    max-height: 120px;
+    box-sizing: border-box;
+}
+
+.chat-input::placeholder {
+    color: var(--clr-text-muted, #7e8c9f);
+}
+
+.compose-send-group {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.35rem;
+    flex-shrink: 0;
+}
+
+.select-enter-behavior {
+    background: rgba(8, 12, 22, 0.9);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    padding: 0.28rem 0.45rem;
+    color: #94a3b8;
+    font-size: 0.72rem;
+    font-family: inherit;
+    outline: none;
+    cursor: pointer;
+    transition: all 120ms ease;
+    height: 28px;
+    box-sizing: border-box;
+}
+
+.select-enter-behavior:hover,
+.select-enter-behavior:focus {
+    border-color: #818cf8;
+    color: #f1f5f9;
+    background: rgba(15, 23, 42, 0.95);
+}
+
+.btn-chat-send {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.3rem;
+    background: var(--clr-accent, #78f87e);
+    border: none;
+    color: #05080f;
+    font-weight: 600;
+    font-size: 0.75rem;
+    padding: 0.35rem 0.75rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 120ms ease;
+    flex-shrink: 0;
+    height: 28px;
+    box-sizing: border-box;
+}
+
+.btn-chat-send:hover {
+    background: #9fffa5;
+    box-shadow: 0 0 12px rgba(120, 248, 126, 0.4);
+}
+
+/* ── Compose Toolbar & Inputs ── */
+.chat-compose-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.chat-title-input {
+    flex: 1;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    padding: 5px 8px;
+    color: #f8fafc;
+    font-size: 11.5px;
+    outline: none;
+    transition: border-color 0.15s ease;
+}
+
+.chat-title-input:focus {
+    border-color: #818cf8;
+}
+
+.chat-title-input.required-alert {
+    border-color: #ef4444;
+    animation: shakeInput 0.3s ease;
+}
+
+@keyframes shakeInput {
+
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    20%,
+    60% {
+        transform: translateX(-4px);
+    }
+
+    40%,
+    80% {
+        transform: translateX(4px);
+    }
+}
+
+.compose-toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.btn-compose-tool {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: #94a3b8;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 4px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.btn-compose-tool:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8fafc;
+}
+
+.btn-compose-tool.active {
+    background: rgba(99, 102, 241, 0.2);
+    border-color: #818cf8;
+    color: #c7d2fe;
+}
+
+.btn-compose-collapse {
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    font-size: 10px;
+    cursor: pointer;
+    padding: 4px 6px;
+    border-radius: 4px;
+    line-height: 1;
+    transition: background 0.15s, color 0.15s;
+}
+
+.btn-compose-collapse:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8fafc;
+}
+
+.chat-compose-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+.chat-compose-body.collapsed {
+    display: none;
+}
+
+/* ── Markdown Preview Drawer ── */
+.chat-preview-drawer {
+    background: rgba(15, 23, 42, 0.9);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 6px;
+    padding: 8px 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    animation: fadeInDrawer 160ms ease;
+}
+
+.chat-preview-drawer.hidden {
+    display: none !important;
+}
+
+.preview-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    padding-bottom: 4px;
+}
+
+.preview-title {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #94a3b8;
+}
+
+.preview-encryption-notice {
+    font-size: 10px;
+    font-weight: 600;
+    color: #34d399;
+}
+
+.preview-content-box {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 120px;
+    overflow-y: auto;
+}
+
+.preview-title-render {
+    margin: 0;
+    font-size: 12.5px;
+    font-weight: 700;
+    color: #f1f5f9;
+}
+
+.preview-body-render {
+    font-size: 11.5px;
+    line-height: 1.4;
+    color: #cbd5e1;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* ── Encryption Drawer (Below Compose Bar) ── */
+.chat-encrypt-drawer {
+    background: rgba(10, 15, 28, 0.9);
+    border: 1px solid rgba(129, 140, 248, 0.3);
+    border-radius: 6px;
+    padding: 8px 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    animation: fadeInDrawer 160ms ease;
+}
+
+.chat-encrypt-drawer.hidden {
+    display: none !important;
+}
+
+.encrypt-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    padding-bottom: 4px;
+}
+
+.encrypt-drawer-title {
+    font-size: 10.5px;
+    font-weight: 700;
+    color: #c7d2fe;
+}
+
+.session-key-badge {
+    font-size: 10px;
+    font-weight: 600;
+    color: #78f87e;
+    background: rgba(120, 248, 126, 0.12);
+    border: 1px solid rgba(120, 248, 126, 0.25);
+    padding: 1px 6px;
+    border-radius: 10px;
+}
+
+.session-key-badge.hidden {
+    display: none !important;
+}
+
+.encrypt-drawer-row {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.encrypt-passphrase-input {
+    flex: 1;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    padding: 4px 8px;
+    color: #f8fafc;
+    font-size: 11px;
+    outline: none;
+    transition: border-color 0.15s ease;
+}
+
+.encrypt-passphrase-input:focus {
+    border-color: #818cf8;
+}
+
+.select-encrypt-algo {
+    background: rgba(18, 25, 42, 0.95);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    padding: 4px 6px;
+    color: #c7d2fe;
+    font-size: 11px;
+    outline: none;
+    cursor: pointer;
+}
+
+.encrypt-preview-row {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.encrypt-preview-label {
+    font-size: 9.5px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    color: #94a3b8;
+    text-transform: uppercase;
+}
+
+.textarea-encrypt-preview {
+    width: 100%;
+    box-sizing: border-box;
+    height: 40px;
+    font-family: var(--font-mono, monospace);
+    font-size: 10px;
+    line-height: 1.35;
+    background: rgba(0, 0, 0, 0.45);
+    color: #34d399;
+    border: 1px solid rgba(52, 211, 153, 0.25);
+    border-radius: 4px;
+    padding: 4px 6px;
+    resize: none;
+    outline: none;
+    user-select: all;
+}
+
+/* ── Comment Card Enhancements ── */
+.comment-title-header {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: #f8fafc;
+    margin: 0 0 4px 0;
+    line-height: 1.3;
+}
+
+.encrypted-card-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: #34d399;
+    background: rgba(52, 211, 153, 0.1);
+    border: 1px solid rgba(52, 211, 153, 0.25);
+    padding: 0.1rem 0.45rem;
+    border-radius: 4px;
+}
+
+@keyframes fadeInDrawer {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}