/* ============================================================
   IFAD order chat — thread + composer. Storefront + wp-admin.
   Brand navy #0E0E31. Self-contained colours (no theme vars,
   so it also looks right inside the admin metabox).
   ============================================================ */

.ifad-chat { display: flex; flex-direction: column; border: 1px solid #eaeaf2; border-radius: 10px; background: #fff; overflow: hidden; }

.ifad-chat__thread {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 18px 6px;
	min-height: 220px;
	max-height: 460px;
	overflow-y: auto;
	background: #fafafd;
}
.ifad-chat-empty { margin: auto; color: #7f7faa; font-size: 14px; text-align: center; padding: 30px 10px; }

/* Message */
.ifad-chat-msg { display: flex; flex-direction: column; max-width: 78%; }
.ifad-chat-msg.is-self { align-self: flex-end; align-items: flex-end; }
.ifad-chat-msg.is-other { align-self: flex-start; align-items: flex-start; }
.ifad-chat-msg.role-system { align-self: center; align-items: center; max-width: 100%; }

.ifad-chat-msg__meta { display: flex; gap: 8px; align-items: baseline; margin: 0 4px 4px; font-size: 11.5px; color: #9a9ab0; }
.ifad-chat-msg__who { font-weight: 700; color: #6b6b86; }

.ifad-chat-msg__bubble {
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	background: #eef0f6;
	color: #0e0e31;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.ifad-chat-msg__bubble p { margin: 0 0 6px; }
.ifad-chat-msg__bubble p:last-child { margin: 0; }
.ifad-chat-msg.is-self .ifad-chat-msg__bubble { background: #0e0e31; color: #fff; border-bottom-right-radius: 4px; }
.ifad-chat-msg.is-other .ifad-chat-msg__bubble { border-bottom-left-radius: 4px; }
.ifad-chat-msg.role-system .ifad-chat-msg__bubble { background: transparent; color: #7f7faa; font-size: 12.5px; padding: 2px 8px; }

/* Attachments */
.ifad-chat-att { display: inline-flex; margin-top: 6px; }
.ifad-chat-att--img img { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; }
.ifad-chat-att--file { align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 255, 255, .16); color: inherit; font-size: 13px; font-weight: 600; text-decoration: none; }
.ifad-chat-msg.is-other .ifad-chat-att--file { background: #fff; color: #0e0e31; border: 1px solid #eaeaf2; }

/* Composer */
.ifad-chat__composer { border-top: 1px solid #eaeaf2; background: #fff; padding: 12px 14px 14px; }
.ifad-chat__input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #e5e5ea;
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	color: #0e0e31;
	resize: vertical;
	min-height: 44px;
}
.ifad-chat__input:focus { outline: none; border-color: #0e0e31; box-shadow: 0 0 0 3px rgba(14, 14, 49, .08); }
.ifad-chat__bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ifad-chat__attach { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e5e5ea; border-radius: 8px; color: #6b6b86; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.ifad-chat__attach:hover { color: #0e0e31; border-color: #0e0e31; }
.ifad-chat__filename { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #7f7faa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifad-chat__send {
	flex-shrink: 0;
	appearance: none;
	border: 1px solid #0e0e31;
	background: #0e0e31;
	color: #fff;
	border-radius: 8px;
	padding: 10px 24px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.ifad-chat__send:hover { background: #1b1b4d; }
.ifad-chat__send:disabled { opacity: .55; cursor: default; }

/* Storefront: the view-order Messages section wraps this — drop its own
   frame so the chat's border is the only one. */
.ifad-view-order-chat .ifad-chat { border: 0; }

/* Admin metabox tweaks — breathing room so nothing touches the box edges. */
#ifad_order_chat .inside { padding: 14px; box-sizing: border-box; }
#ifad_order_chat .ifad-chat { border-radius: 6px; }
#ifad_order_chat .ifad-chat__thread { padding: 16px 16px 4px; }
#ifad_order_chat .ifad-chat__composer { padding: 12px; }