:root {
--taxlink-chat-max-width: 860px;
--taxlink-chat-gap: 16px;
--taxlink-chat-avatar: 78px;
--taxlink-chat-tax-bg: #eef9f8;
--taxlink-chat-tax-border: #49b8b0;
--taxlink-chat-client-bg: #f5f7f8;
--taxlink-chat-client-border: #d6dfe3;
--taxlink-chat-text: #22313f;
--taxlink-chat-muted: #5c6b73;
}
.taxlink-chat {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
gap: var(--taxlink-chat-gap);
align-items: start;
max-width: var(--taxlink-chat-max-width);
margin: 28px auto;
color: var(--taxlink-chat-text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}
.taxlink-chat__speaker {
text-align: center;
}
.taxlink-chat__avatar {
display: block;
width: var(--taxlink-chat-avatar);
height: var(--taxlink-chat-avatar);
margin: 0 auto 8px;
border-radius: 999px;
object-fit: cover;
background: #fff;
}
.taxlink-chat__name {
margin: 0;
color: var(--taxlink-chat-muted);
font-size: 13px;
font-weight: 700;
line-height: 1.45;
}
.taxlink-chat__bubble {
position: relative;
min-height: 58px;
padding: 18px 21px;
border: 1px solid transparent;
border-radius: 12px;
box-sizing: border-box;
line-height: 1.95;
box-shadow: 0 3px 12px rgba(31, 41, 51, 0.05);
}
.taxlink-chat__bubble::before,
.taxlink-chat__bubble::after {
content: "";
position: absolute;
top: 23px;
width: 0;
height: 0;
border-style: solid;
}
.taxlink-chat__bubble::before {
left: -12px;
border-width: 9px 12px 9px 0;
}
.taxlink-chat__bubble::after {
left: -10px;
border-width: 8px 11px 8px 0;
}
.taxlink-chat--tax .taxlink-chat__bubble {
background: var(--taxlink-chat-tax-bg);
border-color: rgba(73, 184, 176, 0.34);
}
.taxlink-chat--tax .taxlink-chat__bubble::before {
border-color: transparent rgba(73, 184, 176, 0.34) transparent transparent;
}
.taxlink-chat--tax .taxlink-chat__bubble::after {
border-color: transparent var(--taxlink-chat-tax-bg) transparent transparent;
}
.taxlink-chat--client .taxlink-chat__bubble {
background: var(--taxlink-chat-client-bg);
border-color: var(--taxlink-chat-client-border);
}
.taxlink-chat--client .taxlink-chat__bubble::before {
border-color: transparent var(--taxlink-chat-client-border) transparent transparent;
}
.taxlink-chat--client .taxlink-chat__bubble::after {
border-color: transparent var(--taxlink-chat-client-bg) transparent transparent;
}
.taxlink-chat__bubble p {
margin: 0 0 0.85em;
}
.taxlink-chat__bubble p:last-child {
margin-bottom: 0;
}
.taxlink-point-box,
.taxlink-source-box {
max-width: var(--taxlink-chat-max-width);
margin: 36px auto;
padding: 23px 25px;
border: 1px solid #dce5e8;
border-radius: 12px;
background: #fff;
box-sizing: border-box;
line-height: 1.95;
}
.taxlink-point-box {
border-left: 5px solid #37a6a0;
}
.taxlink-source-box {
border-left: 5px solid #87979f;
}
.taxlink-point-box h2,
.taxlink-source-box h2 {
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid #53c7c1;
font-size: 1.25rem;
line-height: 1.5;
}
.taxlink-bullet-list {
display: grid;
gap: 9px;
}
.taxlink-bullet-item {
position: relative;
padding-left: 1.25em;
line-height: 1.85;
}
.taxlink-bullet-item::before {
content: "●";
position: absolute;
left: 0;
top: 0;
color: #22313f;
font-size: 0.72em;
line-height: 2.55;
}
.taxlink-source-box a {
color: #187e86;
text-decoration: underline;
text-underline-offset: 3px;
}
.taxlink-source-box a:hover {
opacity: 0.8;
}
@media (max-width: 640px) {
.taxlink-chat {
grid-template-columns: 68px minmax(0, 1fr);
gap: 11px;
margin: 22px auto;
}
.taxlink-chat__avatar {
width: 58px;
height: 58px;
}
.taxlink-chat__name {
font-size: 12px;
}
.taxlink-chat__bubble {
padding: 14px 15px;
line-height: 1.85;
}
.taxlink-chat__bubble::before,
.taxlink-chat__bubble::after {
top: 18px;
}
.taxlink-point-box,
.taxlink-source-box {
padding: 18px;
}
}