/* Product chat: 3d/akun/chat.php (member, inside site.css) and superuser/manage_chat.php (panel.css). */
.chat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 820px) { .chat-layout { grid-template-columns: 1fr; } .chat-list { order: 2; } }
.chat-list { display: grid; gap: 4px; padding: 18px; }
.chat-list h2 { font-size: 1.05rem; margin: 0 0 6px; }
.chat-list > a:not(.btn) { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border-radius: 10px; color: inherit; }
.chat-list > a:not(.btn):hover { background: rgba(0, 0, 0, .04); text-decoration: none; }
.chat-list > a.active { background: rgba(109, 40, 217, .1); }
.chat-list > a small { grid-column: 1 / -1; }
.chat-list .btn { margin-top: 8px; justify-self: start; }

.chat-box { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.chat-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; display: block; }
.chat-msgs { display: flex; flex-direction: column; gap: 10px; padding: 18px; height: min(60vh, 560px); overflow-y: auto; background: rgba(0, 0, 0, .02); }
.chat-box-admin .chat-msgs { height: min(64vh, 640px); }
.chat-msg { max-width: min(78%, 520px); padding: 10px 13px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); overflow-wrap: anywhere; }
.chat-msg p { margin: 0; white-space: normal; }
.chat-msg small { display: block; margin-top: 4px; font-size: .75rem; opacity: .65; }
.chat-mine { align-self: flex-end; background: #ede9fe; border-color: #ddd6fe; border-bottom-right-radius: 4px; }
.chat-theirs { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-img { display: block; margin-bottom: 6px; }
.chat-img img { display: block; max-width: 100%; height: auto; border-radius: 10px; background: rgba(0, 0, 0, .06); }
.chat-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; padding: 12px; border-top: 1px solid rgba(0, 0, 0, .08); background: #fff; }
.chat-form textarea { resize: vertical; min-height: 44px; max-height: 200px; width: 100%; }
.chat-attach { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer; color: #555; }
.chat-attach:hover { background: rgba(0, 0, 0, .04); }
.chat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.chat-file-note { grid-column: 1 / -1; margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* admin list */
.chat-threads { display: grid; }
.chat-thread { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1px solid rgba(0, 0, 0, .07); color: inherit; }
.chat-thread:hover { background: rgba(0, 0, 0, .03); text-decoration: none; }
.chat-thread.unread strong { color: #b91c1c; }
@media (max-width: 760px) { .chat-thread { grid-template-columns: 1fr; gap: 2px; } }

/* product page */
.ask-box { margin-top: 14px; padding: 14px 16px; border: 1px dashed rgba(0, 0, 0, .18); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ask-box p { margin: 0; }