.chat-center-screen { height:min(var(--chat-center-height,100dvh),100dvh); overflow:hidden; background:#f2f4f2; }
.chat-center-screen .store-layout { height:100%; min-height:0; grid-template-columns:80px 280px minmax(0,1fr); }
.chat-center-screen .store-primary { height:100%; min-height:0; }
.chat-center-screen .store-all { background:transparent !important; color:#69746e !important; font-weight:400 !important; }
.chat-center-screen .store-layout .store-secondary { display:flex; flex-direction:column; min-height:0; height:100%; padding:0; overflow:hidden; background:#f1f4f1; }
.chat-center-screen .store-content { height:100%; min-height:0; background:#f7f8f7; }
.chat-center-screen .page { height:100%; min-height:0; padding:0; }
#chat-view { height:100%; min-width:0; }
.chat-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; padding:16px; }
.chat-list-heading h1 { margin:0; font-size:20px; }
.chat-refresh { display:grid; place-items:center; width:32px; height:32px; border-radius:6px; color:#61736a; }
.chat-refresh:hover { background:#e0ebe3; }
.chat-filter { display:block; padding:0 12px 12px; }
.chat-filter input { width:100%; min-width:0; padding:9px 10px; font:inherit; font-size:13px; color:#354c3e; border:1px solid #dce4de; border-radius:6px; background:#fff; }
.chat-thread-list { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.chat-thread { display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; width:100%; min-height:84px; padding:14px 12px; color:#293b30; text-align:left; border-bottom:1px solid #e3e9e4; }
.chat-thread:hover { background:#e6eee8; }
.chat-thread[aria-current=page] { background:#dcece2; }
.chat-thread-picture { position:relative; width:44px; height:44px; border-radius:8px; background:#e3ede6; }
.chat-thread-picture img { display:block; width:100%; height:100%; object-fit:cover; border-radius:8px; }
.chat-unread { position:absolute; right:-5px; top:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#d94a4a; color:#fff; font-size:10px; line-height:16px; text-align:center; }
.chat-thread-info { min-width:0; align-self:center; }
.chat-thread-top { display:flex; align-items:center; gap:5px; min-width:0; }
.chat-thread-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.chat-thread time { flex-shrink:0; color:#8a948d; font-size:10px; }
.chat-purchased { flex-shrink:0; color:#2d6a4f; background:#e5f2e9; padding:1px 4px; border-radius:3px; font-size:10px; font-weight:400; }
.chat-thread-preview { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7b877e; font-size:12px; }
.chat-list-status { padding:12px 16px; color:#78857c; font-size:13px; overflow-wrap:anywhere; }
.chat-list-status:empty { display:none; }
.chat-list-more { margin:12px; padding:10px; border:1px solid #d7e2da; border-radius:6px; color:#2d6a4f; font-size:13px; }
.chat-center-empty { display:flex; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center; color:#849087; }
.chat-center-empty > svg { width:40px; height:40px; color:#a5b7aa; }
.chat-center-empty p { margin:0; font-size:14px; }
.chat-center-empty .btn-primary { width:auto; padding:10px 24px; }
.chat-center-empty button { color:#2d6a4f; text-decoration:underline; }
.chat-center-screen .chat-page-panel { position:static; display:flex; flex-direction:column; width:100%; height:100%; margin:0; border:0; border-radius:0; box-shadow:none; }
.chat-page-panel .customer-chat-header { min-height:72px; padding:12px 20px; background:#f7f9f7; color:#263d2f; border-bottom:1px solid #e0e7e1; }
.chat-page-panel .chat-heading p { color:#7a8b7f; }
.chat-page-panel .customer-chat-header .chat-agent-avatar { background:#e0ece3; }
.chat-page-panel .customer-chat-header [data-close] { color:#61766a; }
.chat-page-panel .customer-chat-tabs { flex-shrink:0; }
.chat-page-panel .customer-chat-message { max-width:900px; margin:0 auto 20px; }
.chat-page-panel .customer-chat-messages { padding:24px; }
.chat-page-panel .customer-chat-message p { max-width:min(75%,620px); }
.chat-thread-meta { display:flex; align-items:center; gap:12px; padding:8px 20px; min-height:34px; background:#fff; border-bottom:1px solid #e6ece7; font-size:12px; color:#859087; }
.chat-thread-meta a { margin-left:auto; color:#2d6a4f; }
.chat-page-panel form { padding:14px 20px; }
@media(min-width:700px) { .chat-page-panel [data-close] { display:none; } }
@media(max-width:999px) {
  .chat-center-screen .store-layout { height:calc(100% - 80px - env(safe-area-inset-bottom)); }
  .chat-center-screen.chat-input-focused .tabbar { display:none; }
  .chat-center-screen .store-layout { grid-template-columns:280px minmax(0,1fr); grid-template-rows:60px minmax(0,1fr); }
  .chat-center-screen .store-primary { grid-column:1/-1; grid-row:1; height:60px; }
  .chat-center-screen .store-layout .store-secondary { grid-column:1; grid-row:2; border-bottom:0; border-right:1px solid #dfe5e1; }
  .chat-center-screen .store-content { grid-column:2; grid-row:2; }
}
@media(max-width:699px) {
  .chat-center-screen .store-layout { grid-template-columns:minmax(0,1fr); }
  .chat-center-screen .store-content { display:none; grid-column:1; }
  .chat-thread-open .store-layout .store-secondary,.chat-guest .store-layout .store-secondary { display:none; }
  .chat-thread-open .store-content,.chat-guest .store-content { display:block; }
  .chat-page-panel .customer-chat-header { min-height:64px; padding:10px 12px; }
  .chat-page-panel .customer-chat-header [data-close] { order:-1; width:28px; }
  .chat-page-panel .customer-chat-messages { padding:18px 12px; }
  .chat-page-panel .customer-chat-message p { max-width:calc(100% - 46px); }
  .chat-page-panel .chat-agent-avatar { width:36px; height:36px; }
  .chat-page-panel form { flex-wrap:wrap; padding:10px 12px max(10px,env(safe-area-inset-bottom)); }
  .chat-page-panel textarea { width:auto; flex-basis:calc(100% - 58px); }
  .chat-page-panel .chat-voice { order:2; }
  .chat-thread-meta { padding:7px 12px; }
}