/*
 * Team chat on orders + notifications center (bell, panel, list badge).
 * File: assets/css/ws-messages.css – enqueued by WS_Messages.
 */

/* ---------- Chat badge in order lists ---------- */
.ws-ui .ws-chatb { position: relative; border: 1px solid var(--ws-ln); background: #fff; color: var(--ws-ink); padding: 3px 8px; font: 500 12.5px var(--ws-b); line-height: 1.4; cursor: pointer; white-space: nowrap; border-radius: 0; }
.ws-ui .ws-chatb:hover { border-color: var(--ws-k); background: #fff; color: var(--ws-ink); }
.ws-ui .ws-chatb.ws-un { border-color: var(--ws-o); background: var(--ws-os); }
.ws-ui .ws-chatb i,
.ws-ui .ws-bell i { font-style: normal; position: absolute; top: -7px; inset-inline-end: -7px; background: var(--ws-o); color: #fff; font: 700 10px/16px var(--ws-b); min-width: 16px; height: 16px; border-radius: 8px; text-align: center; padding: 0 4px; box-sizing: border-box; }
.ws-ui .ws-bell i[hidden] { display: none; }

/* ---------- Bell in the management header ---------- */
.ws-adm-h-actions { display: inline-flex; align-items: center; gap: 10px; }
.ws-ui .ws-bell { position: relative; border: 1px solid #444; background: var(--ws-k2); color: #fff; width: 34px; height: 30px; padding: 0; cursor: pointer; font-size: 14px; line-height: 1; border-radius: 0; }
.ws-ui .ws-bell:hover, .ws-ui .ws-bell.ws-on { border-color: var(--ws-o); background: var(--ws-k2); color: #fff; }
.ws-ui .ws-bell:focus-visible { outline: 2px solid var(--ws-o); outline-offset: 2px; }

/* ---------- Notifications panel ---------- */
.ws-ui .ws-np-wrap { position: relative; height: 0; z-index: 60; }
.ws-ui .ws-np { position: absolute; top: 0; inset-inline-end: 16px; width: calc(100% - 32px); max-width: 420px; background: #fff; border: 1px solid var(--ws-ln); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); text-align: start; }
.ws-ui .ws-np[hidden] { display: none; }
.ws-ui .ws-np-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--ws-ln); font: 600 14px var(--ws-h); text-transform: uppercase; letter-spacing: .4px; }
[dir="rtl"] .ws-ui .ws-np-h, .ws-ui[dir="rtl"] .ws-np-h { text-transform: none; }
.ws-ui .ws-np-ha { display: flex; align-items: center; gap: 10px; font: 400 12.5px var(--ws-b); text-transform: none; letter-spacing: 0; }
.ws-ui .ws-np-x { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: #888; padding: 0 2px; }
.ws-ui .ws-np-x:hover { color: var(--ws-k); background: none; }
.ws-ui .ws-np-f { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--ws-ln); overflow-x: auto; scrollbar-width: none; }
.ws-ui .ws-np-f::-webkit-scrollbar { display: none; }
.ws-ui .ws-np-f button { font: 400 12px var(--ws-b); padding: 3px 9px; border: 1px solid var(--ws-ln); background: #fff; color: var(--ws-ink); white-space: nowrap; cursor: pointer; border-radius: 0; line-height: 1.4; }
.ws-ui .ws-np-f button:hover { border-color: var(--ws-k); background: #fff; color: var(--ws-ink); }
.ws-ui .ws-np-f button.ws-on { background: var(--ws-k); color: #fff; border-color: var(--ws-k); }
.ws-ui .ws-np-l { max-height: min(60vh, 460px); overflow-y: auto; }
.ws-ui a.ws-ni, .ws-ui a.ws-ni:visited { display: flex; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ws-ln); text-decoration: none; color: var(--ws-ink); align-items: flex-start; }
.ws-ui .ws-ni[hidden] { display: none; }
.ws-ui a.ws-ni:hover, .ws-ui a.ws-ni:focus { background: #FAFAFA; color: var(--ws-ink); text-decoration: none; }
.ws-ui a.ws-ni * { text-decoration: none; }
.ws-ui a.ws-ni.ws-un { background: var(--ws-os); }
.ws-ui .ws-ni-ic { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; background: #F2F2F2; font: 700 13px var(--ws-h); }
.ws-ui .ws-ni.ws-un .ws-ni-ic { background: var(--ws-o); color: #fff; }
.ws-ui .ws-ni-b { flex: 1; min-width: 0; }
.ws-ui .ws-ni-b b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ws-ink); }
.ws-ui .ws-ni-b small { display: block; color: var(--ws-mu); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-ui .ws-ni-t { font-size: 11.5px; color: var(--ws-mu); white-space: nowrap; }
.ws-ui .ws-np-empty, .ws-ui .ws-np-none { margin: 0; padding: 18px 12px; text-align: center; font-size: 13px; }
.ws-ui .ws-np-none[hidden] { display: none; }
.ws-ui .ws-np-s { padding: 9px 12px; font-size: 12px; }
.ws-ui .ws-np-s .ws-check { margin: 0; font-size: 12.5px; }

/* ---------- Team chat card ---------- */
.ws-ui .ws-chatc .ws-card-h small { font: 400 12px var(--ws-b); text-transform: none; letter-spacing: 0; color: var(--ws-mu); margin-inline-start: 6px; }
.ws-ui .ws-chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; max-height: 360px; overflow-y: auto; background: #FAFAFA; }
.ws-ui .ws-cm { display: flex; gap: 8px; align-items: flex-end; }
.ws-ui .ws-cm.ws-me { flex-direction: row-reverse; }
.ws-ui .ws-av { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--ws-k); color: #fff; display: grid; place-items: center; font: 600 12px var(--ws-h); }
.ws-ui .ws-cm.ws-me .ws-av { background: var(--ws-o); }
.ws-ui .ws-bub { background: #fff; border: 1px solid var(--ws-ln); padding: 8px 10px; max-width: 78%; min-width: 0; overflow-wrap: anywhere; }
.ws-ui .ws-cm.ws-me .ws-bub { background: var(--ws-os); border-color: #F5C9A0; }
.ws-ui .ws-bub b { font: 600 12px var(--ws-h); display: block; }
.ws-ui .ws-bub p { margin: 2px 0; font-size: 13.5px; line-height: 1.4; unicode-bidi: plaintext; text-align: start; }
.ws-ui .ws-bub p em { font-style: normal; color: var(--ws-o); font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.ws-ui .ws-bub small, .ws-ui .ws-cm.ws-sys small { font-size: 11px; color: var(--ws-mu); }
.ws-ui .ws-cm.ws-sys { flex-direction: column; align-items: center; gap: 0; font-size: 12px; color: var(--ws-mu); text-align: center; }
.ws-ui .ws-cm.ws-sys span { background: #EEE; padding: 3px 10px; }
.ws-ui .ws-chat-empty span { background: none; }
.ws-ui .ws-chat-in { padding: 10px 12px; border-top: 1px solid var(--ws-ln); background: #fff; margin: 0; }
.ws-ui .ws-chat-ta { position: relative; }
.ws-ui .ws-chat-in textarea.ws-input { height: 54px; min-height: 54px; width: 100%; box-sizing: border-box; }
.ws-ui .ws-chat-a { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.ws-ui .ws-chat-who { font-size: 12px; min-width: 0; }
.ws-ui .ws-chat-err { margin: 8px 0 0; }
.ws-ui .ws-chat-err[hidden] { display: none; }
.ws-ui .ws-chat-ac { position: absolute; inset-inline-start: 0; bottom: calc(100% + 2px); z-index: 20; margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid var(--ws-ln); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); min-width: 200px; max-width: 100%; }
.ws-ui .ws-chat-ac[hidden] { display: none; }
.ws-ui .ws-chat-ac li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; cursor: pointer; font-size: 13px; margin: 0; }
.ws-ui .ws-chat-ac li b { color: var(--ws-o); font-weight: 600; }
.ws-ui .ws-chat-ac li span { color: var(--ws-mu); font-size: 12px; }
.ws-ui .ws-chat-ac li.ws-on, .ws-ui .ws-chat-ac li:hover { background: var(--ws-os); }

@media (max-width: 700px) {
    .ws-adm-h-actions { gap: 8px; flex: 0 0 auto; }
    .ws-ui .ws-np { inset-inline: 8px; width: auto; max-width: none; }
    .ws-ui .ws-np-l { max-height: 65vh; }
    .ws-ui .ws-chat { max-height: none; padding: 12px; }
    .ws-ui .ws-bub { max-width: 84%; }
}