[data-chat-root] [hidden],[data-admin-chat-badge][hidden] { display: none !important; }

html:has(#shop-chat[open]) { overflow: hidden; }
.chat-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px,100%); height: 100dvh; max-width: 100%; max-height: 100dvh; padding: 0; border: 0; border-radius: 16px 0 0 16px; background: white; color: var(--ink); }
.chat-panel[open] { display: flex; flex-direction: column; }
.chat-panel::backdrop { background: #17382d73; }
.chat-heading { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.chat-heading h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--section-heading,19px); }
.chat-heading button { flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; }
.chat-notice { padding: 0 16px; color: #a22945; font-size: var(--text-body,14px); }
.chat-notice:not(:empty) { padding-top: 10px; padding-bottom: 10px; }
.chat-list { overflow-y: auto; min-height: 0; }
.chat-list>p { padding: 20px; }
.chat-list-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: white; color: var(--ink); text-align: left; padding: 16px; font-weight: 400; }
.chat-list-item:hover { background: var(--selected-surface,#f7f3ff); }
.chat-list-item>img { width: 44px; height: 54px; object-fit: contain; }
.chat-list-item>span { overflow-wrap: anywhere; min-width: 0; flex: 1; display: grid; gap: 5px; }
.chat-list-item small { color: var(--muted); font-size: var(--text-small,12px); }
.chat-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body,14px); }
.chat-unread { color: var(--accent); font-size: 11px; }
.chat-conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-conversation[hidden] { display: none; }
.chat-product { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--soft-surface,#f7f5fb); border-bottom: 1px solid var(--line); }
.chat-product>img { width: 48px; height: 60px; object-fit: contain; }
.chat-product>div { overflow-wrap: anywhere; display: grid; gap: 4px; min-width: 0; font-size: var(--text-body,14px); }
.chat-product small { color: var(--muted); font-size: var(--text-small,12px); }
.chat-product a { color: var(--accent); font-size: 13px; }
.chat-identify { padding: var(--card-padding,20px); overflow-y: auto; }
.chat-identify p { font-size: var(--text-body,14px); color: var(--muted); }
.chat-identify>button { width: 100%; }
.chat-phone { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.chat-phone>span { flex: 0 0 auto; padding-left: 12px; font-size: var(--text-control,16px); font-weight: 400; }
.chat-phone input { min-width: 0; width: 100%; border: 0; background: transparent; margin: 0; font-size: var(--text-control,16px); padding-left: 6px; }
.chat-phone input:focus { outline: none; box-shadow: none; }
.chat-phone:focus-within { outline: 2px solid var(--accent); }
.chat-messages { flex: 1; min-height: 80px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.chat-message { max-width: 90%; width: fit-content; background: var(--soft-surface,#f0edf7); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; overflow-wrap: anywhere; }
.chat-message.own { margin-left: auto; background: var(--selected-surface,#eadcff); }
.chat-message p { white-space: pre-wrap; margin: 5px 0; font-size: var(--text-body,14px); }
.chat-message small,.chat-message time { display: block; color: var(--muted); font-size: 11px; }
.chat-compose { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); margin: 0; }
.chat-compose[hidden] { display: none; }
.chat-compose textarea { flex: 1; min-width: 0; width: 0; height: 44px; min-height: 44px; resize: none; margin: 0; padding: 11px 4px; border: 0; border-radius: 0; background: transparent; font-size: var(--text-control,16px); line-height: 22px; box-shadow: none; }
.chat-compose textarea:focus { outline: none; box-shadow: none; }
.chat-compose-row>button { flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 10px; border-radius: 50%; }
.chat-compose-row>[data-chat-photo-add] { border: 0; background: transparent; }
.chat-compose-row>[data-chat-photo-add]:hover { background: var(--selected-surface,#eadcff); }
.chat-compose-row>button .icon { width: 22px; height: 22px; }
.chat-management { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.chat-management button { min-height: 36px; padding: 7px 12px; font-size: 13px; }
.chat-filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.chat-filters label { flex: 1; min-width: 150px; }
.admin-chat-columns { display: grid; grid-template-columns: minmax(220px,320px) minmax(0,1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: white; height: min(720px,80dvh); }
.admin-chat-columns>aside { overflow-y: auto; border-right: 1px solid var(--line); }
.admin-chat-columns .chat-list { overflow: visible; }
.product-chat-button { width: 100%; margin-top: 12px; }
.review-panel-content>.product-comment+ .product-comment { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
@media(max-width:760px) {
 .chat-panel { width: 100%; border-radius: 0; }
 .admin-chat-columns { grid-template-columns: 1fr; height: auto; }
 .admin-chat-columns>aside { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
 .admin-chat-columns .chat-conversation { height: 70dvh; }
}

.chat-panel.chat-keyboard .chat-product { max-height: 72px; overflow-y: auto; flex-shrink: 0; }
.chat-panel.chat-keyboard .chat-product>img { display: none; }
.chat-panel.chat-keyboard .chat-messages { min-height: 0; padding: 8px 16px; }

.chat-compose-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px; border: 1px solid var(--line); border-radius: 28px; background: var(--soft-surface,#f7f5fb); }
.chat-compose-row:focus-within { border-color: var(--accent); }
.chat-photo-draft { display: flex; align-items: center; gap: 8px; width: 100%; }
.chat-photo-draft>img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.chat-photo-draft>span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-small,12px); }
.chat-photo-draft>button { padding: 8px; width: var(--control-height,36px); height: var(--control-height,36px); }
.chat-message-photo { display: block; margin: 8px 0; }
.chat-message-photo img { display: block; width: 220px; max-width: 100%; height: 165px; object-fit: contain; border-radius: 8px; background: #fff; }

.chat-product { flex-shrink:0; max-height:150px; overflow-y:auto; }
.chat-scenario { overflow-y:auto; min-height:0; flex:1; padding:16px; }
.chat-scenario form { margin:0; }
.chat-scenario-heading { display:flex; align-items:center; gap:8px; }
.chat-scenario-heading h3 { flex:1; margin:0; font-size:18px; }
.chat-scenario-heading button { width:40px; height:40px; padding:8px; }
.chat-scenario label { font-size:14px; margin:12px 0; }
.chat-scenario input,.chat-scenario select,.chat-scenario textarea { width:100%; min-width:0; font-size:16px; }
.chat-form-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chat-scenario button[type="submit"] { width:100%; }
.chat-case-previews { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.chat-case-previews img { width:64px; height:64px; object-fit:cover; border-radius:8px; }
.chat-case-card { display:grid; gap:6px; min-width:0; padding-top:8px; border-top:1px solid var(--line); }
.chat-case-card>strong { font-size:14px; }
.chat-case-card p { margin:0; }
.chat-case-status { color:var(--accent); font-size:13px; font-weight:600; }
.chat-case-controls { display:grid; gap:8px; margin:8px 0 0; }
.chat-case-controls :is(input,select,textarea,button) { width:100%; min-width:0; font-size:14px; }
.chat-case-controls textarea { resize:vertical; }
@media(max-width:760px) {
 .chat-case-controls :is(input,select,textarea) { font-size:16px; }
}
.chat-message:has(.chat-case-card) { width:100%; max-width:100%; }

.chat-review-confirm { display:grid; gap:10px; margin-top:10px; }
.chat-review-confirm label { margin:0; font-size:13px; }
.chat-review-confirm :is(input,select,button) { width:100%; min-width:0; font-size:14px; }
.chat-review-confirm small { font-size:12px; }
.chat-inline-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chat-inline-actions button { min-height:40px; padding:8px 12px; font-size:14px; }
@media(max-width:760px) { .chat-review-confirm :is(input,select) { font-size:16px; } }

.chat-order-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.chat-order-search input { margin:0; }
.chat-order-search button { min-height:44px; padding:10px 14px; font-size:14px; }

/* Admin chat uses the same type and control scale as the order workspace. */
.admin-chats { font-size:12px; }
.admin-chats .chat-filters { gap:8px; margin-bottom:12px; }
.admin-chats .chat-filters :is(label,button) { margin:0; }
.admin-chats .chat-filters :is(input,select) { margin:6px 0 0; font-weight:400; }
.admin-chats :is(label,input,select,textarea,button,.chat-message,.chat-case-card>strong,.chat-case-status) { font-size:12px; }
.admin-chats :is(input,select) { min-height:32px; padding:6px 8px; }
.admin-chats :is(button,.chat-management button) { min-height:32px; padding:6px 10px; }
.admin-chats .chat-list-item { padding:10px; }
.admin-chats .chat-list-item :is(strong,.chat-snippet) { font-size:12px; }
.admin-chats :is(small,time) { font-size:11px; }
.admin-chats .chat-product :is(strong,h3) { font-size:14px; }
.admin-chats .chat-compose-row>button { width:36px; height:36px; min-height:36px; flex-basis:36px; padding:8px; }
.admin-chats .chat-compose textarea { height:36px; min-height:36px; padding:7px 4px; }
.admin-chats .chat-management { gap:6px; padding:8px; }