/* Shared chat widget (chat.html) + owner inbox (eden-inbox-*.html) styling. Studio look only. */
.chat-shell {
display: flex;
justify-content: center;
}
.chat-card {
width: 100%;
max-width: 680px;
background: var(--surface-elevated);
border: var(--border-w) solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
/*
The active chat gets meaningfully wider than the plain 2-field setup form above (a 960px-wide form
with just a username/email field would look sparse) — this is "the chat" that was reported as
cramped (previously capped at the same 640px as the setup form, inside a .container.narrow section
that clipped it at 760px besides — chat.html's own container lost the "narrow" class alongside this
change so this max-width can actually take effect).
*/
.chat-card.chat-window {
max-width: 960px;
}
/* Setup / login form ------------------------------------------------------- */
.chat-start-card {
padding: clamp(28px, 5vw, 44px);
}
.chat-start-card .eyebrow {
margin-bottom: 6px;
}
/* No size override previously — inherited the site-wide default h2 clamp (up to 2.75rem), which
read as nearly as large as the page's own h1 right above it, part of what made the top of this
page feel heavy/repetitive rather than like a clear hierarchy from page intro to form. */
.chat-start-card h2 {
font-size: 1.6rem;
margin-bottom: 10px;
}
.chat-start-card > p {
color: var(--ink-soft);
margin-bottom: 26px;
}
.chat-form-grid {
display: flex;
flex-direction: column;
gap: 18px;
}
.chat-form-grid .button {
align-self: flex-start;
margin-top: 4px;
}
/* Chat window --------------------------------------------------------------- */
/* Was min(640px, 72vh) — read as roughly an eighth of a typical desktop viewport, cramped for an
actual back-and-forth conversation. */
.chat-window {
display: flex;
flex-direction: column;
height: min(800px, 82vh);
}
.chat-window-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 22px 26px;
border-bottom: var(--border-w) solid var(--line);
}
.chat-window-head .eyebrow {
margin-bottom: 4px;
}
/* No size override previously — this inherited the site-wide default h2 clamp (up to 2.75rem),
which reads as oversized crammed into a 640px-max compact card alongside the eyebrow/subtitle,
part of what made the chat page feel unfinished. */
.chat-window-head h2 {
font-size: 1.3rem;
}
.chat-window-head p {
color: var(--ink-soft);
font-size: 0.9rem;
margin-top: 4px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 24px 26px;
display: flex;
flex-direction: column;
gap: 16px;
scroll-behavior: smooth;
}
.conversation-empty,
.admin-empty {
margin: auto;
color: var(--ink-faint);
text-align: center;
max-width: 34ch;
font-size: 0.92rem;
}
.chat-message {
max-width: 80%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 16px;
border-radius: var(--radius-md);
background: var(--surface-alt);
animation: message-in 220ms ease;
}
@keyframes message-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-message.from-client {
align-self: flex-end;
background: var(--accent-soft);
border-bottom-right-radius: 4px;
}
.chat-message.from-eden {
align-self: flex-start;
background: var(--surface-alt);
border-bottom-left-radius: 4px;
}
.chat-message-meta {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-faint);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.chat-message p {
font-size: 0.95rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.chat-message img {
max-width: 240px;
border-radius: var(--radius-sm);
border: var(--border-w) solid var(--line);
}
/* Composer -------------------------------------------------------------------- */
.chat-composer {
border-top: var(--border-w) solid var(--line);
padding: 16px 20px;
}
.attachments-preview {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.attachments-preview:empty {
display: none;
}
.attachment-preview {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 4px;
border-radius: var(--radius-pill);
background: var(--surface-alt);
border: var(--border-w) solid var(--line);
font-size: 0.78rem;
max-width: 160px;
}
.attachment-preview img {
width: 24px;
height: 24px;
object-fit: cover;
border-radius: 50%;
}
.attachment-preview span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment-preview button {
color: var(--ink-faint);
font-size: 0.85rem;
line-height: 1;
}
.attachment-preview button:hover {
color: var(--danger);
}
.composer-row {
display: flex;
align-items: flex-end;
gap: 10px;
}
.composer-row textarea {
flex: 1;
border: var(--border-w) solid var(--line-strong);
border-radius: var(--radius-md);
padding: 12px 14px;
resize: none;
min-height: 46px;
max-height: 140px;
background: var(--surface-elevated);
font-size: 0.95rem;
}
.composer-row textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.attach-button,
.send-button {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--border-w) solid var(--line-strong);
color: var(--ink-soft);
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/*
Neither icon had an explicit size — a sizeless