/**
 * 15 — Client portal · Messages re-skin
 * -----------------------------------------------------------------------------
 * Restyles the client Messages view (template-parts/portal/view-messages.php) to
 * match the Claude-Design mockup (project/"10 Messages.dc.html") while preserving
 * every functional hook: the inbox list (.msg-list/.msg-item/.msg-av/…), the
 * conversation thread (#finlaw-thread/.bubble.client|.firm/.bmeta), the compose
 * forms (#finlaw-msg-form/textarea[name=body]/.msg-matter-select/.finlaw-attach-*),
 * and the attachment chips emitted by finlaw_msg_attachment_chips().
 *
 * Auto-loaded after portal-redesign.css by finlaw_enqueue_redesign_partials().
 * Every rule is compound-scoped to `.portal-shell.portal-dash-body` so the shared
 * .msg-* / .bubble / .msg-compose components used by the FIRM messaging shell
 * (.portal-shell.firm-shell) are never touched. Uses existing theme tokens only.
 * ========================================================================== */

/* ---- Inbox rows -----------------------------------------------------------
   Circular avatar, read/unread states, red left-rail + count pill on unread. */
.portal-shell.portal-dash-body .msg-item {
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	border-left: 3px solid transparent;
}

.portal-shell.portal-dash-body .msg-av {
	width: 38px;
	height: 38px;
	background: var(--blue-pale);
	color: var(--blue);
}

.portal-shell.portal-dash-body .msg-item.unread {
	background: var(--blue-pale);
	border-left-color: var(--red);
}

.portal-shell.portal-dash-body .msg-item.unread:hover {
	background: var(--blue-pale);
}

.portal-shell.portal-dash-body .msg-item.unread .msg-av {
	background: var(--blue-ink);
	color: #fff;
}

.portal-shell.portal-dash-body .msg-name {
	font-size: 14px;
	color: var(--ink);
}

/* Unread indicator rendered as a red count pill (span keeps the .unread-dot
   hook + its aria-label). */
.portal-shell.portal-dash-body .unread-dot {
	width: auto;
	height: auto;
	min-width: 20px;
	margin-top: 0;
	padding: 2px 6px;
	border-radius: var(--r-pill);
	background: var(--red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	align-self: center;
}

/* ---- Conversation thread --------------------------------------------------
   Soft canvas, roomy gap; firm bubbles white/left, client bubbles pink/right. */
.portal-shell.portal-dash-body .msg-thread {
	gap: 16px;
	padding: 22px;
	background: var(--grey-50);
}

.portal-shell.portal-dash-body .bubble {
	max-width: 70%;
	padding: 14px 16px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

.portal-shell.portal-dash-body .bubble p {
	margin: 0;
}

.portal-shell.portal-dash-body .bubble p + p {
	margin-top: 8px;
}

.portal-shell.portal-dash-body .bubble.firm {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 16px 16px 16px 6px;
	box-shadow: var(--sh-1);
	color: var(--ink);
}

.portal-shell.portal-dash-body .bubble.client {
	align-self: flex-end;
	background: var(--red-pale);
	border: none;
	border-radius: 16px 16px 6px 16px;
	color: var(--ink);
}

.portal-shell.portal-dash-body .bubble .bmeta {
	margin-top: 6px;
	font-size: 12px;
	color: var(--mid);
}

.portal-shell.portal-dash-body .bubble.client .bmeta {
	color: var(--mid);
	text-align: right;
}

/* Cosmetic "Secure" affordance in the conversation head. */
.portal-shell.portal-dash-body .panel-head .msg-secure {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--green);
}

.portal-shell.portal-dash-body .panel-head .msg-secure svg {
	width: 13px;
	height: 13px;
}

/* ---- Attachment chips (inside client bubbles) -----------------------------
   Restyle finlaw_msg_attachment_chips() output into stacked bordered rows.
   Scoped to the client thread so the firm messaging chips keep their own look. */
.portal-shell.portal-dash-body .msg-thread .finlaw-attach-list {
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

.portal-shell.portal-dash-body .msg-thread .finlaw-attach-chip {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	gap: 8px;
	max-width: none;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 8px;
	font-weight: 500;
}

.portal-shell.portal-dash-body .msg-thread .finlaw-attach-chip:hover {
	border-color: var(--hair);
	background: var(--blue-pale);
	box-shadow: none;
}

.portal-shell.portal-dash-body .msg-thread .finlaw-attach-chip .finlaw-icon,
.portal-shell.portal-dash-body .msg-thread .finlaw-attach-chip svg {
	color: var(--blue);
}

.portal-shell.portal-dash-body .msg-thread .finlaw-attach-name {
	flex: 1;
	max-width: none;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
}

/* ---- Compose (thread reply + new message) ---------------------------------
   Full-width field(s) stacked, then a footer row: Attach (outlined, left) /
   Send (red, right). Achieved with wrap + margin-left:auto — no markup change. */
.portal-shell.portal-dash-body .msg-compose {
	align-items: center;
	gap: 10px;
	padding: 16px 22px;
}

.portal-shell.portal-dash-body .msg-compose .msg-matter-label {
	flex: 0 0 100%;
	margin-bottom: -2px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--blue-ink);
}

.portal-shell.portal-dash-body .msg-compose .msg-matter-select {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--hair);
	border-radius: var(--r-sm);
	font-size: 14px;
}

.portal-shell.portal-dash-body .msg-compose .msg-matter-select:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(38, 64, 141, .35);
}

.portal-shell.portal-dash-body .msg-compose textarea {
	flex: 0 0 100%;
	min-height: 60px;
	padding: 12px 13px;
	border: 1px solid var(--hair);
	border-radius: 8px;
	font-size: 14px;
}

.portal-shell.portal-dash-body .msg-compose textarea:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(38, 64, 141, .35);
}

/* Attach control → outlined button on the left of the footer row. */
.portal-shell.portal-dash-body .msg-compose .finlaw-attach-row {
	margin: 0;
}

.portal-shell.portal-dash-body .msg-compose .finlaw-attach-btn {
	padding: 8px 14px;
	font-size: 13px;
	color: var(--blue-ink);
	background: transparent;
	border: 1px solid var(--hair);
	border-radius: 7px;
}

.portal-shell.portal-dash-body .msg-compose .finlaw-attach-btn:hover {
	background: var(--blue-pale);
	border-color: var(--hair);
}

/* Send → red button pushed to the right edge of the footer row. */
.portal-shell.portal-dash-body .msg-compose button[type="submit"] {
	margin-left: auto;
	padding: 10px 20px;
	border-radius: 7px;
}