/* Account message center (2026-10-28, approved option A): list pane with segmented tabs + conversation/notice pane. */
.customer-content .live-account-main:has(> .msg-center, > .account-loading-messages) { min-height:0; padding:0; overflow:hidden; }
.msg-center { display:grid; grid-template-columns:320px minmax(0,1fr); height:clamp(520px, calc(100vh - 230px), 720px); color:var(--brand-ink); }
.msg-list-col { display:flex; flex-direction:column; min-height:0; border-right:1px solid #eef0f5; }
.msg-detail-col { display:flex; flex-direction:column; min-width:0; min-height:0; }
.msg-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.msg-tabs { display:flex; gap:4px; margin:16px 16px 12px; padding:4px; border-radius:10px; background:#f1f3f8; }
.msg-tab { display:flex; flex:1; align-items:center; justify-content:center; gap:6px; height:34px; border-radius:8px; color:#4a5670; font-size:13px; line-height:20px; font-weight:500; text-decoration:none; }
.msg-tab:hover { color:var(--brand-ink); }
.msg-tab.is-current { background:#fff; color:var(--brand-primary); font-weight:600; box-shadow:0 1px 3px rgba(13,38,90,.12); }
.msg-tab:focus-visible { outline:2px solid var(--brand-primary); outline-offset:1px; }
.msg-count { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:9px; background:var(--brand-primary); color:#fff; font-size:11px; line-height:1; font-weight:600; }
.msg-count[hidden] { display:none; }

.msg-search { display:flex; align-items:center; gap:8px; height:36px; margin:0 16px 8px; padding:0 12px; box-sizing:border-box; border:1px solid #e3e7f0; border-radius:10px; color:#7d889c; }
.msg-search[hidden] { display:none; }
.msg-search:focus-within { border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12); }
.msg-search input { flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:var(--brand-ink); font:inherit; font-size:13px; }
.msg-search input::placeholder { color:#7d889c; }

.msg-rows { flex:1; min-height:0; overflow:auto; padding-bottom:8px; }
.msg-row-list { margin:0; padding:0; list-style:none; }
.msg-row { position:relative; display:flex; align-items:flex-start; gap:12px; padding:12px 16px 12px 13px; border-left:3px solid transparent; color:inherit; text-decoration:none; }
.msg-row:hover { background:#f8f9fc; }
.msg-row.is-selected { border-left-color:var(--brand-primary); background:var(--brand-soft); }
.msg-row:focus-visible { outline:2px solid var(--brand-primary); outline-offset:-2px; }
.msg-avatar { display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:10px; background:#eef1ff; color:var(--brand-primary); font-size:15px; line-height:1; font-weight:600; }
.msg-avatar.is-small { width:34px; height:34px; border-radius:9px; font-size:13px; }
.msg-row-copy { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.msg-row-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.msg-row-top b { overflow:hidden; font-size:14px; line-height:20px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.msg-row.is-unread .msg-row-top b { font-weight:600; }
.msg-row-top time { flex:none; color:#7d889c; font-size:11px; line-height:16px; }
.msg-row-sub { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.msg-row-sub > span:first-child { overflow:hidden; color:#61728e; font-size:12px; line-height:18px; text-overflow:ellipsis; white-space:nowrap; }
.msg-row.is-unread .msg-row-sub > span:first-child { color:var(--brand-text); }
.msg-dot { flex:none; width:7px; height:7px; margin-top:7px; border-radius:50%; }
.msg-row.is-unread .msg-dot { background:var(--brand-primary); }
.msg-more { display:block; width:calc(100% - 32px); height:36px; margin:8px 16px 0; border:1px solid #e3e7f0; border-radius:10px; background:#fff; color:#3d4862; font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.msg-more:hover { border-color:var(--brand-border-active); color:var(--brand-primary); }

.msg-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:48px 24px; text-align:center; }
.msg-empty p { margin:0; font-size:14px; line-height:21px; font-weight:500; color:var(--brand-ink); }
.msg-empty span { color:#61728e; font-size:13px; line-height:20px; }
.msg-empty.is-inline { padding:32px 16px; }
.msg-placeholder { display:flex; flex:1; align-items:center; justify-content:center; background:#fbfcfe; }
.msg-retry { min-height:34px; margin-top:8px; padding:0 16px; border:1px solid #e3e7f0; border-radius:9px; background:#fff; color:#3d4862; font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.msg-retry:hover { border-color:var(--brand-border-active); color:var(--brand-primary); }
:is(.msg-more,.msg-retry,.msg-older,.msg-send,.msg-icon-button,.msg-back,.msg-order a,.msg-attachment button,.msg-image):focus-visible { outline:2px solid var(--brand-primary); outline-offset:2px; }

.msg-back { display:none; }
.msg-thread { display:flex; flex:1; flex-direction:column; min-height:0; }
.msg-thread-head { display:flex; flex:none; align-items:center; gap:12px; height:64px; padding:0 20px; box-sizing:border-box; border-bottom:1px solid #eef0f5; }
.msg-thread-head h2 { overflow:hidden; margin:0; font-size:15px; line-height:22px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.msg-order { display:flex; flex:none; align-items:center; gap:12px; margin:12px 20px 0; padding:10px 14px; border:1px solid var(--brand-border); border-radius:12px; background:var(--brand-soft); }
.msg-order-copy { display:flex; flex:1; flex-direction:column; min-width:0; }
.msg-order-copy b { font-size:12px; line-height:18px; font-weight:500; color:#61728e; }
.msg-order-copy span { overflow:hidden; font-size:13px; line-height:20px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.msg-order a { flex:none; color:var(--brand-primary); font-size:12px; line-height:18px; font-weight:600; text-decoration:none; }
.msg-order a:hover { color:var(--brand-hover); }

.msg-log { display:flex; flex:1; flex-direction:column; gap:12px; min-height:0; overflow:auto; padding:16px 20px; background:#fbfcfe; overscroll-behavior:contain; }
.msg-older { align-self:center; min-height:28px; padding:0 12px; border:1px solid #e3e7f0; border-radius:14px; background:#fff; color:#4a5670; font:inherit; font-size:12px; cursor:pointer; }
.msg-older:disabled { cursor:default; color:#7d889c; }
.msg-day { align-self:center; padding:2px 10px; border-radius:10px; background:#f1f3f8; color:#61728e; font-size:11px; line-height:16px; }
.msg-system { align-self:center; max-width:80%; margin:0; color:#61728e; font-size:12px; line-height:18px; text-align:center; overflow-wrap:anywhere; }
.msg-item { display:flex; flex-direction:column; align-items:flex-start; gap:4px; max-width:68%; }
.msg-item.is-mine { align-self:flex-end; align-items:flex-end; }
.msg-bubble { padding:9px 13px; border:1px solid #e6e9f0; border-radius:4px 14px 14px 14px; background:#fff; font-size:14px; line-height:21px; white-space:pre-wrap; overflow-wrap:anywhere; }
.is-mine .msg-bubble { border-color:var(--brand-primary); border-radius:14px 4px 14px 14px; background:var(--brand-primary); color:#fff; }
.msg-item time { color:#7d889c; font-size:11px; line-height:16px; }
.msg-image { display:block; width:200px; height:140px; padding:0; overflow:hidden; border:1px solid #e3e7f0; border-radius:12px; background:#eef1f7; cursor:zoom-in; }
.msg-image img { display:block; width:100%; height:100%; object-fit:cover; }
.msg-image img:not([src]) { visibility:hidden; }
.msg-image.is-missing { cursor:default; }

.msg-composer { flex:none; padding:12px 20px 14px; border-top:1px solid #eef0f5; background:#fff; }
.msg-composer textarea { display:block; width:100%; height:48px; min-height:48px; max-height:160px; padding:0; box-sizing:border-box; border:0; outline:0; resize:none; background:transparent; color:var(--brand-ink); font:inherit; font-size:14px; line-height:21px; field-sizing:content; }
.msg-composer textarea::placeholder { color:#7d889c; }
.msg-composer:focus-within { box-shadow:inset 0 2px 0 rgba(var(--brand-rgb),.18); }
.msg-composer-bar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.msg-icon-button { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; box-sizing:border-box; border:1px solid #e3e7f0; border-radius:9px; background:#fff; color:#4a5670; cursor:pointer; }
.msg-icon-button:hover { border-color:var(--brand-border-active); color:var(--brand-primary); }
.msg-icon-button:focus-within { outline:2px solid var(--brand-primary); outline-offset:2px; }
.msg-icon-button input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.msg-hint { overflow:hidden; color:#7d889c; font-size:11px; line-height:16px; text-overflow:ellipsis; white-space:nowrap; }
.msg-send { flex:none; min-width:76px; height:36px; margin-left:auto; padding:0 18px; border:0; border-radius:10px; background:var(--brand-gradient); color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.msg-send:hover { background:var(--brand-gradient-hover); }
.msg-send:disabled { cursor:progress; opacity:.72; }
.msg-attachment { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:6px 8px 6px 6px; border:1px solid #e3e7f0; border-radius:10px; background:#f8f9fc; }
.msg-attachment[hidden] { display:none; }
.msg-attachment img { width:40px; height:40px; border-radius:7px; object-fit:cover; }
.msg-attachment span { flex:1; overflow:hidden; color:#3d4862; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.msg-attachment button { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:7px; background:transparent; color:#61728e; cursor:pointer; }
.msg-attachment button:hover { background:#eef1f7; color:var(--brand-ink); }
.msg-status { margin:8px 0 0; color:#8a5a06; font-size:12px; line-height:18px; }
.msg-status[hidden] { display:none; }

.msg-notice { flex:1; min-height:0; overflow:auto; padding:28px 36px 36px; }
.msg-tag { display:inline-block; padding:2px 8px; border-radius:5px; background:#eef1ff; color:var(--brand-text); font-size:11px; line-height:16px; font-weight:600; }
.customer-content .msg-notice h2 { margin:12px 0 4px; font-size:20px; line-height:28px; font-weight:600; overflow-wrap:anywhere; }
.msg-notice time { color:#61728e; font-size:12px; line-height:18px; }
.msg-notice-body { margin-top:18px; color:#3d4862; overflow-wrap:anywhere; }

.msg-lightbox { max-width:min(92vw,1100px); max-height:92vh; padding:0; border:0; border-radius:12px; background:transparent; }
.msg-lightbox::backdrop { background:rgba(12,18,40,.72); }
.msg-lightbox img { display:block; max-width:min(92vw,1100px); max-height:92vh; border-radius:12px; }
.msg-lightbox button { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; border-radius:50%; background:rgba(12,18,40,.6); color:#fff; cursor:pointer; }

/* Skeleton pieces share the live geometry above. */
.msg-row.is-skeleton { pointer-events:none; }
.msg-row.is-skeleton .msg-row-copy .account-skeleton-bar:first-child { width:60%; height:14px; }
.msg-row.is-skeleton .msg-row-copy .account-skeleton-bar + .account-skeleton-bar { width:85%; height:11px; margin-top:6px; }
.msg-avatar.account-skeleton-bar { background:#edf2f8; }
.msg-skel-tab { flex:1; height:34px; border-radius:8px; background:#e6ebf3; }
.msg-skel-search { width:55%; height:12px; }
.msg-skel-dot { width:7px; height:7px; margin-top:7px; border-radius:50%; }
.msg-skel-title { width:140px; height:15px; }
.msg-skel-bubble { width:42%; height:40px; border-radius:4px 14px 14px 14px; }
.msg-skel-bubble.is-me { align-self:flex-end; width:34%; border-radius:14px 4px 14px 14px; }
.msg-composer.is-skeleton { height:118px; box-sizing:border-box; }
.msg-skel-input { width:60%; height:14px; }
.msg-skel-tag { width:64px; height:20px; }
.msg-skel-heading { width:55%; height:22px; margin:14px 0 10px; }
.msg-notice .account-skeleton-bar { margin-bottom:6px; }
.msg-notice-body .account-skeleton-bar { width:100%; margin-bottom:12px; }
.msg-notice-body .account-skeleton-bar:last-child { width:60%; }

@media(max-width:900px) {
  .msg-center { grid-template-columns:260px minmax(0,1fr); }
  .msg-notice { padding:24px; }
}
/* Phones: one pane at a time; the account rail gives way to the bottom tab bar. */
@media(max-width:760px) {
  .customer-content .live-account-workspace:has(.msg-center) > .live-account-nav { display:none; }
  .msg-center { display:block; height:auto; }
  .msg-center[data-pane="detail"] .msg-list-col, .msg-center[data-pane="list"] .msg-detail-col { display:none; }
  .msg-list-col { border-right:0; }
  .msg-rows { overflow:visible; }
  .msg-back { display:inline-flex; align-items:center; gap:4px; min-height:44px; margin:0 0 0 -8px; padding:0 8px; color:#3d4862; font-size:14px; font-weight:500; text-decoration:none; }
  .msg-back span { display:none; }
  .msg-thread-head { gap:8px; height:56px; padding:0 12px; }
  .msg-order { margin:10px 12px 0; }
  .msg-log { min-height:50vh; overflow:visible; padding:16px 12px; }
  .msg-item { max-width:82%; }
  .msg-composer { position:sticky; bottom:0; z-index:2; padding:10px 12px 12px; }
  .msg-hint { display:none; }
  .msg-row { padding:12px 16px 12px 13px; }
  .msg-notice { padding:12px 16px 28px; }
  .msg-notice .msg-back { display:flex; width:max-content; margin-bottom:8px; }
  .msg-notice .msg-back span { display:inline; }
  .msg-send { height:40px; }
  .msg-icon-button { width:40px; height:40px; }
}
html.is-m .customer-content .live-account-workspace:has(.msg-center) > .live-account-nav { display:none; }
html.is-m .customer-content:has(.msg-center[data-pane="detail"]) > .co-head { display:none; }
html.is-m .msg-composer { bottom:calc(var(--tab-h, 56px) + env(safe-area-inset-bottom, 0px)); }
html.is-m .customer-content .live-account-main:has(.msg-center) { border-radius:14px; }
@media(prefers-reduced-motion:reduce) { .msg-log { scroll-behavior:auto; } }