← All changes | assets/css/desktop.css +334 -8 1.1.7 → 1.1.10 View file →

		@@ -1049,10 +1049,12 @@
1049	1049	.os-widgets__card-close {
1050	1050	position: absolute;
1051	1051	top: 6px;
1052	1052	inset-inline-end: 6px;
1053		- width: 22px;
1054		- height: 22px;
	1053	+ /* 24px is the WCAG 2.2 SC 2.5.8 floor. The glyph inside is unchanged;
	1054	+ only the target grows. */
	1055	+ width: 24px;
	1056	+ height: 24px;
1055	1057	display: flex;
1056	1058	align-items: center;
1057	1059	justify-content: center;
1058	1060	padding: 0;
		@@ -1137,10 +1139,10 @@
1137	1139	corner-absolute — reset position + always-visible opacity. */
1138	1140	.os-widgets__chrome .os-widgets__card-close {
1139	1141	position: static;
1140	1142	opacity: 0.7;
1141		- width: 20px;
1142		- height: 20px;
	1143	+ width: 24px;
	1144	+ height: 24px;
1143	1145	}
1144	1146
1145	1147	.os-widgets__chrome .os-widgets__card-close:hover,
1146	1148	.os-widgets__chrome .os-widgets__card-close:focus-visible {
		@@ -1154,9 +1156,10 @@
1154	1156	* expose it (tapping it on a docked card would be a confusing
1155	1157	* no-op). The DOM node stays mounted either way so state flips
1156	1158	* don't rebuild chrome.
1157	1159	*
1158		- * Styling mirrors the inline close button: 20×20 round tile,
	1160	+ * Styling mirrors the inline close button: 24×24 round tile
	1161	+ * (the WCAG 2.2 SC 2.5.8 target-size floor),
1159	1162	* dimmed by default, full-opacity on hover / focus. Distinct hover
1160	1163	* color (theme accent, not red) signals "put back" vs. "remove."
1161	1164	*/
1162	1165	.os-widgets__card-redock {
		@@ -1167,10 +1170,10 @@
1167	1170	border: 0;
1168	1171	background: var( --os-ui-scrim, rgba( 0, 0, 0, 0.55 ) );
1169	1172	color: rgba( 255, 255, 255, 0.75 );
1170	1173	border-radius: 50%;
1171		- width: 20px;
1172		- height: 20px;
	1174	+ width: 24px;
	1175	+ height: 24px;
1173	1176	cursor: pointer;
1174	1177	opacity: 0.7;
1175	1178	transition:
1176	1179	opacity 0.15s ease,
		@@ -1185,9 +1188,9 @@
1185	1188	.os-widgets__card-redock:hover,
1186	1189	.os-widgets__card-redock:focus-visible {
1187	1190	opacity: 1;
1188	1191	background: var( --wp-admin-theme-color, #2271b1 );
1189		- color: var( --os-ui-fg-on-accent, #fff );
	1192	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
1190	1193	}
1191	1194
1192	1195	/*
1193	1196	* Floating widgets — absolute-positioned, inline top/left/width/height
		@@ -1739,5 +1742,328 @@
1739	1742	.os-shell--revealing #os-area,
1740	1743	.os-shell--revealing .os-dock {
1741	1744	transition: none;
1742	1745	}
	1746	+}
	1747	+
	1748	+/* A residency frame follows the window body without scrolling with its contents. */
	1749	+.os-mio-residence {
	1750	+ position: absolute;
	1751	+ z-index: 50;
	1752	+ pointer-events: none;
	1753	+ overflow: hidden;
	1754	+ container-type: inline-size;
	1755	+}
	1756	+
	1757	+.os-mio-residence[hidden],
	1758	+.os-mio-chat-launcher[hidden] {
	1759	+ display: none;
	1760	+}
	1761	+
	1762	+.os-mio-chat-launcher {
	1763	+ position: absolute;
	1764	+ inset-inline-end: 20px;
	1765	+ inset-block-end: 18px;
	1766	+ pointer-events: auto;
	1767	+}
	1768	+
	1769	+.os-mio-chat {
	1770	+ position: absolute;
	1771	+ inset-inline-end: 16px;
	1772	+ inset-block-end: 16px;
	1773	+ inline-size: min(380px, calc(100% - 32px));
	1774	+ max-block-size: calc(100% - 32px);
	1775	+ box-sizing: border-box;
	1776	+ display: flex;
	1777	+ flex-direction: column;
	1778	+ gap: 12px;
	1779	+ padding: 18px;
	1780	+ pointer-events: auto;
	1781	+ color: var(--os-mio-chat-fg, #1d2327);
	1782	+ background: var(--os-mio-chat-bg, #fff);
	1783	+ border: 1px solid var(--os-mio-chat-border, #c3c4c7);
	1784	+ border-radius: var(--os-mio-chat-radius, 16px);
	1785	+ box-shadow: 0 8px 40px var(--os-mio-chat-glow, #00000020);
	1786	+ animation: os-mio-chat-enter 180ms ease-out;
	1787	+}
	1788	+
	1789	+.os-mio-chat header {
	1790	+ display: flex;
	1791	+ align-items: center;
	1792	+ gap: 12px;
	1793	+}
	1794	+
	1795	+.os-mio-chat header strong {
	1796	+ letter-spacing: .14em;
	1797	+}
	1798	+
	1799	+.os-mio-chat header span {
	1800	+ flex: 1;
	1801	+ font-size: 11px;
	1802	+ color: var(--os-mio-chat-muted, #646970);
	1803	+}
	1804	+
	1805	+.os-mio-chat__log {
	1806	+ position: relative;
	1807	+ min-block-size: 60px;
	1808	+ max-block-size: 300px;
	1809	+ overflow: auto;
	1810	+ overscroll-behavior: contain;
	1811	+}
	1812	+
	1813	+.os-mio-chat__message {
	1814	+ margin-block: 0 10px;
	1815	+ padding: 10px 12px;
	1816	+ line-height: 1.6;
	1817	+ white-space: pre-wrap;
	1818	+ overflow-wrap: anywhere;
	1819	+}
	1820	+
	1821	+.os-mio-chat__message--user {
	1822	+ border-radius: 16px 16px 4px 16px;
	1823	+ background: var(--os-mio-chat-user-bg, #f0f0f1);
	1824	+}
	1825	+
	1826	+.os-mio-chat__composer {
	1827	+ display: flex;
	1828	+ align-items: center;
	1829	+ gap: 8px;
	1830	+}
	1831	+
	1832	+.os-mio-chat__composer os-textarea {
	1833	+ flex: 1;
	1834	+ min-inline-size: 0;
	1835	+}
	1836	+
	1837	+.os-mio-chat__status,
	1838	+.os-mio-chat small {
	1839	+ margin: 0;
	1840	+ font-size: 11px;
	1841	+ line-height: 1.5;
	1842	+ color: var(--os-mio-chat-muted, #646970);
	1843	+}
	1844	+
	1845	+@keyframes os-mio-chat-enter {
	1846	+ from { opacity: 0; transform: translateY(6px) scale(.98); }
	1847	+ to { opacity: 1; transform: translateY(0) scale(1); }
	1848	+}
	1849	+
	1850	+@media (prefers-reduced-motion: reduce) {
	1851	+ .os-mio-chat { animation: none; }
	1852	+}
	1853	+
	1854	+.os-mio-residence > .os-mio { z-index: 0; }
	1855	+.os-mio-chat, .os-mio-chat-launcher { z-index: 1; }
	1856	+
	1857	+.os-mio-chat [hidden] {
	1858	+ display: none !important;
	1859	+}
	1860	+
	1861	+.os-mio-chat__message--assistant {
	1862	+ white-space: normal;
	1863	+}
	1864	+
	1865	+.os-mio-chat__message p {
	1866	+ margin-block: 0 8px;
	1867	+}
	1868	+
	1869	+.os-mio-chat__message ul,
	1870	+.os-mio-chat__message ol {
	1871	+ margin-block: 8px;
	1872	+ padding-inline-start: 20px;
	1873	+}
	1874	+
	1875	+.os-mio-chat__message a {
	1876	+ color: inherit;
	1877	+ text-decoration: underline;
	1878	+}
	1879	+
	1880	+/* Shared MIO chrome: the same portrait with a softly revealed off-state slash. */
	1881	+.os-mio-window-toggle svg {
	1882	+ width: 20px;
	1883	+ height: 20px;
	1884	+ overflow: visible;
	1885	+}
	1886	+
	1887	+.os-mio-window-toggle__slash {
	1888	+ fill: none;
	1889	+ stroke: currentColor;
	1890	+ stroke-width: 2.4;
	1891	+ stroke-linecap: round;
	1892	+ opacity: 0;
	1893	+ stroke-dasharray: 26;
	1894	+ stroke-dashoffset: 26;
	1895	+ transition: opacity 240ms ease, stroke-dashoffset 240ms ease;
	1896	+}
	1897	+
	1898	+.os-mio-window-toggle[data-mio-disabled="true"] .os-mio-window-toggle__slash {
	1899	+ opacity: 1;
	1900	+ stroke-dashoffset: 0;
	1901	+}
	1902	+
	1903	+.os-mio-chat__activity {
	1904	+ display: flex;
	1905	+ align-items: center;
	1906	+ gap: 8px;
	1907	+ min-height: 18px;
	1908	+}
	1909	+
	1910	+.os-mio-chat__thinking {
	1911	+ display: inline-flex;
	1912	+ align-items: center;
	1913	+ gap: 3px;
	1914	+ width: 24px;
	1915	+ flex-shrink: 0;
	1916	+ opacity: 0;
	1917	+ color: var(--os-mio-chat-muted, #646970);
	1918	+ transition: opacity 240ms ease;
	1919	+}
	1920	+
	1921	+.os-mio-chat[data-thinking="true"] .os-mio-chat__thinking {
	1922	+ opacity: 1;
	1923	+}
	1924	+
	1925	+.os-mio-chat__thinking i {
	1926	+ width: 4px;
	1927	+ height: 4px;
	1928	+ border-radius: 50%;
	1929	+ background: currentColor;
	1930	+ animation: os-mio-thinking 1.6s ease-in-out infinite;
	1931	+ animation-play-state: paused;
	1932	+}
	1933	+
	1934	+.os-mio-chat__thinking i:nth-child(2) { animation-delay: 160ms; }
	1935	+.os-mio-chat__thinking i:nth-child(3) { animation-delay: 320ms; }
	1936	+.os-mio-chat[data-thinking="true"] .os-mio-chat__thinking i { animation-play-state: running; }
	1937	+.os-mio-window-toggle[data-mio-thinking="true"] circle { animation: os-mio-thinking 2.4s ease-in-out infinite; }
	1938	+
	1939	+@keyframes os-mio-thinking {
	1940	+ 0%, 100% { opacity: 0.45; }
	1941	+ 50% { opacity: 1; }
	1942	+}
	1943	+
	1944	+@media (prefers-reduced-motion: reduce) {
	1945	+ .os-mio-window-toggle__slash,
	1946	+ .os-mio-chat__thinking { transition: none; }
	1947	+ .os-mio-chat__thinking i,
	1948	+ .os-mio-window-toggle[data-mio-thinking="true"] circle { animation: none; }
	1949	+}
	1950	+
	1951	+.os-mio-window-toggle {
	1952	+ max-inline-size: 30px;
	1953	+ opacity: 1;
	1954	+ visibility: visible;
	1955	+ transition: opacity 180ms ease, max-inline-size 240ms ease, visibility 0s;
	1956	+}
	1957	+
	1958	+.os-mio-window-toggle[data-mio-available="false"] {
	1959	+ max-inline-size: 0;
	1960	+ opacity: 0;
	1961	+ visibility: hidden;
	1962	+ overflow: hidden;
	1963	+ pointer-events: none;
	1964	+ transition: opacity 180ms ease, max-inline-size 240ms ease, visibility 0s 180ms;
	1965	+}
	1966	+
	1967	+@media (prefers-reduced-motion: reduce) {
	1968	+ .os-mio-window-toggle,
	1969	+ .os-mio-window-toggle[data-mio-available="false"] { transition: none; }
	1970	+}
	1971	+
	1972	+/* The launcher stays available; the companion only speaks when invited. */
	1973	+.os-mio > canvas,
	1974	+.os-mio > .os-mio__handle {
	1975	+ transition: opacity 180ms ease, visibility 180ms;
	1976	+}
	1977	+
	1978	+.os-mio[data-mio-visible="false"] > canvas,
	1979	+.os-mio[data-mio-visible="false"] > .os-mio__handle {
	1980	+ opacity: 0;
	1981	+ visibility: hidden;
	1982	+ pointer-events: none;
	1983	+}
	1984	+
	1985	+.os-mio-callout {
	1986	+ position: absolute;
	1987	+ z-index: 2;
	1988	+ display: flex;
	1989	+ align-items: center;
	1990	+ gap: 10px;
	1991	+ max-inline-size: calc(100% - 16px);
	1992	+ box-sizing: border-box;
	1993	+ padding-block: 6px;
	1994	+ padding-inline: 15px 6px;
	1995	+ border: 1px solid var(--os-mio-callout-border, #d6b8cb);
	1996	+ border-radius: 22px;
	1997	+ background: var(--os-mio-callout-bg, #ffe0cf);
	1998	+ color: var(--os-mio-callout-fg, #382b38);
	1999	+ box-shadow: 0 4px 16px var(--os-mio-chat-glow, #00000020);
	2000	+ font-size: 12px;
	2001	+ line-height: 1.5;
	2002	+ font-weight: 500;
	2003	+ pointer-events: auto;
	2004	+ animation: os-mio-chat-enter 180ms ease-out;
	2005	+}
	2006	+
	2007	+.os-mio-callout os-button::part(button) {
	2008	+ inline-size: 26px;
	2009	+ block-size: 26px;
	2010	+ font-size: 17px;
	2011	+ line-height: 1;
	2012	+}
	2013	+
	2014	+/* A small rounded tail joins the companion without a second outlined shape. */
	2015	+.os-mio-callout::after {
	2016	+ content: "";
	2017	+ position: absolute;
	2018	+ inset-block-end: -4px;
	2019	+ inset-inline-end: 18px;
	2020	+ inline-size: 8px;
	2021	+ block-size: 8px;
	2022	+ background: inherit;
	2023	+ border-inline-end: inherit;
	2024	+ border-block-end: inherit;
	2025	+ border-end-end-radius: 3px;
	2026	+ transform: rotate(45deg);
	2027	+}
	2028	+
	2029	+.os-mio-callout[hidden] { display: none; }
	2030	+
	2031	+@media (prefers-reduced-motion: reduce) {
	2032	+ .os-mio > canvas,
	2033	+ .os-mio > .os-mio__handle { transition: none; }
	2034	+ .os-mio-callout { animation: none; }
	2035	+}
	2036	+
	2037	+/* Response controls belong to their message; all layout follows inline flow. */
	2038	+.os-mio-chat__actions {
	2039	+ display: flex;
	2040	+ flex-wrap: wrap;
	2041	+ gap: 8px;
	2042	+ margin-block-start: 12px;
	2043	+}
	2044	+
	2045	+.os-mio-chat__action {
	2046	+ display: flex;
	2047	+ flex-direction: column;
	2048	+ align-items: flex-start;
	2049	+ gap: 4px;
	2050	+ min-inline-size: 0;
	2051	+ max-inline-size: 100%;
	2052	+}
	2053	+
	2054	+.os-mio-chat__action os-button::part(button) {
	2055	+ white-space: normal;
	2056	+ overflow-wrap: anywhere;
	2057	+}
	2058	+
	2059	+.os-mio-chat__action-status {
	2060	+ font-size: 12px;
	2061	+ color: var(--os-mio-chat-muted, #646970);
	2062	+ overflow-wrap: anywhere;
	2063	+}
	2064	+
	2065	+.os-mio-chat__composer os-textarea::part(textarea) {
	2066	+ white-space: pre-wrap;
	2067	+ overflow-wrap: anywhere;
	2068	+ overflow-x: hidden;
1743	2069	}