/* =============================================================
 * agro-messaging.css
 * Messaging redesign (FAZA 13.3) — /messages + header dropdown
 * Tokens: reuse --agro-* iz style.css (ne dupliraj)
 * Breakpoints: <=719 mobile, 720-1023 tablet, >=1024 desktop
 * ============================================================= */

/* =============================================================
 * 0. MESSAGING TOKENS (redesign specifični — baza u style.css)
 * ============================================================= */
:root {
	--agro-msg-bubble-radius: 16px;
	--agro-msg-bubble-sharp: 4px;
	--agro-msg-group-gap: 2px;
	--agro-msg-group-gap-lg: 14px;
	--agro-msg-me-bg: var(--agro-primary);
	--agro-msg-me-bg-dark: var(--agro-primary-dark);
	--agro-msg-me-text: #fff;
	--agro-msg-them-bg: var(--agro-surface-alt);
	--agro-msg-them-text: var(--agro-text);
	--agro-msg-pending-opacity: .55;
	--agro-msg-failed-bg: #fdecea;
	--agro-msg-failed-border: #c0392b;
	--agro-msg-failed-text: #8a1c15;
	--agro-msg-avatar-lg: 48px;
	--agro-msg-avatar-md: 40px;
	--agro-msg-avatar-sm: 28px;
	--agro-msg-online: var(--agro-success, #2e7d32);
	--agro-msg-header-height: 64px;
	--agro-msg-composer-min: 64px;
	/* Shell visinu na desktop-u kontrolise flex kolona (vidi .agro-messages-shell
	 * sekciju u 11. RESPONSIVE). Token ostaje kao 100% fallback za slucaj da se
	 * :has() ne podrzava ili se flex override ukine. */
	--agro-msg-shell-height: 100%;
	--agro-msg-safe-bottom: env(safe-area-inset-bottom, 0px);
	--agro-msg-entity-chip-bg: var(--agro-primary-bg, #eaf4ea);
	--agro-msg-entity-chip-border: var(--agro-primary-soft, #bcd8bd);
	--agro-msg-unread-pill-bg: var(--agro-accent);
	--agro-msg-unread-pill-text: #fff;
	--agro-msg-date-sep: var(--agro-text-muted);
}

/* ---------- Utility: sr-only i sr-live ---------- */
.agro-sr-only,
.agro-sr-live {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* =============================================================
 * 1. HEADER CHAT TOGGLE (ikonica u topbar-u)
 * ============================================================= */
.agro-chat-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	color: #ffffff;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.agro-chat-toggle:hover,
.agro-chat-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}
.agro-chat-toggle:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}
.agro-chat-toggle__icon {
	width: 22px;
	height: 22px;
	stroke: currentColor;
}
.agro-chat-toggle__badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--agro-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 9px;
	box-shadow: 0 0 0 2px var(--agro-surface);
}
.agro-chat-toggle__badge[hidden],
.agro-chat-toggle__badge--hidden { display: none; }

/* =============================================================
 * 2. HEADER DROPDOWN PANEL
 * ============================================================= */
.agro-chat-dropdown-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 360px;
	max-width: 95vw;
	max-height: 520px;
	display: none;
	flex-direction: column;
	background: var(--agro-surface-card);
	color: var(--agro-text);
	border: 1px solid var(--agro-border);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
	z-index: 1050;
	overflow: hidden;
}
.agro-chat-dropdown-panel.agro-panel-visible {
	display: flex;
}
.agro-chat-dropdown-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--agro-border);
	background: var(--agro-surface);
}
.agro-chat-dropdown-panel__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--agro-text);
}
.agro-chat-dropdown-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--agro-text-secondary);
	cursor: pointer;
	transition: background-color .15s ease;
}
.agro-chat-dropdown-panel__close:hover {
	background: var(--agro-surface-alt);
	color: var(--agro-text);
}
.agro-chat-dropdown-panel__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.agro-chat-dropdown-panel__footer {
	display: flex;
	justify-content: center;
	padding: 10px 16px;
	border-top: 1px solid var(--agro-border);
	background: var(--agro-surface);
}
.agro-chat-dropdown-panel__footer-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--agro-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.agro-chat-dropdown-panel__footer-link:hover,
.agro-chat-dropdown-panel__footer-link:focus-visible {
	color: var(--agro-primary-dark);
	text-decoration: underline;
}

/* =============================================================
 * 3. SEARCH BAR + TABS (uključeno u dropdown i /messages)
 * ============================================================= */
.agro-search-bar {
	padding: 12px 16px;
	background: var(--agro-surface);
	border-bottom: 1px solid var(--agro-border);
}
.agro-search-bar__field,
.agro-search-bar__search {
	position: relative;
	display: flex;
	align-items: center;
}
.agro-search-bar__icon {
	position: absolute;
	left: 12px;
	width: 16px;
	height: 16px;
	color: var(--agro-text-muted);
	pointer-events: none;
}
.agro-search-bar__input,
.agro-search-input {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px 8px 36px;
	background: var(--agro-surface-input);
	color: var(--agro-text);
	border: 1px solid var(--agro-border);
	border-radius: 10px;
	font-size: 14px;
	transition: border-color .15s ease, background-color .15s ease;
}
.agro-search-bar__input:focus,
.agro-search-input:focus {
	outline: none;
	border-color: var(--agro-primary);
	background: var(--agro-surface-card);
}
/* Segmented pill (Faza 13.1.3 Stepenica 9) — jedan zaobljen kontejner sa 4 segmenta.
   "Expand active" pattern — aktivan tab dobije vise prostora sa ikonom + labelom,
   neaktivni su collapsed na ikonu samo (sa title/aria-label za screen reader-e).
   Sidebar je uzak (320px desktop / 280px tablet), 4 puna labela ne staju bez
   truncation-a; ekspanzija aktivnog je cisce nego ellipsis na svima. */
.agro-conv-list__tabs {
	display: flex;
	gap: 2px;
	margin-top: 10px;
	padding: 3px;
	background: var(--agro-surface-input, #f3f2ea);
	border: 1px solid var(--agro-border);
	border-radius: 10px;
}
.agro-conv-list__tab {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 32px;
	padding: 4px 8px;
	background: transparent;
	color: var(--agro-text-muted);
	border: none;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: flex-grow .22s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .1s ease;
	overflow: hidden;
}
/* Expand-active: aktivni tab zauzme dodatni prostor da labela stane cisto. */
.agro-conv-list__tab--active {
	flex-grow: 2.2;
}
/* Neaktivni tabovi — samo ikona + count badge (labela skrivena). */
.agro-conv-list__tab:not(.agro-conv-list__tab--active) .agro-conv-list__tab-label {
	display: none;
}
.agro-conv-list__tab:hover {
	background: var(--agro-surface-card);
	color: var(--agro-text);
}
.agro-conv-list__tab:active {
	transform: scale(.97);
}
.agro-conv-list__tab--active,
.agro-conv-list__tab--active:hover {
	background: var(--agro-primary);
	color: #fff;
	box-shadow: 0 1px 4px rgba(46, 125, 50, .28);
}
.agro-conv-list__tab:focus-visible {
	outline: 2px solid var(--agro-primary-light);
	outline-offset: 2px;
}
.agro-conv-list__tab-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: currentColor;
}
.agro-conv-list__tab-label {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.agro-conv-list__tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--agro-danger, #c62828);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	border-radius: 9px;
	flex-shrink: 0;
	letter-spacing: .01em;
}
.agro-conv-list__tab--active .agro-conv-list__tab-count {
	/* Na zelenom active bg-u, crveni badge bi bio diskordantan — invertujemo. */
	background: #fff;
	color: var(--agro-danger, #c62828);
}

/* =============================================================
 * 4. CONVERSATION ITEM (deli dropdown i /messages listu)
 * ============================================================= */
.agro-conv-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	min-height: 72px;
	text-decoration: none;
	color: var(--agro-text);
	border-bottom: 1px solid var(--agro-border);
	transition: background-color .15s ease;
	cursor: pointer;
}
.agro-conv-item:hover,
.agro-conv-item:focus-visible {
	background: var(--agro-surface-alt);
	color: var(--agro-text);
	text-decoration: none;
}
.agro-conv-item:focus-visible {
	outline: 2px solid var(--agro-primary-light);
	outline-offset: -2px;
}
.agro-conv-item--active {
	background: var(--agro-primary-bg);
	box-shadow: inset 3px 0 0 var(--agro-primary);
}
.agro-conv-item__avatar {
	position: relative;
	width: var(--agro-msg-avatar-lg);
	height: var(--agro-msg-avatar-lg);
	flex-shrink: 0;
	border-radius: 50%;
	overflow: visible;
	background: var(--agro-surface-alt);
}
.agro-conv-item__avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
.agro-conv-item__online-dot {
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 12px;
	height: 12px;
	background: var(--agro-msg-online);
	border: 2px solid var(--agro-surface-card);
	border-radius: 50%;
}
.agro-conv-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.agro-conv-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.agro-conv-item__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--agro-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.agro-conv-item__time {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--agro-text-muted);
	font-variant-numeric: tabular-nums;
}
.agro-conv-item__preview {
	font-size: 13px;
	color: var(--agro-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 4px;
	line-height: 1.35;
}
.agro-conv-item__preview-prefix {
	color: var(--agro-text-muted);
	font-weight: 600;
	flex-shrink: 0;
}
.agro-conv-item__preview svg {
	flex-shrink: 0;
	color: var(--agro-text-muted);
}
.agro-conv-item__aside {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	min-width: 38px;
}
.agro-conv-item--unread .agro-conv-item__name,
.agro-conv-item--unread .agro-conv-item__preview {
	color: var(--agro-text);
	font-weight: 700;
}
.agro-conv-item--unread .agro-conv-item__time {
	color: var(--agro-primary-dark);
	font-weight: 700;
}

/* Stepenica 7 — sidebar polling update indikator. Tanka linija na levoj ivici +
   blagi pulsing glow 2s, dok korisnik ne klikne item (tada se skida JS-om pri
   navigaciji) ili dok ne osveži stranicu. */
.agro-conv-item--updated {
	position: relative;
}
.agro-conv-item--updated::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 2px 2px 0;
	background: var(--agro-primary, #4a9d3e);
	animation: agroConvUpdatedPulse 2s ease-out 1;
}
@keyframes agroConvUpdatedPulse {
	0%   { opacity: 0; transform: translateX(-3px); }
	30%  { opacity: 1; transform: translateX(0); }
	100% { opacity: 0.85; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.agro-conv-item--updated::before { animation: none; }
}
.agro-conv-item__unread-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--agro-msg-unread-pill-bg);
	color: var(--agro-msg-unread-pill-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}
.agro-conv-item__unread-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	background: var(--agro-accent);
	border-radius: 50%;
}

/* =============================================================
 * 5. /messages SHELL — dvokolonski layout
 * ============================================================= */
.agro-messages-shell {
	display: grid;
	grid-template-columns: 320px 1fr;
	/* Explicit row `1fr` sprecava grid-item (.agro-conv-thread) da raste preko
	   kontejnerove visine — bez ovoga row je `auto` (sizes to max content) i
	   thread gura composer dole kad se poruke gomilaju. */
	grid-template-rows: 1fr;
	height: 100%;
	min-height: 0;
	background: var(--agro-surface);
	color: var(--agro-text);
	border: 1px solid var(--agro-border);
	border-radius: 14px;
	overflow: hidden;
}
.agro-conv-list {
	display: flex;
	flex-direction: column;
	background: var(--agro-surface-card);
	border-right: 1px solid var(--agro-border);
	min-width: 0;
	min-height: 0;
}
.agro-conv-list__body {
	flex: 1 1 auto;
	overflow-y: auto;
}
.agro-conv-list__panel {
	display: none;
}
.agro-conv-list__panel--visible {
	display: block;
}
.agro-conv-thread {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* min-height:0 omogucava da flex-item .agro-conv-thread__messages moze da se
	   skupi ispod svoje sadrzajne visine i aktivira `overflow-y: auto` umesto
	   da gura composer niže. Flexbox default min-height je `auto` (content-sized). */
	min-height: 0;
	overflow: hidden;
	background: var(--agro-surface);
}

/* =============================================================
 * 6. THREAD HEADER (sticky sa akcijama)
 * ============================================================= */
.agro-conv-thread__empty {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}
/* FAZA 13.4 fix — header + pin wrap kao "fixed top region" thread-a.
 * Bez sticky positioning-a (sticky u flex column sa overflow:hidden parent
 * pravi overlap sa messages-om). Pošto je .agro-conv-thread__messages svoj
 * scroll container (overflow-y: auto), header + pin su prirodno fixed na
 * vrhu thread sekcije — ne pomeraju se kad korisnik scroll-uje thread.
 *
 * NEMA z-index: navbar je position:sticky sa z:1030 i pravi sopstveni
 * stacking context za svoje dropdown-e (Poruke, Obaveštenja). Ako sticky-top
 * dobije veći z-index, ta dva stacking context-a se takmiče i sticky-top
 * preklapa navbar dropdown-e na desnoj strani — vidi screenshot iz buga
 * 2026-04-25. Bez z-indexa, sticky-top je u prirodnom flow-u i dropdown-i
 * se renderuju iznad njega normalno. */
.agro-conv-thread__sticky-top {
	background: var(--agro-surface-card);
	flex-shrink: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.agro-conv-thread__header {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var(--agro-msg-header-height);
	padding: 10px 16px;
	background: var(--agro-surface-card);
	border-bottom: 1px solid var(--agro-border);
	backdrop-filter: saturate(1.1);
}
.agro-conv-thread__back {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--agro-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .15s ease;
	cursor: pointer;
}
.agro-conv-thread__back:hover,
.agro-conv-thread__back:focus-visible {
	background: var(--agro-surface-alt);
	color: var(--agro-text);
	text-decoration: none;
}
.agro-conv-thread__header-avatar {
	position: relative;
	width: var(--agro-msg-avatar-md);
	height: var(--agro-msg-avatar-md);
	flex-shrink: 0;
	border-radius: 50%;
	overflow: visible;
	background: var(--agro-surface-alt);
}
.agro-conv-thread__header-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
.agro-conv-thread__header-online-dot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 11px;
	height: 11px;
	background: var(--agro-msg-online);
	border: 2px solid var(--agro-surface-card);
	border-radius: 50%;
}
.agro-conv-thread__header-body {
	min-width: 0;
	flex: 1 1 auto;
}
.agro-conv-thread__header-name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--agro-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--agro-font-heading, inherit);
	letter-spacing: -.005em;
}
.agro-conv-thread__header-status {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--agro-text-muted);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.agro-conv-thread__header-status--online {
	color: var(--agro-msg-online);
	font-weight: 600;
}
.agro-conv-thread__header-status--online::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--agro-msg-online);
	flex-shrink: 0;
}
.agro-conv-thread__header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.agro-conv-thread__header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	color: var(--agro-text-secondary);
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.agro-conv-thread__header-action:hover,
.agro-conv-thread__header-action:focus-visible {
	background: var(--agro-surface-alt);
	color: var(--agro-text);
}
.agro-conv-thread__header-action:focus-visible {
	outline: 2px solid var(--agro-primary-light);
	outline-offset: 2px;
}

/* =============================================================
 * 7. MESSAGE LIST + BUBBLES (grupisanje + stanja)
 * ============================================================= */
.agro-conv-thread__messages {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-anchor: none;
	padding: 16px 16px calc(16px + var(--agro-msg-safe-bottom));
	display: flex;
	flex-direction: column;
	gap: var(--agro-msg-group-gap);
	background: var(--agro-surface);
	scroll-behavior: smooth;
}

/* --- Datum separator --- */
.agro-msg-day-sep {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 6px;
	padding: 4px 14px;
	background: var(--agro-surface-card);
	border: 1px solid var(--agro-border);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	color: var(--agro-msg-date-sep);
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* --- Osnovni bubble --- */
.agro-msg-bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 72%;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 1.45;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	border-radius: var(--agro-msg-bubble-radius);
	transition: opacity .18s ease, box-shadow .18s ease;
}

/* --- Grupisanje: pozicija u grupi diktira radijuse i gap --- */
.agro-msg-bubble + .agro-msg-bubble { margin-top: var(--agro-msg-group-gap); }
.agro-msg-bubble--group-start { margin-top: var(--agro-msg-group-gap-lg); }
.agro-msg-bubble--group-start:first-child { margin-top: 0; }

.agro-msg-bubble--me {
	align-self: flex-end;
	background: var(--agro-msg-me-bg);
	color: var(--agro-msg-me-text);
}
.agro-msg-bubble--me.agro-msg-bubble--group-single,
.agro-msg-bubble--me.agro-msg-bubble--group-end {
	border-radius: var(--agro-msg-bubble-radius) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-radius);
}
.agro-msg-bubble--me.agro-msg-bubble--group-start {
	border-radius: var(--agro-msg-bubble-radius) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-radius);
}
.agro-msg-bubble--me.agro-msg-bubble--group-middle {
	border-radius: var(--agro-msg-bubble-radius) var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-radius);
}
.agro-msg-bubble--me.agro-msg-bubble--group-end {
	border-radius: var(--agro-msg-bubble-radius) var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-radius);
}

.agro-msg-bubble--them {
	align-self: flex-start;
	background: var(--agro-msg-them-bg);
	color: var(--agro-msg-them-text);
}
.agro-msg-bubble--them.agro-msg-bubble--group-single,
.agro-msg-bubble--them.agro-msg-bubble--group-start {
	border-radius: var(--agro-msg-bubble-radius) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-sharp);
}
.agro-msg-bubble--them.agro-msg-bubble--group-middle {
	border-radius: var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-sharp);
}
.agro-msg-bubble--them.agro-msg-bubble--group-end {
	border-radius: var(--agro-msg-bubble-sharp) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-radius) var(--agro-msg-bubble-radius);
}

/* --- Sender (za them, samo na prvom u grupi) --- */
.agro-msg-bubble__sender {
	font-size: 11px;
	font-weight: 700;
	color: var(--agro-primary-dark);
	margin-bottom: 4px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.agro-msg-bubble--group-middle .agro-msg-bubble__sender,
.agro-msg-bubble--group-end .agro-msg-bubble__sender {
	display: none;
}
.agro-msg-bubble__sender-avatar {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	object-fit: cover;
}
.agro-msg-bubble__sender--inactive::after,
.agro-msg-bubble__sender-inactive {
	color: var(--agro-text-muted);
	font-weight: 400;
	margin-left: 3px;
	font-size: 10px;
}

/* --- Tekst + media --- */
.agro-msg-bubble__text {
	color: inherit;
	white-space: pre-wrap;
	word-break: break-word;
}
.agro-msg-bubble__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.agro-msg-bubble--me .agro-msg-bubble__text a { color: #fff; }
.agro-msg-bubble__media {
	margin-top: 6px;
	border-radius: 10px;
	overflow: hidden;
}
.agro-msg-bubble__media img,
.agro-msg-bubble__image {
	max-width: 100%;
	max-height: 360px;
	border-radius: 10px;
	display: block;
	cursor: zoom-in;
}
.agro-msg-bubble__media-file,
.agro-msg-bubble__file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(255,255,255,.18);
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}
.agro-msg-bubble--them .agro-msg-bubble__file {
	background: rgba(26, 46, 26, .06);
}

/* --- Meta: vreme + status --- */
.agro-msg-bubble__footer,
.agro-msg-bubble__meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	margin-top: 4px;
	font-size: 10.5px;
	opacity: .82;
	font-variant-numeric: tabular-nums;
}
.agro-msg-bubble--group-start .agro-msg-bubble__meta,
.agro-msg-bubble--group-middle .agro-msg-bubble__meta {
	display: none;
}
.agro-msg-bubble__time { color: inherit; }
.agro-msg-bubble__status svg {
	width: 14px;
	height: 14px;
}
.agro-msg-bubble__status--seen { color: inherit; opacity: 1; }

/* --- Stanje: pending (optimistic) --- */
.agro-msg-bubble--pending {
	opacity: var(--agro-msg-pending-opacity);
}
.agro-msg-bubble--pending .agro-msg-bubble__status svg {
	animation: agroSpin 1s linear infinite;
}
@keyframes agroSpin {
	to { transform: rotate(360deg); }
}

/* --- Stanje: failed (send error + retry) --- */
.agro-msg-bubble--failed {
	background: var(--agro-msg-failed-bg);
	color: var(--agro-msg-failed-text);
	border: 1px solid var(--agro-msg-failed-border);
	box-shadow: none;
}
.agro-msg-bubble--failed .agro-msg-bubble__text { color: var(--agro-msg-failed-text); }
.agro-msg-bubble__retry {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	padding: 4px 10px;
	background: var(--agro-msg-failed-border);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.agro-msg-bubble__retry:hover { background: #9a1610; }
.agro-msg-bubble__retry:focus-visible {
	outline: 2px solid #c0392b;
	outline-offset: 2px;
}

/* --- New message toast (kad ne gledamo dno) --- */
.agro-msg-new-toast {
	position: absolute;
	left: 50%;
	bottom: calc(var(--agro-msg-composer-min) + 16px + var(--agro-msg-safe-bottom));
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--agro-primary);
	color: #fff;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(46,125,50,.35);
	cursor: pointer;
	border: none;
	z-index: 6;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.agro-msg-new-toast--visible {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.agro-msg-new-toast:hover { background: var(--agro-primary-dark); }
.agro-msg-new-toast:focus-visible {
	outline: 2px solid var(--agro-primary-light);
	outline-offset: 2px;
}

/* =============================================================
 * 8. COMPOSER (entity chip primary + large send)
 * ============================================================= */
.agro-composer {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 16px calc(12px + var(--agro-msg-safe-bottom));
	background: var(--agro-surface-card);
	border-top: 1px solid var(--agro-border);
}
/* Composer entity switch — kompaktan pill, isti dizajn-jezik kao D6 lock chip. */
.agro-composer__entity-switch {
	position: relative;
	display: inline-flex;
	align-self: flex-start;
	max-width: 100%;
}
/* FAZA 13.3 — kad je composer u lock-chip stanju (preset locked), dropdown
 * wrapper se renderuje pored chip-a sa hidden atributom. Eksplicitan
 * display:none jer inline-flex overriduje native [hidden] selector. */
.agro-composer__entity-switch[hidden] { display: none !important; }
.agro-composer__lock-chip[hidden] { display: none !important; }
.agro-composer__entity-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-height: 32px;
	padding: 4px 10px 4px 4px;
	background: var(--agro-msg-entity-chip-bg, #eaf4ea);
	color: var(--agro-primary-dark, #1b5e20);
	border: 1px solid var(--agro-msg-entity-chip-border, #bcd8bd);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.agro-composer__entity-btn:hover,
.agro-composer__entity-btn:focus-visible {
	background: var(--agro-primary-bg, #dceedc);
	border-color: var(--agro-primary, #3f7d3f);
	box-shadow: 0 1px 4px rgba(46, 125, 50, .14);
	outline: none;
}
.agro-composer__entity-btn[aria-expanded="true"] {
	background: var(--agro-primary-bg, #dceedc);
	border-color: var(--agro-primary, #3f7d3f);
}
.agro-composer__entity-btn[aria-expanded="true"] .agro-composer__entity-chevron {
	transform: rotate(180deg);
}
.agro-composer__entity-btn[disabled],
.agro-composer__entity-btn[aria-busy="true"] {
	opacity: .6;
	cursor: wait;
}
.agro-composer__entity-avatar {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--agro-surface-alt, #f3f3f3);
}
.agro-composer__entity-avatar--placeholder {
	display: inline-block;
	background: linear-gradient(135deg, var(--agro-primary-bg, #dceedc), var(--agro-msg-entity-chip-border, #bcd8bd));
}
.agro-composer__entity-btn-body {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	flex: 0 1 auto;
}
.agro-composer__entity-prefix {
	font-size: 11px;
	font-weight: 500;
	color: var(--agro-text-muted, #666);
	letter-spacing: .01em;
	flex-shrink: 0;
}
.agro-composer__entity-btn-name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
.agro-composer__entity-tier-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	background: var(--agro-primary, #3f7d3f);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 999px;
	flex-shrink: 0;
}
.agro-composer__entity-btn[data-tier="firma"] .agro-composer__entity-tier-badge {
	background: #3367a1;
}
.agro-composer__entity-btn[data-tier="user"] .agro-composer__entity-tier-badge {
	background: var(--agro-text-muted, #666);
}
.agro-composer__entity-chevron {
	flex: 0 0 auto;
	color: var(--agro-text-muted, #666);
	transition: transform .2s ease;
}
.agro-composer__entity-panel {
	position: absolute;
	/* Panel se otvara NAGORE — composer sedi na dnu viewport-a, dropdown na dole bi
	   bio otresen ispod ekrana. */
	bottom: calc(100% + 6px);
	top: auto;
	left: 0;
	min-width: 220px;
	max-width: min(320px, 100vw - 24px);
	max-height: 280px;
	padding: 6px;
	background: var(--agro-surface-card, #fff);
	border: 1px solid var(--agro-border, #e0e0e0);
	border-radius: 12px;
	box-shadow: 0 -8px 28px rgba(0, 0, 0, .14);
	overflow-y: auto;
	z-index: 30;
	animation: agro-entity-panel-in .16s ease-out;
}
.agro-composer__entity-panel[hidden] {
	display: none;
}
@keyframes agro-entity-panel-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.agro-composer__entity-panel-head {
	padding: 6px 10px 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--agro-text-muted, #666);
}
.agro-composer__entity-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.agro-composer__entity-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
	color: var(--agro-text, #222);
	font-size: 13px;
	transition: background-color .12s ease;
}
.agro-composer__entity-option:hover,
.agro-composer__entity-option:focus-visible {
	background: var(--agro-surface-alt, #f3f3f3);
	outline: none;
}
.agro-composer__entity-option--selected {
	background: var(--agro-primary-bg, #dceedc);
	color: var(--agro-primary-dark, #1b5e20);
}
.agro-composer__entity-option-avatar {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--agro-surface-alt, #f3f3f3);
}
.agro-composer__entity-option-avatar--placeholder {
	display: inline-block;
	background: linear-gradient(135deg, var(--agro-primary-bg, #dceedc), var(--agro-msg-entity-chip-border, #bcd8bd));
}
.agro-composer__entity-option-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.agro-composer__entity-option-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}
.agro-composer__entity-option-type {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--agro-text-muted, #666);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.agro-composer__entity-option--selected .agro-composer__entity-option-type {
	color: var(--agro-primary-dark, #1b5e20);
}
.agro-composer__entity-option-check {
	flex: 0 0 auto;
	color: var(--agro-primary, #3f7d3f);
	opacity: 0;
	transition: opacity .15s ease;
}
.agro-composer__entity-option--selected .agro-composer__entity-option-check {
	opacity: 1;
}

.agro-composer__input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	background: var(--agro-surface-input, var(--agro-surface-alt));
	border: 1px solid var(--agro-border);
	border-radius: 16px;
	padding: 4px 6px 4px 4px;
	transition: border-color .15s ease, box-shadow .15s ease;
	min-height: var(--agro-msg-composer-min);
}
.agro-composer__input-row:focus-within {
	border-color: var(--agro-primary);
	box-shadow: 0 0 0 3px rgba(46,125,50,.12);
	background: var(--agro-surface-card);
}
.agro-composer__textarea {
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 180px;
	padding: 11px 8px;
	background: transparent;
	color: var(--agro-text);
	border: none;
	border-radius: 0;
	font-size: 14.5px;
	line-height: 1.45;
	resize: none;
	font-family: inherit;
}
.agro-composer__textarea:focus {
	outline: none;
}
.agro-composer__textarea::placeholder {
	color: var(--agro-text-muted);
}
.agro-composer__textarea:disabled {
	color: var(--agro-text-muted);
	cursor: not-allowed;
}
.agro-composer__attach,
.agro-composer__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 10px;
	color: var(--agro-text-secondary);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, transform .1s ease;
	align-self: flex-end;
	flex-shrink: 0;
}
.agro-composer__attach:hover {
	background: var(--agro-surface-alt);
	color: var(--agro-text);
}
.agro-composer__send {
	background: var(--agro-primary);
	color: #fff;
	border-radius: 50%;
	margin-bottom: 2px;
}
.agro-composer__send:hover:not(:disabled) {
	background: var(--agro-primary-dark);
	transform: scale(1.05);
}
.agro-composer__send:active:not(:disabled) {
	transform: scale(.95);
}
.agro-composer__send:disabled,
.agro-composer__attach:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.agro-composer__attach:focus-visible,
.agro-composer__send:focus-visible {
	outline: 2px solid var(--agro-primary-light);
	outline-offset: 2px;
}

.agro-composer__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 14px;
	padding: 0 4px;
}
.agro-composer__hint {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 6px;
	font-size: 11px;
	color: var(--agro-text-muted);
	letter-spacing: .01em;
	line-height: 1.5;
}
.agro-composer__hint kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	background: var(--agro-surface-alt);
	border: 0;
	border-radius: 5px;
	font-size: 10.5px;
	font-family: inherit;
	font-weight: 600;
	line-height: 1;
	color: var(--agro-text-secondary);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
	letter-spacing: .03em;
}
.agro-composer__limit-counter {
	font-size: 12px;
	color: var(--agro-text-muted);
	text-align: right;
	margin-left: auto;
}
.agro-composer__limit-counter--low {
	color: var(--agro-warning);
	font-weight: 600;
}
.agro-composer__limit-counter--exhausted {
	color: var(--agro-danger);
	font-weight: 700;
}

/* Attachment preview chip — prikazan iznad composer input-a kada je fajl izabran */
.agro-composer__attach-preview {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin: 0 4px 8px;
	padding: 6px 8px 6px 10px;
	background: var(--agro-primary-bg, #eaf4ea);
	border: 1px solid var(--agro-primary-soft, #bcd8bd);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--agro-primary-dark, #2d5a2d);
}
.agro-composer__attach-preview[hidden] {
	display: none;
}
.agro-composer__attach-preview-icon {
	flex: 0 0 auto;
	color: var(--agro-primary, #3f7d3f);
}
.agro-composer__attach-preview-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.agro-composer__attach-preview-remove {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--agro-primary-dark, #2d5a2d);
	cursor: pointer;
	transition: background-color .15s ease;
}
.agro-composer__attach-preview-remove:hover,
.agro-composer__attach-preview-remove:focus-visible {
	background: rgba(45, 90, 45, .12);
	outline: none;
}

/* =============================================================
 * 9. LIMIT TEASER (modal za free 5/5)
 * ============================================================= */
.agro-chat-limit-teaser-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 46, 26, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 1200;
}
.agro-chat-limit-teaser {
	width: 100%;
	max-width: 420px;
	background: var(--agro-surface-card);
	color: var(--agro-text);
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(0,0,0,.28);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.agro-chat-limit-teaser__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	background: var(--agro-primary-bg);
	border-bottom: 1px solid var(--agro-primary-soft);
}
.agro-chat-limit-teaser__icon {
	width: 32px;
	height: 32px;
	color: var(--agro-accent);
	flex-shrink: 0;
}
.agro-chat-limit-teaser__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--agro-primary-dark);
}
.agro-chat-limit-teaser__body {
	padding: 18px 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--agro-text-secondary);
}
.agro-chat-limit-teaser__body p {
	margin: 0 0 8px;
}
.agro-chat-limit-teaser__body p:last-child {
	margin-bottom: 0;
}
.agro-chat-limit-teaser__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	padding: 12px 20px 16px;
	border-top: 1px solid var(--agro-border);
	background: var(--agro-surface);
}
.agro-chat-limit-teaser__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.agro-chat-limit-teaser__btn--primary {
	background: var(--agro-accent);
	color: #fff;
	border-color: var(--agro-accent);
}
.agro-chat-limit-teaser__btn--primary:hover,
.agro-chat-limit-teaser__btn--primary:focus-visible {
	background: var(--agro-accent-hover);
	border-color: var(--agro-accent-hover);
	color: #fff;
	text-decoration: none;
}
.agro-chat-limit-teaser__btn--secondary {
	background: transparent;
	color: var(--agro-text-secondary);
	border-color: var(--agro-border);
}
.agro-chat-limit-teaser__btn--secondary:hover,
.agro-chat-limit-teaser__btn--secondary:focus-visible {
	background: var(--agro-surface-alt);
	color: var(--agro-text);
}
.agro-chat-limit-teaser__btn:focus-visible {
	outline: 2px solid var(--agro-primary-light);
	outline-offset: 2px;
}

/* =============================================================
 * 10. EMPTY STATE
 * ============================================================= */
.agro-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 16px;
	color: var(--agro-text-secondary);
}
.agro-empty-state__icon {
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	color: var(--agro-primary-light);
	opacity: .7;
}
.agro-empty-state__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--agro-text);
}
.agro-empty-state__message,
.agro-empty-state__body {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--agro-text-muted);
	max-width: 320px;
}
.agro-empty-state--dropdown {
	padding: 24px 16px;
}

/* =============================================================
 * 11. RESPONSIVE
 * ============================================================= */

/* -------------------------------------------------------------
 * Flex-column chain: body -> content-container -> #contnet -> shell
 *
 * Umesto da racunamo `calc(100vh - headerH)`, pravimo body flex
 * kolonu i puštamo shell da uzme preostali prostor. Otporno je na
 * promene visine headera (fixed ili u flow-u) i izbegava belu
 * traku ispod body-ja (html > body visina).
 *
 * Scope: `:has(.agro-messages-shell)` — ne dira druge stranice.
 * ------------------------------------------------------------- */
html:has(.agro-messages-shell),
body:has(.agro-messages-shell) {
	/* Bounded viewport visina — shell ne sme da raste dole sa rastom thread-a.
	   Umesto `min-height: 100vh` (page-level scroll, gura composer), koristimo
	   fiksnu visinu + overflow:hidden; interni scroll zivi u .agro-conv-thread__messages. */
	height: 100vh;
	margin: 0;
	overflow: hidden;
}

body:has(.agro-messages-shell) {
	display: flex;
	flex-direction: column;
	background: var(--agro-surface, #fbfaf6);
	/* Default desktop padding 0 — bottom-nav nije vidljiv na desktop-u */
	padding-bottom: 0;
}

/* Mobile: bottom-nav je fixed 64px na dnu — shell ne sme da bude pokriven.
   Smanjujemo html+body visinu za bottom-nav + safe-area, pa composer ostaje
   iznad nav-a. Body flex column fills tu smanjenu visinu. */
@media (max-width: 991px) {
	html:has(.agro-messages-shell),
	body:has(.agro-messages-shell) {
		height: calc(100vh - 64px - env(safe-area-inset-bottom, 0px)) !important;
	}
}

body:has(.agro-messages-shell) > .header-container {
	flex: 0 0 auto;
}

/* FAZA 13.4 fix — WoWonder navbar je default position:fixed sa z-index:1030.
 * Kad messages stranica koristi flex column body layout, navbar fixed znaci
 * da je VAN flow-a; content počinje y=0 ispod navbar-a (overlap). Forsiramo
 * navbar u sticky mode da ZAUZIMA flex space + ostane vizuelno na vrhu. */
body:has(.agro-messages-shell) .navbar.navbar-fixed-top {
	position: sticky;
	top: 0;
}

body:has(.agro-messages-shell) > .content-container.wo-msg-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	margin: 0;
}

body:has(.agro-messages-shell) > .content-container.wo-msg-container > #contnet {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Desktop >= 1024 — shell popunjava preostali prostor kolone */
@media (min-width: 1024px) {
	.agro-messages-shell {
		flex: 1 1 auto;
		/* height: 100% nasleđen iz baze — ne override-uj na auto, inace thread raste
		   preko viewport-a i composer se gura dole. */
	}
}

/* Tablet 720 - 1023 */
@media (min-width: 720px) and (max-width: 1023px) {
	.agro-messages-shell {
		grid-template-columns: 280px 1fr;
		flex: 1 1 auto;
	}
	.agro-chat-dropdown-panel {
		width: 340px;
	}
	.agro-msg-bubble {
		max-width: 78%;
	}
}

/* Mobile <= 719 — single-pane sa slide prelazom */
@media (max-width: 719px) {
	.agro-messages-shell {
		grid-template-columns: 1fr;
		border-radius: 0;
		border-left: none;
		border-right: none;
		flex: 1 1 auto;
	}
	.agro-conv-list {
		border-right: none;
		border-bottom: 1px solid var(--agro-border);
	}
	.agro-messages-shell[data-view="thread"] .agro-conv-list {
		display: none;
	}
	.agro-messages-shell[data-view="list"] .agro-conv-thread {
		display: none;
	}
	.agro-conv-thread__back {
		display: inline-flex;
	}
	.agro-conv-thread__header {
		padding: 8px 10px;
	}
	.agro-msg-bubble {
		max-width: 85%;
		font-size: 14.5px;
	}
	.agro-conv-thread__messages {
		padding: 12px 12px calc(12px + var(--agro-msg-safe-bottom));
	}
	.agro-chat-dropdown-panel {
		position: fixed;
		top: auto;
		left: 8px;
		right: 8px;
		bottom: 8px;
		width: auto;
		max-width: none;
		max-height: 80vh;
		border-radius: 14px;
	}
	.agro-composer {
		padding: 10px 12px calc(10px + var(--agro-msg-safe-bottom));
		gap: 8px;
	}
	.agro-composer__entity-switch {
		width: 100%;
	}
	.agro-composer__entity-btn {
		max-width: 100%;
		width: 100%;
		justify-content: flex-start;
		font-size: 12.5px;
		min-height: 30px;
	}
	.agro-composer__entity-prefix {
		display: none; /* Uz mobilnu uskost samo ime entiteta + badge ostaje. */
	}
	.agro-composer__entity-panel {
		min-width: 0;
		max-width: 100%;
		left: 0;
		right: 0;
	}
	.agro-composer__textarea {
		font-size: 16px; /* iOS — sprečava zoom na focus */
	}
	.agro-composer__input-row {
		min-height: 52px;
	}
	.agro-conv-item {
		min-height: 64px;
	}
	.agro-conv-item__avatar {
		width: var(--agro-msg-avatar-md);
		height: var(--agro-msg-avatar-md);
	}
}

/* =============================================================
 * 12. REDUCED MOTION
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.agro-chat-toggle,
	.agro-conv-item,
	.agro-conv-list__tab,
	.agro-search-bar__input,
	.agro-composer__textarea,
	.agro-composer__entity-btn,
	.agro-composer__entity-option,
	.agro-composer__send,
	.agro-composer__attach,
	.agro-chat-limit-teaser__btn,
	.agro-conv-thread__back {
		transition: none !important;
	}
	.agro-chat-skeleton__avatar,
	.agro-chat-skeleton__line {
		animation: none !important;
		background: var(--agro-color-neutral-200, #e9ecef) !important;
	}
}

/* =============================================================
 * 13. HEADER DROPDOWN — SKELETON & PANEL ITEMS (FAZA 13.2)
 * ============================================================= */
.agro-chat-skeleton {
	display: flex;
	flex-direction: column;
	padding: 4px 0;
}

.agro-chat-skeleton[hidden] {
	display: none;
}

.agro-chat-skeleton__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
}

.agro-chat-skeleton__avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(90deg,
		var(--agro-color-neutral-200, #e9ecef) 0%,
		var(--agro-color-neutral-100, #f1f3f5) 50%,
		var(--agro-color-neutral-200, #e9ecef) 100%);
	background-size: 200% 100%;
	animation: agroShimmer 1.4s ease-in-out infinite;
}

.agro-chat-skeleton__lines {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.agro-chat-skeleton__line {
	height: 10px;
	border-radius: 4px;
	background: linear-gradient(90deg,
		var(--agro-color-neutral-200, #e9ecef) 0%,
		var(--agro-color-neutral-100, #f1f3f5) 50%,
		var(--agro-color-neutral-200, #e9ecef) 100%);
	background-size: 200% 100%;
	animation: agroShimmer 1.4s ease-in-out infinite;
}

.agro-chat-skeleton__line--short { width: 35%; }
.agro-chat-skeleton__line--long  { width: 75%; }

@keyframes agroShimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.agro-chat-panel-initial[hidden] {
	display: none;
}

/* =============================================================
 * Panel item — elevated card stil (FB Messenger-like)
 * Svaki red je zasebna kartica: bela pozadina, rounded 12px,
 * tanki shadow, 8px gap izmeĐu (gap je na __body container-u).
 * ============================================================= */
.agro-chat-panel-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--agro-surface-card, #ffffff);
	border: 1px solid var(--agro-border, #e9ecef);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	position: relative;
}

.agro-chat-panel-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: var(--agro-primary, #2e7d32);
	text-decoration: none;
	color: inherit;
}

.agro-chat-panel-item:focus-visible {
	outline: 2px solid var(--agro-primary, #2e7d32);
	outline-offset: 1px;
	text-decoration: none;
	color: inherit;
}

/* Unread = no bg tint, samo bold tekst + zeleni dot desno */
.agro-chat-panel-item--unread .agro-chat-panel-item__name,
.agro-chat-panel-item--unread .agro-chat-panel-item__preview {
	color: var(--agro-text, #1a1a1a);
	font-weight: 600;
}

/* Avatar — 44px krug + online dot u donjem desnom uglu */
.agro-chat-panel-item__avatar {
	position: relative;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--agro-surface-alt, #f1f3f5);
	overflow: visible;
}

.agro-chat-panel-item__avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Fallback inicijal — vidi se ako <img> ne postoji ili failuje (onerror="this.remove()") */
.agro-chat-panel-item__avatar-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--agro-primary, #2e7d32);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	user-select: none;
}

.agro-chat-panel-item__online-dot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px var(--agro-surface-card, #ffffff);
}

/* Body — ime + vreme u istom redu, preview ispod */
.agro-chat-panel-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.agro-chat-panel-item__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.agro-chat-panel-item__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--agro-text, #1a1a1a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1 1 auto;
}

.agro-chat-panel-item__time {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--agro-text-secondary, #6c757d);
	font-variant-numeric: tabular-nums;
}

.agro-chat-panel-item__preview {
	font-size: 13px;
	color: var(--agro-text-secondary, #6c757d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.agro-chat-panel-item__preview-empty {
	font-style: italic;
	opacity: 0.7;
}

/* Unread dot — desni indikator (bez brojčića, čist bullet) */
.agro-chat-panel-item__unread-dot {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--agro-primary, #2e7d32);
	align-self: center;
}

/* =============================================================
 * FAZA 13.1.3 Stepenica 5 — Entity↔Entity UI
 * - Dual-avatar conv list item
 * - D6 composer lock chip
 * - Toast sistem
 * - "Sve" tab hibrid (4-tab mode)
 * - Self-chat banner
 * ============================================================= */

/* ---- Dual-avatar conv list item ---- */

.agro-conv-item--entity {
	align-items: flex-start;
}

.agro-conv-item__dual-avatar {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	width: 68px;
	height: 44px;
	margin-right: 10px;
}

.agro-conv-item__dual-avatar > img,
.agro-conv-item__dual-avatar > .agro-conv-item__avatar-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--agro-surface-alt, #f3f3f3);
	box-shadow: 0 0 0 2px var(--agro-surface, #fff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--agro-text, #222);
}

.agro-conv-item__dual-avatar-mine {
	position: relative;
	z-index: 1;
}

.agro-conv-item__dual-avatar-theirs {
	position: absolute;
	left: 28px;
	top: 0;
	z-index: 2;
}

.agro-conv-item__dual-avatar .is-inactive {
	opacity: 0.55;
	filter: grayscale(0.8);
}

.agro-conv-item__type-badge {
	position: absolute;
	bottom: -2px;
	left: 22px;
	z-index: 3;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--agro-primary, #2e7d32);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--agro-surface, #fff);
}

.agro-conv-item__type-badge--firma {
	background: var(--agro-primary-dark, #1b5e20);
}

.agro-conv-item__entity-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 500;
	color: var(--agro-text);
	min-width: 0;
}

.agro-conv-item--unread .agro-conv-item__entity-title {
	font-weight: 700;
}

.agro-conv-item__entity-mine,
.agro-conv-item__entity-theirs {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 46%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agro-conv-item__entity-arrow {
	flex: 0 0 auto;
	color: var(--agro-text-muted, #666);
	font-weight: 400;
}

.agro-conv-item__inactive-badge {
	font-size: 11px;
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--agro-surface-alt, #f3f3f3);
	color: var(--agro-text-muted, #666);
	font-weight: 400;
}

.agro-conv-item--inactive {
	opacity: 0.75;
}

@media (max-width: 360px) {
	.agro-conv-item__dual-avatar {
		width: 56px;
	}
	.agro-conv-item__dual-avatar > img,
	.agro-conv-item__dual-avatar > .agro-conv-item__avatar-placeholder {
		width: 36px;
		height: 36px;
	}
	.agro-conv-item__dual-avatar-theirs {
		left: 22px;
	}
	.agro-conv-item__type-badge {
		left: 16px;
	}
}

/* ---- D6 composer lock chip ---- */

.agro-composer__lock-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--agro-msg-entity-chip-bg, #eaf4ea);
	border: 1px solid var(--agro-msg-entity-chip-border, #bcd8bd);
	border-radius: 10px;
	margin: 0 0 8px 0;
	font-size: 13px;
	color: var(--agro-text);
}

.agro-composer__lock-chip--unavailable {
	background: #fdecea;
	border-color: #c0392b;
	color: #8a1c15;
}

.agro-composer__lock-chip--personal {
	background: var(--agro-surface-alt, #f3f3f3);
	border-color: var(--agro-border, #ddd);
	color: var(--agro-text-secondary, #444);
}

.agro-composer__lock-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--agro-primary-dark, #1b5e20);
}

.agro-composer__lock-chip--unavailable .agro-composer__lock-icon {
	color: #c0392b;
}

.agro-composer__lock-chip--personal .agro-composer__lock-icon {
	color: var(--agro-text-muted, #666);
}

.agro-composer__lock-text {
	flex: 1 1 auto;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.agro-composer__lock-info {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--agro-text-muted, #666);
	cursor: help;
	padding: 0;
	border-radius: 50%;
}

.agro-composer__lock-info:hover,
.agro-composer__lock-info:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	color: var(--agro-text);
	outline: none;
}

.agro-composer__lock-info:focus-visible {
	outline: 2px solid var(--agro-primary-light);
	outline-offset: 2px;
}

/* ---- Toast system ---- */

.agro-toast-container {
	position: fixed;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	pointer-events: none;
	max-width: calc(100vw - 32px);
}

.agro-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 280px;
	max-width: 480px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--agro-surface-card, #fff);
	color: var(--agro-text);
	border: 1px solid var(--agro-border, #ddd);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	font-size: 14px;
	pointer-events: auto;
	transform: translateY(10px);
	opacity: 0;
	transition: transform 200ms ease, opacity 200ms ease;
}

.agro-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.agro-toast.is-dismissing {
	transform: translateY(10px);
	opacity: 0;
}

.agro-toast--info    { border-color: var(--agro-primary-soft, #bcd8bd); background: var(--agro-primary-bg, #eaf4ea); color: var(--agro-primary-dark, #1b5e20); }
.agro-toast--success { border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; }
.agro-toast--warning { border-color: #f57c00; background: #fff3e0; color: #8a4b08; }
.agro-toast--error   { border-color: #c62828; background: #fdecea; color: #8a1c15; }

.agro-toast__icon  { flex: 0 0 auto; display: inline-flex; }
.agro-toast__text  { flex: 1 1 auto; }
.agro-toast__close {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: inherit;
	opacity: 0.7;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.agro-toast__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }

@media (prefers-reduced-motion: reduce) {
	.agro-toast {
		transition: opacity 50ms linear;
		transform: none;
	}
	.agro-toast.is-dismissing { transform: none; }
}

/* ---- Self-chat banner ---- */

.agro-conv-thread__banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	margin: 8px 16px 0;
	border-radius: 8px;
	font-size: 13px;
}

.agro-conv-thread__banner--self {
	background: #fff3e0;
	color: #8a4b08;
	border: 1px solid #f57c00;
}

/* ---- Empty state: no-entity-convs ---- */

.agro-empty-state--no-entity-convs .agro-empty-state__icon {
	color: var(--agro-primary-dark, #1b5e20);
}

/* ---- "Sve" tab panel (4-tab hibrid) ---- */

.agro-conv-list__panel--all { /* nasleđuje ponašanje */ }

/* Compact mobile (<=480px) — ikone malo vece za touch target + uzi padding. */
@media (max-width: 480px) {
	.agro-conv-list__tab {
		gap: 4px;
		padding: 4px 6px;
	}
	.agro-conv-list__tab-icon {
		width: 15px;
		height: 15px;
	}
}

/* =============================================================
 * FAZA 13.2 — OFFER-ANCHORED CHAT TOPICS
 * -------------------------------------------------------------
 * Komponente:
 *   .agro-offer-card       — reusable (composer / topic header / modal)
 *   .agro-offer-topic      — collapsible sekcija u chat thread-u
 *   .agro-composer__offer-lock — lock chip iznad composer input row-a
 *   .agro-offer-contact-modal  — modal sa offer detail strane
 * ============================================================= */

/* ---- Reusable offer card ---- */

.agro-offer-card {
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--agro-bg-soft, #f4f1eb);
	border: 1px solid var(--agro-border-soft, rgba(61, 124, 71, 0.14));
	border-radius: 10px;
	padding: 8px 10px;
	min-width: 0;
}

.agro-offer-card--deleted {
	background: #f5f5f5;
	border-color: #e5e5e5;
	opacity: 0.75;
}

.agro-offer-card__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	overflow: hidden;
	background: #eaeaea;
}

.agro-offer-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agro-offer-card__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.agro-offer-card__title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.agro-offer-card__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--agro-text-primary, #1e2a1a);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.agro-offer-card__pill {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	padding: 2px 6px;
	border-radius: 4px;
	line-height: 1.3;
}

.agro-offer-card__pill--sold {
	background: #ffe0e0;
	color: #b71c1c;
}

.agro-offer-card__pill--expired {
	background: #eceff1;
	color: #546e7a;
}

.agro-offer-card__pill--deleted {
	background: #eeeeee;
	color: #757575;
}

.agro-offer-card__price {
	font-size: 13px;
	font-weight: 700;
	color: var(--agro-accent, #e67e22);
	line-height: 1.2;
}

.agro-offer-card__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--agro-primary-dark, #1b5e20);
	text-decoration: none;
	margin-top: 2px;
}

.agro-offer-card__link:hover,
.agro-offer-card__link:focus-visible {
	text-decoration: underline;
}

.agro-offer-card__link svg {
	flex: 0 0 auto;
}

/* Topic + Composer variante dele isti inline horizontal layout kao modal —
 * [slika] [naslov] [cena] [link] u jednom redu, sa display:contents na
 * title-row wrapper da bi baseline bio deljen. Visually kompaktno (bez
 * praznih vertikalnih redova po elementu), responsive kroz flex-wrap. */
.agro-offer-card--topic {
	background: transparent;
	border: none;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}

/* Explicit card-level row — neki globalni override (verovatno WoWonder
 * default za flex wrappere) spusti card na flex-direction:column, pa
 * thumb sedi iznad body-ja. Ovaj reset vraca na inline horizontal. */
.agro-offer-card--topic,
.agro-offer-card--composer,
.agro-composer__offer-lock .agro-offer-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.agro-offer-card--topic .agro-offer-card__body,
.agro-offer-card--composer .agro-offer-card__body {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	row-gap: 2px;
	min-width: 0;
}

.agro-offer-card--topic .agro-offer-card__title-row,
.agro-offer-card--composer .agro-offer-card__title-row {
	display: contents;
}

.agro-offer-card--topic .agro-offer-card__title,
.agro-offer-card--composer .agro-offer-card__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
}

.agro-offer-card--topic .agro-offer-card__price,
.agro-offer-card--composer .agro-offer-card__price {
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	margin: 0;
}

.agro-offer-card--topic .agro-offer-card__link,
.agro-offer-card--composer .agro-offer-card__link {
	flex: 0 0 auto;
	margin: 0;
	line-height: 1.4;
}

/* Modal variant: inline horizontal — [slika] [naslov] [cena] u jednom redu.
 * Base .agro-offer-card__body ima flex-direction:column (prikazuje title
 * iznad price-a vertikalno). U modal kontekstu override-ujemo na row da
 * sve stoji side-by-side bez praznog prostora. */
.agro-offer-card--modal {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 8px 10px;
	gap: 12px;
}
.agro-offer-card--modal .agro-offer-card__thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
}
.agro-offer-card--modal .agro-offer-card__body {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 10px;
	min-width: 0;
}
/* display:contents "propusta" title-row wrapper pa njegovi children
 * (title + optional pill) postaju direktni flex children body-ja.
 * Rezultat: [title] [price] su na istom flex nivou sa deljenom
 * baseline poravnavanjem — naslov i cena su u istoj tekstualnoj liniji. */
.agro-offer-card--modal .agro-offer-card__title-row {
	display: contents;
}
.agro-offer-card--modal .agro-offer-card__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}
.agro-offer-card--modal .agro-offer-card__price {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	margin: 0;
}
/* Slika (flex align-items:center na root cardu) ostaje centrirana; tekst
 * baseline row je prirodno u sredini 44px thumb-a kad su oba jedine stvari
 * u body-ju. */

/* ---- Composer offer lock chip ---- */

.agro-composer__offer-lock {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	margin: 0 0 6px 0;
	background: color-mix(in srgb, var(--agro-primary-light, #a5d6a7) 18%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--agro-primary-dark, #1b5e20) 30%, transparent);
	border-radius: 10px;
	flex-wrap: wrap;
}

.agro-composer__offer-lock-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--agro-primary-dark, #1b5e20);
	flex: 0 0 auto;
	padding: 2px 6px;
	background: #ffffff;
	border-radius: 12px;
}

.agro-composer__offer-lock-label svg {
	flex: 0 0 auto;
}

.agro-composer__offer-lock .agro-offer-card {
	flex: 1 1 200px;
	background: transparent;
	border: none;
	padding: 0;
	min-width: 0;
}

.agro-composer__offer-lock-end {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	border: 1px solid var(--agro-border-soft, rgba(0,0,0,0.12));
	color: var(--agro-text-secondary, #455a54);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	min-height: 28px;
}

.agro-composer__offer-lock-end:hover,
.agro-composer__offer-lock-end:focus-visible {
	background: #ffffff;
	border-color: #c62828;
	color: #c62828;
	outline: none;
}

.agro-composer__offer-lock-end svg {
	flex: 0 0 auto;
}

/* Dok je lock aktivan, textarea dobija tanak primary border (suptilan signal) */
.agro-composer--offer-locked .agro-composer__textarea {
	border-color: color-mix(in srgb, var(--agro-primary-dark, #1b5e20) 35%, transparent);
}

/* FAZA 13.4 — uklonjeni .agro-offer-topic + .agro-general-section selektori
 * (FAZA 13.2/13.3 dropdown sekcije zamenjeni sa .agro-offer-pill na min_time
 * poziciji + inline aktivne poruke u glavnom toku). */

/* ---- Offer contact modal (iz offer detail strane) ---- */

.agro-offer-contact-modal .modal-dialog {
	max-width: 520px;
}

.agro-offer-contact-modal__body {
	padding: 16px 20px;
}

.agro-offer-contact-modal__header-card {
	margin-bottom: 10px;
}

.agro-offer-contact-modal__quick-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.agro-offer-contact-modal__chip {
	font-size: 12px;
	font-weight: 500;
	color: var(--agro-text-primary, #1e2a1a);
	background: var(--agro-bg-soft, #f4f1eb);
	border: 1px solid var(--agro-border-soft, rgba(0,0,0,0.1));
	border-radius: 16px;
	padding: 5px 10px;
	cursor: pointer;
	line-height: 1.2;
}

.agro-offer-contact-modal__chip:hover,
.agro-offer-contact-modal__chip:focus-visible {
	background: #ffffff;
	border-color: var(--agro-primary-dark, #1b5e20);
	color: var(--agro-primary-dark, #1b5e20);
	outline: none;
}

.agro-offer-contact-modal__textarea {
	width: 100%;
	min-height: 100px;
	max-height: 220px;
	resize: vertical;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.45;
	border: 1px solid var(--agro-border-soft, rgba(0,0,0,0.15));
	border-radius: 10px;
	background: #ffffff;
	color: var(--agro-text-primary, #1e2a1a);
	font-family: inherit;
}

.agro-offer-contact-modal__textarea:focus {
	outline: none;
	border-color: var(--agro-primary-dark, #1b5e20);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--agro-primary-dark, #1b5e20) 18%, transparent);
}

.agro-offer-contact-modal__status {
	font-size: 12px;
	color: var(--agro-text-secondary, #455a54);
	margin: 8px 0 0 0;
	min-height: 18px;
}

.agro-offer-contact-modal__status--error {
	color: #c62828;
}

.agro-offer-contact-modal__status--success {
	color: var(--agro-primary-dark, #1b5e20);
}

.agro-offer-contact-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 20px;
	border-top: 1px solid var(--agro-border-soft, rgba(0,0,0,0.08));
	background: #fafafa;
	flex-wrap: wrap;
}

.agro-offer-contact-modal__open-full {
	font-size: 13px;
	font-weight: 600;
	color: var(--agro-primary-dark, #1b5e20);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.agro-offer-contact-modal__open-full:hover,
.agro-offer-contact-modal__open-full:focus-visible {
	text-decoration: underline;
}

.agro-offer-contact-modal__send {
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
	background: var(--agro-accent, #e67e22);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	min-height: 38px;
}

.agro-offer-contact-modal__send:hover:not(:disabled),
.agro-offer-contact-modal__send:focus-visible:not(:disabled) {
	background: var(--agro-accent-hover, #d35400);
	outline: none;
}

.agro-offer-contact-modal__send:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.agro-composer__offer-lock { gap: 6px; padding: 5px 6px; }
	.agro-composer__offer-lock-label span { display: none; }
	.agro-offer-card__link span { display: none; }
	.agro-offer-contact-modal__footer { flex-direction: column; align-items: stretch; }
	.agro-offer-contact-modal__send { width: 100%; }
}

/* =============================================================
 * FAZA 13.2+ — End topic confirm modal + system close banner +
 * "Nastavi razgovor" dugme u offer topic summary-ju
 * ============================================================= */

/* ---- Confirm modal za "Završi temu" ---- */

.agro-offer-end-topic-modal .modal-dialog {
	max-width: 420px;
}

.agro-offer-end-topic-modal__body {
	padding: 16px 20px;
}

.agro-offer-end-topic-modal__text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--agro-text-primary, #1e2a1a);
	margin: 0 0 6px 0;
}

.agro-offer-end-topic-modal__target {
	font-size: 13px;
	font-weight: 600;
	color: var(--agro-text-secondary, #455a54);
	font-style: italic;
	margin: 0;
	min-height: 18px;
}

.agro-offer-end-topic-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 20px;
	border-top: 1px solid var(--agro-border-soft, rgba(0,0,0,0.08));
	background: #fafafa;
}

.agro-offer-end-topic-modal__cancel,
.agro-offer-end-topic-modal__confirm {
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	min-height: 34px;
	border: 1px solid transparent;
}

.agro-offer-end-topic-modal__cancel {
	background: transparent;
	color: var(--agro-text-secondary, #455a54);
	border-color: var(--agro-border-soft, rgba(0,0,0,0.15));
}

.agro-offer-end-topic-modal__cancel:hover,
.agro-offer-end-topic-modal__cancel:focus-visible {
	background: #f1f1f1;
	outline: none;
}

.agro-offer-end-topic-modal__confirm {
	background: #c62828;
	color: #ffffff;
	border-color: #c62828;
}

.agro-offer-end-topic-modal__confirm:hover:not(:disabled),
.agro-offer-end-topic-modal__confirm:focus-visible:not(:disabled) {
	background: #a61e1e;
	border-color: #a61e1e;
	outline: none;
}

.agro-offer-end-topic-modal__confirm:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---- Topic close separator (tanka linija sa "Tema zatvorena" u sredini) ---- */

.agro-msg-topic-close-separator {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 4px;
	font-size: 11px;
	color: var(--agro-text-secondary, #455a54);
	opacity: 0.7;
}

.agro-msg-topic-close-separator__line {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--agro-border-soft, rgba(0,0,0,0.15)) 30%,
		var(--agro-border-soft, rgba(0,0,0,0.15)) 70%,
		transparent
	);
}

.agro-msg-topic-close-separator__text {
	flex: 0 0 auto;
	font-style: italic;
	white-space: nowrap;
	letter-spacing: 0.2px;
}

/* FAZA 13.4 — uklonjeni .agro-offer-topic__resume i .agro-offer-topics-nav__*
 * stilovi (FAZA 13.2/13.3 dropdown summary + horizontal navigator rail).
 * Zamenio ih je drawer panel + kompaktan pill (vidi FAZA 13.4 sekciju ispod). */

@media (max-width: 480px) {
	.agro-msg-system-banner { font-size: 11px; padding: 5px 10px; }
	.agro-offer-end-topic-modal__footer { flex-direction: column-reverse; }
	.agro-offer-end-topic-modal__cancel,
	.agro-offer-end-topic-modal__confirm { width: 100%; }
}


/* =========================================================================
 * FAZA 13.4 — Topics Redesign (compact pill + active pin + drawer)
 * Vidi PRD_MESSAGING_TOPICS_REDESIGN.md
 * ========================================================================= */

/* === Active Topic Pin (deo compound sticky-top wrap-era) === */
.agro-active-topic-pin {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--agro-primary-light, #a5d6a7) 28%, #ffffff) 0%,
		color-mix(in srgb, var(--agro-primary-light, #a5d6a7) 12%, #ffffff) 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--agro-primary-dark, #1b5e20) 22%, transparent);
	align-items: center;
	flex-shrink: 0;
	/* Pin je deo .agro-conv-thread__sticky-top wrap-era — sticky se računa na
	 * roditelju, ne ovde. Bez sopstvenog sticky/z-index. */
}
.agro-active-topic-pin__thumb {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	flex-shrink: 0;
	object-fit: cover;
	background: var(--agro-surface-alt, #fafafa);
}
.agro-active-topic-pin__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.agro-active-topic-pin__title {
	font-weight: 600;
	font-size: 14px;
	color: var(--agro-primary-dark, #1b5e20);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.agro-active-topic-pin__price {
	font-size: 12px;
	color: var(--agro-text-secondary, #455a54);
}
.agro-active-topic-pin__hint {
	font-size: 11px;
	color: var(--agro-text-muted, #6b7977);
}
.agro-active-topic-pin__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}
.agro-active-topic-pin__end {
	background: var(--agro-accent, #ff8a00);
	color: #fff;
	border: 0;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 120ms ease;
}
.agro-active-topic-pin__end:hover { background: #e67d00; }
.agro-active-topic-pin__view {
	font-size: 11px;
	color: var(--agro-primary-dark, #1b5e20);
	text-decoration: none;
	padding: 4px;
	white-space: nowrap;
}
.agro-active-topic-pin__view:hover { text-decoration: underline; }

/* === Compact Topic Pill (zatvorena tema u toku) === */
.agro-offer-pill {
	margin: 6px 0;
	border: 1px solid color-mix(in srgb, var(--agro-border, #ddd) 80%, transparent);
	border-radius: 8px;
	background: var(--agro-surface-alt, #fafafa);
	flex-shrink: 0;
}
.agro-offer-pill__details { margin: 0; }
.agro-offer-pill__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	min-height: 36px;
	position: relative;
}
.agro-offer-pill__summary::-webkit-details-marker { display: none; }
.agro-offer-pill__summary::marker { content: ''; }
.agro-offer-pill__details[open] .agro-offer-pill__summary {
	border-bottom: 1px solid color-mix(in srgb, var(--agro-primary-dark, #1b5e20) 12%, transparent);
}

.agro-offer-pill__thumb {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	flex-shrink: 0;
	object-fit: cover;
	background: #eaeaea;
}
.agro-offer-pill__body {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	overflow: hidden;
}
.agro-offer-pill__title {
	font-weight: 600;
	font-size: 13px;
	color: var(--agro-text, #2c3a3c);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 50%;
}
.agro-offer-pill__meta {
	font-size: 12px;
	color: var(--agro-text-secondary, #455a54);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.agro-offer-pill__pill-end-tag {
	font-size: 10px;
	padding: 2px 6px;
	background: #f0f0f0;
	color: var(--agro-text-muted, #6b7977);
	border-radius: 10px;
	flex-shrink: 0;
}
.agro-offer-pill__pill-end-tag--sold { background: #fff3e0; color: #e65100; }
.agro-offer-pill__pill-end-tag--expired { background: #f5f5f5; color: #757575; }
.agro-offer-pill__pill-end-tag--deleted { background: #ffebee; color: #c62828; }
.agro-offer-pill__new-badge {
	background: var(--agro-accent, #ff8a00);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 10px;
	flex-shrink: 0;
}
.agro-offer-pill__new-badge[hidden] { display: none; }
.agro-offer-pill__resume {
	font-size: 11px;
	padding: 4px 8px;
	border: 1px solid var(--agro-primary-dark, #1b5e20);
	background: transparent;
	color: var(--agro-primary-dark, #1b5e20);
	border-radius: 4px;
	cursor: pointer;
	flex-shrink: 0;
	font-weight: 500;
	transition: all 120ms ease;
}
.agro-offer-pill__resume:hover { background: var(--agro-primary-dark, #1b5e20); color: #fff; }
.agro-offer-pill__resume:disabled { opacity: 0.4; cursor: not-allowed; }
.agro-offer-pill__toggle {
	background: none;
	border: 0;
	color: var(--agro-text-secondary, #455a54);
	cursor: pointer;
	padding: 0 4px;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.agro-offer-pill__details[open] .agro-offer-pill__toggle::after { content: '▲'; font-size: 10px; }
.agro-offer-pill__details:not([open]) .agro-offer-pill__toggle::after { content: '▼'; font-size: 10px; }

.agro-offer-pill__messages {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff;
}

/* Has-new pulse — orange dot animacija u summary-ju */
.agro-offer-pill--has-new .agro-offer-pill__summary {
	background: color-mix(in srgb, var(--agro-accent, #ff8a00) 8%, transparent);
	padding-left: 22px;
}
.agro-offer-pill--has-new .agro-offer-pill__summary::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--agro-accent, #ff8a00);
	box-shadow: 0 0 0 2px #fff;
	animation: agroOfferPillPulse 1.6s ease-in-out infinite;
}
.agro-offer-pill--has-new .agro-offer-pill__title { font-weight: 700; }
@keyframes agroOfferPillPulse {
	0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
	50%      { transform: translateY(-50%) scale(1.4); opacity: 0.6; }
}

/* Offer-ended (sold/expired/deleted) */
.agro-offer-pill--offer-ended { opacity: 0.75; }
.agro-offer-pill--offer-ended .agro-offer-pill__title {
	text-decoration: line-through;
	text-decoration-color: var(--agro-text-muted, #6b7977);
}

/* Inline aktivna tema-poruka — orange border-left marker */
.agro-msg-bubble[data-active-topic="1"] {
	border-left: 3px solid var(--agro-accent, #ff8a00);
	padding-left: 9px;
}
.agro-msg-bubble[data-active-topic="1"].agro-msg-bubble--me {
	border-left: 0;
	border-right: 3px solid var(--agro-accent, #ff8a00);
	padding-right: 9px;
	padding-left: 12px;
}

/* === Topics Drawer === */
/* z-index 1050 — iznad WoWonder navbar (1030) i thread sticky-top (no z-index, in flow) */
.agro-topics-drawer { position: fixed; inset: 0; z-index: 1050; pointer-events: none; }
.agro-topics-drawer[hidden] { display: none; }
.agro-topics-drawer.agro-topics-drawer--open { pointer-events: auto; }
.agro-topics-drawer__backdrop {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 200ms ease;
}
.agro-topics-drawer--open .agro-topics-drawer__backdrop { opacity: 1; }

.agro-topics-drawer__panel {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 320px;
	background: #fff;
	box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
	transform: translateX(100%);
	transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
}
.agro-topics-drawer--open .agro-topics-drawer__panel { transform: translateX(0); }

.agro-topics-drawer__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--agro-border, #eee);
}
.agro-topics-drawer__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--agro-text, #2c3a3c);
	margin: 0;
}
.agro-topics-drawer__count {
	font-weight: 400;
	color: var(--agro-text-secondary, #455a54);
	margin-left: 4px;
}
.agro-topics-drawer__close {
	background: none;
	border: 0;
	font-size: 18px;
	cursor: pointer;
	padding: 4px 8px;
	color: var(--agro-text-secondary, #455a54);
	line-height: 1;
}
.agro-topics-drawer__list {
	flex: 1;
	overflow-y: auto;
	padding: 6px 0;
}
.agro-topics-drawer__empty {
	padding: 24px 18px;
	text-align: center;
	color: var(--agro-text-muted, #6b7977);
	font-size: 13px;
}

/* Drawer chips */
.agro-topics-drawer__chip {
	display: flex; gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px solid color-mix(in srgb, var(--agro-border, #eee) 60%, transparent);
	cursor: pointer;
	transition: background 120ms ease;
}
.agro-topics-drawer__chip:hover { background: var(--agro-surface-alt, #fafafa); }
.agro-topics-drawer__chip--active {
	background: color-mix(in srgb, var(--agro-primary-light, #a5d6a7) 20%, #fff);
	border-left: 3px solid var(--agro-primary-dark, #1b5e20);
	padding-left: 15px;
}
.agro-topics-drawer__chip--has-new .agro-topics-drawer__chip-title { font-weight: 700; }
.agro-topics-drawer__chip--offer-ended { opacity: 0.7; }
.agro-topics-drawer__chip--offer-ended .agro-topics-drawer__chip-title {
	text-decoration: line-through;
	text-decoration-color: var(--agro-text-muted, #6b7977);
}
.agro-topics-drawer__chip-thumb {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	flex-shrink: 0;
	object-fit: cover;
	background: var(--agro-surface-alt, #fafafa);
}
.agro-topics-drawer__chip-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.agro-topics-drawer__chip-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--agro-text, #2c3a3c);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.agro-topics-drawer__chip-meta {
	font-size: 11px;
	color: var(--agro-text-secondary, #455a54);
}
.agro-topics-drawer__chip-unread {
	color: var(--agro-accent, #ff8a00);
	font-weight: 700;
	margin-left: 4px;
}
.agro-topics-drawer__chip-status--active {
	font-size: 11px;
	color: var(--agro-primary-dark, #1b5e20);
	font-weight: 600;
	margin-top: 2px;
}
.agro-topics-drawer__chip-resume {
	margin-top: 4px;
	font-size: 11px;
	padding: 4px 8px;
	background: transparent;
	border: 1px solid var(--agro-primary-dark, #1b5e20);
	color: var(--agro-primary-dark, #1b5e20);
	border-radius: 4px;
	cursor: pointer;
	align-self: flex-start;
	font-weight: 500;
	transition: all 120ms ease;
}
.agro-topics-drawer__chip-resume:hover {
	background: var(--agro-primary-dark, #1b5e20);
	color: #fff;
}

/* Drawer toggle dugme u thread headeru */
.agro-topics-drawer-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--agro-border, #ddd);
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	color: var(--agro-text, #2c3a3c);
	font-weight: 500;
	transition: background 120ms ease;
}
.agro-topics-drawer-toggle:hover { background: var(--agro-surface-alt, #fafafa); }
.agro-topics-drawer-toggle__count {
	color: var(--agro-text-secondary, #455a54);
	font-weight: 400;
}

/* Mobile responsive — drawer postaje full-screen sheet sa slide-up */
@media (max-width: 767px) {
	.agro-topics-drawer__panel {
		width: 100%;
		transform: translateY(100%);
		transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.agro-topics-drawer--open .agro-topics-drawer__panel { transform: translateY(0); }
	.agro-topics-drawer__list { padding-bottom: max(env(safe-area-inset-bottom), 16px); }

	.agro-active-topic-pin { padding: 10px 12px; gap: 8px; }
	.agro-active-topic-pin__hint { display: none; }
	.agro-active-topic-pin__view { display: none; }

	.agro-offer-pill__title { max-width: 40%; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	.agro-topics-drawer__panel { transition: none; }
	.agro-topics-drawer__backdrop { transition: none; }
	.agro-offer-pill--has-new .agro-offer-pill__summary::before { animation: none; }
	.agro-offer-pill__resume { transition: none; }
	.agro-active-topic-pin__end { transition: none; }
	.agro-topics-drawer__chip { transition: none; }
}