/* wuwei — tokens unificados (light + dark) e componentes derivados de
* concept-home.html + concept-tweets-v4.html. Estrutura:
* 1) tokens
* 2) reset/tipografia
* 3) login
* 4) topbar
* 5) layout (sidebar + main)
* 6) sidebar (search, tabs, contacts, footer)
* 7) dashboard view
* 8) conv view (day-divider + stacks + bubbles + media + tapbacks)
* 9) typing / smart replies / composer
* 10) modals e popovers (action menu, react picker global, forward, group, invite, quote-preview)
* 11) whisper progress, notif, status, etc. (utilitários)
* 12) responsive
*/
:root,
[data-theme="light"] {
--bg: #eef1f6;
--feed: #ffffff;
--panel: #ffffff;
--panel-2: #f7f9fc;
--hover: #eaeef5;
--hover-strong: #dee4ee;
--bg-glass: rgba(238, 241, 246, 0.88);
--border: rgba(15, 23, 42, 0.10);
--border-strong: rgba(15, 23, 42, 0.16);
--rule: rgba(15, 23, 42, 0.10);
--text: #0f172a;
--text-muted: #5b6478;
--text-subtle: #94a3b8;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--accent-deep: #1e3a8a;
--accent-strong: #1e3a8a;
--accent-soft: #eff6ff;
--accent-soft-2: #dbeafe;
--info: #0ea5e9;
--info-soft: #e0f2fe;
--success: #10b981;
--warn: #f59e0b;
--danger: #ef4444;
--ok: var(--success);
--mine-bg: #eff6ff;
--mine-border: rgba(37, 99, 235, 0.16);
--mine-text: #1e3a8a;
--mine-text-soft: rgba(30, 58, 138, 0.55);
--mine-quote-bg: rgba(37, 99, 235, 0.07);
--mine-quote-bar: var(--accent);
--theirs-bg: #ffffff;
--theirs-border: rgba(15, 23, 42, 0.08);
--theirs-text: #0f172a;
--theirs-text-soft: #6b7280;
--theirs-quote-bg: rgba(15, 23, 42, 0.04);
--theirs-quote-bar: var(--accent);
--bubble-out: var(--mine-bg);
--bubble-out-border: var(--mine-border);
--code-bg: #0b1220;
--code-text: #e2e8f0;
--code-key: #93c5fd;
--code-str: #86efac;
--code-num: #fdba74;
--code-com: #64748b;
--highlight: rgba(250, 204, 21, 0.32);
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04);
--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
--shadow-pop: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.05);
--shadow-bubble: 0 1px 1px rgba(15, 23, 42, 0.04);
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 6px;
--radius-card: 12px;
--radius-bubble: 18px;
--radius-bubble-tight: 6px;
--radius-pill: 999px;
/* Largura da coluna de conversa (lista de mensagens, composer, etc).
* 100% espalha pela largura disponível ao lado da sidebar. */
--col-w: 100%;
}
[data-theme="dark"] {
--bg: #0a0d12;
--feed: #11151c;
--panel: #11151c;
--panel-2: #0f131a;
--hover: #161b25;
--hover-strong: #1c2331;
--bg-glass: rgba(10, 13, 18, 0.86);
--border: rgba(255, 255, 255, 0.07);
--border-strong: rgba(255, 255, 255, 0.13);
--rule: rgba(255, 255, 255, 0.045);
--text: #e6e8ed;
--text-muted: #9ca3b1;
--text-subtle: #5f6779;
--accent: #3b82f6;
--accent-hover: #60a5fa;
--accent-deep: #1e40af;
--accent-strong: #1e40af;
--accent-soft: rgba(96, 165, 250, 0.1);
--accent-soft-2: rgba(96, 165, 250, 0.22);
--info: #38bdf8;
--info-soft: rgba(56, 189, 248, 0.15);
--success: #34d399;
--warn: #fbbf24;
--danger: #f87171;
--mine-bg: rgba(96, 165, 250, 0.13);
--mine-border: rgba(96, 165, 250, 0.30);
--mine-text: #cfe1ff;
--mine-text-soft: rgba(207, 225, 255, 0.55);
--mine-quote-bg: rgba(96, 165, 250, 0.13);
--theirs-bg: #1a2030;
--theirs-border: rgba(255, 255, 255, 0.05);
--theirs-text: #e6e8ed;
--theirs-text-soft: #9ca3b1;
--theirs-quote-bg: rgba(255, 255, 255, 0.05);
--bubble-out: var(--mine-bg);
--bubble-out-border: var(--mine-border);
--code-bg: #050810;
--code-text: #e6e8ed;
--highlight: rgba(250, 204, 21, 0.22);
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
--shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: var(--bg);
color: var(--text);
font-family: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 14.5px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant-ligatures: contextual common-ligatures;
text-rendering: optimizeLegibility;
transition: background 0.2s, color 0.2s;
}
body {
display: flex;
flex-direction: column;
}
.hidden,
[hidden] {
display: none !important;
}
.muted {
color: var(--text-muted);
}
.mono {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ===================== Brand ===================== */
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
font-weight: 600;
letter-spacing: -0.018em;
}
.brand-logo {
width: 28px;
height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent), var(--info));
color: #fff;
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: -0.04em;
}
.brand-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--info));
box-shadow: 0 0 0 3px var(--accent-soft);
}
.brand-name {
font-weight: 600;
font-size: 15.5px;
letter-spacing: -0.018em;
}
.brand-tag {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
color: var(--text-subtle);
margin-left: 2px;
}
/* ===================== Login ===================== */
.login-screen {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
}
.login-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 32px 28px;
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 12px;
}
.login-card h1 {
margin: 8px 0 0;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
}
.subtitle {
margin: 0;
color: var(--text-muted);
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0.01em;
}
.field input {
background: var(--panel-2);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
padding: 10px 12px;
font: inherit;
font-size: 14px;
color: var(--text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
background: var(--panel);
}
.login-card button[type="submit"] {
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius-sm);
padding: 10px 14px;
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s;
}
.login-card button[type="submit"]:hover {
background: var(--accent-hover);
}
.login-status {
font-size: 13px;
color: var(--text-muted);
min-height: 20px;
}
.login-status.err {
color: var(--danger);
}
.login-status.muted {
color: var(--text-muted);
}
/* ===================== Chat screen + Topbar ===================== */
.chat-screen {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.topbar {
position: sticky;
top: 0;
z-index: 50;
background: var(--bg-glass);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--border);
padding: 10px 18px;
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.topbar-search {
display: flex;
justify-content: center;
}
.search-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 10px 0 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
font-size: 13px;
color: var(--text-muted);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, color 0.12s;
min-width: 360px;
max-width: 480px;
width: 100%;
font-family: inherit;
}
.search-pill:hover {
border-color: var(--border-strong);
color: var(--text);
}
.search-pill svg {
width: 14px;
height: 14px;
stroke-width: 1.85;
flex: 0 0 auto;
}
.search-pill .pill-text {
flex: 1;
text-align: left;
}
.kbd {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
padding: 1px 6px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--bg);
color: var(--text-muted);
line-height: 1;
}
.topbar-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.icon-btn {
position: relative;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 9px;
color: var(--text-muted);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.icon-btn:hover {
background: var(--accent-soft);
color: var(--accent);
}
.icon-btn svg {
width: 17px;
height: 17px;
stroke-width: 1.85;
}
.icon-btn .badge {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 600;
font-family: "JetBrains Mono", ui-monospace, monospace;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg);
}
/* Theme toggle: troca sun/moon */
.theme-sun,
.theme-moon {
display: none;
}
[data-theme="light"] .theme-moon,
:root:not([data-theme="dark"]) .theme-moon {
display: block;
}
[data-theme="dark"] .theme-sun {
display: block;
}
.user-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 10px 0 4px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
margin-left: 4px;
transition: border-color 0.12s, background 0.12s;
font-family: inherit;
}
.user-pill:hover {
border-color: var(--border-strong);
}
.user-pill .avatar-mini {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-deep));
color: #fff;
font-weight: 600;
font-size: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.user-pill .user-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text-muted);
}
.user-pill .status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success);
position: relative;
flex: 0 0 auto;
}
.user-pill .status-dot[data-status="busy"] {
background: var(--warn);
}
.user-pill .status-dot[data-status="away"] {
background: var(--text-subtle);
}
.user-pill .status-dot::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 50%;
background: var(--success);
opacity: 0.32;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.user-pill svg.chev {
width: 12px;
height: 12px;
color: var(--text-subtle);
margin-left: 2px;
}
.me-status-select {
font: inherit;
font-size: 12px;
color: var(--text-muted);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.me-status-select:focus {
color: var(--accent);
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.32; }
50% { transform: scale(1.6); opacity: 0; }
}
/* Conv-head (avatar+nome+status) usado quando uma conversa está aberta */
.conv-head {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.av-conv,
.conv-head .av-conv,
#chat-header-avatar.av-conv {
width: 36px;
height: 36px;
border-radius: 50%;
background: #0e7490;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
flex: 0 0 auto;
}
.conv-meta {
display: flex;
flex-direction: column;
line-height: 1.18;
min-width: 0;
}
.conv-name {
font-weight: 600;
font-size: 15px;
letter-spacing: -0.012em;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conv-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
}
.status-dot.is-active {
background: var(--success);
}
.status-dot.is-active::before {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
background: var(--success);
opacity: 0.32;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* aliases legados — mantém pra retrocompatibilidade */
.conn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-muted);
}
.conn-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-subtle);
}
.conn-dot.conn-open {
background: var(--success);
}
.conn-dot.conn-connecting {
background: var(--warn);
}
.conn-dot.conn-closed {
background: var(--danger);
}
.me {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--text-muted);
}
.me-email {
color: var(--text);
font-weight: 500;
font-size: 12.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
.btn-ghost {
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
border-radius: 6px;
padding: 6px 10px;
font: inherit;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.btn-ghost:hover:not(:disabled) {
background: var(--accent-soft);
color: var(--accent);
}
/* ===================== Layout (sidebar + main) ===================== */
.chat-main,
.layout {
display: grid;
/* A largura da coluna de contatos é variável porque o usuário arrasta a
* borda: nomes de agente são longos e 320px cortava todos no meio. O valor
* escolhido é guardado e reaplicado na abertura. */
grid-template-columns: var(--sidebar-w, 320px) 1fr;
flex: 1;
min-height: 0;
width: 100%;
}
/* ===================== Sidebar ===================== */
.sidebar {
background: var(--panel);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
min-height: 0;
position: relative;
}
/* Pegador de redimensionamento: fica sobre a borda direita, largo o bastante
* para acertar com o mouse (8px) sem roubar espaço do conteúdo — por isso
* `position:absolute` e não uma coluna a mais na grade. */
.sidebar-resizer {
position: absolute;
top: 0;
right: -4px;
width: 8px;
height: 100%;
cursor: col-resize;
z-index: 5;
background: transparent;
transition: background 0.12s;
}
.sidebar-resizer:hover,
.sidebar-resizer.is-dragging {
background: var(--accent-soft);
}
/* Enquanto arrasta, o cursor não pode virar "texto" ao passar por cima da
* lista, e seleção acidental atrapalha o arrasto. */
body.is-resizing {
cursor: col-resize;
user-select: none;
}
.sidebar-search {
padding: 12px 12px 8px;
position: relative;
}
.sidebar-search input {
width: 100%;
height: 34px;
padding: 0 12px 0 32px;
background: var(--hover);
border: 1px solid transparent;
border-radius: 8px;
font: inherit;
font-size: 13px;
color: var(--text);
outline: none;
transition: background 0.12s, border-color 0.12s;
}
.sidebar-search input:focus {
background: var(--feed);
border-color: var(--accent-soft-2);
}
.sidebar-search svg {
position: absolute;
left: 22px;
top: 50%;
transform: translate(0, -50%);
width: 14px;
height: 14px;
color: var(--text-subtle);
pointer-events: none;
}
.sidebar-tabs {
display: flex;
gap: 4px;
padding: 0 12px 8px;
}
.tab {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 10px;
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
color: var(--text-muted);
font: inherit;
font-size: 12px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tab:hover {
background: var(--hover);
}
.tab.is-active {
background: var(--accent-soft);
color: var(--accent);
font-weight: 500;
}
.badge-mini {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
padding: 0 5px;
height: 14px;
background: var(--accent);
color: #fff;
border-radius: 999px;
display: inline-flex;
align-items: center;
}
.contact-list,
.contacts {
flex: 1;
overflow-y: auto;
padding: 0 6px 12px;
}
.section-label {
padding: 10px 10px 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-subtle);
font-family: "JetBrains Mono", ui-monospace, monospace;
display: flex;
align-items: center;
gap: 6px;
}
.section-label svg {
width: 11px;
height: 11px;
}
.empty-hint {
text-align: center;
color: var(--text-subtle);
font-style: italic;
font-size: 13px;
padding: 32px 16px;
line-height: 1.6;
}
.contact-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 10px;
padding: 8px 10px;
border-radius: 9px;
cursor: pointer;
position: relative;
transition: background 0.12s;
width: 100%;
background: transparent;
border: none;
text-align: left;
font: inherit;
color: var(--text);
}
.contact-row:hover {
background: var(--hover);
}
.contact-row.is-active,
.contact-row.active {
background: var(--accent-soft);
}
.contact-row.is-unread .contact-name {
font-weight: 600;
}
.contact-row.is-unread .preview-text {
color: var(--text);
font-weight: 500;
}
.contact-row.is-unread .contact-time {
color: var(--accent);
font-weight: 600;
}
.avatar-wrap {
position: relative;
width: 36px;
height: 36px;
display: inline-flex;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.01em;
user-select: none;
}
.avatar.group-avatar {
background: linear-gradient(135deg, var(--accent), var(--info));
}
.avatar-sm {
width: 28px;
height: 28px;
font-size: 11px;
}
.presence-dot {
position: absolute;
bottom: 0;
right: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--text-subtle);
border: 2px solid var(--panel);
}
.presence-dot.is-active {
background: var(--success);
}
.presence-dot.is-away {
background: var(--warn);
}
.online-dot {
position: absolute;
bottom: 0;
right: 0;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--success);
border: 2px solid var(--panel);
}
.contact-meta {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
justify-content: center;
}
.contact-head,
.contact-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
min-width: 0;
}
.contact-name {
font-size: 13.5px;
color: var(--text);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.contact-time {
font-size: 10.5px;
color: var(--text-subtle);
font-family: "JetBrains Mono", ui-monospace, monospace;
flex: 0 0 auto;
}
.contact-preview,
.contact-bottom {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text-muted);
min-width: 0;
}
.type-icon {
flex: 0 0 auto;
width: 13px;
height: 13px;
color: var(--text-subtle);
display: inline-flex;
align-items: center;
justify-content: center;
}
.type-icon svg {
width: 13px;
height: 13px;
stroke-width: 1.8;
}
.preview-text,
.contact-sub {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
.contact-meta-right {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 4px;
flex: 0 0 auto;
}
.unread-badge,
.badge {
min-width: 19px;
height: 19px;
padding: 0 5px;
background: var(--accent);
color: #fff;
font-size: 10.5px;
font-weight: 600;
font-family: "JetBrains Mono", ui-monospace, monospace;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pin-icon, .mute-icon {
width: 12px;
height: 12px;
color: var(--text-subtle);
flex: 0 0 auto;
}
.pin-icon {
color: var(--accent);
}
.contact-actions {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
gap: 1px;
opacity: 0;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 7px;
padding: 1px;
box-shadow: var(--shadow-sm);
transition: opacity 0.12s;
}
.contact-row:hover .contact-actions {
opacity: 1;
}
.contact-actions .ca {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: 5px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.1s, color 0.1s;
}
.contact-actions .ca:hover {
background: var(--accent-soft);
color: var(--accent);
}
.contact-actions .ca svg {
width: 13px;
height: 13px;
stroke-width: 1.85;
}
.contact-typing {
font-style: italic;
color: var(--accent);
}
.sidebar-footer {
padding: 10px 12px 12px;
border-top: 1px solid var(--rule);
display: flex;
gap: 6px;
}
.sidebar-footer .new-conv {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 9px;
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s;
}
.sidebar-footer .new-conv:hover {
background: var(--accent-hover);
}
.sidebar-footer .new-conv svg {
width: 15px;
height: 15px;
stroke-width: 2;
}
.sidebar-footer .kbd-hint {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
padding: 1px 6px;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 4px;
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.78);
line-height: 1;
margin-left: 2px;
}
/* ===================== Dashboard view ===================== */
.dashboard {
overflow-y: auto;
padding: 32px 40px 60px;
}
.dash-inner {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 28px;
}
.dash-greeting {
display: flex;
flex-direction: column;
gap: 4px;
}
.dash-greeting h1 {
margin: 0;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.022em;
color: var(--text);
}
.dash-greeting .dash-sub {
font-size: 13px;
color: var(--text-muted);
font-family: "JetBrains Mono", ui-monospace, monospace;
}
.cmdk-cta {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.12s, background 0.12s, transform 0.12s;
text-align: left;
font: inherit;
color: inherit;
box-shadow: var(--shadow-xs);
}
.cmdk-cta:hover {
border-color: var(--accent-soft-2);
background: var(--accent-soft);
transform: translateY(-1px);
}
.cmdk-cta .cmdk-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.cmdk-cta .cmdk-icon svg {
width: 18px;
height: 18px;
stroke-width: 1.85;
}
.cmdk-cta .cmdk-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
}
.cmdk-cta .cmdk-title {
font-size: 14px;
font-weight: 500;
color: var(--text);
}
.cmdk-cta .cmdk-desc {
font-size: 12px;
color: var(--text-muted);
}
.cmdk-cta .kbd {
font-size: 11px;
padding: 3px 8px;
height: 22px;
display: inline-flex;
align-items: center;
}
.section-title {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--text);
}
.section-title svg {
width: 13px;
height: 13px;
color: var(--accent);
position: relative;
top: 1px;
}
.section-title .title-meta {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
color: var(--text-subtle);
font-weight: 400;
margin-left: auto;
}
.highlights {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.highlight-card {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
padding: 12px 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
align-items: flex-start;
transition: border-color 0.12s, background 0.12s;
cursor: pointer;
}
.highlight-card:hover {
border-color: var(--border-strong);
}
.hl-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-weight: 600;
font-size: 12.5px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.hl-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.hl-head {
display: flex;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
}
.hl-name {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.012em;
}
.hl-time {
font-size: 11px;
color: var(--text-subtle);
font-family: "JetBrains Mono", ui-monospace, monospace;
}
.hl-tag {
font-size: 10.5px;
font-family: "JetBrains Mono", ui-monospace, monospace;
color: var(--accent);
background: var(--accent-soft);
padding: 2px 7px;
border-radius: 4px;
border: 1px solid var(--accent-soft-2);
}
.hl-tag.is-warm {
color: var(--warn);
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.22);
}
.hl-text {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.hl-text em {
color: var(--accent);
font-style: normal;
font-weight: 500;
font-size: 11px;
font-family: "JetBrains Mono", ui-monospace, monospace;
margin-right: 4px;
background: var(--accent-soft);
padding: 1px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hl-text q {
color: var(--text);
quotes: '"' '"';
}
.hl-actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
}
.hl-act {
display: inline-flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 0 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: 7px;
color: var(--text);
font: inherit;
font-size: 12px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.hl-act:hover {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
color: var(--accent);
}
.hl-act.hl-act-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.hl-act.hl-act-primary:hover {
background: var(--accent-hover);
}
.hl-act svg {
width: 13px;
height: 13px;
stroke-width: 2;
}
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 10px;
}
.stat-card {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.stat-value {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.022em;
font-family: "JetBrains Mono", ui-monospace, monospace;
color: var(--text);
line-height: 1.1;
}
.stat-label {
font-size: 11px;
color: var(--text-muted);
}
.stat-card.is-positive .stat-value {
color: var(--success);
}
.quick-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.qa-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 9px;
color: var(--text);
font: inherit;
font-size: 13px;
cursor: pointer;
transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.qa-btn:hover {
border-color: var(--accent-soft-2);
background: var(--accent-soft);
transform: translateY(-1px);
}
.qa-btn svg {
width: 14px;
height: 14px;
color: var(--accent);
stroke-width: 1.9;
}
.qa-btn .kbd {
margin-left: 4px;
}
.feature-card {
display: flex;
gap: 14px;
padding: 16px 18px;
background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(56, 189, 248, 0.08) 100%);
border: 1px solid var(--accent-soft-2);
border-radius: var(--radius);
}
.feature-card .fc-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--feed);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
box-shadow: var(--shadow-xs);
}
.feature-card .fc-icon svg {
width: 18px;
height: 18px;
stroke-width: 1.9;
}
.feature-card .fc-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.fc-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.fc-desc {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.45;
}
.fc-action {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 0;
background: transparent;
border: none;
color: var(--accent);
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.fc-action svg {
width: 12px;
height: 12px;
}
/* ===================== Conversation view ===================== */
.conversation {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--bg);
}
.chat-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: var(--panel);
border-bottom: 1px solid var(--border);
min-height: 48px;
}
.chat-header-name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.012em;
color: var(--text);
}
.chat-header-status {
font-size: 12px;
color: var(--text-muted);
margin-left: 8px;
}
.chat-header-status.online {
color: var(--success);
}
.chat-header-status.typing {
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 6px;
}
.chat-header-meta {
display: flex;
flex-direction: column;
line-height: 1.18;
}
.conv,
.messages {
max-width: var(--col-w);
width: 100%;
margin: 0 auto;
padding: 12px 18px 12px;
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
}
.empty-state {
margin: auto;
text-align: center;
color: var(--text-muted);
max-width: 320px;
}
.empty-state h2 {
margin: 0 0 6px;
font-size: 16px;
color: var(--text);
font-weight: 600;
}
.empty-state p {
margin: 0;
font-size: 14px;
}
.empty-icon {
font-size: 40px;
opacity: 0.6;
margin-bottom: 8px;
}
/* ----- Day divider ----- */
.day-divider {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
margin: 0;
}
.day-divider .day-line {
flex: 1;
height: 1px;
background: var(--rule);
}
.day-divider .day-pill {
flex: 0 0 auto;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
font-weight: 500;
color: var(--text-muted);
background: var(--feed);
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 999px;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: none;
}
.day-divider .day-summary {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
color: var(--accent);
background: var(--accent-soft);
padding: 4px 9px;
border: 1px solid var(--accent-soft-2);
border-radius: 999px;
cursor: pointer;
transition: background 0.12s;
}
.day-summary:hover {
background: var(--accent-soft-2);
}
.day-summary svg {
width: 11px;
height: 11px;
}
/* ===================== Stack ===================== */
.stack {
display: flex;
gap: 10px;
align-items: flex-end;
max-width: 100%;
}
.stack-in {
justify-content: flex-start;
}
.stack-out {
justify-content: flex-end;
}
.stack-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.01em;
flex: 0 0 auto;
align-self: flex-end;
margin-bottom: 4px;
}
.stack-avatar.is-hidden {
visibility: hidden;
}
.stack-out .stack-avatar {
order: 2;
}
.stack-bubbles {
display: flex;
flex-direction: column;
gap: 1px;
max-width: calc(100% - 40px);
min-width: 0;
}
.stack-out .stack-bubbles {
align-items: flex-end;
}
.stack-in .stack-bubbles {
align-items: flex-start;
}
.stack-name {
display: inline-flex;
align-items: baseline;
gap: 6px;
margin: 0 0 3px 14px;
font-size: 11.5px;
color: var(--text-muted);
}
.stack-name .nm {
font-weight: 600;
color: var(--text);
font-size: 12.5px;
letter-spacing: -0.01em;
}
.stack-name .hd {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
color: var(--text-subtle);
}
.stack-out .stack-name {
margin: 0 14px 3px 0;
}
/* ===================== Bubble ===================== */
.bubble {
position: relative;
display: inline-block;
max-width: 100%;
padding: 8px 12px 8px;
border-radius: var(--radius-bubble);
font-size: 14.75px;
line-height: 1.45;
word-wrap: break-word;
box-shadow: var(--shadow-bubble);
}
/* A animação de entrada é PRIVILÉGIO da bolha inédita (`is-fresh`, aplicada
* em renderBubble). Quando estava em `.bubble`, qualquer re-render da lista
* — e há vários por envio — recriava todos os nós e fazia a conversa inteira
* reanimar de opacity 0: era a "piscada". */
.bubble.is-fresh {
animation: bubble-in 0.24s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}
@keyframes bubble-in {
from { opacity: 0; transform: translateY(3px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.stack-out .bubble {
background: var(--mine-bg);
color: var(--mine-text);
border: 1px solid var(--mine-border);
}
.stack-out .bubble a {
color: var(--accent);
text-decoration: none;
}
.stack-out .bubble a:hover {
text-decoration: underline;
}
.stack-in .bubble {
background: var(--theirs-bg);
color: var(--theirs-text);
border: 1px solid var(--theirs-border);
}
.stack-in .bubble a {
color: var(--accent);
text-decoration: none;
}
.stack-in .bubble a:hover {
text-decoration: underline;
}
.stack-out .bubble.is-first { border-bottom-right-radius: var(--radius-bubble-tight); }
.stack-out .bubble.is-mid { border-top-right-radius: var(--radius-bubble-tight); border-bottom-right-radius: var(--radius-bubble-tight); }
.stack-out .bubble.is-last { border-top-right-radius: var(--radius-bubble-tight); }
.stack-in .bubble.is-first { border-bottom-left-radius: var(--radius-bubble-tight); }
.stack-in .bubble.is-mid { border-top-left-radius: var(--radius-bubble-tight); border-bottom-left-radius: var(--radius-bubble-tight); }
.stack-in .bubble.is-last { border-top-left-radius: var(--radius-bubble-tight); }
.bubble-text {
white-space: pre-wrap;
word-wrap: break-word;
display: block;
}
/* "Ler mais" — o corte do texto longo é feito no markup (.bt-head visível +
* .bt-rest com [hidden]); o clique só alterna o hidden. A regra antiga
* `.bubble-text.is-clipped` com -webkit-line-clamp saiu junto com o clamp. */
.bt-rest[hidden] { display: none; }
.bubble-expand {
display: block;
width: fit-content;
margin-left: auto;
margin-top: 2px;
background: transparent;
border: none;
padding: 2px 0;
cursor: pointer;
font: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--accent);
}
.stack-out .bubble-expand {
color: rgba(255, 255, 255, 0.95);
text-decoration: underline;
text-underline-offset: 2px;
}
.bubble-expand:hover { opacity: 0.85; }
.bubble-text strong {
font-weight: 600;
}
.bubble-text em {
font-style: italic;
}
.bubble-text code {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12.5px;
padding: 1px 5px;
border-radius: 4px;
}
.stack-in .bubble-text code {
background: rgba(15, 23, 42, 0.07);
color: var(--text);
}
.stack-out .bubble-text code {
background: rgba(37, 99, 235, 0.10);
color: var(--accent);
}
/* Mensagem do sistema (log de ingest abaixo da bolha real). Estilo
* pseudo-bubble: cantos arredondados, fundo neutro, monoespaçado,
* largura máxima similar à bolha normal mas sem cor da direção. */
.system-msg {
display: block;
margin: 4px 0 0;
padding: 6px 10px;
max-width: 80%;
border-radius: 10px;
background: var(--panel-2, rgba(0, 0, 0, 0.04));
border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.02em;
user-select: text;
word-break: break-word;
line-height: 1.45;
color: var(--text);
}
.stack-out .system-msg {
align-self: flex-end;
margin-left: auto;
}
.stack-in .system-msg {
align-self: flex-start;
}
.system-msg-head {
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.system-msg-head::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
}
/* Bloco de ingest recolhido: o cabeçalho vira o botão que revela o log. */
.system-msg-details > summary {
cursor: pointer;
list-style: none;
}
.system-msg-details > summary::-webkit-details-marker {
display: none;
}
.system-msg-count {
margin-left: auto;
opacity: 0.6;
font-weight: 400;
}
.system-msg-count::after {
content: " ▸";
}
.system-msg-details[open] .system-msg-count::after {
content: " ▾";
}
.system-msg-log {
margin-top: 4px;
padding-left: 8px;
border-left: 2px solid currentColor;
opacity: 0.85;
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
}
.system-msg-log > div {
padding: 1px 0;
}
.system-msg.is-pending { color: #b45309; border-color: rgba(180, 83, 9, 0.35); background: rgba(245, 158, 11, 0.08); }
.system-msg.is-error { color: #b91c1c; border-color: rgba(185, 28, 28, 0.35); background: rgba(239, 68, 68, 0.08); }
.system-msg.is-done { color: #047857; border-color: rgba(4, 120, 87, 0.35); background: rgba(16, 185, 129, 0.08); }
.system-msg.is-skip { color: var(--text-subtle); opacity: 0.7; }
/* meta */
.bubble-meta {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
font-feature-settings: "tnum";
white-space: nowrap;
vertical-align: bottom;
position: relative;
top: 1px;
}
.stack-in .bubble-meta {
color: var(--theirs-text-soft);
}
.stack-out .bubble-meta {
color: var(--mine-text-soft);
}
.bubble-meta .receipt {
display: inline-flex;
align-items: center;
}
.bubble-meta .receipt svg {
width: 12px;
height: 12px;
stroke-width: 2.4;
}
.stack-out .bubble-meta .receipt.is-read {
color: var(--accent);
}
.bubble-meta .edited {
font-style: italic;
}
/* legacy ticks (mantém retrocompatibilidade) */
.tick {
display: inline-flex;
align-items: center;
font-size: 11px;
line-height: 1;
}
.tick.tick-pending { color: var(--text-subtle); }
.tick.tick-sent { color: var(--text-muted); }
.tick.tick-delivered { color: var(--text-muted); }
.tick.tick-read { color: var(--accent); }
.bubble-time {
font-family: "JetBrains Mono", ui-monospace, monospace;
}
.edited-tag {
font-style: italic;
font-size: 10.5px;
color: var(--text-subtle);
margin-right: 2px;
}
/* mention pill */
.mention-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 7px 0 3px;
border-radius: 999px;
font-weight: 500;
font-size: 13.5px;
text-decoration: none;
line-height: 1.45;
}
.stack-in .mention-pill {
background: var(--accent-soft);
color: var(--accent);
}
.stack-out .mention-pill {
background: rgba(37, 99, 235, 0.12);
color: var(--accent);
}
.mention-pill .mini-avatar {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 9px;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* quote */
.bubble-quote {
margin: 0 0 6px;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
position: relative;
border: none;
background: transparent;
font: inherit;
text-align: left;
display: flex;
flex-direction: column;
gap: 2px;
width: 100%;
}
.stack-in .bubble-quote,
.bubble-quote {
background: var(--theirs-quote-bg);
border-left: 2px solid var(--theirs-quote-bar);
}
.stack-out .bubble-quote {
background: var(--mine-quote-bg);
border-left: 2px solid var(--mine-quote-bar);
}
.bubble-quote-name,
.quote-block-from {
font-weight: 600;
font-size: 11.5px;
margin-bottom: 1px;
letter-spacing: -0.01em;
color: var(--text);
font-family: "JetBrains Mono", ui-monospace, monospace;
}
.stack-out .bubble-quote-name,
.stack-out .quote-block-from {
color: var(--accent-deep);
}
.bubble-quote-text,
.quote-block-text {
font-size: 12.5px;
line-height: 1.4;
opacity: 0.78;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--text-muted);
}
.quote-block-text.is-media {
font-style: italic;
color: var(--text-subtle);
}
.bubble-quote-media {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 11px;
font-family: "JetBrains Mono", ui-monospace, monospace;
opacity: 0.65;
}
.bubble-quote-thumb {
width: 24px;
height: 24px;
border-radius: 4px;
background-size: cover;
background-position: center;
}
/* sender label em grupo */
.bubble-sender,
.stack-name-inline {
font-size: 11px;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.01em;
font-family: "JetBrains Mono", ui-monospace, monospace;
margin: 0 0 2px;
}
/* forwarded */
.forwarded-label,
.bubble-forwarded {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-style: italic;
color: var(--text-subtle);
margin-bottom: 4px;
}
.forwarded-label svg,
.bubble-forwarded svg {
width: 11px;
height: 11px;
flex: 0 0 auto;
}
.stack-out .forwarded-label,
.stack-out .bubble-forwarded {
color: var(--mine-text-soft);
}
/* ===================== React button + picker (per-bubble) ===================== */
.bubble-react {
position: absolute;
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--feed);
border: 1px solid var(--border);
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.14s, transform 0.14s, background 0.12s, color 0.12s, border-color 0.12s;
z-index: 4;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.bubble:hover .bubble-react,
.bubble-react.is-open {
opacity: 1;
transform: scale(1);
}
.bubble-react:hover {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent-soft-2);
}
.bubble-react svg {
width: 14px;
height: 14px;
stroke-width: 1.85;
}
.stack-in .bubble-react {
right: -10px;
bottom: -10px;
}
.stack-out .bubble-react {
left: -10px;
bottom: -10px;
}
.react-picker {
position: fixed;
z-index: 110;
background: var(--feed);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 5px;
display: inline-flex;
align-items: center;
gap: 1px;
box-shadow: var(--shadow-pop);
animation: picker-in 0.16s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}
.react-picker.hidden {
display: none !important;
}
@keyframes picker-in {
from { opacity: 0; transform: scale(0.85) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.react-pick {
width: 30px;
height: 30px;
border-radius: 999px;
border: none;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
transition: background 0.1s, transform 0.12s;
}
.react-pick:hover {
background: var(--accent-soft);
transform: scale(1.18);
}
.react-pick.react-pick-more {
font-size: 14px;
color: var(--text-muted);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-weight: 600;
}
.react-pick-sep {
width: 1px;
height: 18px;
background: var(--border);
margin: 0 2px;
}
/* ===================== Tapbacks ===================== */
/* Tapbacks: pills individuais flutuando no canto inferior da bolha
* (sem wrapper bg/halo). Cada tapback tem seu próprio fundo + borda. */
.tapbacks,
.bubble-reactions {
position: absolute;
bottom: -10px;
display: flex;
gap: 4px;
z-index: 2;
}
/* Bolha com tapbacks ganha margem extra pra não sobrepor a próxima
* bolha do stack (o `bottom: -10px` da pill sai pra fora ~14px no total). */
.bubble:has(.tapbacks),
.bubble:has(.bubble-reactions) {
margin-bottom: 16px;
}
.stack-in .tapbacks,
.stack-in .bubble-reactions,
.msg-in .bubble-reactions {
right: 6px;
}
.stack-out .tapbacks,
.stack-out .bubble-reactions,
.msg-out .bubble-reactions {
left: 6px;
}
.tapback,
.reaction-pill {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--feed);
border: 1px solid var(--border-strong);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
font-size: 11px;
cursor: pointer;
transition: background 0.12s, transform 0.08s, border-color 0.12s;
color: var(--text);
font-family: inherit;
}
[data-theme="dark"] .tapback,
[data-theme="dark"] .reaction-pill {
background: var(--panel);
}
.tapback:hover,
.reaction-pill:hover {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
transform: translateY(-1px);
}
.tapback.is-mine,
.reaction-pill.is-mine {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.tapback .em,
.reaction-pill .reaction-emoji {
font-size: 13px;
line-height: 1;
}
.tapback .ct,
.reaction-pill .reaction-count {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ===================== Media bubbles ===================== */
.bubble.is-media-image,
.bubble.bubble-with-media .attach-image {
padding: 0;
overflow: hidden;
max-width: 320px;
}
.bubble.is-media-image img,
.bubble .attach-image img {
display: block;
width: 100%;
height: auto;
max-height: 340px;
object-fit: cover;
border-radius: var(--radius-bubble);
}
.bubble.is-media-image .alt-badge {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(15, 23, 42, 0.78);
color: #fff;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
padding: 2px 7px 2px 5px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 4px;
backdrop-filter: blur(8px);
cursor: pointer;
border: none;
}
.alt-badge svg {
width: 10px;
height: 10px;
}
/* file */
.bubble.is-media-file {
padding: 8px 12px 8px 8px;
}
.file-row {
display: flex;
align-items: center;
gap: 10px;
}
.file-icon,
.attach-file-icon {
width: 36px;
height: 36px;
border-radius: 8px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
letter-spacing: 0.04em;
background: var(--accent);
color: #fff;
}
.file-meta,
.attach-file-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.file-name,
.attach-file-name {
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file-size,
.attach-file-size {
font-size: 10.5px;
font-family: "JetBrains Mono", ui-monospace, monospace;
opacity: 0.7;
}
/* Preserva o layout antigo de attach-file pra compat */
.attach-file {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: inherit;
}
/* audio */
.bubble.is-media-audio,
.audio-attachment {
padding: 7px 11px 7px 7px;
min-width: 240px;
}
.bubble.is-media-audio {
display: flex;
flex-direction: column;
align-items: stretch;
}
.audio-row {
display: flex;
align-items: center;
gap: 11px;
min-width: 240px;
}
.audio-play {
width: 38px;
height: 38px;
border: none;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transition: transform 0.06s, box-shadow 0.16s;
background: var(--accent);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.audio-play svg { width: 13px; height: 13px; }
.audio-play:active {
transform: scale(0.94);
}
.audio-wave {
flex: 1;
height: 28px;
display: flex;
align-items: center;
gap: 1.5px;
min-width: 0;
cursor: pointer;
touch-action: none;
}
.audio-wave span {
flex: 1;
border-radius: 1.5px;
pointer-events: none;
transition: background-color 0.06s linear;
}
.stack-in .audio-wave span { background: var(--accent-soft-2); }
.stack-in .audio-wave span.played { background: var(--accent); }
.stack-out .audio-wave span { background: rgba(37, 99, 235, 0.22); }
.stack-out .audio-wave span.played { background: var(--accent); }
.audio-meta {
display: flex;
align-items: center;
gap: 5px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
flex: 0 0 auto;
}
.stack-in .audio-meta { color: var(--theirs-text-soft); }
.stack-out .audio-meta { color: var(--mine-text-soft); }
.audio-speed {
height: 19px;
padding: 0 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 500;
cursor: pointer;
font-family: "JetBrains Mono", ui-monospace, monospace;
border: none;
background: var(--feed);
color: var(--text);
}
.stack-out .audio-speed {
background: rgba(37, 99, 235, 0.10);
color: var(--accent);
}
.audio-transcript-wrap {
margin: 8px -2px 0;
border-top: 1px solid var(--accent-soft-2);
padding-top: 6px;
}
.stack-out .audio-transcript-wrap {
border-top-color: rgba(37, 99, 235, 0.18);
}
.audio-transcript-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
background: transparent;
border: none;
cursor: pointer;
padding: 2px 0;
font-family: inherit;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--theirs-text-soft);
text-transform: uppercase;
}
.stack-out .audio-transcript-toggle {
color: var(--mine-text-soft);
}
.audio-transcript-toggle svg {
width: 11px;
height: 11px;
transition: transform 0.18s ease;
}
/* aberto = chevron pra baixo (estado natural do svg "6 9 12 15 18 9");
colapsado = aponta pra direita */
.audio-transcript-wrap:not(.is-open) .audio-transcript-toggle svg {
transform: rotate(-90deg);
}
.audio-transcript {
font-size: 12.5px;
line-height: 1.5;
font-style: italic;
padding: 4px 0 2px 10px;
margin: 4px 0 0;
border-left: 2px solid var(--accent-soft-2);
color: var(--theirs-text-soft);
overflow: hidden;
max-height: 600px;
opacity: 1;
transition: max-height 0.2s ease, opacity 0.16s ease, margin 0.2s ease,
padding 0.2s ease;
}
.stack-out .audio-transcript {
color: var(--mine-text-soft);
border-left-color: rgba(37, 99, 235, 0.32);
}
.audio-transcript-wrap:not(.is-open) .audio-transcript {
max-height: 0;
opacity: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
border-left-width: 0;
}
.audio-transcript .word-current {
background: var(--highlight);
padding: 1px 2px;
border-radius: 3px;
font-style: normal;
font-weight: 500;
}
.audio-transcript.transcribing {
display: inline-flex;
align-items: center;
gap: 6px;
}
.trans-dots {
display: inline-flex;
gap: 3px;
}
.trans-dots span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-subtle);
animation: bounce 1.2s infinite;
}
.trans-dots span:nth-child(2) { animation-delay: 0.15s; }
.trans-dots span:nth-child(3) { animation-delay: 0.3s; }
.audio-attachment-meta {
display: flex;
align-items: center;
gap: 5px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
margin-top: 4px;
}
.audio-lang-badge {
background: var(--accent-soft);
color: var(--accent);
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
}
.audio-dur {
color: var(--text-muted);
}
/* code */
.bubble.is-media-code {
padding: 0;
overflow: hidden;
background: var(--code-bg);
color: var(--code-text);
max-width: 460px;
}
.code-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 11px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.code-lang {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--code-com);
font-weight: 500;
}
.code-copy {
font-family: "Geist", sans-serif;
font-size: 10.5px;
color: var(--code-com);
background: transparent;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.12s;
}
.code-copy:hover {
color: var(--code-text);
}
.code-body {
padding: 10px 12px 12px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12.5px;
line-height: 1.55;
overflow-x: auto;
}
.code-body pre {
margin: 0;
font-family: inherit;
}
.tk-key { color: var(--code-key); }
.tk-str { color: var(--code-str); }
.tk-num { color: var(--code-num); }
.tk-com { color: var(--code-com); font-style: italic; }
/* unfurl */
.unfurl {
margin-top: 4px;
display: flex;
gap: 10px;
border: 1px solid var(--border);
border-radius: var(--radius-card);
overflow: hidden;
background: var(--feed);
text-decoration: none;
color: inherit;
transition: border-color 0.12s, background 0.12s;
max-width: 380px;
box-shadow: var(--shadow-bubble);
}
.unfurl:hover {
border-color: var(--accent-soft-2);
background: var(--accent-soft);
}
.unfurl-thumb {
width: 80px;
flex: 0 0 auto;
background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
position: relative;
}
.unfurl-thumb::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.18) 0, transparent 40%),
radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.12) 0, transparent 40%);
}
.unfurl-body {
padding: 8px 10px 8px 0;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.unfurl-domain {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px;
color: var(--text-subtle);
}
.unfurl-title {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.unfurl-desc {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ===================== Stack actions (hover) ===================== */
.stack-actions {
display: inline-flex;
align-items: center;
gap: 2px;
opacity: 0;
transition: opacity 0.12s;
align-self: center;
}
.stack:hover .stack-actions {
opacity: 1;
}
.stack-actions .ab {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: 7px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.1s, color 0.1s;
}
.stack-actions .ab:hover {
background: var(--hover-strong);
color: var(--accent);
}
.stack-actions svg {
width: 14px;
height: 14px;
}
.stack-out .stack-actions {
order: 1;
}
/* ===================== Threading ===================== */
.stack.is-thread-reply {
margin-left: 40px;
position: relative;
}
.stack.is-thread-reply::before {
content: "";
position: absolute;
left: -28px;
top: 0;
bottom: 50%;
width: 2px;
background: var(--accent-soft-2);
}
.stack.is-thread-reply::after {
content: "";
position: absolute;
left: -28px;
top: calc(50% - 1px);
width: 22px;
height: 2px;
background: var(--accent-soft-2);
}
.stack.is-thread-reply.thread-mine {
margin-left: 0;
margin-right: 40px;
}
.stack.is-thread-reply.thread-mine::before {
left: auto;
right: -28px;
}
.stack.is-thread-reply.thread-mine::after {
left: auto;
right: -28px;
}
/* ===================== Typing ===================== */
.typing {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
background: var(--theirs-bg);
border-radius: var(--radius-bubble);
color: var(--theirs-text-soft);
font-size: 12.5px;
border: 1px solid var(--theirs-border);
}
.typing-dots {
display: inline-flex;
gap: 3px;
}
.typing-dots span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-subtle);
animation: bounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-3px); opacity: 1; }
}
/* ===================== Smart replies ===================== */
.smart-replies {
position: sticky;
bottom: 56px;
max-width: var(--col-w);
margin: 0 auto;
padding: 6px 14px;
display: flex;
gap: 6px;
background: var(--bg-glass);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--border);
align-items: center;
z-index: 10;
flex-wrap: nowrap;
overflow-x: auto;
}
.smart-replies-label {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-subtle);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.smart-replies-label svg {
width: 10px;
height: 10px;
color: var(--accent);
}
.smart-chip {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
background: var(--feed);
border: 1px solid var(--border-strong);
border-radius: 999px;
font-size: 13px;
color: var(--text);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, transform 0.08s;
flex: 0 0 auto;
white-space: nowrap;
font-family: inherit;
}
.smart-chip:hover {
background: var(--accent-soft);
border-color: var(--accent-soft-2);
transform: translateY(-1px);
}
/* ===================== Composer ===================== */
.composer-wrap {
background: var(--bg-glass);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--border);
padding: 8px 18px 12px;
}
.composer-wrap.composer-imsg.hidden {
display: none !important;
}
.composer {
max-width: var(--col-w);
margin: 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.composer-input-wrap {
flex: 1;
position: relative;
}
.composer-input {
width: 100%;
background: var(--feed);
border: 1px solid var(--border);
/* 19px = metade do min-height (38px); fica visualmente igual a uma
* pílula quando há só 1 linha, mas em multi-linha vira retângulo
* arredondado (em vez do pill estranho que cresce só vertical). */
border-radius: 19px;
padding: 9px 70px 9px 16px;
font: inherit;
font-size: 14px;
line-height: 1.4;
color: var(--text);
outline: none;
transition: border-color 0.15s, max-height 0.18s;
min-height: 38px;
max-height: 140px;
resize: none;
overflow-y: auto;
font-family: inherit;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
/* Scrollbar discreta dentro do textarea — só aparece quando texto excede max-height. */
.composer-input::-webkit-scrollbar { width: 6px; }
.composer-input::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 3px;
}
.composer-input::-webkit-scrollbar-track { background: transparent; }
.composer-input:focus {
border-color: var(--accent-soft-2);
}
.composer-recording {
position: absolute;
/* Antes era `inset: 0`, o que fazia a pílula herdar a altura do wrap — e o
wrap cresce junto com o texto. Resultado: no celular ela descia em
relação aos ícones da barra. Agora tem altura própria e fica centrada,
independente do que o wrap faça. */
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 40px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
background: var(--feed);
border: 1px solid var(--accent-soft-2);
border-radius: 999px;
color: var(--accent);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12px;
}
.composer-recording[hidden] {
display: none;
}
.rec-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--danger);
animation: rec-blink 1.2s ease-in-out infinite;
}
@keyframes rec-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.rec-time {
font-feature-settings: "tnum";
}
.rec-label {
color: var(--text-muted);
}
.composer-slash {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
color: var(--text-subtle);
display: inline-flex;
align-items: center;
gap: 4px;
pointer-events: none;
opacity: 0.7;
}
.composer-slash kbd {
font-family: inherit;
font-size: inherit;
padding: 1px 5px;
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--bg);
}
.composer-btn,
.composer-action {
width: 36px;
height: 36px;
flex: 0 0 auto;
border: none;
background: var(--accent);
color: #fff;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s, transform 0.06s;
}
.composer-btn:hover,
.composer-action:hover {
background: var(--accent-hover);
}
.composer-btn:active,
.composer-action:active {
transform: scale(0.94);
}
.composer-icon-btn,
.composer-icon {
width: 34px;
height: 34px;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
}
.composer-icon-btn:hover,
.composer-icon:hover {
background: var(--accent-soft);
color: var(--accent);
}
.composer-icon-btn[hidden] {
display: none;
}
/* attach-preview, quote-preview ficam acima do composer */
.attach-preview,
.quote-preview {
max-width: var(--col-w);
margin: 0 auto 6px;
display: flex;
align-items: stretch;
gap: 8px;
padding: 8px 14px;
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.attach-preview.hidden,
.quote-preview.hidden {
display: none !important;
}
.attach-preview-card {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.attach-preview-thumb {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--accent-soft);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex: 0 0 auto;
overflow: hidden;
}
.attach-preview-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.attach-preview-thumb.attach-preview-icon {
background: var(--accent);
color: #fff;
font-size: 18px;
}
.attach-preview-meta {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.attach-preview-name {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attach-preview-size {
font-size: 11px;
color: var(--text-muted);
font-family: "JetBrains Mono", monospace;
}
.quote-preview-bar {
width: 3px;
background: var(--accent);
border-radius: 2px;
flex: 0 0 auto;
}
.quote-preview-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: 2px 0;
}
.quote-preview-from {
font-size: 11px;
font-weight: 600;
color: var(--accent);
font-family: "JetBrains Mono", ui-monospace, monospace;
}
.quote-preview-snippet {
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===================== Modals & popovers ===================== */
/* msg-trigger: botão pequeno no canto da bolha que abre o action menu.
* Posicionamento ABSOLUTO no canto superior do lado externo da bolha
* (oposto ao avatar). Aparece apenas em hover (desktop). Mobile tem
* stack-actions visíveis como alternativa principal. */
.msg-trigger {
position: absolute;
top: -10px;
width: 24px;
height: 24px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--feed);
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
z-index: 3;
}
.stack-out .msg-trigger,
.msg-out .msg-trigger {
right: -8px;
}
.stack-in .msg-trigger,
.msg-in .msg-trigger {
left: -8px;
}
@media (hover: hover) {
.bubble:hover > .msg-trigger,
.msg-trigger:focus-visible {
opacity: 1;
transform: scale(1);
}
}
@media (hover: none) {
/* Em mobile, sempre visível (não há hover pra revelar). */
.msg-trigger { opacity: 0.55; }
.stack-actions { opacity: 0.7; }
}
.msg-trigger:hover,
.msg-trigger.is-open {
opacity: 1;
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent-soft-2);
}
.msg-trigger svg {
width: 14px;
height: 14px;
}
.msg-menu {
position: fixed;
z-index: 100;
min-width: 168px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-pop);
padding: 4px;
display: flex;
flex-direction: column;
gap: 1px;
transform-origin: top right;
animation: pop-in 0.12s ease-out;
}
.msg-menu.hidden {
display: none !important;
}
.msg-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
background: transparent;
border: none;
border-radius: var(--radius-xs);
color: var(--text);
cursor: pointer;
text-align: left;
transition: background 0.1s, color 0.1s;
}
.msg-menu-item svg {
flex: 0 0 auto;
color: var(--text-muted);
transition: color 0.1s;
}
.msg-menu-item:hover {
background: var(--accent-soft);
color: var(--accent);
}
.msg-menu-item:hover svg {
color: var(--accent);
}
.msg-menu-item.msg-menu-danger:hover {
background: rgba(239, 68, 68, 0.08);
color: var(--danger);
}
.msg-menu-item.msg-menu-danger:hover svg {
color: var(--danger);
}
.msg-menu-only-out {
display: none;
}
.msg-menu[data-direction="out"] .msg-menu-only-out {
display: flex;
}
@keyframes pop-in {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
/* Search results dropdown na sidebar */
.search-results {
border-bottom: 1px solid var(--border);
background: var(--panel-2);
max-height: 50vh;
overflow-y: auto;
}
.search-results.hidden {
display: none;
}
.search-empty {
padding: 14px 16px;
color: var(--text-subtle);
font-style: italic;
font-size: 13px;
text-align: center;
}
.search-result {
width: 100%;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 16px;
background: transparent;
color: var(--text);
border: none;
border-bottom: 1px solid var(--border);
cursor: pointer;
text-align: left;
font: inherit;
border-radius: 0;
transition: background 0.1s;
}
.search-result:hover {
background: var(--panel);
}
.search-result-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font-size: 12px;
color: var(--text-subtle);
}
.search-result-contact {
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-snippet {
font-size: 13px;
line-height: 1.4;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-snippet mark {
background: var(--accent-soft);
color: var(--text);
padding: 0 1px;
border-radius: 2px;
}
.search-section-label {
padding: 8px 16px 4px;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-subtle);
font-weight: 600;
background: var(--panel-2);
position: sticky;
top: 0;
}
.search-result-tag {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
font-size: 10px;
padding: 1px 6px;
border-radius: 9px;
background: var(--accent-soft-2);
color: var(--accent);
font-weight: 500;
text-transform: lowercase;
vertical-align: middle;
}
.search-result-score {
margin-left: 6px;
font-size: 10px;
font-family: "JetBrains Mono", ui-monospace, monospace;
color: var(--text-subtle);
font-weight: 500;
}
.search-result.is-semantic {
border-left: 2px solid var(--accent);
}
/* msg-highlight (jump-to-message) */
.msg-highlight .bubble {
animation: msg-flash 1.6s ease-out;
}
@keyframes msg-flash {
0% { box-shadow: 0 0 0 3px var(--accent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* Generic modal backdrop */
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: fade-in 0.16s ease-out;
}
.modal-backdrop.hidden {
display: none !important;
}
.modal-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-pop);
width: 100%;
max-width: 420px;
max-height: min(80vh, 600px);
display: flex;
flex-direction: column;
overflow: hidden;
animation: modal-slide-up 0.18s ease-out;
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.modal-head h2 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.012em;
}
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 18px;
border-top: 1px solid var(--border);
background: var(--panel-2);
}
.modal-btn {
padding: 8px 16px;
font: inherit;
font-size: 13px;
font-weight: 500;
border: 1px solid transparent;
border-radius: var(--radius-xs);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.modal-btn:active {
transform: translateY(1px);
}
.modal-btn-ghost {
background: transparent;
border-color: var(--border-strong);
color: var(--text-muted);
}
.modal-btn-ghost:hover {
background: var(--panel);
color: var(--text);
}
.modal-btn-primary {
background: var(--accent);
color: #fff;
font-variant-numeric: tabular-nums;
}
.modal-btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
}
.modal-btn-primary:disabled {
background: var(--text-subtle);
cursor: not-allowed;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-slide-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.forward-preview {
padding: 10px 18px;
border-bottom: 1px solid var(--border);
background: var(--panel-2);
display: flex;
flex-direction: column;
gap: 2px;
font-size: 12px;
}
.forward-preview-from {
font-family: "JetBrains Mono", ui-monospace, monospace;
color: var(--text-muted);
font-weight: 600;
}
.forward-preview-text {
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.forward-preview-media {
color: var(--text-subtle);
font-style: italic;
}
.forward-list {
flex: 1;
overflow-y: auto;
padding: 4px 0;
min-height: 120px;
max-height: 240px;
}
.forward-empty {
padding: 24px 18px;
text-align: center;
color: var(--text-subtle);
font-style: italic;
font-size: 13px;
}
.forward-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 18px;
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
cursor: pointer;
text-align: left;
font: inherit;
color: var(--text);
transition: background 0.1s;
}
.forward-row:hover {
background: var(--panel-2);
}
.forward-row.is-checked {
background: var(--accent-soft);
}
.forward-row .avatar {
flex: 0 0 auto;
}
.forward-row-meta {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.forward-row-name {
font-weight: 500;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.forward-row-last {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.forward-check {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--border-strong);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, background 0.15s;
color: #fff;
}
.forward-row.is-checked .forward-check {
border-color: var(--accent);
background: var(--accent);
}
.forward-check svg {
opacity: 0;
transition: opacity 0.15s;
}
.forward-row.is-checked .forward-check svg {
opacity: 1;
}
.forward-count {
font-weight: 600;
margin-left: 2px;
}
/* group modal */
.group-body {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
min-height: 0;
}
.group-name-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.group-name-label,
.group-members-label {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-subtle);
font-weight: 600;
font-family: "JetBrains Mono", monospace;
}
.group-name-field input {
background: var(--panel-2);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
padding: 8px 10px;
font: inherit;
font-size: 14px;
color: var(--text);
transition: border-color 0.15s;
}
.group-name-field input:focus {
outline: none;
border-color: var(--accent);
background: var(--panel);
}
#group-members {
flex: 1;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--panel-2);
min-height: 120px;
max-height: 240px;
padding: 0;
}
.new-group-trigger {
width: 32px;
padding: 0;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.new-group-trigger:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}
/* invite modal */
.invite-card {
max-width: 380px;
}
.invite-body {
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.invite-hint {
margin: 0;
font-size: 13px;
color: var(--text-muted);
text-align: center;
line-height: 1.45;
}
.invite-qr {
width: 240px;
height: 240px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.invite-qr svg {
display: block;
width: 100%;
height: 100%;
}
.invite-qr.is-loading::after {
content: "gerando…";
color: var(--text-muted);
font-size: 12px;
}
.invite-link-row {
display: flex;
width: 100%;
gap: 8px;
}
.invite-link {
flex: 1;
font-family: "JetBrains Mono", monospace;
font-size: 12px;
background: var(--panel-2);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xs);
padding: 8px 10px;
color: var(--text);
outline: none;
min-width: 0;
}
.invite-link:focus {
border-color: var(--accent);
}
.invite-status {
font-size: 12px;
color: var(--accent);
min-height: 16px;
}
.invite-status.err {
color: var(--danger);
}
/* ===================== New contact form / search dropdown helpers ===================== */
.new-contact {
display: none; /* substituído pelo new-conv no footer */
}
.search-box {
display: none; /* substituído pelo sidebar-search */
}
/* status tag inline em contact-row */
.status-tag {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 6px;
margin-left: 6px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: var(--accent-soft);
color: var(--accent);
border-radius: 4px;
font-family: "JetBrains Mono", ui-monospace, monospace;
}
.status-tag[data-status="away"] {
background: var(--panel-2);
color: var(--text-muted);
border: 1px solid var(--border-strong);
}
/* ===================== Whisper progress ===================== */
.whisper-progress {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
padding: 6px 12px;
background: var(--accent-soft);
border: 1px solid var(--accent-soft-2);
border-bottom: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--accent);
font-family: "JetBrains Mono", ui-monospace, monospace;
}
.whisper-progress.hidden {
display: none !important;
}
.whisper-progress-label {
flex: 0 0 auto;
}
.whisper-progress-bar {
flex: 1;
height: 4px;
background: var(--accent-soft-2);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.whisper-progress-fill {
display: block;
height: 100%;
width: 0%;
background: var(--accent);
transition: width 0.2s ease;
}
/* ===================== Notif btn ===================== */
.notif-btn {
/* alias legado, herda .icon-btn quando usado */
}
/* ===================== Bubble fixes ===================== */
/* Aplicado quando renderBubble do app.ts emite estrutura legado .msg/.bubble */
.msg {
display: flex;
}
.msg-out {
justify-content: flex-end;
}
.msg-in {
justify-content: flex-start;
}
.msg-out .bubble {
background: var(--mine-bg);
border: 1px solid var(--mine-border);
color: var(--mine-text);
}
.msg-in .bubble {
background: var(--theirs-bg);
border: 1px solid var(--theirs-border);
color: var(--theirs-text);
}
.bubble.bubble-deleted {
opacity: 0.7;
}
.deleted-text {
color: var(--text-subtle);
font-style: italic;
}
/* ===================== Responsive ===================== */
/* O back button em chat-header só aparece em mobile (display:none default) */
.chat-back {
display: none;
}
@media (max-width: 880px) {
/* Em mobile abandonamos o grid e usamos flex column: o filho visível
* ocupa flex:1 (toda altura). Os escondidos saem do layout. */
.chat-main,
.layout {
display: flex;
flex-direction: column;
grid-template-columns: none;
position: relative;
max-width: 100%;
}
.sidebar-resizer {
display: none;
}
.sidebar {
display: flex;
flex: 1;
min-height: 0;
width: 100%;
}
#dashboard-view {
display: none;
}
#conv-view {
display: none !important;
}
/* Quando uma conversa está aberta (data attr setado pelo JS): troca */
#chat[data-conv-open="true"] .sidebar {
display: none;
}
#chat[data-conv-open="true"] #conv-view {
display: flex !important;
flex: 1;
min-height: 0;
}
/* Em mobile, o "dashboard" não aparece — sidebar é a tela inicial */
/* Back button visível em mobile */
.chat-back {
display: inline-flex;
width: 36px;
height: 36px;
margin-right: 4px;
}
/* Topbar compacta */
.topbar {
padding: 8px 12px;
}
.topbar-inner {
gap: 8px;
max-width: 100%;
}
.brand-tag {
display: none;
}
.brand-name {
font-size: 14.5px;
}
.search-pill {
min-width: 0;
width: 36px;
height: 36px;
padding: 0;
justify-content: center;
border-radius: 9px;
}
.search-pill .pill-text,
.search-pill .kbd {
display: none;
}
.user-pill {
height: 32px;
padding: 0 4px;
gap: 4px;
}
.user-pill .user-status,
.me-status-select {
display: none;
}
.user-pill .me-email,
#me-email {
display: none;
}
/* Esconde alguns ícones secundários no topbar */
#invite-btn,
#export-btn,
#notif-btn {
display: none !important;
}
/* Sidebar ocupa tela toda */
.sidebar {
border-right: none;
}
/* Dashboard padding menor (caso seja mostrado em algum cenário desktop-narrow) */
.dashboard {
padding: 20px 16px 80px;
}
.stats-row {
grid-template-columns: repeat(2, 1fr);
}
.quick-actions {
flex-direction: column;
}
.quick-actions .qa-btn {
width: 100%;
justify-content: flex-start;
}
.quick-actions .qa-btn .kbd {
margin-left: auto;
}
/* Highlight cards mais compactos */
.highlight-card {
grid-template-columns: 32px 1fr auto;
padding: 10px 12px;
}
.hl-avatar {
width: 32px;
height: 32px;
font-size: 12px;
}
/* Conv view ajustes */
.conv,
.messages {
padding: 10px 12px 12px;
}
.stack-bubbles {
max-width: calc(100% - 38px);
}
.bubble.is-media-image {
max-width: 260px;
}
.bubble.is-media-code {
max-width: 100%;
}
/* Composer */
.composer-wrap {
padding: 7px 12px 10px;
}
.smart-replies {
padding: 4px 10px;
bottom: 50px;
}
}
@media (max-width: 640px) {
:root {
--col-w: 100%;
}
.topbar-inner {
gap: 6px;
}
.topbar-actions {
gap: 2px;
}
.icon-btn,
.search-pill {
width: 34px;
height: 34px;
}
.user-pill {
margin-left: 0;
}
.user-pill .avatar-mini {
width: 24px;
height: 24px;
font-size: 10px;
}
/* Reduz o brand pra só logo + nome curto em telas muito pequenas
* MAS apenas dentro do chat-screen — no login/landing o nome continua. */
#chat .brand-name {
display: none;
}
/* Sticky bottom composer */
#composer-form,
.composer-wrap {
position: sticky;
bottom: 0;
}
/* iOS safe areas */
body {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* ── Escala de leitura da conversa ──────────────────────────────────────────
* Fontes das mensagens e do campo de digitação. No celular o tamanho base
* ficava pequeno demais para leitura confortável.
*
* Para recalibrar, mexa só nesta variável: 1 = tamanho original do projeto.
* Bônus: com o composer acima de 16px o iOS para de dar zoom automático ao
* focar no campo — abaixo disso o Safari sempre aproxima a tela.
*/
:root {
--chat-fs-scale: 1.2;
}
.bubble {
font-size: calc(14.75px * var(--chat-fs-scale));
}
.composer-input {
font-size: calc(14px * var(--chat-fs-scale));
}
.bubble-quote-text,
.quote-block-text {
font-size: calc(12.5px * var(--chat-fs-scale));
}
.bubble-sender,
.stack-name-inline {
font-size: calc(11px * var(--chat-fs-scale));
}
.edited-tag {
font-size: calc(10.5px * var(--chat-fs-scale));
}
/* Legenda de imagem/arquivo: o texto que acompanha o anexo. Antes o markup
* simplesmente não renderizava msg.text nessas variantes — a legenda era
* enviada e guardada, mas nunca aparecia. */
.bubble-caption {
display: block;
margin-top: 6px;
}
/* A bolha de imagem tinha padding 0 e só continha a ![]()
. Ao ganhar legenda
* e recibo, o conteúdo se espalhava ao lado da foto — a legenda ficava
* espremida numa coluna estreita à direita. Empilhar é o comportamento certo:
* foto em cima, legenda embaixo, como no WhatsApp. */
.bubble.is-media-image {
display: flex;
flex-direction: column;
align-items: stretch;
}
.bubble.is-media-image > img {
width: 100%;
flex: 0 0 auto;
}
.is-media-image .bubble-caption {
padding: 6px 10px 0;
}
/* Hora e ✓✓ sempre no canto inferior DIREITO da bolha, seja ela de texto,
* imagem ou arquivo. Como a bolha de mídia é uma coluna flex, o meta herdava
* o alinhamento do bloco e caía à esquerda — inconsistente com a bolha de
* texto, onde ele fica à direita na mesma linha. */
.is-media-image .bubble-meta,
.is-media-file .bubble-meta {
align-self: flex-end;
margin-left: auto;
padding: 2px 10px 6px;
}
.bubble.is-media-file {
display: flex;
flex-direction: column;
}
/* ── Barra única no celular (padrão WhatsApp) ───────────────────────────────
* No desktop as duas faixas fazem sentido: a de cima é do app (identidade,
* status, sair) e a lista de conversas fica ao lado. No celular a conversa
* ocupa a tela inteira, e duas faixas empilhadas só comem altura útil.
* Com a conversa aberta, escondemos a de cima e o header da conversa vira a
* única barra — seta, avatar, nome, status e sair.
*/
@media (max-width: 880px) {
#chat[data-conv-open="true"] > .topbar {
display: none;
}
/* Nome e status alinhados à esquerda, colados no avatar — no WhatsApp o
* nome não fica centralizado na barra. */
.chat-header {
gap: 10px;
}
.chat-header .conv-meta {
align-items: flex-start;
text-align: left;
min-width: 0;
flex: 1 1 auto;
}
.chat-header .conv-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ── Uma única forma de reagir no celular ───────────────────────────────────
* Havia dois caminhos para a mesma ação: o botão de ações na bolha e o "..."
* ao lado da stack. Em aparelho de toque some os dois e vale o gesto de
* segurar a mensagem, que é o que se espera de um mensageiro. No desktop,
* onde não existe long-press confortável, os botões continuam.
*/
@media (hover: none) {
.msg-trigger,
.stack-actions {
display: none !important;
}
/* Sem isso o long-press dispara a seleção de texto do Android e o menu de
* copiar do sistema aparece por cima da barra de reações. */
.bubble {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* O texto ainda precisa ser selecionável de propósito em bloco de código. */
.bubble-text code,
.bubble pre {
-webkit-user-select: text;
user-select: text;
}
}
/* ── Modo seleção (long-press) ──────────────────────────────────────────────
* A barra cobre o cabeçalho da conversa enquanto há mensagem selecionada.
*/
.selection-bar {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 6px;
padding: 0 10px;
background: var(--panel, #fff);
}
.selection-bar.hidden {
display: none;
}
.sel-count {
font-weight: 600;
font-size: 15px;
margin-left: 2px;
}
.sel-spacer {
flex: 1 1 auto;
}
.sel-danger {
color: #b91c1c;
}
.chat-header {
position: relative;
}
/* A bolha selecionada precisa continuar identificável com a barra aberta. */
#messages .bubble.is-selected {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.mini-toast {
position: fixed;
left: 50%;
bottom: 84px;
transform: translateX(-50%) translateY(8px);
background: rgba(15, 23, 42, 0.92);
color: #fff;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 60;
}
.mini-toast.is-on {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── Visualizador de imagem em tela cheia ───────────────────────────────────
* Fundo preto, imagem centrada, autor/data no topo e legenda + resposta
* rápida no rodapé.
*/
.img-viewer {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
background: #000;
color: #fff;
}
.img-viewer.hidden {
display: none;
}
.iv-top {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
flex: 0 0 auto;
}
.iv-top .icon-btn {
color: #fff;
background: transparent;
}
.iv-meta {
display: flex;
flex-direction: column;
line-height: 1.2;
flex: 1 1 auto;
min-width: 0;
}
.iv-author {
font-weight: 600;
font-size: 15px;
}
.iv-date {
font-size: 12px;
opacity: 0.75;
}
/* A imagem ocupa o espaço que sobra e nunca estoura o quadro. */
.iv-stage {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
overflow: hidden;
}
.iv-stage img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.iv-bottom {
flex: 0 0 auto;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background: rgba(0, 0, 0, 0.6);
}
.iv-caption {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.4;
}
.iv-caption[hidden] {
display: none;
}
.iv-reply-row {
display: flex;
align-items: center;
gap: 10px;
}
.iv-reply {
flex: 1 1 auto;
text-align: left;
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.72);
border: none;
border-radius: 999px;
padding: 12px 18px;
font: inherit;
font-size: 15px;
cursor: pointer;
}
.iv-quick {
background: transparent;
border: none;
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 4px;
}
body.no-scroll {
overflow: hidden;
}
/* ── Vídeo na conversa ──────────────────────────────────────────────────────
* Antes o vídeo caía na variante "arquivo" e virava um ícone para baixar.
* Agora toca na própria bolha, com a legenda e o meta no mesmo padrão da
* bolha de imagem.
*/
.bubble.is-media-video {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
max-width: 320px;
}
.bubble.is-media-video > video {
display: block;
width: 100%;
max-height: 340px;
border-radius: var(--radius-bubble);
background: #000;
}
.is-media-video .bubble-caption {
padding: 6px 10px 0;
}
.is-media-video .bubble-meta {
align-self: flex-end;
margin-left: auto;
padding: 2px 10px 6px;
}
.attach-preview-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* ── Espaçamento uniforme entre mensagens ───────────────────────────────────
* Havia 12px entre grupos e 1px dentro do grupo: duas mensagens seguidas da
* mesma pessoa saíam praticamente coladas, enquanto a troca de interlocutor
* abria um vão. Agora a distância é a mesma em qualquer caso.
*
* Para calibrar, mude só --gap-msg.
*/
:root {
--gap-msg: 8px;
}
.conv,
.messages {
gap: var(--gap-msg);
}
.stack-bubbles {
gap: var(--gap-msg);
}
/* Os cantos "apertados" existiam para dar aparência de bloco contínuo em
* mensagens coladas. Com todas separadas por igual, cada bolha volta a ter o
* mesmo raio nos quatro cantos — que é o que faz a régua parecer uniforme. */
.stack-out .bubble.is-first,
.stack-out .bubble.is-mid,
.stack-out .bubble.is-last,
.stack-in .bubble.is-first,
.stack-in .bubble.is-mid,
.stack-in .bubble.is-last {
border-radius: var(--radius-bubble);
}
/* ── Hora e ✓✓ sempre no canto inferior esquerdo ────────────────────────────
* O meta era inline: na bolha de texto ele terminava colado ao fim da última
* linha (à direita), e nas bolhas de mídia caía onde o fluxo deixasse. Agora
* ocupa uma linha própria, sempre à esquerda, em qualquer tipo de bolha.
*/
.bubble {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.bubble .bubble-meta {
display: flex;
align-self: flex-start;
margin-left: 0;
margin-right: auto;
margin-top: 2px;
top: 0;
}
.is-media-image .bubble-meta,
.is-media-video .bubble-meta,
.is-media-file .bubble-meta {
align-self: flex-start;
margin-left: 0;
padding: 2px 10px 6px;
}
/* O texto precisa poder ocupar a largura toda da bolha mesmo com o pai
* alinhando os filhos à esquerda. */
.bubble > .bubble-text {
width: 100%;
}
/* ── Reações não podem ser cortadas ─────────────────────────────────────────
* As bolhas de mídia usavam overflow:hidden para o arredondamento recortar a
* imagem. Só que as reações ficam penduradas na borda da bolha — e eram
* decepadas por esse mesmo recorte. O arredondamento já está aplicado na
* própria ![]()
/