/* geist-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-cyrillic-ext-wght-normal-DjL33-gN.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-cyrillic-wght-normal-BEAKL7Jp.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-vietnamese-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-vietnamese-wght-normal-6IgcOCM7.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-latin-ext-wght-normal-DC-KSUi6.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-latin-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-latin-wght-normal-BgDaEnEv.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* geist-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-mono-cyrillic-ext-wght-normal-X_5orZeX.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-mono-cyrillic-wght-normal-DiZS0aHC.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-mono-symbols2-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-mono-symbols2-wght-normal-CO5SzqOn.woff2) format('woff2-variations');
  unicode-range: U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F;
}

/* geist-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-mono-vietnamese-wght-normal-DadHysG0.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-mono-latin-ext-wght-normal-Bwz-egvJ.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-mono-latin-wght-normal */
@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./geist-mono-latin-wght-normal-XN7g48iV.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* fredoka-hebrew-wght-normal */
@font-face {
  font-family: 'Fredoka Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(./fredoka-hebrew-wght-normal-DdnsCkLr.woff2) format('woff2-variations');
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

/* fredoka-latin-ext-wght-normal */
@font-face {
  font-family: 'Fredoka Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(./fredoka-latin-ext-wght-normal-CYrqKuxd.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* fredoka-latin-wght-normal */
@font-face {
  font-family: 'Fredoka Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(./fredoka-latin-wght-normal-DM6njrJ3.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ibm-plex-sans-arabic-arabic-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./ibm-plex-sans-arabic-arabic-400-normal-CyU-ddYS.woff2) format('woff2'), url(./ibm-plex-sans-arabic-arabic-400-normal-EA1o-u_Q.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-cyrillic-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAWoABAAAAAACvAAAAVRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAFQIUgmCcxEQCoNgg18LDgABNgIkAxgEIAWDdgdGDIRCG8MJKJ4DbtM8oq6K1GltHYXh6GN0NNoHEa1Z1TOzgEkOAB+JFIMGACFf3kedPPkE5PLzutxLRezs50Q1l6oGr4ldGd1Ggv/WhwVd2Rj2jgUC2/2Eu0iDNJBpHlFGQZBgFfr/95ep+/Zf0dK4dJD1w0Pad61USml1fIGCAa11/MCSDhQMxygAGDXb0qHaBZUnx4AI4FOCixg2oqIBEjAAmYAxmnbUon9eMMda2yBntU4MQQ6AObcbtVWOYIHap1oAxqo/WxbgDksCoQJLW0qjNKABBQAwulci4gyouMbzbzEwq9TsCiAGA6CMSgMV4gEFaCBHNALkiGEQIMRFYYCICs8qPmWCfUsy51/tfFYDBOVHyRdyg59VMbcB5bTEbtJFmTptKrTpUMnPiVKjCRBm7JAio4mTdcQpQ6jSEbymFnzJFmg3MN6kWe+FODQby/9NDMPqPh564QINRtohFO6lWLnRHqPaYaSJ1GB0O0SzWkLXtYgYFKmIjO6IVNCop7WDNRIHu4/ojMzWIZap2ZtOnJYkO4jhWKZ1MoxTgzGrEROJzJYk6luH9KH7mIv2GKtdOWK1tKaltoXdS3EcD+VNIkkUZltrWhoZikMW6Ibt86IqLvYWnBycqN3kBty1PPW+Z5DbYPbexyoikt3rtziRaoZyYVo9qwJ8fxyz7kgtCWNZmTTAsyI+jsO22OAyhkMylAbjtSuvbwlTjPX+gxog0Lj4JMVn/ksAYAMQAhoYAJgAADAgJRAFAAgY0yM5PrKXRFa4eN/d33dl9XJ+EhHMDCU6L6t3kyK31XWn95L37ny7w0pBMvjTIsITZ2DvneS9e77ao9so5V54uS+6VeF0JesrODU8Spk3VlUWWny9UBSa3iy1+s1OWZj3m3q8XGZTl+RXcP1y4faE0NLrheLQzOJyjpt2uZVlwkjd8qD+LwCkMbh4qSwHxiQxXAfD8MTQsewDhY3ByOMWJB9GgVScx50M81XFrGyueXSxqJho+YVGHhBRDDZ7ctQxEA1EyPzBsVwnleekotbZoBMZhAPpq7a2IEkfqcy/hp/C73wC3zrJQ35jUVKTGIpPypH6+0C+HGlbD4mTmKo/FhXUgg914EGjl5mko6qLRDo+q94ABCCFf4zv2ujr6f3OXU+/B+DF8pf1APBq6v733S/aeOvGBICHAkDgi4mWnjHUDw6E0syW+yCBz1FdbURLzhbAVlPJ8xZn9mA+KMx/0AjgskI0YjxgTvQQndAQaTpFLOg0o2CdoZcVnUWRLp1NF2Zv7HeBVSYq1Qgn3aRx7cb0oqoJ47RfqdcArWFjuulUo1UoFVSpxoBOM+q1GjIuYEyrNr3aadTp1G3SgFZjmnQaW/PWYUMQAy0DPQM/jCSMgq0osIAWrxN2BfvtOt9Stj5nGhkybMTsi/m7XzKPGE3ZAQU4Nmos8GvXODhgAJrnH2feTgWdv3JKpw5aUQCQAf2Uj7ABEYUWLcbZtLpXDx8lDaM+aKaXBvQYmh0g5IpqJtqSPNFwekmtEDOJfIDbnJ2VL8xBDcnGSQX8LBT4suABrytMRQVh2WSmog89Of5CzQzFbOQjzzKs0CBAhwumxQQ+RrLDbeYp5+JnOXSlRCqQhrNcxnDTEcrBWR5btalkQ6Lrc5ZdQZGmlLMCGiAFMiXhrJD1LqEZ8cEVMfZUC2OGsVER3G5hgt50JDiGmVTKQ4f0p0YqpbhnZbHRECmUjn62Yq65/Nx8jsZ3EypOynVdJQ+VQkThoD06AacZw5856YBBeIiNir+WP5B/hU5Sm/iDRIsIqA2QxFFJ1ggkUJIMFP4achk=) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAASQAA0AAAAABZQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAAAB4AAAAeRHRMdUdTVUIAAAFQAAAALQAAAC4SbCJ7T1MvMgAAAYAAAABVAAAAYGoJqFtjbWFwAAAB2AAAADwAAABUAMohV2dhc3AAAAIUAAAAEAAAABAAGAAjZ2x5ZgAAAiQAAADAAAAAwELfCadoZWFkAAAC5AAAADYAAAA2QI6502hoZWEAAAMcAAAAHwAAACQg+BoJaG10eAAAAzwAAAAXAAAAGAcQAE5sb2NhAAADVAAAAA4AAAAOAIgAiG1heHAAAANkAAAAHAAAACAAJwL8bmFtZQAAA4AAAADfAAAB9iheQ6xwb3N0AAAEYAAAADAAAABG/5SrMAABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBi0AFCZhc3nxAGicSixCQGkZzEkjwGEQYQYAER//+DSACSpgcYAAAAeNothbUBQlEUxXINXeItQYVToTVuHSMwAxXDUFGxGPblSILrVe4E6E1XwKywHOhIqybaDAs1/oPsSpnJaJHkBenh3c8Z/KLrhAwB1PUJJKo/6ZYKbgAAAHjaY2BgYAJiZiAWAZKMYJqFwQFI8zBwAOVYgCxeBgWGBQpb/v8HspF5jP+//n/8P/V+AEgfAgAAknEOOQABAAMACAAKABAAB///AA8AAgAgAAABuAMMAAMABwAAMxEhESUhESEgAZj+pAEg/uADDPz0PAKUAAEALv/0AkYCxgA1AAAFIi4CNTQ2NyM1MzchNSE2NTQmIyIGByc+ATMyHgIVFAczFSMHIRUhDgEVFBYzMjY3Fw4BATwwTTYeCAVKfab+3QF3CUE6J0YeNSpmNyxJNR0JTn6mAST+iAgIRzwqSykzKG4MHDFFKhYjD0NgQxYdNjUeIzUuKBgtQSgiGENgQw4gFDw8Iys3MDEAAQAAAAEZ24PIZ+JfDzz1AAkD6AAAAADhZaMnAAAAAONTufD/Nf3IHYMEMwAAAAkAAgAAAAAAAHjaY2BkYGCx/ZfIwCC74b/p34+yzUARVMAGAJdPBjgAeNpjvMGgwAACbyCYqYRBD0QDADUWBGIAAAAAFAAUABQAFABgAGAAAHjaY2BkYGBgYwpmEGNYzsAO5iEAMwMjABl9ASZ42pzQgUcDUQDH8c+1lYL9AYEHCLq1mVQDFSlKKULAmrWOs513iwL6s/rz4jyXBRLwfbz38fOw7UVH1t3BU3aYOrOX9VJv6GVSd1z6St115DP1pt3W2TI0St0zwquVlcqJvr7aVFSorNRytUIptxTN9d26cO3KmRt3SjPvHkws1E5FE88KU/vuzcy9KU1Ej2Zioy0tBAO5gQODZIVWC60X1sTwS/wRxq0x/sey9dNf15xbqnyICvPmD4Nhs+ZYkJTmVlTJm9elUvgeko5iMC8VSIPCpgxIpjDoAQAxiEkuAHjaY2BiAIP/CxlsGLABNiBmZGRiYGZkZmRhL83LNDAwcAHRRgZOJhC+owEAx1QIaw==) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-sans-arabic-latin-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./ibm-plex-sans-arabic-latin-ext-400-normal-BpLfq-63.woff2) format('woff2'), url(./ibm-plex-sans-arabic-latin-ext-400-normal-BeVLg08x.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ibm-plex-sans-arabic-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./ibm-plex-sans-arabic-latin-400-normal-Bo5KPYvw.woff2) format('woff2'), url(./ibm-plex-sans-arabic-latin-400-normal-CFZh1unN.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ibm-plex-sans-arabic-arabic-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./ibm-plex-sans-arabic-arabic-500-normal-C4MQITzh.woff2) format('woff2'), url(./ibm-plex-sans-arabic-arabic-500-normal-DPXcppbm.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-cyrillic-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAWwABAAAAAACsgAAAVZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAFQIUgmCcxEQCoNQg1MLDgABNgIkAxgEIAWDSAdGDIRaG6EJCJ4D7s4iTIrohOFv3Sgh5LEYFvrgefLP79yZeVCSD3gpVd9b2R3clGItqN0c6dSTAwCym1eADQgKoFS2WQGAVelGM89V+e3iSLh1WWFLy8O76yXc2iIK0kC+5hEFFEGQ4F3+f7f+//eq/vv+0pyAreXhaJD2pjlsD0pAJwc/aMYfmGjSglWk2FOTap1LNTWnz4ESJux2+Jz2TgTwySdGDPFFJqAYA5AESJK1MSjv681zJRqD+hVdW4B6AEWDRu2U32DBUU8xAIz+tWUe0MlQLCqwtaU0SgMaUAAAIzuNiEtQfI31XxQwK0QsAmIgAChXnQGKFQEK0EC6PARIl88AQIiLwgARxW7Wx0lwfkqS/7yRfAQIVn9jFtqEcVbDzvGZE6bS64p+Epbty1iRcpGf3bxzgDDZA8plJBRKExQql1CdIVRvCdUCKD8FbQbGm8A8EGLvTCz/t5yCISWLh55/UYqRNgh5OY8gl6UY1QYjtZQUo9sgn6C7fGNMB4v4Yn5kgi/2oUw0IZgutkScSfIz5UhgcnBj/5SghAEseTaSZFmTFGPkcGMuMnMCzQjhMxbdeCrFWG3CuFd3jzCjjLDeQwoDPCxJUcgrXBphtm6PK8KyySH7iS3H9D7X/OzgROxa7XfF3OPWPUCXmLl3OnMdlLDeVki+jJ22YS4ZkwKkI4YRbtddXixHE2LcR/CSyrw3N0IsSbEeKcZrEx5nvB6n2fxXpUCgcfFJKEomxQGwAQgBDfQHjAcAGJAYCgAQMKZ7mRPZi8oK/IX8/e/35fhIU6kE08uJ6MAR4vh6KX+3d+r1g7KTe5/usf7Ul+FPqYDwIOv/spMH9skXd1H5wTAU+bfy3+QuU49I1sX+/upQf4BevzGpnF7q05R32ld3u1vv93WfzfSZ5OHWS2JnT2WtOULvXp1URS/fy9P91XX7JJzFc2FO9RPgDIOLl1JrxJgEhptwCkMDQ/ucBXIai5Gnp5B4mKenSALjPO2gzJFPzyDgLET5onwdq2u154jIB9c9HLV3FsB+ESdFqCZnHkCENAfhErrpmXsKC1Dja01ZfNRfp4Y4PjI3i4f8xaJEllgL+e6Mpv43J9vRdl1DLIEp/wARVIEP1eBBnYdSvIOksxI6fKhCCQQgOb/EY7dcqrL8Kfb0R4BXyTuVAPBmPPtT2embwni+FQAPBYDAjyVSuJOwt1uAYKVly0OK+b92RbUKBlxeUU+r0dDoNgcBwAeFeYxGAJdl45TxgFmpmBVCN98VihjXFJphDtZNqsIiV0Jh04HGE+M6sMLaRrLERN68Km4F55asWSX72TlzZBatSJMb5hMR5EIbMSdpy7ioBaucVkTFcOKkaEkJnHXzpiStWMVZtABRklFSUHLALH5cxHwPjM2nrZsTtSLnlAmhZhM1xqjdbdGS7a/gS3+dJKJ6wqwRaqzJnpXGJ5M8nTMHFfpWnZ7kEZK+jVu+UUYEAMkYa3WHDYgotGgxzsoFTkFeD5dUCpfGLehUYKiTI2QS1RGDOIsILr6i1o/SpBJw616TzUqlh1jN5AbDJoxgJtOhIZpZMYhOP7NpBtMb0KaG2AyzhZj0aaF5i2GMpMT9vE0fKl1I1B3GczbpDnUIuI9KN7N5jGIh164ebD71zvJROUNsATs1Ydh1E1tINaRZjVJqjpgpyNiT5LYYPZ6LLU5Hvdo0qaL5hAFdJBrYMIXWAEpLILWYbmBOoyfVkWqYzkypG8mcgWan/rr1TNP8TbJHE25CTo5inDoM/76BHP1JEK1HspE8SQ5ACWwlOUC0QBvWAg22ND+guAWB/iAbyBPJCaj0QAfgCQ==) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAASMAA0AAAAABWgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAAAB4AAAAeRHRMdUdTVUIAAAFQAAAALQAAAC4SbCJ7T1MvMgAAAYAAAABUAAAAYGpwqYJjbWFwAAAB1AAAADwAAABUAMohV2dhc3AAAAIQAAAAEAAAABAAGAAjZ2x5ZgAAAiAAAADCAAAAwuo/LUZoZWFkAAAC5AAAADYAAAA2QVy51GhoZWEAAAMcAAAAHwAAACQhxhq6aG10eAAAAzwAAAAXAAAAGAcXAEtsb2NhAAADVAAAAA4AAAAOAIcAh21heHAAAANkAAAAHAAAACAAJwLvbmFtZQAAA4AAAADZAAAByCMaQG1wb3N0AAAEXAAAADAAAABG/6CrQQABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBi0AFCZhc3nxAGicSixCQGkZzEkjwGEQYQYAER//+DSACSpgcYAAAAeNothTEOQEAUBec/i01cYo+hUdCJbE8j0TnLnkelcii1IExmMjglO8lBSSMwfLeZaLU3VUWWK+MR3sRP38VgB4TNNdcCbtUUsBZAXjsQKG8Zewr9eNpjYGBgAmJmIBYBkoxgmoXBAUjzMHAA5ViALF4GBYYFClv+/weykXmM/7/+f/w/9X4ASB8CAACScQ45AAEAAwAIAAoAEAAH//8ADwACACAAAAG4AwwAAwAHAAAzESERJTMRIyABmP61/v4DDPz0TQJyAAEAK//0AlACxgA2AAAFIi4CNTQ2NyM1MzchNSE+ATU0JiMiBgcnPgEzMh4CFRQGBzMVIwchFSEGFRQWMzI2NxcOAQFEM1E4HQUDSHWX/vQBcAMEODMmRBs+Jmk6L0w2HQMETHuUAQ/+jwtANiZHJz0mbQweNkgqEBsLTVNNChUMMi4bIEQrKhswQicOGwxNU00WGzY3HipFLjMAAAAAAQAAAAEZ2ztmI5hfDzz1AAkD6AAAAADhZaMmAAAAAONTufD/I/3AHmMEPQAAAAkAAgAAAAAAAHjaY2BkYGCx/ZfIwCDX9V/57wm5ZKAIKmADAIxsBbkAeNpjvMGgwAACbyCYqZpBG0QDADU4BGYAAAAAEwATABMAEwBhAGEAAHjaY2BkYGBgY/JmEGNYxMAO5iEAMwMjABhMARl42pXQgUZDYRTA8d9qZcEeIPC9QHdbJmqgYkRTihCwttu63Lbru1sKerqeoCeK68MGCPgfzvnhoOPVvlb7CM+tTuqWM7+p93T9pN439p26vbVz4Ng89aG+YequId6srVUu9PTUZqJCZa2WqRVKmZVooefO2K0bVybulXKfHk0t1S5FUy8KMycmcnOFjXdPcrGxVpaCgcxA32CrRkkNRv/2H+QWNkpTUXKke0EShB0j7BjXVipfosKi+Upwqm/gXJDMZiuqZI1VKoWti7qZcrVc9NHo2R/ilEKpAAAAeNpjYGIAg/9rGXwZsAE2IGZkZGJgZmRmZGEvzcs0MDBwAdFGBk4mEL6jAQDOGwiI) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-sans-arabic-latin-ext-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./ibm-plex-sans-arabic-latin-ext-500-normal-Ck_W4G78.woff2) format('woff2'), url(./ibm-plex-sans-arabic-latin-ext-500-normal-eJxPnL1P.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ibm-plex-sans-arabic-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(./ibm-plex-sans-arabic-latin-500-normal-Cd6jVIg7.woff2) format('woff2'), url(./ibm-plex-sans-arabic-latin-500-normal-BletK1Hp.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ibm-plex-sans-arabic-arabic-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./ibm-plex-sans-arabic-arabic-600-normal-0pRdybE_.woff2) format('woff2'), url(./ibm-plex-sans-arabic-arabic-600-normal-MJZ0liF5.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-cyrillic-ext-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAXEABAAAAAACuAAAAVrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAFQIVgmCcxEQCoMsgzILDgABNgIkAxgEIAWDVAdGDIUGG7wJCB4H1c0P0w9MhnQ9uzoNh1fw0P9v2rn3PcQS0kK8k0vE8JrFiDhxqEeouNCVP5XfnWH9hdX5N7OvLjy8u15iba0WUZAG8jWPKOODE7zL/+/a//9e1TfO88zjYwsGQxEM4Fjvvp+buTsWjjFBA9RaQcfCaBfYWEC1lmtUAKypTXOZjG0ssIJh/6o+EgHYKVdOxDr6RrGiA+QARLaAAO3nxXv/5BSeM3lwNx5A1mm6vE0mMIFMUxP0/tliA4m0zCqkw6KZpIbUAA2QAADds1+Jl0A9+qr/J6FvlUmFaAGQdpkFFAsgAQ3w0BCAh04zcGJFogMulAf6kzlgvyRy//hK6jiCwXsrMqLPem0Sthi0U5+Fgm7S5ZALbnXYCdskxHVott1ZtwBnbilO0Y1Z7MMs7ThlFqf82pJNn9KAwDKwxROPCXFL0hC5SwaxOosNbeOGoIEIKNW+LZYRm4IGMmAgGn1BAy2gOjJaTcdwoiqp0irdPZNWHWrr5ExGrzHhFaek0smwyjAS25r5o+HLNCfL5pakksnlQQNdj+vZdBIltV2Jbw/7fm4EDUyBXpXRauOJoUTmbKzMyVhY4POp9sxL8cS4Givz9WGfMV84TFunthVfnVpy5kafsqrJkSib/TDJm2a7Vb7M2Thalq5Ktr0MXgp+BaK5YKA8XatpN8TZ+Bp5FqrMhaahlE2WDf+XsaCBLdA7kmiPlfl8ySACDSt23Cy5nHwAzAA4AQ1YCXoBgA78TQIAAnR9ocPiMk85TPbJ9LtvvivO3V1kF44Ju3DdLs69ak/Hx198z3H9nTfe4Wx2YB914byDs7/j+ntNY8+9rZx3OJsmvl/3/fIux+LhisPlPY2uquKukX3Xe2+Mng2F4YZQ37K2eN12/6pof3m8vLW2dKJ39NjVXjmyO+5ZeGFBTauaiA317FqYBcjSsWIrmLPMQHcb8DoG2sOAcJkFykbSQHxswP2iUyq6lo8jUQVLqYUWIZmsVFeqZuutpmdxUYr9bukKt5gIc9HEhVzfovE7F2L9LHbk3/PGfOwLbIi/DS43w/NoqfSkib+zCtHoppPy3Aa+Txy2tJraaQ210XoglwctETaCTxqJIgBR8lHf5kBmY/7Kf6w27XuAL1IP1wN8NTL7h6IbT7Z/9BHAhgRAwM8jV5FF5NEeCAZeZvE+SurnckieoZ5Twt1ZtlPoERYEAHaQ6P+hIQArm5tVug1YkzzWIVjuQ4ckj5cdGj3OH9SlDhOltjrMLLQQ8jABWx0cWfZaLjz5gGn7bePhoJUhhAE76WfZY78twgZ16NOtVb+4nVKOGjFptwNa7DdpyjbTgkak7LJNqz12mjEuZb/ud/fYTYkKiYqItrjiAKmw90fR4fVbHLLTpP2aCa2MSodV8q2gjTb2OvYh2paPaijzLzq6jJIiYtiftJDu0Z12UpnaARZSlKZ+5WEpM0IkAOQiYdCHGRBCoglN6JZDu7dFjIpheH6kdSF/Y0vEAL8sQRHpF7WhmEZffMxCfpWK5QNW/4uU8KtWzsPZnleqjlJiDoeRhMsEbZbwq+JdPVnSbaWwFSWgxdlRtcoUYLLOiJhFCYswYaLJQpcpl643s1iAT4mdbKHDMsGEczFhZYFGZy6Wh7ZLhCA8l9nZbkJMVLm5zMEJMwYsVW0mO6mnFDdox3oX/ZpEVD/meB4Rdddan0+DKmWK3g7dwox34eQCYXUqWpiDwBrzgs+1iJ9vvUeTBerMO3K9V7tl/Cq+YH2hQS0WqPnK1UUmdFqizl1IVhkrFr8B/8IFWZpUEAepaBZ7xQPMjYdkIQyxhw9qE9QBaD6e5YeBTU7sEfc3fleVZ4yrwgi4GwAA) format('woff2'), url(data:font/woff;base64,d09GRgABAAAAAASIAA0AAAAABWgAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAAAB4AAAAeRHRMdUdTVUIAAAFQAAAALQAAAC4SbCJ7T1MvMgAAAYAAAABVAAAAYGrVqptjbWFwAAAB2AAAADwAAABUAMohV2dhc3AAAAIUAAAAEAAAABAAGAAjZ2x5ZgAAAiQAAAC4AAAAuIJK/GhoZWFkAAAC3AAAADYAAAA2QeK54WhoZWEAAAMUAAAAHwAAACQiTBstaG10eAAAAzQAAAAXAAAAGAcbAEhsb2NhAAADTAAAAA4AAAAOAIIAgm1heHAAAANcAAAAHAAAACAAJwLrbmFtZQAAA3gAAADgAAAB1CR4QVVwb3N0AAAEWAAAADAAAABG/6irTAABAAAACgAcABwAAURGTFQACAAEAAAAAP//AAAAAAAAeNpjYGRgYOBi0AFCZhc3nxAGicSixCQGkZzEkjwGEQYQYAER//+DSACSpgcYAAAAeNothQEGgEAUBee/Npu6xF4jhAKSANggAjpLB+gkgUAnS5saMwanXZEctKXD8N1motWFqfJZrowkvImfvhuDXRAO19wLuFVTwFoAlTqBgH8A6joKfQAAAHjaY2BgYAJiZiAWAZKMYJqFwQFI8zBwAOVYgCxeBgWGBQpb/v8HspF5jP+//n/8P/V+AEgfAgAAknEOOQABAAMACAAKABAAB///AA8AAgAgAAABuAMMAAMABwAAMxEhESUzESMgAZj+wOjoAwz89FgCXAABACj/9AJXAsYAMwAABSIuAjU0NjcjNTM3IzUhNjU0JiMiByc+ATMyHgIVFAczFSMHIRUhBhUUFjMyNjcXDgEBSTZTOB0DAkhxjP0BbAYzLkw0RCNrPTFONh0GS3mJAQL+kgY5MyVDJkUlbgwgN0sqDRQJU0xUDxYvKjpRKCwdMUMmGhhUTFMRFDQ0IShSKzUAAAEAAAABGdsFooBeXw889QAJA+gAAAAA4WWjKAAAAADjU7nx/xf9tB71BFMAAAAJAAIAAAAAAAB42mNgZGBgsf2XyMAgL/Ff/O9aua9AEVTABgCI7wWzAHjaY7zBoMAAAm8gmKmeQQNEAwA1RQRnAAAAABMAEwATABMAXABcAAB42mNgZGBgYGNyZRBjWMLADuYhADMDIwAX4AEVeNqdkAVqA0AQAKfuxYoVuwfUXZC6u7dY3TUenL4vL8hrMhBP0HA2e+sLdPJMC02tXcBN00CBm1ggW+Bm+snk2XuH/wK3Vti0MchrgduZcuW5X0JNzPWr/agrygMR3pRj8ghR+dP3hwgv6g/ZYI9tVtjnSM0TKU6541vLZSLSPW/GGOZU3Ze8wo92j1woRzCe8jeBcUY8Y54yLRYiB6mRHCfKL8TlOyKlWIUYUiGKVBkn1MVZ9f0lTYQ3XnBCBCawQualQly0IqLdCMbj0xUqPKIo8eT75JvwfmQkB3SuRO942mNgYgCD/1sZIhiwATYgZmRkYmBmZGZkYS/NyzQwMHAB0UYGTiYQvqMBANKMCJs=) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-sans-arabic-latin-ext-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./ibm-plex-sans-arabic-latin-ext-600-normal-DjDAeNQD.woff2) format('woff2'), url(./ibm-plex-sans-arabic-latin-ext-600-normal-DT29Q8HW.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ibm-plex-sans-arabic-latin-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./ibm-plex-sans-arabic-latin-600-normal-KrqB56Mw.woff2) format('woff2'), url(./ibm-plex-sans-arabic-latin-600-normal-Dk5eISD_.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Fluffy — bold and simple.
   True black, white type, one vivid blue that belongs to Fluffy. Solid surfaces, no haze. */

:root {
  --bg: #000000;
  --s1: #0e0e10;
  --s2: #161618;
  --s3: #1f1f22;
  --line: #222225;
  --line-2: #303034;
  --ink: #ffffff;
  --ink-2: #a1a1a6;
  --ink-3: #6e6e73;
  --icon: #d1d1d6;
  --blue: #1f6fff;
  --sky: #64b5ff;
  --pink: #ff375f;
  --green: #30d158;
  --red: #ff453a;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Arabic', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Arabic', system-ui, sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
html, body { background: var(--bg); }
body { font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden; user-select: none; letter-spacing: -0.01em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 10px; }
/* Text fields never get a ring: typing is focus enough. Keyboard rings stay on buttons and links. */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
::selection { background: rgba(31, 111, 255, 0.45); }
[dir='auto'] { unicode-bidi: plaintext; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; }
.dim { color: var(--ink-3); }
.good { color: var(--green); }
.bad { color: var(--red); }
.grow { flex: 1; }
.link { color: var(--sky); }
.link:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2a2d; border-radius: 10px; border: 3px solid var(--bg); }

/* ---- shell -------------------------------------------------------------------------------- */

.app { position: relative; height: 100%; display: grid; grid-template-columns: 84px 1fr; grid-template-rows: 56px 1fr; background: var(--bg); overflow: hidden; }
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.nebula, .grain { display: none; }

.topbar { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; position: relative; z-index: 5; }
.topbar-drag { position: absolute; inset: 0; -webkit-app-region: drag; }
.wordmark { position: relative; margin-left: 96px; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.045em; color: var(--ink); pointer-events: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-right: 18px; position: relative; -webkit-app-region: no-drag; }
.pill, .spend { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-2); color: var(--icon); font-size: 13px; font-weight: 500; transition: background 0.15s, color 0.15s; }
.pill:hover { background: var(--s3); color: var(--ink); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.pill-dot.ok { background: var(--green); }
.pill-dot.warn { background: var(--pink); }
.pill-dot.off { background: var(--red); }
.spend-track { fill: none; stroke: #333337; stroke-width: 2.6; }
.spend-fill { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; transition: stroke-dasharray 0.5s var(--ease); }
.spend-fill.hot { stroke: var(--red); }
.spend-text { font-variant-numeric: tabular-nums; }
.stop-all { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--icon); background: var(--s2); border: 1px solid var(--line-2); transition: color 0.15s, background 0.15s, border-color 0.15s; }
.stop-all:hover:not(:disabled) { color: #fff; background: var(--red); border-color: var(--red); }
.stop-all:disabled { opacity: 0.3; }

.dock { grid-column: 1; grid-row: 2; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0 20px; }
.dock-pill { display: grid; gap: 6px; }
.dock-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--icon); transition: color 0.15s, background 0.15s, transform 0.2s var(--spring); }
.dock-btn:hover { color: #fff; background: var(--s3); }
.dock-btn:active { transform: scale(0.92); }
.dock-btn.on { color: #000; background: #fff; }
.dock-tip { position: absolute; left: 56px; top: 50%; transform: translate(-4px, -50%); padding: 6px 11px; border-radius: 10px; background: #fff; color: #000; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.15s var(--ease); }
.dock-btn:hover .dock-tip { opacity: 1; transform: translate(0, -50%); }
.dock-badge { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }

.main { grid-column: 2; grid-row: 2; position: relative; z-index: 2; min-width: 0; min-height: 0; overflow-x: hidden; }

/* ---- Fluffy ------------------------------------------------------------------------------- */

.fluffy { position: relative; transition: transform 0.4s var(--spring); }
.fluffy-glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle at 45% 42%, var(--fl-glow, rgba(31, 111, 255, 0.55)), var(--fl-glow2, rgba(31, 111, 255, 0.18)) 45%, transparent 70%); filter: blur(26px); transition: background 0.6s, opacity 0.6s; }
.fluffy.m-needs_you .fluffy-glow { background: radial-gradient(circle, rgba(255, 55, 95, 0.55), rgba(255, 55, 95, 0.16) 45%, transparent 70%); }
.fluffy.m-offline .fluffy-glow, .fluffy.m-sleeping .fluffy-glow { opacity: 0.3; }
.fluffy-canvas { position: absolute; inset: 0; display: block; }
.fluffy-fallback { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--fl, #1f6fff) 58%, #fff), var(--fl, #1f6fff) 55%, color-mix(in srgb, var(--fl, #1f6fff) 60%, #000)); }
.fluffy-eyes { position: absolute; inset: 0; overflow: visible; }
.eyes { transition: transform 0.12s linear; }
.eyes rect { fill: var(--fl-eye, #fff); transition: height 0.08s, y 0.08s; }
.eyes path { fill: none; stroke: var(--fl-eye, #fff); stroke-width: 8; stroke-linecap: round; }
.fluffy.m-needs_you { animation: bounce 1.1s var(--spring) infinite; }
.fluffy.m-happy { animation: hop 0.7s var(--spring) 2; }
.fluffy.m-listening { transform: scale(1.04); }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5%); } 60% { transform: translateY(1%); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-7%) scale(1.04, 0.97); } }
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkles span { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(90deg, transparent 44%, #fff 50%, transparent 56%), linear-gradient(0deg, transparent 44%, #fff 50%, transparent 56%); animation: sparkle 1.2s var(--ease) forwards; opacity: 0; }
@keyframes sparkle { 0% { transform: translate(0, 0) scale(0.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.2); opacity: 0; } }
.fluffy-z { position: absolute; right: 22%; top: 18%; font-family: var(--display); font-weight: 800; font-size: 24px; color: #fff; animation: zz 2.6s ease-in-out infinite; }
@keyframes zz { 0% { transform: translate(0, 6px); opacity: 0; } 40% { opacity: 0.8; } 100% { transform: translate(10px, -16px); opacity: 0; } }

/* ---- home --------------------------------------------------------------------------------- */

.home { height: 100%; display: flex; justify-content: center; }
/* The column is full width so the conversation's scrollbar sits at the right edge like any chat app;
   what's inside (the header, the messages, the message box) stays centred at reading width. */
.home-col { width: 100%; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.home-col > * { width: min(760px, 100% - 56px); }
.home-col > .stream-wrap { width: 100%; align-self: stretch; flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.stream-wrap > .stream { padding-inline: max(28px, calc((100% - 760px) / 2)); }
.home.is-chat .home-col { flex: 1; }
.stage { display: flex; align-items: center; gap: 16px; }
.avatar { position: relative; flex: none; width: calc(300px * var(--scale)); height: calc(300px * var(--scale)); transition: width 0.7s var(--ease), height 0.7s var(--ease); }
.avatar-inner { position: absolute; left: 0; top: 0; width: 300px; height: 300px; transform: scale(var(--scale)); transform-origin: top left; transition: transform 0.7s var(--ease); }
.home.is-empty .home-col { justify-content: center; padding-bottom: 6vh; }
.home.is-empty .stage { flex-direction: column; gap: 4px; }
.home.is-chat .stage { padding: 2px 0 12px; }
.greet { text-align: center; }
.greet-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1.05; letter-spacing: -0.045em; color: #fff; }
.greet-sub { margin: 10px 0 0; color: var(--ink-2); font-size: 17px; letter-spacing: -0.015em; }
.status { min-width: 0; display: grid; gap: 3px; }
.status-line { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-line.p-needs_you { color: var(--pink); }
.status-now { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); letter-spacing: 0; }
.status-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 1.4s ease-in-out infinite; flex: none; }
@keyframes pulse { 50% { transform: scale(1.5); opacity: 0.55; } }
.status-now-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-now-time { color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }

.stream { flex: 1; overflow-y: auto; overflow-x: hidden; padding-top: 4px; padding-bottom: 14px; user-select: text; mask-image: linear-gradient(transparent 0, #000 18px, #000 100%); }
.stream-list { display: grid; gap: 22px; padding-top: 12px; min-width: 0; }
.stream-list > * { min-width: 0; }
.msg { display: flex; gap: 12px; }
.msg-owner { flex-direction: column; align-items: flex-end; }
.bubble { max-width: 78%; padding: 10px 16px; border-radius: 22px 22px 6px 22px; background: var(--blue); color: #fff; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg-time { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.msg-fluffy { align-items: flex-start; }
.msg-dot { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--fl-me, var(--blue)); }
.msg-dot i { position: absolute; top: 8px; width: 3.2px; height: 8px; border-radius: 2px; background: var(--fl-me-eye, #fff); transform: rotate(-16deg); }
.msg-dot i:first-child { left: 9px; }
.msg-dot i:last-child { left: 15px; top: 7.2px; }
.msg-body { min-width: 0; flex: 1; font-size: 15px; line-height: 1.6; padding-top: 2px; }
.msg-fluffy.is-streaming .md > :last-child::after { content: ''; display: inline-block; width: 8px; height: 15px; margin-inline-start: 3px; vertical-align: -2px; border-radius: 2px; background: var(--blue); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.typing { display: inline-flex; gap: 5px; padding: 8px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 80%, 100% { transform: translateY(0); opacity: 0.3; } 40% { transform: translateY(-4px); opacity: 1; } }
.msg-tasks { display: grid; gap: 10px; margin-top: 12px; }

.composer { position: relative; margin: 8px 0 22px; display: flex; align-items: flex-end; gap: 10px; padding: 9px 9px 9px 22px; border-radius: 30px; background: var(--s2); border: 1px solid var(--line-2); transition: border-color 0.2s, box-shadow 0.2s; }
.composer.is-focused { border-color: #3a3a3f; background: #1a1a1d; }
.home.is-empty .composer { margin: 26px 0 0; }
.composer-input { flex: 1; resize: none; border: 0; background: transparent; padding: 9px 0; font-size: 16px; line-height: 1.5; max-height: 180px; user-select: text; }
.composer-input::placeholder { color: var(--ink-3); }
.composer-send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; flex: none; transition: transform 0.2s var(--spring), background 0.15s; }
.composer-send:hover:not(:disabled) { transform: scale(1.07); }
.composer-send:disabled { background: #2c2c2f; color: #6e6e73; }
.starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.starter { padding: 9px 16px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line-2); color: var(--icon); font-size: 14px; transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.2s var(--spring); }
.starter:hover { color: #fff; background: var(--s3); border-color: #3a3a3e; transform: translateY(-1px); }
.btn-big { align-self: center; height: 48px; padding: 0 30px; font-size: 16px; margin-top: 26px; }

/* ---- live task cards ---------------------------------------------------------------------- */

.task { border-radius: 20px; background: var(--s1); border: 1px solid var(--line); overflow: hidden; }
.task.s-needs_you { border-color: rgba(255, 55, 95, 0.6); }
.task-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; color: var(--ink); transition: background 0.15s; }
.task-head:hover { background: #121214; }
.task-head > svg { color: var(--ink-3); flex: none; }
.task-title { flex: 1; min-width: 0; font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; letter-spacing: -0.02em; }
.task-meta { font-size: 13px; color: var(--ink-2); flex: none; font-variant-numeric: tabular-nums; }
.task.s-needs_you .task-meta { color: var(--pink); font-weight: 600; }
.ring { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.ring-live { border: 2.5px solid #2c2c30; border-top-color: var(--blue); animation: spin 0.9s linear infinite; }
.ring-live.r-queued { animation: none; border-color: #3a3a3e; }
.ring-live.r-needs_you { animation: pulse 1.2s ease-in-out infinite; border: 0; background: var(--pink); }
.ring-done { background: var(--green); color: #000; }
.ring-fail { background: var(--red); color: #fff; }
.ring-stop { background: #3a3a3e; color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.task-body { padding: 0 16px 14px 48px; display: grid; gap: 12px; }
.task-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.shot { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: var(--s2); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-loading { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.task-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.step { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); min-width: 0; letter-spacing: 0; }
.step-icon { width: 14px; display: grid; place-items: center; flex: none; }
.step-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.step.is-now { color: #fff; }
.step.is-now .step-icon { color: var(--blue); }
.step.is-now .step-text { background: linear-gradient(90deg, #c7c7cc 0%, #fff 35%, #fff 65%, #c7c7cc 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
.step.k-approval .step-icon { color: var(--pink); }
.step.is-bad .step-text, .step.is-bad .step-icon { color: var(--red); }
.task-checks { display: flex; gap: 5px; }
.chk { height: 4px; flex: 1; max-width: 48px; border-radius: 4px; background: #2c2c30; }
.chk.c-pass { background: var(--green); }
.chk.c-fail { background: var(--red); }
.task-done { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 16px 13px 48px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.task-err { color: var(--red); }

/* ---- approvals ---------------------------------------------------------------------------- */

.approval { padding: 16px 18px; border-radius: 20px; background: var(--s1); border: 1.5px solid var(--pink); }
.approval-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.approval-tag { font-size: 14px; font-weight: 700; color: var(--pink); letter-spacing: -0.01em; }
.approval-amount { font-size: 15px; font-weight: 700; color: #fff; }
.approval-summary { font-family: var(--mono); font-size: 13.5px; line-height: 1.55; color: #fff; word-break: break-word; letter-spacing: 0; }
.approval-mission { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); text-align: left; }
.approval-mission:hover { color: #fff; }
.approval-more { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.approval-more:hover { color: var(--ink-2); }
.approval-detail { margin: 8px 0 0; padding: 10px 12px; max-height: 180px; overflow: auto; border-radius: 12px; background: #000; border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: pre-wrap; word-break: break-all; user-select: text; }
.approval-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- mission sheet ------------------------------------------------------------------------ */

.scrim { position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, 0.6); }
.side-float { position: absolute; z-index: 9; top: 0; right: 18px; bottom: 18px; width: min(500px, calc(100% - 36px)); }
.glass { position: relative; background: #0b0b0d; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); }
.sheet { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.sheet-loading { padding: 24px; color: var(--ink-3); }
.sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 20px 6px 14px; }
.sheet-title-wrap { min-width: 0; padding-top: 3px; }
.sheet-status { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sheet-status.s-needs_you { color: var(--pink); }
.sheet-status.s-done { color: var(--green); }
.sheet-status.s-failed { color: var(--red); }
.sheet-attempt { font-weight: 400; color: var(--ink-3); }
.sheet-title { margin: 4px 0 0; font-family: var(--display); font-size: 24px; font-weight: 750; line-height: 1.2; letter-spacing: -0.035em; }
.sheet-meta { display: flex; gap: 16px; padding: 4px 20px 14px 58px; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sheet-scroll { flex: 1; overflow-y: auto; padding: 4px 20px 20px; user-select: text; }
.sheet-error { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 69, 58, 0.12); color: #ff8a82; font-size: 14px; }
.sheet-block { padding-top: 20px; }
.sheet-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink-2); margin-bottom: 10px; }
.sheet-count { color: #fff; font-variant-numeric: tabular-nums; }
.sheet-goal { margin: 0; color: #e5e5ea; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.sheet-report { font-size: 15px; line-height: 1.6; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.check-mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #3a3a3e; color: var(--ink-3); margin-top: 1px; }
.c-pass .check-mark { background: var(--green); border-color: var(--green); color: #000; }
.c-fail .check-mark { background: var(--red); border-color: var(--red); color: #fff; }
.check-pending { width: 0; height: 0; }
.check-text { font-size: 15px; line-height: 1.45; text-align: left; }
.check-evidence { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; font-family: var(--mono); line-height: 1.5; text-align: left; letter-spacing: 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ev { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 3px 0; }
.ev-icon { color: var(--ink-3); display: grid; place-items: center; height: 20px; }
.ev-main { min-width: 0; }
.ev-title { display: block; width: 100%; text-align: left; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); word-break: break-word; }
.ev-title:not(:disabled):hover { color: #fff; }
.ev-tool .ev-title { font-family: var(--mono); font-size: 12.5px; color: #fff; letter-spacing: 0; }
.ev-text .ev-icon { color: var(--blue); }
.ev-verify .ev-icon, .ev-see .ev-icon { color: var(--sky); }
.ev-learn .ev-icon, .ev-learn .ev-title { color: var(--sky); }
.ev-shot { width: 240px; margin: 2px 0 6px; }
.ev.is-good .ev-icon { color: var(--green); }
.ev.is-bad .ev-icon, .ev.is-bad .ev-title { color: var(--red); }
.ev-approval .ev-title { color: var(--pink); }
.ev-status .ev-title { color: #fff; font-weight: 600; }
.ev-time { font-size: 12px; color: var(--ink-3); padding-top: 2px; font-variant-numeric: tabular-nums; }
.ev-detail { margin: 4px 0 8px; padding: 10px 12px; border-radius: 12px; background: #000; border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow: auto; letter-spacing: 0; }
.ev-live .ev-title { font-family: var(--mono); font-size: 12.5px; color: #fff; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulse 1.2s ease-in-out infinite; }
.sheet-actions { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.tell { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; border-top: 1px solid var(--line); }
.tell + .sheet-actions { border-top: 0; }
.tell + .tell-report { border-top: 0; }
.tell-report .tell-input { border-color: color-mix(in srgb, var(--pink) 45%, var(--line-2)); }
.tell-input { flex: 1; min-width: 0; height: 40px; border-radius: 999px; padding: 0 16px; font-size: 14px; }
.tell-send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; transition: opacity 0.15s; }
.tell-send:disabled { opacity: 0.3; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.legend-dot.s-running, .legend-dot.s-verifying { background: var(--blue); }
.legend-dot.s-needs_you { background: var(--pink); animation: pulse 1.2s ease-in-out infinite; }
.legend-dot.s-queued { background: transparent; border: 2px solid var(--ink-3); }
.legend-dot.s-done { background: var(--green); }
.legend-dot.s-failed { background: var(--red); }
.legend-dot.s-stopped { background: var(--ink-3); }

/* ---- pages -------------------------------------------------------------------------------- */

.page-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 0 40px 56px 12px; }
.page { max-width: 880px; margin: 0 auto; display: grid; gap: 18px; padding-top: 10px; }
.view-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 8px 0 10px; }
.view-header h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -0.045em; line-height: 1.05; color: #fff; }
.view-sub { margin: 10px 0 0; color: var(--ink-2); max-width: 580px; font-size: 16px; line-height: 1.45; }
.view-actions { display: flex; gap: 8px; flex: none; justify-content: flex-end; }
.card { padding: 20px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); }
.card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-title { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-sub { color: var(--ink-2); font-size: 14px; line-height: 1.55; max-width: 640px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 16px; align-items: start; }
.stack { display: grid; gap: 14px; }
.row-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.warn-line { margin: 6px 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 55, 95, 0.1); color: #ff8aa1; font-size: 14px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
/* The divider is drawn as a straight line, so a row's rounded corners don't curl its ends. */
.rows > li + li { background: linear-gradient(var(--line), var(--line)) top center / calc(100% - 16px) 1px no-repeat; }
.row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(4, auto); align-items: center; gap: 16px; padding: 14px 8px; text-align: left; transition: background 0.15s; border-radius: 12px; }
.row.static { grid-template-columns: auto minmax(0, 1fr) repeat(3, auto); }
button.row:hover, .row.on { background: #0f0f11; }
.row-main { display: grid; min-width: 0; gap: 2px; }
.row-title { font-size: 15px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; letter-spacing: -0.015em; }
.row-sub { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.row-cell { font-size: 13px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-tools { display: flex; align-items: center; gap: 4px; }
.rows-missions .row { grid-template-columns: auto minmax(0, 1fr) 90px 44px 70px 76px; }
.rows-missions .row-cell, .rows-ledger .row-cell { text-align: right; }
.rows-ledger .row.static { grid-template-columns: minmax(0, 1fr) 72px 84px 76px; }
.group-title { margin: 10px 0 4px; font-size: 13px; font-weight: 650; color: var(--ink-2); display: flex; gap: 8px; }
.group-title span { color: var(--ink-3); font-weight: 500; }
.add-title { margin-top: 6px; }
.fact-group { display: grid; gap: 4px; }
.empty { display: grid; justify-items: center; gap: 8px; padding: 64px 24px; text-align: center; }
.empty-mark { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); font-size: 0; }
.empty-title { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; }
.empty-body { color: var(--ink-2); font-size: 14px; max-width: 380px; }

.memory-tools { display: flex; gap: 8px; }
.search { flex: 1; }
.add-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts > li + li { border-top: 1px solid var(--line); }
.fact { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 6px; }
.fact-pin { color: #3a3a3e; font-size: 14px; line-height: 22px; transition: color 0.15s; }
.fact-pin:hover { color: var(--ink-2); }
.fact-pin.on { color: var(--blue); }
.fact-main { display: grid; gap: 3px; min-width: 0; }
.fact-text { text-align: left; font-size: 15px; line-height: 1.5; user-select: text; }
.fact-src { font-size: 12.5px; color: var(--ink-3); }
.skills { list-style: none; margin: 0; padding: 0; display: grid; }
.skills > li + li { border-top: 1px solid var(--line); }
.skill { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 6px; }
.skill.off { opacity: 0.45; }
.skill-main { min-width: 0; display: grid; gap: 3px; }
.skill-name { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; letter-spacing: -0.015em; }
.skill-desc { font-size: 13.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--s3); color: var(--icon); white-space: nowrap; letter-spacing: 0; text-transform: none; font-weight: 600; }
.badge-gold { background: rgba(31, 111, 255, 0.18); color: #8cc1ff; }
.badge-ok { background: rgba(48, 209, 88, 0.16); color: var(--green); }
.badge-warn { background: rgba(255, 55, 95, 0.16); color: #ff6b88; }
.pick-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; max-height: 360px; overflow: auto; }
.pick { display: grid; grid-template-columns: auto 200px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 6px; border-radius: 10px; cursor: pointer; }
.pick:hover { background: #121214; }
.pick-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-desc { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.changes { list-style: none; margin: 0; padding: 0; display: grid; }
.changes > li + li { border-top: 1px solid var(--line); }
.change { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 6px; min-height: 44px; }
.change-hash { color: var(--ink-3); }
.change-msg { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--blue); width: 16px; height: 16px; margin: 0; }
.wallet-hero { display: grid; gap: 14px; padding: 24px; }
.wallet-spent { display: flex; align-items: baseline; gap: 12px; }
.wallet-amount { font-family: var(--display); font-weight: 800; font-size: 56px; letter-spacing: -0.05em; color: #fff; font-variant-numeric: tabular-nums; }
.wallet-of { color: var(--ink-2); font-size: 16px; }
.wallet-bar, .budget-bar { display: block; height: 6px; border-radius: 6px; background: #222225; overflow: hidden; }
.wallet-bar > span, .budget-bar > span { display: block; height: 100%; background: var(--blue); border-radius: 6px; transition: width 0.5s var(--ease); }
.wallet-bar > span.hot { background: var(--red); }
.field-end { align-self: end; }
.kind-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.kind-card { display: grid; gap: 8px; align-content: start; text-align: left; padding: 20px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); transition: border-color 0.2s, background 0.2s, transform 0.25s var(--spring); }
.kind-card:hover { border-color: #3a3a3e; background: #121214; transform: translateY(-2px); }
.kind-card.is-rec { border-color: var(--blue); }
.kind-title { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kind-body { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.model-picks { display: grid; gap: 8px; }
.model-pick { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--s1); font-size: 14px; color: var(--ink-2); text-align: left; transition: border-color 0.15s, color 0.15s; }
.model-pick:hover { color: #fff; }
.model-pick.on { color: #fff; border-color: var(--blue); background: rgba(31, 111, 255, 0.1); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; }
.rules > li + li { border-top: 1px solid var(--line); }
.rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 6px; }
.rule-title { font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.rule-body { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.rule-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: -4px; }
.rule-extra > .rule-body { flex-basis: 100%; margin-top: 0; color: var(--ink-3); }
.rule-pick { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.rules-head { margin: 18px 6px 0; font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.model-chip.is-big { height: 28px; padding: 0 12px; font-size: 13px; color: var(--ink); }
.soul-editor { min-height: 440px; font-family: var(--mono); font-size: 13px; line-height: 1.7; letter-spacing: 0; }
.hands-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.hands-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; }
.hands-main { min-width: 0; display: grid; gap: 4px; }
.check-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--icon); }
.check-row .seg { flex-shrink: 0; }

/* ---- controls ----------------------------------------------------------------------------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 650; white-space: nowrap; letter-spacing: -0.01em; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.2s var(--spring); }
.btn:disabled { opacity: 0.35; }
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn-primary { background: #fff; color: #000; }
.btn-primary:hover:not(:disabled) { background: #e8e8ed; }
.btn-quiet { background: var(--s3); color: #fff; border: 1px solid var(--line-2); }
.btn-quiet:hover:not(:disabled) { background: #29292d; }
.btn-ghost { color: var(--icon); }
.btn-ghost:hover:not(:disabled) { color: #fff; background: var(--s3); }
.btn-danger { color: #fff; background: var(--red); }
.btn-danger:hover:not(:disabled) { background: #ff5b52; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--icon); transition: color 0.15s, background 0.15s; flex: none; }
.icon-btn:hover { color: #fff; background: var(--s3); }
.toggle { width: 44px; height: 26px; border-radius: 999px; background: #39393d; position: relative; transition: background 0.2s var(--ease); flex: none; }
.toggle-knob { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); transition: transform 0.28s var(--spring); }
.toggle.on { background: var(--blue); }
.toggle.on .toggle-knob { transform: translateX(18px); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-2); flex-wrap: wrap; }
.seg button { height: 32px; padding: 0 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--icon); transition: color 0.15s, background 0.15s; white-space: nowrap; }
.seg button:hover:not(:disabled) { color: #fff; }
.seg button.on { background: #fff; color: #000; }
.seg button.on:hover:not(:disabled) { color: #000; } /* the hover colour made the chosen option white on white */
.seg button:disabled { opacity: 0.25; }
.field { display: grid; gap: 7px; min-width: 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--icon); }
.field-hint { font-size: 12.5px; color: var(--ink-3); }
.field-value { font-size: 15px; height: 40px; display: flex; align-items: center; }
.input { width: 100%; height: 42px; padding: 0 14px; border-radius: 13px; background: #000; border: 1px solid var(--line-2); font-size: 15px; transition: border-color 0.15s, box-shadow 0.15s; user-select: text; }
.input:focus { border-color: #4a4a50; }
.input::placeholder { color: var(--ink-3); }
.textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--icon) 50%), linear-gradient(135deg, var(--icon) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* ---- markdown ----------------------------------------------------------------------------- */

.md > * + * { margin-top: 10px; }
.md p { margin: 0; }
.md ul, .md ol { margin: 0; padding-inline-start: 20px; }
.md li + li { margin-top: 4px; }
.md li::marker { color: var(--ink-3); }
.md .md-h { font-weight: 700; }
.md .md-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.md table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
.md th, .md td { padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.md th { font-weight: 600; color: var(--ink-3); background: var(--s1); }
.md tr:last-child td { border-bottom: 0; }
.md a { color: var(--sky); text-decoration: none; unicode-bidi: isolate; }
.md a:hover { text-decoration: underline; }
.md-code { font-family: var(--mono); font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--s3); }
.md-pre { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.md strong { font-weight: 700; color: #fff; }

/* ---- toasts ------------------------------------------------------------------------------- */

.toasts { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; z-index: 70; pointer-events: none; }
.toast { padding: 11px 18px; border-radius: 999px; background: #fff; color: #000; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: 520px; }
.toast.t-err { background: var(--red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---- helpers (small Fluffies) ------------------------------------------------------------- */
@keyframes bob { 50% { transform: translateY(-12%); } }

.team-strip { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding: 6px 0 4px; }
.home.is-chat .team-strip { justify-content: flex-start; gap: 10px; padding: 0 0 6px; }
.strip-member { display: grid; justify-items: center; gap: 4px; }
.strip-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-member.s-working .strip-name, .strip-member.s-checking .strip-name { color: #fff; }
.strip-member.s-needs_you .strip-name { color: var(--pink); }
.home.is-chat .strip-name { display: none; }

.task-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.task-by { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.model-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.model-chip { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.model-chip svg { opacity: 0.8; }
.model-chip.is-sub { color: var(--ink-3); font-weight: 500; }
.sheet-title-wrap .model-chips { margin-top: 6px; }

/* ---- spaces --------------------------------------------------------------------------------- */
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.space-card { background: var(--s1); border: 1px solid var(--line); border-radius: 26px; display: grid; align-content: start; overflow: hidden; }
.space-head { display: grid; gap: 4px; padding: 22px 22px 0; }
.space-title { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.035em; text-align: left; display: flex; align-items: center; gap: 10px; }
.space-title::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.space-purpose { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; text-align: left; padding-inline-start: 22px; }
.space-team { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: flex-end; padding: 22px 22px 16px; margin-top: 14px; min-height: 150px; background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--c) 13%, transparent), transparent 75%); }
.space-none { color: var(--ink-3); font-size: 14px; align-self: center; }
.team-member { display: grid; justify-items: center; gap: 2px; width: 84px; }
.team-member .plush { margin-bottom: 6px; }
.team-name { font-size: 13.5px; font-weight: 700; max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-kind { font-size: 11.5px; color: var(--ink-3); }
.team-member.is-busy .team-kind { color: #fff; }
.team-member.is-needs .team-kind { color: var(--pink); }
.space-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 14px 22px; }
.space-stat { font-size: 13.5px; color: var(--ink-2); }
.space-stat b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Chat mode: one slim row — Fluffy, what's happening, the team. */
.home.is-chat .stage { padding: 0 0 8px; gap: 12px; margin-bottom: 2px; min-height: 60px; }
.home.is-chat .status { flex: 1; }
.home.is-chat .status-line { font-size: 16px; }
.home.is-chat .status-now { font-size: 12px; }
.home.is-chat .team-strip { flex-wrap: nowrap; padding: 0; gap: 0; margin-inline-start: auto; flex: none; }
.home.is-chat .strip-member { margin-inline-start: -2px; }
.home.is-chat .strip-member:first-child { margin-inline-start: 0; }

/* ---- Plush characters ------------------------------------------------------------------------ */
.plush { position: relative; display: inline-block; flex: none; line-height: 0; }
.plush::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: -2%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 38%, transparent), transparent); }
.pl-body { position: absolute; inset: 0; transform-origin: 50% 96%; animation: plBreathe 3.6s ease-in-out infinite var(--d, 0s); }
.pl-f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; -webkit-user-drag: none; }
.plush .pl-body { transition: opacity 0.18s; }
.plush.is-painting .pl-body { opacity: 0; }
.pl-blink { opacity: 0; animation: plBlink var(--blink, 5s) linear infinite var(--d, 0s); }
.pl-bubble { position: absolute; top: 0; right: 0; width: clamp(14px, calc(var(--sz) * 0.19), 28px); aspect-ratio: 1; border-radius: 50%; background: var(--pink); color: #fff; display: grid; place-items: center; font: 900 clamp(9px, calc(var(--sz) * 0.12), 18px) / 1 var(--display); box-shadow: 0 0 0 2px #000; animation: plPop 1.1s var(--spring) infinite; }
.pl-spark { position: absolute; inset: 0; pointer-events: none; }
.pl-spark i { position: absolute; width: 12%; height: 12%; min-width: 5px; min-height: 5px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: plTwinkle 1.4s ease-in-out infinite; }
.pl-spark i:first-child { top: 6%; right: 4%; }
.pl-spark i:last-child { top: 30%; left: 2%; width: 8%; height: 8%; animation-delay: -0.7s; }
.pl-z { position: absolute; top: -2%; right: 4%; font: 800 clamp(10px, calc(var(--sz) * 0.13), 22px) var(--display); color: #fff; line-height: 1; animation: zz 2.6s ease-in-out infinite; }
.ps-working .pl-body { animation: plBob 0.8s ease-in-out infinite; }
.ps-checking .pl-body { animation: plTilt 2.4s ease-in-out infinite; }
.ps-needs_you .pl-body { animation: plHop 1.05s var(--spring) infinite; }
/* finished work stays still: a happy wiggle twice, then calm (every done task in the chat used to wiggle forever) */
.ps-happy .pl-body { animation: plWiggle 0.9s var(--spring) 2; }
.ps-happy .pl-blink, .ps-failed .pl-blink, .ps-sleepy .pl-blink, .ps-failed .pl-body { animation: none; }
.ps-sleepy .pl-body, .ps-queued .pl-body { animation-duration: 5.5s; }
.ps-queued { opacity: 0.6; }
.ps-failed { filter: grayscale(0.85); opacity: 0.55; }
.ps-working::before { animation: plFloor 0.8s ease-in-out infinite; }
.ps-needs_you::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--pink) 50%, transparent), transparent); }
@keyframes plBreathe { 50% { transform: scale(1.025, 0.975); } }
@keyframes plBob { 50% { transform: translateY(-7%) scale(0.98, 1.02); } }
@keyframes plTilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes plHop { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-11%) scale(0.97, 1.03); } 55% { transform: translateY(0) scale(1.05, 0.94); } 70% { transform: scale(1); } }
@keyframes plWiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-6deg) scale(1.03); } 75% { transform: rotate(6deg) scale(1.03); } }
@keyframes plFloor { 50% { transform: scale(0.75); opacity: 0.6; } }
@keyframes plBlink { 0%, 95.4%, 100% { opacity: 0; } 96%, 98.4% { opacity: 1; } }
@keyframes plPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes plTwinkle { 0%, 100% { opacity: 0.1; transform: scale(0.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes plHello { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-9%) scale(0.97, 1.04); } 70% { transform: translateY(0) scale(1.04, 0.96); } }
@media (prefers-reduced-motion: reduce) { .plush, .plush *, .plush::before { animation: none !important; } .pl-blink { opacity: 0; } }

.page-wide { max-width: 1080px; }
.btn-back svg { transform: rotate(180deg); }

/* ---- Characters: dress Fluffy and the helpers -------------------------------------------------- */
.lk-layout { display: grid; grid-template-columns: 230px minmax(300px, 1fr) minmax(320px, 420px); gap: 14px; align-items: start; margin-top: 6px; }
.lk-who { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 24px; background: var(--s1); border: 1px solid var(--line); max-height: calc(100vh - 210px); overflow: auto; }
.lk-group { display: grid; gap: 4px; margin-top: 8px; }
.lk-group-name { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.lk-group-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.lk-person { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 16px; text-align: start; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
.lk-person:hover { background: var(--s2); color: #fff; }
.lk-person.on { background: var(--s3); color: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.lk-person span { display: grid; min-width: 0; }
.lk-person b { font-size: 15px; font-weight: 700; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-person small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-none { margin: 8px 10px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.lk-stage { display: grid; justify-items: center; gap: 14px; padding: 22px 18px 20px; border-radius: 28px; background: radial-gradient(120% 70% at 50% 62%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), var(--s1); border: 1px solid var(--line); transition: background 0.4s; }
.lk-hero { display: flex; align-items: flex-end; justify-content: center; gap: 10px; min-height: 270px; flex-wrap: wrap; }
.lk-hero figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.lk-hero figcaption { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.lk-name { display: grid; justify-items: center; gap: 4px; text-align: center; }
.lk-name h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.04em; line-height: 1; }
.lk-name span { font-size: 14px; color: var(--ink-2); max-width: 420px; }
.lk-controls { display: grid; gap: 18px; padding: 20px; border-radius: 28px; background: var(--s1); border: 1px solid var(--line); }
.lk-row { display: grid; gap: 10px; }
.lk-label { display: flex; align-items: center; justify-content: space-between; font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.lk-clear { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-2); }
.lk-clear:hover { color: #fff; }
.lk-designs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lk-design { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border-radius: 16px; background: #000; border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); transition: border-color 0.15s, color 0.15s; }
.lk-design:hover { border-color: var(--line-2); color: #fff; }
.lk-design.on { border-color: #fff; color: #fff; }
.lk-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lk-swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform 0.2s var(--spring), box-shadow 0.15s; }
.lk-swatch:hover { transform: scale(1.12); }
.lk-swatch.on { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
.lk-custom { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; cursor: pointer; background: conic-gradient(#ff3b30, #ff7a1a, #34c759, #22b8c8, #1f6fff, #ff4f9a, #ff3b30); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.lk-custom input { position: absolute; inset: -8px; width: 46px; height: 46px; opacity: 0; cursor: pointer; }
.lk-hex { width: 92px; height: 30px; padding: 0 10px; border-radius: 10px; background: #000; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 13px; color: #fff; user-select: text; }
.lk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1180px) {
  .lk-layout { grid-template-columns: 200px 1fr; }
  .lk-controls { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .lk-layout { grid-template-columns: 1fr; }
  .lk-who { max-height: none; grid-auto-flow: row; }
}

/* ---- Live browser ---------------------------------------------------------------------------- */
.live-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255, 69, 58, 0.16); color: #ff6961; font: 800 11px/1 var(--display); letter-spacing: 0.08em; flex: none; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.6); animation: liveDot 1.6s ease-out infinite; }
.live-badge.is-off { background: var(--s3); color: var(--ink-3); }
.live-badge.is-off i { background: var(--ink-3); animation: none; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.55); } 100% { box-shadow: 0 0 0 7px rgba(255, 69, 58, 0); } }

.live-wrap, .media-wrap { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 28px; }
.live-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); }
.live { position: relative; width: min(1120px, 100%); max-height: 100%; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; padding: 16px; border-radius: 28px; background: #0b0b0d; border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.live.is-driving { border-color: rgba(31, 111, 255, 0.7); box-shadow: 0 0 0 1px rgba(31, 111, 255, 0.4), 0 30px 80px rgba(0, 0, 0, 0.6); }
.live-head { display: flex; align-items: center; gap: 12px; padding: 0 2px; min-width: 0; }
.live-globe { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--icon); flex: none; }
.live-who { min-width: 0; flex: 1; display: grid; gap: 2px; }
.live-name { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-space { color: var(--ink-3); font-weight: 600; }
.live-now { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 10px; letter-spacing: 0; }
.live.is-driving .live-now { color: #8cc1ff; font-family: var(--font); font-weight: 600; font-size: 13px; }
.live-time { color: var(--ink-3); }
.live-bar { display: flex; align-items: center; gap: 8px; }
.live-nav { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--icon); background: var(--s2); flex: none; transition: background 0.15s, color 0.15s; }
.live-nav:hover:not(:disabled) { background: var(--s3); color: #fff; }
.live-nav:disabled { opacity: 0.3; }
.live-url { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; background: var(--s2); color: var(--ink-3); }
.live-url span, .live-url input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; letter-spacing: 0; user-select: text; }
.live-url input { color: #fff; }
.btn-handback { background: var(--blue); color: #fff; }
.btn-handback:hover { background: #3a82ff; }
.live-stage { position: relative; min-height: 0; aspect-ratio: 1280 / 800; max-height: calc(100vh - 210px); justify-self: center; width: 100%; border-radius: 16px; overflow: hidden; background: #151517; }
.live-stage img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.live.is-driving .live-stage img { cursor: default; }
.live-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink-3); font-size: 14px; text-align: center; }
.live-cta { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px); opacity: 0; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: opacity 0.2s, transform 0.25s var(--spring); }
.live-stage:hover .live-cta { opacity: 1; transform: translate(-50%, 0); }
.live-ripple { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2.5px solid var(--blue); pointer-events: none; animation: ripple 0.6s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }
.live-keys { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; resize: none; pointer-events: none; }

.live-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 230px; border-radius: 14px; overflow: hidden; background: var(--s2); border: 1px solid var(--line-2); margin-bottom: 4px; }
.live-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.live-thumb .live-badge { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.72); }
.live-thumb.is-driving { border-color: var(--blue); }
.live-thumb.is-driving .live-badge { color: #8cc1ff; background: rgba(31, 111, 255, 0.3); }
.live-thumb.is-driving .live-badge i { background: var(--blue); animation: none; }
.live-thumb-cta { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; background: #fff; color: #000; font-size: 12.5px; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity 0.18s, transform 0.22s var(--spring); }
.live-thumb:hover .live-thumb-cta { opacity: 1; transform: none; }
.sheet-live { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--s2); border: 1px solid var(--line-2); font-weight: 650; font-size: 14px; text-align: left; transition: border-color 0.15s; }
.sheet-live:hover { border-color: #4a4a50; }
.sheet-live span:nth-child(2) { flex: 1; }

/* ---- Made in the studio ---------------------------------------------------------------------- */
.media-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; }
.media-row.is-done { padding: 0 18px 4px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.media-thumb { position: relative; flex: none; width: 74px; height: 74px; border-radius: 12px; overflow: hidden; background: var(--s2); border: 1px solid var(--line-2); transition: transform 0.2s var(--spring), border-color 0.15s; }
.media-thumb:hover { transform: scale(1.04); border-color: #4a4a50; }
.media-thumb.is-big { width: 100%; height: auto; aspect-ratio: 1; }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-kind { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.7); color: #fff; }
.media-audio { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--blue); }
.media-audio i { width: 3px; border-radius: 2px; background: var(--blue); height: 10px; animation: eq 1s ease-in-out infinite; }
.media-audio i:nth-child(3) { animation-delay: -0.2s; } .media-audio i:nth-child(4) { animation-delay: -0.5s; } .media-audio i:nth-child(5) { animation-delay: -0.8s; } .media-audio i:nth-child(6) { animation-delay: -0.3s; }
@keyframes eq { 50% { height: 22px; } }
.media-view { position: relative; margin: 0; width: min(1000px, 100%); max-height: 100%; display: grid; gap: 12px; padding: 14px; border-radius: 26px; background: #0b0b0d; border: 1px solid var(--line-2); }
.media-stage { display: grid; place-items: center; min-height: 200px; max-height: calc(100vh - 160px); border-radius: 16px; overflow: hidden; background: #151517; }
.media-stage img, .media-stage video { max-width: 100%; max-height: calc(100vh - 160px); display: block; }
.media-audio-big { display: grid; justify-items: center; gap: 18px; padding: 40px; color: var(--blue); }
.media-cap { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.media-title { font-weight: 650; font-size: 14px; color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creative-connect { display: flex; gap: 8px; margin-top: 12px; max-width: 520px; }
.creative-connect .input { flex: 1; }
.row-actions.start { justify-content: flex-start; margin-top: 10px; }
.card-sub.warn { color: #ff6b88; margin-top: 8px; }

/* ---- Side panel ------------------------------------------------------------------------------ */
.app.has-panel { grid-template-columns: 84px minmax(0, 1fr) var(--panel-w, 560px); }
.app.panel-wide { grid-template-columns: 84px 0 minmax(0, 1fr); }
.app.panel-wide .main { visibility: hidden; }
.panel { grid-column: 3; grid-row: 2; position: relative; z-index: 3; min-width: 0; min-height: 0; margin: 0 12px 12px 0; display: flex; flex-direction: column; background: #0b0b0d; border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; animation: panelIn 0.28s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateX(16px); } }
.panel-resize { position: absolute; left: -7px; top: 0; bottom: 0; width: 12px; cursor: col-resize; z-index: 4; }
.panel-resize::after { content: ''; position: absolute; left: 5px; top: 50%; height: 44px; width: 3px; margin-top: -22px; border-radius: 3px; background: var(--line-2); opacity: 0; transition: opacity 0.15s; }
.panel-resize:hover::after, body.resizing .panel-resize::after { opacity: 1; background: var(--blue); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe, body.resizing img { pointer-events: none; }
.panel-top { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 8px; border-bottom: 1px solid var(--line); }
.panel-tabs { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; max-width: 220px; height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 6px 0 11px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background 0.15s, color 0.15s; }
.tab:hover { background: var(--s2); color: #fff; }
.tab.on { background: var(--s3); color: #fff; }
.tab-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-x { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: var(--ink-3); flex: none; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.tab:hover .tab-x, .tab.on .tab-x { opacity: 1; }
.tab-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tab-live { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; animation: liveDot 1.6s ease-out infinite; }
.tab-live.is-off { background: var(--ink-3); animation: none; }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* panes fill the panel */
.panel .sheet { background: none; border: 0; border-radius: 0; box-shadow: none; }
.panel .live { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; background: none; padding: 12px; grid-template-rows: auto auto minmax(0, 1fr); }
.panel .live.is-driving { box-shadow: inset 0 0 0 2px rgba(31, 111, 255, 0.55); }
.panel .live-stage { max-height: 100%; align-self: start; }
.panel .live-head .plush { margin: -4px 0; }
.panel .live-name { font-size: 17px; }

/* ---- Files ------------------------------------------------------------------------------------ */
.file-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.file-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 4px 16px; flex-wrap: wrap; row-gap: 8px; }
.file-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--s2); color: var(--icon); flex: none; }
.file-icon.k-image, .tree-icon.k-image { color: #64d2ff; }
.file-icon.k-video, .tree-icon.k-video { color: #ff6b35; }
.file-icon.k-audio, .tree-icon.k-audio { color: #30d158; }
.file-icon.k-code, .tree-icon.k-code { color: #8cc1ff; }
.file-icon.k-html, .tree-icon.k-html { color: #ff9f0a; }
.tree-icon.k-dir { color: var(--icon); }
.file-who { min-width: 140px; flex: 1; }
.file-name { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.file-dirty { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }
.file-meta { font-size: 12.5px; color: var(--ink-3); }
.file-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.file-actions .btn { height: 32px; padding: 0 14px; font-size: 13px; }
.file-path { padding: 0 16px 10px 64px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; border-bottom: 1px solid var(--line); }
.seg-sm { padding: 2px; }
.seg-sm button { height: 28px; padding: 0 11px; font-size: 12.5px; }
.file-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.file-body.is-editing { overflow: hidden; display: flex; }
.file-doc { padding: 18px 22px 40px; font-size: 15px; line-height: 1.65; user-select: text; }
.file-doc h1, .file-doc h2, .file-doc h3 { font-family: var(--display); letter-spacing: -0.03em; }
.code-view { padding: 10px 0 30px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; letter-spacing: 0; user-select: text; }
.ln { display: grid; grid-template-columns: 48px 1fr; }
.ln:hover { background: rgba(255, 255, 255, 0.03); }
.ln-n { text-align: right; padding-right: 14px; color: #48484c; user-select: none; }
.ln-t { white-space: pre-wrap; word-break: break-word; padding-right: 16px; color: #e5e5ea; }
.ln-more { padding: 12px 62px; color: var(--ink-3); font-family: var(--font); }
.file-editor { flex: 1; width: 100%; resize: none; border: 0; background: #070708; color: #fff; padding: 16px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.65; letter-spacing: 0; user-select: text; }
.file-table { padding: 12px 14px 30px; overflow: auto; }
.file-table table { border-collapse: collapse; font-size: 13px; user-select: text; }
.file-table th, .file-table td { border: 1px solid var(--line-2); padding: 7px 11px; text-align: left; white-space: nowrap; }
.file-table th { background: var(--s2); font-weight: 700; position: sticky; top: 0; }
.file-html { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.file-pdf { width: 100%; height: 100%; border: 0; display: block; background: #2a2a2e; }
.folder-list { padding: 8px 8px 30px; }
.folder-list .tree-row { padding-left: 10px; }
.file-media { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.file-media img, .file-media video { max-width: 100%; max-height: calc(100vh - 230px); border-radius: 12px; display: block; }
.file-media.checker { background-color: #141416; background-image: linear-gradient(45deg, #1c1c1f 25%, transparent 25%), linear-gradient(-45deg, #1c1c1f 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1c1c1f 75%), linear-gradient(-45deg, transparent 75%, #1c1c1f 75%); background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; }
.file-audio { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 20px; padding: 30px; }
.file-audio .media-audio { height: 40px; }
.file-empty, .file-loading { flex: 1; display: grid; place-items: center; align-content: center; gap: 14px; padding: 40px; color: var(--ink-2); text-align: center; min-height: 240px; }
.file-loading .shot-loading { width: 60%; height: 120px; border-radius: 14px; }

.tree { list-style: none; margin: 0; padding: 0; }
.tree-row { width: 100%; display: flex; align-items: center; gap: 8px; height: 34px; padding-right: 12px; border-radius: 9px; text-align: left; font-size: 14px; color: #e5e5ea; transition: background 0.12s; }
.tree-row:hover { background: var(--s2); }
.tree-row.on { background: rgba(31, 111, 255, 0.18); color: #fff; }
.tree-caret { width: 14px; display: grid; place-items: center; color: var(--ink-3); transition: transform 0.15s; flex: none; }
.tree-caret.is-open { transform: rotate(90deg); }
.tree-caret.none { visibility: hidden; }
.tree-icon { display: grid; place-items: center; flex: none; color: var(--icon); }
.tree-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.tree-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0; flex: none; }
.tree-meta { margin-left: auto; font-size: 12px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; padding-left: 10px; }
.tree-none, .tree-empty { padding: 10px 14px; color: var(--ink-3); font-size: 13.5px; }
.tree-empty .shot-loading { height: 80px; border-radius: 12px; }
.sheet-files { margin: 0 -8px; }

.files { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.roots { display: grid; gap: 18px; position: sticky; top: 0; }
.roots-group { display: grid; gap: 2px; }
.roots-title { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 10px 6px; }
.root-row { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-align: left; transition: background 0.15s, color 0.15s; }
.root-row span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.root-row:hover { background: var(--s2); color: #fff; }
.root-row.on { background: #fff; color: #000; }
.root-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.files-main { background: var(--s1); border: 1px solid var(--line); border-radius: 22px; padding: 8px; min-height: 420px; }
.files-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 10px 12px; }
.files-title { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.035em; }
@media (max-width: 1180px) { .files { grid-template-columns: 1fr; } .roots { position: static; grid-auto-flow: row; } }
.panel .live { grid-template-rows: auto auto auto minmax(0, 1fr); overflow-y: auto; }
.live-steps { list-style: none; margin: 4px 0 0; padding: 0 4px; display: grid; gap: 4px; align-content: start; }
.live-steps li { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0; min-width: 0; }
.live-steps li span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-steps li.is-now { color: #fff; }
.live-steps li.is-now svg { color: var(--blue); }
.live-slim { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--ink-2); width: fit-content; }
.live-slim:hover { color: #fff; border-color: #4a4a50; }
.panel .sheet-head { padding: 16px 20px 6px 20px; }
.panel .sheet-meta { padding-left: 20px; }
.files-title { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.file-doc .md-h { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 10px; }
.has-panel .files { grid-template-columns: 180px minmax(0, 1fr); }
.files-hint { margin: -4px 12px 10px; font-size: 13px; color: var(--ink-3); line-height: 1.5; max-width: 560px; }

/* ---- Rail with spaces ------------------------------------------------------------------------ */
.dock-top { display: grid; gap: 14px; justify-items: center; min-height: 0; }
.dock-spaces { display: grid; gap: 8px; justify-items: center; padding-top: 14px; border-top: 1px solid var(--line); max-height: calc(100vh - 330px); overflow-y: auto; overflow-x: visible; scrollbar-width: none; }
.dock-spaces::-webkit-scrollbar { display: none; }
.dock-space { position: relative; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, #0e0e10); color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px; transition: border-radius 0.2s var(--ease), background 0.15s, transform 0.2s var(--spring); }
.dock-space:hover { background: color-mix(in srgb, var(--c) 40%, #0e0e10); border-radius: 12px; }
.dock-space:active { transform: scale(0.92); }
.dock-space.on { background: var(--c); border-radius: 12px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
.dock-space-letter { line-height: 1; }
.dock-space:hover .dock-tip { opacity: 1; transform: translate(0, -50%); }
.dock-space .dock-tip { left: 52px; }

/* ---- Space page ------------------------------------------------------------------------------ */
.space-page { gap: 16px; }
.sp-head { display: grid; gap: 14px; padding-top: 6px; }
.sp-title-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-badge { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--c); color: #fff; font-family: var(--display); font-weight: 800; font-size: 28px; flex: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 35%, transparent); }
.sp-titles { min-width: 0; flex: 1; }
.sp-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.045em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-purpose { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.sp-team { display: flex; gap: 2px; flex: none; }
.sp-stats { display: flex; gap: 18px; font-size: 14px; color: var(--ink-2); }
.sp-stats b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.embed { display: grid; gap: 14px; }
.embed-tools { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.space-overview { display: grid; gap: 22px; }
.ov-block { display: grid; gap: 10px; }
.ov-title { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: center; gap: 10px; }
.ov-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ov-more:hover { color: #fff; }
.ov-tasks { display: grid; gap: 10px; }
.ov-quiet { color: var(--ink-3); font-size: 14px; }
.ov-hint { margin: -4px 0 0; color: var(--ink-3); font-size: 13.5px; }
.ov-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-note { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; }
.ov-note:hover { border-color: #4a4a50; }
.ov-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ov-helper { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 8px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); }
.ov-helper-name { font-weight: 700; font-size: 15px; }
.ov-helper-role { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.ov-helper > div:nth-child(2) { flex: 1; min-width: 0; }
.ov-helper-acts { display: flex; flex-direction: column; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.ov-helper:hover .ov-helper-acts, .ov-helper:focus-within .ov-helper-acts { opacity: 1; }
.ov-helper-acts button { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--s2); border: 1px solid var(--line-2); }
.ov-helper-acts button:hover { color: #fff; }
.space-open { cursor: pointer; }
.space-open .space-title svg { color: var(--ink-3); margin-left: 6px; transition: transform 0.2s var(--spring); }
.space-open:hover .space-title svg { transform: translateX(3px); color: #fff; }

/* ---- Library --------------------------------------------------------------------------------- */
.library { position: relative; display: grid; gap: 12px; border-radius: 22px; }
.library.is-over { outline: 2px dashed var(--c, var(--blue)); outline-offset: 6px; }
.lib-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 32px; padding: 0 13px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--icon); display: inline-flex; align-items: center; gap: 7px; transition: background 0.15s, color 0.15s; }
.chip:hover { color: #fff; }
.chip.on { background: #fff; color: #000; border-color: #fff; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lib-link-form { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lib-card { position: relative; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.15s, transform 0.2s var(--spring); }
.lib-card:hover { border-color: #4a4a50; transform: translateY(-2px); }
.lib-card.skeleton { height: 190px; }
.lib-card.skeleton .shot-loading { height: 100%; }
.lib-hit { display: grid; width: 100%; text-align: left; }
.lib-thumb { position: relative; height: 112px; display: grid; place-items: center; background: #141416; overflow: hidden; }
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-glyph { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--s3); color: var(--icon); }
.lib-card.k-link .lib-glyph { color: #8cc1ff; }
.lib-card.k-markdown .lib-glyph, .lib-card.k-text .lib-glyph { color: #fff; }
.lib-card.k-audio .lib-glyph { color: var(--green); }
.lib-play { position: absolute; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: #fff; }
.lib-text { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.lib-name { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-sub { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-origin { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lib-origin.you { color: color-mix(in srgb, var(--c, var(--blue)) 75%, #fff); font-weight: 600; }
.lib-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.7); color: #fff; opacity: 0; transition: opacity 0.15s; }
.lib-card:hover .lib-x { opacity: 1; }
.lib-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; border-radius: 20px; border: 1px dashed var(--line-2); text-align: center; color: var(--ink-3); }
.lib-empty-title { color: #fff; font-weight: 700; font-size: 16px; }
.lib-empty-sub { max-width: 460px; font-size: 13.5px; line-height: 1.5; }
.lib-drop { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 22px; background: rgba(0, 0, 0, 0.75); color: #fff; font-weight: 700; font-size: 16px; pointer-events: none; }

/* ---- Connections ----------------------------------------------------------------------------- */
.conn-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.conn-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 4px 4px 10px; border-radius: 12px; background: var(--s2); }
.conn-row.dim { color: var(--ink-3); font-size: 14px; background: none; padding-left: 0; }
.conn-row svg { color: var(--icon); flex: none; }
.conn-name { font-weight: 650; font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-meta { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.conn-row .toggle { margin-left: auto; }
.conn-row .conn-meta + .toggle { margin-left: 0; }
.conn-row .btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.conn-form { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 16px; background: #0a0a0c; border: 1px solid var(--line); }
.card-grid.two { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 0; align-items: start; }
.soul-memory { margin-top: 26px; display: grid; gap: 12px; }
.space-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; margin-inline-start: 10px; border-radius: 999px; background: color-mix(in srgb, var(--c, #8e8e93) 16%, transparent); color: color-mix(in srgb, var(--c, #8e8e93) 70%, #fff); font-size: 11.5px; font-weight: 650; vertical-align: 2px; white-space: nowrap; flex: none; }
.space-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.space-tag.is-all { background: var(--s3); color: var(--ink-2); }
.fact .space-tag { justify-self: start; width: fit-content; margin: 4px 0 2px; }

/* ---- Composer menu, safe keys, setup, help ---------------------------------------------------- */
.cmenu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); z-index: 6; max-height: 340px; overflow-y: auto; padding: 6px; border-radius: 18px; background: #121214; border: 1px solid var(--line-2); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); display: grid; gap: 2px; }
.cmenu-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 11px; text-align: left; min-width: 0; }
.cmenu-row.on { background: var(--s3); }
.cmenu-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--s2); color: var(--icon); flex: none; }
.cmenu-row.on .cmenu-icon { background: #fff; color: #000; }
.cmenu-name { font-weight: 700; font-size: 14px; flex: none; }
.cmenu-hint { font-size: 13px; color: var(--ink-3); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmenu-dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 8px; flex: none; }
.cmenu-plush { width: 26px; display: grid; place-items: center; flex: none; }
.secure-card { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: #0e0e10; border: 1px solid rgba(48, 209, 88, 0.35); box-shadow: 0 0 0 4px rgba(48, 209, 88, 0.06); margin: 6px 0 4px; }
.secure-card.setup { border-color: rgba(31, 111, 255, 0.45); box-shadow: 0 0 0 4px rgba(31, 111, 255, 0.07); }
.secure-top { display: flex; align-items: flex-start; gap: 12px; }
.secure-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(48, 209, 88, 0.15); color: var(--green); flex: none; }
.secure-card.setup .secure-icon { background: rgba(31, 111, 255, 0.18); color: #8cc1ff; }
.secure-titles { flex: 1; min-width: 0; }
.secure-title { font-weight: 750; font-size: 15.5px; }
.secure-sub { color: var(--ink-2); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.secure-note { margin: -4px 0 0; color: var(--ink-3); font-size: 12.5px; }
.secure-row { display: flex; gap: 8px; }
.secure-row .input { flex: 1; }
.setup-facts { display: grid; grid-template-columns: 52px 1fr; gap: 6px 12px; margin: 0; padding: 10px 12px; border-radius: 12px; background: #0a0a0c; font-size: 13px; }
.setup-facts dt { color: var(--ink-3); }
.setup-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.setup-fields { display: grid; gap: 10px; }
.setup-field { display: grid; gap: 6px; }
.setup-label { font-size: 13px; font-weight: 650; color: var(--icon); display: grid; gap: 2px; }
.setup-hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.secure-foot { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.help-card { display: grid; gap: 12px; padding: 18px 20px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line-2); margin-top: 10px; }
.help-top { display: flex; align-items: center; justify-content: space-between; }
.help-title { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.help-block p { margin: 3px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.help-h { font-weight: 700; font-size: 14px; }

/* ---- Fluffy's card ----------------------------------------------------------------------------- */
.card-pay { display: grid; gap: 14px; }
.pay-top { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.pay-card { position: relative; flex: none; width: 230px; height: 140px; border-radius: 18px; padding: 16px 18px; display: grid; align-content: space-between; color: #fff; background: linear-gradient(135deg, #1f6fff 0%, #0b2f8a 100%); box-shadow: 0 18px 40px rgba(31, 111, 255, 0.28); overflow: hidden; }
.pay-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.pay-card.is-paused { filter: grayscale(1); opacity: 0.6; }
.pay-brand { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; }
.pay-num { font-family: var(--mono); font-size: 18px; letter-spacing: 0.08em; }
.pay-name { font-size: 12px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.08em; }
.pay-month { display: grid; gap: 8px; }
.pay-month-top { font-size: 14px; color: var(--ink-2); }
.pay-month-top b { color: #fff; font-size: 18px; }
.pay-activity { margin-top: 4px; }
.provider-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- Top-right status control ---------------------------------------------------------------- */
.topbar-right { position: relative; }
.tb-status { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px 0 14px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-2); color: var(--ink); font-size: 13px; font-weight: 600; transition: background 0.15s, border-color 0.15s; }
.tb-status:hover, .tb-status.on { background: var(--s3); border-color: #4a4a50; }
.tb-model { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tb-sep { width: 1px; height: 16px; background: var(--line-2); }
.tb-money { font-variant-numeric: tabular-nums; color: var(--icon); font-weight: 500; }
.tb-run { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 800; animation: tbPulse 2s ease-in-out infinite; }
@keyframes tbPulse { 50% { box-shadow: 0 0 0 4px rgba(31, 111, 255, 0.25); } }
.tb-caret { color: var(--ink-3); display: grid; transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.tb-status.on .tb-caret { transform: rotate(-90deg); }
.tb-menu { position: absolute; top: calc(100% + 8px); right: 18px; z-index: 40; width: 320px; padding: 8px; border-radius: 20px; background: #0e0e10; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65); display: grid; gap: 4px; animation: tbIn 0.18s var(--ease); }
@keyframes tbIn { from { opacity: 0; transform: translateY(-6px); } }
.tb-sec { display: grid; gap: 6px; padding: 10px 10px 12px; border-radius: 14px; }
.tb-sec + .tb-sec { border-top: 1px solid var(--line); border-radius: 0; }
.tb-label { font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.tb-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 10px; text-align: left; transition: background 0.12s; }
.tb-row:hover { background: var(--s2); }
.tb-check { width: 16px; display: grid; place-items: center; color: var(--blue); flex: none; }
.tb-row-main { display: grid; min-width: 0; }
.tb-row-title { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-row-sub { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.tb-link { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 2px 0; }
.tb-link:hover { color: #fff; }
.tb-money-big { font-size: 14px; color: var(--ink-2); }
.tb-money-big b { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.tb-empty { font-size: 13.5px; color: var(--ink-3); }
.tb-working { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tb-working-text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.tb-working-text i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: tbPulse 2s ease-in-out infinite; }
.tb-stop { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255, 69, 58, 0.15); color: #ff6961; font-size: 13px; font-weight: 700; }
.tb-stop:hover { background: var(--red); color: #fff; }

/* ---- Message box: tools row (attach, voice, model, effort) ------------------------------------ */
.composer { flex: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 10px 10px 18px; border-radius: 26px; }
.composer.is-dropping { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 111, 255, 0.18); }
.composer-input { flex: none; padding: 4px 6px 2px 0; max-height: min(40vh, 380px); overflow-y: auto; }
.composer-bar { display: flex; align-items: center; gap: 4px; margin-left: -8px; }
.cbar-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); transition: color 0.15s, background 0.15s; }
.cbar-btn:hover { color: #fff; background: var(--s3); }
.cbar-btn.is-on { color: #fff; background: var(--blue); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent); animation: micRing 1.6s ease-out infinite; }
.cbar-btn.is-busy { color: #fff; background: var(--s3); animation: tbPulse 1.2s ease-in-out infinite; }
@keyframes micRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.cbar-rec { font-family: var(--mono); font-size: 12px; color: var(--sky); font-variant-numeric: tabular-nums; }
.cbar-rec.busy { color: var(--ink-3); font-family: var(--font); }
.cbar-chip-wrap { position: relative; }
.cbar-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 9px; font-size: 12.5px; font-weight: 550; color: var(--ink-3); transition: color 0.15s, background 0.15s; white-space: nowrap; }
.cbar-chip svg { transform: rotate(90deg); opacity: 0.7; }
.cbar-chip:hover { color: var(--ink); background: var(--s3); }
.cbar-plan { font-variant-numeric: tabular-nums; }
.cbar-plan svg { transform: none; opacity: 1; }
.cbar-plan-menu { min-width: 280px; padding: 12px 14px; gap: 12px; }
.cbar-plan-menu .cbar-head { padding: 0; }
.cbar-ctx-row { padding-top: 12px; border-top: 1px solid var(--line); }
.cbar-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 8; min-width: 300px; padding: 6px; border-radius: 16px; background: #121214; border: 1px solid var(--line-2); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); display: grid; gap: 1px; }
.cbar-item { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.cbar-item:hover { background: var(--s3); }
.cbar-item.more { color: var(--ink-2); font-weight: 500; }
.cbar-check { color: var(--blue); display: grid; place-items: center; }
.cbar-hint { color: var(--ink-3); font-weight: 400; font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.composer-send { width: 34px; height: 34px; margin-left: 4px; }
.attach-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.attach-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 10px; border-radius: 10px; background: var(--s3); font-size: 12.5px; font-weight: 600; max-width: 240px; }
.attach-chip span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-chip button { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); flex: none; }
.attach-chip button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* the top-right status goes light: no box, just the numbers */
.tb-status { background: transparent; border-color: transparent; padding: 0 8px 0 10px; font-weight: 500; color: var(--icon); }
.tb-status:hover, .tb-status.on { background: var(--s2); border-color: var(--line-2); }
.tb-warn { display: inline-flex; align-items: center; gap: 7px; color: #ff6b88; font-weight: 600; padding-right: 6px; }
.tb-plan { display: grid; gap: 5px; padding: 2px 0 4px; }
.tb-plan-top { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.tb-plan-top b { font-variant-numeric: tabular-nums; }
.tb-menu { max-height: calc(100vh - 80px); overflow-y: auto; }
.cbar-head { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.cbar-ctx { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 6px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---- Plan checklist, health, crash ------------------------------------------------------------ */
.plan { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: #0a0a0c; border: 1px solid var(--line); }
.plan-head { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.plan-item { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.plan-item.p-completed { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.2); }
.plan-item.p-in_progress { color: #fff; font-weight: 600; }
.plan-mark { width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; }
.plan-item.p-completed .plan-mark { background: var(--green); border-color: var(--green); color: #000; }
.plan-item.p-in_progress .plan-mark { border-color: var(--blue); }
.plan-item.p-in_progress .plan-mark i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: tbPulse 1.6s ease-in-out infinite; }
.plan-more { font-size: 12.5px; color: var(--ink-3); padding-left: 25px; }
.health-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.health-num { display: grid; gap: 2px; }
.health-num b { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.health-num span { font-size: 13px; color: var(--ink-3); }
.health-rows { margin-top: 8px; }
.crash { height: 100vh; display: grid; place-items: center; align-content: center; gap: 12px; background: #000; color: #fff; text-align: center; }
.crash-title { font-family: var(--display); font-size: 28px; font-weight: 800; }
.crash-sub { color: var(--ink-2); }

/* ---- tools page ------------------------------------------------------------------------- */

.tools-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.tools-empty { color: var(--ink-3); padding: 24px 0; }
.tools-group { display: grid; gap: 12px; margin-top: 10px; }
.tools-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tools-group-head h2 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.tools-group-head span { color: var(--ink-3); font-size: 13px; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tool-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--s1); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.tool-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 90px; background: radial-gradient(120% 90px at 0% 0%, color-mix(in srgb, var(--tc) 22%, transparent), transparent 70%); pointer-events: none; }
.tool-card:hover { border-color: color-mix(in srgb, var(--tc) 45%, var(--line)); transform: translateY(-1px); }
.tool-card.s-install, .tool-card.s-off { opacity: 0.72; }
.tool-top { position: relative; display: flex; align-items: center; gap: 12px; }
.tool-glyph { flex: none; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 100%, #fff 12%), color-mix(in srgb, var(--tc) 72%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 18px color-mix(in srgb, var(--tc) 30%, transparent); }
.tool-id { min-width: 0; flex: 1; }
.tool-name { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-title { color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.tool-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; background: var(--s3); color: var(--ink-2, #cfcfd4); align-self: flex-start; flex: none; }
.tool-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tool-status.s-ready { color: #3ddc84; background: rgba(61, 220, 132, 0.1); }
.tool-status.s-setup { color: var(--sky); background: color-mix(in srgb, var(--sky) 12%, transparent); }
.tool-status.s-install, .tool-status.s-off { color: var(--ink-3); }
.tool-note { margin: -4px 0 0; font-size: 12.5px; font-weight: 650; color: color-mix(in srgb, var(--tc) 70%, #fff); }
.tool-what { position: relative; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.tool-when { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.tool-when b { color: var(--icon); font-weight: 650; }
.tool-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.tool-uses { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: 1; }
.tool-act { height: 30px; padding: 0 13px; border-radius: 999px; background: #fff; color: #000; font-size: 12.5px; font-weight: 700; }
.tool-act.ghost { background: var(--s3); color: var(--ink); }
.tool-hint { font-size: 11.5px; color: var(--ink-3); }

/* Never scroll sideways: wide things (code, tables) scroll inside themselves. */
html, body, #root { overflow-x: hidden; max-width: 100vw; }

.effort-name { display: inline-flex; align-items: center; gap: 7px; }

/* ---- who did a task, and the owner's rating ------------------------------------------------ */
.task-doer { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.task-doer .ring { position: absolute; right: -5px; bottom: -4px; width: 17px; height: 17px; box-shadow: 0 0 0 2.5px var(--s1); }
.task-doer .ring svg { width: 10px; height: 10px; }
.task:not(.s-running):not(.s-verifying):not(.s-needs_you):not(.s-queued) .task-done { padding-left: 62px; align-items: center; }
.rate { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.rate-label { font-size: 12.5px; color: var(--ink-3); margin-right: 4px; }
.rate-btn { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); border: 1px solid var(--line); background: transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.rate-btn:hover { color: var(--ink); background: var(--s2); }
.rate-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rate-btn.up.on { color: #fff; background: var(--blue); border-color: var(--blue); }
.rate-btn.down.on { color: #fff; background: var(--red); border-color: var(--red); }
.rate-btn:disabled { opacity: 0.5; }
.rate-note { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rate-box { flex-basis: 100%; display: grid; gap: 8px; margin-top: 2px; }
.rate-box .textarea, .rate-box textarea { min-height: 0; font-size: 14px; }
.rate-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ov-helper-record { display: flex; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ov-helper-record .rec { display: inline-flex; align-items: center; gap: 4px; }
.ov-helper-record .rec.up { color: var(--blue); }
.ov-helper-record .rec.down { color: var(--red); }
.steps-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 2px; }

/* Files on this Mac in a message: blue like any link; a click opens it in the panel on the right. */
.md-file { display: inline-flex; align-items: center; gap: 4px; color: var(--sky); text-decoration: none; border-radius: 6px; padding: 0 3px; margin: 0 -1px; max-width: 100%; vertical-align: bottom; overflow-wrap: anywhere; }
.md-file svg { flex: none; opacity: 0.9; }
.md-file:hover { text-decoration: underline; background: rgba(100, 181, 255, 0.1); }
.md-file:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ---- the chat as a team: every message says who is speaking --------------------------------------------
   Fluffy and each helper have a face and a name (the helper's in its own colour), shown when they start talking.
   A task shows in full once, at its newest mention; older mentions are a chip. */
.msg-fluffy, .msg-helper { align-items: flex-start; gap: 14px; }
.msg-face { flex: none; width: 40px; display: grid; justify-items: center; padding-top: 1px; }
button.msg-face { cursor: pointer; transition: transform 0.25s var(--spring); }
button.msg-face:hover { transform: rotate(-6deg) scale(1.06); }
.msg-face .msg-dot { width: 32px; height: 32px; }
.msg-face .msg-dot i { top: 10px; width: 3.6px; height: 9.5px; }
.msg-face .msg-dot i:first-child { left: 11px; }
.msg-face .msg-dot i:last-child { left: 18px; top: 9.2px; }
.msg-who { display: flex; align-items: baseline; gap: 9px; min-width: 0; margin: 2px 0 4px; }
.msg-who b { font-family: var(--display); font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--hc, #fff); white-space: nowrap; }
.msg-who span { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-fluffy:not(.has-head), .msg-helper:not(.has-head) { margin-top: -10px; }
/* the words sit next to whoever said them (short Arabic lines don't drift to the far side) */
.msg-fluffy .msg-body, .msg-helper .msg-body { flex: 0 1 auto; width: fit-content; max-width: calc(100% - 54px); }
.msg-tasks .strip { width: 660px; max-width: 100%; }
/* The task cards shrink with the chat column (a narrow window with the side panel open) instead of running under it. */
.msg-tasks { grid-template-columns: minmax(0, 1fr); }
.msg-body:has(.msg-tasks) { width: 100%; }
.strip > * { min-width: 0; }
.msg-to { align-self: flex-end; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.msg-to b { color: var(--hc); font-weight: 800; }
.msg-to:hover b { text-decoration: underline; }

/* a helper's own words: which task it's about, and how it stands */
.hm-task { display: flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 8px; text-align: start; }
.hm-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.01em; background: color-mix(in srgb, var(--hc, #8e8e93) 18%, transparent); color: color-mix(in srgb, var(--hc, #8e8e93) 75%, #fff); }
.hm-tag.t-reply { background: var(--s3); color: var(--ink-2); }
.hm-tag.t-done { background: rgba(48, 209, 88, 0.15); color: #4ade80; }
.hm-tag.t-failed { background: rgba(255, 69, 58, 0.16); color: #ff6961; }
.hm-title { min-width: 0; font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-task:hover .hm-title { color: #fff; }
.hm-rate { margin-top: 10px; }

/* a task, once: the helper's colour on a solid tile behind its plush, the title, and the one thing it does now */
.msg-tasks { gap: 10px; margin-top: 14px; }
.strip { --hc: var(--blue); display: grid; gap: 12px; max-width: 660px; padding: 14px 16px 14px 14px; border-radius: 24px; background: var(--s1); }
.strip.s-needs_you { box-shadow: inset 0 0 0 1.5px rgba(255, 55, 95, 0.7); }
.strip-head { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; text-align: start; }
.strip-head > svg { flex: none; color: var(--ink-3); transition: transform 0.2s var(--ease), color 0.2s; }
.strip-head:hover > svg { color: #fff; transform: translateX(2px); }
.strip-face { position: relative; flex: none; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 24%, #0b0b0d); transition: transform 0.3s var(--spring); }
.strip-head:hover .strip-face { transform: rotate(-4deg) scale(1.04); }
/* working: a ring of its colour runs around the tile */
.strip.s-running .strip-face::after, .strip.s-verifying .strip-face::after { content: ''; position: absolute; inset: -3px; border-radius: 23px; padding: 2.5px; background: conic-gradient(from var(--spin, 0deg), var(--hc) 0 22%, transparent 22% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: stripSpin 1.6s linear infinite; }
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes stripSpin { to { --spin: 360deg; } }
.strip.s-needs_you .strip-face { background: rgba(255, 55, 95, 0.22); }
.strip-face .ring { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; box-shadow: 0 0 0 3px var(--s1); }
.strip-face .ring svg { width: 12px; height: 12px; }
.strip-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.strip-who { display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: 13.5px; }
.strip-who b { flex: none; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: var(--hc); }
.strip-state { flex: none; font-weight: 650; color: #fff; }
.strip.s-needs_you .strip-state { color: var(--pink); }
.strip-space { min-width: 0; color: var(--ink-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-space::before { content: '·'; margin-inline-end: 7px; }
.strip-title { font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1.22; letter-spacing: -0.028em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strip-meta { flex: none; align-self: flex-start; margin-top: 3px; font-size: 13px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.strip-body { display: grid; gap: 10px; padding-left: 74px; min-width: 0; }
.strip-now { display: flex; align-items: center; gap: 9px; min-width: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0; color: var(--ink-2); }
.strip-now i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hc); animation: pulse 1.4s ease-in-out infinite; }
.strip.s-needs_you .strip-now { color: var(--pink); font-family: var(--font); font-weight: 650; font-size: 13px; }
.strip.s-needs_you .strip-now i { background: var(--pink); }
.strip.s-queued .strip-now i { animation: none; background: var(--ink-3); }
.strip-body .task-checks { gap: 6px; }
.strip-body .chk { height: 6px; max-width: 56px; border-radius: 6px; background: #232327; }
.strip-body .chk.c-pass { background: var(--hc); }
.strip-body .chk.c-fail { background: var(--red); }
/* finished, when no report follows: one quiet row */
.strip.is-done { gap: 10px; padding: 10px 14px 10px 10px; border-radius: 20px; }
.strip.is-done .strip-face { width: 44px; height: 44px; border-radius: 15px; }
.strip.is-done .strip-title { font-size: 15.5px; -webkit-line-clamp: 1; }
.strip.is-done .strip-state { color: var(--ink-2); }
.strip-media, .strip-rate { padding-left: 58px; }

/* an earlier mention of a task */
.task-chip { --hc: var(--blue); display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--s2); text-align: start; transition: background 0.15s; }
.task-chip:hover { background: var(--s3); }
.task-chip b { flex: none; font-size: 13px; font-weight: 800; color: var(--hc); }
.task-chip span { min-width: 0; font-size: 13px; font-weight: 550; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-chip .legend-dot { flex: none; }
@media (prefers-reduced-motion: reduce) { .strip-face::after, .strip-now i { animation: none !important; } }

/* ---- Fluffy's own line at the top of the chat ----------------------------------------------- */
.home.is-chat .status { gap: 1px; }
.home.is-chat .status-line { font-size: 17px; letter-spacing: -0.02em; }
.status-doing { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.status-doing > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-doing.is-live { font-weight: 600; }
.status-alert { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px; background: rgba(255, 55, 95, 0.13); color: var(--pink); font-size: 13px; font-weight: 700; }
.status-alert i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: pulse 1.4s ease-in-out infinite; }
.shimmer { background: linear-gradient(90deg, var(--ink-3) 0%, #fff 38%, #fff 56%, var(--ink-3) 92%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.1s linear infinite; }
.thinking { display: inline-block; padding: 3px 0; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.msg-activity { width: fit-content; margin-top: 8px; font-size: 13px; font-weight: 650; }

/* ---- the crew: who is working, always on the right ------------------------------------------ */
.crew { position: relative; z-index: 5; flex: none; width: 104px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 78px 0 140px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.crew::-webkit-scrollbar { display: none; }
.home { overflow: hidden; }
.crew-list { flex: none; }
.crew-list { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.crew-m { --hc: var(--blue); position: relative; display: grid; justify-items: center; gap: 7px; }
.crew-btn { position: relative; display: grid; place-items: center; border-radius: 50%; transition: transform 0.25s var(--spring); }
.crew-btn:hover { transform: translateY(-3px); }
.crew-btn:focus-visible { outline: 2px solid var(--hc); outline-offset: 6px; }
.crew-tile { position: relative; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: color-mix(in srgb, var(--hc) 24%, #0b0b0d); }
.crew-btn:hover .crew-tile { transform: rotate(-4deg); }
.crew-tile { transition: transform 0.3s var(--spring); }
/* working: the same running ring as the task in the chat */
.crew-m.cs-working .crew-tile::after, .crew-m.cs-checking .crew-tile::after { content: ''; position: absolute; inset: -3px; border-radius: 23px; padding: 2.5px; background: conic-gradient(from var(--spin, 0deg), var(--hc) 0 22%, transparent 22% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: stripSpin 1.6s linear infinite; }
.crew-m.cs-needs_you .crew-tile { background: rgba(255, 55, 95, 0.24); box-shadow: inset 0 0 0 1.5px rgba(255, 55, 95, 0.75); }
.crew-m.cs-queued .crew-tile { background: var(--s2); }
.crew-state { margin-top: -5px; font-size: 11px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crew-m.cs-needs_you .crew-state { color: var(--pink); }
.crew-m.is-small .crew-tile { width: 44px; height: 44px; border-radius: 15px; background: var(--s2); }
.crew-m.is-small .crew-state { display: none; }
.crew-count { position: absolute; top: -5px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--hc); color: #000; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 2.5px var(--bg); }
.crew-name { max-width: 96px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.01em; color: var(--hc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-m.cs-needs_you .crew-name { color: var(--pink); }
.crew-m.is-small .crew-name { color: var(--ink-3); font-weight: 600; font-size: 11px; }
.crew-fly { position: fixed; z-index: 60; width: 300px; display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: linear-gradient(140deg, color-mix(in srgb, var(--hc) 26%, #0e0e10) 0%, #0e0e10 58%); border: 1px solid color-mix(in srgb, var(--hc) 38%, var(--line-2)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65); font-family: var(--font); transform-origin: right center; animation: flyIn 0.24s var(--ease); }
@keyframes flyIn { from { opacity: 0; transform: translateX(10px) scale(0.97); } }
.crew-fly::after { content: ''; position: absolute; top: 0; bottom: 0; right: -16px; width: 16px; }
.crew-fly-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.crew-fly-head b { font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--hc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-fly-head span { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.crew-fly-task { display: grid; gap: 5px; width: 100%; padding: 11px 12px; border-radius: 15px; background: rgba(255, 255, 255, 0.05); text-align: left; transition: background 0.15s; }
.crew-fly-task:hover { background: rgba(255, 255, 255, 0.1); }
.crew-fly-title { font-size: 14px; font-weight: 650; line-height: 1.3; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crew-fly-now { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-fly-meta { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.crew-toggle { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12px; font-weight: 700; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.crew-toggle:hover { color: #fff; border-color: #4a4a50; }
.crew-toggle.on { background: #fff; color: #000; border-color: #fff; }
.crew-rest { display: grid; justify-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 1100px) { .crew { width: 84px; } .crew-name, .crew-state { display: none; } .crew-list { gap: 16px; } }

/* ---- the conversation map on the right edge, and the way back down ------------------------- */
.chatnav { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; flex-direction: column; padding: 14px 0; }
.cn-tick { position: relative; flex: none; height: 16px; width: 40px; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; }
.cn-line { display: block; width: 12px; height: 4px; border-radius: 4px; background: #3a3a40; transition: width 0.25s var(--ease), background 0.2s; }
.cn-tick.on .cn-line { width: 20px; background: #fff; }
.chatnav:hover .cn-line { background: #5c5c62; }
.chatnav:hover .cn-tick.on .cn-line { background: #fff; }
.cn-tick.is-hover .cn-line { width: 30px; background: #fff; }
.cn-tick.is-hover + .cn-tick .cn-line, .cn-tick:has(+ .cn-tick.is-hover) .cn-line { width: 20px; }
/* more turns above or below: the end lines fade, as if the list goes on */
.chatnav.more-up .cn-tick:first-of-type .cn-line { opacity: 0.35; }
.chatnav.more-down .cn-tick:nth-last-of-type(1) .cn-line { opacity: 0.35; }
.cn-count { position: absolute; right: 6px; bottom: -8px; font-size: 10px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
.chatnav:hover .cn-count { opacity: 1; }
.cn-peek { position: absolute; right: 44px; top: 50%; width: 310px; display: grid; gap: 5px; padding: 12px 14px; border-radius: 18px; background: #0e0e10; border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65); text-align: left; pointer-events: none; transform: translateY(-50%); animation: peekIn 0.18s var(--ease); }
@keyframes peekIn { from { opacity: 0; transform: translate(8px, -50%); } }
.cn-ask { font-size: 14px; font-weight: 700; line-height: 1.35; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-answer { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.to-bottom { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 4; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); color: #fff; border: 1px solid var(--line-2); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); transition: background 0.15s; }
.to-bottom:hover { background: #2c2c30; }
.to-bottom.has-new::after { content: ''; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2.5px var(--bg); }
@media (prefers-reduced-motion: reduce) { .shimmer, .crew-tile::after, .task-now { animation: none !important; } }

/* ---- calm: nothing moves while Fluffy is not in front (another app, or the window hidden) ------- */
.is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }
.media-play { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; pointer-events: none; }
.media-none { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-3); }
.show-earlier { justify-self: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 12.5px; font-weight: 650; transition: color 0.15s, border-color 0.15s; }
.show-earlier:hover { color: #fff; border-color: #4a4a50; }

/* ---- Accounts: every account is its own browser. Bold marks, one clear state, nothing else. ---- */
.acct-mark { display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px var(--ring, transparent); }
.acct-mark b { font-family: var(--display); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }

.accounts { gap: 26px; }
.acct-tools { display: grid; gap: 12px; }
.acct-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line-2); color: var(--ink-3); transition: border-color 0.15s; }
.acct-search:focus-within { border-color: var(--blue); }
.acct-search input { flex: 1; min-width: 0; background: none; border: 0; font-size: 15.5px; color: #fff; user-select: text; }
.acct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-chips button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--s2); color: var(--ink-2); font-size: 13px; font-weight: 650; transition: background 0.15s, color 0.15s; }
.acct-chips button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.acct-chips button:hover { color: #fff; }
.acct-chips button.on { background: #fff; color: #000; }
.acct-none { margin: 0; color: var(--ink-3); }

.acct-hero { display: grid; justify-items: center; gap: 10px; padding: 44px 24px; border-radius: 28px; background: var(--s1); border: 1px solid var(--line); text-align: center; transition: border-color 0.2s, transform 0.25s var(--spring); }
.acct-hero:hover { border-color: var(--line-2); transform: translateY(-2px); }
.acct-hero-marks { display: flex; margin-bottom: 8px; }
.acct-hero-marks .acct-mark { margin-inline-start: -10px; border: 3px solid var(--s1); box-sizing: content-box; }
.acct-hero-marks .acct-mark:first-child { margin-inline-start: 0; }
.acct-hero b { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.035em; }
.acct-hero > span:last-child { color: var(--ink-2); font-size: 14.5px; max-width: 420px; }

.acct-group { display: grid; gap: 12px; }
.acct-group-title { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
.acct-group-title i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.acct-group-title span { color: var(--ink-3); font-weight: 700; font-size: 15px; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }

.acct { position: relative; display: grid; gap: 14px; padding: 16px 16px 12px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); transition: border-color 0.2s, background 0.2s; }
.acct:hover { border-color: var(--line-2); background: #121214; }
.acct.is-main { background: transparent; border-style: dashed; }
.acct-open { display: flex; align-items: center; gap: 14px; min-width: 0; text-align: start; }
.acct-text { display: grid; gap: 2px; min-width: 0; }
.acct-text b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-what { color: var(--ink-3); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-foot { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.acct-state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--s3); color: var(--ink-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.acct-state.ok { background: rgba(48, 209, 88, 0.14); color: #4ade80; }
.acct-live { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(31, 111, 255, 0.18); color: #8cc1ff; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.acct-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 1.4s ease-in-out infinite; flex: none; }
.acct-more { margin-inline-start: auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.acct-more span { width: 4px; height: 4px; border-radius: 50%; background: var(--icon); }
.acct:hover .acct-more, .acct-more[aria-expanded='true'], .acct-more:focus-visible { opacity: 1; }
.acct-more:hover { background: var(--s3); }
.acct-menu { position: absolute; z-index: 20; top: calc(100% - 8px); inset-inline-end: 10px; min-width: 230px; display: grid; gap: 2px; padding: 6px; border-radius: 18px; background: #161618; border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.acct-menu > button, .acct-move button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 550; color: var(--icon); text-align: start; }
.acct-menu > button:hover, .acct-move button:hover { background: var(--s3); color: #fff; }
.acct-menu > button.danger { color: #ff6961; }
.acct-move { display: grid; gap: 2px; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 2px 0; }
.acct-move > span { padding: 4px 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.acct-move button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.acct-rename { display: grid; gap: 8px; padding: 6px; min-width: 280px; }

.acct-add { display: grid; gap: 16px; }
.acct-add-head { display: flex; align-items: center; justify-content: space-between; }
.acct-add-head b { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -0.03em; }
.acct-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.acct-pick button { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; background: var(--s2); border: 2px solid transparent; font-size: 13px; font-weight: 650; color: var(--ink-2); transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.2s var(--spring); }
.acct-pick button:hover { background: var(--s3); color: #fff; }
.acct-pick button.on { border-color: var(--blue); background: rgba(31, 111, 255, 0.12); color: #fff; }
.acct-pick-other { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--s3); color: var(--icon); }
.acct-add-form { display: grid; gap: 10px; }
.acct-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-add-go { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-top: 4px; }
.acct-add-note { color: var(--ink-3); font-size: 13px; }
@media (max-width: 640px) { .acct-add-row { grid-template-columns: 1fr; } .acct-add-go { flex-direction: column; align-items: stretch; } }

.space-accts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.space-accts button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; text-align: start; transition: background 0.15s; }
.space-accts button:hover { background: var(--s2); }
.space-acct-name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-accts .acct-state { flex: none; max-width: 50%; }

/* the in-app browser: a site that refuses this window gets one clear way out */
.live-refused { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 16px; background: rgba(31, 111, 255, 0.14); border: 1px solid rgba(31, 111, 255, 0.4); font-size: 14px; color: #dbe8ff; }
.live-refused span { flex: 1; min-width: 0; }
.live:has(.live-refused) { grid-template-rows: auto auto auto 1fr; }
.panel .live:has(.live-refused) { grid-template-rows: auto auto auto auto minmax(0, 1fr); }

/* ---- a task's panel: who, what now, what it said — the details come after -------------------------- */
.sheet-who { align-items: center; gap: 14px; padding: 18px 20px 8px 16px; }
.sheet-face { width: 64px; height: 64px; border-radius: 21px; }
.sheet-who.s-running .sheet-face::after, .sheet-who.s-verifying .sheet-face::after { content: ''; position: absolute; inset: -3px; border-radius: 24px; padding: 2.5px; background: conic-gradient(from var(--spin, 0deg), var(--hc) 0 22%, transparent 22% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: stripSpin 1.6s linear infinite; }
.sheet-who.s-needs_you .sheet-face { background: rgba(255, 55, 95, 0.22); }
.sheet-says { display: flex; align-items: baseline; gap: 7px; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.sheet-says b { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--hc); }
.sheet-who.s-needs_you .sheet-says span { color: var(--pink); }
.sheet-who.s-done .sheet-says span { color: var(--green); }
.sheet-who.s-failed .sheet-says span { color: var(--red); }
.sheet-who .sheet-title { margin-top: 2px; font-weight: 800; font-size: 22px; }
.sheet-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.sheet-now { display: grid; gap: 6px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--hc) 14%, var(--s1)); }
.sheet-now.s-needs_you { background: rgba(255, 55, 95, 0.14); }
.sheet-now-label { font-size: 11.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--hc) 70%, #fff); }
.sheet-now.s-needs_you .sheet-now-label { color: var(--pink); }
.sheet-now-step { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: #fff; overflow-wrap: anywhere; }
.sheet-now-step i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hc); animation: pulse 1.4s ease-in-out infinite; }
.sheet-now.s-needs_you .sheet-now-step i { background: var(--pink); }
.sheet-fold > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.sheet-fold > summary::-webkit-details-marker { display: none; }
.sheet-fold > summary::after { content: '›'; margin-inline-start: 2px; font-size: 16px; line-height: 1; transition: transform 0.2s var(--ease); }
.sheet-fold[open] > summary { margin-bottom: 10px; }
.sheet-fold[open] > summary::after { transform: rotate(90deg); }
.sheet-fold > summary:hover { color: #fff; }
.sheet-more { margin-inline-start: auto; font-size: 12.5px; font-weight: 650; color: var(--sky); }
.sheet-more:hover { text-decoration: underline; }
/* titles stay beside the face, whatever language they're in */
.strip-title, .hm-title, .task-chip span { text-align: left; }
/* "right now" is information, not an alarm: a plain surface, the helper's colour only on the dot */
.sheet-now { background: var(--s2); }
.sheet-now-label { color: var(--ink-2); }
/* ---- Fluffy 2: chats like Claude, characters, colours per kind of step -------------------------
   Bold and simple: true black, white type, Fluffy blue; each kind of step has its own colour so the owner sees at a
   glance what an agent is doing. No yellow, no purple. */

:root {
  --k-skill: #30d158;
  --k-generate: #ff9f0a;
  --k-browser: #1f6fff;
  --k-computer: #64d2ff;
  --k-shell: #d1d1d6;
  --k-files: #5ac8fa;
  --k-read: #8e8e93;
  --k-web: #40c8e0;
  --k-edit: #ff6b5a;
  --k-plan: #a1a1a6;
  --k-memory: #d8c3a0;
  --k-tool: #a1a1a6;
  --k-think: #8e8e93;
  --sb-w: 272px;
}

/* ---- the frame ---------------------------------------------------------------------------------- */
.app.v2 { grid-template-columns: var(--sb-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.app.v2.has-panel { grid-template-columns: var(--sb-w) minmax(0, 1fr) var(--panel-w, 520px); }
.app.v2.panel-wide { grid-template-columns: var(--sb-w) 0 minmax(0, 1fr); }
.app.v2 .main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; }
.app.v2 .panel { grid-column: 3; grid-row: 1; margin: 12px 12px 12px 0; }
.app.v2 .topbar { position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 6; pointer-events: none; }
.app.v2 .topbar .topbar-drag { pointer-events: auto; }
.app.v2 .topbar .topbar-right { pointer-events: auto; }
.app.v2 .wordmark { display: none; }
.app.v2 .page-scroll { flex: 1; min-height: 0; padding: 60px 40px 56px; }

/* ---- the left side ------------------------------------------------------------------------------- */
.sb { grid-column: 1; grid-row: 1; position: relative; z-index: 7; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 10px 12px; background: #060607; border-right: 1px solid var(--line); }
.sb-top { position: relative; height: 54px; display: flex; align-items: center; padding-left: 78px; flex: none; }
.sb-drag { position: absolute; inset: 0; -webkit-app-region: drag; }
.logo { position: relative; display: inline-flex; align-items: center; gap: 8px; -webkit-app-region: no-drag; }
.logo-word { font-family: var(--display); font-weight: 900; font-size: 21px; letter-spacing: -0.05em; color: #fff; display: inline-flex; align-items: center; gap: 5px; }
.logo-ai { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 6px 2px; border-radius: 6px; background: var(--blue); color: #fff; transform: translateY(-1px); }
.fluffy-mark { flex: none; filter: drop-shadow(0 4px 12px rgba(31, 111, 255, 0.35)); }

.sb-new { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 14px; border-radius: 13px; background: #fff; color: #000; font-weight: 700; font-size: 14.5px; flex: none; transition: transform 0.18s var(--spring), background 0.15s; }
.sb-new:hover { background: #e9e9ee; }
.sb-new:active { transform: scale(0.98); }
.sb-new kbd { margin-left: auto; font: 600 11px/1 var(--font); color: #6e6e73; background: #ececf0; border-radius: 6px; padding: 4px 6px; }

.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 4px -4px 0; padding: 0 4px; scrollbar-width: thin; }
.sb-label { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 6px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.sb-plus { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-3); transition: color 0.15s, background 0.15s; }
.sb-plus:hover { color: #fff; background: var(--s3); }

.sb-chat { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 8px 0 6px; border-radius: 10px; color: var(--ink-2); font-size: 13.5px; text-align: start; transition: background 0.12s, color 0.12s; }
.sb-chat:hover { background: var(--s2); color: #fff; }
.sb-chat.on { background: var(--s3); color: #fff; }
.sb-chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sb-foot { flex: none; display: grid; gap: 1px; padding-top: 8px; border-top: 1px solid var(--line); }
.sb-nav { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 10px; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 600; transition: background 0.12s, color 0.12s; }
.sb-nav:hover { background: var(--s2); color: #fff; }
.sb-nav.on { background: var(--s3); color: #fff; }

/* an agent's face, with a ring while it works */
.av { position: relative; display: inline-grid; place-items: center; width: var(--av); height: var(--av); flex: none; }
.av > .plush { width: var(--av) !important; height: var(--av) !important; }
.av-running::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--blue); border-right-color: var(--blue); animation: spin 0.9s linear infinite; }
.av-needs_you::after { content: ''; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px #060607; }
.av-error::after { content: ''; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #060607; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- a new chat ---------------------------------------------------------------------------------- */
.newchat { flex: 1; min-height: 0; overflow-y: auto; display: grid; place-items: center; padding: 64px 32px 40px; background: radial-gradient(70% 55% at 50% 30%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%); }
.nc-stage { width: min(760px, 100%); display: grid; gap: 22px; }
.nc-hero { display: grid; justify-items: center; gap: 10px; text-align: center; }
.nc-hero h1 { margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.045em; line-height: 1.05; }
.nc-hero p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 520px; }
.nc-warn { display: flex; align-items: center; gap: 8px; justify-content: center; color: #ff8aa1; font-size: 14px; }
.nc-warn button { color: #fff; text-decoration: underline; }

/* ---- the message box ------------------------------------------------------------------------------ */
.cmp { position: relative; display: grid; gap: 6px; padding: 12px 12px 10px 18px; border-radius: 26px; background: #131315; border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px #242428, 0 18px 50px rgba(0, 0, 0, 0.55); transition: box-shadow 0.25s; }
.cmp:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -10px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--c, var(--blue)) 55%, #242428), 0 0 0 5px color-mix(in srgb, var(--c, var(--blue)) 12%, transparent), 0 18px 50px rgba(0, 0, 0, 0.55); }
.cmp.big { padding: 16px 14px 12px 20px; border-radius: 28px; }
.cmp textarea { width: 100%; resize: none; background: transparent; border: 0; outline: 0; color: #fff; font: 400 16px/1.5 var(--font); padding: 2px 0; min-height: 26px; max-height: 240px; user-select: text; }
.cmp.big textarea { font-size: 17px; min-height: 52px; }
.cmp textarea::placeholder { color: var(--ink-3); }
.cmp-bar { display: flex; align-items: center; gap: 4px; margin-left: -8px; flex-wrap: wrap; row-gap: 4px; }
/* a narrow chat (the side panel open): the chips move to a second line instead of pushing Send out of sight */
.cmp-bar .bar-chips { flex-wrap: wrap; min-width: 0; }
.cmp-bar .cmp-send { flex: none; margin-left: auto; }
.cmp-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: color 0.15s, background 0.15s; }
.cmp-btn:hover { color: #fff; background: var(--s3); }
.cmp-btn.v-rec { color: #fff; background: var(--pink); animation: pulse 1.4s ease-in-out infinite; }
.cmp-btn.v-busy { color: #fff; background: var(--s3); }
.cmp-send { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; transition: opacity 0.15s, transform 0.18s var(--spring); }
.cmp-send:disabled { opacity: 0.25; }
.cmp-send:not(:disabled):active { transform: scale(0.92); }
.cmp-stop { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; margin-right: 6px; border-radius: 999px; background: var(--s3); border: 1px solid var(--line-2); color: #fff; font-weight: 700; font-size: 13px; }
.cmp-stop:hover { background: #2a2a2e; }
.cmp-files { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); z-index: 20; display: grid; gap: 2px; padding: 6px; border-radius: 18px; background: #111113; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); max-height: 340px; overflow-y: auto; }
.cmp-menu-h { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.cmp-menu button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 10px; border-radius: 12px; text-align: start; color: var(--ink-2); font-size: 13.5px; }
.cmp-menu button b { color: #fff; font-weight: 700; flex: none; }
.cmp-menu button span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.cmp-menu button.on { background: var(--s3); }
.cmp-skill { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--k-skill) 18%, transparent); color: var(--k-skill); flex: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--s3); border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.tag button { color: var(--ink-3); display: grid; place-items: center; }
.tag-agent { color: #fff; padding-left: 4px; }
.tag-skill { color: var(--k-skill); border-color: color-mix(in srgb, var(--k-skill) 40%, var(--line-2)); }

/* ---- a chat ------------------------------------------------------------------------------------- */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-head { position: relative; z-index: 7; height: 52px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 200px 0 20px; border-bottom: 1px solid var(--line); -webkit-app-region: drag; }
.chat-head > * { -webkit-app-region: no-drag; }
.chat-head .grow { -webkit-app-region: drag; align-self: stretch; }
.chat-agent { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 4px; border-radius: 999px; transition: background 0.15s; }
.chat-agent:hover { background: var(--s2); }
.chat-agent-name { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.chat-sep { color: var(--ink-3); }
.chat-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--ink-2); padding: 4px 8px; border-radius: 8px; }
.chat-title:hover { color: #fff; background: var(--s2); }
.chat-title-in { width: 320px; height: 32px; border-radius: 9px; background: #000; border: 1px solid var(--line-2); padding: 0 10px; color: #fff; font-size: 14.5px; user-select: text; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--s2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.chip:hover, .chip.on { color: #fff; background: var(--s3); }
.chip-project i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.chip-icons { display: inline-flex; gap: 2px; }
.ti { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--tc); }
.t-web { --tc: var(--k-web); } .t-terminal { --tc: var(--k-shell); } .t-browser { --tc: var(--k-browser); } .t-computer { --tc: var(--k-computer); }
.t-images, .t-video, .t-seedance, .t-model3d, .t-voice, .t-sfx { --tc: var(--k-generate); } .t-edit { --tc: var(--k-edit); } .t-email { --tc: var(--k-files); } .t-card { --tc: var(--k-skill); }
.tools-btn { position: relative; }
.pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; padding: 10px; border-radius: 20px; background: #0e0e10; border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75); }
.pop-h { display: grid; gap: 2px; padding: 4px 6px 10px; font-weight: 800; font-size: 15px; }
.pop-h span { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.tools-pop { width: 300px; }

.tsw { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 12px; }
.tsw.compact { grid-template-columns: 1fr; gap: 2px; margin: 0; }
.tsw-item { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'ic label knob' 'ic hint knob'; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 14px; background: #000; border: 1px solid var(--line); text-align: start; transition: border-color 0.15s, background 0.15s; }
.tsw.compact .tsw-item { grid-template-areas: 'ic label knob'; padding: 7px 8px; border: 0; background: transparent; border-radius: 10px; }
.tsw.compact .tsw-item:hover { background: var(--s2); }
.tsw-ic { grid-area: ic; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); opacity: 0.45; transition: opacity 0.15s; }
.tsw-label { grid-area: label; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.tsw-hint { grid-area: hint; font-size: 12px; color: var(--ink-3); }
.tsw-knob { grid-area: knob; width: 34px; height: 20px; border-radius: 999px; background: var(--s3); position: relative; transition: background 0.18s; }
.tsw-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8e8e93; transition: transform 0.2s var(--spring), background 0.18s; }
.tsw-item.on .tsw-ic { opacity: 1; }
.tsw-item.on .tsw-label { color: #fff; }
.tsw-item.on .tsw-knob { background: var(--tc); }
.tsw-item.on .tsw-knob::after { transform: translateX(14px); background: #fff; }
.tsw-item.on.t-terminal .tsw-knob::after { background: #000; }
.tsw-item.on:not(.compact .tsw-item) { border-color: color-mix(in srgb, var(--tc) 35%, var(--line)); }

.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.chat-col { width: min(780px, 100% - 48px); margin: 0 auto; padding: 26px 0 30px; display: grid; gap: 10px; align-content: start; user-select: text; }
.chat-foot { flex: none; width: min(808px, 100% - 32px); margin: 0 auto; padding: 4px 0 18px; }
.chat-empty { display: grid; justify-items: center; gap: 12px; padding: 80px 0; color: var(--ink-2); font-size: 16px; }
.chat-loading { height: 80px; border-radius: 18px; }
.chat-gone { flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink-2); }
.working { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13.5px; padding: 6px 0 0; }

/* the owner's words */
.umsg { display: grid; justify-items: end; gap: 7px; margin: 18px 0 6px; }
.umsg-bubble { max-width: 80%; padding: 11px 17px 12px; border-radius: 22px 22px 8px 22px; background: linear-gradient(160deg, #3b7dff 0%, #1f62f0 55%, #1a52d6 100%); color: #fff; font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 28px rgba(31, 98, 240, 0.22); }
.umsg-wait { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted, #8a8a92); }
.umsg-wait button { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(59, 125, 255, 0.45); background: rgba(31, 98, 240, 0.12); color: #8fb4ff; font-size: 12px; font-weight: 600; cursor: pointer; }
.umsg-wait button:hover { background: rgba(31, 98, 240, 0.22); color: #fff; }
.umsg-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.mtag { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 6px; border-radius: 999px; background: #161618; color: #e5e5ea; font-size: 12.5px; font-weight: 700; }
.mtag-skill { color: #30d158; padding-left: 10px; background: rgba(48, 209, 88, 0.1); }
.mtag-file { padding-left: 10px; cursor: pointer; transition: background 0.12s; }
.mtag-file:hover { background: #222225; }

/* a turn of the agent */
.turn { display: grid; gap: 8px; margin-top: 10px; }
.turn-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.turn-head b { font-weight: 900; letter-spacing: -0.02em; }
.turn-body { display: grid; gap: 10px; padding-left: 38px; }
.atext { font-size: 15.5px; line-height: 1.65; color: #f2f2f7; }
.atext.is-live > :last-child::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 12px var(--tc); vertical-align: 0; animation: pulseDot 1s ease-in-out infinite; }
@keyframes pulseDot { 50% { transform: scale(0.6); opacity: 0.6; } }

/* shimmering words for anything still happening */
.shimmer-text { background: linear-gradient(90deg, #6e6e73 0%, #6e6e73 35%, #fff 50%, #6e6e73 65%, #6e6e73 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 1.8s linear infinite; font-weight: 600; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.think { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-3); font-weight: 600; justify-self: start; }
.think.is-live svg { color: #d1d1d6; }

/* a step's sign: its colour and mark, on a soft tint */
.sign { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; color: var(--sc); background: color-mix(in srgb, var(--sc) 15%, transparent); }
.sign.is-live { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc) 40%, transparent); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc) 45%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }

/* the work, folded into one line */
.work { justify-self: stretch; }
.work-row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 2px 0; text-align: start; color: var(--ink-2); }
.work-row:hover { color: #fff; }
.work-signs { display: inline-flex; }
.work-signs .sign { width: 22px; height: 22px; box-shadow: 0 0 0 2px #000; background: color-mix(in srgb, var(--sc) 22%, #000); }
.work-signs .sign + .sign { margin-left: -6px; }
.work-label { display: inline-flex; align-items: baseline; gap: 9px; min-width: 0; font-size: 14px; font-weight: 600; }
.work-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-weight: 500; font-size: 13px; max-width: 420px; }
.work-caret { color: var(--ink-3); transition: transform 0.2s var(--ease); flex: none; }
.work.open .work-caret, .mate.open-steps .work-caret { transform: rotate(90deg); }
.work-steps { list-style: none; margin: 4px 0 4px 11px; padding: 0 0 0 18px; border-left: 1px solid #26262a; display: grid; gap: 1px; }
.step-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 32px; text-align: start; }
.step-row .sign { width: 22px; height: 22px; }
.step-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #b8b8bf; }
.step-title.s-shell { font-family: var(--mono); font-size: 12.5px; }
.step-row:hover .step-title, .cstep.open .step-title, .cstep.is-live .step-title { color: #fff; }
.step-time { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.step-body { display: grid; gap: 6px; padding: 2px 0 10px 32px; }
.code { margin: 0; padding: 11px 13px; border-radius: 12px; background: #0c0c0e; font: 12px/1.6 var(--mono); color: #b8b8bf; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; user-select: text; box-shadow: inset 0 0 0 1px #1d1d20; }
.code.out { color: #e5e5ea; }
.code.bad { color: #ff8a80; }

.skill-tag { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(48, 209, 88, 0.1); color: #30d158; font-size: 13px; font-weight: 600; }
.skill-tag b { color: #fff; font-weight: 800; }

/* what a step made (a picture, a clip, a voice): shown plainly after the step — no special look for generating */
.made-row { display: flex; flex-wrap: wrap; gap: 8px; }
.made { position: relative; display: block; padding: 0; border-radius: 14px; overflow: hidden; background: #101012; box-shadow: 0 0 0 1px #1f1f23; cursor: zoom-in; }
.made img { display: block; max-width: min(100%, 420px); max-height: 340px; width: auto; height: auto; }
.made-wait { width: 220px; height: 160px; cursor: default; }
.made-play { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #000; }
.made-audio { height: 36px; max-width: 380px; }
.made-model img { max-width: min(100%, 340px); max-height: 340px; }
.made-cube { width: 200px; height: 160px; display: grid; place-items: center; color: #8a8a92; }
.made-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 600; }
.model-media { position: relative; padding: 0; }
.model-view { width: 100%; height: calc(100vh - 230px); min-height: 320px; background: #121214; border-radius: 12px; --poster-color: transparent; }
.model-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #8a8a92; background: rgba(0, 0, 0, 0.5); padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.model-pic { max-width: min(100%, 420px); border-radius: 12px; }

.seen { justify-self: start; display: block; width: 220px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #222226; }
.seen img { display: block; width: 100%; }

/* a teammate: its face and what it is doing, its words as a quote in its colour */
.mate { display: grid; gap: 6px; }
.mate-row { display: flex; align-items: center; gap: 9px; min-height: 34px; text-align: start; }
.mate-row b { font-weight: 900; font-size: 14.5px; color: color-mix(in srgb, var(--mc) 45%, #fff); flex: none; }
.mate-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-2); }
.mate-row:hover .mate-what { color: #fff; }
.mate-steps { margin-left: 13px; border-left-color: color-mix(in srgb, var(--mc) 40%, #26262a); }
.mate-said { margin: 2px 0 0 13px; padding: 2px 0 2px 16px; border-left: 3px solid var(--mc); font-size: 14.5px; line-height: 1.6; color: #e5e5ea; }

.note { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 13.5px; font-weight: 600; }
.note.wait { color: #ff8aa1; }
.note.yes { color: #30d158; }
.note.no { color: var(--ink-3); }
.note.err { color: #ff8a80; }
.note.quiet { color: var(--ink-3); font-weight: 500; font-size: 12.5px; }
.chat-approval { margin-left: 38px; }
.working { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; padding: 2px 0 0 38px; }
.working-dots { display: inline-flex; gap: 4px; }
.working-watch { color: var(--blue); font-size: inherit; font-weight: 600; margin-left: -4px; }
.working-watch:hover { text-decoration: underline; }
.working-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--blue)); animation: dots 1.1s ease-in-out infinite; }
.working-dots i:nth-child(2) { animation-delay: 0.15s; } .working-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---- agents ------------------------------------------------------------------------------------- */
.agents-project { display: grid; gap: 10px; margin-top: 8px; }
.agents-project-h { display: flex; align-items: center; justify-content: space-between; }
.agents-project-name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.agents-project-name i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.agent-card { position: relative; display: flex; align-items: stretch; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.18s; }
.agent-card:hover { border-color: color-mix(in srgb, var(--ac, var(--blue)) 50%, var(--line)); }
.agent-card-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px; text-align: start; }
.agent-card-text { min-width: 0; display: grid; gap: 4px; }
.agent-card-name { display: flex; align-items: center; gap: 8px; }
.agent-card-name b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.agent-card-text p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent-card-tools { display: flex; gap: 3px; margin-top: 2px; }
.agent-card-chat { display: grid; place-items: center; gap: 4px; width: 64px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.agent-card-chat:hover { color: #fff; background: var(--s2); }
.agent-add { justify-content: center; align-items: center; gap: 8px; min-height: 92px; color: var(--ink-3); font-weight: 700; border-style: dashed; }
.agent-add:hover { color: #fff; }
.agent-new { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; padding: 12px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line-2); }
.agent-new-actions { display: flex; gap: 6px; }

.agent-page { gap: 14px; }
.ag-head { display: flex; align-items: flex-start; gap: 22px; padding: 18px 20px; border-radius: 28px; background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 60%), var(--s1); border: 1px solid var(--line); }
.ag-face { position: relative; flex: none; display: grid; place-items: center; width: 140px; height: 140px; border-radius: 28px; background: color-mix(in srgb, var(--ac) 10%, #000); }
.ag-face-edit { position: absolute; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11.5px; font-weight: 700; opacity: 0; transition: opacity 0.15s; }
.ag-face:hover .ag-face-edit { opacity: 1; }
.ag-id { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ag-name { background: transparent; border: 0; outline: 0; color: #fff; font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: -0.045em; padding: 0; user-select: text; }
.ag-role { background: transparent; border: 1px solid transparent; border-radius: 10px; outline: 0; resize: none; color: var(--ink-2); font: 400 15px/1.5 var(--font); padding: 4px 6px; margin-left: -6px; user-select: text; }
.ag-role:focus { border-color: var(--line-2); background: #000; }
.ag-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ag-actions { flex: none; }
.ag-account { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.ag-account .input { max-width: 320px; }
.ag-brain { display: grid; gap: 12px; }
.ag-brain-row { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-2); }
.ag-brain-row > span { width: 80px; flex: none; font-weight: 600; }
.ag-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ag-skill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; background: #000; border: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; font-weight: 600; transition: all 0.15s; }
.ag-skill:hover { color: #fff; }
.ag-skill.on { color: var(--k-skill); border-color: color-mix(in srgb, var(--k-skill) 45%, var(--line)); background: color-mix(in srgb, var(--k-skill) 10%, #000); }
.ag-file .card-title code { font: 600 11.5px var(--mono); color: var(--ink-3); background: #000; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.ag-md { min-height: 220px; height: auto; padding: 12px 14px; font: 13.5px/1.6 var(--mono); resize: vertical; margin-top: 12px; }
.ag-chats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.ag-chats button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2); text-align: start; }
.ag-chats button:hover { background: var(--s2); color: #fff; }
.ag-chats span { color: var(--ink-3); font-size: 12.5px; }
.ag-danger { display: flex; justify-content: flex-end; }

/* ---- a project ---------------------------------------------------------------------------------- */
.pj-head { display: flex; align-items: center; gap: 16px; }
.pj-badge { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--c); color: #fff; font-family: var(--display); font-weight: 900; font-size: 26px; flex: none; }
.pj-titles { flex: 1; min-width: 0; }
.pj-titles h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 36px; letter-spacing: -0.045em; line-height: 1.05; }
.pj-titles p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pj-team { display: flex; }
.pj-team button + button { margin-left: -8px; }
.pj-chats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pj-chats button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-align: start; }
.pj-chats button:hover { background: var(--s2); }
.pj-chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.pj-chat-who { font-size: 12.5px; color: var(--ink-3); }
.pj-chats time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pj-none { display: grid; justify-items: center; gap: 10px; padding: 26px; color: var(--ink-2); }

@media (max-width: 1100px) {
  :root { --sb-w: 240px; }
  .chat-head { padding-right: 160px; }
  .agent-new { grid-template-columns: 1fr; }
}

/* ---- open pages: no box around everything (owner, 2026-10-08) ------------------------------------------ */
.agent-card { background: transparent; border: 0; border-radius: 24px; transition: background 0.18s; }
.agent-card:hover { background: #0d0d0f; }
.agent-card-main { padding: 14px 16px; }
.agent-card-tools { flex-wrap: wrap; }
.agent-card-chat { position: absolute; top: 12px; right: 12px; width: auto; height: 30px; padding: 0 12px; display: inline-flex; flex-direction: row; gap: 6px; border: 0; border-radius: 999px; background: #fff; color: #000; font-size: 12.5px; opacity: 0; transition: opacity 0.15s; }
.agent-card:hover .agent-card-chat, .agent-card:focus-within .agent-card-chat { opacity: 1; }
.agent-card-chat:hover { background: #e9e9ee; color: #000; }
.agent-add { border: 1px dashed #2a2a2e; }
.agent-page .card, .project-page .card { background: transparent; border: 0; border-radius: 0; padding: 18px 2px 22px; border-top: 1px solid var(--line); }
.agent-page .ag-head { background: radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 65%); border: 0; }
.agent-page .card-title, .project-page .card-title { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.tsw-item { background: #0b0b0d; border-color: transparent; }
.tsw-item:hover { background: #111114; }
.ag-md { background: #0b0b0d; border-color: #1d1d20; }

/* one button: send, or stop while the agent works */
.cmp-send.is-stop { background: #fff; color: #000; }
.cmp-send .stop-sq { width: 12px; height: 12px; border-radius: 3px; background: #000; }
.cmp-send.is-stop::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(255, 255, 255, 0.85); animation: spin 1s linear infinite; }
.cmp-send { position: relative; }

/* pickers inside the message box */
.picker { position: relative; }
.pick-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 8px; border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 700; transition: background 0.15s, color 0.15s; }
.pick-chip:hover, .pick-chip.on { background: var(--s3); color: #fff; }
.pick-chip span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-caret { transform: rotate(90deg); color: var(--ink-3); }
.pick-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.pick-menu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; width: 300px; max-height: 360px; overflow-y: auto; display: grid; gap: 2px; padding: 6px; border-radius: 18px; background: #111113; box-shadow: 0 0 0 1px #26262a, 0 24px 60px rgba(0, 0, 0, 0.7); }
.pick-menu > button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 12px; text-align: start; color: var(--ink-2); }
.pick-menu > button:hover, .pick-menu > button.on { background: var(--s3); color: #fff; }
.pick-text { flex: 1; min-width: 0; display: grid; }
.pick-text b { color: #fff; font-size: 13.5px; font-weight: 700; }
.pick-text small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-new { color: var(--ink-3) !important; font-size: 13px; font-weight: 600; gap: 8px !important; }
.pick-add { display: grid; gap: 6px; padding: 6px; }
.pick-add input { height: 34px; border-radius: 10px; background: #000; border: 1px solid var(--line-2); padding: 0 10px; color: #fff; font-size: 13.5px; user-select: text; }
.pick-go { height: 34px; border-radius: 10px; background: #fff; color: #000; font-weight: 700; font-size: 13px; }
.pick-go:disabled { opacity: 0.3; }

/* a project, like a Claude project: write on the left, what it has on the right */
.pj2 { gap: 22px; }
.pj2-head h1 { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: -0.04em; color: #fff; }
.pj2-head h1 i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: none; }
.pj2-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; max-width: 640px; }
.pj2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.pj2-main { display: grid; gap: 18px; min-width: 0; }
.pj2-chats { list-style: none; margin: 0; padding: 0; display: grid; }
.pj2-chats li { border-bottom: 1px solid #141417; }
.pj2-chats button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 8px; text-align: start; border-radius: 10px; }
.pj2-chats button:hover { background: #0c0c0e; }
.pj2-chats time { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pj2-none { padding: 14px 8px; color: var(--ink-3); font-size: 13.5px; border: 0 !important; }
.pj2-side { display: grid; gap: 6px; position: sticky; top: 0; }
.pj-side-sec { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid #16161a; }
.pj-side-sec:first-child { padding-top: 2px; }
.pj-side-h { display: flex; align-items: center; justify-content: space-between; }
.pj-side-h b { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.005em; }
.pj-side-h button { font-size: 12.5px; font-weight: 700; color: var(--ink-3); padding: 2px 8px; border-radius: 8px; }
.pj-side-h button:hover { color: #fff; background: var(--s2); }
.pj-side-p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pj-agents, .pj-accts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.pj-agents button, .pj-acct { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 10px; text-align: start; min-width: 0; }
.pj-agents button:hover, .pj-acct:hover { background: #0e0e10; }
.pj-agent-text { flex: 1; min-width: 0; display: grid; }
.pj-agent-text b { font-size: 13px; font-weight: 700; color: #e5e5ea; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-agent-text small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-agent-text small.ok { color: #30d158; }
.pj-accts li { display: flex; align-items: center; gap: 4px; }
.pj-acct { flex: 1; }
.pj-access { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--blue) 30%, #111); }
.pj-access.look { color: #d1d1d6; background: #1a1a1e; }
.pj-access:hover { filter: brightness(1.25); }
.pj-side-add { display: flex; gap: 2px; flex-wrap: wrap; }
.pj-side-add .pick-chip { height: 28px; font-size: 12.5px; color: var(--ink-3); padding: 0 10px 0 8px; }
.pj-side-add .pick-chip .pick-caret { display: none; }
.pj-side-add .pick-menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; }
.pj-instr { display: grid; gap: 8px; }
.pj-instr textarea { min-height: 180px; resize: vertical; padding: 10px 12px; border-radius: 12px; background: #0b0b0d; border: 1px solid #26262a; color: #fff; font-size: 13px; line-height: 1.55; user-select: text; }
.pj-instr-go { display: flex; justify-content: flex-end; gap: 6px; }
.pj-instr-go button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.pj-instr-go .go { background: #fff; color: #000; }
.pj-instr-go .go:disabled { opacity: 0.3; }
.pj-more { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 10px; }
.pj-more button { height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.pj-more button:hover { color: #fff; background: var(--s2); }
.pj-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.pj-back:hover { color: #fff; background: var(--s2); }
.pj-sub-h { margin: 0; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.04em; }
.pj2-side .acct-add { padding: 12px; border-radius: 16px; background: #0b0b0d; border: 1px solid #1c1c20; }
.pj2-side .acct-pick { grid-template-columns: repeat(3, 1fr); }
.pj2-side .acct-add-row { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .pj2-grid { grid-template-columns: 1fr; } .pj2-side { position: static; } }

/* ---- Fluffy 2, simpler (2026-10-08): your agents are your projects -------------------------------------------- */
.sb { gap: 10px; padding: 0 12px 12px; }
.sb-new { height: 42px; }
.sb-scroll { margin: 2px -6px 0; padding: 0 6px; }
.sb-sec { display: grid; gap: 2px; padding-bottom: 14px; }
.sb-sec .sb-label { padding: 8px 4px 8px 10px; }
.sb-agent { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 10px 7px 8px; border-radius: 14px; text-align: start; transition: background 0.14s; }
.sb-agent:hover { background: #111114; }
.sb-agent.on { background: #18181c; }
.sb-agent.near::before { content: ''; position: absolute; left: -6px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: #48484d; }
.sb-agent.on::before { content: ''; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: #fff; }
.sb-agent-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sb-agent-text b { font-size: 14.5px; font-weight: 700; color: #f2f2f7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
.sb-agent-text small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-agent-add .sb-agent-text b { color: var(--ink-3); font-weight: 600; font-size: 13.5px; }
.sb-agent-add:hover .sb-agent-text b { color: #fff; }
.sb-agent-plus { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); border: 1.5px dashed #2c2c31; flex: none; }
.sb-agent-add:hover .sb-agent-plus { color: #fff; border-color: #55555b; }
.sb-chat { height: 38px; padding: 0 10px 0 8px; gap: 11px; border-radius: 12px; font-size: 13.5px; }
.sb-hint { margin: 2px 10px; font-size: 12.5px; color: var(--ink-3); }
.sb-foot { gap: 2px; padding-top: 10px; }
.sb-nav { height: 38px; border-radius: 12px; }
.sb-plus { width: 26px; height: 26px; border-radius: 8px; }

/* the new-agent window */
.na-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.na { position: relative; width: min(460px, 100%); display: grid; gap: 14px; justify-items: center; padding: 26px 26px 20px; border-radius: 28px; background: #0c0c0e; box-shadow: 0 0 0 1px #222226, 0 40px 120px rgba(0, 0, 0, 0.8); }
.na-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.na-x:hover { color: #fff; background: #1a1a1e; }
.na-stage { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, color-mix(in srgb, var(--na) 30%, transparent), transparent); }
.na-faces { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 100%; }
.na-faces button { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; opacity: 0.55; transition: opacity 0.15s, background 0.15s; }
.na-faces button:hover { opacity: 1; }
.na-faces button.on { opacity: 1; background: #1a1a1e; box-shadow: inset 0 0 0 1.5px #3a3a40; }
.na-colors { display: flex; gap: 8px; }
.na-colors button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sw); color: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); transition: transform 0.15s; }
.na-colors button.on { box-shadow: 0 0 0 2px #0c0c0e, 0 0 0 4px #fff; }
.na-colors button:hover { transform: scale(1.12); }
.na-name, .na-role { width: 100%; border-radius: 14px; background: #000; border: 1px solid #26262a; padding: 0 16px; color: #fff; user-select: text; }
.na-name { height: 50px; font-size: 18px; font-weight: 700; text-align: center; }
.na-role { height: 42px; font-size: 13.5px; text-align: center; }
.na-name:focus, .na-role:focus { outline: none; border-color: var(--blue); }
.na-go { width: 100%; height: 46px; border-radius: 14px; background: #fff; color: #000; font-weight: 800; font-size: 15px; }
.na-go:disabled { opacity: 0.25; }
.na-note { margin: 0; font-size: 12px; color: var(--ink-3); text-align: center; }

/* a new chat */
.nc-hero h1 { font-size: 38px; }
.nc-sub { margin: -2px 0 0 !important; font-size: 14px !important; color: var(--ink-3) !important; }

/* an agent's home */
.pj2-head { display: flex; align-items: center; gap: 20px; }
.pj2-face { border-radius: 50%; flex: none; transition: transform 0.2s var(--spring); }
.pj2-face:hover { transform: scale(1.04); }
.pj2-titles { flex: 1; min-width: 0; }
.pj2-titles h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 38px; letter-spacing: -0.045em; line-height: 1.05; color: #fff; }
.pj2-titles p { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; max-width: 620px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pj2-set { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 700; background: #111114; }
.pj2-set:hover { color: #fff; background: #1a1a1e; }
.pj2-chats button { padding: 13px 10px; gap: 13px; }

/* the chat's one menu */
.chat-menu { width: 340px; padding: 6px; }
.cm-row { width: 100%; display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 12px; color: #e5e5ea; font-size: 13.5px; font-weight: 600; text-align: start; }
.cm-row:hover { background: #1a1a1e; color: #fff; }
.chat-menu .pop-h { margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid #1f1f23; }
.icon-btn.on { background: #1a1a1e; color: #fff; }

/* Arabic names and titles sit on the same left edge as the rest of the list */
.sb-agent-text b, .sb-agent-text small, .sb-chat-title { text-align: left; }

/* the main places: plain rows under New chat, like Claude's and ChatGPT's sidebars */
.sb-places { display: grid; gap: 1px; flex: none; }
.sb-place { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 12px; border-radius: 10px; color: #d1d1d6; font-size: 14px; font-weight: 600; text-align: start; transition: background 0.12s, color 0.12s; }
.sb-place svg { color: #a1a1a6; flex: none; }
.sb-place:hover { background: #141417; color: #fff; }
.sb-place.on { background: #1c1c20; color: #fff; }
.sb-place.on svg { color: #fff; }
.routine-who { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); vertical-align: 1px; }
.routine-who small { font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* the chips on the right of the message box, as before Fluffy 2 */
.bar-chips { display: flex; align-items: center; gap: 2px; }
/* the starfield behind every page, as before Fluffy 2 */
.app.v2 .main { position: relative; isolation: isolate; }
.app.v2 .main > .starfield { z-index: -1; }

/* memory, by who knows it */
.mem-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border-radius: 18px; background: #0d0d10; box-shadow: inset 0 0 0 1px #1c1c20; }
.mem-add .input { background: transparent; border: 0; box-shadow: none; }
.mem-add .pick-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; }
.mem-search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 12px; color: var(--ink-3); background: #0b0b0d; }
.mem-search input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-size: 14px; user-select: text; }
.mem-group { display: grid; gap: 2px; margin-top: 8px; }
.mem-group-h { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #1c1c20; }
.mem-who { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; color: #fff; }
.mem-who i { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.mem-all { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: #1c1c20; color: #fff; }
.mem-count { font-size: 12px; font-weight: 700; color: var(--ink-3); background: #141417; padding: 2px 8px; border-radius: 999px; }
.mem-group-h small { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.mem-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mem { display: flex; align-items: flex-start; gap: 10px; padding: 11px 6px; border-bottom: 1px solid #121215; border-radius: 10px; }
.mem:hover { background: #0c0c0e; }
.mem-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.mem-text { text-align: start; font-size: 14.5px; line-height: 1.5; color: #e5e5ea; user-select: text; }
.mem-src { font-size: 12px; color: var(--ink-3); }
.mem-src b { color: var(--blue); font-weight: 700; }
.mem-src .link { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.mem-tools { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.mem:hover .mem-tools, .mem.is-first .mem-tools { opacity: 1; }
.mem.is-first .mem-tools .icon-btn:first-child { color: var(--blue); }

/* Settings → Phone */
.ph-warn { color: #ff8aa1; font-size: 13.5px; margin: 8px 0 0; }
.ph-ok { color: #30d158; font-size: 13.5px; margin: 8px 0 0; font-weight: 600; }
.ph-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ph-step { display: flex; gap: 14px; align-items: flex-start; }
.ph-n { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #1c1c20; color: #fff; }
.ph-step.done .ph-n { background: var(--blue); }
.ph-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ph-body b { font-size: 15px; color: #fff; }
.ph-body p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ph-body .btn { justify-self: start; }
.ph-link { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ph-qr { width: 172px; height: 172px; border-radius: 14px; background: #fff; padding: 10px; image-rendering: pixelated; flex: none; }
.ph-link-text { flex: 1; min-width: 220px; display: grid; gap: 10px; }
.ph-link-text code { font-family: var(--mono); font-size: 12.5px; color: #d1d1d6; background: #0b0b0d; padding: 8px 10px; border-radius: 10px; overflow-wrap: anywhere; user-select: all; }
/* the phone, before pairing */
.unpaired { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px; text-align: center; background: #000; color: #fff; }
.unpaired-mark { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--blue, #1f6fff); font: 900 30px/1 var(--display, system-ui); }
.unpaired h1 { margin: 6px 0 0; font: 800 28px/1.1 var(--display, system-ui); letter-spacing: -0.03em; }
.unpaired p { margin: 0; max-width: 320px; color: #a1a1a6; font-size: 15px; line-height: 1.5; }

/* ---- on the phone (Fluffy through Tailscale, or any narrow window) ------------------------------------------ */
.mnav, .sb-scrim { display: none; }
@media (max-width: 760px) {
  .app.v2, .app.v2.has-panel, .app.v2.panel-wide { grid-template-columns: minmax(0, 1fr); height: 100dvh; }
  .app.v2 .main { grid-column: 1; }
  .app.v2 .sb { position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); z-index: 40; transform: translateX(-104%); transition: transform 0.26s var(--ease); padding-top: env(safe-area-inset-top); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .app.v2.sb-open .sb { transform: none; box-shadow: 0 0 80px rgba(0, 0, 0, 0.9); }
  .app.v2.sb-open .sb-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.6); }
  .sb-top { padding-left: 16px; }
  .sb-drag { display: none; }
  .mnav { display: grid; place-items: center; position: fixed; z-index: 30; top: calc(7px + env(safe-area-inset-top)); left: 10px; width: 40px; height: 40px; border-radius: 13px; color: #fff; background: rgba(22, 22, 26, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px #26262b; }
  .app.v2 .panel { position: fixed; inset: 0; z-index: 50; margin: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .panel-resize { display: none; }
  .app.v2 .topbar { top: env(safe-area-inset-top); }
  .app.v2 .page-scroll { padding: calc(64px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
  .page, .page-wide { max-width: 100%; }
  .view-header h1, .open-head h1 { font-size: 30px; }
  .view-header { flex-wrap: wrap; }
  .chat-head { height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 120px 0 60px; }
  .chat-col { width: calc(100% - 24px); }
  .chat-foot { width: calc(100% - 16px); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .turn-body { padding-left: 0; }
  .newchat { place-items: end center; padding: calc(70px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); }
  .nc-stage { gap: 16px; }
  .nc-hero h1 { font-size: 27px; }
  .nc-hero .av { --av: 76px !important; }
  /* iOS zooms into any field under 16px — keep every field at 16 */
  input, textarea, select, .cmp textarea { font-size: 16px !important; }
  .bar-chips .cbar-chip-wrap:nth-child(2) { display: none; }
  .cbar-menu { position: fixed; left: 10px; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom)); min-width: 0; }
  .pick-menu { position: fixed !important; left: 10px !important; right: 10px !important; width: auto !important; top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .pj2-head { gap: 14px; }
  .pj2-head .av { --av: 60px !important; }
  .pj2-titles h1 { font-size: 28px; }
  .pj2-set span, .pj2-set { padding: 0 10px; }
  .mem-add { grid-template-columns: 1fr auto; }
  .mem-add .btn { grid-column: 1 / -1; }
  .ph-link { flex-direction: column; }
  /* 2026-10-10 phone pass (owner: "make all of it fit the phone"): nothing wider than the screen */
  .mem-list, .rules { grid-template-columns: minmax(0, 1fr); }
  .mem-text, .card-sub, .rule-body, .row-sub, .conn-meta, .md, .atext, .umsg, .file-doc { overflow-wrap: anywhere; }
  /* Settings' sections: all of them visible, on two lines when they don't fit one */
  .view-actions { flex: 1 1 100%; max-width: 100%; justify-content: flex-start; }
  .view-actions .seg { flex-wrap: wrap; border-radius: 20px; }
  /* a choice of several goes under its explanation instead of squeezing it into a sliver */
  .rule:has(> .seg) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rule > .seg { justify-self: start; max-width: 100%; flex-wrap: wrap; }
  .rule-pick { flex-wrap: wrap; }
  .tidy-model { min-width: 0; }
  /* pages, lists and cards shrink to the screen (a grid column used to grow to its widest word or row of buttons) */
  .page, .stack, .rows, .conn-list, .tree { grid-template-columns: minmax(0, 1fr); }
  .card-grid, .card-grid.two { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .card { padding: 16px; }
  .card-row > :first-child { min-width: 0; }
  .check-row { flex-wrap: wrap; row-gap: 8px; }
  /* list rows: the name and its details on the left, the buttons on the right, details under the name */
  .row, .row.static { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 12px 6px; }
  .row > .row-cell { grid-column: 2 / 3; white-space: normal; font-size: 12.5px; }
  .row > .row-tools { grid-column: 3; grid-row: 1 / span 3; align-self: center; flex-wrap: wrap; justify-content: flex-end; }
  .conn-row { flex-wrap: wrap; row-gap: 4px; padding: 6px 6px 6px 10px; }
  .conn-row .conn-name { flex: 1 1 55%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* an agent's page: face, then its name and what it does, then New chat */
  .ag-head { flex-wrap: wrap; gap: 14px; padding: 14px; }
  .ag-face .av { --av: 88px !important; }
  .ag-id { flex: 1 1 180px; }
  .ag-actions { flex: 1 1 100%; }
  .ag-skill-group, .ag-skill-list { grid-template-columns: minmax(0, 1fr); }
  /* a row of choices that doesn't fit goes onto two lines inside its pill */
  .check-row .seg, .rule-pick .seg { flex-shrink: 1; flex-wrap: wrap; max-width: 100%; border-radius: 18px; }
  /* the chat's ⋯ menu: across the screen under the header, scrolling when it's long (it ran off the left edge) */
  .chat-menu { position: fixed; top: calc(58px + env(safe-area-inset-top)); left: 10px; right: 10px; width: auto; max-height: calc(100dvh - 150px - env(safe-area-inset-top)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* New agent: the faces shrink to fit instead of pushing the window past the screen */
  .na-scrim { padding: 12px; }
  .na { grid-template-columns: minmax(0, 1fr); padding: 22px 16px 16px; }
  .na-faces { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .na-faces button img, .na-faces button canvas { max-width: 100%; height: auto; }
  .na-stage { width: 132px; height: 132px; }
}
/* touch screens have no hover: show what hover reveals */
@media (hover: none) {
  .mem-tools, .agent-card-chat { opacity: 1; }
}

/* the / and @ menus: where a skill comes from, and the way to add one */
.cmp-src { flex: none; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; background: #1c1c20; color: var(--ink-3); }
.cmp-src.s-own { background: rgba(48, 209, 88, 0.14); color: #30d158; }
.cmp-src.s-given { background: rgba(31, 111, 255, 0.16); color: #6aa1ff; }
.cmp-menu button.cmp-go span:last-child { color: var(--ink-2); }

/* an agent's skills */
.ag-skill-group { display: grid; gap: 2px; margin-top: 12px; }
.ag-skill-h { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 4px 2px; }
.ag-skill-h span { font-weight: 600; }
.ag-skill-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ag-skill-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 4px; border-bottom: 1px solid #141417; }
.ag-skill-list b { font-size: 13.5px; color: #fff; flex: none; }
.ag-skill-list small { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-skill-none { margin-top: 12px; }
.cmp.is-drop { box-shadow: 0 0 0 2px var(--blue), 0 18px 50px rgba(0, 0, 0, 0.55); }

/* copy / edit / send again under a message, shown on hover (always on touch screens) */
.msg-acts { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.umsg:hover .msg-acts, .atext-wrap:hover .msg-acts { opacity: 1; }
.umsg .msg-acts { justify-content: flex-end; }
.msg-acts button { width: 28px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); }
.msg-acts button:hover { color: #fff; background: #17171b; }
.atext-wrap { display: grid; gap: 2px; }
@media (hover: none) { .msg-acts { opacity: 0.8; } }
.sb-search { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 2px 6px; padding: 0 10px; border-radius: 10px; background: #0f0f12; color: var(--ink-3); }
.sb-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-size: 13px; user-select: text; }
.row-actions .pick-menu, .card-row .pick-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; }

/* the message box near the top of the screen (an agent's page): its lists open downward */
.cmp.menus-down .cmp-menu { bottom: auto; top: calc(100% + 8px); }
.cmp.menus-down .cbar-menu, .cmp.menus-down .pick-menu { bottom: auto; top: calc(100% + 8px); }

/* Settings → Hands → Creative tools: the Seedance 2.5 box (where it runs, the ModelArk key, his pack price) */
.seedance-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, rgba(255,255,255,.08)); display: flex; flex-direction: column; gap: 8px; }

/* The memory menu: where chats tidy up, and "tidy up now" (2026-10-10) */
.tidy-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted, #8a8a92); }
.tidy-row .seg button { height: 24px; padding: 0 9px; font-size: 11.5px; }

/* ---- the folded sidebar: a rail of icons (owner, 2026-10-10) ----------------------------------------- */
.app.v2.sb-rail { --sb-w: 72px; }
.sb-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); -webkit-app-region: no-drag; transition: color 0.15s, background 0.15s; }
.sb-toggle:hover { color: #fff; background: var(--s3); }
.sb.rail { align-items: center; padding: 0 0 12px; gap: 4px; }
.sb.rail .sb-top { width: 100%; padding: 0; height: 52px; }
.sb.rail .sb-scroll { margin: 0; padding: 4px 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sb.rail .sb-foot { width: 100%; display: flex; justify-content: center; }
.sb-rail-group { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sb-rail-group:not(.sb-scroll) { padding: 6px 0; border-bottom: 1px solid var(--line); width: 44px; }
.sb-ic { width: 44px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); flex: none; transition: background 0.12s, color 0.12s; }
.sb-ic:hover { background: var(--s2); color: #fff; }
.sb-ic.on { background: var(--s3); color: #fff; }
.sb-ic-new { background: #fff; color: #000; }
.sb-ic-new:hover { background: #e9e9ee; color: #000; }
.sb-ic-agent { height: 46px; }
.sb-ic-agent.on { box-shadow: inset 3px 0 0 #fff; }
@media (max-width: 760px) { .app.v2.sb-rail { --sb-w: 0px; } }
/* Settings → Brain & models: the per-model tidy rows line up */
.tidy-model { min-width: 92px; }