/**
 * suite-chat-mini.css — the floating mini-chat launcher (roadmap #18).
 *
 * A site-wide, DESKTOP-ONLY Chat bubble (bottom-right) that fans out a cluster of
 * pinned + recent conversations along the bottom edge, and opens docked mini-windows
 * that reuse the shared component's own thread render (.sc-chat) so bubbles, composer,
 * reactions and mentions are identical to the app.
 *
 * Tokens: this file re-declares the same --sc palette the component sets on .sc-chat,
 * scoped to the launcher root (.sc-mini) since the launcher lives on document.body,
 * outside any .sc-chat wrapper.
 */

.sc-mini {
	--sc-navy: #1D3040; --sc-blue800: #1D4A60; --sc-blue600: #347EA0; --sc-primary: #439BC0;
	--sc-blue200: #B3DDE9; --sc-blue100: #D9EFF5; --sc-bluelight: #F4FBFC; --sc-body: #5A6A7A;
	--sc-meta: #8A9BAB; --sc-border: #D0DCE6; --sc-line: #E4EAEF; --sc-alt: #F7FAFB;
	--sc-amber: #F5C842; --sc-red: #E24B4A; --sc-teal: #1EC1A1; --sc-gray: #B7C3CE;
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* The launcher sits below the huddle "ring" (z 2147483000) so a live call wins. */
/* Floating-widget tier: above page content but BELOW app popups/modals (e.g. an
 * email compose window), so those always cover the bubble. Well below the huddle
 * ring (2147483000), which should still win during a live call. */
.sc-mini-launcher { position: fixed; right: 22px; bottom: 22px; z-index: 9000; }
/* Headless mode: a host launcher (suite-core's combined Quick Actions button) shows
   the trigger and drives us via window.SuiteChatMini — hide our own fab, keep the
   cluster + windows fanning from the same corner. */
.sc-mini.sc-mini--headless .sc-mini-fab { display: none; }

.sc-mini-ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- FAB: grounded navy, so the gradient compose chip stays the one standout ---- */
.sc-mini-fab {
	width: 56px; height: 56px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
	/* !important throughout: this floats over an unknown host theme whose generic
	   button:hover would otherwise repaint the FAB a light colour (white-on-light). */
	background: var(--sc-navy) !important; color: #fff !important; position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 10px 26px rgba(29,48,64,.32); transition: transform .12s ease, box-shadow .15s ease;
}
.sc-mini-fab:hover, .sc-mini-fab:focus { transform: translateY(-2px); background: var(--sc-blue800) !important; color: #fff !important; }
.sc-mini-fab.is-open { background: var(--sc-blue800) !important; }
.sc-mini-fab .sc-mini-ico { width: 25px; height: 25px; stroke: #fff !important; stroke-width: 1.9; }

/* Unread badge (component's .sc-app-unread look) hung on the FAB. */
.sc-mini-badge {
	position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 999px; background: var(--sc-primary); color: #fff; font-size: 11px; font-weight: 700;
	display: none; align-items: center; justify-content: center; border: 2.5px solid #fff;
}
.sc-mini-badge.on { display: inline-flex; }

/* ---- cluster: fans horizontally along the bottom, left of the FAB ---- */
.sc-mini-cluster {
	position: absolute; right: 68px; bottom: 4px;
	display: flex; flex-direction: row-reverse; align-items: center; gap: 11px;
	pointer-events: none;
}
.sc-mini-cav {
	position: relative; width: 46px; height: 46px; border-radius: 999px; cursor: pointer; flex: none;
	box-shadow: 0 6px 16px rgba(29,48,64,.18);
	opacity: 0; transform: translateX(10px) scale(.82);
	transition: transform .13s ease, opacity .13s ease; pointer-events: none;
}
.sc-mini-cluster.show .sc-mini-cav { opacity: 1; transform: none; pointer-events: auto; }
.sc-mini-cav:hover { transform: scale(1.06); }
.sc-mini-cav-face {
	width: 46px; height: 46px; border-radius: 999px; display: inline-flex; align-items: center;
	justify-content: center; font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase;
}
.sc-mini-cav.pinned .sc-mini-cav-face { box-shadow: 0 0 0 2px var(--sc-primary); }
/* Record-type icon (from SuiteChatComponent.icon) painted white on the type colour. */
.sc-mini-cav-face { position: relative; overflow: visible; }
.sc-mini-wh-face { position: relative; overflow: visible; }
.sc-mini-cav-face .sc-ico { width: 22px; height: 22px; stroke: #fff !important; }
.sc-mini-wh-face .sc-ico { width: 16px; height: 16px; stroke: #fff !important; }
.sc-mini-person .sc-mini-cav-face .sc-ico { width: 15px; height: 15px; }
/* DM avatar image (BuddyBoss) inside a face. */
.sc-mini-face-img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }

/* "Load older messages" — pinned above the BuddyBoss message stream. */
.sc-mini-loadolder {
	display: block; width: 100%; border: 0; border-bottom: 1px solid var(--sc-line);
	background: var(--sc-alt); color: var(--sc-blue600); font-family: inherit; font-size: 12px; font-weight: 700;
	padding: 8px; cursor: pointer; flex: none;
}
.sc-mini-loadolder:hover { background: var(--sc-blue100) !important; }
.sc-mini-loadolder:disabled { opacity: .6; cursor: default; }
.sc-mini-win.bb .sc-chat { padding: 0; }
/* Extra bottom clearance so the newest message never tucks under the composer. */
.sc-mini-win.bb .sc-chat-list { padding: 10px 12px 14px; }
/* Composer rules apply to BOTH the open-thread (.bb) and the new-message (.compose)
   windows so the compose box gets the same send-button-inside-the-field styling. */
.sc-mini-win .sc-chat-composer { margin: 0; padding: 10px 12px; border-top: 1px solid var(--sc-line); position: relative; }
/* The send button is positioned against the composer box; offset it by the composer's
   own padding so it sits tucked inside the input's bottom-right (12px pad + 6px inset). */
.sc-mini-win .sc-chat-composer .sc-post--icon { right: 18px; bottom: 16px; }
.sc-mini-cav-badge {
	position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 999px; background: var(--sc-primary); color: #fff; font-size: 11px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
/* pin toggle (top-left, on hover; always shown when pinned) */
.sc-mini-pin {
	position: absolute; left: -5px; top: -5px; width: 20px; height: 20px; border-radius: 999px;
	background: #fff; border: 1px solid var(--sc-border); color: var(--sc-meta); padding: 0; cursor: pointer;
	display: none; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(29,48,64,.18);
}
.sc-mini-pin .sc-mini-ico { width: 11px; height: 11px; }
.sc-mini-cav:hover .sc-mini-pin { display: inline-flex; }
.sc-mini-pin.on { display: inline-flex; background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
@keyframes sc-mini-shake { 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(2px)} 50%{transform:translateX(-3px)} }
.sc-mini-cav.shake { animation: sc-mini-shake .3s; }

/* ---- New-message compose chip: the app's exact .sc-app-rail-new gradient circle ---- */
.sc-mini-new {
	width: 48px; height: 48px; border: 0; border-radius: 999px; padding: 0; cursor: pointer; flex: none;
	background: linear-gradient(140deg, var(--sc-primary), var(--sc-teal)); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 20px rgba(52,126,160,.4);
	opacity: 0; transform: translateX(10px) scale(.82);
	transition: transform .13s ease, opacity .13s ease, box-shadow .15s ease; pointer-events: none;
}
.sc-mini-cluster.show .sc-mini-new { opacity: 1; transform: none; pointer-events: auto; }
.sc-mini-new:hover { box-shadow: 0 10px 24px rgba(30,193,161,.48); transform: translateY(-1px); }
.sc-mini-new .sc-mini-ico { width: 22px; height: 22px; stroke: #fff !important; }

/* Inline "open the Chat app" chip — a cluster-sized bubble next to New message. */
.sc-mini-appchip {
	width: 46px; height: 46px; border-radius: 999px; flex: none; box-sizing: border-box;
	background: #fff !important; color: var(--sc-blue600) !important; border: 1px solid var(--sc-border);
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
	box-shadow: 0 6px 16px rgba(29,48,64,.18);
	opacity: 0; transform: translateX(10px) scale(.82); transition: transform .13s ease, opacity .13s ease; pointer-events: none;
}
.sc-mini-cluster.show .sc-mini-appchip { opacity: 1; transform: none; pointer-events: auto; }
.sc-mini-appchip:hover { background: var(--sc-bluelight) !important; color: var(--sc-blue600) !important; transform: scale(1.06); }
.sc-mini-appchip .sc-mini-ico { width: 20px; height: 20px; }
/* Harden the interactive bits against host-theme :hover bleed. */
.sc-mini-new { background: linear-gradient(140deg, var(--sc-primary), var(--sc-teal)) !important; color: #fff !important; }
.sc-mini-iconbtn { background: transparent !important; color: var(--sc-meta) !important; }
.sc-mini-iconbtn:hover { background: var(--sc-bluelight) !important; color: var(--sc-blue600) !important; }
.sc-mini-pin { color: var(--sc-meta); }
.sc-mini-pin:hover { background: #fff; }
.sc-mini-pin.on, .sc-mini-pin.on:hover { background: var(--sc-primary) !important; color: #fff !important; }

/* ---- docked mini-windows, along the bottom, left of the FAB ---- */
.sc-mini-stack {
	position: fixed; right: 90px; bottom: 22px; z-index: 9000;
	display: flex; align-items: flex-end; gap: 14px;
}
.sc-mini-win {
	width: 320px; height: 460px; background: #fff; border: 1px solid var(--sc-border); border-radius: 16px;
	box-shadow: 0 20px 48px rgba(29,48,64,.26); display: flex; flex-direction: column; overflow: hidden;
}
.sc-mini-wh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sc-line); }
.sc-mini-wh-face {
	width: 30px; height: 30px; border-radius: 999px; flex: none; display: inline-flex; align-items: center;
	justify-content: center; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase;
}
.sc-mini-wh-t { min-width: 0; flex: 1; }
.sc-mini-wh-t b { display: block; font-size: 13.5px; font-weight: 700; color: var(--sc-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-mini-wh-t small { font-size: 11.5px; color: var(--sc-meta); }
.sc-mini-iconbtn {
	width: 28px; height: 28px; border: 0; background: none; color: var(--sc-meta); border-radius: 8px;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.sc-mini-iconbtn:hover { background: var(--sc-bluelight); color: var(--sc-blue600); }
.sc-mini-iconbtn .sc-mini-ico { width: 17px; height: 17px; }

/* Host the shared component thread (.sc-chat) inside the window body: fill height,
 * let the message list scroll, keep the composer pinned. */
.sc-mini-wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sc-mini-wbody .sc-chat { flex: 1; min-height: 0; border: 0; border-radius: 0; padding: 10px 12px; display: flex; flex-direction: column; }
.sc-mini-wbody .sc-chat-list { flex: 1; min-height: 0; max-height: none; }
.sc-mini-wbody .sc-chat-composer { flex: none; }
.sc-mini-wloading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--sc-meta); font-size: 13px; }

/* compose picker (reuses the app's .sc-compose look) */
.sc-mini-win.compose .sc-mini-wh-t b { font-weight: 800; }
.sc-mini-to { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--sc-line); }
.sc-mini-to > span { font-size: 13px; font-weight: 700; color: var(--sc-navy); }
.sc-mini-to input { flex: 1; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 14px; color: var(--sc-navy); background: transparent; }
.sc-mini-people { flex: 1; overflow: auto; }
.sc-mini-person { display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 13px; color: var(--sc-navy); cursor: pointer; }
.sc-mini-person:hover { background: var(--sc-bluelight); }
.sc-mini-person .sc-mini-cav-face { width: 28px; height: 28px; font-size: 11px; box-shadow: none; }
.sc-mini-empty { padding: 22px; text-align: center; color: var(--sc-meta); font-size: 13px; }

/* inline compose: "to" line + composer + sent/error states */
.sc-mini-cnote { padding: 12px 12px 4px; font-size: 12px; color: var(--sc-meta); }
.sc-mini-cspacer { flex: 1; min-height: 0; }
.sc-mini-cbar { padding: 10px 12px; border-top: 1px solid var(--sc-line); display: flex; align-items: flex-end; gap: 8px; }
.sc-mini-cinput {
	flex: 1; box-sizing: border-box; border: 1px solid var(--sc-border); background: #fff; border-radius: 10px;
	outline: none; font-family: inherit; font-size: 13.5px; color: var(--sc-navy); padding: 10px 12px;
	min-height: 42px; max-height: 120px; resize: none; line-height: 1.4;
}
.sc-mini-cinput:focus { border-color: var(--sc-primary); }
.sc-mini-csend {
	flex: none; width: 38px; height: 38px; border: 0; border-radius: 8px; cursor: pointer;
	background: var(--sc-primary) !important; color: #fff !important;
	display: inline-flex; align-items: center; justify-content: center;
}
.sc-mini-csend .sc-mini-ico { stroke: #fff !important; width: 18px; height: 18px; }
.sc-mini-csend:disabled { opacity: .5; cursor: default; }
.sc-mini-sent { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; color: var(--sc-body); font-size: 13px; }
.sc-mini-sent .ok { width: 42px; height: 42px; border-radius: 999px; background: var(--sc-blue100); color: var(--sc-blue800); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.sc-mini-link { color: var(--sc-blue600); font-weight: 700; text-decoration: none; cursor: pointer; }
.sc-mini-link:hover { text-decoration: underline; }
.sc-mini-err { padding: 8px 12px; color: var(--sc-red); font-size: 12px; }

/* Desktop-only: hard backstop in case JS mounts before a resize. */
@media (max-width: 760px) {
	.sc-mini-launcher, .sc-mini-stack { display: none !important; }
}