/* All measurements/colors below come directly from Figma (会話ふきだし,
node 466:2789) via get_design_context — not eyeballed. Two genuinely
different layouts, matching editor.js's own renderBody() branch:
with a character, the avatar sits ABOVE its name in a centered column
beside the bubble (a row); without one, the name drops BELOW the
bubble instead (a column). */
/* ── Root ─────────────────────────────────────────── */
.gaia-chat-bubble {
box-sizing: border-box;
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 2rem;
margin-bottom: 2rem;
/* Hard-coded to 720px on purpose, not left to inherit from whatever
ambient container the editor canvas happens to use — this is the
same literal reading-column value used site-wide elsewhere in this
theme (#main_col > .inner { max-width: 720px }), and matches
Gutenberg's own standard mechanism for "constrained" block width
(max-width + auto margins), which is what actually keeps every
other block's left/right edges lined up in the editor. Confirmed
live on the frontend at 720px; the editor canvas isn't directly
inspectable from this session, but this no longer depends on
figuring out exactly what ambient width it uses. */
max-width: 840px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.gaia-chat-bubble--right {
flex-direction: row-reverse;
}
/* No character: single column instead of a row, name below the bubble
instead of an avatar column beside it — a different layout, not the
same one with the avatar hidden. */
.gaia-chat-bubble--no-avatar {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.gaia-chat-bubble--no-avatar.gaia-chat-bubble--right {
align-items: flex-end;
}
/* ── Avatar column (avatar above name, centered) ───── */
.gaia-chat-bubble__avatar-col {
box-sizing: border-box;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.gaia-chat-bubble__avatar {
display: block;
width: 40px;
/* !important: the parent QUADRA theme's .post_content img rule sets
height:auto with higher specificity (1 class + 1 element beats our
1 class alone) — the same recurring ".post_content base stylesheet
leak" pattern hit repeatedly elsewhere in this project. Confirmed
live: without this, the avatar rendered at its native aspect ratio
(44.6px tall) instead of the intended 40×40 circle. */
height: 40px !important;
border-radius: 50%;
object-fit: cover;
object-position: top center;
background: var(--color-grey-92, #f0eee6);
}
/* ── Name ─────────────────────────────────────────── */
.gaia-chat-bubble__name {
font-size: 11px;
line-height: 11px;
font-weight: var(--font-weight-regular, 400);
color: #9a9189;
white-space: nowrap;
}
.gaia-chat-bubble__name:empty {
display: none;
}
/* Below-bubble position (no-avatar layout only) — a small inset matching
the bubble's own text padding, not flush with its rounded edge. */
.gaia-chat-bubble--no-avatar .gaia-chat-bubble__name {
padding-left: 4px;
}
.gaia-chat-bubble--no-avatar.gaia-chat-bubble--right .gaia-chat-bubble__name {
padding-left: 0;
padding-right: 4px;
}
/* ── Bubble ───────────────────────────────────────── */
/* Default (未指定) colors use this project's own real brand tokens, not
the literal Figma mockup hex — --color-grey-92/--color-brand-primary
are already the established "warm cream card" / "dark brand" pair
used elsewhere in this project (e.g. 関連記事's own card background),
and are close enough to the mockup's own #f1edeb/#41322e that the
difference is imperceptible. */
.gaia-chat-bubble__bubble {
display: inline-block;
box-sizing: border-box;
max-width: 80%;
padding: 16px 20px;
line-height: 1.7;
font-size: 15px;
font-weight: var(--font-weight-medium, 500);
word-break: break-word;
background: var(--color-grey-92, #f0eee6);
color: var(--color-brand-primary, #49352d);
}
.gaia-chat-bubble--no-avatar .gaia-chat-bubble__bubble {
max-width: 100%;
}
.gaia-chat-bubble--right .gaia-chat-bubble__bubble {
background: var(--color-brand-primary, #49352d);
color: var(--color-text-inverse, #ffffff);
}
/* ── Explicit color override (per-bubble, independent of 向き) ──────
Same 8 tokens + white/dark-text pairing already established for
gaia/point-box's own ribbon label — grey-light/white are the only two
light enough to need dark text instead of white; every other token is
dark/saturated enough that white text stays readable. Only applied
when a color is explicitly chosen (not "default" — see COLOR_OPTIONS'
own comment in editor.js). Each selector repeats .gaia-chat-bubble__bubble
(2 classes on the one element, not a descendant combinator) specifically
to MATCH — not lose to — .gaia-chat-bubble--right .gaia-chat-bubble__bubble
above, which is also 2 classes: a single-class version of these rules
would silently lose that specificity fight and never override a
right-side bubble's color regardless of source order. */
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--primary {
background: var(--color-brand-primary, #49352d);
color: var(--color-text-inverse, #ffffff);
}
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--accent-solid {
background: var(--color-brand-accent-solid, #f0701c);
color: var(--color-text-inverse, #ffffff);
}
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--accent-light {
background: var(--color-brand-accent-light, #f7941d);
color: var(--color-text-inverse, #ffffff);
}
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--accent-dark {
background: var(--color-brand-accent-dark, #e8501e);
color: var(--color-text-inverse, #ffffff);
}
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--black {
background: var(--color-text-heading, #000000);
color: var(--color-text-inverse, #ffffff);
}
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--grey {
background: var(--color-text-muted, #999999);
color: var(--color-text-inverse, #ffffff);
}
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--grey-light {
background: var(--color-text-muted-light, #bbbbbb);
color: var(--color-text-body, #1a1a1a);
}
.gaia-chat-bubble__bubble.gaia-chat-bubble__bubble--white {
background: var(--color-text-inverse, #ffffff);
color: var(--color-text-body, #1a1a1a);
}
/* Asymmetric corners: 20px on 3 corners, 4px on the outer-top corner for
whichever side the bubble is anchored to (a real design detail, not a
uniform rounded rect — confirmed directly from the Figma source; the
sharp corner stays tied to `side`, independent of whether an avatar is
shown). CSS order is top-left / top-right / bottom-right / bottom-left. */
.gaia-chat-bubble--left .gaia-chat-bubble__bubble {
border-radius: 4px 20px 20px 20px;
}
.gaia-chat-bubble--right .gaia-chat-bubble__bubble {
border-radius: 20px 4px 20px 20px;
}
/* ══════════════════════════════════════════════════
EDITOR — character picker (InspectorControls)
══════════════════════════════════════════════════ */
.gaia-chat-bubble-picker__label {
margin: 16px 0 8px;
font-weight: var(--font-weight-bold, 700);
}
.gaia-chat-bubble-picker__grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.gaia-chat-bubble-picker__swatch,
.gaia-chat-bubble-picker__none {
box-sizing: border-box;
width: 44px;
height: 44px;
padding: 2px;
border: 2px solid var(--color-border-subtle, #dddddd);
border-radius: 50%;
background: #ffffff;
cursor: pointer;
/* The swatch buttons never needed this — their fills 100% of the
button regardless of alignment — but "なし" holds plain text, which
a bare