anentrypoint-design 0.0.26 → 0.0.28

package/dist/247420.css

@@ -1521,19 +1521,28 @@
 
 .ds-247420 .chat-msg {
     display: grid;
-    grid-template-columns: 32px 1fr;
+    grid-template-columns: 32px minmax(0, 1fr);
     gap: 10px;
-    align-items: flex-start;
+    align-items: start;
     max-width: 92%;
 }
 .ds-247420 .chat-msg.you {
-    grid-template-columns: 1fr 32px;
+    grid-template-columns: minmax(0, 1fr) 32px;
     margin-left: auto;
-    text-align: right;
+    justify-self: end;
 }
+.ds-247420 .chat-msg.you .chat-stack { align-items: flex-end; }
 .ds-247420 .chat-msg.you .chat-bubble { background: var(--panel-accent); color: var(--panel-accent-fg); border-radius: 18px 18px 4px 18px; }
 .ds-247420 .chat-msg.you .chat-meta { justify-content: flex-end; }
 
+.ds-247420 .chat-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    min-width: 0;
+}
+
 .ds-247420 .chat-avatar {
     width: 32px; height: 32px;
     border-radius: 999px;
@@ -1559,14 +1568,13 @@
     line-height: 1.5;
     text-align: left;
     white-space: pre-wrap;
-    word-wrap: break-word;
+    overflow-wrap: anywhere;
+    max-width: 100%;
 }
-.ds-247420 .chat-msg.you .chat-bubble { text-align: left; display: inline-block; }
 
 .ds-247420 .chat-meta {
     display: flex;
     gap: 6px;
-    margin-top: 4px;
     font-family: var(--ff-mono);
     font-size: 10.5px;
     color: var(--panel-text-3);
@@ -1668,3 +1676,201 @@
     line-height: 1.0;
     letter-spacing: -0.5px;
 }
+
+/* Inline elements inside bubbles */
+.ds-247420 .chat-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.ds-247420 .chat-bubble strong { font-weight: 600; }
+.ds-247420 .chat-bubble em { font-style: italic; }
+.ds-247420 .chat-bubble code.chat-tick {
+    font-family: var(--ff-mono);
+    font-size: 12px;
+    background: rgba(0,0,0,0.18);
+    padding: 1px 5px;
+    border-radius: 5px;
+}
+.ds-247420 .chat-msg.you .chat-bubble code.chat-tick { background: rgba(255,255,255,0.22); }
+
+/* Markdown-lite block bubble */
+.ds-247420 .chat-md p { margin: 0 0 8px 0; }
+.ds-247420 .chat-md p:last-child { margin-bottom: 0; }
+.ds-247420 .chat-md ul { margin: 4px 0 4px 0; padding-left: 18px; }
+.ds-247420 .chat-md li { margin: 2px 0; }
+
+/* Code attachment */
+.ds-247420 .chat-code {
+    padding: 0;
+    overflow: hidden;
+    max-width: 100%;
+    background: var(--panel-1);
+    border-radius: 14px 14px 14px 6px;
+    width: 100%;
+    box-sizing: border-box;
+}
+.ds-247420 .chat-msg.you .chat-code { border-radius: 14px 14px 6px 14px; background: var(--panel-1); color: var(--panel-text); }
+.ds-247420 .chat-code-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 14px;
+    background: var(--panel-2);
+    color: var(--panel-text-2);
+    font-family: var(--ff-mono);
+    font-size: 11.5px;
+    letter-spacing: 0.02em;
+}
+.ds-247420 .chat-code-head .lang { color: var(--panel-accent); font-weight: 600; text-transform: lowercase; }
+.ds-247420 .chat-code-head .name { color: var(--panel-text-2); }
+.ds-247420 .chat-code pre {
+    margin: 0;
+    padding: 12px 14px;
+    background: var(--panel-1);
+    color: var(--panel-text);
+    font-family: var(--ff-mono);
+    font-size: 12.5px;
+    line-height: 1.55;
+    overflow-x: auto;
+    max-width: 100%;
+    box-sizing: border-box;
+}
+.ds-247420 .chat-code pre code { background: transparent; padding: 0; font-family: inherit; font-size: inherit; }
+
+/* Image attachment */
+.ds-247420 .chat-image {
+    display: block;
+    max-width: 100%;
+    border-radius: 14px 14px 14px 6px;
+    overflow: hidden;
+    background: var(--panel-2);
+    text-decoration: none;
+    color: inherit;
+}
+.ds-247420 .chat-msg.you .chat-image { border-radius: 14px 14px 6px 14px; }
+.ds-247420 .chat-image img { display: block; max-width: 360px; max-height: 320px; width: 100%; height: auto; object-fit: cover; }
+.ds-247420 .chat-image .cap {
+    display: block;
+    padding: 6px 12px 8px 12px;
+    font-size: 12px;
+    color: var(--panel-text-2);
+}
+
+/* PDF attachment */
+.ds-247420 .chat-pdf {
+    background: var(--panel-2);
+    border-radius: 14px 14px 14px 6px;
+    overflow: hidden;
+    max-width: 100%;
+    width: 360px;
+}
+.ds-247420 .chat-msg.you .chat-pdf { border-radius: 14px 14px 6px 14px; }
+.ds-247420 .chat-pdf-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    font-family: var(--ff-mono);
+    font-size: 12px;
+    color: var(--panel-text);
+    background: var(--panel-1);
+}
+.ds-247420 .chat-pdf-head .glyph { color: var(--mascot, #e0a200); font-size: 16px; }
+.ds-247420 .chat-pdf-head .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .chat-pdf-head .size { color: var(--panel-text-3); font-size: 11px; }
+.ds-247420 .chat-pdf-head .open { color: var(--panel-accent); text-decoration: none; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); }
+.ds-247420 .chat-pdf-head .open:hover { filter: brightness(1.1); }
+.ds-247420 .chat-pdf embed { display: block; width: 100%; height: 280px; background: var(--panel-0); border: 0; }
+
+/* Generic file attachment */
+.ds-247420 .chat-file {
+    display: grid;
+    grid-template-columns: 36px 1fr 28px;
+    gap: 12px;
+    align-items: center;
+    background: var(--panel-2);
+    color: var(--panel-text);
+    text-decoration: none;
+    padding: 10px 14px;
+    border-radius: 14px 14px 14px 6px;
+    max-width: 360px;
+    transition: background 80ms ease;
+}
+.ds-247420 .chat-msg.you .chat-file { border-radius: 14px 14px 6px 14px; background: rgba(255,255,255,0.18); color: var(--panel-accent-fg); }
+.ds-247420 .chat-file:hover { background: var(--panel-3); }
+.ds-247420 .chat-msg.you .chat-file:hover { background: rgba(255,255,255,0.28); }
+.ds-247420 .chat-file .glyph {
+    width: 36px; height: 36px;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: var(--panel-1);
+    color: var(--panel-accent);
+    border-radius: 10px;
+    font-family: var(--ff-mono);
+    font-size: 16px;
+}
+.ds-247420 .chat-msg.you .chat-file .glyph { background: rgba(0,0,0,0.18); color: var(--panel-accent-fg); }
+.ds-247420 .chat-file .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ds-247420 .chat-file .name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .chat-file .size { font-family: var(--ff-mono); font-size: 11px; color: var(--panel-text-3); letter-spacing: 0.02em; text-transform: uppercase; }
+.ds-247420 .chat-msg.you .chat-file .size { color: rgba(255,255,255,0.7); }
+.ds-247420 .chat-file .go { color: var(--panel-text-3); font-size: 14px; text-align: right; }
+.ds-247420 .chat-msg.you .chat-file .go { color: rgba(255,255,255,0.7); }
+
+/* Link card */
+.ds-247420 .chat-link {
+    display: flex;
+    gap: 12px;
+    background: var(--panel-2);
+    color: var(--panel-text);
+    text-decoration: none;
+    padding: 10px 12px;
+    border-radius: 14px 14px 14px 6px;
+    max-width: 420px;
+    transition: background 80ms ease;
+}
+.ds-247420 .chat-msg.you .chat-link { border-radius: 14px 14px 6px 14px; background: rgba(255,255,255,0.18); color: var(--panel-accent-fg); }
+.ds-247420 .chat-link:hover { background: var(--panel-3); }
+.ds-247420 .chat-link .thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--panel-1); }
+.ds-247420 .chat-link .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ds-247420 .chat-link .host { font-family: var(--ff-mono); font-size: 10.5px; color: var(--panel-text-3); letter-spacing: 0.02em; text-transform: uppercase; }
+.ds-247420 .chat-msg.you .chat-link .host { color: rgba(255,255,255,0.7); }
+.ds-247420 .chat-link .title { font-size: 13px; font-weight: 600; line-height: 1.35; }
+.ds-247420 .chat-link .desc { font-size: 12px; color: var(--panel-text-2); line-height: 1.4; max-height: 2.8em; overflow: hidden; }
+.ds-247420 .chat-msg.you .chat-link .desc { color: rgba(255,255,255,0.78); }
+
+/* Reactions */
+.ds-247420 .chat-reactions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+.ds-247420 .chat-reactions .rxn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    background: var(--panel-2);
+    color: var(--panel-text-2);
+    border-radius: 999px;
+    font-family: var(--ff-ui);
+    font-size: 11.5px;
+    line-height: 1.3;
+    cursor: pointer;
+    transition: background 80ms ease;
+}
+.ds-247420 .chat-reactions .rxn:hover { background: var(--panel-3); }
+.ds-247420 .chat-reactions .rxn.you {
+    background: color-mix(in oklab, var(--panel-accent) 26%, var(--panel-2));
+    color: var(--panel-text);
+}
+.ds-247420 .chat-reactions .rxn .e { font-size: 13px; }
+.ds-247420 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-size: 11px; }
+
+/* Meta meta — name + tick */
+.ds-247420 .chat-meta .who { color: var(--panel-text-2); font-family: var(--ff-ui); font-weight: 600; font-size: 11px; }
+.ds-247420 .chat-meta .tick { color: var(--panel-text-3); }
+.ds-247420 .chat-meta .tick.read { color: var(--panel-accent); }
+
+/* Stack: when bubble is a card kind, give them a little gap */
+.ds-247420 .chat-stack > .chat-image,
+.ds-247420 .chat-stack > .chat-code,
+.ds-247420 .chat-stack > .chat-pdf,
+.ds-247420 .chat-stack > .chat-file,
+.ds-247420 .chat-stack > .chat-link { max-width: 100%; }