/* Messages (T31A/T31B): the menu badge (every portal page) and the Messages page (agents/messages.php). */
.p-chat-badge { display: inline-block; min-width: 18px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
.p-chat-badge[hidden], .p-chat-dot[hidden] { display: none; }
.p-burger { position: relative; }
.p-chat-dot { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #d92d20; box-shadow: 0 0 0 2px var(--card, #fff); }

.p-chat { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); height: min(72vh, 760px); min-height: 420px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius, 12px); overflow: hidden; }
.p-chat-list { border-right: 1px solid var(--line); overflow-y: auto; }
.p-chat-find { display: block; width: calc(100% - 20px); margin: 10px; min-height: 38px; }
.p-chat-none { padding: 16px; margin: 0; }
.p-chat-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.p-chat-item:hover { background: rgba(127, 140, 160, .08); }
.p-chat-item.on { background: rgba(127, 140, 160, .16); box-shadow: inset 3px 0 0 var(--cta); }
.p-chat-item.left { opacity: .7; }
.p-chat-item .avatar { flex: none; border-radius: 50%; object-fit: cover; }
.p-chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-chat-who strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-chat-who small { font-weight: 400; color: var(--muted); }
.p-chat-last { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-chat-item.unread .p-chat-last { color: var(--ink); font-weight: 600; }
.p-chat-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: .72rem; color: var(--muted); }
/* Muted chats (T31C): bell-off icon by the time, grey unread badge */
.p-chat-when { display: inline-flex; align-items: center; gap: 4px; }
.p-chat-muted { display: inline-flex; color: var(--muted); }
.p-chat-belloff { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-chat-item.muted .p-chat-badge { background: var(--muted); }
/* Groups (T31B): New group button, the group picture (two people, white on navy) */
.p-chat-tools { padding: 10px 10px 0; }
.p-chat-tools + .p-chat-none, .p-chat-tools + .p-chat-item { margin-top: 10px; border-top: 1px solid var(--line); }
.p-chat-gicon { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--navy, #1f4e79); }
.p-chat-gicon svg { width: 58%; height: 58%; fill: #fff; }

.p-chat-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.p-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.p-chat-head .avatar { border-radius: 50%; object-fit: cover; }
.p-chat-back { display: none; font-size: 1.4rem; line-height: 1; padding: 4px 8px 4px 0; text-decoration: none; color: var(--ink); }
.p-chat-empty { margin: auto; padding: 24px; text-align: center; }
.p-chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.p-chat-earlier { align-self: center; margin-bottom: 8px; }
.p-chat-day { align-self: center; margin: 10px 0 4px; padding: 2px 10px; border-radius: 999px; background: rgba(127, 140, 160, .14); color: var(--muted); font-size: .74rem; font-weight: 600; }
.p-chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.p-chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.p-chat-bubble { padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: rgba(127, 140, 160, .16); color: var(--ink); overflow-wrap: anywhere; white-space: normal; }
.p-chat-msg.mine .p-chat-bubble { border-radius: 16px 16px 4px 16px; background: var(--cta); color: #fff; }
.p-chat-msg.mine .p-chat-bubble a { color: #fff; }
.p-chat-msg time { font-size: .68rem; color: var(--muted); margin: 1px 6px 4px; }
.p-chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); margin: 0; }
.p-chat-form textarea { flex: 1; min-height: 44px; max-height: 160px; padding: 10px 12px; resize: none; font: inherit; font-size: 16px; line-height: 1.4; }
form.p-chat-form .p-btn { margin-top: 0; }
.p-chat-error { margin: 0; padding: 0 12px 10px; color: #b42318; font-size: .85rem; }
.p-chat-leftnote { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line); font-size: .88rem; }

/* Group thread: header, sender name + photo on the first message of a run, activity notes */
.p-chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.p-chat-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-chat-title small { font-size: .78rem; }
.p-chat-info { flex: none; margin-left: auto; font-size: .85rem; white-space: nowrap; }
/* Mute menu in the chat header (T31C): a <details> with buttons */
.p-chat-mute { position: relative; flex: none; margin-left: auto; font-size: .85rem; }
.p-chat-mute + .p-chat-info { margin-left: 0; }
.p-chat-mute summary { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; list-style: none; white-space: nowrap; }
.p-chat-mute summary::-webkit-details-marker { display: none; }
.p-chat-mute.muted summary { color: var(--muted); }
.p-chat-mute-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: flex; flex-direction: column; min-width: 200px; margin: 0; padding: 4px 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(15, 30, 50, .16); }
.p-chat-mute-menu button { padding: 9px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.p-chat-mute-menu button:hover, .p-chat-mute-menu button:focus-visible { background: rgba(127, 140, 160, .12); }
.p-chat-from { margin: 6px 0 2px 32px; font-size: .74rem; font-weight: 600; color: var(--muted); }
.p-chat-line { display: flex; gap: 8px; align-items: flex-start; min-width: 0; max-width: 100%; }
.p-chat-line .p-chat-bubble { min-width: 0; }
.p-chat-pic { flex: none; width: 24px; }
.p-chat-pic .avatar { display: block; border-radius: 50%; object-fit: cover; }
.p-chat-g time { margin-left: 38px; }
.p-chat-g.cont .p-chat-from { display: none; }
.p-chat-g.cont .p-chat-pic { visibility: hidden; height: 0; }
.p-chat-note { align-self: center; max-width: 90%; margin: 6px 0; padding: 0 10px; text-align: center; color: var(--muted); font-size: .76rem; font-style: italic; overflow-wrap: anywhere; }

/* Chat extras (T31D): Edit · Delete (shown on hover/focus, always on touch), "(edited)", deleted
   messages, read receipts, "is typing", the inline editor, and shared lead cards */
.p-chat-foot { display: flex; align-items: center; gap: 6px; margin: 1px 6px 4px; font-size: .68rem; color: var(--muted); }
.p-chat-msg .p-chat-foot time { margin: 0; }
.p-chat-g .p-chat-foot { margin-left: 38px; }
.p-chat-edited { font-style: italic; }
.p-chat-acts { opacity: 0; transition: opacity .15s; }
.p-chat-acts .p-link-btn { font-size: .7rem; }
.p-chat-msg:hover .p-chat-acts, .p-chat-msg:focus-within .p-chat-acts { opacity: 1; }
@media (hover: none) { .p-chat-acts { opacity: 1; } }
.p-chat-msg.deleted .p-chat-bubble, .p-chat-msg.mine.deleted .p-chat-bubble { background: none; border: 1px dashed var(--line); color: var(--muted); }
.p-chat-deleted { font-style: italic; font-size: .88rem; }
.p-chat-seen { align-self: flex-end; margin: -2px 6px 4px; font-size: .7rem; color: var(--muted); }
.p-chat-typing { margin: 0; padding: 4px 14px 0; font-size: .78rem; font-style: italic; color: var(--muted); }
.p-chat-typing[hidden] { display: none; }
.p-chat-editbox { display: flex; flex-direction: column; gap: 6px; width: min(300px, 64vw); }
.p-chat-editbox textarea { width: 100%; min-height: 60px; resize: vertical; font: inherit; font-size: 16px; }
.p-chat-editbox > span { display: flex; gap: 10px; align-items: center; }
.p-chat-editbox .p-btn { margin-top: 0; }
.p-chat-msg.mine .p-chat-editbox .p-link-btn { color: #fff; }
.p-chat-msg.mine .p-chat-editbox .p-btn-primary { background: #fff; border-color: #fff; color: var(--cta); }
/* Report (T31E): "Reported" by the time, and the small reason form under the message */
.p-chat-reported { font-weight: 600; }
.p-chat-reportbox { display: flex; flex-direction: column; gap: 6px; width: min(300px, 70vw); margin: 2px 0 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: .82rem; }
.p-chat-g .p-chat-reportbox { margin-left: 32px; }
.p-chat .p-chat-reportbox label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: normal; }
.p-chat-reportbox textarea { width: 100%; min-height: 56px; resize: vertical; font: inherit; font-size: 16px; font-weight: 400; }
.p-chat-reportbox small { color: var(--muted); }
.p-chat-reportbox .p-chat-reporterr { color: #b42318; }
.p-chat-reportbox > span { display: flex; gap: 10px; align-items: center; }
.p-chat-reportbox .p-btn { margin-top: 0; }
.p-chat-lead { display: flex; flex-direction: column; gap: 2px; min-width: 200px; max-width: 280px; padding: 8px 10px; border-left: 3px solid var(--navy, #1f4e79); border-radius: 10px; background: rgba(255, 255, 255, .55); color: var(--ink); font-size: .82rem; }
.p-chat-msg.mine .p-chat-lead { background: rgba(255, 255, 255, .9); }
.p-chat-lead strong { font-size: .92rem; }
.p-chat-lead small { font-size: .74rem; color: var(--muted); }
.p-chat-lead-tag { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.p-chat-lead a.p-chat-lead-open { margin-top: 2px; font-weight: 600; color: var(--navy-2, #1f4e79) !important; }
.p-chat-lead + .p-chat-text, .p-chat-lead + .p-chat-imgs, .p-chat-lead + .p-chat-file { margin-top: 6px; }
.p-chat-share-card { margin-bottom: 12px; }
.p-chat-share textarea { width: 100%; }
.p-chat-share-list .p-btn { margin-top: 0; }

/* New group and Group info panels (in the thread area) */
.p-chat-pane { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }
.p-chat-pane-back { margin: 0 0 10px; font-size: .88rem; }
.p-chat-pane-title { margin: 0 0 6px; font-size: 1.15rem; overflow-wrap: anywhere; }
.p-chat-pane-sub { margin: 18px 0 4px; font-size: .95rem; }
.p-chat-groupform label:first-of-type, .p-chat-rename > label { margin-top: 0; }
.p-chat-row { display: flex; gap: 8px; align-items: center; }
.p-chat-row input { flex: 1; min-width: 0; }
.p-chat-row .p-btn { margin-top: 0; }
.p-chat-picklist { margin-top: 14px; min-width: 0; }
.p-chat label.p-chat-pick { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .92rem; font-weight: 400; text-transform: none; letter-spacing: normal; cursor: pointer; } /* not the themes' uppercase form labels */
.p-chat-pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--navy-2); }
.p-chat-pick .avatar, .p-chat-people .avatar { flex: none; border-radius: 50%; object-fit: cover; }
.p-chat-pick span { min-width: 0; overflow-wrap: anywhere; }
.p-chat-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.p-chat-actions .p-btn { margin-top: 0; }
.p-chat-people { list-style: none; margin: 0; padding: 0; }
.p-chat-people li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.p-chat-people li.left { opacity: .7; }
.p-chat-people-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .92rem; }
.p-chat-people-name small { color: var(--muted); }
.p-chat-endzone { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.p-chat-danger { background: none; border-color: #e5a29b; color: #b42318; }
.p-chat-danger:hover { border-color: #d92d20; background: rgba(217, 45, 32, .08); }

.p-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Photos and files */
.p-chat-bubble:has(> .p-chat-imgs:only-child) { padding: 4px; background: none; }
.p-chat-imgs { display: flex; flex-wrap: wrap; gap: 4px; }
.p-chat-imgs + .p-chat-file, .p-chat-imgs + .p-chat-text, .p-chat-file + .p-chat-file, .p-chat-file + .p-chat-text { margin-top: 6px; }
.p-chat-img { display: block; line-height: 0; border-radius: 12px; overflow: hidden; background: rgba(127, 140, 160, .12); }
.p-chat-img img { display: block; max-width: min(240px, 60vw); height: auto; object-fit: cover; }
.p-chat-file { display: flex; gap: 10px; align-items: center; min-width: 200px; max-width: 280px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .55); color: var(--ink) !important; text-decoration: none; }
.p-chat-msg.mine .p-chat-file { background: rgba(255, 255, 255, .9); }
.p-chat-file > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.p-chat-file strong { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-chat-file small { font-size: .74rem; color: var(--muted); }
.p-chat-ext { flex: none; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--navy, #1f4e79); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .02em; }
.p-chat-form { flex-wrap: wrap; position: relative; }
.p-chat-attach { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); cursor: pointer; }
.p-chat-attach:hover, .p-chat-attach:focus-within { border-color: var(--cta); color: var(--cta); }
.p-chat-attach svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-chat-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.p-chat-picked { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.p-chat-picked[hidden] { display: none; }
.p-chat-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 6px; border: 1px solid var(--line); border-radius: 8px; font-size: .8rem; }
.p-chat-chip img { width: 32px; height: 32px; border-radius: 5px; object-fit: cover; }
.p-chat-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.p-chat-chip button { border: 0; background: none; font-size: 1.1rem; line-height: 1; padding: 2px 6px; color: var(--muted); cursor: pointer; }
.p-chat-thread.p-chat-drop { outline: 3px dashed var(--cta); outline-offset: -6px; }

@media (max-width: 759px) {
  .p-chat { grid-template-columns: 1fr; height: calc(100vh - 210px); height: calc(100dvh - 210px); min-height: 380px; }
  .p-chat-list { border-right: 0; }
  .p-chat.has-thread .p-chat-list, .p-chat:not(.has-thread) .p-chat-thread { display: none; }
  .p-chat-back { display: inline-block; }
  .p-chat-msg { max-width: 88%; }
}

/* Command Center sidebar icon (the other icons are in portal-command.css). */
@media (min-width: 1000px) {
  .pt-command .p-nav a[href^="messages"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
}

/* Who's online (T34): a green dot on the avatar, "Online" / "Last seen" lines, the Appear offline switch */
.p-chat-av { position: relative; flex: none; display: inline-flex; }
.p-chat-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 2px var(--card, #fff); display: none; }
.p-chat-av.is-online::after { display: block; }
.p-chat-av:not(.is-online) .p-sr { display: none; }
.p-chat-status { color: var(--muted); font-size: .78rem; }
.p-chat-status.is-on { color: #067647; font-weight: 600; }
.p-chat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.p-chat-me { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: .78rem; color: var(--muted); }
.p-chat-me-state { display: inline-flex; align-items: center; gap: 5px; }
.p-chat-me-state i { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; flex: none; }
.p-chat-me.is-hidden .p-chat-me-state i { background: #c3ccd8; }
.p-chat-me .p-link-btn { font-size: .78rem; }
.p-chat-me small { flex-basis: 100%; }