/* ----------------------------------------------------------------
	Reviews CSS
-----------------------------------------------------------------*/

.browser {
	background:#e5edf5;
	border-radius:12px;
	overflow:hidden;
	width:100%;
	border:1px solid #e5edf5;
}
.browser-chrome {
	background:#e5edf5;
	padding:10px 12px 0;
}
.browser-controls {
	display:flex;
	align-items:center;
	gap:6px;
	margin-bottom:16px;
}
.b-dot {
	width:12px;
	height:12px;
	border-radius:50%;
}
.b-dot.red {
	background:#ff5f57;
}
.b-dot.yellow {
	background:#febc2e;
}
.b-dot.green {
	background:#28c840;
}
.browser-bar {
	display:flex;
	align-items:center;
	gap:8px;
	background:#fff;
	border-radius:20px;
	padding:6px 12px;
	border:1px solid #dadce0;
}
.bar-lock {
	display:flex;
	align-items:center;
}
.bar-lock svg {
	width:13px;
	height:13px;
	fill:#5f6368;
}
.bar-url {
	font-size:12px;
	color:#50617a;
	font-family:monospace;
	flex:1;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.bar-refresh {
	display:flex;
	align-items:center;
	cursor:pointer;
}
.bar-refresh svg {
	width:14px;
	height:14px;
	fill:#5f6368;
}
.browser-content {
	background:#fff;
	border-top:1px solid #dadce0;
}
.chat-shell {
	background:#fff;
	border-radius:0;
	overflow:hidden;
	border:none;
	box-shadow:none;
	margin:0;
}
.chat-topbar {
	background:#f8fafd;
	padding:12px 16px;
	display:flex;
	align-items:center;
	gap:10px;
}
.avatar-logo {
	width:48px;
	height:48px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	overflow:hidden;
}
.avatar-logo img {
	width:48px;
	height:48px;
	object-fit:contain;
}
.topbar-info {
	flex:1;
}
.topbar-name {
	font-family:'Google Sans Flex', sans-serif;
	font-size:1rem;
	font-weight:500;
	color:#061b31;
	line-height:1.2;
}
.topbar-rating {
	font-size:14px;
	color:#555;
	margin-top:2px;
	display:flex;
	align-items:center;
	gap:4px;
}
.topbar-rating .stars {
	color:#ffc107;
	font-size:17px;
}
.review-nav {
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:2px;
}
.review-counter {
	font-size:12px;
	color:#aaa;
}
.progress-bar {
	height:2px;
	background:#f0f0f0;
}
.progress-fill {
	height:100%;
	background:#0b57d0;
	border-radius:2px;
	transition:width 0.1s linear;
}
.chat-body {
	padding:40px 20px;
	min-height:280px;
	display:flex;
	flex-direction:column;
	gap:10px;
	background:#f8fafd;
}
.msg-row {
	display:flex;
	align-items:flex-end;
	gap:8px;
	opacity:0;
	transform:translateY(6px);
	transition:opacity 0.3s ease,transform 0.3s ease;
}
.msg-row.visible {
	opacity:1;
	transform:translateY(0);
}
.msg-row.me {
	flex-direction:row-reverse;
}
.avatar-cust {
	width:38px;
	height:38px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:12px;
	font-weight:500;
	flex-shrink:0;
	background:#e5edf5;
	color:#0b57d0;
}
.avatar-neno-sm {
	width:38px;
	height:38px;
	border-radius:50%;
	background:#061b31;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	font-size:12px;
	font-weight:500;
	color:#fff;
}
.bubble {
	max-width:70%;
	padding:9px 13px;
	border-radius:14px;
	font-size:14px;
	line-height:1.5;
	color:#061b31;
}
.bubble.customer {
	background:#e5edf5;
	border-bottom-left-radius:4px;
}
.bubble.me {
	background:#061b31;
	color:#fff;
	border-bottom-right-radius:4px;
}
.typing-row {
	display:flex;
	align-items:flex-end;
	gap:8px;
	opacity:0;
	transition:opacity 0.25s;
}
.typing-row.visible {
	opacity:1;
}
.typing-row.me {
	flex-direction:row-reverse;
}
.typing-bubble {
	background:#e5edf5;
	border-radius:14px;
	border-bottom-left-radius:4px;
	padding:10px 14px;
	display:flex;
	gap:5px;
	align-items:center;
}
.typing-bubble.me-bubble {
	background:#061b31;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:14px;
}
.dot {
	width:6px;
	height:6px;
	border-radius:50%;
	background:#bbb;
	animation:bounce 1.2s infinite;
}
.dot.white {
	background:rgba(255,255,255,0.5);
}
.dot:nth-child(2) {
	animation-delay:0.2s;
}
.dot:nth-child(3) {
	animation-delay:0.4s;
}

@keyframes bounce {0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}

.chat-footer {
	padding:10px 16px;
	border-top:1px solid #e5edf5;
	background:#f8fafd;
	display:flex;
	align-items:center;
	gap:8px;
}
.chat-input-fake {
	flex:1;
	background:#fff;
	border:1px solid #e5edf5;
	border-radius:20px;
	padding:8px 14px;
	font-size:12px;
	color:#50617a;
}
.send-btn {
	width:30px;
	height:30px;
	border-radius:50%;
	background:#0b57d0;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
.send-btn svg {
	width:14px;
	height:14px;
	fill:#fff;
}