@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(./KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(./KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(./KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(./KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(./KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(./KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(./KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(./KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(./KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(./KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(./KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(./KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(./KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(./KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(./KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(./KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(./KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(./KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(./KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(./KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(./KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(./KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(./KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(./KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(./KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(./KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(./KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(./KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(./KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(./KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(./KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(./KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(./KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(./KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(./KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(./KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(./KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(./KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(./KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(./KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(./KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(./KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(./KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(./KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(./KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(./KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(./KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(./KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(./KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(./KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(./KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(./KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(./KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(./KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(./KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(./KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(./KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(./KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(./KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.33"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #f5f5f5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 16px;
  overflow: hidden;
}

.settings-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.settings.settings-embedded {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  background: #f5f5f5;
  overflow: hidden;
}

.settings.settings-embedded .settings-shell,
.settings .settings-shell.settings-shell-embedded {
  border-radius: 0;
}

.settings .settings-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  background: #f5f5f5;
}

.settings .settings-nav {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  border-right: 0;
}

.settings .settings-nav-top {
  position: relative;
  height: 92px;
  flex-shrink: 0;
  -webkit-app-region: drag;
}

.settings .settings-nav-collapse-btn {
  position: absolute;
  left: 92px;
  top: calc(
    var(--mac-window-controls-top) + (var(--mac-window-controls-size) - 20px) /
      2 + var(--mac-window-controls-align-y)
  );
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #7a7a7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
  -webkit-app-region: no-drag;
}

.settings .settings-nav-collapse-btn:hover {
  color: #525252;
}

.settings .settings-nav-collapse-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.settings .settings-nav-back-btn {
  position: absolute;
  left: 16px;
  top: 54px;
  height: 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #7a7a7a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
  -webkit-app-region: no-drag;
}

.settings .settings-nav-back-btn:hover {
  color: #525252;
}

.settings .settings-nav-tabs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings .settings-nav-tab {
  width: calc(100% - 24px);
  margin: 0 12px;
  min-height: 32px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #292929;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.settings .settings-nav-tab:hover {
  background: #ebebeb;
}

.settings .settings-nav-tab.active {
  background: #e6e6e6;
}

.settings .settings-nav-tab-icon {
  width: 18px;
  height: 18px;
  color: #525252;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings .settings-nav-tab-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings .settings-workbench {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  position: relative;
  border-radius: 16px 0 0 16px;
  overflow: hidden;
  box-shadow:
    inset 1px 0 0 #f0f0f0,
    inset 0 1px 0 #f0f0f0,
    inset 0 -1px 0 #f0f0f0;
}

.settings .settings-workbench::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  -webkit-app-region: drag;
  z-index: 3;
}

.settings .settings-workbench-scroll {
  padding: 96px 136px 72px;
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.settings .settings-workbench-scroll.has-skills-save-bar {
  padding-bottom: 148px;
}

.settings .settings-workbench-inner {
  max-width: 848px;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.settings .settings-button {
  height: 36px;
  border-radius: 12px;
  padding: 7px 16px;
  border: 1px solid #f0f0f0;
  background: transparent;
  color: #292929;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.settings .settings-button:hover:not(:disabled) {
  background: #f3f3f3;
  border-color: #e8e8e8;
}

.settings .settings-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.settings .settings-button-primary {
  background: #292929;
  border-color: #292929;
  color: #fafafa;
}

.settings .settings-button-redeem {
  background: #ffffff;
  border-color: #e0e0e0;
  color: #292929;
}

.settings .settings-button-primary:hover:not(:disabled) {
  background: #171717;
  border-color: #171717;
}

.settings .settings-button-redeem:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #d0d0d0;
}

.settings .settings-button-template {
  font-size: 15px;
}

.settings .settings-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.settings .settings-page-heading-group {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings .settings-page-title {
  margin: 0;
  color: #292929;
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  justify-content: space-between;
}

.settings .settings-page-title-hint {
  font-size: 15px;
  font-weight: 400;
  color: #fa920a;
}

.settings .settings-page-description {
  color: #9e9e9e;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings .settings-page-note {
  min-height: 72px;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  color: #7a7a7a;
  font-size: 15px;
  line-height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

.settings .settings-empty-card,
.settings .settings-mcp-empty-card {
  min-height: 268px;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings .settings-empty-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.settings .settings-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.settings .settings-empty-title {
  color: #292929;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  text-align: center;
}

.settings .settings-empty-hint {
  color: #9e9e9e;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  text-align: center;
}

.settings .settings-general-page,
.settings .settings-usage-page,
.settings .settings-mcp-page,
.settings .settings-placeholder-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings .settings-general-page {
  flex: 1;
  min-height: 0;
}

.settings .settings-general-card {
  border-radius: 15px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  /* overflow: hidden; */
}

.settings .settings-general-row {
  min-height: 88px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings .settings-general-row-toggle {
  min-height: 86px;
}

.settings .settings-general-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-general-label {
  color: #292929;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings .settings-general-badge {
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(54, 178, 97, 0.2);
  color: #36b261;
}

.settings .settings-general-badge.error {
  background: rgba(240, 86, 86, 0.2);
  color: #f05656;
}

.settings .settings-general-hint {
  color: #7a7a7a;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-general-divider {
  margin: 0 16px;
  height: 1px;
  background: #e5e5e5;
}

.settings .settings-general-footer {
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings .settings-general-logout-button {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--settings-muted);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.settings .settings-general-logout-button:hover {
  background: transparent;
  border-color: transparent;
  color: var(--settings-title);
  opacity: 0.88;
}

/* Account & Security section */
.settings .settings-account-phone {
  color: #7a7a7a;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  white-space: nowrap;
}

.settings .settings-account-delete-button {
  height: 32px;
  padding: 0 16px;
  border: 1px solid #ff4d4f;
  border-radius: 8px;
  background: transparent;
  color: #ff4d4f;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.settings .settings-account-delete-button:hover {
  background: #ff4d4f;
  color: #fff;
}

.settings .settings-general-palette {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.settings .settings-general-swatch {
  --swatch-ring: #8fc7ea;
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.settings .settings-general-swatch.light {
  --swatch-ring: #fc5d1e;
  background: linear-gradient(180deg, #fc5d1e 0 50%, #ffffff 50% 100%);
}

.settings .settings-general-swatch.dark {
  --swatch-ring: #7b96ff;
  background:
    linear-gradient(180deg, #d66cff 0%, #8b7cff 52%, #5f8dff 100%) top / 100%
      50% no-repeat,
    linear-gradient(180deg, #050505 0 100%) bottom / 100% 50% no-repeat;
}

.settings .settings-general-swatch.active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--swatch-ring);
}

.settings .settings-general-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 140px;
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--theme-text-primary, #292929);
  background-color: var(--theme-surface-base, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--settings-border, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  flex-shrink: 0;
}

.settings .settings-general-select:hover {
  border-color: var(--settings-accent, #fc5d1e);
}

.settings .settings-general-select:focus {
  outline: none;
  border-color: var(--settings-accent, #fc5d1e);
  box-shadow: 0 0 0 2px rgba(252, 93, 30, 0.15);
}

.settings .settings-general-toggle {
  width: 43px;
  height: 26px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: #d4d4d4;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.settings .settings-general-toggle.active {
  background: #292929;
}

.settings .settings-general-toggle-knob {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform 0.15s ease;
}

.settings .settings-general-toggle.active .settings-general-toggle-knob {
  transform: translateX(17px);
}

.settings .settings-usage-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings .settings-usage-stat-card {
  min-height: 116px;
  border-radius: 12px;
  background: #f7f7f7;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.settings .settings-usage-stat-value {
  color: #1f1f1f;
  font-size: 30px;
  line-height: 42px;
  font-weight: 600;
}

.settings .settings-usage-stat-label {
  color: #7a7a7a;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-usage-section-title {
  color: #292929;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-usage-breakdown-card {
  border-radius: 14px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  overflow: hidden;
}

.settings .settings-usage-breakdown-row {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-usage-breakdown-row.is-separated {
  border-top: 1px solid #e5e5e5;
}

.settings .settings-usage-breakdown-head,
.settings .settings-usage-breakdown-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.settings .settings-usage-breakdown-model {
  color: #292929;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-usage-breakdown-meta,
.settings .settings-usage-breakdown-foot {
  color: #7a7a7a;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-usage-breakdown-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.settings .settings-usage-bar-track {
  position: relative;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
}

.settings .settings-usage-bar-total,
.settings .settings-usage-bar-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 8px;
  border-radius: 10px;
}

.settings .settings-usage-bar-total {
  background: var(--settings-accent-soft);
}

.settings .settings-usage-bar-input {
  background: var(--settings-accent);
}

.settings .settings-usage-legend {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.settings .settings-usage-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9e9e9e;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-usage-legend-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3.6px;
  flex-shrink: 0;
}

.settings .settings-usage-legend-swatch.input {
  background: var(--settings-accent);
}

.settings .settings-usage-legend-swatch.output {
  background: var(--settings-accent-soft);
}

/* === Points section === */

.settings .settings-points-balance {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 68px;
  margin-bottom: 24px;
}

.settings .settings-points-balance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  position: relative;
}

.settings .settings-points-balance-label {
  color: #7a7a7a;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-points-balance-value {
  color: #292929;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}

.settings .settings-points-balance-validity {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  color: #bdbdbd;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
}

.settings .settings-points-balance-note {
  color: #bdbdbd;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
}

.settings .settings-points-balance-op {
  color: #bdbdbd;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 400;
  flex-shrink: 0;
}

.settings .settings-points-filter-bar {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  height: 48px;
  padding: 0 36px;
}

.settings .settings-points-filter-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0;
  color: #7a7a7a;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}

.settings .settings-points-filter-tab.active {
  color: #1f1f1f;
}

.settings .settings-points-filter-tab:hover:not(.active) {
  color: #525252;
}

.settings .settings-points-filter-divider {
  width: 1px;
  height: 20px;
  background: #e5e5e5;
  flex-shrink: 0;
}

.settings .settings-points-ledger {
  border-radius: 16px;
  max-height: 480px;
  overflow-y: auto;
  padding: 10px 16px;
}

.settings .settings-points-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.settings .settings-points-ledger-row + .settings-points-ledger-row {
  border-top: none;
}

.settings .settings-points-ledger-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.settings .settings-points-ledger-desc {
  color: #292929;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings .settings-points-ledger-time {
  color: #7a7a7a;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
}

.settings .settings-points-ledger-amount {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

.settings .settings-points-ledger-amount.positive {
  color: #fc5d1e;
}

.settings .settings-points-ledger-amount.negative {
  color: #9e9e9e;
}

.settings .settings-points-ledger-empty {
  padding: 40px 20px;
  text-align: center;
  color: #7a7a7a;
  font-size: 15px;
}

.settings .settings-points-ledger-status {
  padding: 16px 20px;
  text-align: center;
  color: #7a7a7a;
  font-size: 13px;
}

body[data-theme="dark"] .settings .settings-points-balance-label {
  color: var(--settings-muted);
}

body[data-theme="dark"] .settings .settings-points-balance-value {
  color: var(--settings-title);
}

body[data-theme="dark"] .settings .settings-points-balance-validity,
body[data-theme="dark"] .settings .settings-points-balance-note,
body[data-theme="dark"] .settings .settings-points-balance-op {
  color: var(--settings-muted);
}

body[data-theme="dark"] .settings .settings-points-filter-bar {
  background: var(--settings-card-bg);
  border-color: var(--settings-border);
}

body[data-theme="dark"] .settings .settings-points-filter-tab {
  color: var(--settings-muted);
}

body[data-theme="dark"] .settings .settings-points-filter-tab.active {
  color: var(--settings-title);
}

body[data-theme="dark"] .settings .settings-points-filter-divider {
  background: var(--settings-border);
}

body[data-theme="dark"]
  .settings
  .settings-points-ledger-row
  + .settings-points-ledger-row {
  border-top-color: transparent;
}

body[data-theme="dark"] .settings .settings-points-ledger-desc {
  color: var(--settings-title);
}

body[data-theme="dark"] .settings .settings-points-ledger-time {
  color: var(--settings-muted);
}

body[data-theme="dark"] .settings .settings-points-ledger-empty,
body[data-theme="dark"] .settings .settings-points-ledger-status {
  color: var(--settings-muted);
}

.settings .settings-mcp-list-card {
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  overflow: hidden;
}

.settings .settings-mcp-row {
  min-height: 68px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.settings .settings-mcp-row.is-separated {
  border-top: 1px solid var(--settings-border);
}

.settings .settings-mcp-row-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings .settings-mcp-row-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--settings-copy);
  flex-shrink: 0;
}

.settings .settings-mcp-row-name {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-mcp-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-mcp-quick-add {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.settings .settings-mcp-quick-add-head {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.settings .settings-mcp-quick-add-title {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-mcp-quick-add-hint {
  color: var(--settings-muted);
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-mcp-template-list {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings .settings-channels-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings .settings-channels-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.settings .settings-channels-title {
  margin: 0;
  color: var(--settings-title);
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.settings .settings-channels-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings .settings-channels-empty-card {
  min-height: 268px;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings .settings-channels-empty-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.settings .settings-channels-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.settings .settings-channels-empty-title {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-channels-empty-hint {
  color: var(--settings-copy);
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  text-align: center;
}

.settings .settings-channels-quick-add {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.settings .settings-channels-quick-add-title {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-channels-quick-add-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-channels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-channels-row {
  min-height: 68px;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings .settings-channels-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings .settings-channels-row-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.settings .settings-channels-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings .settings-channels-row-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-channels-row-meta {
  color: #8a8a8a;
  font-size: 12px;
  line-height: 16px;
}

.settings .settings-channels-row-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings .settings-im-provider-badge {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
}

.settings .settings-im-provider-badge-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.settings .settings-channels-row-name {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-channels-status {
  border-radius: 8px;
  padding: 3px 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-channels-status-active {
  background: rgba(54, 178, 97, 0.2);
  color: #36b261;
}

.settings .settings-channels-status-connected {
  background: rgba(54, 178, 97, 0.2);
  color: #36b261;
}

.settings .settings-channels-status-waiting {
  background: rgba(230, 176, 50, 0.18);
  color: #c49520;
}

.settings .settings-channels-status-disabled {
  background: rgba(140, 140, 140, 0.15);
  color: #999;
}

.settings .settings-channels-status-danger {
  background: rgba(255, 98, 98, 0.16);
  color: #ff6262;
}

/* Short error hint text shown inline after the badge */
.settings .settings-channels-error-hint {
  font-size: 12px;
  line-height: 16px;
  color: #b0b0b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.settings .settings-channels-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings .settings-channels-account-list {
  display: grid;
  gap: 8px;
}

.settings .settings-channel-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e7e7e7;
  background: #ffffff;
}

.settings .settings-channel-account-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings .settings-channel-account-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-channel-account-titleblock {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings .settings-channel-account-name {
  color: var(--settings-title);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.settings .settings-channel-account-subtitle {
  color: #8a8a8a;
  font-size: 12px;
  line-height: 16px;
}

.settings .settings-channel-account-idline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-channel-account-id-label {
  color: #9a9a9a;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
}

.settings .settings-channel-account-id {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  color: #8a8a8a;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  word-break: break-all;
}

.settings .settings-channel-account-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.settings .settings-channel-account-tag,
.settings .settings-channel-account-fallback {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f3f3f3;
  color: #6f6f6f;
  font-size: 11px;
  line-height: 16px;
}

.settings .settings-channel-account-tag-agent {
  background: rgba(15, 23, 42, 0.06);
  color: #4b5563;
}

.settings .settings-channel-account-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.settings .settings-models-page,
.settings .settings-skills-page,
.settings .settings-workspace-page,
.settings .settings-privacy-page,
.settings .settings-points-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 40px;
}

.settings .settings-models-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings .settings-models-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.settings .settings-models-section-title {
  color: #292929;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
}

.settings .settings-surface-card-compact {
  padding: 0;
  gap: 0;
}

.settings .settings-models-flat-row {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  text-align: left;
}

.settings .settings-models-flat-row.is-clickable {
  cursor: pointer;
}

.settings .settings-models-flat-row-bordered {
  border-bottom: 1px solid #e5e5e5;
}

.settings .settings-models-flat-row-name {
  display: flex;
  gap: 3px;
  align-items: center;
  color: #292929;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
}

.settings .settings-models-flat-row-free {
  font-size: 12px;
  color: var(--success);
  margin-left: 5px;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(54, 178, 97, 0.1);
}

.settings .settings-models-flat-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings .settings-models-flat-row-empty {
  justify-content: center;
  min-height: 84px;
}

.settings .settings-models-empty-text {
  color: #7a7a7a;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
}

.settings .settings-models-active-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 52px;
  padding: 4px 12px;
  background: rgba(54, 178, 97, 0.1);
  color: #36b261;
  font-size: 14px;
  line-height: 1.57;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-models-gateway-title-group {
  display: flex;
  align-items: center;
  gap: 13px;
}

.settings .settings-models-connected-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 52px;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.57;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-models-connected-badge.connected {
  background: rgba(54, 178, 97, 0.1);
  color: #36b261;
}

.settings .settings-models-connected-badge.connecting,
.settings .settings-models-connected-badge.handshaking {
  background: var(--settings-accent-soft);
  color: var(--settings-accent);
}

.settings .settings-models-connected-badge.disconnected,
.settings .settings-models-connected-badge.error {
  background: rgba(255, 98, 98, 0.14);
  color: #cc4b4b;
}

.settings .settings-models-gateway-url-display {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 7px 16px;
  color: #292929;
  font-size: 15px;
  line-height: 1.47;
  font-weight: 400;
}

/* ─── Gateway port inline editor ─── */

.settings .settings-gateway-port-control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.settings .settings-gateway-port-field {
  display: flex;
  align-items: center;
  border: 1px solid var(--settings-input-border);
  border-radius: 10px;
  background: var(--settings-input-bg);
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.settings .settings-gateway-port-field:focus-within {
  border-color: var(--settings-input-border-focus);
  box-shadow: var(--settings-input-shadow-focus);
}

.settings .settings-gateway-port-prefix {
  padding: 6px 0 6px 12px;
  color: var(--settings-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  user-select: none;
}

.settings .settings-gateway-port-input {
  width: 62px;
  border: none;
  background: transparent;
  color: var(--settings-title);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
  padding: 6px 10px 6px 2px;
  outline: none;
  -moz-appearance: textfield;
}

.settings .settings-gateway-port-input::-webkit-inner-spin-button,
.settings .settings-gateway-port-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.settings .settings-gateway-port-control > .settings-button {
  height: 34px;
  min-width: 0;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 8px;
}

.settings .settings-surface-card {
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  background: #f8f8f8;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings .settings-integrations-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings .settings-connected-apps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-connected-app-row {
  min-height: 68px;
}

.settings .settings-connected-app-description {
  color: var(--settings-copy);
  font-size: 14px;
  line-height: 21px;
  max-width: 760px;
}

.settings .settings-connected-app-badge {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.settings .settings-connected-app-badge-google {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.settings .settings-connected-app-badge-microsoft {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.settings .settings-connected-app-badge-notion {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.settings .settings-connected-app-badge-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.settings .settings-connected-app-account-card {
  background: #ffffff;
}

.settings .settings-connected-app-tag {
  background: #f3f3f3;
  color: #6f6f6f;
}

.settings .settings-connected-app-account-note {
  color: #8a8a8a;
  font-size: 12px;
  line-height: 18px;
}

.settings .settings-connected-app-quick-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.settings .settings-connected-app-quick-add .settings-button-template {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.settings .settings-integration-panel-note + .settings-integration-panel-note {
  margin-top: -10px;
}

.settings .settings-integration-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings .settings-integration-field-span-2 {
  grid-column: 1 / -1;
}

.settings .settings-integration-textarea {
  min-height: 120px;
}

.settings .settings-integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings .settings-integration-status-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--settings-card-soft);
  border: 1px solid var(--settings-border);
}

.settings .settings-integration-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.settings .settings-integration-status-label {
  color: var(--settings-muted);
  font-size: 13px;
  line-height: 18px;
}

.settings .settings-integration-status-account,
.settings .settings-integration-status-note {
  color: var(--settings-copy);
  font-size: 13px;
  line-height: 18px;
}

.settings .settings-integration-status-error {
  color: #cc4b4b;
  font-size: 13px;
  line-height: 18px;
}

.settings .settings-integration-switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2px;
}

.settings .settings-integration-panel-note {
  margin-top: 4px;
}

.settings-connected-app-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-connected-app-modal-surface {
  --settings-card-soft: #f7f7f7;
  --settings-border: #e5e5e5;
  --settings-title: #292929;
  --settings-copy: #6f6f6f;
  --settings-muted: #9e9e9e;
  --settings-input-bg: #ffffff;
  --settings-input-bg-disabled: #f4f4f4;
  --settings-input-border: #e3e3e3;
  --settings-input-border-focus: rgba(41, 41, 41, 0.35);
  --settings-input-shadow-focus: 0 0 0 3px rgba(41, 41, 41, 0.08);
  --settings-accent: #292929;
}

.settings-connected-app-modal-scroll {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.settings-connected-app-modal-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-connected-app-modal-description {
  color: var(--settings-copy);
  font-size: 14px;
  line-height: 21px;
}

.settings-connected-app-modal-note {
  margin: 0;
}

.settings-connected-app-form {
  display: flex;
  flex-direction: column;
}

.settings-connected-app-form .ant-form-item {
  margin-bottom: 14px;
}

.settings-connected-app-form .ant-form-item:last-child {
  margin-bottom: 0;
}

.settings-connected-app-form .ant-form-item-label {
  padding-bottom: 6px;
}

.settings-connected-app-form .ant-form-item-label > label {
  color: var(--settings-title);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.settings-connected-app-form .ant-form-item-extra {
  min-height: 0;
  color: var(--settings-muted);
  font-size: 13px;
  line-height: 18px;
  margin-top: 6px;
}

.settings-connected-app-form .ant-input,
.settings-connected-app-form .ant-input-affix-wrapper,
.settings-connected-app-form .ant-input-outlined,
.settings-connected-app-form .ant-input-textarea textarea {
  border-radius: 12px;
  border-color: var(--settings-input-border);
  background: var(--settings-input-bg);
  color: var(--settings-title);
  box-shadow: none;
  padding: 10px 12px;
}

.settings-connected-app-form .ant-input::placeholder,
.settings-connected-app-form .ant-input-textarea textarea::placeholder {
  color: var(--settings-muted);
}

.settings-connected-app-form .ant-input:hover,
.settings-connected-app-form .ant-input-affix-wrapper:hover,
.settings-connected-app-form .ant-input-textarea textarea:hover {
  border-color: #d2d2d2;
}

.settings-connected-app-form .ant-input:focus,
.settings-connected-app-form .ant-input-affix-wrapper-focused,
.settings-connected-app-form .ant-input-textarea textarea:focus {
  border-color: var(--settings-input-border-focus);
  box-shadow: var(--settings-input-shadow-focus);
}

.settings-connected-app-form .ant-input-password .ant-input {
  padding: 0;
}

.settings-connected-app-form .ant-input-textarea textarea {
  min-height: 112px;
  resize: vertical;
}

.settings-connected-app-scope-form-item {
  margin-bottom: 18px;
}

.settings-connected-app-scope-scroll {
  max-height: 132px;
  overflow-y: auto;
  padding-right: 6px;
}

.settings-connected-app-scope-scroll::-webkit-scrollbar {
  width: 8px;
}

.settings-connected-app-scope-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  border-radius: 999px;
}

.settings-connected-app-form .ant-switch {
  background: #d9d9d9;
}

.settings-connected-app-form .ant-switch.ant-switch-checked {
  background: #292929;
}

.settings-connected-app-switch-item .ant-form-item-control-input {
  min-height: 0;
}

.settings-connected-app-switch-row {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.settings-connected-app-setup-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.settings-connected-app-setup-title {
  color: var(--settings-title);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.settings-connected-app-authorizing-subhint {
  color: var(--settings-copy);
  font-size: 13px;
  line-height: 20px;
}

.settings-connected-app-setup-steps {
  margin: 0;
  padding-left: 18px;
  color: var(--settings-copy);
  font-size: 13px;
  line-height: 20px;
}

.settings-connected-app-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-connected-app-advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 8px;
  border: none;
  border-top: 1px solid var(--settings-border);
  background: transparent;
  color: var(--settings-copy);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  cursor: pointer;
}

.settings-connected-app-advanced-hint {
  color: var(--settings-muted);
  font-size: 12px;
  line-height: 18px;
  margin-top: -4px;
  margin-bottom: 4px;
}

.settings-connected-app-advanced-panel {
  padding-top: 4px;
}

.settings-connected-app-redirect-uri {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--settings-border);
  color: var(--settings-title);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 18px;
  word-break: break-all;
}

.settings-connected-app-scope-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-connected-app-scope-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--settings-border);
  background: #ffffff;
  cursor: pointer;
}

.settings-connected-app-scope-item .ant-checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  color: var(--settings-title);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.settings-connected-app-scope-item .ant-checkbox {
  top: 0;
}

.settings-connected-app-scope-label {
  color: var(--settings-title);
}

.settings-connected-app-scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 24px;
}

.settings-connected-app-scope-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  text-transform: lowercase;
}

.settings-connected-app-scope-tag-read {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.settings-connected-app-scope-tag-write {
  background: rgba(249, 115, 22, 0.14);
  color: #ea580c;
}

.settings-connected-app-scope-tag-identity {
  background: rgba(107, 114, 128, 0.14);
  color: #4b5563;
}

.settings-connected-app-scope-tag-background {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
}

.settings-connected-app-scope-risk {
  text-transform: none;
}

.settings-connected-app-scope-risk-low {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.settings-connected-app-scope-risk-medium {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.settings-connected-app-scope-risk-high {
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}

.settings-connected-app-scope-description {
  color: var(--settings-copy);
  font-size: 12px;
  line-height: 17px;
  padding-left: 24px;
}

.settings-connected-app-scope-code {
  color: var(--settings-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  line-height: 14px;
  padding-left: 24px;
  word-break: break-all;
}

.settings-connected-app-modal .settings-integration-actions {
  position: sticky;
  bottom: -1px;
  margin-top: 6px;
  padding-top: 10px;
  padding-bottom: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.94) 24%, #fff 56%);
  z-index: 2;
}

.settings-connected-app-ant-modal .ant-modal-content {
  overflow: hidden;
}

.settings-connected-app-ant-modal .ant-modal-body {
  max-height: calc(100vh - 120px);
  overflow: hidden;
}

.settings .settings-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings .settings-surface-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings .settings-surface-title {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-surface-hint {
  color: var(--settings-copy);
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings .settings-plan-card {
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.settings .settings-plan-card:hover:not(:disabled) {
  border-color: #d3d3d3;
  transform: translateY(-1px);
}

.settings .settings-plan-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings .settings-plan-card.active {
  border-color: #292929;
  background: #fcfcfc;
}

.settings .settings-plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings .settings-plan-card-name {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-plan-card-desc {
  color: var(--settings-copy);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.settings .settings-plan-card-badge,
.settings .settings-model-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--settings-pill-bg);
  color: var(--settings-pill-copy);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-inline-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-inline-fields-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.settings .settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings .settings-field-label {
  color: var(--settings-title);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.settings .settings-field-hint {
  color: var(--settings-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.settings .settings-input,
.settings .settings-textarea {
  width: 100%;
  border: 1px solid var(--settings-input-border);
  border-radius: 12px;
  background: var(--settings-input-bg);
  color: var(--settings-title);
  font-size: 14px;
  line-height: 20px;
  padding: 10px 12px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.settings .settings-input::placeholder,
.settings .settings-textarea::placeholder {
  color: var(--settings-muted);
}

.settings .settings-inline-fields-row .settings-input,
.settings .settings-inline-fields-row .settings-textarea {
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.settings .settings-inline-fields-row > .settings-button {
  min-width: 112px;
  min-height: 48px;
  height: auto;
  align-self: stretch;
  justify-self: stretch;
}

.settings .settings-input:focus,
.settings .settings-textarea:focus {
  border-color: var(--settings-input-border-focus);
  box-shadow: var(--settings-input-shadow-focus);
}

.settings .settings-input:disabled,
.settings .settings-textarea:disabled {
  color: var(--settings-copy);
  background: var(--settings-input-bg-disabled);
  cursor: not-allowed;
}

.settings .settings-textarea {
  resize: vertical;
  min-height: 132px;
}

.settings .settings-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings .settings-models-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 20px;
}

.settings .settings-models-list,
.settings .settings-skills-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-model-row {
  width: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.settings .settings-model-row:hover {
  border-color: #d3d3d3;
}

.settings .settings-model-row.active {
  border-color: #292929;
  background: #fcfcfc;
}

.settings .settings-model-row-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings .settings-model-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-model-row-meta,
.settings .settings-skill-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--settings-copy);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.settings .settings-model-row-actions,
.settings .settings-skill-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-model-row-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--settings-accent);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.settings .settings-model-row-link.danger {
  color: #ca3f3f;
}

.settings .settings-inline-note {
  border-radius: 12px;
  background: var(--settings-card-soft);
  border: 1px solid var(--settings-border);
  padding: 12px 14px;
  color: var(--settings-copy);
  font-size: 14px;
  line-height: 20px;
}

.settings .settings-inline-note-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}

.settings .settings-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.settings .settings-status-pill.connected {
  background: rgba(54, 178, 97, 0.16);
  color: #21824a;
}

.settings .settings-status-pill.connecting,
.settings .settings-status-pill.handshaking {
  background: var(--settings-accent-soft);
  color: var(--settings-accent);
}

.settings .settings-status-pill.disconnected,
.settings .settings-status-pill.error {
  background: rgba(255, 98, 98, 0.14);
  color: #cc4b4b;
}

.settings .settings-tag-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  border: 1px solid var(--settings-border);
  background: var(--settings-card-bg);
}

.settings .settings-tag-label {
  color: var(--settings-copy);
  font-size: 13px;
  line-height: 18px;
}

.settings .settings-tag-remove {
  border: 0;
  background: transparent;
  color: var(--settings-muted);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.settings .settings-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-filter-pill {
  min-height: 34px;
  border: 1px solid var(--settings-border);
  border-radius: 999px;
  background: var(--settings-card-bg);
  color: var(--settings-copy);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  padding: 0 14px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.settings .settings-filter-pill.active {
  border-color: var(--settings-accent);
  background: var(--settings-accent);
  color: var(--theme-text-inverse);
}

.settings .settings-skill-row {
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: #f8f8f8;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.settings .settings-skill-main {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.settings .settings-skill-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings .settings-skill-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-skill-title {
  color: var(--settings-title);
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-skill-description {
  color: var(--settings-copy);
  font-size: 14px;
  line-height: 20px;
}

/* ─── Skills Search ─── */

.settings .settings-skills-search-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.settings .settings-skills-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.settings .settings-skills-search-icon {
  position: absolute;
  left: 12px;
  color: var(--settings-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.settings .settings-skills-search-input {
  padding-left: 36px;
  padding-right: 32px;
}

.settings .settings-skills-search-clear {
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--settings-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.settings .settings-skills-search-clear:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--settings-title);
}

/* ─── Skills Card Enhancements ─── */

.settings .settings-skill-emoji {
  font-size: 16px;
  line-height: 1;
}

.settings .settings-skill-name-en {
  color: var(--settings-muted);
  font-size: 13px;
  font-weight: 400;
}

.settings .settings-skill-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--settings-accent);
  font-size: 13px;
  line-height: 18px;
  padding: 2px 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.settings .settings-skill-expand-btn:hover {
  opacity: 1;
}

.settings .settings-skill-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 13px;
  line-height: 18px;
}

.settings .settings-skill-detail-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.settings .settings-skill-detail-label {
  color: var(--settings-muted);
  min-width: 48px;
  flex-shrink: 0;
  font-weight: 500;
}

.settings .settings-skill-detail-value {
  color: var(--settings-copy);
  word-break: break-all;
}

.settings .settings-skill-detail-path {
  font-family:
    ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas,
    monospace;
  font-size: 12px;
}

.settings .settings-skill-detail-link {
  color: var(--settings-accent);
  text-decoration: none;
}

.settings .settings-skill-detail-link:hover {
  text-decoration: underline;
}

.settings .settings-skill-row.expanded {
  border-color: var(--settings-accent);
  border-color: rgba(var(--settings-accent-rgb, 41, 41, 41), 0.25);
}

.settings .settings-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #6a6a6a;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 980px) {
  .settings .settings-shell {
    grid-template-columns: 244px minmax(0, 1fr);
  }

  .settings .settings-workbench-scroll {
    padding: 56px 48px 48px;
  }

  .settings .settings-usage-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings .settings-general-row,
  .settings .settings-mcp-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings .settings-general-palette,
  .settings .settings-mcp-row-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .settings .settings-usage-breakdown-head,
  .settings .settings-usage-breakdown-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings .settings-channels-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings .settings-channels-row-top,
  .settings .settings-channel-account-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings .settings-models-layout,
  .settings .settings-plan-grid,
  .settings .settings-inline-fields-row {
    grid-template-columns: 1fr;
  }

  .settings .settings-skill-row,
  .settings .settings-channels-row-actions,
  .settings .settings-channel-account-actions {
    width: 100%;
  }

  .settings .settings-skill-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .settings .settings-shell {
    grid-template-columns: 1fr;
    border-radius: 0;
  }

  .settings .settings-nav {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .settings .settings-nav-top {
    height: auto;
    min-height: 48px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .settings .settings-nav-collapse-btn {
    position: static;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #ffffff;
  }

  .settings .settings-nav-back-btn {
    position: static;
    height: 28px;
    font-size: 12px;
    font-weight: 500;
  }

  .settings .settings-nav-tabs {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 0 12px 10px;
  }

  .settings .settings-nav-tab {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    min-height: 34px;
    padding: 6px 10px;
  }

  .settings .settings-workbench-scroll {
    padding: 32px 20px 24px;
  }

  .settings .settings-workbench-inner {
    max-width: 100%;
  }

  .settings .settings-channels-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings .settings-page-header,
  .settings .settings-channels-header-actions {
    width: 100%;
  }

  .settings .settings-page-header,
  .settings .settings-channels-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings .settings-page-actions,
  .settings .settings-channels-header-actions {
    width: 100%;
  }

  .settings .settings-page-actions .settings-button,
  .settings .settings-channels-header-actions .settings-button {
    flex: 1;
  }

  .settings .settings-detail-actions .settings-button,
  .settings .settings-models-section-header,
  .settings .settings-models-gateway-title-group,
  .settings .settings-model-row-actions,
  .settings .settings-models-flat-row-actions,
  .settings .settings-skill-actions {
    width: 100%;
  }

  .settings .settings-models-section-header,
  .settings .settings-models-gateway-title-group,
  .settings .settings-model-row,
  .settings .settings-models-flat-row,
  .settings .settings-skill-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings .settings-usage-stats-grid {
    grid-template-columns: 1fr;
  }

  .settings .settings-integration-fields-grid {
    grid-template-columns: 1fr;
  }

  .settings .settings-connected-app-row,
  .settings .settings-connected-app-actions,
  .settings .settings-integration-switch-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings .settings-connected-app-actions,
  .settings .settings-connected-app-toggle {
    width: 100%;
  }

  .settings .settings-connected-app-actions {
    gap: 10px;
  }

  .settings .settings-integration-actions .settings-button {
    flex: 1 1 160px;
  }
}

/* ── Theme Overrides ── */
.settings {
  --settings-shell-bg: #f5f5f5;
  --settings-nav-bg: #f5f5f5;
  --settings-workbench-bg: #ffffff;
  --settings-card-bg: #ffffff;
  --settings-card-soft: #f7f7f7;
  --settings-border: #e5e5e5;
  --settings-border-strong: #ebebeb;
  --settings-title: #292929;
  --settings-copy: #7a7a7a;
  --settings-muted: #9e9e9e;
  --settings-pill-bg: #efefef;
  --settings-pill-copy: #525252;
  --settings-input-bg: #ffffff;
  --settings-input-bg-disabled: #f4f4f4;
  --settings-input-border: #e3e3e3;
  --settings-input-border-focus: rgba(41, 41, 41, 0.35);
  --settings-input-shadow-focus: 0 0 0 3px rgba(41, 41, 41, 0.08);
  --settings-accent: var(--theme-accent1);
  --settings-accent-strong: var(--theme-accent2);
  --settings-accent-soft: #fed5c4;
  --settings-danger-soft: var(--theme-surface-danger-soft);
  --settings-shadow: none;
}

body[data-theme="dark"] .settings {
  --settings-shell-bg: #050505;
  --settings-nav-bg: #050505;
  --settings-workbench-bg: #0b0c12;
  --settings-card-bg: #11131d;
  --settings-card-soft: #171a25;
  --settings-border: rgba(140, 151, 210, 0.16);
  --settings-border-strong: rgba(155, 169, 255, 0.24);
  --settings-title: #f5f7ff;
  --settings-copy: #c6cce6;
  --settings-muted: #8d96bb;
  --settings-pill-bg: rgba(255, 255, 255, 0.08);
  --settings-pill-copy: #f5f7ff;
  --settings-input-bg: #0e1017;
  --settings-input-bg-disabled: #0b0d13;
  --settings-input-border: rgba(140, 151, 210, 0.16);
  --settings-input-border-focus: rgba(123, 150, 255, 0.42);
  --settings-input-shadow-focus: 0 0 0 3px rgba(95, 141, 255, 0.16);
  --settings-accent: #b97cff;
  --settings-accent-strong: #5f8dff;
  --settings-accent-soft: rgba(95, 141, 255, 0.2);
  --settings-danger-soft: rgba(255, 108, 147, 0.14);
  --settings-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.settings-overlay {
  background: var(--theme-bg);
}

.settings .settings-shell {
  background: var(--settings-shell-bg);
}

.settings .settings-nav {
  background: var(--settings-nav-bg);
  border-right: 0;
}

.settings .settings-nav-top {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--settings-nav-bg) 98%, transparent) 0%,
    color-mix(in srgb, var(--settings-nav-bg) 92%, transparent) 60%,
    transparent 100%
  );
}

.settings .settings-nav-collapse-btn,
.settings .settings-nav-back-btn {
  color: var(--settings-copy);
}

.settings .settings-nav-collapse-btn:hover,
.settings .settings-nav-back-btn:hover {
  color: var(--settings-title);
}

.settings .settings-nav-tab {
  color: var(--settings-copy);
}

.settings .settings-nav-tab:hover {
  background: #ebebeb;
  color: var(--settings-title);
}

.settings .settings-nav-tab.active {
  background: #e6e6e6;
  color: var(--settings-title);
}

body[data-theme="dark"] .settings .settings-nav-tab:hover {
  background: #11131d;
}

body[data-theme="dark"] .settings .settings-nav-tab.active {
  background: #171a25;
}

.settings .settings-nav-tab-icon {
  color: inherit;
}

.settings .settings-workbench {
  background: var(--settings-workbench-bg);
}

body[data-theme="dark"] .settings .settings-workbench {
  box-shadow:
    inset 1px 0 0 rgba(141, 162, 255, 0.14),
    inset 0 1px 0 rgba(141, 162, 255, 0.14),
    inset 0 -1px 0 rgba(141, 162, 255, 0.14);
}

.settings .settings-workbench::before {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--settings-workbench-bg) 98%, transparent) 0%,
    color-mix(in srgb, var(--settings-workbench-bg) 86%, transparent) 58%,
    transparent 100%
  );
  pointer-events: none;
}

body:has(.pay-modal) .settings .settings-workbench::before {
  display: none;
}

.settings .settings-page-title,
.settings .settings-general-label,
.settings .settings-usage-stat-value,
.settings .settings-usage-section-title,
.settings .settings-model-row-title,
.settings .settings-plan-card-name,
.settings .settings-model-detail-title,
.settings .settings-section-title,
.settings .settings-inline-card-title,
.settings .settings-skill-title,
.settings .settings-page-note strong {
  color: var(--settings-title);
}

.settings .settings-page-description,
.settings .settings-general-hint,
.settings .settings-empty-hint,
.settings .settings-usage-stat-label,
.settings .settings-usage-breakdown-foot,
.settings .settings-model-row-meta,
.settings .settings-model-row-link,
.settings .settings-models-empty-text,
.settings .settings-plan-card-desc,
.settings .settings-page-note,
.settings .settings-inline-card-description,
.settings .settings-skill-description,
.settings .settings-bullet-list,
.settings .settings-inline-label,
.settings .settings-inline-help,
.settings .settings-privacy-copy,
.settings .settings-workspace-copy {
  color: var(--settings-copy);
}

.settings .settings-empty-title,
.settings .settings-model-detail-label,
.settings .settings-inline-label,
.settings .settings-status-pill,
.settings .settings-plan-card-badge,
.settings .settings-models-section-title,
.settings .settings-models-flat-row-name,
.settings .settings-workspace-title,
.settings .settings-privacy-title {
  color: var(--settings-title);
}

.settings .settings-button {
  background: var(--settings-card-bg);
  border-color: var(--settings-border);
  color: var(--settings-title);
  box-shadow: none;
}

.settings .settings-button:hover:not(:disabled) {
  background: var(--settings-card-soft);
  border-color: var(--settings-border-strong);
  color: var(--settings-title);
}

.settings .settings-button:disabled {
  background: var(--settings-card-soft);
  color: var(--settings-muted);
  border-color: var(--settings-border);
}

.settings .settings-button-primary,
.settings .settings-button-template {
  background: var(--settings-accent);
  border-color: var(--settings-accent);
  color: var(--theme-text-inverse);
}

.settings .settings-button-template {
  background: transparent;
  border-color: var(--settings-border);
  color: var(--settings-title);
  padding-inline: 12px;
  box-shadow: none;
  gap: 6px;
}

.settings .settings-button-primary:hover:not(:disabled),
.settings .settings-button-template:hover:not(:disabled) {
  background: var(--settings-accent-strong);
  border-color: var(--settings-accent-strong);
  color: var(--theme-text-inverse);
}

.settings .settings-button-template:hover:not(:disabled) {
  background: rgba(242, 115, 53, 0.06);
  border-color: var(--settings-accent);
  color: var(--settings-accent);
}

.settings .settings-empty-card,
.settings .settings-general-card,
.settings .settings-plan-card,
.settings .settings-model-row,
.settings .settings-model-detail,
.settings .settings-inline-card,
.settings .settings-mcp-list-card,
.settings .settings-mcp-card,
.settings .settings-mcp-empty-card,
.settings .settings-channels-row,
.settings .settings-workspace-card,
.settings .settings-privacy-card,
.settings .settings-section-card {
  background: var(--settings-card-bg);
  border-color: var(--settings-border);
  box-shadow: var(--settings-shadow);
}

.settings .settings-surface-card,
.settings .settings-general-card,
.settings .settings-page-note,
.settings .settings-empty-card,
.settings .settings-mcp-empty-card,
.settings .settings-skill-row,
.settings .settings-usage-breakdown-card {
  background: #f8f8f8;
  border-color: #e5e5e5;
  box-shadow: none;
}

.settings .settings-usage-stat-card {
  background: #f7f7f7;
  box-shadow: none;
}

.settings .settings-inline-fields {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.settings .settings-channels-empty-card {
  background: var(--settings-card-soft);
  border-color: var(--settings-border);
  box-shadow: none;
}

.settings .settings-general-divider,
.settings .settings-page-divider,
.settings .settings-inline-divider,
.settings .settings-section-divider {
  border-color: var(--settings-border);
  background: var(--settings-border);
}

.settings .settings-usage-breakdown-fill,
.settings .settings-usage-breakdown-fill-output {
  background: var(--settings-accent-soft);
}

.settings .settings-usage-breakdown-fill-input {
  background: var(--theme-info);
}

.settings .settings-plan-card:hover:not(:disabled),
.settings .settings-model-row:hover,
.settings .settings-skill-row:hover,
.settings .settings-inline-card:hover {
  background: var(--settings-card-soft);
  border-color: var(--settings-border-strong);
}

.settings .settings-plan-card.active,
.settings .settings-model-row.active {
  background: #fcfcfc;
  border-color: #d9d9d9;
  color: var(--settings-title);
}

.settings .settings-filter-pill {
  background: var(--settings-card-bg);
  border-color: var(--settings-border);
  color: var(--settings-copy);
}

.settings .settings-filter-pill.active {
  color: var(--theme-text-inverse);
  background: var(--settings-accent);
  border-color: var(--settings-accent);
}

.settings .settings-status-pill {
  background: var(--settings-card-soft);
  border-color: var(--settings-border);
}

.settings .settings-status-pill.connected {
  background: rgba(15, 159, 103, 0.12);
  color: var(--theme-success);
}

.settings .settings-status-pill.connecting,
.settings .settings-status-pill.handshaking {
  background: rgba(37, 99, 235, 0.12);
  color: var(--theme-info);
}

.settings .settings-status-pill.disconnected,
.settings .settings-status-pill.error {
  background: var(--settings-danger-soft);
  color: var(--theme-danger);
}

.settings .settings-general-toggle {
  background: var(--settings-card-soft);
  border-color: var(--settings-border);
}

.settings .settings-general-toggle.active {
  background: var(--settings-accent);
  border-color: var(--settings-accent);
}

.settings .settings-general-toggle-knob {
  background: var(--theme-text-inverse);
}

.settings .settings-general-swatch {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--settings-border);
}

.settings .settings-general-swatch.light {
  --swatch-ring: #fc5d1e;
  background: linear-gradient(180deg, #fc5d1e 0 50%, #ffffff 50% 100%);
}

.settings .settings-general-swatch.dark {
  --swatch-ring: #7b96ff;
  background:
    linear-gradient(180deg, #d66cff 0%, #8b7cff 52%, #5f8dff 100%) top / 100%
      50% no-repeat,
    linear-gradient(180deg, #050505 0 100%) bottom / 100% 50% no-repeat;
}

.settings .settings-general-swatch.active {
  box-shadow:
    0 0 0 2px var(--theme-surface-base),
    0 0 0 4px var(--settings-accent);
}

.settings .settings-model-row-link,
.settings .settings-page-link,
.settings .settings-inline-link {
  color: var(--settings-accent);
}

.settings .settings-model-row-link.danger {
  color: var(--theme-danger);
}

.settings .settings-model-row-link:hover,
.settings .settings-page-link:hover,
.settings .settings-inline-link:hover {
  color: var(--settings-accent-strong);
}

.settings .settings-inline-icon,
.settings .settings-workspace-icon,
.settings .settings-privacy-icon {
  background: var(--settings-card-soft);
  border-color: var(--settings-border);
  color: var(--settings-copy);
}

.settings .settings-page-note,
.settings .settings-inline-note {
  background: var(--settings-card-soft);
  border-color: var(--settings-border);
}

.settings .settings-tag {
  background: var(--settings-card-bg);
  border-color: var(--settings-border);
}

.settings .settings-tag-label {
  color: var(--settings-copy);
}

.settings .settings-tag-remove {
  color: var(--settings-muted);
}

/* ── Usage Page: lock to Figma 324:6279 colors ── */
.settings .settings-usage-page .settings-page-title,
.settings .settings-usage-page .settings-usage-section-title,
.settings .settings-usage-page .settings-usage-breakdown-model {
  color: #292929;
}

.settings .settings-usage-page .settings-page-description,
.settings .settings-usage-page .settings-usage-stat-label,
.settings .settings-usage-page .settings-usage-breakdown-meta,
.settings .settings-usage-page .settings-usage-breakdown-foot {
  color: #7a7a7a;
}

.settings
  .settings-usage-page
  .settings-page-actions
  .settings-button-secondary {
  background: #ffffff;
  border-color: #f0f0f0;
  color: #292929;
}

.settings
  .settings-usage-page
  .settings-page-actions
  .settings-button-secondary:hover:not(:disabled) {
  background: #f7f7f7;
  border-color: #ebebeb;
  color: #292929;
}

.settings .settings-usage-page .settings-usage-stat-card {
  background: #f7f7f7;
}

.settings .settings-usage-page .settings-usage-breakdown-card {
  background: #f8f8f8;
  border-color: #e5e5e5;
}

.settings .settings-usage-page .settings-usage-breakdown-row {
  background: transparent;
}

.settings .settings-usage-page .settings-usage-breakdown-row.is-separated {
  border-top-color: #e5e5e5;
}

.settings .settings-usage-page .settings-usage-bar-track {
  background: #ffffff;
}

.settings .settings-usage-page .settings-usage-bar-total,
.settings .settings-usage-page .settings-usage-legend-swatch.output {
  background: #fed5c4;
}

.settings .settings-usage-page .settings-usage-bar-input,
.settings .settings-usage-page .settings-usage-legend-swatch.input {
  background: #fc5d1e;
}

.settings .settings-usage-page .settings-usage-legend-item {
  color: #9e9e9e;
}

/* ── Privacy page layout ── */

.settings .settings-privacy-filing-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 13px;
  line-height: 1.7;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--settings-border, #e5e5e5);
}

.settings .settings-privacy-filing-label {
  color: var(--theme-text-sec);
  white-space: nowrap;
}

.settings .settings-privacy-filing-value {
  color: var(--theme-text);
  word-break: break-all;
}

.settings .settings-privacy-legal-links {
  display: flex;
  gap: 16px;
}

.settings .settings-privacy-legal-link {
  color: var(--theme-accent1);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
  transition: opacity 0.15s ease;
}

.settings-model-modal-disclaimer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 7, 0.3);
  background: rgba(255, 193, 7, 0.15);
}

.settings-model-modal-disclaimer-icon {
  color: #ffc107;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.settings-model-modal-disclaimer-copy {
  color: #c08700;
  font-size: 13px;
  line-height: 1.5;
}

.settings-model-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
  margin-top: 0;
}

.settings-model-form .ant-form-item {
  margin-bottom: 16px;
}

.settings-model-form-span-2 {
  grid-column: 1 / -1;
}

.settings-model-test-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.settings-model-test-message {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid
    color-mix(in srgb, var(--theme-border, #d9d9d9) 88%, transparent);
  background: color-mix(
    in srgb,
    var(--theme-surface-elevated, #fafafa) 96%,
    transparent
  );
}

.settings-model-test-message.is-success {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.08);
}

.settings-model-test-message.is-error {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.08);
}

.settings-model-test-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: color-mix(
    in srgb,
    var(--theme-text-ter, #9ca3af) 82%,
    transparent
  );
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.settings-model-test-message.is-success .settings-model-test-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.settings-model-test-message.is-error .settings-model-test-dot {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.settings-model-test-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.settings-model-test-title {
  font-size: 12px;
  line-height: 1.45;
  color: var(--theme-text-main, #111827);
  font-weight: 600;
}

.settings-model-test-detail {
  font-size: 12px;
  line-height: 1.5;
  color: var(--theme-text-ter, #6b7280);
}

.settings-model-test-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

@media (max-width: 720px) {
  .settings-model-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .settings-model-form-span-2 {
    grid-column: auto;
  }
}

.settings .settings-privacy-legal-link:hover {
  opacity: 0.8;
}

/* ── About page layout ── */

.settings .settings-about-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.settings .settings-about-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.settings .settings-about-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.settings .settings-about-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings .settings-about-status {
  font-size: 13px;
  line-height: 1.4;
  color: var(--theme-text-sec);
}

.settings .settings-about-status.accent {
  color: var(--theme-accent1);
}

.settings .settings-about-status.success {
  color: #4ade80;
}

.settings .settings-about-status.error {
  color: #f87171;
}

.settings .settings-about-progress-track {
  height: 4px;
  border-radius: 2px;
  background: var(--theme-surface-subtle);
  overflow: hidden;
}

.settings .settings-about-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--theme-accent1);
  transition: width 0.3s ease;
}

.settings .settings-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings .settings-about-install-btn {
  background: #4ade80;
  color: #000;
}

.settings .settings-about-changelog-body {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
  color: var(--theme-text-sec);
  max-height: 400px;
  overflow: auto;
  padding: 8px 0;
}

.settings .settings-about-footer {
  margin-top: auto;
  padding-top: 20px;
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--settings-muted);
  font-size: 13px;
  line-height: 20px;
}

body[data-theme="dark"] .settings .settings-button-primary,
body[data-theme="dark"] .settings .settings-button-template,
body[data-theme="dark"] .settings .settings-filter-pill.active,
body[data-theme="dark"] .settings .settings-general-toggle.active {
  background-image: linear-gradient(135deg, #b97cff, #5f8dff);
  background-color: #11131d;
  border-color: transparent;
  color: #050505;
}

body[data-theme="dark"] .settings .settings-button-redeem {
  background: #11131d;
  background-image: none;
  border-color: rgba(140, 151, 210, 0.16);
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-button-redeem:hover:not(:disabled) {
  background: #171a25;
  border-color: rgba(155, 169, 255, 0.24);
}

body[data-theme="dark"] .settings .settings-button-template {
  background: transparent;
  border-color: rgba(140, 151, 210, 0.22);
  color: #f5f7ff;
}

body[data-theme="dark"]
  .settings
  .settings-button-template:hover:not(:disabled) {
  background: rgba(185, 124, 255, 0.08);
  border-color: rgba(185, 124, 255, 0.4);
  color: #b97cff;
}

body[data-theme="dark"] .settings .settings-surface-card,
body[data-theme="dark"] .settings .settings-general-card,
body[data-theme="dark"] .settings .settings-page-note,
body[data-theme="dark"] .settings .settings-empty-card,
body[data-theme="dark"] .settings .settings-mcp-list-card,
body[data-theme="dark"] .settings .settings-mcp-empty-card,
body[data-theme="dark"] .settings .settings-skill-row,
body[data-theme="dark"] .settings .settings-usage-breakdown-card {
  background: #171a25;
  border-color: rgba(140, 151, 210, 0.16);
}

body[data-theme="dark"] .settings .settings-usage-stat-card {
  background: #11131d;
}

body[data-theme="dark"] .settings .settings-plan-card.active,
body[data-theme="dark"] .settings .settings-model-row.active {
  background: rgba(185, 124, 255, 0.08);
  border-color: rgba(123, 150, 255, 0.34);
}

body[data-theme="dark"] .settings .settings-surface-title,
body[data-theme="dark"] .settings .settings-page-title,
body[data-theme="dark"] .settings .settings-channels-title,
body[data-theme="dark"] .settings .settings-field-label,
body[data-theme="dark"] .settings .settings-plan-card-name,
body[data-theme="dark"] .settings .settings-model-row-title,
body[data-theme="dark"] .settings .settings-mcp-row-name,
body[data-theme="dark"] .settings .settings-mcp-quick-add-title,
body[data-theme="dark"] .settings .settings-channels-empty-title,
body[data-theme="dark"] .settings .settings-channels-quick-add-title,
body[data-theme="dark"] .settings .settings-channels-row-name,
body[data-theme="dark"] .settings .settings-channel-account-name {
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-surface-hint,
body[data-theme="dark"] .settings .settings-page-description,
body[data-theme="dark"] .settings .settings-field-hint,
body[data-theme="dark"] .settings .settings-plan-card-desc,
body[data-theme="dark"] .settings .settings-model-row-meta,
body[data-theme="dark"] .settings .settings-inline-note,
body[data-theme="dark"] .settings .settings-page-note,
body[data-theme="dark"] .settings .settings-mcp-row-icon,
body[data-theme="dark"] .settings .settings-mcp-quick-add-hint,
body[data-theme="dark"] .settings .settings-channels-empty-hint,
body[data-theme="dark"] .settings .settings-channels-row-icon,
body[data-theme="dark"] .settings .settings-tag-label,
body[data-theme="dark"] .settings .settings-skill-description,
body[data-theme="dark"] .settings .settings-skill-meta,
body[data-theme="dark"] .settings .settings-inline-help,
body[data-theme="dark"] .settings .settings-privacy-copy,
body[data-theme="dark"] .settings .settings-workspace-copy,
body[data-theme="dark"] .settings .settings-channels-row-meta {
  color: #c6cce6;
}

body[data-theme="dark"] .settings .settings-channels-status-waiting {
  background: rgba(230, 176, 50, 0.14);
  color: #e0b855;
}

body[data-theme="dark"] .settings .settings-channels-status-disabled {
  background: rgba(160, 160, 160, 0.12);
  color: #888;
}

body[data-theme="dark"] .settings .settings-channels-error-hint {
  color: #777;
}

body[data-theme="dark"] .settings .settings-channel-account-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .settings .settings-channel-account-subtitle,
body[data-theme="dark"] .settings .settings-channel-account-id-label {
  color: rgba(255, 255, 255, 0.48);
}

body[data-theme="dark"] .settings .settings-channel-account-id,
body[data-theme="dark"] .settings .settings-channel-account-tag,
body[data-theme="dark"] .settings .settings-channel-account-fallback {
  color: #c6cce6;
}

body[data-theme="dark"] .settings .settings-channel-account-tag,
body[data-theme="dark"] .settings .settings-channel-account-fallback {
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .settings .settings-channel-account-tag-agent {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}

body[data-theme="dark"] .settings .settings-plan-card-badge,
body[data-theme="dark"] .settings .settings-model-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-model-badge.credits-badge {
  background: rgba(255, 170, 50, 0.15);
  color: #ffbb55;
}

.settings .settings-model-badge.credits-badge {
  background: #fff3e0;
  color: #e65100;
}

/* ─── Dark theme: skills search & details ─── */

body[data-theme="dark"] .settings .settings-skills-search-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-skill-name-en {
  color: #8d96bb;
}

body[data-theme="dark"] .settings .settings-skill-details {
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .settings .settings-skill-detail-label {
  color: #8d96bb;
}

body[data-theme="dark"] .settings .settings-skill-detail-value {
  color: #c6cce6;
}

body[data-theme="dark"] .settings .settings-skill-detail-link {
  color: #b97cff;
}

body[data-theme="dark"] .settings .settings-skill-row.expanded {
  border-color: rgba(123, 150, 255, 0.3);
}

body[data-theme="dark"] .settings .settings-input,
body[data-theme="dark"] .settings .settings-textarea {
  background: #0e1017;
  border-color: rgba(140, 151, 210, 0.16);
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-input::placeholder,
body[data-theme="dark"] .settings .settings-textarea::placeholder {
  color: #8d96bb;
}

body[data-theme="dark"] .settings .settings-input:focus,
body[data-theme="dark"] .settings .settings-textarea:focus {
  border-color: rgba(123, 150, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(95, 141, 255, 0.16);
}

body[data-theme="dark"] .settings .settings-input:disabled,
body[data-theme="dark"] .settings .settings-textarea:disabled {
  background: #0b0d13;
  color: #aab3d4;
}

body[data-theme="dark"] .settings .settings-model-row-link,
body[data-theme="dark"] .settings .settings-page-link,
body[data-theme="dark"] .settings .settings-inline-link {
  color: #b97cff;
}

body[data-theme="dark"] .settings .settings-model-row-link:hover,
body[data-theme="dark"] .settings .settings-page-link:hover,
body[data-theme="dark"] .settings .settings-inline-link:hover {
  color: #7ba0ff;
}

body[data-theme="dark"] .settings .settings-models-section-title,
body[data-theme="dark"] .settings .settings-models-flat-row-name {
  color: var(--settings-title);
}

body[data-theme="dark"] .settings .settings-models-flat-row-bordered {
  border-color: var(--settings-border);
}

body[data-theme="dark"] .settings .settings-models-empty-text {
  color: var(--settings-muted);
}

body[data-theme="dark"] .settings .settings-models-gateway-url-display {
  border-color: var(--settings-border);
  color: var(--settings-title);
}

body[data-theme="dark"] .settings .settings-gateway-port-field {
  border-color: var(--settings-border);
  background: var(--settings-input-bg);
}

body[data-theme="dark"] .settings .settings-gateway-port-prefix {
  color: var(--settings-muted);
}

body[data-theme="dark"] .settings .settings-gateway-port-input {
  color: var(--settings-title);
}

body[data-theme="dark"] .settings .settings-model-row-link.danger,
body[data-theme="dark"] .settings .settings-tag-remove {
  color: #ff7ea6;
}

body[data-theme="dark"] .settings .settings-tag {
  background: #0e1017;
  border-color: rgba(140, 151, 210, 0.16);
}

body[data-theme="dark"] .settings .settings-mcp-row.is-separated,
body[data-theme="dark"] .settings .settings-general-divider,
body[data-theme="dark"] .settings .settings-page-divider,
body[data-theme="dark"] .settings .settings-inline-divider,
body[data-theme="dark"] .settings .settings-section-divider {
  border-color: rgba(140, 151, 210, 0.16);
  background: rgba(140, 151, 210, 0.16);
}

body[data-theme="dark"] .settings .settings-usage-page .settings-page-title,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-section-title,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-breakdown-model {
  color: #f5f7ff;
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-page-description,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-stat-label,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-breakdown-meta,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-breakdown-foot,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-legend-item {
  color: #8d96bb;
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-page-actions
  .settings-button-secondary {
  background: #11131d;
  border-color: rgba(140, 151, 210, 0.16);
  color: #f5f7ff;
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-page-actions
  .settings-button-secondary:hover:not(:disabled) {
  background: #171a25;
  border-color: rgba(155, 169, 255, 0.24);
  color: #f5f7ff;
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-stat-card {
  background: #11131d;
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-breakdown-card {
  background: #171a25;
  border-color: rgba(140, 151, 210, 0.16);
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-breakdown-row.is-separated {
  border-top-color: rgba(140, 151, 210, 0.16);
}

.redeem-modal-actions {
  display: flex;
  gap: 12px;
}

.redeem-modal-input.ant-input {
  border-radius: var(--Meduim, 14px) !important;
}

.redeem-modal-input.ant-input:hover {
  border-color: var(--theme-accent1) !important;
}

.redeem-modal-input.ant-input:focus,
.redeem-modal-input.ant-input:focus-visible {
  border-radius: var(--Meduim, 14px) !important;
  border-color: var(--theme-accent1) !important;
  box-shadow: 0 0 0 3px var(--theme-ring) !important;
  outline: none !important;
}

.redeem-modal-btn {
  display: flex;
  flex: 1 0 0;
  height: 44px;
  padding: 10px 14px 10px 12px;
  justify-content: center;
  align-items: center;
  border-radius: var(--Meduim, 14px);
  border: none;
  font-family: "PingFang SC";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease,
    opacity 0.15s ease,
    filter 0.15s ease;
}

.redeem-modal-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.redeem-modal-btn-cancel {
  background: var(--fill-g-11, #f5f5f5);
  color: var(--text-g-2, #292929);
}

.redeem-modal-btn-cancel:hover:not(:disabled) {
  filter: brightness(0.98);
}

.redeem-modal-btn-cancel:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.95);
}

.redeem-modal-btn-confirm {
  background: var(--fill-g-2, #292929);
  color: var(--Text--G13, #fafafa);
  box-shadow:
    0 4px 2px -4px rgba(0, 0, 0, 0.02),
    0 6px 4px -4px rgba(0, 0, 0, 0.02),
    0 4px 12px 0 rgba(0, 0, 0, 0.02);
}

.redeem-modal-btn-confirm:hover:not(:disabled) {
  filter: brightness(1.06);
}

.redeem-modal-btn-confirm:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.94);
}

body[data-theme="dark"] .redeem-modal-btn-cancel {
  background: var(--theme-surface-subtle);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
}

body[data-theme="dark"] .redeem-modal-btn-cancel:hover:not(:disabled) {
  background: #1d2130;
  border-color: var(--theme-border-hi);
  filter: none;
}

body[data-theme="dark"] .redeem-modal-btn-cancel:active:not(:disabled) {
  transform: translateY(1px);
  background: #161a26;
  border-color: var(--theme-border);
  filter: none;
}

body[data-theme="dark"] .redeem-modal-btn-confirm {
  background-image: linear-gradient(135deg, #b97cff, #5f8dff);
  background-color: #11131d;
  color: #050505;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body[data-theme="dark"] .redeem-modal-btn-confirm:hover:not(:disabled) {
  filter: brightness(1.04);
}

body[data-theme="dark"] .redeem-modal-btn-confirm:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.96);
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-bar-track {
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-bar-total,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-legend-swatch.output {
  background: rgba(95, 141, 255, 0.28);
}

body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-bar-input,
body[data-theme="dark"]
  .settings
  .settings-usage-page
  .settings-usage-legend-swatch.input {
  background: linear-gradient(90deg, #b97cff 0%, #5f8dff 100%);
}

/* Account & Security dark theme */
body[data-theme="dark"] .settings .settings-account-phone {
  color: #8d96bb;
}

body[data-theme="dark"] .settings .settings-account-delete-button {
  border-color: #ff4d4f;
  color: #ff6b6b;
  background: transparent;
}

body[data-theme="dark"] .settings .settings-account-delete-button:hover {
  background: #ff4d4f;
  color: #fff;
}

/* ─── Feedback Section ─── */

.settings .settings-feedback-textarea.ant-input,
.settings textarea.settings-feedback-textarea {
  border-radius: 12px;
  border: 1px solid var(--settings-border);
  background: var(--settings-card-bg);
  color: var(--settings-title);
  font-size: 14px;
  line-height: 1.6;
  padding: 12px 14px;
  resize: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.settings .settings-feedback-textarea.ant-input:focus,
.settings textarea.settings-feedback-textarea:focus {
  border-color: var(--settings-accent);
  box-shadow: 0 0 0 3px rgba(41, 41, 41, 0.06);
}

.settings .settings-feedback-input.ant-input,
.settings input.settings-feedback-input {
  border-radius: 12px;
  border: 1px solid var(--settings-border);
  background: var(--settings-card-bg);
  color: var(--settings-title);
  font-size: 14px;
  line-height: 22px;
  height: 40px;
  padding: 8px 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.settings .settings-feedback-input.ant-input:focus,
.settings input.settings-feedback-input:focus {
  border-color: var(--settings-accent);
  box-shadow: 0 0 0 3px rgba(41, 41, 41, 0.06);
}

body[data-theme="dark"] .settings .settings-feedback-textarea.ant-input,
body[data-theme="dark"] .settings textarea.settings-feedback-textarea,
body[data-theme="dark"] .settings .settings-feedback-input.ant-input,
body[data-theme="dark"] .settings input.settings-feedback-input {
  background: #0e1017;
  border-color: rgba(140, 151, 210, 0.16);
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-feedback-textarea.ant-input:focus,
body[data-theme="dark"] .settings textarea.settings-feedback-textarea:focus,
body[data-theme="dark"] .settings .settings-feedback-input.ant-input:focus,
body[data-theme="dark"] .settings input.settings-feedback-input:focus {
  border-color: rgba(123, 150, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(95, 141, 255, 0.16);
}

.settings .settings-skills-save-bar-shell {
  position: absolute;
  right: 32px;
  bottom: 24px;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  max-width: calc(100% - 64px);
  pointer-events: none;
}

.settings .settings-skills-save-bar {
  width: min(100%, 500px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--settings-card-bg) 94%, #fff7f2 6%);
  border: 1px solid var(--settings-border);
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
  pointer-events: auto;
}

.settings .settings-skills-save-bar-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings .settings-skills-save-bar-count {
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--settings-accent) 18%, #ffffff 82%);
  color: var(--settings-accent-strong);
  font-size: 12px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  flex-shrink: 0;
}

.settings .settings-skills-save-bar-text {
  flex: 1;
  min-width: 0;
  color: var(--settings-title);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

body[data-theme="dark"] .settings .settings-skills-save-bar {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .settings .settings-skills-save-bar-text {
  color: #aab3d4;
}

body[data-theme="dark"] .settings .settings-skills-save-bar-count {
  background: rgba(95, 141, 255, 0.2);
  color: #b9ccff;
}

@media (max-width: 760px) {
  .settings .settings-workbench-scroll.has-skills-save-bar {
    padding-bottom: 132px;
  }

  .settings .settings-skills-save-bar-shell {
    left: 20px;
    right: 20px;
    bottom: 16px;
    max-width: none;
  }

  .settings .settings-skills-save-bar {
    width: 100%;
    flex-wrap: wrap;
  }

  .settings .settings-skills-save-bar-copy {
    width: 100%;
  }
}

.settings .settings-agents-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings .settings-agent-evolution-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings .settings-agent-evolution-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.settings .settings-agent-evolution-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-agent-evolution-title {
  margin: 0;
  color: #1f1f1f;
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
}

.settings .settings-agent-evolution-subtitle {
  margin: 0;
  color: #989898;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-agent-evolution-refresh {
  flex: 0 0 auto;
  width: 60px;
  height: 36px;
  padding: 0;
  border-radius: 18px;
  border: 1px solid #f0f0f0;
  background: #ffffff;
  color: #525252;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease;
}

.settings .settings-agent-evolution-refresh:hover {
  border-color: #e6e6e6;
  color: #1f1f1f;
}

.settings .settings-agent-evolution-tabs-shell {
  position: relative;
  width: 100%;
}

.settings .settings-agent-evolution-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 41px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 0;
}

.settings .settings-agent-evolution-tabs::-webkit-scrollbar {
  display: none;
}

.settings .settings-agent-evolution-tab,
.settings .settings-agent-evolution-filter {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: #292929;
  border-radius: 12px;
  padding: 0 10px;
  height: 41px;
  flex: 0 0 auto;
  font: inherit;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings .settings-agent-evolution-tab.active,
.settings .settings-agent-evolution-filter.active {
  background: #f7f7f7;
}

.settings .settings-agent-evolution-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 41px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 72%);
}

.settings .settings-agent-evolution-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.settings .settings-agent-evolution-stat {
  min-height: 116px;
  border-radius: 12px;
  background: #f7f7f7;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.settings .settings-agent-evolution-stat.is-accent {
  background: #fff1ea;
}

.settings .settings-agent-evolution-stat-value {
  color: #1f1f1f;
  font-size: 30px;
  line-height: 42px;
  font-weight: 600;
}

.settings .settings-agent-evolution-stat-label {
  color: #7a7a7a;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-agent-evolution-stat.is-accent .settings-agent-evolution-stat-value,
.settings .settings-agent-evolution-stat.is-accent .settings-agent-evolution-stat-label {
  color: #fc5d1e;
}

.settings .settings-agent-evolution-speed,
.settings .settings-agent-evolution-updates {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings .settings-agent-evolution-speed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings .settings-agent-evolution-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #3d3d3d;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-agent-evolution-section-title-standalone {
  margin-bottom: 4px;
}

.settings .settings-agent-evolution-section-title svg {
  color: #c9c9c9;
}

.settings .settings-agent-evolution-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  cursor: default;
  outline: none;
}

.settings .settings-agent-evolution-info-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  width: 219px;
  padding: 8px;
  border-radius: 10px;
  background: #525252;
  color: #fafafa;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
  z-index: 4;
  box-sizing: border-box;
  box-shadow: 0px 12px 60px 0px rgba(0, 0, 0, 0.04), 0px 6px 40px 0px rgba(0, 0, 0, 0.04), 0px 4px 16px -4px rgba(0, 0, 0, 0.01);
}

.settings .settings-agent-evolution-info-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 8px;
  height: 6px;
  background: #525252;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
}

.settings .settings-agent-evolution-info:hover .settings-agent-evolution-info-tooltip,
.settings .settings-agent-evolution-info:focus-visible .settings-agent-evolution-info-tooltip {
  opacity: 1;
  visibility: visible;
}

.settings .settings-agent-evolution-speed-control {
  display: flex;
  align-items: center;
}

.settings .settings-agent-evolution-range-shell {
  position: relative;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
}

.settings .settings-agent-evolution-range-markers {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}

.settings .settings-agent-evolution-range-marker {
  width: 6px;
  height: 24px;
  border-radius: 999px;
  background: #eceef3;
}

.settings .settings-agent-evolution-range {
  --agent-evolution-progress: 32%;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.settings .settings-agent-evolution-range:focus {
  outline: none;
}

.settings .settings-agent-evolution-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #fc5d1e 0%,
    #fc5d1e var(--agent-evolution-progress),
    #eceef3 var(--agent-evolution-progress),
    #eceef3 100%
  );
}

.settings .settings-agent-evolution-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #eceef3;
}

.settings .settings-agent-evolution-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #fc5d1e;
}

.settings .settings-agent-evolution-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  border: 3px solid #fc5d1e;
  background: #ffffff;
  box-sizing: border-box;
}

.settings .settings-agent-evolution-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fc5d1e;
  border-radius: 50%;
  background: #ffffff;
  box-sizing: border-box;
}

.settings .settings-agent-evolution-speed-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ababab;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.settings .settings-agent-evolution-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings .settings-agent-evolution-filter {
  min-width: 0;
}

.settings .settings-agent-evolution-update-list {
  min-height: 320px;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

.settings .settings-agent-evolution-update-item {
  padding: 16px;
}

.settings .settings-agent-evolution-update-item + .settings-agent-evolution-update-item {
  border-top: 1px solid #f0f0f0;
}

.settings .settings-agent-evolution-update-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.settings .settings-agent-evolution-update-title {
  margin: 0;
  color: #3d3d3d;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
}

.settings .settings-agent-evolution-update-time {
  flex: 0 0 auto;
  color: #989898;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
}

.settings .settings-agent-evolution-update-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #989898;
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
}

.settings .settings-agent-evolution-update-body p {
  margin: 0;
  white-space: pre-wrap;
}

.settings .settings-agent-evolution-empty {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8b8b8;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  text-align: center;
  padding: 24px;
}

.settings .settings-agents-management {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid #f0f0f0;
}

body[data-theme="dark"] .settings .settings-agent-evolution-title {
  color: #f5f7fb;
}

body[data-theme="dark"] .settings .settings-agent-evolution-subtitle,
body[data-theme="dark"] .settings .settings-agent-evolution-update-time,
body[data-theme="dark"] .settings .settings-agent-evolution-update-body,
body[data-theme="dark"] .settings .settings-agent-evolution-speed-footer {
  color: #9095aa;
}

body[data-theme="dark"] .settings .settings-agent-evolution-refresh {
  background: #10131c;
  border-color: #1d2333;
  color: #f5f7fb;
}

body[data-theme="dark"] .settings .settings-agent-evolution-tab,
body[data-theme="dark"] .settings .settings-agent-evolution-filter,
body[data-theme="dark"] .settings .settings-agent-evolution-section-title,
body[data-theme="dark"] .settings .settings-agent-evolution-update-title {
  color: #eef2ff;
}

body[data-theme="dark"] .settings .settings-agent-evolution-tab.active,
body[data-theme="dark"] .settings .settings-agent-evolution-filter.active {
  background: #171a25;
}

body[data-theme="dark"] .settings .settings-agent-evolution-fade {
  background: linear-gradient(90deg, rgba(11, 12, 18, 0), #0b0c12 72%);
}

body[data-theme="dark"] .settings .settings-agent-evolution-stat {
  background: #121621;
}

body[data-theme="dark"] .settings .settings-agent-evolution-stat.is-accent {
  background: rgba(252, 93, 30, 0.14);
}

body[data-theme="dark"] .settings .settings-agent-evolution-stat-value {
  color: #f5f7fb;
}

body[data-theme="dark"] .settings .settings-agent-evolution-stat-label {
  color: #9095aa;
}

body[data-theme="dark"] .settings .settings-agent-evolution-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    #fc5d1e 0%,
    #fc5d1e var(--agent-evolution-progress),
    #273042 var(--agent-evolution-progress),
    #273042 100%
  );
}

body[data-theme="dark"] .settings .settings-agent-evolution-range::-moz-range-track {
  background: #273042;
}

body[data-theme="dark"] .settings .settings-agent-evolution-range-marker {
  background: #273042;
}

body[data-theme="dark"] .settings .settings-agent-evolution-update-list {
  background: #0f131d;
  border-color: #1d2333;
}

body[data-theme="dark"] .settings .settings-agent-evolution-update-item + .settings-agent-evolution-update-item,
body[data-theme="dark"] .settings .settings-agents-management {
  border-color: #1d2333;
}

body[data-theme="dark"] .settings .settings-agent-evolution-empty {
  color: #73788b;
}

body[data-theme="dark"] .settings .settings-agent-evolution-info-tooltip,
body[data-theme="dark"] .settings .settings-agent-evolution-info-tooltip::after {
  background: #525252;
}

@media (max-width: 1200px) {
  .settings .settings-agent-evolution-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .settings .settings-agent-evolution-header {
    flex-direction: column;
    align-items: stretch;
  }

  .settings .settings-agent-evolution-refresh {
    align-self: flex-start;
  }

  .settings .settings-agent-evolution-stats {
    grid-template-columns: 1fr;
  }

  .settings .settings-agent-evolution-update-meta {
    flex-direction: column;
    gap: 6px;
  }
}

/* ── Compact Header Bar ── */
.settings .settings-agents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.settings .settings-agents-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.settings .settings-agents-header-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--theme-text, #292929);
  margin: 0;
}
.settings .settings-agents-header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(224, 113, 71, 0.1);
  color: var(--theme-accent1, #c45f37);
  font-size: 12px;
  font-weight: 700;
}
.settings .settings-agents-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #e07147, #d45a30);
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.1s;
  box-shadow: 0 4px 14px rgba(224, 113, 71, 0.25);
  flex-shrink: 0;
}
.settings .settings-agents-create-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.settings .settings-agents-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Keep old hero styles (not rendered anymore but keep for compatibility) ── */
.settings .settings-agents-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.88),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(255, 245, 238, 0.94),
      rgba(255, 255, 255, 0.96)
    );
  border: 1px solid rgba(224, 113, 71, 0.12);
  box-shadow: 0 24px 60px rgba(224, 113, 71, 0.08);
}

.settings .settings-agents-hero-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-agents-hero-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(224, 113, 71, 0.1);
  color: var(--theme-accent1, #c45f37);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.settings .settings-agents-hero-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.settings .settings-agents-hero-stat {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 31, 31, 0.04);
}

.settings .settings-agents-hero-stat-value {
  color: var(--theme-text, #292929);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.settings .settings-agents-hero-stat-label {
  color: var(--theme-text-sec, #6b7280);
  font-size: 12px;
  line-height: 1.4;
}

.settings .settings-agents-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  flex-shrink: 0;
}

.settings .settings-agents-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings .settings-agents-note-title {
  color: var(--theme-text, #292929);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.settings .settings-agents-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Agent Gallery ── */
.settings .settings-agents-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Default Assistant Profile Card ── */
.settings .settings-agent-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid rgba(31, 31, 31, 0.05);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(250, 250, 250, 0.94)
  );
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
}

.settings .settings-agent-profile:hover {
  border-color: rgba(224, 113, 71, 0.14);
  box-shadow: 0 8px 28px rgba(224, 113, 71, 0.08);
  transform: translateY(-1px);
}

.settings .settings-agent-profile-main {
  cursor: default;
}

.settings .settings-agent-profile-main:hover {
  transform: none;
  border-color: rgba(31, 31, 31, 0.05);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

/* App icon in default assistant card */
.settings .settings-agent-profile-app-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* Avatar */
.settings .settings-agent-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(31, 31, 31, 0.03);
}
.settings .settings-agent-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings .settings-agent-profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b0b0;
  background: rgba(31, 31, 31, 0.04);
  border-radius: 16px;
}
.settings .settings-agent-profile-avatar-placeholder.is-main {
  background: linear-gradient(
    135deg,
    rgba(224, 113, 71, 0.12),
    rgba(224, 113, 71, 0.04)
  );
  color: #e07147;
}
.settings .settings-agent-profile-avatar-placeholder.large {
  width: 100%;
  height: 100%;
  border-radius: 28px;
}

/* Info area */
.settings .settings-agent-profile-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings .settings-agent-profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.settings .settings-agent-profile-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-text, #292929);
}
.settings .settings-agent-profile-main-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(224, 113, 71, 0.1);
  color: var(--theme-accent1, #c45f37);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.settings .settings-agent-profile-model-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(31, 31, 31, 0.05);
  color: var(--theme-text-ter, #9ca3af);
  font-size: 11px;
  font-weight: 500;
}
.settings .settings-agent-profile-desc {
  font-size: 13px;
  color: var(--theme-text-sec, #6b7280);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.settings .settings-agent-profile-desc.is-placeholder {
  color: var(--theme-text-ter, #9ca3af);
  font-style: italic;
}
.settings .settings-agent-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.settings .settings-agent-profile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Agent Grid (Character.AI style cards) ── */
.settings .settings-agents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.settings .settings-agents-grid-full {
  grid-column: 1 / -1;
}

.settings .settings-agent-card-v2 {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(31, 31, 31, 0.05);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 249, 251, 0.96)
  );
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
  gap: 12px;
}
.settings .settings-agent-card-v2:hover {
  border-color: rgba(224, 113, 71, 0.14);
  box-shadow: 0 8px 28px rgba(224, 113, 71, 0.08);
  transform: translateY(-2px);
}

.settings .settings-agent-card-v2-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.settings .settings-agent-card-v2-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(31, 31, 31, 0.03);
}
.settings .settings-agent-card-v2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings .settings-agent-card-v2-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.settings .settings-agent-card-v2:hover .settings-agent-card-v2-actions {
  opacity: 1;
}
.settings .settings-agent-card-v2-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(31, 31, 31, 0.06);
  background: rgba(255, 255, 255, 0.8);
  color: var(--theme-text-sec, #6b7280);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.settings .settings-agent-card-v2-action-btn:hover {
  background: rgba(31, 31, 31, 0.06);
  color: var(--theme-text, #292929);
}

.settings .settings-agent-card-v2-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.settings .settings-agent-card-v2-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-text, #292929);
  line-height: 1.3;
}
.settings .settings-agent-card-v2-desc {
  font-size: 12px;
  color: var(--theme-text-sec, #6b7280);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.settings .settings-agent-card-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.settings .settings-agent-card-v2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.settings .settings-agent-card-v2-model {
  font-size: 11px;
  color: var(--theme-text-ter, #9ca3af);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Inline Edit Card ── */
.settings .settings-agent-profile.is-editing {
  flex-direction: column;
  cursor: default;
  border-color: rgba(224, 113, 71, 0.18);
  box-shadow: 0 8px 32px rgba(224, 113, 71, 0.08);
  padding: 24px;
}
.settings .settings-agent-profile.is-editing:hover {
  transform: none;
}

.settings .settings-agent-edit-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  width: 100%;
}

/* Avatar edit area */
.settings .settings-agent-edit-avatar-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.settings .settings-agent-edit-avatar-preview {
  width: 140px;
  height: 140px;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(31, 31, 31, 0.06);
  background: rgba(31, 31, 31, 0.03);
}
.settings .settings-agent-edit-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings .settings-agent-edit-avatar-gen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Form */
.settings .settings-agent-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.settings .settings-agent-edit-row {
  display: flex;
  gap: 12px;
  min-width: 0;
}
.settings .settings-agent-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.settings .settings-agent-edit-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--theme-text-sec, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings .settings-agent-edit-field input,
.settings .settings-agent-edit-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(31, 31, 31, 0.08);
  background: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--theme-text, #292929);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.settings .settings-agent-edit-field input:focus,
.settings .settings-agent-edit-field textarea:focus {
  border-color: rgba(224, 113, 71, 0.3);
}
.settings .settings-agent-edit-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings .settings-agent-edit-field textarea {
  min-height: 56px;
}
.settings .settings-agent-edit-divider {
  height: 1px;
  background: rgba(31, 31, 31, 0.06);
  margin: 2px 0;
}

/* Model dropdown */
.settings .settings-agent-model-dropdown {
  position: relative;
}
.settings .settings-agent-model-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(31, 31, 31, 0.08);
  background: rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--theme-text, #292929);
  cursor: pointer;
  outline: none;
}
.settings .settings-agent-model-dropdown-trigger:hover {
  border-color: rgba(224, 113, 71, 0.2);
}
.settings .settings-agent-model-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(31, 31, 31, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 10;
  padding: 4px;
}
.settings .settings-agent-model-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--theme-text, #292929);
  cursor: pointer;
  text-align: left;
}
.settings .settings-agent-model-dropdown-item:hover {
  background: rgba(31, 31, 31, 0.04);
}
.settings .settings-agent-model-dropdown-item.active {
  background: rgba(224, 113, 71, 0.08);
  color: var(--theme-accent1, #c45f37);
  font-weight: 500;
}

/* Footer */
.settings .settings-agent-edit-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(31, 31, 31, 0.06);
  width: 100%;
}

/* Danger button */
.settings .settings-button-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.settings .settings-button-danger:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.3);
}

/* Icon button */
.settings .settings-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(31, 31, 31, 0.06);
  background: rgba(255, 255, 255, 0.6);
  color: var(--theme-text-sec, #6b7280);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.settings .settings-button-icon:hover {
  background: rgba(31, 31, 31, 0.04);
  border-color: rgba(31, 31, 31, 0.12);
  color: var(--theme-text, #292929);
}

/* Empty gallery state */
.settings .settings-agents-empty-gallery {
  min-height: 240px;
  border-radius: 18px;
  padding: 40px;
  border: 1px dashed rgba(31, 31, 31, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--theme-text-sec, #6b7280);
}
.settings .settings-agents-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(224, 113, 71, 0.06);
  color: #e07147;
  margin-bottom: 4px;
}
.settings .settings-agents-empty-gallery-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--theme-text, #292929);
}
.settings .settings-agents-empty-gallery-hint {
  font-size: 13px;
  color: var(--theme-text-sec, #6b7280);
  max-width: 340px;
  line-height: 1.5;
}

.settings .settings-agent-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(31, 31, 31, 0.05);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(250, 250, 250, 0.94)
  );
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.settings .settings-agent-card-mainblock {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings .settings-agent-card-head {
  display: flex;
  align-items: center;
  min-width: 0;
}

.settings .settings-agent-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings .settings-agent-card-titleline {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings .settings-agent-card-name {
  color: var(--theme-text, #292929);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.settings .settings-agent-card-subtitle {
  color: var(--theme-text-sec, #6b7280);
  font-size: 13px;
  line-height: 1.5;
}

.settings .settings-agent-card-path {
  color: var(--theme-text-sec, #6b7280);
  font-size: 12px;
  line-height: 1.6;
  word-break: break-all;
}

.settings .settings-agent-card-path.is-muted {
  color: var(--theme-text-ter, #9ca3af);
}

.settings .settings-agent-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings .settings-agent-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--settings-card-soft, rgba(31, 31, 31, 0.04));
  color: var(--theme-text-sec, #525252);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.settings .settings-agent-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ── Dark theme: Agent Header ── */
body[data-theme="dark"] .settings .settings-agents-header-title {
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agents-header-count {
  background: rgba(224, 113, 71, 0.14);
  color: #ffb28d;
}
body[data-theme="dark"] .settings .settings-agents-overview-tab {
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agents-overview-tab:hover {
  color: #ffffff;
}
body[data-theme="dark"] .settings .settings-agents-overview-tab.active {
  background: rgba(255, 255, 255, 0.08);
}
body[data-theme="dark"] .settings .settings-agents-overview-fade {
  background: linear-gradient(90deg, rgba(14, 16, 23, 0), #0e1017 72%);
}
body[data-theme="dark"] .settings .settings-agents-overview-card {
  background: #171a25;
}
body[data-theme="dark"] .settings .settings-agents-overview-card.is-accent {
  background: rgba(224, 113, 71, 0.12);
}
body[data-theme="dark"] .settings .settings-agents-overview-card-value {
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agents-overview-card-label {
  color: #9aa4ca;
}
body[data-theme="dark"]
  .settings
  .settings-agents-overview-card.is-accent
  .settings-agents-overview-card-value,
body[data-theme="dark"]
  .settings
  .settings-agents-overview-card.is-accent
  .settings-agents-overview-card-label {
  color: #ffb28d;
}
body[data-theme="dark"] .settings .settings-agents-create-btn {
  background: linear-gradient(135deg, #d45a30, #c04e28);
  box-shadow: 0 4px 14px rgba(224, 113, 71, 0.15);
}

body[data-theme="dark"] .settings .settings-agents-hero {
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 183, 145, 0.08),
      transparent 32%
    ),
    linear-gradient(135deg, rgba(43, 27, 22, 0.95), rgba(17, 19, 29, 0.98));
  border-color: rgba(224, 113, 71, 0.14);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
}

body[data-theme="dark"] .settings .settings-agents-hero-kicker {
  background: rgba(224, 113, 71, 0.14);
  color: #ffb28d;
}

body[data-theme="dark"] .settings .settings-agents-hero-stat {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(141, 150, 187, 0.1);
}

body[data-theme="dark"] .settings .settings-agents-hero-stat-value,
body[data-theme="dark"] .settings .settings-agents-note-title {
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-agents-hero-stat-label {
  color: #9aa4ca;
}

body[data-theme="dark"] .settings .settings-agent-card {
  background: linear-gradient(
    180deg,
    rgba(23, 26, 37, 0.98),
    rgba(17, 19, 29, 0.96)
  );
  border-color: rgba(141, 150, 187, 0.08);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .settings .settings-agent-card-name {
  color: #f5f7ff;
}

body[data-theme="dark"] .settings .settings-agent-card-subtitle,
body[data-theme="dark"] .settings .settings-agent-card-path {
  color: #aab3d4;
}

body[data-theme="dark"] .settings .settings-agent-card-path.is-muted {
  color: #7f89ad;
}

body[data-theme="dark"] .settings .settings-agent-tag {
  background: rgba(141, 150, 187, 0.1);
  color: #d0d8f3;
}

/* ── Dark theme: Agent Profile Cards ── */
body[data-theme="dark"] .settings .settings-agent-profile {
  background: linear-gradient(
    180deg,
    rgba(23, 26, 37, 0.98),
    rgba(17, 19, 29, 0.96)
  );
  border-color: rgba(141, 150, 187, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
body[data-theme="dark"] .settings .settings-agent-profile:hover {
  border-color: rgba(224, 113, 71, 0.18);
  box-shadow: 0 8px 28px rgba(224, 113, 71, 0.06);
}
body[data-theme="dark"] .settings .settings-agent-profile-main {
  border-color: rgba(141, 150, 187, 0.08);
}
body[data-theme="dark"] .settings .settings-agent-profile-main:hover {
  border-color: rgba(141, 150, 187, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
body[data-theme="dark"] .settings .settings-agent-profile-avatar {
  background: rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] .settings .settings-agent-profile-avatar-placeholder {
  background: rgba(255, 255, 255, 0.04);
  color: #7f89ad;
}
body[data-theme="dark"]
  .settings
  .settings-agent-profile-avatar-placeholder.is-main {
  background: rgba(224, 113, 71, 0.1);
  color: #ffb28d;
}
body[data-theme="dark"] .settings .settings-agent-profile-name {
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agent-profile-main-badge {
  background: rgba(224, 113, 71, 0.12);
  color: #ffb28d;
}
body[data-theme="dark"] .settings .settings-agent-profile-model-badge {
  background: rgba(141, 150, 187, 0.1);
  color: #8d96bb;
}
body[data-theme="dark"] .settings .settings-agent-profile-desc {
  color: #aab3d4;
}
body[data-theme="dark"] .settings .settings-agent-profile-desc.is-placeholder {
  color: #7f89ad;
}

/* Dark theme: Agent Card V2 (grid) */
body[data-theme="dark"] .settings .settings-agent-card-v2 {
  background: linear-gradient(
    180deg,
    rgba(23, 26, 37, 0.98),
    rgba(17, 19, 29, 0.96)
  );
  border-color: rgba(141, 150, 187, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
body[data-theme="dark"] .settings .settings-agent-card-v2:hover {
  border-color: rgba(224, 113, 71, 0.18);
  box-shadow: 0 8px 28px rgba(224, 113, 71, 0.06);
}
body[data-theme="dark"] .settings .settings-agent-card-v2-avatar {
  background: rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] .settings .settings-agent-card-v2-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(141, 150, 187, 0.1);
  color: #8d96bb;
}
body[data-theme="dark"] .settings .settings-agent-card-v2-action-btn:hover {
  background: rgba(141, 150, 187, 0.12);
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agent-card-v2-name {
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agent-card-v2-desc {
  color: #aab3d4;
}
body[data-theme="dark"] .settings .settings-agent-card-v2-model {
  color: #7f89ad;
}

/* Dark theme: Inline Edit Card */
body[data-theme="dark"] .settings .settings-agent-profile.is-editing {
  border-color: rgba(224, 113, 71, 0.16);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body[data-theme="dark"] .settings .settings-agent-edit-avatar-preview {
  border-color: rgba(141, 150, 187, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
body[data-theme="dark"] .settings .settings-agent-edit-field label {
  color: #9aa4ca;
}
body[data-theme="dark"] .settings .settings-agent-edit-field input,
body[data-theme="dark"] .settings .settings-agent-edit-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(141, 150, 187, 0.12);
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agent-edit-field input:focus,
body[data-theme="dark"] .settings .settings-agent-edit-field textarea:focus {
  border-color: rgba(224, 113, 71, 0.3);
}
body[data-theme="dark"] .settings .settings-agent-edit-divider {
  background: rgba(141, 150, 187, 0.08);
}
body[data-theme="dark"] .settings .settings-agent-edit-footer {
  border-top-color: rgba(141, 150, 187, 0.08);
}
body[data-theme="dark"] .settings .settings-agent-model-dropdown-trigger {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(141, 150, 187, 0.12);
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agent-model-dropdown-trigger:hover {
  border-color: rgba(224, 113, 71, 0.2);
}
body[data-theme="dark"] .settings .settings-agent-model-dropdown-menu {
  background: #171a25;
  border-color: rgba(141, 150, 187, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
body[data-theme="dark"] .settings .settings-agent-model-dropdown-item {
  color: #c6cce6;
}
body[data-theme="dark"] .settings .settings-agent-model-dropdown-item:hover {
  background: rgba(141, 150, 187, 0.08);
}
body[data-theme="dark"] .settings .settings-agent-model-dropdown-item.active {
  background: rgba(224, 113, 71, 0.12);
  color: #ffb28d;
}
body[data-theme="dark"] .settings .settings-button-icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(141, 150, 187, 0.1);
  color: #9aa4ca;
}
body[data-theme="dark"] .settings .settings-button-icon:hover {
  background: rgba(141, 150, 187, 0.1);
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-button-danger {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.2);
  color: #f87171;
}
body[data-theme="dark"] .settings .settings-button-danger:hover {
  background: rgba(220, 38, 38, 0.16);
}
body[data-theme="dark"] .settings .settings-agents-empty-gallery {
  border-color: rgba(141, 150, 187, 0.1);
  color: #9aa4ca;
}
body[data-theme="dark"] .settings .settings-agents-empty-icon {
  background: rgba(224, 113, 71, 0.1);
  color: #ffb28d;
}
body[data-theme="dark"] .settings .settings-agents-empty-gallery-title {
  color: #f5f7ff;
}
body[data-theme="dark"] .settings .settings-agents-empty-gallery-hint {
  color: #9aa4ca;
}

@media (max-width: 960px) {
  .settings .settings-agents-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings .settings-agents-overview-card {
    padding: 16px;
  }

  .settings .settings-agents-overview-card-value {
    font-size: 28px;
    line-height: 38px;
  }

  .settings .settings-agents-overview-card-label {
    font-size: 15px;
    line-height: 21px;
  }

  .settings .settings-agents-hero {
    flex-direction: column;
  }

  .settings .settings-agents-hero-actions {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .settings .settings-agent-card {
    flex-direction: column;
  }

  .settings .settings-agent-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .settings .settings-agent-edit-layout {
    grid-template-columns: 1fr;
  }

  .settings .settings-agent-edit-row {
    flex-direction: column;
  }

  .settings .settings-agents-grid {
    grid-template-columns: 1fr;
  }

  .settings .settings-agent-profile {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings .settings-agent-profile-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .settings .settings-agent-profile-main:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .settings .settings-agents-overview-tabs {
    gap: 10px;
  }

  .settings .settings-agents-overview-tab {
    height: 38px;
    padding: 0 18px;
    font-size: 15px;
  }

  .settings .settings-agents-overview-fade {
    height: 38px;
    width: 48px;
  }

  .settings .settings-agents-overview-grid {
    grid-template-columns: 1fr;
  }

  .settings .settings-agents-overview-card {
    min-height: 104px;
    gap: 10px;
  }

  .settings .settings-agents-overview-card-value {
    font-size: 26px;
    line-height: 34px;
  }

  .settings .settings-agents-overview-card-label {
    font-size: 15px;
    line-height: 21px;
  }
}
.inviteCodeView {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .loading-icon {
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    animation: rotate-animation 2s linear infinite;
  }

  > img {
    width: 90px;
  }

  > h1 {
    font-size: 32px;
    font-weight: 500;
    margin: 24px auto 8px;
  }

  > p {
    width: 400px;
    font-size: 14px;
    font-weight: 400;
    color: var(--theme-text-sec);
    text-align: center;
    margin-bottom: 36px;
  }

  .ant-input {
    height: 46px;
    border-radius: 10px;
  }

  .inviteCodeBtnWrap .ant-form-item-row {
    display: flex;

    .ant-form-item-control-input-content {
      display: flex;
      gap: 12px;

      button {
        height: 46px;
        flex: 1;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 500;
      }
      button:first-child {
        color: var(--text-g-2);
      }
    }
  }
}
/* ═══════════════════════════════════════════
   AutoClaw — Claude Cowork Style (Legacy Compat)
   
   NOTE: This file provides legacy class names that may be referenced
   by older components. The skin system in global.css is authoritative.
   Variable bridges in global.css map old names → skin tokens.
   ═══════════════════════════════════════════ */

/* ─── App Title Bar ─── */

.app-titlebar {
  height: var(--header-height);
  background: var(--bg-header);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-lg) 0 80px;
  border-bottom: none;
}

.app-titlebar-spacer {
  flex: 1;
}

.app-titlebar-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.app-status-badge {
  display: flex;
  align-items: center;
  font-size: 12px;
}

/* ═══════════════════════════════════════════
   Sidebar — Claude Cowork Dark
   ═══════════════════════════════════════════ */

.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
}

.sidebar-drag-region {
  height: 12px;
  flex-shrink: 0;
}

/* ─── Mode Pill Tabs ─── */

.sidebar-mode-area {
  padding: var(--space-sm) var(--space-md);
}

.sidebar-mode-tabs {
  display: flex;
  background: var(--bg-sidebar-hover);
  border-radius: var(--radius-md);
  padding: 2px;
}

.sidebar-mode-tab {
  flex: 1;
  padding: 5px 0;
  border: none;
  background: transparent;
  color: var(--text-sidebar-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  font-family: inherit;
}

.sidebar-mode-tab:hover {
  color: var(--text-sidebar);
}

.sidebar-mode-tab--active {
  background: var(--bg-sidebar-active);
  color: var(--text-header);
}

/* ─── New Task Button ─── */

.sidebar-new-task {
  padding: var(--space-sm) var(--space-md);
}

.sidebar-new-task-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
  font-family: inherit;
}

.sidebar-new-task-btn:hover {
  background: var(--bg-sidebar-hover);
}

.sidebar-new-task-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ─── Sidebar Header (legacy compat) ─── */

.sidebar-header {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-header);
  letter-spacing: -0.01em;
}

.sidebar-actions {
  display: flex;
  gap: var(--space-xs);
}

.sidebar-icon-btn {
  background: none;
  border: none;
  color: var(--text-sidebar-muted);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
}

.sidebar-icon-btn:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar);
}

.sidebar-icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ─── Sidebar Search ─── */

.sidebar-search {
  padding: 0 var(--space-md) var(--space-sm);
}

.sidebar-search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-sidebar-hover);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-sidebar);
  font-size: 12px;
  outline: none;
  transition: border var(--transition-fast);
}

.sidebar-search-input::placeholder {
  color: var(--text-sidebar-muted);
}

.sidebar-search-input:focus {
  border-color: var(--accent-primary);
}

/* ─── Sidebar Items ─── */

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin: 1px var(--space-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
  border-radius: var(--radius-md);
}

.sidebar-item:hover {
  background: var(--bg-sidebar-hover);
}

.sidebar-item--active {
  background: var(--bg-sidebar-active);
}

/* No left accent bar — Claude style uses background only */

.sidebar-item-icon {
  font-size: 14px;
  color: var(--text-sidebar-muted);
  flex-shrink: 0;
}

.sidebar-item--active .sidebar-item-icon {
  color: var(--text-sidebar);
}

.sidebar-item-content {
  flex: 1;
  min-width: 0;
}

.sidebar-item-label {
  font-size: 13px;
  color: var(--text-sidebar);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.sidebar-item--active .sidebar-item-label {
  color: var(--text-header);
  font-weight: 500;
}

.sidebar-item-meta {
  font-size: 12px;
  color: var(--text-sidebar-muted);
  display: block;
  margin-top: 1px;
}

.sidebar-item-delete {
  background: none;
  border: none;
  color: var(--text-sidebar-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  opacity: 0;
  transition: all var(--transition-fast);
}

.sidebar-item:hover .sidebar-item-delete {
  opacity: 1;
}

.sidebar-item-delete:hover {
  color: var(--accent-error);
}

/* ─── Sidebar Session List ─── */

.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding-top: var(--space-xs);
}

/* ─── Sidebar Local Note ─── */

.sidebar-local-note {
  padding: var(--space-sm) var(--space-lg);
  font-size: 11px;
  color: var(--text-sidebar-muted);
  line-height: 1.4;
}

/* ─── Sidebar User Footer ─── */

.sidebar-user-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-sidebar);
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-sidebar-active);
  color: var(--text-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-user-details {
  display: flex;
  flex-direction: column;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sidebar);
}

/* ═══════════════════════════════════════════
   Context Sidebar (Right Panel)
   ═══════════════════════════════════════════ */

.context-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  color: var(--text-sidebar);
  overflow-y: auto;
  padding-top: var(--header-height);
}

.ctx-section {
  border-bottom: 1px solid var(--border-sidebar);
}

.ctx-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: none;
  background: transparent;
  color: var(--text-header);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.ctx-section-arrow {
  font-size: 10px;
  color: var(--text-sidebar-muted);
  transition: transform var(--transition-fast);
}

.ctx-section-arrow--open {
  transform: rotate(90deg);
}

.ctx-section-body {
  padding: 0 var(--space-lg) var(--space-lg);
}

.ctx-empty {
  font-size: 12px;
  color: var(--text-sidebar-muted);
  line-height: 1.5;
}

/* ─── Progress Steps ─── */

.ctx-progress {
  display: flex;
  flex-direction: column;
}

.ctx-step {
  display: flex;
  gap: var(--space-md);
  min-height: 32px;
}

.ctx-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.ctx-step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-sidebar-muted);
  background: var(--bg-sidebar);
  flex-shrink: 0;
}

.ctx-step-dot--done {
  border-color: var(--accent-success);
  color: var(--accent-success);
  background: transparent;
}

.ctx-step-dot--running {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.ctx-step-dot--error {
  border-color: var(--accent-error);
  color: var(--accent-error);
}

.ctx-step-line {
  width: 2px;
  flex: 1;
  background: var(--border-sidebar);
  min-height: 12px;
}

.ctx-step-label {
  font-size: 12px;
  color: var(--text-sidebar);
  line-height: 20px;
  padding-bottom: var(--space-sm);
}

.ctx-step-label--done {
  color: var(--text-sidebar-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-sidebar-muted);
}

/* ─── Context List ─── */

.ctx-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ctx-list-group-label {
  font-size: 11px;
  color: var(--text-sidebar-muted);
  margin-bottom: var(--space-xs);
}

.ctx-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-sidebar);
}

.ctx-list-icon {
  font-size: 14px;
  color: var(--text-sidebar-muted);
  flex-shrink: 0;
}

.ctx-list-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctx-list-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar-muted);
}

.ctx-list-badge--on {
  color: var(--accent-success);
}

/* ═══════════════════════════════════════════
   Chat Panel
   ═══════════════════════════════════════════ */

.chat-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
}

.chat-panel-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-xl);
  flex-shrink: 0;
}

.chat-panel-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ─── Chat Messages (scoped to chat-panel context) ─── */

.chat-panel .chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-xl) 0;
}

/* ─── Message Item ─── */

.message-item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl) var(--space-md) var(--space-xl);
  transition: background var(--transition-fast);
}

.message-item:hover {
  background: transparent;
}

/* User message — right-aligned bubble */
.message-item--user {
  justify-content: flex-end;
  background: transparent;
  border: none;
  padding: var(--space-md) var(--space-xl);
}

.message-item--user:hover {
  background: transparent;
}

.message-item--user .message-avatar {
  display: none;
}

.message-item--user .message-body {
  flex: none;
  max-width: 80%;
  background: var(--bg-message-user);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
}

.message-item--user .message-header {
  display: none;
}

/* ─── Avatar — circle, Cowork style ─── */

.message-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 2px;
}

.message-avatar--user {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.message-avatar--agent {
  background: var(--bg-code-block);
  color: #d4cdc4;
  border: 1px solid var(--border-primary);
}

/* ─── Message Body ─── */

.message-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-right: var(--space-xl);
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.message-sender {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.message-time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-right: auto;
}

.message-tokens {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-surface-hover);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.message-elapsed {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-surface-hover);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

/* ─── Message Hover Actions ─── */

.message-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.message-item:hover .message-actions {
  opacity: 1;
}

.message-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 12px;
  transition: all var(--transition-fast);
}

.message-action-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.message-content {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}

.message-content--user {
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Streaming Cursor ─── */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--accent-primary);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1s step-end infinite;
  border-radius: 1px;
}

/* ─── Streaming Indicator — Asterisk Animation ─── */

@keyframes spin-asterisk {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse-asterisk {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.streaming-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--accent-primary);
  margin-top: var(--space-sm);
}

.streaming-asterisk {
  display: inline-flex;
  font-size: 18px;
  animation: spin-asterisk 2s linear infinite, pulse-asterisk 1.5s ease-in-out infinite;
  color: var(--accent-primary);
}

/* Legacy dots (hidden) */
.streaming-indicator .dot {
  display: none;
}

/* ─── Home Thinking Indicator ─── */

.msg-body-thinking {
  padding: 3px 10px!important;
  height: 34px!important;
  line-height: 34px!important;
  display: flex;
  align-items: center;
  background: rgba(161, 161, 161, 0.1) !important;
  border-radius: 20px !important;
  border: none !important;
}

@keyframes home-thinking-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.home-thinking-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-text-sec);
}

.home-thinking-indicator .home-thinking-eye {
  font-size: 15px;
  line-height: 1;
}

.home-thinking-indicator .home-thinking-text {
  animation: home-thinking-pulse 2s ease-in-out infinite;
  font-size: 14px;
  line-height: 1.57;
}

/* ─── Home Streaming Status (shown while generating/executing) ─── */

.home-streaming-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--theme-text-sec, #999);
}

.home-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary, var(--theme-accent1, #10b981));
  animation: home-streaming-blink 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes home-streaming-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.home-streaming-label {
  opacity: 0.7;
}

/* ─── Thinking Block ─── */

@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.thinking-pulse {
  animation: pulse 2.5s ease-in-out infinite;
}

.thinking-block {
  margin-bottom: var(--space-md);
  border: 1px solid var(--border-thinking);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.thinking-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-thinking);
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: var(--accent-primary);
  transition: background var(--transition-fast);
}

.thinking-header:hover {
  filter: brightness(0.97);
}

.thinking-header .arrow {
  font-size: 10px;
  transition: transform var(--transition-fast);
}

.thinking-header .arrow.expanded {
  transform: rotate(90deg);
}

.thinking-content {
  padding: var(--space-md);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  border-top: 1px solid var(--border-thinking);
  max-height: 300px;
  overflow-y: auto;
}

/* ─── Tool Calls List ─── */

.tool-calls-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ─── Error Card ─── */

.error-card {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border-error);
  border-radius: var(--radius-lg);
  background: var(--bg-error);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.error-card-icon {
  flex-shrink: 0;
  color: var(--accent-error);
  font-size: 14px;
  margin-top: 1px;
}

.error-card-content {
  flex: 1;
  min-width: 0;
}

.error-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-error);
  margin-bottom: var(--space-xs);
}

.error-card-message {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-error);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Code Block ─── */

.code-block-wrapper {
  margin: 0.85em 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
  background: var(--code-block-bg, #ffffff);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--code-block-header-bg, #ffffff);
  border-bottom: 1px solid var(--code-block-border, #ebebeb);
  min-height: 46px;
}

.code-block-lang {
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #525252;
  text-transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0;
}

.code-block-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.code-block-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none !important;
  background: transparent !important;
  color: #7a7a7a;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  border-radius: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.code-block-copy:hover {
  background: transparent !important;
  color: #525252;
  opacity: 0.82;
}

.code-block-copy:focus,
.code-block-copy:focus-visible,
.code-block-copy:active {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.code-block-copy--copied {
  color: #fc5d1e;
}

.code-block-copy-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.code-block-copy-icon--default {
  object-fit: contain;
}

.code-block-copy-icon--check {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.code-block-pre {
  margin: 0;
  padding: 10px 16px;
  background: var(--code-block-bg, #ffffff);
  overflow-x: auto;
  font-size: 14px;
  line-height: 22px;
}

.code-block-pre code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  color: var(--code-block-text);
  font-weight: 400;
  background: transparent;
  padding: 0;
}

.code-block-wrapper--evolution {
  margin: 10px 0;
  border: none;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}

.code-block-wrapper--evolution .code-block-header {
  padding: 12px 16px;
  min-height: 46px;
  background: #ffffff;
  border-bottom: 1px solid #ebebeb;
}

.code-block-wrapper--evolution .code-block-lang {
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #525252;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.code-block-wrapper--evolution .code-block-actions {
  gap: 0;
}

.code-block-wrapper--evolution .code-block-copy {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 0 !important;
  color: #7a7a7a;
}

.code-block-wrapper--evolution .code-block-copy:hover {
  background: transparent;
  color: #525252;
  opacity: 0.82;
}

.code-block-wrapper--evolution .code-block-copy--copied {
  color: #fc5d1e;
}

.code-block-wrapper--evolution .code-block-pre {
  padding: 10px 16px;
  background: #ffffff;
  overflow-x: auto;
  font-size: 14px;
  line-height: 22px;
}

.code-block-wrapper--evolution .code-block-pre code {
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #7a7a7a;
  white-space: pre-wrap;
  word-break: break-word;
}

.code-block-wrapper--evolution .hljs,
.code-block-wrapper--evolution .hljs * {
  color: #7a7a7a !important;
  font-weight: 400 !important;
}

/* ─── Markdown Body ─── */

.markdown-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}

.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child  { margin-bottom: 0; }

/* ── Paragraphs ── */
.markdown-body p {
  margin-bottom: 0.85em;
}
.markdown-body p:last-child {
  margin-bottom: 0;
}

/* ── Headings ── */
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin-top: 1.4em;
  margin-bottom: 0.6em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
}

.markdown-body h1 {
  font-size: 1.5em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--border-hi, var(--border));
}
.markdown-body h2 {
  font-size: 1.3em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border-hi, var(--border));
}
.markdown-body h3 { font-size: 1.15em; }
.markdown-body h4 { font-size: 1.05em; }
.markdown-body h5 { font-size: 1em; color: var(--text-sec); }
.markdown-body h6 { font-size: 0.95em; color: var(--text-ter); }

.markdown-body h1:first-child, .markdown-body h2:first-child,
.markdown-body h3:first-child, .markdown-body h4:first-child {
  margin-top: 0;
}

/* ── Lists ── */
.markdown-body ul, .markdown-body ol {
  padding-left: 1.6em;
  margin-bottom: 0.85em;
}
.markdown-body ul { list-style-type: disc; }
.markdown-body ol { list-style-type: decimal; }
.markdown-body ul ul { list-style-type: circle; }
.markdown-body ul ul ul { list-style-type: square; }

.markdown-body li {
  margin-bottom: 0.3em;
  line-height: 1.65;
}
.markdown-body li > p {
  margin-bottom: 0.3em;
}
.markdown-body li::marker {
  color: var(--text-ter);
}

/* Task list checkboxes */
.markdown-body li input[type="checkbox"] {
  margin-right: 0.4em;
  accent-color: var(--accent1);
}

/* ── Blockquotes ── */
.markdown-body blockquote {
  margin: 0.85em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--accent1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-sec);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.markdown-body blockquote p:last-child { margin-bottom: 0; }
.markdown-body blockquote blockquote {
  margin-top: 0.4em;
  border-left-color: var(--text-ter);
}

/* ── Inline Code ── */
.markdown-body code:not(pre code) {
  padding: 0.15em 0.45em;
  background: var(--code-inline-bg);
  border: 1px solid var(--code-inline-border);
  border-radius: 5px;
  font-size: 0.88em;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
  color: var(--code-inline-text);
  word-break: break-word;
}

/* ── Tables ── */
.markdown-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.85em 0;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border-hi, var(--border));
  border-radius: 10px;
  overflow: hidden;
}

.markdown-body thead {
  background: rgba(255, 255, 255, 0.06);
}

.markdown-body th {
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border-hi, var(--border));
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.markdown-body td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-sec);
}

.markdown-body th:last-child,
.markdown-body td:last-child {
  border-right: none;
}

.markdown-body tbody tr:last-child td {
  border-bottom: none;
}

.markdown-body tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.markdown-body tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Horizontal Rule ── */
.markdown-body hr {
  margin: 1.5em 0;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-hi, var(--border)), transparent);
}

/* ── Links ── */
.markdown-body a {
  color: var(--accent1);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, opacity 0.15s;
}
.markdown-body a:hover {
  border-bottom-color: var(--accent1);
  opacity: 0.85;
}

/* ── Strong & Emphasis ── */
.markdown-body strong {
  font-weight: 600;
  color: var(--text);
}
.markdown-body em {
  font-style: italic;
  color: var(--text-sec);
}

/* ── Images ── */
.markdown-body img {
  max-width: 100%;
  border-radius: 10px;
  margin: 0.5em 0;
  border: 1px solid var(--border);
}

/* ── Definition lists / details ── */
.markdown-body details {
  margin: 0.85em 0;
  padding: 0.5em 1em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.markdown-body details summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  padding: 0.25em 0;
}
.markdown-body details[open] summary {
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--border);
}

/* ── Footnotes ── */
.markdown-body sup a {
  font-size: 0.8em;
  padding: 0 2px;
}

/* ── Strikethrough ── */
.markdown-body del {
  color: var(--text-ter);
  text-decoration: line-through;
}

/* ─── Chat Input — Claude Cowork style ─── */

.chat-input-area {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  background: var(--bg-surface);
}

.chat-input-container {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-input);
  overflow: hidden;
  transition: border var(--transition-fast), box-shadow var(--transition-fast);
}

.chat-input-container:focus-within {
  border-color: var(--border-primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] .chat-input-container {
  border-color: var(--border-subtle);
}

[data-theme='dark'] .chat-input-container:focus-within {
  border-color: var(--border-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.chat-input-textarea {
  width: 100%;
  padding: var(--space-md) var(--space-lg) var(--space-sm);
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
}

.chat-input-textarea::placeholder {
  color: var(--text-tertiary);
}

.chat-input-textarea:disabled {
  opacity: 0.5;
}

.chat-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md) var(--space-sm);
}

.chat-input-left {
  display: flex;
  align-items: center;
}

.chat-input-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.chat-input-attach {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: all var(--transition-fast);
}

.chat-input-attach:hover {
  color: var(--text-secondary);
  background: var(--bg-surface-hover);
}

.chat-input-model {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 2px var(--space-sm);
}

.chat-input-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}

.chat-input-disclaimer {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  padding-top: var(--space-sm);
}

.chat-input-actions {
  display: flex;
  gap: var(--space-sm);
}

.chat-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.chat-btn--send {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.chat-btn--send:hover {
  background: var(--accent-primary-hover);
}

.chat-btn--send:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  background: var(--text-tertiary);
  color: var(--bg-app);
}

.chat-btn--stop {
  background: transparent;
  color: var(--accent-error);
  border: 1px solid var(--border-error);
}

.chat-btn--stop:hover {
  background: var(--bg-error);
}

/* ─── Empty State ─── */

.chat-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-xl);
}

.chat-empty-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.chat-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-empty-subtitle {
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   Allotment Sash Override — Subtle dividers
   ═══════════════════════════════════════════ */

.sash-container .sash {
  background: transparent !important;
}

.sash-container .sash::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border-sidebar);
}

/* ═══════════════════════════════════════════
   Evolution Card — Agent Self-Evolution Proposal
   ═══════════════════════════════════════════ */

.evo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  width: 100%;
  min-width: 0;
  margin: 4px 0;
}

/* Pending state — warm orange tint */
.evo-card--pending {
  background: #FFF1EC;
}
[data-theme='dark'] .evo-card--pending {
  background: rgba(252, 93, 30, 0.08);
}

/* Resolved (approved/rejected) — neutral grey */
.evo-card--approved,
.evo-card--rejected {
  background: #F5F5F5;
}
[data-theme='dark'] .evo-card--approved,
[data-theme='dark'] .evo-card--rejected {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Badge (header capsule) ── */

.evo-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 10px 6px 8px;
  background: #FFFFFF;
  border-radius: 30px;
  width: fit-content;
  max-width: 100%;
}
[data-theme='dark'] .evo-card-badge {
  background: var(--theme-surface-subtle, rgba(255, 255, 255, 0.08));
}

.evo-card--pending .evo-card-badge {
  box-shadow: 10px 8px 90px 0px rgba(255, 75, 4, 0.7);
}
[data-theme='dark'] .evo-card--pending .evo-card-badge {
  box-shadow: 0 2px 12px rgba(255, 75, 4, 0.25);
}

.evo-card-badge-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.evo-card-badge-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #292929;
}

.evo-card--pending .evo-card-badge-title,
.evo-card--approved .evo-card-badge-title {
  color: #FF733C;
}

.evo-card-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.evo-card-badge-status-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.evo-card-badge-status-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #FC5D1E;
}

.evo-card--rejected .evo-card-badge-status-icon::after {
  background: #7A7A7A;
}

/* ── Description text ── */

.evo-card-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: #292929;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
[data-theme='dark'] .evo-card-desc {
  color: var(--text, #e0e0e0);
}

/* ── Content area (tabs + body) ── */

.evo-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: #FFFFFF;
  border-radius: 16px;
  min-width: 0;
}
[data-theme='dark'] .evo-card-content {
  background: var(--theme-surface-subtle, rgba(255, 255, 255, 0.06));
}

/* Tab bar */
.evo-card-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.evo-card-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.57;
  color: #292929;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
[data-theme='dark'] .evo-card-tab {
  color: var(--text, #e0e0e0);
}

.evo-card-tab:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .evo-card-tab:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Active tab — pending state uses orange tint */
.evo-card--pending .evo-card-tab--active {
  background: rgba(252, 93, 30, 0.08);
  color: #FC5D1E;
}

/* Active tab — resolved state uses neutral grey */
.evo-card--approved .evo-card-tab--active,
.evo-card--rejected .evo-card-tab--active {
  background: #F0F0F0;
  color: #1F1F1F;
}
[data-theme='dark'] .evo-card--approved .evo-card-tab--active,
[data-theme='dark'] .evo-card--rejected .evo-card-tab--active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e0e0e0);
}

/* Tab body (markdown content) */
.evo-card-tab-body {
  font-size: 14px;
  line-height: 22px;
  color: #7A7A7A;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}
[data-theme='dark'] .evo-card-tab-body {
  color: var(--text-sec, #999);
}

.evo-card-tab-body > * {
  min-width: 0;
}

.evo-card-markdown,
.evo-card-markdown p,
.evo-card-markdown li,
.evo-card-markdown strong,
.evo-card-markdown b,
.evo-card-markdown h1,
.evo-card-markdown h2,
.evo-card-markdown h3,
.evo-card-markdown h4,
.evo-card-markdown h5,
.evo-card-markdown h6 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.evo-card-markdown p {
  margin: 0 0 10px;
}
.evo-card-markdown p:last-child {
  margin-bottom: 0;
}

.evo-card-markdown h1,
.evo-card-markdown h2,
.evo-card-markdown h3,
.evo-card-markdown h4,
.evo-card-markdown h5,
.evo-card-markdown h6,
.evo-card-markdown strong,
.evo-card-markdown b {
  color: #7a7a7a;
  margin: 0;
}
[data-theme='dark'] .evo-card-markdown h1,
[data-theme='dark'] .evo-card-markdown h2,
[data-theme='dark'] .evo-card-markdown h3,
[data-theme='dark'] .evo-card-markdown h4,
[data-theme='dark'] .evo-card-markdown h5,
[data-theme='dark'] .evo-card-markdown h6,
[data-theme='dark'] .evo-card-markdown strong,
[data-theme='dark'] .evo-card-markdown b {
  color: var(--text-sec, #999);
}

.evo-card-markdown ul,
.evo-card-markdown ol {
  padding-left: 21px;
  margin: 0 0 10px;
}
.evo-card-markdown li {
  margin-bottom: 0;
}
.evo-card-markdown p,
.evo-card-markdown li,
.evo-card-markdown td,
.evo-card-markdown th,
.evo-card-markdown a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.evo-card-markdown code:not(pre code) {
  padding: 0.1em 0.35em;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  font-size: 0.9em;
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
  font-weight: 400;
}
[data-theme='dark'] .evo-card-markdown code:not(pre code) {
  background: rgba(255, 255, 255, 0.08);
}

.evo-card-markdown pre,
.evo-card-markdown .code-block-wrapper {
  max-width: 100%;
}

.evo-card-markdown pre {
  overflow-x: auto;
}

.evo-card-markdown table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: normal;
}

.evo-card-markdown hr {
  border: none;
  border-top: 1px solid rgba(252, 93, 30, 0.35);
  margin: 10px 0;
}

/* ── Footer (actions row) ── */

.evo-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.evo-card-hint {
  font-size: 14px;
  line-height: 1.57;
  color: #FF9F79;
  flex: 1 1 180px;
}

.evo-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.evo-card-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  height: 36px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.evo-card-btn:hover {
  opacity: 0.85;
}
.evo-card-btn:active {
  opacity: 0.7;
}

.evo-card-btn--reject {
  background: transparent;
  color: #292929;
}
[data-theme='dark'] .evo-card-btn--reject {
  color: var(--text, #e0e0e0);
}
.evo-card-btn--reject:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .evo-card-btn--reject:hover {
  background: rgba(255, 255, 255, 0.06);
}

.evo-card-btn--approve {
  background: #292929;
  color: #FAFAFA;
}
[data-theme='dark'] .evo-card-btn--approve {
  background: rgba(255, 255, 255, 0.12);
  color: #FAFAFA;
}
[data-theme='dark'] .evo-card-btn--approve:hover {
  background: rgba(255, 255, 255, 0.18);
}
@layer base {
  :root {
    --r-panel: 14px;
    --r-card: 12px;
    --r-pill: 20px;
  }

  :root,
  body {
    --bg: var(--theme-bg);
    --bg-sub: var(--theme-bg-sub);
    --panel: var(--theme-panel);
    --panel-hover: var(--theme-panel-hover);
    --surface-base: var(--theme-surface-base);
    --surface-subtle: var(--theme-surface-subtle);
    --surface-elevated: var(--theme-surface-elevated);
    --surface-sunken: var(--theme-surface-sunken);
    --surface-overlay: var(--theme-surface-overlay);
    --surface-accent-soft: var(--theme-surface-accent-soft);
    --surface-info-soft: var(--theme-surface-info-soft);
    --surface-warn-soft: var(--theme-surface-warn-soft);
    --surface-danger-soft: var(--theme-surface-danger-soft);
    --chrome-bg: var(--theme-chrome-bg);
    --chrome-border: var(--theme-chrome-border);
    --border: var(--theme-border);
    --border-hi: var(--theme-border-hi);
    --ring: var(--theme-ring);
    --text: var(--theme-text);
    --text-sec: var(--theme-text-sec);
    --text-ter: var(--theme-text-ter);
    --text-inverse: var(--theme-text-inverse);
    --text-placeholder: var(--theme-text-placeholder);
    --accent1: var(--theme-accent1);
    --accent2: var(--theme-accent2);
    --accent3: var(--theme-accent3);
    --success: var(--theme-success);
    --info: var(--theme-info);
    --warn: var(--theme-warn);
    --danger: var(--theme-danger);
    --shadow-sm: var(--theme-shadow-sm);
    --shadow: var(--theme-shadow);
    --shadow-lg: var(--theme-shadow-lg);
    --shadow-float: var(--theme-shadow-float);
    --nav-bg: var(--theme-nav-bg);
    --msg-user: var(--theme-msg-user);
    --msg-user-b: var(--theme-msg-user-b);
    --msg-agent: var(--theme-msg-agent);
    --msg-agent-b: var(--theme-msg-agent-b);
    --input-bg: var(--theme-input-bg);
    --input-b: var(--theme-input-b);
    --overlay-scrim: var(--theme-overlay-scrim);
    --scrollbar-thumb: var(--theme-scrollbar-thumb);
    --scrollbar-thumb-hover: var(--theme-scrollbar-thumb-hover);
  }

  :root,
  body,
  :root[data-theme="light"],
  body[data-theme="light"] {
    --theme-bg: #f5f5f5;
    --theme-bg-sub: rgba(245, 245, 245, 0.92);
    --theme-panel: #ffffff;
    --theme-panel-hover: #f5f5f5;
    --theme-surface-base: #ffffff;
    --theme-surface-subtle: #f7f7f7;
    --theme-surface-elevated: #ffffff;
    --theme-surface-sunken: #f5f5f5;
    --theme-surface-overlay: rgba(255, 255, 255, 0.96);
    --theme-surface-accent-soft: rgba(252, 93, 30, 0.08);
    --theme-surface-info-soft: rgba(78, 125, 183, 0.12);
    --theme-surface-warn-soft: rgba(200, 135, 43, 0.12);
    --theme-surface-danger-soft: rgba(223, 83, 83, 0.12);
    --theme-chrome-bg: #f5f5f5;
    --theme-chrome-border: #f0f0f0;
    --theme-border: #e5e5e5;
    --theme-border-hi: #e6e6e6;
    --theme-ring: rgba(252, 93, 30, 0.22);
    --theme-text: #292929;
    --theme-text-sec: #7a7a7a;
    --theme-text-ter: #9e9e9e;
    --theme-text-inverse: #ffffff;
    --theme-text-placeholder: #b0b0b0;
    --theme-accent1: #fc5d1e;
    --theme-accent2: #e55318;
    --theme-accent3: #fed5c4;
    --theme-success: #2f9e5b;
    --theme-info: #4e7db7;
    --theme-warn: #c8872b;
    --theme-danger: #df5353;
    --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 14px rgba(0, 0, 0, 0.03);
    --theme-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    --theme-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.08);
    --theme-shadow-float: 0 18px 32px -12px rgba(0, 0, 0, 0.1);
    --theme-nav-bg: #f5f5f5;
    --theme-msg-user: rgba(252, 93, 30, 0.08);
    --theme-msg-user-b: rgba(252, 93, 30, 0.16);
    --theme-msg-agent: rgba(41, 41, 41, 0.04);
    --theme-msg-agent-b: rgba(41, 41, 41, 0.08);
    --theme-input-bg: #ffffff;
    --theme-input-b: #e5e5e5;
    --theme-overlay-scrim: rgba(17, 17, 17, 0.34);
    --theme-scrollbar-thumb: rgba(41, 41, 41, 0.14);
    --theme-scrollbar-thumb-hover: rgba(41, 41, 41, 0.24);
    --theme-code-inline-bg: #f7f7f7;
    --theme-code-inline-border: #e5e5e5;
    --theme-code-inline-text: #292929;
    --theme-code-block-bg: #ffffff;
    --theme-code-block-header-bg: #ffffff;
    --theme-code-block-border: #ebebeb;
    --theme-code-block-text: #292929;
    --theme-code-block-muted: #7a7a7a;
    --theme-code-block-copy-hover: #efefef;
    --theme-code-block-shadow: none;
    --theme-code-comment: #9e9e9e;
  }

  :root[data-theme="dark"],
  body[data-theme="dark"] {
    --theme-bg: #050505;
    --theme-bg-sub: rgba(8, 9, 13, 0.78);
    --theme-panel: #0b0c12;
    --theme-panel-hover: #131621;
    --theme-surface-base: #0b0c12;
    --theme-surface-subtle: #171a25;
    --theme-surface-elevated: #11131d;
    --theme-surface-sunken: #07080d;
    --theme-surface-overlay: rgba(11, 12, 18, 0.92);
    --theme-surface-accent-soft: rgba(185, 124, 255, 0.18);
    --theme-surface-info-soft: rgba(95, 141, 255, 0.16);
    --theme-surface-warn-soft: rgba(240, 179, 92, 0.14);
    --theme-surface-danger-soft: rgba(255, 108, 147, 0.14);
    --theme-chrome-bg: rgba(5, 5, 5, 0.9);
    --theme-chrome-border: rgba(141, 162, 255, 0.1);
    --theme-border: rgba(140, 151, 210, 0.16);
    --theme-border-hi: rgba(155, 169, 255, 0.26);
    --theme-ring: rgba(126, 138, 255, 0.38);
    --theme-text: #f5f7ff;
    --theme-text-sec: #c6cce6;
    --theme-text-ter: #aab3d4;
    --theme-text-inverse: #050505;
    --theme-text-placeholder: #98a2cb;
    --theme-accent1: #b97cff;
    --theme-accent2: #5f8dff;
    --theme-accent3: #d9c2ff;
    --theme-success: #64c88e;
    --theme-info: #7fb1ff;
    --theme-warn: #f0b35c;
    --theme-danger: #ff6c93;
    --theme-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --theme-shadow: 0 18px 42px rgba(0, 0, 0, 0.54);
    --theme-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.62);
    --theme-shadow-float: 0 24px 48px -14px rgba(0, 0, 0, 0.6);
    --theme-nav-bg: rgba(5, 5, 5, 0.9);
    --theme-msg-user: rgba(185, 124, 255, 0.1);
    --theme-msg-user-b: rgba(95, 141, 255, 0.2);
    --theme-msg-agent: rgba(255, 255, 255, 0.03);
    --theme-msg-agent-b: rgba(255, 255, 255, 0.08);
    --theme-input-bg: rgba(17, 19, 29, 0.92);
    --theme-input-b: rgba(141, 162, 255, 0.2);
    --theme-overlay-scrim: rgba(6, 6, 6, 0.54);
    --theme-scrollbar-thumb: rgba(255, 255, 255, 0.15);
    --theme-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
    --theme-code-inline-bg: rgba(255, 255, 255, 0.06);
    --theme-code-inline-border: rgba(140, 151, 210, 0.16);
    --theme-code-inline-text: #f5f7ff;
    --theme-code-block-bg: #11131d;
    --theme-code-block-header-bg: #171a25;
    --theme-code-block-border: rgba(140, 151, 210, 0.18);
    --theme-code-block-text: #f5f7ff;
    --theme-code-block-muted: #aab3d4;
    --theme-code-block-copy-hover: rgba(255, 255, 255, 0.08);
    --theme-code-block-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
    --theme-code-comment: #8d97ba;
  }

  :root[data-theme="light"],
  body[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"],
  body[data-theme="dark"] {
    color-scheme: dark;
  }
}

@layer base {
  :root {
    --radius: 14px;
    --r-card: 12px;
    --r-pill: 20px;

    /* ── Variable Bridge: map old chat.css names → skin system ── */
    --text-primary: var(--text);
    --text-secondary: var(--text-sec);
    --text-tertiary: var(--text-ter);
    --text-link: var(--accent1);
    --text-code: var(--accent2);

    --bg-surface: var(--bg-sub);
    --bg-surface-hover: var(--panel);
    --bg-input: var(--input-bg);
    --bg-header: var(--nav-bg);
    --bg-sidebar: var(--nav-bg);
    --bg-sidebar-hover: var(--panel);
    --bg-code: rgba(255, 255, 255, 0.06);
    --bg-code-block: rgba(0, 0, 0, 0.35);
    --bg-tool-call: var(--panel);

    --border-primary: var(--border);
    --border-subtle: var(--border);
    --border-code: var(--border);
    --border-tool: var(--border);

    --code-inline-bg: var(--theme-code-inline-bg, var(--surface-subtle));
    --code-inline-border: var(--theme-code-inline-border, var(--border));
    --code-inline-text: var(--theme-code-inline-text, var(--text));
    --code-block-bg: var(--theme-code-block-bg, var(--surface-base));
    --code-block-header-bg: var(
      --theme-code-block-header-bg,
      var(--surface-subtle)
    );
    --code-block-border: var(--theme-code-block-border, var(--border));
    --code-block-text: var(--theme-code-block-text, var(--text));
    --code-block-muted: var(--theme-code-block-muted, var(--text-sec));
    --code-block-copy-hover: var(
      --theme-code-block-copy-hover,
      var(--panel-hover)
    );
    --code-block-shadow: var(--theme-code-block-shadow, var(--shadow-sm));
    --code-comment: var(--theme-code-comment, var(--text-ter));

    --accent-primary: var(--accent1);
    --accent-success: var(--success);
    --accent-error: var(--danger);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;

    --transition-fast: 0.15s ease;
    --text-sidebar: var(--text-sec);

    /* macOS traffic-light alignment baseline (sync with main process) */
    --mac-window-controls-top: 22px;
    --mac-window-controls-size: 12px;
    /* Optical fine-tune for non-integer display scaling; adjust this single value if needed */
    --mac-window-controls-align-y: 2px;
  }

  * {
    border-color: var(--border);
  }
}

/* ── Reset & Base ── */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Focus States for Accessibility (Keyboard Navigation) */

*:focus-visible {
  outline: 2px solid var(--accent1);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════
     SKIN 1: RAYCAST (雷神) — Default, Translucent macOS glass, vibrant red
     ══════════════════════════════════════════════════════════ */

html,
body {
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition:
    background 0.4s,
    color 0.4s;
  /* Allow text selection everywhere for a production tool —
       users need to copy errors, paths, content freely */
  -webkit-user-select: auto;
  user-select: auto;
}

#root {
  width: 100%;
  height: 100%;
}

/* Prevent text selection only in non-content chrome elements */

.sidebar-header,
.sidebar-left,
.sidebar-right,
.titlebar,
.tab-bar,
.nav-item,
.tool-btn,
.send-btn,
.tiny-action,
.autoclaw-main-header,
.input-tools {
  -webkit-user-select: none;
  user-select: none;
}

/* Form elements naturally handle their own text selection, but we prevent selection of their containers/labels */

.form-control,
.input-box textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

/* Custom Selection Color (removes the default web blue) */

::selection {
  background: rgba(128, 128, 128, 0.4);
  color: inherit;
}

::-moz-selection {
  background: rgba(128, 128, 128, 0.4);
  color: inherit;
}

/* Ensure form elements don't get selected when using Cmd+A globally */

input::selection,
textarea::selection {
  background: rgba(128, 128, 128, 0.4);
}

/* ── Mac-style Overlay Scrollbars ── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 6px;
  transition: background 0.3s;
}

*:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Light-background scrollbar overrides */

.sidebar-left *:hover::-webkit-scrollbar-thumb,
.autoclaw-sidebar-left *:hover::-webkit-scrollbar-thumb,
.modal-overlay *:hover::-webkit-scrollbar-thumb,
.figma-session-sidebar *:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

.sidebar-left ::-webkit-scrollbar-thumb:hover,
.autoclaw-sidebar-left ::-webkit-scrollbar-thumb:hover,
.modal-overlay ::-webkit-scrollbar-thumb:hover,
.figma-session-sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* ── Ambient Background Glow ── */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s;
}

body[data-theme="light"]::before {
  background: none;
  opacity: 0;
}

body[data-theme="dark"]::before {
  background:
    radial-gradient(
      ellipse 720px 520px at 20% 18%,
      rgba(182, 116, 255, 0.1),
      transparent
    ),
    radial-gradient(
      ellipse 560px 420px at 82% 78%,
      rgba(95, 141, 255, 0.07),
      transparent
    );
  opacity: 1;
}

/* ── Top Nav (Mac Traffic Lights Safe Area) ── */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 80px; /* 80px safe area for Mac red/yellow/green buttons */
  background: #f5f5f5;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-app-region: drag;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
  -webkit-app-region: no-drag;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.nav-app-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent1), #2dd4bf);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #12141a;
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.3);
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-app-region: no-drag;
}

/* Model Selector based on AppSettings */

.model-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 500;
  color: #292929;
  cursor: pointer;
  transition: all 0.2s;
}

.model-menu {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 20;
}

.model-menu-item {
  border: none;
  background: transparent;
  color: #292929;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

.model-menu-item:hover,
.model-menu-item.active {
  background: rgba(0, 0, 0, 0.04);
}

.model-limit-chip {
  font-size: 10px;
  color: var(--warn);
  border: 1px solid rgba(255, 184, 77, 0.45);
  background: rgba(255, 184, 77, 0.13);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
}

.model-selector:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}

.model-selector.model-switching {
  opacity: 0.6;
  cursor: wait;
  border-color: var(--warn);
  animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
  0%,
  100% {
    border-color: var(--warn);
  }
  50% {
    border-color: var(--border);
  }
}

.model-icon {
  color: var(--accent3);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-app-region: no-drag;
}

/* Gateway Status */

.gateway-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.gateway-status:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.08);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.ping-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  opacity: 0.7;
}

/* ── Main Layout ── */

.shell {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 10;
}

/* ── Left Sidebar: Context & Workspace (Translating settings.workspace) ── */

.sidebar-left {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: #f5f5f5;
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden; /* Added to prevent content from breaking layout */
}

.sidebar-section {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-ter);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

/* Workspace Card */

.workspace-card {
  padding: 12px;
  border-radius: var(--r-card);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm); /* Add premium lighting */
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  cursor: pointer;
}

.workspace-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.ws-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ws-title {
  font-size: 13px;
  font-weight: 600;
  color: #292929;
}

.ws-path {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-ter);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent1);
  margin-top: 8px;
}

/* Metrics Card (Translating AgentRunResult tokens) */

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}

.metric-label {
  color: #666;
}

.metric-val {
  font-family: ui-monospace, monospace;
  color: #292929;
  font-weight: 500;
}

.metric-bar-bg {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
  display: flex;
}

.metric-bar-in {
  height: 100%;
  background: var(--accent3);
  width: 15%;
}

/* Input */

.metric-bar-out {
  height: 100%;
  background: var(--accent1);
  width: 45%;
}

/* Output */

/* ── Center: Chat Area ── */

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

/* Load earlier messages button (windowed rendering) */

.chat-load-earlier-btn {
  align-self: center;
  padding: 6px 16px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-surface);
  color: var(--theme-text-sec);
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
}

.chat-load-earlier-btn:hover {
  background: var(--theme-surface-hover, rgba(0, 0, 0, 0.04));
  color: var(--theme-text);
}

/* Chat Bubbles & Content */

.msg-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.msg-task-end {
  background: #0000000d;
  border-radius: 999px;
  display: flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px 0 6px;
  gap: 4px;
  font-size: 11px;
  line-height: 16px;
  color: #525252;
  flex: 0 0 auto;
}

.msg-task-end-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.msg-timestamp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 12px;
  color: #999;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.msg {
  display: flex;
  gap: 16px;
  width: 100%;
  animation: slideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; /* Alive messaging */
}

.msg:nth-child(1) {
  animation-delay: 0.1s;
}

.msg:nth-child(2) {
  animation-delay: 0.2s;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.msg.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  position: relative;
}

.msg.agent .avatar {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--accent1);
}

.msg.user .avatar {
  background: #ffffff;
  color: var(--text-sec);
}

.msg.agent .agent-avatar {
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}

.avatar-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  filter: blur(1.5px);
  transform: scale(1.15);
}

.avatar-monogram {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.msg-content {
  flex: 1;
  min-width: 0;
  max-width: 90%;
}

.msg-body {
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
}

.msg.user .msg-body {
  background: var(--msg-user);
  border: 1px solid var(--msg-user-b);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.msg.agent .msg-body {
  background: transparent;
  padding: 0;
}

/* ═══ Style D: Tool Call — Compact Grouped ═══ */

.tcg-group {
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  background: var(--bg-surface);
  margin: 8px 0;
}

.tcg-group-single {
  margin: 0;
}

.tcg-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: transparent;
  font-size: 12px;
  color: var(--text-ter);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
  border: none;
  border-bottom: 1px solid transparent;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  outline: none;
}

.tcg-group.open .tcg-group-header {
  border-bottom-color: var(--border-subtle);
}

.tcg-group-header:hover {
  background: var(--bg-surface-hover);
}

.tcg-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.tcg-header-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-ter);
  flex-shrink: 0;
}

.tcg-header-title {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.tcg-count-badge {
  min-width: 24px;
  height: 20px;
  border-radius: 8px;
  padding: 0 8px;
  background: var(--bg-surface-hover);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  flex-shrink: 0;
}

.tcg-header-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-ter);
  flex-shrink: 0;
}

.tcg-chevron {
  color: var(--text-ter);
  opacity: 0.72;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tcg-icon-img {
  width: 100%;
  height: 100%;
  display: block;
}

.tcg-chevron-img {
  width: 16px;
  height: 16px;
  display: block;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.tcg-chevron-img.open {
  transform: rotate(0deg);
}

.tcg-list {
  display: flex;
  flex-direction: column;
}

.tcg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s;
  font-size: 12px;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  color: var(--text);
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  outline: none;
}

.tcg-row:last-of-type {
  border-bottom: none;
}

.tcg-row:hover {
  background: var(--bg-surface-hover);
}

.tcg-row.open,
.tcg-row:focus,
.tcg-row:focus-visible,
.tcg-row:active,
.tcg-group-header:focus,
.tcg-group-header:focus-visible,
.tcg-group-header:active {
  background: var(--bg-surface-hover);
  box-shadow: none;
  outline: none;
}

.tcg-row-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tcg-row-icon.file {
  color: var(--info);
}

.tcg-row-icon.term {
  color: var(--accent3);
}

.tcg-row-icon.search {
  color: var(--accent2);
}

.tcg-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.tcg-summary {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcg-row-chevron {
  color: var(--text-ter);
  opacity: 0.72;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Expanded body */

.tcg-detail {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-hover);
  padding: 8px 12px;
}

.tcg-detail-pre {
  margin: 0;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
}

.msg-meta {
  font-size: 11px;
  color: var(--text-ter);
  margin-bottom: 6px;
}

/* Inline Artifact Card (Desktop-grade file) */

.artifact-card {
  margin: 16px 0;
  padding: 14px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
}

.artifact-card:hover {
  border-color: var(--border-hi);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.art-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.art-info {
  flex: 1;
  min-width: 0;
}

.art-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.art-meta {
  font-size: 12px;
  color: var(--text-sec);
  margin-top: 2px;
}

.art-actions {
  display: flex;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.artifact-card:hover .art-actions {
  opacity: 1;
}

.btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-sec);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
}

.btn-icon:hover {
  background: var(--accent1);
  color: #000;
  border-color: var(--accent1);
}

/* Input Bar Refinement */

.input-container {
  padding: 0 40px 32px;
  flex-shrink: 0;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  /* Gradient mask so text fading behind input looks slick */
  position: relative;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--bg) 15%,
    var(--bg) 100%
  );
}

.input-box {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-b);
  box-shadow: var(--shadow-float); /* Floating dock-like shadow */
  transition:
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  position: relative; /* For drag overlay positioning */
}

.input-box-dragover {
  border-color: var(--accent1);
  box-shadow:
    0 0 0 3px var(--ring),
    var(--shadow-lg);
}

.input-box:focus-within {
  border-color: var(--accent1);
  box-shadow:
    0 0 0 3px var(--ring),
    var(--shadow-lg);
}

.input-box textarea {
  flex: none;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  max-height: min(20vh, 168px);
  min-height: 24px;
  padding: 2px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.input-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.input-textarea-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.input-textarea-row textarea {
  flex: 1;
  min-width: 0;
}

.input-box textarea::placeholder {
  color: var(--text-ter);
}

.prefill-tag .prefill-tag-close {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.prefill-tag:hover .prefill-tag-close {
  opacity: 1;
}

.input-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.input-tools-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.input-tools .send-btn {
  margin-left: auto;
}

.input-model-indicator,
.input-evolution-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.input-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-sec);
  padding: 2px 4px;
  border-radius: 4px;
}

.input-evolution-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-sec);
  padding: 2px 4px;
  border-radius: 4px;
}

.input-model-chevron,
.input-evolution-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.15s ease;
}

.input-model-chevron.open,
.input-evolution-chevron.open {
  transform: rotate(180deg);
}

.input-evolution-icon-wrap {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.input-evolution-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.input-model-picker,
.input-evolution-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 136px;
  background: var(--theme-surface-elevated);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  box-shadow: var(--theme-shadow-lg);
  padding: 4px;
  z-index: 100;
}

.input-model-picker-item,
.input-evolution-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--theme-text);
  text-align: left;
  gap: 8px;
}

.input-model-picker-item:hover,
.input-evolution-picker-item:hover {
  background: var(--theme-surface-subtle);
}

.input-model-picker-item.active,
.input-evolution-picker-item.active {
  background: var(--theme-surface-accent-soft);
  color: var(--theme-accent1);
}

.tool-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--text-ter);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  border: 1px solid transparent;
  background: transparent;
}

.tool-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-color: var(--border);
  transform: translateY(-1px);
}

.send-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-bottom: -1px;
  background: var(--accent1);
  color: #000;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(94, 234, 212, 0.3);
}

.send-btn-stop {
  width: 32px;
  height: 32px;
  padding: 0;
  background:
    radial-gradient(
      circle at 70% -67%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    #292929;
  box-shadow: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.send-btn-stop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.send-btn-stop .stop-icon {
  width: 12px;
  height: 12px;
  background: #fafafa;
  border-radius: 3px;
  display: block;
}

.send-btn-stop:hover:not(:disabled) {
  box-shadow: none;
  transform: scale(1.08);
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(94, 234, 212, 0.4);
}

/* Smart Empty State for Send Button */

.input-box:has(textarea:placeholder-shown) .send-btn:not(.send-btn-stop) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-ter);
  box-shadow: none;
  transform: translateY(0);
  pointer-events: none;
}

/* ── Right Sidebar: Agent Activity & Artifacts ── */

.sidebar-right {
  position: absolute;
  top: 56px; /* starts below header */
  bottom: 0;
  right: 0;
  width: 316px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    width 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.2s ease;
}

.sidebar-right.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.sidebar-toggle-btn {
  position: absolute;
  top: 8px;
  z-index: 12;
  right: calc(360px + 2px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-sec);
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition:
    opacity 0.2s,
    right 0.25s ease;
}

.sidebar-toggle-btn.sidebar-collapsed {
  right: 8px;
}

.sidebar-toggle-btn:hover {
  opacity: 1;
}

.tabs-header {
  display: flex;
  padding: 20px 20px 0;
  border-bottom: 1px solid var(--border);
}

.tab {
  flex: 1;
  text-align: center;
  padding-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-ter);
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab:hover {
  color: var(--text-sec);
}

.tab.active {
  color: var(--accent1);
  border-bottom-color: var(--accent1);
}

.tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: none;
}

.tab-content.active {
  display: block;
  animation: fade 0.3s ease;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══ Style E: Sidebar Timeline / Execution Steps ═══ */

.tl-e-root {
}

.tl-e-cost-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.15);
  font-size: 10px;
  font-family: ui-monospace, monospace;
  color: var(--text-ter);
}

.tl-e-toggle-btn {
  flex: 1;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-sec);
  border: 1px solid var(--border);
  font-weight: 400;
  transition: all 0.15s;
}

.tl-e-toggle-btn.active {
  background: var(--accent1);
  color: #000;
  border-color: var(--accent1);
  font-weight: 600;
}

.tl-e-timeline {
  position: relative;
  padding-left: 24px;
}

.tl-e-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-hi);
}

.tl-e-step {
  position: relative;
  padding: 4px 0;
}

.tl-e-dot {
  position: absolute;
  left: -24px;
  top: 10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background: var(--border-hi);
}

.tl-e-dot.running {
  background: var(--accent1);
  box-shadow: 0 0 8px rgba(255, 99, 99, 0.5);
}

.tl-e-dot.done {
  background: var(--success);
}

.tl-e-dot.error {
  background: var(--danger);
}

.tl-e-dot-inner {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: white;
  animation: tl-e-pulse 1.5s ease infinite;
}

@keyframes tl-e-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.tl-e-card-wrap {
}

.tl-e-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  background: rgba(255, 255, 255, 0.02);
  border: none;
  width: 100%;
  color: var(--text);
  text-align: left;
  font: inherit;
}

.tl-e-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tl-e-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.tl-e-content {
  flex: 1;
  min-width: 0;
}

.tl-e-line1 {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-e-verb {
  font-weight: 600;
  color: var(--text-sec);
  flex-shrink: 0;
}

.tl-e-path {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--text);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-e-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-e-dur {
  font-size: 10px;
  color: var(--text-ter);
  font-family: "SF Mono", ui-monospace, monospace;
}

/* I/O Panels */

.tl-e-io-panel {
  margin-top: 6px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-e-io-section {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.tl-e-io-section.tl-e-io-input {
  border-left: 2px solid var(--accent2);
}

.tl-e-io-section.tl-e-io-output {
  border-left: 2px solid var(--success);
}

.tl-e-io-section.tl-e-io-error {
  border-left: 2px solid var(--danger);
  background: rgba(255, 99, 99, 0.06);
}

.tl-e-io-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-ter);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tl-e-io-pre {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-sec);
  padding: 6px 8px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* Side Artifact Item */

.side-art {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.side-art:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-hi);
}

.s-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.s-info {
  flex: 1;
  min-width: 0;
}

.s-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-meta {
  font-size: 10px;
  color: var(--text-ter);
  margin-top: 2px;
}

/* ── Skin Switcher Bar (Floating widget) ── */

.skin-bar {
  position: fixed;
  bottom: 20px;
  right: 24px;
  height: 44px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  border-radius: 22px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transition: background 0.4s;
}

.skin-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text-sec);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.skin-btn:hover {
  color: var(--text);
  background: rgba(128, 128, 128, 0.08);
}

/* ── Skin Theme Options in Settings ── */

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.theme-card {
  padding: 10px;
  border-radius: 10px;
  background: #f5f5f5;
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.theme-card:hover {
  background: #f0f0f0;
}

.theme-card.active {
  border-color: #292929;
  background: #fff;
}

.theme-preview {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.theme-preview .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.theme-name {
  font-size: 11px;
  font-weight: 500;
  color: #666;
}

.skin-btn,
.skin-dot {
  display: none;
}

/* cleanup old styles */

/* ── Responsive Window Resizing ── */

@media (max-width: 1280px) {
  .sidebar-right {
    width: 280px;
  } /* Shrink right sidebar gracefully before it snaps off */
  .sidebar-toggle-btn:not(.sidebar-collapsed) {
    right: calc(280px + 2px);
  }
}

@media (max-width: 1024px) {
  .sidebar-right {
    display: none;
  }
  .chat-messages {
    padding: 32px 24px;
    max-width: 100%;
  }
  .input-container {
    padding: 0 24px 32px;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .sidebar-left {
    display: none;
  }
  .nav-center {
    display: none;
  } /* model selector collapses on very small screens */
  .modal-overlay {
    padding: 0;
  }
  .modal-container {
    flex-direction: column;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .modal-sidebar {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    padding: 12px;
    gap: 8px;
  }
  .modal-tab {
    width: auto;
    min-height: 38px;
    white-space: nowrap;
    padding: 0 11px;
    margin: 0;
    flex: 0 0 auto;
  }
  .modal-tab::before {
    display: none;
  }
  .modal-tab-icon {
    width: 20px;
    height: 20px;
    border-radius: 7px;
  }
  .sec-title {
    font-size: 20px;
  }
  .topnav {
    padding: 0 16px 0 80px;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 12px;
  background:
    linear-gradient(135deg, var(--theme-bg), var(--theme-surface-overlay)),
    radial-gradient(
      circle at 8% 6%,
      var(--theme-surface-accent-soft),
      transparent 42%
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  -webkit-app-region: no-drag;
  --text: var(--theme-text);
  --text-sec: var(--theme-text-sec);
  --text-ter: var(--theme-text-ter);
  --bg-sub: var(--theme-bg-sub);
  --panel: var(--theme-panel);
  --border: var(--theme-border);
  --border-hi: var(--theme-border-hi);
  --input-bg: var(--theme-input-bg);
  --input-b: var(--theme-input-b);
  --ring: var(--theme-ring);
  --accent1: var(--theme-accent1);
  --danger: var(--theme-danger);
  --warn: var(--theme-warn);
  --success: var(--theme-success);
  --shadow-sm: var(--theme-shadow-sm);
  --shadow: var(--theme-shadow);
  --shadow-lg: var(--theme-shadow-lg);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: #f8f9fb;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.12);
}

.modal-sidebar {
  width: 278px;
  min-width: 278px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0.64)
    ),
    radial-gradient(circle at 12% 8%, rgba(59, 130, 246, 0.09), transparent 48%);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}

.modal-tab {
  min-height: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.modal-tab:hover {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  transform: translateX(1px);
}

.modal-tab.active {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
  box-shadow: inset 2px 0 0 #0f172a;
}

.modal-tab.active::before {
  display: none;
}

.modal-tab.subtle {
  opacity: 0.72;
}

.modal-tab-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: transparent;
  flex-shrink: 0;
  transition:
    color 0.15s,
    background 0.15s;
}

.modal-tab.active .modal-tab-icon {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.08);
}

.modal-tab-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-main {
  flex: 1;
  min-width: 0;
  background:
    linear-gradient(
      180deg,
      rgba(248, 250, 252, 0.88),
      rgba(244, 247, 250, 0.95)
    ),
    radial-gradient(
      circle at 92% 8%,
      rgba(148, 163, 184, 0.12),
      transparent 44%
    );
  overflow: hidden;
}

.modal-close {
  display: none;
}

.sec-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: #0f172a;
  letter-spacing: -0.02em;
  padding-right: 0;
}

.sec-subtitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 2px 0 4px;
  color: #0f172a;
  letter-spacing: -0.005em;
}

.sec-subtitle:first-child,
.sec-title + .sec-subtitle {
  margin-top: 0;
}

.modal-overlay .theme-card:hover {
  background: #f5f5f5;
  border-color: rgba(0, 0, 0, 0.12);
}

.modal-overlay .theme-card.active {
  background: var(--surface-accent-soft);
  border-color: var(--accent1);
}

.modal-tab:focus-visible {
  outline: 2px solid var(--accent1);
  outline-offset: 2px;
}

/* Form controls */

.form-group {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

.form-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
  line-height: 1.65;
}

.form-control {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  color: #0f172a;
  font-family: inherit;
  font-size: 13px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

/* Custom select arrow */

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239e9e9e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.form-control:focus {
  border-color: rgba(15, 23, 42, 0.35);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.form-control option {
  background: #ffffff;
  color: #171717;
}

/* Toggle Switch */

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: 0;
  border-bottom: none;
  gap: 24px;
}

.setting-info {
  flex: 1;
  min-width: 0;
  padding-right: 0;
}

.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.toggle.active {
  background: #0f172a;
}

.toggle.active::after {
  transform: translateX(18px);
}

.sidebar-left-inner,
.sidebar-right-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.metric-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-ter);
  margin-top: 4px;
}

.env-list {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 2;
}

.ws-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 4px currentColor;
}

.chat-empty-state {
  display: flex;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  color: var(--text-sec);
  padding: 48px 20px;
}

.chat-empty-orb {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(
    circle at 30% 30%,
    rgba(20, 184, 166, 0.14),
    rgba(20, 184, 166, 0.02) 65%
  );
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.chat-empty-orb-image {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.chat-empty-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}

.chat-empty-sub {
  max-width: 420px;
  font-size: 13px;
  color: var(--text-ter);
}

.chat-disclaimer {
  text-align: center;
  font-size: 11px;
  color: var(--text-ter);
  margin-top: 10px;
}

.message-inline-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--theme-text-sec);
  max-height: 40px;
  overflow: hidden;
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease,
    margin-top 0.25s ease;
  margin-top: 12px;
}

.message-inline-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.msg-stack:hover .message-inline-actions-right {
  opacity: 0.84;
}

/* Keep copy-success feedback visible even after mouse leaves */

.message-inline-actions-right:has(.is-copied) {
  opacity: 0.84;
}

.message-inline-action {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  padding: 0;
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.message-inline-action-copy {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 0;
  justify-content: center;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--theme-text-sec);
  box-shadow: none;
}

.message-inline-action-copy-icon {
  display: block;
  flex-shrink: 0;
  max-width: none !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.message-inline-action-copy-icon--default {
  width: 14px;
  height: 14px;
}

.message-inline-action-copy-icon--check {
  width: 12px;
  height: 12px;
}

.message-inline-action:hover {
  color: var(--theme-text);
}

.message-inline-action-copy:hover {
  background: transparent;
  color: var(--theme-text);
  opacity: 1;
}

.message-inline-action-copy.is-copied {
  background: transparent;
  color: var(--accent1);
  opacity: 1;
}

.tab-empty {
  font-size: 12px;
  color: var(--text-ter);
  line-height: 1.6;
}

.artifacts-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

.artifacts-list button:hover {
  background: var(--theme-surface-subtle, rgba(255, 255, 255, 0.03)) !important;
}

.artifacts-list button:last-child {
  border-bottom: none !important;
}

.terminal-log {
  white-space: pre-wrap;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  color: var(--text-sec);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
}

.phase-banner {
  margin: 10px auto 0;
  max-width: 860px;
  width: 100%;
  font-size: 12px;
  color: var(--text-sec);
  border: 1px dashed var(--border-hi);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
}

.tiny-action {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.tiny-action:hover {
  background: rgba(255, 255, 255, 0.12);
}

.session-search {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  color: #999;
  margin-bottom: 10px;
}

.session-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #292929;
  width: 100%;
  font-size: 12px;
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.session-item {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: transparent;
  color: #525252;
  padding: 6px 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.session-item:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.12);
}

.session-item:hover .cron-delete-btn {
  opacity: 1 !important;
}

.session-item.active {
  border-color: var(--accent1);
  color: var(--text);
  background: var(--surface-accent-soft);
  box-shadow: inset 2px 0 0 var(--accent1);
}

/* Neon Noir needs stronger contrast on OLED black */

[data-theme="dark"] .session-item.active {
  background: rgba(185, 124, 255, 0.14);
  border-color: rgba(122, 146, 255, 0.42);
  box-shadow:
    inset 2px 0 0 var(--accent1),
    0 0 10px rgba(122, 146, 255, 0.16);
}

[data-theme="dark"] .modal-tab.active {
  background: rgba(185, 124, 255, 0.14);
  border-color: rgba(122, 146, 255, 0.38);
}

[data-theme="dark"] .tab.active {
  color: var(--accent1);
  border-color: var(--accent1);
}

.session-main {
  background: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
}

.session-main > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.session-badge {
  font-size: 10px;
  opacity: 0.7;
}

.session-actions {
  display: flex;
  gap: 4px;
}

.session-actions button {
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #666;
  border-radius: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rename-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.rename-row input {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: transparent;
  color: #292929;
  padding: 6px 8px;
  font-size: 12px;
}

.rename-row button {
  border: none;
  border-radius: 8px;
  background: var(--accent1);
  color: #000;
  font-size: 12px;
  padding: 0 10px;
  cursor: pointer;
}

.command-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
}

.command-panel {
  width: min(640px, 90vw);
  border-radius: 12px;
  border: 1px solid var(--border-hi);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  padding: 10px;
}

.command-panel input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: transparent;
  color: var(--text);
  margin-bottom: 8px;
}

.command-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.command-list button {
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: pointer;
}

.command-list button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.command-list button.cmd-active {
  background: rgba(255, 255, 255, 0.08);
  outline: 1px solid rgba(255, 255, 255, 0.1);
}

.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 2px;
  color: var(--text);
  font-size: 13px;
}

.shortcut-row kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text-sec);
}

.global-auth-error {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1300;
  background: rgba(255, 99, 99, 0.15);
  border: 1px solid var(--danger);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
}

button.tab,
.modal-tab,
.theme-card,
.toggle {
  font-family: inherit;
}

button.tab {
  border: none;
  background: transparent;
}

/* ── IM Health Indicator (Top Nav) ── */

.im-health-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid transparent;
  color: #666;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.im-health-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.08);
}

.im-health-empty {
  border: 1px dashed rgba(0, 0, 0, 0.12);
}

.im-health-empty:hover {
  border-color: var(--accent1);
  color: var(--accent1);
}

.im-health-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
}

/* ── Sidebar Gateway Status (bottom) ── */

.sidebar-gateway-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  font-size: 11px;
  color: #737373;
}

.sidebar-gw-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-gw-label {
  font-weight: 500;
}

.sidebar-gw-ping {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  opacity: 0.6;
}

.sidebar-gateway-clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.sidebar-gateway-clickable:hover {
  background: rgba(0, 0, 0, 0.04);
}

.sidebar-gw-hint {
  font-size: 10px;
  opacity: 0.5;
  margin-left: auto;
}

/* ── IM Unread Badge ── */

.im-unread-badge {
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--accent1);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
  animation: slideUp 0.3s ease;
}

.im-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent1);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(94, 234, 212, 0.4);
}

/* ── IM Channel Group Header (Sidebar) ── */

.im-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 10px 4px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.15s;
}

.im-group-header:hover {
  color: var(--accent1);
}

.im-group-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  color: #999;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Quick Task Cards (Empty State) ── */

.quick-tasks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
  max-width: 600px;
  width: 100%;
}

.quick-task-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  color: var(--text-sec);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-size: 12px;
}

.quick-task-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-hi);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.quick-task-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent1);
}

.quick-task-info {
  flex: 1;
  min-width: 0;
}

.quick-task-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 2px;
}

.quick-task-desc {
  font-size: 10px;
  color: var(--text-ter);
  line-height: 1.4;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* ── KaTeX dark-theme overrides ── */

.katex {
  color: var(--text);
}

.katex .mord,
.katex .mbin,
.katex .mrel,
.katex .mopen,
.katex .mclose,
.katex .mpunct,
.katex .minner {
  color: inherit;
}

.katex-display {
  margin: 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.katex-display > .katex {
  text-align: left;
}

/* ===============================
   Figma Home Layout
   =============================== */

.autoclaw-home {
  position: fixed;
  inset: 0;
  /* Keep in sync with BrowserWindow trafficLightPosition in src/main/index.ts */
  --window-controls-top: var(--mac-window-controls-top);
  --window-controls-size: var(--mac-window-controls-size);
  --window-controls-align-y: var(--mac-window-controls-align-y);
  --sidebar-toggle-size: 32px;
  background: #f5f5f5;
  color: #1f1f1f;
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  border-radius: 16px;
  overflow: hidden;
}

.autoclaw-home .shell.autoclaw-shell {
  position: absolute;
  inset: 0;
  top: 0;
  display: flex;
  background: #f5f5f5;
  border-radius: 16px;
  overflow: hidden;
  min-height: 0;
}

.autoclaw-home .autoclaw-sidebar-left {
  width: 320px;
  border-right: 0;
  background: #f5f5f5;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
  min-height: 0;
  flex-shrink: 0;
  transition:
    width 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.2s ease;
}

.autoclaw-home .autoclaw-sidebar-left.collapsed {
  width: 0;
  border-right: 0;
  opacity: 0;
  pointer-events: none;
}

.autoclaw-home .autoclaw-newbie-view {
  flex: 1;
  position: relative;

  .autoclaw-newbie-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    top: 10px;
    right: 20px;
    position: absolute;
    border: none;
    transition: all 0.3s;
    background: none;
  }
  .autoclaw-newbie-close-btn:hover {
    cursor: pointer;
    background: rgba(239, 239, 239, 0.8);
    /* opacity: 0.8; */
  }

  .autoclaw-newbie-iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}

.autoclaw-home .autoclaw-skills-store-view {
  flex: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;

  .autoclaw-skills-card-grid {
    display: grid;
    align-items: start;
    column-gap: 12px;
    row-gap: 12px;
    justify-content: stretch;
    justify-items: stretch;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  }

  .autoclaw-skills-card-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    transition: background 0.2s ease;
  }

  .autoclaw-skills-card-item:hover {
    background: var(--theme-surface-subtle) !important;
  }

  .autoclaw-skills-store-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    top: 10px;
    right: 20px;
    position: absolute;
    border: none;
    transition: all 0.3s;
  }
  .autoclaw-skills-store-close-btn:hover {
    cursor: pointer;
    opacity: 0.8;
  }

  .autoclaw-skills-store-iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}

.autoclaw-skill-create-dropdown .ant-dropdown-menu {
  min-width: 160px !important;
  padding: 4px !important;
  border-radius: 14px !important;
  border: 1px solid var(--theme-border) !important;
  background: var(--theme-surface-elevated) !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

.autoclaw-skill-create-dropdown .ant-dropdown-menu-item {
  min-height: 36px !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  color: var(--theme-text) !important;
}

.autoclaw-skill-create-dropdown .ant-dropdown-menu-item:hover {
  background: var(--theme-surface-subtle) !important;
}

.autoclaw-skill-create-dropdown-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--theme-text);
}

.autoclaw-skill-create-dropdown-item-icon {
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.autoclaw-my-skill-tip-tooltip .ant-tooltip-inner {
  max-width: 235px !important;
  padding: 8px !important;
  border-radius: 10px !important;
  border: 1px solid var(--theme-border) !important;
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  text-align: center !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

.autoclaw-my-skill-tip-tooltip .ant-tooltip-arrow::before {
  background: var(--theme-surface-elevated) !important;
}

.autoclaw-home .autoclaw-chat-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #ffffff;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  box-shadow: none;
}

.autoclaw-home .autoclaw-chat-area::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px 0 0 16px;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 1px 0 0 #f0f0f0,
    inset 0 1px 0 #f0f0f0,
    inset 0 -1px 0 #f0f0f0;
}

.autoclaw-home .autoclaw-chat-area.sidebar-collapsed {
  border-radius: 16px;
  box-shadow: none;
}

.autoclaw-home .autoclaw-chat-area.sidebar-collapsed::before {
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #f0f0f0;
}

.autoclaw-home .autoclaw-content-region {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: hidden;
  border-radius: 0;
  margin-right: 0;
  transition: margin-right 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: none;
}

.autoclaw-home .autoclaw-content-region.sidebar-open {
  margin-right: 346px;
}

.autoclaw-home
  .autoclaw-sidebar-left.collapsed
  + .autoclaw-chat-area
  .autoclaw-content-region {
  border-radius: 0;
  box-shadow: none;
}

.autoclaw-main-header {
  height: 56px;
  padding: 0;
  display: block;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  -webkit-app-region: drag;
}

.autoclaw-main-header::before {
  display: none;
}

.autoclaw-sidebar-toggle-btn {
  position: absolute;
  left: 86px;
  top: calc(
    var(--window-controls-top) + (var(--window-controls-size) - 20px) / 2 +
      var(--window-controls-align-y) - ((var(--sidebar-toggle-size) - 20px) / 2)
  );
  width: var(--sidebar-toggle-size);
  height: var(--sidebar-toggle-size);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7a7a7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  -webkit-app-region: no-drag !important;
  z-index: 40;
}

.autoclaw-sidebar-toggle-btn .figma-inline-icon {
  width: 20px;
  height: 20px;
}

.autoclaw-sidebar-toggle-btn:hover {
  background: #ebebeb;
  color: #292929;
}

.autoclaw-main-title-wrap {
  position: absolute;
  left: 24px;
  top: calc(
    var(--window-controls-top) + (var(--window-controls-size) - 20px) / 2 +
      var(--window-controls-align-y) - 6px
  );
  right: 195px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  z-index: 1;
  pointer-events: none;
}

.autoclaw-main-title {
  min-width: 0;
  flex: 0 1 auto;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #292929;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autoclaw-main-title-wrap.sidebar-collapsed {
  left: 127px;
}

.autoclaw-main-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: #9e9e9e;
}

.autoclaw-main-actions {
  position: absolute;
  right: 21px;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: max-content;
  -webkit-app-region: no-drag;
  z-index: 1;
}

.autoclaw-model-switcher {
  position: relative;
}

.autoclaw-model-btn {
  height: 32px;
  border-radius: 999px;
  border: 1px solid #ebebeb;
  background: #ffffff;
  color: #292929;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.autoclaw-model-btn:hover {
  background: #f7f7f7;
}

.autoclaw-main-actions {
  .autoclaw-header-btn-brand {
    margin-left: -20px;
    position: relative;
  }

  .autoclaw-header-btn-brand::before {
    content: "";
    display: block;
    width: 1px;
    height: 13px;
    background: #fc5d1e;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 1200px) {
  .autoclaw-main-actions .autoclaw-header-btn-brand {
    display: none;
  }
}

.autoclaw-model-btn.model-switching {
  opacity: 0.7;
  cursor: wait;
}

.autoclaw-model-btn .model-icon {
  color: var(--accent1);
}

.autoclaw-model-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 280px;
  max-height: 380px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  z-index: 40;
}

.autoclaw-model-menu-item {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #292929;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
}

.autoclaw-model-menu-item:hover,
.autoclaw-model-menu-item.active {
  background: #f5f5f5;
}

.autoclaw-model-menu-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: #7a7a7a;
  font-size: 10px;
}

.autoclaw-model-menu-price {
  font-size: 10px;
  color: #9e9e9e;
}

.autoclaw-model-menu-price.free {
  color: #16a34a;
}

.autoclaw-header-btn {
  height: 28px;
  min-height: 28px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  color: #3f3f3f;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.14px;
  font-weight: 500;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: max-content;
  -webkit-app-region: no-drag;
}

.autoclaw-header-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.autoclaw-header-btn:hover {
  background: #f0f0f0;
  box-shadow: none;
  border-color: transparent;
  color: #292929;
  opacity: 1;
}

.autoclaw-header-btn.active {
  color: #292929;
  background: #f0f0f0;
  box-shadow: none;
  opacity: 1;
}

.autoclaw-header-btn:active {
  background: #e6e6e6;
  box-shadow: none;
}

.autoclaw-profile-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ebebeb;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.autoclaw-profile-btn:hover {
  background: #f5f5f5;
}

.autoclaw-profile-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #414141;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.autoclaw-connection-banner {
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid transparent;
}

.autoclaw-connection-banner.reconnecting {
  background: #f5f9ff;
  border-bottom-color: #e2ecff;
  color: #525252;
}

.autoclaw-connection-banner.offline {
  background: #fff8ee;
  border-bottom-color: #ffe2be;
  color: #b45309;
}

.autoclaw-connection-action {
  border: 1px solid #ebebeb;
  background: #ffffff;
  color: #525252;
  border-radius: 8px;
  padding: 2px 10px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.autoclaw-connection-action.ghost {
  background: #f5f5f5;
  color: #7a7a7a;
}

.autoclaw-home .autoclaw-sidebar-right {
  position: absolute;
  top: 56px;
  right: 0;
  bottom: 0;
  width: 346px !important;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 0;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.2s ease;
  z-index: 9;
}

.autoclaw-home .autoclaw-sidebar-right.collapsed {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.autoclaw-home .autoclaw-sidebar-right .tabs-header {
  display: none;
}

.autoclaw-home .autoclaw-sidebar-right .tab {
  color: #7a7a7a;
}

.autoclaw-home .autoclaw-sidebar-right .tab.active {
  color: #292929;
  border-bottom-color: var(--accent1);
}

.autoclaw-home .autoclaw-sidebar-right .tab-content {
  padding: 14px 16px;
}

.autoclaw-context-sidebar {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.autoclaw-context-sidebar-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 24px;
}

/* ─── Agent Panel Styles (Figma detail layout) ─── */

.agent-profile {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.agent-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.agent-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 185.714px;
  background: #9e9e9e;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #f0f0f0;
  position: relative;
}

.agent-profile-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.agent-profile-avatar-label {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.agent-profile-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.agent-profile-name {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #292929;
  line-height: 1.25;
}

.agent-profile-role {
  font-size: 12px;
  color: #7a7a7a;
  line-height: 1.4;
}

.agent-profile-refresh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 2px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: #f7f7f7;
  color: #7a7a7a;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.agent-profile-refresh:hover {
  background: #f0f0f0;
  color: #292929;
}

.agent-profile-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.agent-info-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agent-info-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.agent-info-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #292929;
  line-height: normal;
}

.agent-info-section-hint {
  font-size: 11px;
  font-weight: 300;
  color: #9e9e9e;
  line-height: normal;
  white-space: nowrap;
}

.agent-info-card {
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.agent-info-row {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.agent-info-row.last {
  border-bottom: 0;
}

.agent-info-label {
  width: 52px;
  flex-shrink: 0;
  font-size: 13px;
  line-height: normal;
  color: #7a7a7a;
}

.agent-info-value {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: #292929;
  font-size: 13px;
  line-height: normal;
}

.agent-info-value p {
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-info-value p + p {
  margin-top: 6px;
}

.agent-info-lessons {
  margin: 0;
  padding: 8px 12px 8px 30px;
  color: #292929;
  font-size: 13px;
  line-height: normal;
}

.agent-info-lessons li {
  line-height: 1.5;
}

.agent-info-lessons li + li {
  margin-top: 4px;
}

.agent-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #7a7a7a;
  cursor: pointer;
  margin-top: 10px;
}

.agent-refresh-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #525252;
  border-color: rgba(0, 0, 0, 0.15);
}

/* Left sidebar */

.figma-session-sidebar {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: #292929;
  overflow: hidden;
}

.figma-sidebar-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  display: block;
  flex-shrink: 0;
  background: var(--theme-surface-sunken);
  z-index: 3;
  -webkit-app-region: drag;
}

.figma-sidebar-drag-region {
  display: none;
}

/* Native macOS traffic lights are used instead of CSS dots */

.figma-sidebar-actions {
  display: inline-flex;
  align-items: center;
  -webkit-app-region: no-drag;
}

/* Toggle button now rendered at MainLayout level as .autoclaw-sidebar-toggle-btn */

.figma-top-collapse-btn {
  position: absolute;
  left: 14px;
  top: calc(
    var(--window-controls-top) + (var(--window-controls-size) - 20px) / 2 +
      var(--window-controls-align-y) - 6px
  );
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #525252;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-app-region: no-drag;
  z-index: 2;
}

[data-os="mac"] .figma-top-collapse-btn {
  left: 86px;
}

.figma-top-collapse-btn .figma-inline-icon {
  width: 20px;
  height: 20px;
}

.figma-top-collapse-btn:hover {
  background: #ebebeb;
  color: #292929;
}

.figma-top-add-btn {
  position: absolute;
  right: 8px;
  top: calc(
    var(--window-controls-top) + (var(--window-controls-size) - 20px) / 2 +
      var(--window-controls-align-y) - 6px
  );
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #525252;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-app-region: no-drag;
  z-index: 2;
}

.figma-top-add-btn .figma-inline-icon {
  width: 20px;
  height: 20px;
}

.figma-top-add-btn:hover {
  background: #ebebeb;
  color: #292929;
}

.figma-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #525252;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.figma-inline-icon {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.figma-icon-btn:hover {
  background: #ebebeb;
  border-color: #e0e0e0;
}

.figma-sidebar-tabs {
  position: absolute;
  top: 58px;
  left: 14px;
  right: 14px;
  height: 36px;
  padding: 3px;
  border-radius: 12px;
  background: #ebebeb;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  flex-shrink: 0;
  z-index: 4;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.figma-sidebar-search {
  display: none;
}

.figma-sidebar-tab {
  appearance: none;
  -webkit-appearance: none;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #7a7a7a;
  font-size: 12px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-app-region: no-drag;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.figma-sidebar-tab:hover {
  color: #525252;
  background: rgba(0, 0, 0, 0.03);
}

.figma-sidebar-tab.active {
  background: #ffffff;
  color: #292929;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.figma-sidebar-search {
  display: none;
}

.figma-sidebar-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #292929;
  font-size: 12px;
}

.figma-sidebar-agent-cta {
  position: absolute;
  top: 106px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: center;
  z-index: 4;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.figma-session-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 106px;
  /* padding: 0 0 68px; */
  padding: 0 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  position: relative;
  z-index: 1;
  -webkit-app-region: no-drag;
}

.figma-session-list.has-agent-cta {
  margin-top: 158px;
}

.figma-session-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.figma-session-list::-webkit-scrollbar-track {
  background: transparent;
}

.figma-session-list::-webkit-scrollbar-thumb {
  background: #e6e6e6;
  border-radius: 999px;
}

.figma-agent-group {
  width: min(292px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.figma-agent-group.has-active-session {
  border-color: color-mix(in srgb, var(--theme-accent1) 22%, #e5e5e5 78%);
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--theme-accent1) 6%, transparent 94%);
}

.figma-agent-group.is-collapsed {
  gap: 0;
}

.figma-agent-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
}

.figma-agent-group-identity {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.figma-agent-group-avatar {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ebebeb;
  border: 1px solid #e5e5e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: #9e9e9e;
}

.figma-agent-group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 9px;
}

.figma-im-group-avatar {
  background: transparent;
  border-color: transparent;
}

.figma-im-group-avatar img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  border-radius: 0;
}

.figma-heartbeat-icon {
  color: #e06f52;
  display: block;
}

.figma-agent-group.is-main .figma-agent-group-avatar {
  background: #ffffff;
  border-color: #e5e5e5;
}

.figma-agent-group-toggle {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.figma-agent-group-chevron {
  width: 16px;
  height: 16px;
  color: #b0b0b0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    transform 0.18s ease,
    color 0.15s ease;
}

.figma-agent-group.is-collapsed .figma-agent-group-chevron {
  transform: rotate(-90deg);
}

.figma-agent-group-toggle:hover .figma-agent-group-chevron {
  color: #7a7a7a;
}

.figma-agent-group-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.figma-agent-group-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.figma-agent-group-name {
  color: #292929;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.figma-agent-group-model {
  color: #9e9e9e;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.figma-agent-group-meta {
  color: #8a8a8a;
  font-size: 11px;
  line-height: 1.2;
}

.figma-agent-group-count {
  color: #b0b0b0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: 6px;
  background: transparent;
}

.figma-agent-group-add {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #a6a6a6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

.figma-agent-group-add:hover {
  color: var(--theme-accent1);
  opacity: 0.92;
}

.figma-agent-group-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
}

.figma-agent-group-empty-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #ebebeb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b0b0b0;
  margin-bottom: 2px;
}

.figma-agent-group-empty-title {
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.figma-agent-group-empty-hint {
  color: #b0b0b0;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
}

.figma-agent-group:hover {
  border-color: #d9d9d9;
}

.figma-agent-group-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.figma-agent-group-list .figma-session-row {
  width: 100%;
}

.figma-agent-group-list .figma-cron-job-row {
  width: 100%;
}

.figma-create-agent-btn {
  appearance: none;
  -webkit-appearance: none;
  width: min(292px, calc(100% - 28px));
  height: 40px;
  border: 1px dashed #d9d9d9;
  border-radius: 12px;
  background: transparent;
  color: #9e9e9e;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  -webkit-app-region: no-drag;
}

.figma-create-agent-btn:hover {
  background: color-mix(in srgb, var(--theme-accent1) 6%, transparent 94%);
  border-color: color-mix(in srgb, var(--theme-accent1) 28%, #d9d9d9 72%);
  color: var(--theme-accent1);
}

body[data-theme="dark"] .figma-create-agent-btn {
  border-color: rgba(141, 150, 187, 0.14);
  color: #6f789a;
}

body[data-theme="dark"] .figma-create-agent-btn:hover {
  background: rgba(185, 124, 255, 0.08);
  border-color: rgba(185, 124, 255, 0.24);
  color: #b97cff;
}

.figma-session-row {
  position: relative;
  width: min(292px, calc(100% - 28px));
  height: 56px;
  min-height: 56px;
  border-radius: 12px;
  background: transparent;
  color: #292929;
  display: flex;
  align-items: center;
  transition: background 0.15s ease;
  -webkit-app-region: no-drag;
}

.figma-session-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.figma-session-row.active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.figma-session-main {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  height: 56px;
  min-height: 56px;
  padding: 8px 12px 8px 10px;
  min-width: 0;
  box-shadow: none;
  -webkit-app-region: no-drag;
}

.figma-session-avatar {
  width: 36px;
  height: 36px;
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: none;
}

.figma-session-avatar-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px;
}

.figma-session-avatar-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  filter: none;
  transform: none;
}

.figma-session-avatar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  color: #fafafa;
  letter-spacing: 0.02em;
  text-shadow: none;
  pointer-events: none;
  z-index: 1;
}

.figma-session-avatar-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fc5d1e;
  color: #fafafa;
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  pointer-events: none;
  z-index: 2;
}

.msg .avatar.is-collapsed {
  visibility: hidden;
}

.figma-session-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.figma-session-title-row,
.figma-session-preview-row {
  display: flex;
  align-items: center;
}

.figma-session-title-row {
  gap: 0;
}

.figma-session-preview-row {
  gap: 4px;
}

.figma-session-title-row {
  min-height: 22px;
  justify-content: space-between;
}

.figma-session-preview-row {
  justify-content: space-between;
}

.figma-session-title {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.01em;
  color: #292929;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-session-time {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 11px;
  line-height: 18px;
  color: #b0b0b0;
  flex-shrink: 0;
  transition: none;
}

.figma-session-right-slot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 44px;
  max-width: 84px;
  height: 22px;
  margin-left: 8px;
  flex-shrink: 0;
}

.figma-session-preview {
  font-size: 11px;
  line-height: 16px;
  color: #b0b0b0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-session-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}

.figma-session-agent,
.figma-session-channel {
  font-size: 10px;
  color: #525252;
  padding: 1px 5px;
  border-radius: 4px;
  background: #f0f0f0;
}

.figma-session-agent {
  color: var(--theme-accent1);
  background: color-mix(in srgb, var(--theme-accent1) 10%, #f0f0f0 90%);
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-session-channel {
  text-transform: lowercase;
}

.figma-session-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #9e9e9e;
  flex: 0 0 16px;
  pointer-events: none;
}

.figma-session-actions-slot {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 44px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  -webkit-app-region: no-drag;
}

.figma-session-more-btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  margin: 0;
  background: transparent;
  color: #7a7a7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: none;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}

.figma-session-row:hover .figma-session-actions-slot,
.figma-session-row.menu-open .figma-session-actions-slot {
  opacity: 1;
  pointer-events: auto;
}

.figma-session-row:hover .figma-session-time,
.figma-session-row.menu-open .figma-session-time,
.figma-session-row:hover .figma-session-pin,
.figma-session-row.menu-open .figma-session-pin {
  opacity: 0;
  pointer-events: none;
}

.figma-session-more-btn:hover {
  background: #ebebeb;
  color: #525252;
}

.figma-sidebar-empty {
  width: min(292px, calc(100% - 28px));
  min-height: 88px;
  border: 1px dashed #e0e0e0;
  border-radius: 12px;
  color: #9e9e9e;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
}

.figma-sidebar-link {
  width: 100%;
  background: #f7f7f7;
  border-style: solid;
  cursor: pointer;
}

.figma-sidebar-im-cta {
  appearance: none;
  -webkit-appearance: none;
  width: min(292px, calc(100% - 28px));
  min-height: 56px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  margin: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f8f8;
  color: var(--theme-text);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.figma-sidebar-im-cta:hover {
  background: #ffffff;
  border-color: #d9d9d9;
}

.figma-sidebar-im-cta-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ebebeb;
  color: #9e9e9e;
  border: 1px solid #e5e5e5;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.figma-sidebar-im-cta:hover .figma-sidebar-im-cta-icon {
  background: color-mix(in srgb, var(--theme-accent1) 10%, #ebebeb 90%);
  border-color: color-mix(in srgb, var(--theme-accent1) 14%, #e5e5e5 86%);
  color: var(--theme-accent1);
}

.figma-sidebar-im-cta-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.figma-sidebar-im-cta-title {
  color: var(--theme-text);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.figma-sidebar-im-cta-hint {
  color: var(--theme-text-sec);
  font-size: 11px;
  line-height: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.figma-cron-job-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8f8f8;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.figma-cron-job-row:hover {
  background: #ffffff;
  border-color: #ececec;
}

.figma-cron-job-row.active {
  background: color-mix(in srgb, var(--theme-accent1) 7%, #ffffff 93%);
  border-color: color-mix(in srgb, var(--theme-accent1) 18%, #ececec 82%);
}

.figma-cron-job-row.disabled {
  opacity: 0.7;
}

.figma-cron-job-status {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #9e9e9e;
}

.figma-cron-job-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.figma-cron-job-head,
.figma-cron-job-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.figma-cron-job-name {
  min-width: 0;
  flex: 1;
  color: #292929;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-cron-job-interval {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 14px;
  color: #707070;
  padding: 2px 6px;
  border-radius: 999px;
  background: #efefef;
}

.figma-cron-job-payload {
  min-width: 0;
  color: #9e9e9e;
  font-size: 11px;
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-cron-job-delete {
  flex-shrink: 0;
  color: #c2c2c2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.figma-cron-job-delete:hover {
  color: #ff4d4f;
}

.figma-cron-wrap {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.figma-cron-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.figma-session-sidebar::before,
.figma-session-sidebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  pointer-events: none;
  z-index: 4;
}

.figma-session-sidebar::before {
  top: 100px;
  height: 6px;
  background: linear-gradient(
    180deg,
    #f5f5f5 0%,
    rgba(245, 245, 245, 0.24) 48%,
    rgba(245, 245, 245, 0) 100%
  );
}

.figma-session-sidebar::after {
  bottom: 52px;
  background: linear-gradient(
    180deg,
    rgba(245, 245, 245, 0) 0%,
    rgba(245, 245, 245, 0.7) 55%,
    #f5f5f5 100%
  );
}

.figma-sidebar-footer {
  /* position: absolute; */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* height: 52px; */
  height: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: #f5f5f5;
  border: 0;
  border-top: 1px solid #ebebeb;
  border-radius: 0;
  z-index: 3;
  -webkit-app-region: no-drag;
}

/* .figma-sidebar-footer.has-banner {
  height: auto;
}

.figma-session-list.has-banner {
  padding-bottom: 176px;
} */

.figma-sidebar-footer-bottom {
  position: relative;
  height: 52px;
  flex-shrink: 0;
}

.figma-sidebar-banner {
  width: 292px;
  height: 88px;
  margin: 8px auto;
  border-radius: 10px;
  /* border: 1px solid var(--border-g-8, #e6e6e6); */
  box-shadow:
    0px 4px 12px 0px #00000005,
    0px 6px 4px -4px #00000005,
    0px 4px 2px -4px #00000005;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.figma-sidebar-banner .slick-dots {
  li {
    width: 4px;
    height: 4px;
    background: #e6e6e6;

    button {
      opacity: 0;
    }
  }

  li::after {
    opacity: 0;
  }

  li.slick-active {
    width: 12px;
    background: #bdbdbd;
  }
}

.figma-sidebar-banner a {
  display: block;
  width: 292px;
  height: 88px;
}

.figma-sidebar-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-footer-entries {
  width: 292px;
  list-style: none;
  margin: 4px auto 6px;

  .sidebar-footer-entry {
    height: 44px;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s;

    .sidebar-footer-entry-badge {
      font-size: 12px;
      font-weight: 500;
      color: var(--theme-accent1);
      padding: 4px 8px;
      margin-left: auto;
      border-radius: 8px;
      background: rgb(from var(--theme-accent1) r g b / 0.1);
    }
  }
  .sidebar-footer-entry:hover {
    background: var(--theme-code-block-copy-hover);
  }
  .sidebar-footer-entry.active {
    background: var(--theme-border-hi);

    .sidebar-footer-entry-badge {
      background: none;
    }
  }
}

.figma-user-chip {
  position: absolute;
  left: 18px;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  width: auto;
  max-width: calc(100% - 176px);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.15s ease;
  -webkit-app-region: no-drag;
}

.figma-user-chip:hover,
.figma-user-chip.active {
  background: transparent;
  opacity: 0.86;
}

.figma-user-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.figma-user-avatar.is-art {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.figma-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  -webkit-user-drag: none;
  user-select: none;
}

.figma-user-avatar-label {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.figma-user-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--theme-text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-footer-actions {
  position: absolute;
  right: 18px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.figma-footer-feedback-btn,
.figma-footer-settings-btn {
  width: auto;
  height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #7a7a7a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.figma-footer-feedback-btn:hover,
.figma-footer-settings-btn:hover {
  background: #ebebeb;
  color: #525252;
}

.figma-footer-feedback-label {
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.figma-footer-settings-btn {
  color: #525252;
}

.figma-footer-settings-btn .figma-inline-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.figma-footer-settings-label {
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Chat flow */

.autoclaw-home .chat-messages {
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  width: 100%;
  padding: 26px 24px 14px 22px;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.autoclaw-home .msg {
  gap: 8px;
  animation: none;
}

.autoclaw-home .msg.user {
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 10px;
}

.autoclaw-home .msg.agent {
  gap: 6px;
}

.autoclaw-home
  .chat-messages.external-im-flow
  .msg.agent
  + .msg.agent.assistant-collapsed-chrome {
  margin-top: -10px;
}

.autoclaw-home
  .chat-messages.external-im-flow
  .msg.agent.assistant-collapsed-chrome
  .message-inline-actions {
  margin-top: 4px;
}

.autoclaw-home .msg .avatar {
  width: 32px;
  height: 32px;
  border-radius: 114.286px;
  background: transparent;
  color: transparent;
  font-size: 0;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  margin-top: 0;
  overflow: hidden;
}

.autoclaw-home .msg .avatar .avatar-icon {
  display: block;
  filter: none;
  transform: none;
}

.autoclaw-home .msg.user .avatar {
  display: inline-flex;
  background: transparent;
}

.autoclaw-home .msg-content {
  max-width: 100%;
}

.autoclaw-home .msg.agent .msg-content {
  max-width: min(768px, calc(100% - 40px));
  --home-agent-content-width: min(636px, 100%);
}

.autoclaw-home .msg.user .msg-content {
  max-width: min(560px, 72%);
  flex: 0 0 auto;
}

.autoclaw-home .msg-meta {
  display: none;
}

.autoclaw-home .msg-timestamp {
  margin: 12px 0 14px;
}

.autoclaw-home .msg-assistant-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #292929;
  margin: 0 0 8px;
}

.autoclaw-home .msg-body {
  margin-top: 0 !important;
}

.autoclaw-home .msg.user .msg-body {
  width: fit-content;
  border-radius: 20px;
  border: none;
  background: #e07147;
  color: #fafafa;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 21px;
  box-shadow: none;
  word-break: break-word;
}

.autoclaw-home .msg.agent .msg-body {
  width: fit-content;
  max-width: 100%;
  border-radius: 24px;
  border: 0.5px solid #f0f0f0;
  background: #f5f5f5;
  color: #292929;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 22px;
}

.autoclaw-home .msg.agent .msg-body.msg-body-with-tools {
  width: var(--home-agent-content-width);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-color: #f0f0f0;
}

.autoclaw-home .msg.agent .msg-standalone-tool-calls {
  width: var(--home-agent-content-width);
  max-width: 100%;
}

.autoclaw-home
  .msg.agent
  .msg-body.msg-body-with-tools
  .markdown-body
  > :first-child {
  margin-top: 0;
}

.autoclaw-home
  .msg.agent
  .msg-body.msg-body-with-tools
  .markdown-body
  > :last-child {
  margin-bottom: 0;
}

.autoclaw-home .tcg-group {
  margin: 0;
  width: 100%;
  border-radius: 16px;
  border: 1px solid #fdfdfd;
  background: #fdfdfd;
  overflow: hidden;
}

.markdown-body .msg-pointless {
  .msg-pointless-core {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .msg-body-btn {
      border: none;
      padding: 7px 16px;
      border-radius: 12px;
      margin-left: 16px;
      cursor: pointer;
      white-space: nowrap;
      color: #fafafa;
      background: #292929;
      transition: all 0.2s;
    }
    .msg-body-btn:hover {
      opacity: 0.8;
    }
  }

  .msg-promotion {
    flex-basic: 100%;
    margin: 12px auto 0;

    img {
      width: 750px;
      max-width: 100%;
      border: none;
      margin: 0 auto;
    }
  }
}

.autoclaw-home .tcg-group-header {
  min-height: 46px;
  padding: 10px 16px;
  background: #fdfdfd;
  border-bottom: 1px solid transparent;
}

.autoclaw-home .tcg-group.open .tcg-group-header {
  border-bottom-color: #f0f0f0;
}

.autoclaw-home .tcg-header-icon {
  color: #7a7a7a;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.autoclaw-home .tcg-header-left {
  gap: 10px;
}

.autoclaw-home .tcg-header-title {
  color: #292929;
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
}

.autoclaw-home .tcg-count-badge {
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 18px;
  background: #f0f0f0;
  color: #292929;
  font-size: 11px;
  padding: 0 8px;
  text-align: center;
}

.autoclaw-home .tcg-header-right {
  color: #666666;
}

.autoclaw-home .tcg-row {
  min-height: 46px;
  padding: 10px 16px;
  gap: 10px;
  border-bottom-color: #f0f0f0;
  background: #fdfdfd;
}

.autoclaw-home .tcg-row:hover {
  background: #fdfdfd;
}

.autoclaw-home .tcg-row.open,
.autoclaw-home .tcg-row:focus,
.autoclaw-home .tcg-row:focus-visible,
.autoclaw-home .tcg-row:active,
.autoclaw-home .tcg-group-header:focus,
.autoclaw-home .tcg-group-header:focus-visible,
.autoclaw-home .tcg-group-header:active {
  background: #fdfdfd;
}

.autoclaw-home .tcg-row-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7a7a7a;
}

.autoclaw-home .tcg-summary {
  color: #292929;
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
}

.autoclaw-home .tcg-row-chevron {
  color: #666666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.autoclaw-home .tcg-detail {
  border-bottom-color: #f0f0f0;
  background: #e6e6e6;
  padding: 10px 16px;
}

.autoclaw-home .tcg-detail-pre {
  color: #292929;
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
  font-size: 14px;
  line-height: 22px;
  word-break: break-word;
}

.autoclaw-home .markdown-body {
  /* Override dark-skin tokens so markdown keeps readable contrast on light surfaces */
  --text: #1f1f1f;
  --text-sec: #374151;
  --text-ter: #6b7280;
  --border: #e5e7eb;
  --border-hi: #d1d5db;
}

.autoclaw-home .markdown-body,
.autoclaw-home .markdown-body p,
.autoclaw-home .markdown-body li {
  color: #1f1f1f;
  font-size: 14px;
  line-height: 22px;
}

.autoclaw-home .msg.user .markdown-body,
.autoclaw-home .msg.user .markdown-body p,
.autoclaw-home .msg.user .markdown-body li {
  color: inherit;
}

.autoclaw-home .markdown-body ul,
.autoclaw-home .markdown-body ol {
  padding-left: 21px;
}

.autoclaw-home .markdown-body li::marker {
  color: #6b7280;
}

.autoclaw-home .markdown-body pre:not(.code-block-pre) {
  background: #ededed;
  border: 1px solid #e0e0e0;
}

.autoclaw-home .markdown-body h1,
.autoclaw-home .markdown-body h2,
.autoclaw-home .markdown-body h3,
.autoclaw-home .markdown-body h4,
.autoclaw-home .markdown-body h5,
.autoclaw-home .markdown-body h6,
.autoclaw-home .markdown-body strong,
.autoclaw-home .markdown-body b {
  color: #1f1f1f;
}

.autoclaw-home .markdown-body em,
.autoclaw-home .markdown-body i {
  color: #3f3f3f;
}

.autoclaw-home .markdown-body a {
  color: #1d4ed8;
  border-bottom-color: rgba(29, 78, 216, 0.35);
  opacity: 1;
}

.autoclaw-home .markdown-body a:hover {
  border-bottom-color: #1d4ed8;
  opacity: 1;
}

.autoclaw-home .markdown-body code:not(pre code) {
  color: #be185d;
  background: #f0f2f5;
  border: 1px solid #e2e8f0;
}

.autoclaw-home .markdown-body th {
  color: #111827;
  background: #f3f4f6;
  border-bottom-color: #d1d5db;
  border-right-color: #e5e7eb;
}

.autoclaw-home .markdown-body td {
  color: #374151;
  border-bottom-color: #e5e7eb;
  border-right-color: #f1f5f9;
}

.autoclaw-home .markdown-body tbody tr:nth-child(even) {
  background: #fafafa;
}

.autoclaw-home .markdown-body tbody tr:hover {
  background: #f3f4f6;
}

.autoclaw-home .markdown-body blockquote {
  color: #334155;
  background: #f8fafc;
  border-left-color: var(--info);
}

.autoclaw-home .markdown-body hr {
  background: linear-gradient(to right, transparent, #d1d5db, transparent);
}

.autoclaw-home .msg-file-bubbles {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 0;
}

.autoclaw-home .msg-file-bubble {
  position: relative;
  width: 280px;
  min-height: 64px;
  max-width: 100%;
  border: 0.5px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-surface-subtle);
  color: var(--theme-text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9.5px 12px 9.5px 11.5px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.autoclaw-home .msg-file-bubble:hover:not(:disabled) {
  background: var(--theme-panel-hover);
  border-color: var(--theme-border-hi);
  box-shadow: var(--theme-shadow-sm);
}

.autoclaw-home .msg-file-bubble:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.autoclaw-home .msg-file-bubble-icon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.autoclaw-home .msg-file-bubble-icon-img {
  width: 100%;
  height: 100%;
  display: block;
}

.autoclaw-home .msg-file-bubble-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.autoclaw-home .msg-file-bubble-name {
  font-size: 16px;
  line-height: 24px;
  color: var(--theme-text);
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autoclaw-home .msg-file-bubble-ext {
  font-size: 12px;
  line-height: 20px;
  color: var(--theme-text-sec);
  text-transform: lowercase;
}

.autoclaw-home .msg-file-bubble.writing {
  padding-bottom: 16px;
  border-color: var(--theme-border-hi);
  background: var(--theme-panel-hover);
}

.autoclaw-home .msg-file-bubble.writing .msg-file-bubble-icon {
  background: transparent;
}

.autoclaw-home .msg-file-bubble.writing .msg-file-bubble-ext {
  color: var(--theme-text-sec);
}

.autoclaw-home .msg-file-bubble-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--theme-surface-info-soft);
}

.autoclaw-home .msg-file-bubble-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--theme-accent2),
    var(--theme-accent1)
  );
  animation: file-write-progress 1.1s ease-in-out infinite;
}

.autoclaw-home .msg-user-structured {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
}

.autoclaw-home .msg-user-text-bubble {
  width: fit-content;
  max-width: 100%;
}

.autoclaw-home .msg-user-attachment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 247, 241, 0.94);
  border: 1px solid rgba(224, 113, 71, 0.18);
  box-shadow: 0 6px 18px rgba(224, 113, 71, 0.08);
  width: min(100%, 520px);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: #6f341f;
}

.autoclaw-home .msg-user-attachment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.autoclaw-home .msg-user-attachment-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.autoclaw-home .msg-user-attachment-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #c55d34;
}

.autoclaw-home .msg-user-attachment-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.autoclaw-home .msg-user-attachment-name {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autoclaw-home .msg-user-attachment-meta {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(111, 52, 31, 0.66);
  letter-spacing: 0.02em;
}

.autoclaw-home .msg-user-attachment-toggle {
  border: 1px solid rgba(224, 113, 71, 0.18);
  background: rgba(255, 255, 255, 0.82);
  color: #8c4123;
  border-radius: 999px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.autoclaw-home .msg-user-attachment-toggle:hover {
  background: #ffffff;
  border-color: rgba(224, 113, 71, 0.28);
}

.autoclaw-home .msg-user-attachment-content {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
  color: #5b2c18;
}

@keyframes file-write-progress {
  0% {
    transform: translateX(-140%);
  }
  100% {
    transform: translateX(320%);
  }
}

.autoclaw-home .phase-banner {
  max-width: none;
  border: 1px solid #ffd5b8;
  background: #fff7f1;
  color: #9a3412;
}

.autoclaw-home .chat-empty-state {
  color: #525252;
  justify-content: center;
  align-items: center;
  /* padding: 256px 0 0; */
  gap: 32px;
  overflow-x: hidden;
}

.autoclaw-home .chat-empty-hero {
  width: 660px;
  max-width: min(660px, calc(100vw - 96px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.autoclaw-home .chat-empty-purchase {
  height: 32px;
  border-radius: 40px;
  padding: 6px 12px;
  border: none;
  background: #fc5d1e1a;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;

  > strong {
    color: #fc5d1e;
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    font-weight: 400;
  }

  > strong:only-child {
    margin-left: 0;
  }

  > strong::before {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background: #fa9972;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
  }

  > strong:only-child::before {
    display: none;
  }

  > strong:hover {
    opacity: 0.8;
  }
}

.autoclaw-home .chat-empty-logo {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.autoclaw-home .chat-empty-logo-image {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: contain;
  max-width: none;
  flex: 0 0 auto;
}

.autoclaw-home .chat-empty-title {
  margin: 0;
  color: #292929;
  font-family:
    "PingFang SC",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0.02em;
  width: 263px;
}

.autoclaw-home .chat-empty-sub {
  margin: 0;
  color: #9e9e9e;
  max-width: none;
  width: 263px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.autoclaw-home .chat-empty-cards {
  margin-top: 0;
  width: 600px;
  max-width: min(600px, calc(100vw - 80px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.autoclaw-home .chat-empty-card {
  width: 100%;
  min-height: 84px;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 18px 12px;
  color: #292929;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.autoclaw-home .chat-empty-card:hover {
  background: #fafafa;
  border-color: #ebebeb;
}

.autoclaw-home .chat-empty-card-visual {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.autoclaw-home .chat-empty-card-visual-quick-setup {
  width: 54.857px;
  height: 58px;
}

.autoclaw-home .chat-empty-card-image {
  max-width: none;
  display: block;
}

.autoclaw-home .chat-empty-card-visual-feishu {
  width: 54.857px;
  height: 48px;
}

.autoclaw-home .chat-empty-card-visual-im-grid {
  width: 54px;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.autoclaw-home .chat-empty-im-cell {
  width: 24px;
  height: 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
}

.autoclaw-home .chat-empty-im-cell-odd-tail {
  grid-column: 1 / -1;
  justify-self: center;
}

.autoclaw-home .chat-empty-im-cell-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.autoclaw-home .chat-empty-card-image-quick-setup {
  width: 54.857px;
  height: 54.857px;
  object-fit: cover;
  transform: translateY(-2.57px);
}

.autoclaw-home .chat-empty-card-image-feishu {
  position: absolute;
  left: 50%;
  top: calc(50% + 0.86px);
  width: 73.714px;
  height: 73.714px;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.autoclaw-home .chat-empty-card-content {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.autoclaw-home .chat-empty-card-title {
  color: #292929;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.autoclaw-home .chat-empty-card-desc {
  color: #9e9e9e;
  font-size: 12px;
  line-height: 18px;
}

.autoclaw-home .input-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 24px 14px;
  background: transparent;
}

.autoclaw-home .input-box {
  border: 0.5px solid #ebebeb;
  border-radius: 24px;
  background: #ffffff;
  width: min(1032px, 100%);
  min-height: 100px;
  height: auto;
  margin: 0 auto;
  align-items: stretch;
  gap: 0;
  padding: 16px 10px 10px;
  box-sizing: border-box;
  box-shadow:
    0 4px 16px -4px rgba(0, 0, 0, 0.01),
    0 6px 40px 0 rgba(0, 0, 0, 0.02),
    0 8px 60px 0 rgba(0, 0, 0, 0.03);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.autoclaw-home .input-box:focus-within {
  border-color: #ebebeb;
  box-shadow:
    0 4px 16px -4px rgba(0, 0, 0, 0.01),
    0 6px 40px 0 rgba(0, 0, 0, 0.02),
    0 8px 60px 0 rgba(0, 0, 0, 0.03);
}

.autoclaw-home .input-box textarea {
  color: #292929;
  font-size: 15px;
  line-height: 24px;
  min-height: 24px;
  max-height: 168px;
  padding: 0;
}

.autoclaw-home .input-main {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 74px;
  height: auto;
  flex-direction: column;
  gap: 18px;
}

.autoclaw-home .input-textarea-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 16px;
}

.autoclaw-home .input-box textarea::placeholder {
  color: #9e9e9e;
}

.autoclaw-home .input-tools {
  margin-bottom: 0;
  gap: 12px;
  align-items: center;
  padding: 0 10px;
  min-height: 32px;
}

.autoclaw-home .input-tools-left {
  gap: 12px;
}

.autoclaw-home .tool-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: #525252;
}

.autoclaw-home .tool-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

.autoclaw-home .tool-btn:hover {
  background: #f5f5f5;
  border-color: #f0f0f0;
  color: #292929;
  transform: none;
}

.autoclaw-home .input-model-indicator {
  position: relative;
  height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  color: #292929;
}

.autoclaw-home .input-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  color: #292929;
  padding: 0;
  border-radius: 0;
}

.autoclaw-home .input-evolution-btn {
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 100px;
  color: #7a7a7a;
  font-size: 14px;
  line-height: 22px;
  gap: 6px;
}

.autoclaw-home .input-model-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 8px;
  z-index: 100;
}

.autoclaw-home .input-model-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 20px;
  color: #1f2937;
  text-align: left;
  gap: 8px;
  box-sizing: border-box;
}

.autoclaw-home .input-model-picker-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.autoclaw-home .input-model-picker-item.active {
  background: var(--surface-accent-soft);
  color: var(--accent1);
  font-weight: 600;
}

.autoclaw-home .input-model-picker-label {
  display: flex;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 3px;
}

.info-icon-in-tooltip {
  display: flex;
  color: rgb(189, 189, 189);
}

.info-icon-tooltip {
  max-width: 300px;
  pointer-events: none;
}

.autoclaw-home .input-evolution-btn:hover,
.autoclaw-home .input-evolution-btn.open,
.autoclaw-home .input-evolution-btn.open:hover {
  background: transparent;
}

.autoclaw-home .input-evolution-picker {
  bottom: calc(100% + 8px);
  left: 8px;
  width: 123px;
  min-width: 123px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  border: 0.5px solid #f0f0f0;
  border-radius: 14px;
  box-shadow:
    0 4px 16px -4px rgba(0, 0, 0, 0.01),
    0 8px 40px 0 rgba(0, 0, 0, 0.02),
    0 16px 60px 0 rgba(0, 0, 0, 0.04);
  padding: 8px;
}

.autoclaw-home .input-evolution-picker-item {
  justify-content: flex-start;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 20px;
  color: #1f2937;
  box-sizing: border-box;
}

.autoclaw-home .input-evolution-picker-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.autoclaw-home .input-evolution-picker-item.active {
  background: var(--surface-accent-soft);
  color: var(--accent1);
  font-weight: 600;
}

.autoclaw-home .input-model-picker-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.autoclaw-home .input-model-picker-badge {
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  color: #9ca3af;
  white-space: nowrap;
  padding: 3px 5px;
  margin-right: -5px;
  border-radius: 5px;
}

.autoclaw-home .input-model-picker-badge.free {
  color: var(--success);
  background: #36b26133;
}

.autoclaw-home .send-btn:not(.send-btn-stop) {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  margin-bottom: 0;
  margin-left: auto;
  background: #bdbdbd;
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.autoclaw-home .send-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.autoclaw-home .send-btn:not(.send-btn-stop):hover:not(:disabled) {
  transform: none;
  box-shadow: none;
}

.autoclaw-home .send-btn:not(:disabled):not(.send-btn-stop) {
  background-image:
    radial-gradient(
      135% 135% at 70% -70%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(90deg, #292929 0%, #292929 100%);
  background-color: #292929;
  color: #ffffff;
}

.autoclaw-home
  .input-box:has(textarea:placeholder-shown)
  .send-btn:not(.send-btn-stop) {
  background: #bdbdbd;
  color: #fafafa;
}

.autoclaw-home .chat-disclaimer {
  margin-top: 8px;
  font-size: 10px;
  line-height: 10px;
  color: #bdbdbd;
  text-align: center;
}

/* User popover */

.user-popover .ant-popover-inner {
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.user-popover .ant-popover-arrow:before,
.user-popover .ant-popover-arrow:after {
  background: #ffffff;
}

.user-popover-content {
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-popover-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.user-popover-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #414141;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-popover-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-popover-avatar-label {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.user-popover-info {
  min-width: 0;
}

.user-popover-name {
  font-size: 13px;
  color: #292929;
  font-weight: 600;
}

.user-popover-phone {
  font-size: 11px;
  color: #7a7a7a;
}

.user-popover-divider {
  height: 1px;
  background: #f0f0f0;
}

.user-popover-item {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #525252;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
}

.user-popover-item:hover {
  background: #f5f5f5;
  color: #292929;
}

.user-popover-logout {
  color: #dc2626;
}

.user-popover-logout:hover {
  background: #fef2f2;
  color: #dc2626;
}

.avatar-picker-copy {
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--theme-text-sec);
}

.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.avatar-picker-option {
  position: relative;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-surface-base);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.avatar-picker-option:hover {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-border-hi);
  transform: translateY(-1px);
}

.avatar-picker-option.active {
  border-color: var(--theme-accent1);
  background: var(--theme-surface-accent-soft);
}

.avatar-picker-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.avatar-picker-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-picker-avatar-label {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.avatar-picker-option-label {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--theme-text);
}

.avatar-picker-check {
  flex-shrink: 0;
  color: var(--theme-accent1);
}

/* ─── Avatar Generate Section (inline in modal, above presets) ─── */

.avatar-generate-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.avatar-section-divider {
  height: 1px;
  background: var(--theme-border);
  margin: 14px 0;
}

/* ─── Avatar Generate Controls ─── */

.avatar-generate-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-generate-preset-tag {
  padding: 5px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-surface-base);
  font-size: 12px;
  color: var(--theme-text-sec);
  cursor: pointer;
  transition: all 0.15s ease;
}

.avatar-generate-preset-tag:hover:not(:disabled) {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-accent1);
  color: var(--theme-accent1);
}

.avatar-generate-preset-tag:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.avatar-generate-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.avatar-generate-input-row .ant-input {
  flex: 1;
}

.avatar-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: var(--theme-accent1);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.avatar-generate-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.avatar-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.avatar-generate-spinner {
  animation: avatar-spin 1s linear infinite;
}

@keyframes avatar-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.avatar-generate-preview {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.avatar-generate-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-text-sec);
  font-size: 13px;
}

.avatar-generate-result {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-generate-result-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.avatar-generate-use-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: var(--theme-accent1);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.avatar-generate-use-btn:hover {
  opacity: 0.85;
}

@media (max-width: 1200px) {
  .autoclaw-home .autoclaw-sidebar-right {
    display: none;
  }

  .autoclaw-home .autoclaw-content-region.sidebar-open {
    margin-right: 0;
  }

  .autoclaw-header-btn span {
    display: none;
  }
}

@media (max-width: 980px) {
  .autoclaw-home .autoclaw-sidebar-left {
    width: 244px;
  }

  .autoclaw-main-title {
    max-width: 100%;
  }
}

/* @media (max-width: 860px) { */

@media (max-width: 960px) {
  .autoclaw-home .autoclaw-sidebar-left {
    display: none;
  }

  .autoclaw-main-header {
    padding: 0;
  }

  .autoclaw-main-title {
    left: 14px;
    right: 126px;
  }

  .autoclaw-main-actions {
    right: 14px;
  }

  .autoclaw-home .chat-messages,
  .autoclaw-home .input-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .autoclaw-home .chat-empty-state {
    padding-top: 26px;
  }

  .autoclaw-home .chat-empty-title {
    font-size: 30px;
  }

  .autoclaw-home .chat-empty-sub {
    font-size: 16px;
  }

  .autoclaw-home .chat-empty-cards {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* ── Global Skin And Theme Overrides ── */

html,
body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

::selection,
::-moz-selection,
input::selection,
textarea::selection {
  background: var(--theme-surface-accent-soft);
  color: inherit;
}

*:hover::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover) !important;
}

.sidebar-left *:hover::-webkit-scrollbar-thumb,
.autoclaw-sidebar-left *:hover::-webkit-scrollbar-thumb,
.modal-overlay *:hover::-webkit-scrollbar-thumb,
.figma-session-sidebar *:hover::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
}

.sidebar-left ::-webkit-scrollbar-thumb:hover,
.autoclaw-sidebar-left ::-webkit-scrollbar-thumb:hover,
.modal-overlay ::-webkit-scrollbar-thumb:hover,
.figma-session-sidebar ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-scrollbar-thumb-hover) !important;
}

.topnav,
.autoclaw-main-header {
  background: var(--theme-chrome-bg);
  border-bottom: 1px solid var(--theme-chrome-border);
  color: var(--theme-text);
}

.nav-brand,
.ws-title,
.metric-val,
.autoclaw-main-title,
.figma-user-name,
.agent-profile-name,
.agent-info-section-title,
.agent-info-value,
.agent-info-lessons {
  color: var(--theme-text);
}

.autoclaw-main-typing {
  color: var(--theme-text-muted);
}

.model-selector,
.autoclaw-model-btn,
.autoclaw-profile-btn,
.autoclaw-connection-action,
.gateway-status,
.user-popover .ant-popover-inner {
  background: var(--theme-surface-elevated);
  border-color: var(--theme-border);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow-sm);
}

.model-selector:hover,
.autoclaw-model-btn:hover,
.autoclaw-profile-btn:hover,
.autoclaw-connection-action:hover,
.gateway-status:hover {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-border-hi);
  color: var(--theme-text);
}

.model-menu,
.autoclaw-model-menu,
.autoclaw-home .input-model-picker,
.user-popover .ant-popover-inner {
  background: var(--theme-surface-elevated);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow-lg);
}

.model-menu-item,
.autoclaw-model-menu-item,
.autoclaw-home .input-model-picker-item,
.user-popover-item {
  color: var(--theme-text);
}

.model-menu-item:hover,
.model-menu-item.active,
.autoclaw-model-menu-item:hover,
.autoclaw-model-menu-item.active,
.autoclaw-home .input-model-picker-item:hover,
.autoclaw-home .input-model-picker-item.active,
.user-popover-item:hover {
  background: var(--theme-surface-subtle);
  color: var(--theme-text);
}

.autoclaw-home .input-model-picker-item.active {
  background: var(--theme-surface-accent-soft);
  color: var(--theme-accent1);
}

.autoclaw-model-menu-meta,
.autoclaw-model-menu-price,
.ping-text,
.user-popover-phone,
.user-popover-divider,
.metric-label,
.agent-profile-role,
.agent-info-label,
.agent-info-section-hint,
.figma-session-time,
.figma-session-preview,
.autoclaw-home .chat-disclaimer {
  color: var(--theme-text-ter);
}

.autoclaw-model-menu-price.free,
.status-dot,
.autoclaw-connection-banner.reconnecting .autoclaw-connection-action {
  color: var(--theme-success);
}

.sidebar-left,
.autoclaw-home .autoclaw-sidebar-left,
.figma-session-sidebar,
.settings .settings-nav,
.modal-sidebar {
  background: var(--theme-surface-sunken);
  border-color: var(--theme-chrome-border);
}

.sidebar-section,
.tabs-header,
.settings .settings-nav,
.figma-sidebar-tabs,
.modal-sidebar,
.autoclaw-home .autoclaw-chat-area {
  background: var(--theme-surface-base);
}

.autoclaw-home .autoclaw-content-region,
.autoclaw-home .autoclaw-sidebar-right {
  background: transparent;
}

.sidebar-right,
.autoclaw-home .autoclaw-sidebar-right {
  border-left-color: var(--theme-chrome-border);
}

.sidebar-toggle-btn,
.autoclaw-sidebar-toggle-btn,
.figma-top-collapse-btn,
.figma-top-add-btn,
.figma-icon-btn,
.figma-footer-settings-btn,
.figma-footer-feedback-btn,
.autoclaw-header-btn,
.autoclaw-connection-action.ghost,
.agent-refresh-btn {
  color: var(--theme-text-sec);
}

.autoclaw-sidebar-toggle-btn,
.figma-top-collapse-btn,
.figma-top-add-btn,
.figma-icon-btn,
.figma-footer-settings-btn {
  background: transparent;
  border-color: transparent;
}

.autoclaw-profile-avatar,
.user-popover-avatar,
.agent-profile-avatar {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-accent1) 78%, var(--theme-surface-base)),
    color-mix(in srgb, var(--theme-accent1) 68%, var(--theme-accent2) 32%)
  );
  color: var(--theme-text-inverse);
  border-color: var(--theme-border);
}

.autoclaw-connection-banner.reconnecting {
  background: var(--theme-surface-info-soft);
  border-bottom-color: var(--theme-border);
  color: var(--theme-text-sec);
}

.autoclaw-connection-banner.offline {
  background: var(--theme-surface-warn-soft);
  border-bottom-color: var(--theme-border);
  color: var(--theme-warn);
}

.autoclaw-home .msg.user .avatar {
  background: #ffffff;
}

.autoclaw-home .msg-assistant-name,
.autoclaw-home .tcg-header-title,
.autoclaw-home .tcg-summary,
.autoclaw-home .markdown-body,
.autoclaw-home .markdown-body p,
.autoclaw-home .markdown-body li,
.autoclaw-home .markdown-body strong,
.autoclaw-home .markdown-body b,
.autoclaw-home .markdown-body h1,
.autoclaw-home .markdown-body h2,
.autoclaw-home .markdown-body h3,
.autoclaw-home .markdown-body h4,
.autoclaw-home .markdown-body h5,
.autoclaw-home .markdown-body h6 {
  color: var(--theme-text);
}

.autoclaw-home .msg.user .msg-body {
  background: #e07147;
  color: #fafafa;
  border-radius: 20px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 24px;
  border: none;
  box-shadow: none;
}

.autoclaw-home .msg.user .msg-body .markdown-body,
.autoclaw-home .msg.user .msg-body .markdown-body p,
.autoclaw-home .msg.user .msg-body .markdown-body li,
.autoclaw-home .msg.user .msg-body .markdown-body strong,
.autoclaw-home .msg.user .msg-body .markdown-body b,
.autoclaw-home .msg.user .msg-body .markdown-body h1,
.autoclaw-home .msg.user .msg-body .markdown-body h2,
.autoclaw-home .msg.user .msg-body .markdown-body h3,
.autoclaw-home .msg.user .msg-body .markdown-body h4,
.autoclaw-home .msg.user .msg-body .markdown-body h5,
.autoclaw-home .msg.user .msg-body .markdown-body h6,
.autoclaw-home .msg.user .msg-body .markdown-body a,
.autoclaw-home .msg.user .msg-body > div {
  color: inherit;
}

.autoclaw-home .msg.agent .msg-body,
.autoclaw-home .tcg-group,
.autoclaw-home .tcg-group-header,
.autoclaw-home .tcg-row {
  background: var(--theme-surface-base);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

.autoclaw-home .msg.agent .msg-body {
  background: var(--theme-surface-sunken);
  border-color: var(--theme-border);
}

.autoclaw-home .tcg-group.open .tcg-group-header,
.autoclaw-home .tcg-row,
.autoclaw-home .tcg-detail {
  border-color: var(--theme-border);
}

.autoclaw-home .tcg-count-badge,
.figma-session-channel {
  background: var(--theme-surface-subtle);
  color: var(--theme-text-sec);
}

.autoclaw-home .tcg-detail {
  background: var(--theme-surface-subtle);
}

.autoclaw-home .tcg-header-icon,
.autoclaw-home .tcg-row-icon,
.autoclaw-home .tcg-row-chevron,
.autoclaw-home .tcg-header-right,
.figma-footer-settings-btn,
.figma-footer-feedback-btn,
.figma-session-more-btn,
.figma-session-time,
.figma-session-preview {
  color: var(--theme-text-ter);
}

.autoclaw-home .markdown-body {
  --text: var(--theme-text);
  --text-sec: var(--theme-text-sec);
  --text-ter: var(--theme-text-ter);
  --border: var(--theme-border);
  --border-hi: var(--theme-border-hi);
}

.autoclaw-home .markdown-body pre:not(.code-block-pre),
.autoclaw-home .markdown-body code:not(pre code),
.autoclaw-home .tcg-detail-pre {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.autoclaw-home .markdown-body a {
  color: var(--theme-accent1);
  border-bottom-color: rgba(0, 0, 0, 0);
}

.autoclaw-home .markdown-body a:hover {
  border-bottom-color: var(--theme-accent1);
}

.autoclaw-home .markdown-body th {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.autoclaw-home .markdown-body td {
  border-color: var(--theme-border);
  color: var(--theme-text-sec);
}

.autoclaw-home .markdown-body tbody tr:nth-child(even),
.autoclaw-home .markdown-body tbody tr:hover {
  background: var(--theme-surface-subtle);
}

.autoclaw-home .markdown-body blockquote {
  color: var(--theme-text-sec);
  background: var(--theme-surface-subtle);
  border-left-color: var(--theme-accent1);
}

.autoclaw-home .markdown-body hr {
  background: linear-gradient(
    to right,
    transparent,
    var(--theme-border-hi),
    transparent
  );
}

.autoclaw-home .send-btn:not(.send-btn-stop) {
  background: var(--theme-surface-sunken);
  border-color: var(--theme-border);
  color: var(--theme-text-inverse);
}

.autoclaw-home .send-btn:not(:disabled):not(.send-btn-stop) {
  background: linear-gradient(
    135deg,
    var(--theme-accent1),
    var(--theme-accent2)
  );
  background-image: linear-gradient(
    135deg,
    var(--theme-accent1),
    var(--theme-accent2)
  );
  color: var(--theme-text-inverse);
}

.autoclaw-home
  .input-box:has(textarea:placeholder-shown)
  .send-btn:not(.send-btn-stop) {
  background: var(--theme-surface-sunken);
  color: var(--theme-text-placeholder);
}

.figma-session-sidebar,
.figma-session-sidebar::after,
.figma-sidebar-footer {
  background: var(--theme-surface-sunken);
}

.figma-session-sidebar::after {
  background: var(--theme-surface-sunken);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 20%,
    rgba(0, 0, 0, 0.16) 34%,
    rgba(0, 0, 0, 0.42) 50%,
    rgba(0, 0, 0, 0.78) 66%,
    #000 80%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 20%,
    rgba(0, 0, 0, 0.16) 34%,
    rgba(0, 0, 0, 0.42) 50%,
    rgba(0, 0, 0, 0.78) 66%,
    #000 80%,
    #000 100%
  );
}

.figma-sidebar-footer {
  background: color-mix(in srgb, var(--theme-surface-sunken) 88%, transparent);
  backdrop-filter: blur(18px) saturate(106%);
  -webkit-backdrop-filter: blur(18px) saturate(106%);
}

.figma-sidebar-tabs {
  background: var(--theme-surface-subtle);
}

.figma-sidebar-tab,
.figma-session-row,
.figma-session-title,
.figma-user-name,
.figma-session-sidebar {
  color: var(--theme-text);
}

.figma-sidebar-tab.active,
.figma-session-row.active {
  background: var(--theme-surface-accent-soft);
  color: var(--theme-text);
}

.figma-session-row:hover,
.figma-sidebar-tab:hover,
.figma-session-more-btn:hover {
  background: var(--theme-surface-subtle);
}

.figma-session-pin {
  color: var(--theme-text-ter);
}

.agent-info-card,
.figma-sidebar-empty {
  box-shadow: var(--theme-shadow-sm);
}

/* ── Exact Figma Home Shell (Ember) ── */

body[data-theme="light"][data-skin="ember"] .autoclaw-main-header {
  background: #ffffff;
  border-bottom: 0;
  color: #292929;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-main-title {
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-main-typing {
  color: #9e9e9e;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-header-btn {
  color: #525252;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-header-btn:hover,
body[data-theme="light"][data-skin="ember"] .autoclaw-header-btn.active {
  background: #f0f0f0;
  border-color: transparent;
  color: #292929;
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-header-btn:active {
  background: #e6e6e6;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-header-btn-brand {
  color: #fc5d1e;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-header-btn-brand:hover,
body[data-theme="light"][data-skin="ember"] .autoclaw-header-btn-brand.active {
  color: #fc5d1e;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-sidebar-toggle-btn,
body[data-theme="light"][data-skin="ember"] .figma-top-collapse-btn,
body[data-theme="light"][data-skin="ember"] .figma-top-add-btn,
body[data-theme="light"][data-skin="ember"] .figma-footer-settings-btn,
body[data-theme="light"][data-skin="ember"] .figma-footer-feedback-btn {
  background: transparent;
  border-color: transparent;
  color: #525252;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-sidebar-toggle-btn:hover,
body[data-theme="light"][data-skin="ember"] .figma-top-collapse-btn:hover,
body[data-theme="light"][data-skin="ember"] .figma-top-add-btn:hover,
body[data-theme="light"][data-skin="ember"] .figma-session-more-btn:hover {
  background: #ebebeb;
  border-color: transparent;
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .figma-footer-settings-btn:hover,
body[data-theme="light"][data-skin="ember"] .figma-footer-feedback-btn:hover {
  background: var(--Fill--G9, #ebebeb);
  border-color: transparent;
  color: #292929;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .autoclaw-sidebar-left {
  background: #f5f5f5;
  border-right: 0;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-home .autoclaw-chat-area {
  background: #ffffff;
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .autoclaw-chat-area::before,
body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .autoclaw-chat-area.sidebar-collapsed::before {
  box-shadow:
    inset 1px 0 0 #f0f0f0,
    inset 0 1px 0 #f0f0f0,
    inset 0 -1px 0 #f0f0f0;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .autoclaw-chat-area.sidebar-collapsed::before {
  box-shadow: inset 0 0 0 1px #f0f0f0;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .autoclaw-content-region {
  background: transparent;
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .autoclaw-sidebar-left.collapsed
  + .autoclaw-chat-area
  .autoclaw-content-region {
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-home {
  background: #f5f5f5;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .shell.autoclaw-shell {
  background: #f5f5f5;
}

body[data-theme="light"][data-skin="ember"] .figma-session-sidebar,
body[data-theme="light"][data-skin="ember"] .figma-sidebar-topbar,
body[data-theme="light"][data-skin="ember"] .figma-sidebar-footer {
  background: #f5f5f5;
  border-color: #f0f0f0;
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .figma-session-sidebar::before {
  background: linear-gradient(
    180deg,
    #f5f5f5 0%,
    rgba(245, 245, 245, 0.24) 48%,
    rgba(245, 245, 245, 0) 100%
  );
}

body[data-theme="light"][data-skin="ember"] .figma-session-sidebar::after {
  background: linear-gradient(
    180deg,
    rgba(245, 245, 245, 0) 0%,
    rgba(245, 245, 245, 0.7) 55%,
    #f5f5f5 100%
  );
  -webkit-mask-image: none;
  mask-image: none;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-footer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-tabs {
  background: #ebebeb;
  border-color: transparent;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-tab {
  color: #7a7a7a;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-tab:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #525252;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-tab.active {
  background: #ffffff;
  color: #292929;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body[data-theme="light"][data-skin="ember"] .autoclaw-home .msg.user .msg-body {
  background: #e07147;
  color: #fafafa;
  border: none;
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"] .figma-session-row {
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .figma-session-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

body[data-theme="light"][data-skin="ember"] .figma-session-row.active {
  background: #ffffff;
  color: #292929;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

body[data-theme="light"][data-skin="ember"] .figma-agent-group-name {
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .figma-agent-group-meta {
  color: #8a8a8a;
}

body[data-theme="light"][data-skin="ember"] .figma-session-title {
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .figma-session-time,
body[data-theme="light"][data-skin="ember"] .figma-session-preview {
  color: #7a7a7a;
}

body[data-theme="light"][data-skin="ember"] .figma-session-more-btn {
  color: #7a7a7a;
}

body[data-theme="light"][data-skin="ember"] .figma-user-avatar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"] .figma-user-name {
  color: #1f1f1f;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-im-cta {
  background: #f8f8f8;
  border-color: #e5e5e5;
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-im-cta:hover {
  background: #ffffff;
  border-color: #d9d9d9;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-im-cta-icon {
  background: #ebebeb;
  border-color: #e5e5e5;
  color: #9e9e9e;
}

body[data-theme="light"][data-skin="ember"]
  .figma-sidebar-im-cta:hover
  .figma-sidebar-im-cta-icon {
  background: color-mix(in srgb, #e07147 10%, #ebebeb 90%);
  border-color: color-mix(in srgb, #e07147 14%, #e5e5e5 86%);
  color: #e07147;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-im-cta-title {
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .figma-sidebar-im-cta-hint {
  color: #7a7a7a;
}

body[data-theme="light"][data-skin="ember"] .agent-profile-name,
body[data-theme="light"][data-skin="ember"] .agent-info-section-title,
body[data-theme="light"][data-skin="ember"] .agent-info-value,
body[data-theme="light"][data-skin="ember"] .agent-info-lessons {
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .agent-profile-role,
body[data-theme="light"][data-skin="ember"] .agent-info-label,
body[data-theme="light"][data-skin="ember"] .agent-info-section-hint {
  color: #7a7a7a;
}

body[data-theme="light"][data-skin="ember"] .agent-profile-avatar {
  border-color: #f0f0f0;
  background: #9e9e9e;
}

body[data-theme="light"][data-skin="ember"] .agent-profile-refresh {
  background: #f7f7f7;
  border-color: #f0f0f0;
  color: #7a7a7a;
}

body[data-theme="light"][data-skin="ember"] .agent-profile-refresh:hover {
  background: #f0f0f0;
  color: #292929;
}

body[data-theme="light"][data-skin="ember"] .agent-info-card {
  background: #ffffff;
  border-color: #f0f0f0;
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"] .agent-info-row {
  border-bottom-color: #f0f0f0;
}

body[data-theme="light"][data-skin="ember"]
  .figma-session-list::-webkit-scrollbar-thumb,
body[data-theme="light"][data-skin="ember"]
  .figma-session-sidebar
  *:hover::-webkit-scrollbar-thumb,
body[data-theme="light"][data-skin="ember"]
  .figma-session-sidebar
  ::-webkit-scrollbar-thumb:hover {
  background: #e6e6e6 !important;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-home .chat-empty-card {
  background: #ffffff;
  border-color: #f0f0f0;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .chat-empty-card:hover {
  background: #fafafa;
  border-color: #ebebeb;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-home .input-box {
  background: #ffffff;
  border-color: #ebebeb;
  box-shadow:
    0 4px 16px -4px rgba(0, 0, 0, 0.01),
    0 6px 40px 0 rgba(0, 0, 0, 0.02),
    0 8px 60px 0 rgba(0, 0, 0, 0.03);
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .input-box:focus-within {
  border-color: #ebebeb;
  box-shadow:
    0 4px 16px -4px rgba(0, 0, 0, 0.01),
    0 6px 40px 0 rgba(0, 0, 0, 0.02),
    0 8px 60px 0 rgba(0, 0, 0, 0.03);
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .input-box
  textarea::placeholder {
  color: #9e9e9e;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .send-btn:not(.send-btn-stop) {
  background: #bdbdbd;
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .send-btn:not(:disabled):not(.send-btn-stop) {
  background-image:
    radial-gradient(
      135% 135% at 70% -70%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(90deg, #292929 0%, #292929 100%);
  background-color: #292929;
  color: #ffffff;
}

body[data-theme="light"][data-skin="ember"]
  .autoclaw-home
  .input-box:has(textarea:placeholder-shown)
  .send-btn:not(.send-btn-stop) {
  background: #bdbdbd;
  color: #fafafa;
}

body[data-theme="light"][data-skin="ember"] .autoclaw-home .chat-disclaimer {
  color: #bdbdbd;
}

/* ── Exact Home Shell (Neon Noir) ── */

body[data-theme="dark"] .autoclaw-main-header {
  background: #0b0c12;
  border-bottom: 0;
  color: #f5f7ff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-theme="dark"] .autoclaw-main-title {
  color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-main-typing {
  color: #8d96bb;
}

body[data-theme="dark"] .autoclaw-header-btn {
  color: #c6cce6;
}

body[data-theme="dark"] .autoclaw-header-btn:hover,
body[data-theme="dark"] .autoclaw-header-btn.active {
  background: #171a25;
  border-color: transparent;
  color: #f5f7ff;
  box-shadow: none;
}

body[data-theme="dark"] .autoclaw-header-btn:active {
  background: #1d2230;
}

body[data-theme="dark"] .autoclaw-header-btn-brand {
  color: #fc5d1e;
}

body[data-theme="dark"] .autoclaw-header-btn-brand:hover,
body[data-theme="dark"] .autoclaw-header-btn-brand.active {
  color: #fc5d1e;
}

body[data-theme="dark"] .autoclaw-sidebar-toggle-btn,
body[data-theme="dark"] .figma-top-collapse-btn,
body[data-theme="dark"] .figma-top-add-btn,
body[data-theme="dark"] .figma-footer-settings-btn,
body[data-theme="dark"] .figma-footer-feedback-btn {
  background: transparent;
  border-color: rgba(141, 150, 187, 0.1);
  color: #8d96bb;
}

body[data-theme="dark"] .autoclaw-sidebar-toggle-btn:hover,
body[data-theme="dark"] .figma-top-collapse-btn:hover,
body[data-theme="dark"] .figma-top-add-btn:hover,
body[data-theme="dark"] .figma-session-more-btn:hover {
  background: #171a25;
  border-color: transparent;
  color: #f5f7ff;
}

body[data-theme="dark"] .figma-footer-settings-btn:hover,
body[data-theme="dark"] .figma-footer-feedback-btn:hover {
  background: #171a25;
  border-color: rgba(141, 150, 187, 0.14);
  color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-home .autoclaw-sidebar-left {
  background: #050505;
  border-right: 0;
}

body[data-theme="dark"] .autoclaw-home .autoclaw-chat-area {
  background: #0b0c12;
  box-shadow: none;
}

body[data-theme="dark"] .autoclaw-home .autoclaw-chat-area::before,
body[data-theme="dark"]
  .autoclaw-home
  .autoclaw-chat-area.sidebar-collapsed::before {
  box-shadow:
    inset 1px 0 0 rgba(141, 162, 255, 0.14),
    inset 0 1px 0 rgba(141, 162, 255, 0.14),
    inset 0 -1px 0 rgba(141, 162, 255, 0.14);
}

body[data-theme="dark"]
  .autoclaw-home
  .autoclaw-chat-area.sidebar-collapsed::before {
  box-shadow: inset 0 0 0 1px rgba(141, 162, 255, 0.14);
}

body[data-theme="dark"] .autoclaw-home .autoclaw-content-region {
  background: transparent;
  box-shadow: none;
}

body[data-theme="dark"]
  .autoclaw-home
  .autoclaw-sidebar-left.collapsed
  + .autoclaw-chat-area
  .autoclaw-content-region {
  box-shadow: none;
}

body[data-theme="dark"] .autoclaw-home {
  background: #050505;
}

body[data-theme="dark"] .autoclaw-home .shell.autoclaw-shell {
  background: #050505;
}

body[data-theme="dark"] .figma-session-sidebar,
body[data-theme="dark"] .figma-sidebar-topbar,
body[data-theme="dark"] .figma-sidebar-footer {
  background: #050505;
  border-color: rgba(141, 162, 255, 0.08);
  color: #f5f7ff;
}

body[data-theme="dark"] .figma-session-sidebar::before {
  background: linear-gradient(
    180deg,
    #050505 0%,
    rgba(5, 5, 5, 0.24) 48%,
    rgba(5, 5, 5, 0) 100%
  );
}

body[data-theme="dark"] .figma-session-sidebar::after {
  background: linear-gradient(
    180deg,
    rgba(5, 5, 5, 0) 0%,
    rgba(5, 5, 5, 0.76) 55%,
    #050505 100%
  );
  -webkit-mask-image: none;
  mask-image: none;
}

body[data-theme="dark"] .figma-sidebar-footer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top-color: rgba(141, 150, 187, 0.1);
}

body[data-theme="dark"] .figma-sidebar-tabs {
  background: #0b0c12;
  border-color: transparent;
}

body[data-theme="dark"] .figma-sidebar-tab {
  color: #8d96bb;
}

body[data-theme="dark"] .figma-sidebar-tab:hover {
  background: rgba(141, 150, 187, 0.08);
  color: #c6cce6;
}

body[data-theme="dark"] .figma-sidebar-tab.active {
  background: #171a25;
  color: #f5f7ff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .figma-session-row {
  color: #f5f7ff;
}

body[data-theme="dark"] .figma-agent-group {
  background: #0b0c12;
  border-color: rgba(141, 150, 187, 0.1);
  box-shadow: none;
}

body[data-theme="dark"] .figma-agent-group.has-active-session {
  border-color: rgba(185, 124, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(185, 124, 255, 0.06);
}

body[data-theme="dark"] .figma-agent-group-avatar {
  background: #171a25;
  border-color: rgba(141, 150, 187, 0.12);
  color: #6f789a;
}

body[data-theme="dark"] .figma-agent-group.is-main .figma-agent-group-avatar {
  background: #11131d;
  border-color: rgba(141, 150, 187, 0.12);
}

body[data-theme="dark"] .figma-agent-group-name {
  color: #f5f7ff;
}

body[data-theme="dark"] .figma-agent-group-model {
  color: #6f789a;
}

body[data-theme="dark"] .figma-agent-group-meta,
body[data-theme="dark"] .figma-agent-group-chevron,
body[data-theme="dark"] .figma-agent-group-empty-hint {
  color: #6f789a;
}

body[data-theme="dark"] .figma-agent-group-add {
  background: #11131d;
  border-color: rgba(141, 150, 187, 0.12);
  color: #8d96bb;
}

body[data-theme="dark"] .figma-agent-group-count {
  color: #6f789a;
}

body[data-theme="dark"] .figma-agent-group-empty-title {
  color: #c6cce6;
}

body[data-theme="dark"] .figma-agent-group-empty-icon {
  background: #171a25;
  color: #6f789a;
}

body[data-theme="dark"] .figma-agent-group-empty {
  background: rgba(255, 255, 255, 0.02);
}

body[data-theme="dark"] .figma-agent-group-add:hover {
  background: rgba(185, 124, 255, 0.12);
  border-color: rgba(185, 124, 255, 0.2);
  color: #d9c2ff;
}

body[data-theme="dark"]
  .figma-agent-group-toggle:hover
  .figma-agent-group-chevron {
  color: #c6cce6;
}

body[data-theme="dark"] .figma-agent-group:hover {
  border-color: rgba(141, 150, 187, 0.16);
}

body[data-theme="dark"] .figma-session-row:hover {
  background: rgba(141, 150, 187, 0.06);
}

body[data-theme="dark"] .figma-session-row.active {
  background: rgba(185, 124, 255, 0.1);
  color: #f5f7ff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

body[data-theme="dark"] .figma-session-row.is-dragging {
  opacity: 0.7;
  background: rgba(99, 102, 241, 0.2);
  outline-color: #818cf8;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .figma-session-title,
body[data-theme="dark"] .figma-user-name,
body[data-theme="dark"] .figma-sidebar-im-cta-title {
  color: #f5f7ff;
}

body[data-theme="dark"] .figma-session-time,
body[data-theme="dark"] .figma-session-preview,
body[data-theme="dark"] .figma-sidebar-im-cta-hint,
body[data-theme="dark"] .figma-session-more-btn {
  color: #8d96bb;
}

body[data-theme="dark"] .figma-user-avatar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .figma-sidebar-im-cta {
  background: #0b0c12;
  border-color: rgba(141, 150, 187, 0.1);
  color: #f5f7ff;
}

body[data-theme="dark"] .figma-sidebar-im-cta:hover {
  background: #11131d;
  border-color: rgba(141, 150, 187, 0.16);
}

body[data-theme="dark"] .figma-sidebar-im-cta-icon {
  background: #171a25;
  border-color: rgba(141, 150, 187, 0.12);
  color: #8d96bb;
}

body[data-theme="dark"] .figma-sidebar-im-cta:hover .figma-sidebar-im-cta-icon {
  background: #1d2230;
  border-color: rgba(185, 124, 255, 0.2);
  color: #b97cff;
}

body[data-theme="dark"] .agent-profile-name,
body[data-theme="dark"] .agent-info-section-title,
body[data-theme="dark"] .agent-info-value,
body[data-theme="dark"] .agent-info-lessons {
  color: #f5f7ff;
}

body[data-theme="dark"] .agent-profile-role,
body[data-theme="dark"] .agent-info-label,
body[data-theme="dark"] .agent-info-section-hint {
  color: #8d96bb;
}

body[data-theme="dark"] .agent-profile-avatar {
  border-color: rgba(141, 162, 255, 0.12);
  background: #11131d;
}

body[data-theme="dark"] .agent-profile-refresh {
  background: #11131d;
  border-color: rgba(141, 162, 255, 0.12);
  color: #c6cce6;
}

body[data-theme="dark"] .agent-profile-refresh:hover {
  background: #171a25;
  color: #f5f7ff;
}

body[data-theme="dark"] .agent-info-card {
  background: #0b0c12;
  border-color: rgba(141, 162, 255, 0.12);
  box-shadow: none;
}

body[data-theme="dark"] .agent-info-row {
  border-bottom-color: rgba(141, 162, 255, 0.12);
}

body[data-theme="dark"] .figma-session-list::-webkit-scrollbar-thumb,
body[data-theme="dark"] .figma-session-sidebar *:hover::-webkit-scrollbar-thumb,
body[data-theme="dark"] .figma-session-sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(141, 162, 255, 0.16) !important;
}

body[data-theme="dark"] .autoclaw-home .chat-empty-card {
  background: #11131d;
  border-color: rgba(141, 162, 255, 0.1);
  color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-home .chat-empty-card:hover {
  background: #171a25;
  border-color: rgba(141, 162, 255, 0.18);
}

body[data-theme="dark"] .autoclaw-home .chat-empty-logo-image {
  filter: brightness(0) saturate(100%) invert(100%);
}

body[data-theme="dark"] .autoclaw-home .chat-empty-title,
body[data-theme="dark"] .autoclaw-home .chat-empty-card-title {
  color: #f5f7ff !important;
}

body[data-theme="dark"] .autoclaw-home .chat-empty-sub,
body[data-theme="dark"] .autoclaw-home .chat-empty-card-desc {
  color: #c6cce6 !important;
}

body[data-theme="dark"] .autoclaw-home .chat-empty-card-content {
  color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-home .chat-empty-card-content > * {
  -webkit-text-fill-color: currentColor;
}

body[data-theme="dark"] .autoclaw-home .tcg-group,
body[data-theme="dark"] .autoclaw-home .tcg-group-header,
body[data-theme="dark"] .autoclaw-home .tcg-row {
  background: #11131d;
  border-color: rgba(141, 162, 255, 0.1);
}

body[data-theme="dark"] .autoclaw-home .msg.agent .msg-body {
  background: #0b0c12;
  border-color: rgba(141, 162, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"]
  .autoclaw-home
  .msg.agent
  .msg-body.msg-body-with-tools {
  border-color: rgba(141, 162, 255, 0.12);
}

body[data-theme="dark"] .autoclaw-home .tcg-group.open .tcg-group-header,
body[data-theme="dark"] .autoclaw-home .tcg-row:hover,
body[data-theme="dark"] .autoclaw-home .tcg-row.open,
body[data-theme="dark"] .autoclaw-home .tcg-row:focus,
body[data-theme="dark"] .autoclaw-home .tcg-row:focus-visible,
body[data-theme="dark"] .autoclaw-home .tcg-row:active,
body[data-theme="dark"] .autoclaw-home .tcg-group-header:focus,
body[data-theme="dark"] .autoclaw-home .tcg-group-header:focus-visible,
body[data-theme="dark"] .autoclaw-home .tcg-group-header:active,
body[data-theme="dark"] .autoclaw-home .tcg-detail {
  background: #171a25;
  border-color: rgba(141, 162, 255, 0.14);
}

body[data-theme="dark"] .autoclaw-home .input-box {
  background: #11131d;
  border-color: rgba(141, 162, 255, 0.12);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(95, 141, 255, 0.04);
}

body[data-theme="dark"] .autoclaw-home .input-box:focus-within {
  border-color: rgba(123, 150, 255, 0.42);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(95, 141, 255, 0.14);
}

body[data-theme="dark"] .autoclaw-home .input-box textarea {
  color: #f5f7ff;
  caret-color: #f5f7ff;
  -webkit-text-fill-color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-home .input-box textarea::placeholder {
  color: #aab3d4;
}

body[data-theme="dark"] .autoclaw-home .send-btn:not(.send-btn-stop) {
  background: #1a1d29;
  color: #646d91;
  border-color: rgba(141, 162, 255, 0.12);
  box-shadow: none;
}

body[data-theme="dark"]
  .autoclaw-home
  .send-btn:not(:disabled):not(.send-btn-stop) {
  background-image:
    radial-gradient(
      140% 140% at 70% -60%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(90deg, #b97cff 0%, #5f8dff 100%);
  background-color: #11131d;
  color: #050505;
}

body[data-theme="dark"]
  .autoclaw-home
  .input-box:has(textarea:placeholder-shown)
  .send-btn:not(.send-btn-stop) {
  background: #1a1d29;
  color: #8d96bb;
}

body[data-theme="dark"] .autoclaw-home .chat-disclaimer {
  color: #8d96bb;
}

body[data-theme="dark"] .autoclaw-home .tool-btn {
  color: #aab3d4;
}

body[data-theme="dark"] .autoclaw-home .tool-btn:hover {
  background: #171a25;
  border-color: rgba(141, 162, 255, 0.16);
  color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-home .tool-btn-icon,
body[data-theme="dark"] .autoclaw-home .input-model-chevron,
body[data-theme="dark"] .autoclaw-home .input-evolution-chevron,
body[data-theme="dark"] .autoclaw-home .input-evolution-icon {
  filter: brightness(0) saturate(100%) invert(82%) sepia(10%) saturate(519%)
    hue-rotate(191deg) brightness(94%) contrast(90%);
  opacity: 0.92;
}

body[data-theme="dark"] .autoclaw-home .input-model-indicator,
body[data-theme="dark"] .autoclaw-home .input-model-btn,
body[data-theme="dark"] .autoclaw-home .input-evolution-btn {
  color: #c6cce6;
}

body[data-theme="dark"] .autoclaw-home .input-model-btn:hover {
  color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-home .input-evolution-btn:hover,
body[data-theme="dark"] .autoclaw-home .input-evolution-btn.open,
body[data-theme="dark"] .autoclaw-home .input-evolution-btn.open:hover {
  background: transparent;
  color: #c6cce6;
}

body[data-theme="dark"] .autoclaw-home .input-model-picker {
  background: #11131d;
  border-color: rgba(141, 162, 255, 0.16);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] .autoclaw-home .input-evolution-picker {
  background: #11131d;
  border-color: rgba(141, 162, 255, 0.16);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}

body[data-theme="dark"] .autoclaw-home .input-model-picker-item {
  color: #c6cce6;
}

body[data-theme="dark"] .autoclaw-home .input-evolution-picker-item {
  color: #c6cce6;
}

body[data-theme="dark"] .autoclaw-home .input-model-picker-item:hover {
  background: #171a25;
}

body[data-theme="dark"] .autoclaw-home .input-evolution-picker-item:hover {
  background: #171a25;
}

body[data-theme="dark"] .autoclaw-home .input-evolution-picker-item.active {
  background: rgba(185, 124, 255, 0.14);
  color: #f5f7ff;
  font-weight: 600;
}

body[data-theme="dark"] .autoclaw-home .input-model-picker-item.active {
  background: rgba(185, 124, 255, 0.14);
  color: #f5f7ff;
}

body[data-theme="dark"] .autoclaw-home .input-model-picker-badge {
  color: #6b7280;
}

body[data-theme="dark"] .msg-stack:hover .message-inline-actions-right {
  color: #c6cce6;
  opacity: 0.94;
}

body[data-theme="dark"] .message-inline-actions-right:has(.is-copied) {
  color: #c6cce6;
  opacity: 0.94;
}

body[data-theme="dark"] .message-inline-action:hover {
  color: #f5f7ff;
}

body[data-theme="dark"] .message-inline-action-copy {
  color: #c6cce6;
  background: transparent;
}

body[data-theme="dark"] .message-inline-action-copy:hover {
  background: transparent;
  color: #f5f7ff;
  opacity: 1;
}

body[data-theme="dark"] .message-inline-action-copy.is-copied {
  background: transparent;
  color: var(--theme-accent1);
  opacity: 1;
}

.command-overlay {
  background: var(--theme-overlay-scrim);
}

.command-panel {
  background: var(--theme-surface-elevated);
  border-color: var(--theme-border-hi);
  box-shadow: var(--theme-shadow-lg);
}

.command-panel input {
  background: var(--theme-input-bg);
  border-color: var(--theme-input-b);
  color: var(--theme-text);
}

.command-list button:hover,
.command-list button.cmd-active {
  background: var(--theme-surface-subtle);
  outline-color: var(--theme-border-hi);
}

.shortcut-row,
.shortcut-row kbd {
  color: var(--theme-text);
}

.shortcut-row kbd {
  border-color: var(--theme-border);
  background: var(--theme-surface-subtle);
}

.modal-overlay {
  background: var(--theme-overlay-scrim);
  --text: var(--theme-text);
  --text-sec: var(--theme-text-sec);
  --text-ter: var(--theme-text-ter);
  --bg-sub: var(--theme-surface-sunken);
  --panel: var(--theme-surface-base);
  --border: var(--theme-border);
  --border-hi: var(--theme-border-hi);
  --input-bg: var(--theme-input-bg);
  --input-b: var(--theme-input-b);
  --ring: var(--theme-ring);
  --accent1: var(--theme-accent1);
  --danger: var(--theme-danger);
  --warn: var(--theme-warn);
  --success: var(--theme-success);
  --shadow-sm: var(--theme-shadow-sm);
  --shadow: var(--theme-shadow);
  --shadow-lg: var(--theme-shadow-lg);
}

.modal-container {
  background: var(--theme-surface-base);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow-lg);
}

.modal-sidebar {
  background: var(--theme-surface-sunken);
  border-right-color: var(--theme-chrome-border);
}

.modal-tab {
  color: var(--theme-text-sec);
}

.modal-tab:hover,
.modal-tab.active {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-border-hi);
  color: var(--theme-text);
}

.modal-tab.active {
  box-shadow: inset 2px 0 0 var(--theme-accent1);
}

.modal-tab-icon,
.modal-tab.active .modal-tab-icon {
  color: var(--theme-text-sec);
  background: transparent;
}

.sec-title,
.sec-subtitle {
  color: var(--theme-text);
}

.modal-overlay .theme-card:hover {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-border-hi);
}

.modal-overlay .theme-card.active {
  background: var(--theme-surface-accent-soft);
  border-color: var(--theme-accent1);
}

.ant-modal-root .ant-modal-mask,
.ant-drawer-mask {
  background: var(--theme-overlay-scrim) !important;
}

.ant-modal .ant-modal-content,
.ant-drawer .ant-drawer-content,
.ant-select-dropdown,
.ant-dropdown .ant-dropdown-menu,
.ant-popover .ant-popover-inner,
.ant-message-notice-content,
.ant-notification-notice {
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

.ant-message:has(.newbie-message) {
  top: auto !important;
  bottom: 152px;
  pointer-events: auto;

  .ant-message-notice-content {
    color: #fff !important;
    background: #525252 !important;
    border: none !important;
    position: relative;
    transition: all 0.2s;

    .anticon-check-circle {
      position: relative;

      svg {
        position: relative;
      }
    }
    .anticon-check-circle::before {
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      background: #fff;
      top: 50%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
    }

    .newbie-message-btn {
      color: #292929;
      border: none;
      border-radius: 10px;
      padding: 6px 10px;
      margin: -5px -7px -5px 10px;
      background: #fff;
      cursor: pointer;
      transition: all 0.2s;
    }
    .newbie-message-btn:hover {
      opacity: 0.9;
    }

    .newbie-message-close {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border: none;
      border-radius: 50%;
      top: -8px;
      right: -8px;
      position: absolute;
      background: #7a7a7a;
      cursor: pointer;
      transition: all 0.3s;
      opacity: 0;
    }
    .newbie-message-close:hover {
      background: #7a7a7aee;
    }
  }
  .ant-message-notice-content:hover {
    .newbie-message-close {
      opacity: 1;
    }
  }
}

#root:has(.settings-nav) ~ .ant-message:has(.newbie-message),
#root:has(.autoclaw-sidebar-left:not(.collapsed)):has(
    .autoclaw-sidebar-right.collapsed
  )
  ~ .ant-message:has(.newbie-message),
#root:has(.autoclaw-sidebar-left:not(.collapsed)):has(
    .autoclaw-skills-store-view
  )
  ~ .ant-message:has(.newbie-message) {
  .ant-message-notice-content {
    transform: translateX(160px);
  }
}

#root:has(.autoclaw-sidebar-right:not(.collapsed)):has(
    .autoclaw-sidebar-left.collapsed
  )
  ~ .ant-message:has(.newbie-message) {
  .ant-message-notice-content {
    transform: translateX(-160px);
  }
}

.ant-tooltip:not(.skills-store-tooltip) .ant-tooltip-inner {
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: var(--theme-shadow-lg) !important;
}

.ant-tooltip:not(.skills-store-tooltip) .ant-tooltip-arrow::before,
.ant-popover .ant-popover-arrow::before,
.ant-popover .ant-popover-arrow::after {
  background: var(--theme-surface-elevated) !important;
}

.ant-modal .ant-modal-header,
.ant-drawer .ant-drawer-header {
  background: transparent !important;
  border-bottom-color: var(--theme-border) !important;
}

.ant-modal .ant-modal-title,
.ant-drawer .ant-drawer-title,
.ant-modal .ant-modal-close,
.ant-drawer .ant-drawer-close,
/* .ant-message .anticon, */
.ant-notification-notice-message,
.ant-notification-notice-description {
  color: var(--theme-text) !important;
}

.ant-notification {
  .ant-notification-notice-wrapper {
    .ant-notification-notice {
      width: auto;
      max-width: 384px;
    }

    .ant-notification-notice-close {
      top: 22px;
      inset-inline-end: 18px;
    }
  }
}

.ant-modal .ant-modal-body,
.ant-drawer .ant-drawer-body,
.ant-form-item-label > label,
.ant-empty-description {
  color: var(--theme-text-sec) !important;
}

.ant-input,
.ant-input-affix-wrapper,
.ant-select-selector,
.ant-picker,
.ant-input-number,
.ant-input-number-input,
.ant-input-number-group-addon {
  background: var(--theme-input-bg) !important;
  border-color: var(--theme-input-b) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

.ant-input::placeholder,
.ant-input-affix-wrapper input::placeholder,
.ant-select-selection-placeholder,
.ant-picker-input > input::placeholder,
.ant-input-number-input::placeholder {
  color: var(--theme-text-placeholder) !important;
}

.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-select-selector:hover,
.ant-picker:hover,
.ant-input-number:hover {
  border-color: var(--theme-accent1) !important;
}

.ant-input:focus,
.ant-input-affix-wrapper-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused,
.ant-input-number-focused {
  border-color: var(--theme-accent1) !important;
  box-shadow: 0 0 0 3px var(--theme-ring) !important;
}

.ant-select-item,
.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  color: var(--theme-text) !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled),
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background: var(--theme-surface-subtle) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled),
.ant-dropdown-menu-item-selected {
  background: var(--theme-surface-accent-soft) !important;
  color: var(--theme-text) !important;
}

/* ── Kill Ant Design orange focus/active outlines globally ── */

.ant-btn {
  box-shadow: none !important;
}

.ant-btn:focus,
.ant-btn:active,
.ant-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--theme-border) !important;
}

.ant-btn-default:hover,
.ant-btn-default:focus {
  border-color: var(--theme-text-ter) !important;
  color: var(--theme-text) !important;
}

.ant-switch:focus,
.ant-switch:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.quick-setup-modal .ant-modal {
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px);
}

.quick-setup-modal .ant-modal-content {
  background: var(--theme-surface-elevated) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 14px !important;
  padding: 0 !important;
}

.quick-setup-modal .ant-modal-body {
  padding: 0 !important;
}

.quick-setup-modal .ant-modal-close {
  top: 16px !important;
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--theme-text-sec) !important;
  transition: color 0.15s ease;
}

.quick-setup-modal .ant-modal-close:hover {
  color: var(--theme-text) !important;
}

.quick-setup-content {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quick-setup-title {
  margin: 0 0 2px;
  color: var(--theme-text);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
}

.quick-setup-subtitle {
  margin: 0 0 12px;
  color: var(--theme-text-ter);
  font-size: 12px;
  line-height: 18px;
}

.quick-setup-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--theme-text-sec);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.quick-setup-input,
.quick-setup-tag-input {
  appearance: none;
  font: inherit;
  width: 100%;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-input-bg);
  color: var(--theme-text);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.quick-setup-input {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 22px;
}

.quick-setup-tag-input {
  width: 100px;
  min-width: 100px;
  min-height: 32px;
  padding: 5px 10px;
  border-radius: 999px;
  border-color: var(--theme-accent1);
  background: color-mix(
    in srgb,
    var(--theme-accent1) 8%,
    var(--theme-input-bg)
  );
  font-size: 12px;
  line-height: 18px;
}

.quick-setup-input::placeholder,
.quick-setup-tag-input::placeholder {
  color: var(--theme-text-placeholder);
}

.quick-setup-input:hover,
.quick-setup-tag-input:hover {
  border-color: var(--theme-border-hi);
}

.quick-setup-input:focus,
.quick-setup-tag-input:focus {
  border-color: var(--theme-accent1);
  box-shadow: 0 0 0 3px var(--theme-ring);
}

.quick-setup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.quick-setup-tag {
  appearance: none;
  font: inherit;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-text-inverse) 3%, transparent);
  color: var(--theme-text-sec);
  min-height: 30px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  box-shadow: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.quick-setup-tag:hover {
  border-color: var(--theme-border-hi);
  background: color-mix(in srgb, var(--theme-text-inverse) 6%, transparent);
}

.quick-setup-tag.active {
  border-color: var(--theme-accent1);
  background: color-mix(in srgb, var(--theme-accent1) 10%, transparent);
  color: var(--theme-accent1);
}

.quick-setup-tag svg {
  flex-shrink: 0;
}

.quick-setup-tag-add {
  border-style: dashed;
  color: var(--theme-text-ter);
}

.quick-setup-tag-add:hover {
  color: var(--theme-text-sec);
  border-color: var(--theme-text-ter);
}

.quick-setup-submit {
  appearance: none;
  font: inherit;
  margin-top: 10px;
  align-self: stretch;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--theme-accent1);
  color: var(--theme-text-inverse);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  box-shadow: none;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}

.quick-setup-submit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.quick-setup-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 640px) {
  .quick-setup-content {
    padding: 24px 18px 20px;
    gap: 6px;
  }

  .quick-setup-title {
    font-size: 18px;
    line-height: 26px;
  }

  .quick-setup-subtitle {
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 18px;
  }

  .quick-setup-tags {
    gap: 8px;
  }

  .quick-setup-submit {
    width: 100%;
  }
}

.user-popover-avatar {
  background: var(--theme-accent1);
}

.user-popover-name {
  color: var(--theme-text);
}

.user-popover-phone {
  color: var(--theme-text-ter);
}

.user-popover-divider {
  background: var(--theme-border);
}

.user-popover-item {
  color: var(--theme-text-sec);
}

.user-popover-logout {
  color: var(--theme-danger);
}

.user-popover-logout:hover {
  background: var(--theme-surface-danger-soft);
  color: var(--theme-danger);
}

.im-envelope-card {
  display: inline-block;
  width: fit-content;
  max-width: min(100%, 320px);
  margin-bottom: 8px;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 252, 248, 0.74);
  border: 1px solid rgba(24, 24, 27, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
  backdrop-filter: blur(10px);
}

.im-envelope-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.im-envelope-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.im-envelope-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 5px;
  border-radius: 999px;
  background: var(--im-soft-bg, rgba(100, 116, 139, 0.14));
  color: var(--im-accent, #334155);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.im-envelope-source-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.im-envelope-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #92400e;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(217, 119, 6, 0.18);
}

.im-envelope-pill-mention {
  color: #7c2d12;
  background: rgba(251, 146, 60, 0.16);
}

/* Dark theme overrides for IM envelope pills */

:root[data-theme="dark"] .im-envelope-pill,
body[data-theme="dark"] .im-envelope-pill {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.2);
}

:root[data-theme="dark"] .im-envelope-pill-mention,
body[data-theme="dark"] .im-envelope-pill-mention {
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
}

.im-envelope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.im-envelope-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--theme-text-sec);
  font-size: 11px;
  line-height: 1.35;
  flex-wrap: wrap;
}

.im-envelope-summary-primary,
.im-envelope-summary-secondary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.im-envelope-summary-primary {
  color: var(--theme-text);
  font-weight: 600;
}

.im-envelope-summary-sep {
  color: var(--theme-text-ter);
}

.im-envelope-summary-secondary {
  max-width: 180px;
}

.im-envelope-reply {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 9px;
  border-left: 2px solid rgba(148, 163, 184, 0.55);
  background: rgba(15, 23, 42, 0.035);
  display: grid;
  gap: 2px;
}

.im-envelope-reply-sender {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--theme-text-sec);
}

.im-envelope-reply-body {
  font-size: 11px;
  line-height: 1.4;
  color: var(--theme-text-sec);
  white-space: pre-wrap;
  word-break: break-word;
}

.im-envelope-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.im-envelope-label {
  font-size: 10px;
  line-height: 1.5;
  color: var(--theme-text-ter);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.im-envelope-value {
  font-size: 11px;
  line-height: 1.45;
  color: var(--theme-text);
  word-break: break-word;
}

.im-envelope-mono {
  font-family: "SFMono-Regular", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.im-envelope-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--theme-text-ter);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  opacity: 0.9;
}

.im-message-text {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.im-envelope-toggle:hover {
  color: var(--theme-text);
}

body[data-theme="dark"] .im-envelope-card {
  background: rgba(28, 31, 36, 0.76);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

body[data-theme="dark"] .im-envelope-reply {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(148, 163, 184, 0.4);
}

/* ─── AgentConfigModal ─── */

.agent-config-modal .ant-modal-content {
  background: var(--theme-surface-elevated) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 14px !important;
  overflow: hidden;
}

.agent-config-modal .ant-modal-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 20px 24px 0 !important;
  margin: 0 !important;
}

.agent-config-modal .ant-modal-title {
  color: var(--theme-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.agent-config-modal .ant-modal-body {
  padding: 16px 24px !important;
  max-height: min(520px, calc(100vh - 200px));
  overflow-y: auto;
}

.agent-config-modal .ant-modal-footer {
  padding: 0 24px 20px !important;
  border-top: none !important;
  margin: 0 !important;
}

.agent-config-modal .ant-modal-close {
  top: 16px !important;
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--theme-text-sec) !important;
  transition: color 0.15s ease;
}

.agent-config-modal .ant-modal-close:hover {
  color: var(--theme-text) !important;
}

/* Create step form layout */

.agent-create-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agent-create-form .agent-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-create-form .agent-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--theme-text-sec);
  line-height: 18px;
}

.agent-create-form .agent-field-hint {
  font-size: 11px;
  color: var(--theme-text-ter);
  line-height: 16px;
  margin-top: 2px;
}

.agent-create-form .agent-field-input {
  appearance: none;
  font: inherit;
  width: 100%;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-input-bg);
  color: var(--theme-text);
  font-size: 13px;
  line-height: 20px;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.agent-create-form .agent-field-input::placeholder {
  color: var(--theme-text-placeholder);
}

.agent-create-form .agent-field-input:hover {
  border-color: var(--theme-border-hi);
}

.agent-create-form .agent-field-input:focus {
  border-color: var(--theme-accent1);
  box-shadow: 0 0 0 3px var(--theme-ring);
}

/* Divider between main fields and advanced */

.agent-create-form .agent-form-divider {
  height: 1px;
  background: var(--theme-border);
  margin: 4px 0;
}

/* Model trigger button */

.agent-create-form .agent-model-trigger {
  appearance: none;
  font: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg);
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.agent-create-form .agent-model-trigger:hover {
  border-color: var(--theme-border-hi);
}

/* Workspace browse button */

.agent-create-form .agent-browse-btn {
  appearance: none;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface-subtle);
  cursor: pointer;
  color: var(--theme-text-sec);
  font-size: 12px;
  white-space: nowrap;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.agent-create-form .agent-browse-btn:hover {
  border-color: var(--theme-border-hi);
  background: var(--theme-surface);
}

/* ─── Agent Evolution Speed (in AgentConfigModal) ─── */

.agent-evolution-speed-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-evolution-speed-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--theme-text-ter);
  cursor: help;
}

.agent-evolution-speed-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 219px;
  padding: 8px;
  border-radius: 10px;
  background: #525252;
  color: #fafafa;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  white-space: normal;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.agent-evolution-speed-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #525252;
  border-top-width: 6px;
  border-bottom-width: 0;
}

.agent-evolution-speed-info:hover .agent-evolution-speed-tooltip,
.agent-evolution-speed-info:focus .agent-evolution-speed-tooltip {
  display: block;
}

.agent-evolution-speed-slider {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.agent-evolution-speed-track {
  position: relative;
}

.agent-evolution-speed-markers {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.agent-evolution-speed-marker {
  width: 4px;
  height: 12px;
  border-radius: 10px;
  background: #e5e6eb;
}

.agent-evolution-speed-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    var(--theme-accent1, #fc5d1e) 0%,
    var(--theme-accent1, #fc5d1e) var(--evo-progress, 50%),
    #e5e6eb var(--evo-progress, 50%),
    #e5e6eb 100%
  );
  outline: none;
  cursor: pointer;
  margin: 12px 0;
  position: relative;
  z-index: 2;
}

.agent-evolution-speed-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--theme-accent1, #fc5d1e);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
}

.agent-evolution-speed-range::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.agent-evolution-speed-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--theme-text-ter);
  line-height: 22px;
}

/* ─── Agent list items (select step) ─── */

.agent-list-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface-subtle);
  transition: border-color 0.15s ease;
  overflow: hidden;
}

.agent-list-item:hover {
  border-color: var(--theme-border-hi);
}

.agent-list-item-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--theme-text);
  font: inherit;
  font-size: 13px;
  min-width: 0;
}

.agent-list-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.agent-list-item:hover .agent-list-item-actions {
  opacity: 1;
}

.agent-list-action-btn {
  appearance: none;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--theme-text-ter);
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.agent-list-action-btn:hover {
  background: var(--theme-surface);
  color: var(--theme-text-sec);
}

.agent-list-action-btn.agent-list-action-danger:hover {
  background: var(--theme-surface-danger-soft, rgba(239, 68, 68, 0.08));
  color: var(--theme-danger, #ef4444);
}

/* ─── Agent model dropdown (inside modal, not under .autoclaw-home) ─── */

.agent-model-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  z-index: 1050;
  max-height: 240px;
  overflow-y: auto;
  background: var(--theme-surface-elevated);
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 4px;
  overscroll-behavior: contain;
}

.agent-model-dropdown::-webkit-scrollbar {
  width: 5px;
}

.agent-model-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.agent-model-dropdown::-webkit-scrollbar-thumb {
  background: var(--theme-border);
  border-radius: 3px;
}

.agent-model-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--theme-text);
  text-align: left;
  gap: 8px;
  transition: background 0.12s ease;
}

.agent-model-dropdown-item:hover {
  background: var(--theme-surface-subtle);
}

.agent-model-dropdown-item.active {
  background: var(--surface-accent-soft, rgba(99, 102, 241, 0.08));
  color: var(--accent1);
  font-weight: 600;
}

.agent-model-dropdown-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}

.agent-model-dropdown-sub {
  font-size: 11px;
  color: var(--theme-text-ter);
  margin-left: 6px;
  font-weight: 400;
}

.agent-model-dropdown-badge {
  flex-shrink: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  color: var(--theme-text-ter);
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--theme-surface-subtle);
}

.agent-model-dropdown-badge.free {
  color: var(--success, #36b261);
  background: rgba(54, 178, 97, 0.1);
}

/* Dark theme overrides for agent modal */

body[data-theme="dark"] .agent-model-dropdown {
  background: var(--theme-surface-elevated, #11131d);
  border-color: rgba(141, 162, 255, 0.16);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 4px 12px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .agent-model-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .agent-model-dropdown-item.active {
  background: rgba(185, 124, 255, 0.14);
  color: var(--accent1);
}

body[data-theme="dark"] .agent-model-dropdown-badge {
  color: var(--theme-text-ter);
  background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .agent-list-item {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--theme-border);
}

.agent-session-badge {
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent1-soft, rgba(99, 102, 241, 0.1));
  color: var(--accent1, #6366f1);
  margin-right: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-page {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 12% 16%,
      var(--theme-surface-accent-soft),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 84%,
      color-mix(in srgb, var(--theme-accent1) 10%, transparent),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--theme-bg) 96%, #ffffff 4%),
      var(--theme-surface-sunken)
    );
}
.auth-page.auth-page-oversea {
  background: var(--theme-panel);
}

/* Invisible drag strip at top of login page for window dragging (macOS hiddenInset) */
.auth-page::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--mac-window-controls-top) + 28px);
  -webkit-app-region: drag;
  z-index: 10;
  pointer-events: auto;
}

.auth-shell {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--mac-window-controls-top) + 28px) 32px 32px;
  box-sizing: border-box;
  overflow: auto;
  animation: authFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 22% 42%,
      color-mix(in srgb, var(--theme-surface-accent-soft) 84%, transparent),
      transparent 24%
    ),
    radial-gradient(
      circle at 78% 54%,
      color-mix(in srgb, var(--theme-accent1) 7%, transparent),
      transparent 28%
    );
  pointer-events: none;
}

.auth-shell-oversea {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;

  .auth-shell-oversea-core {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .auth-brand-icon-oversea {
      width: 48px;
    }

    > h1 {
      font-size: 32px;
      font-weight: 600;
      margin: 16px auto 12px;
    }

    > p {
      font-size: 16px;
      font-weight: 400;
      margin: 0 auto;
      color: #9e9e9e;
    }

    .auth-oauth-group-oversea {
      display: flex;
      gap: 16px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 80px;

      .auth-oauth-btn-oversea {
        min-width: 342px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 1px solid #f0f0f0;
        background: none;
        transition: all 0.2s;

        .auth-oauth-logo {
          height: 20px;
          width: 20px;
          border-radius: 4px;
          objectfit: cover;
        }
        .auth-oauth-logo.bordered {
          border: 1px solid #fff;
        }

        .auth-oauth-btn-text {
          display: block;
          width: 130px;
          text-align: left;
        }
      }
      .auth-oauth-btn-oversea:hover {
        opacity: 0.8;
      }

      .auth-oauth-btn-oversea:first-child {
        color: #fff;
        background: #292929;
      }
      .auth-oauth-btn-oversea:first-child:is([data-theme="dark"] *) {
        color: #000;
        background: #fff;
      }
    }
  }

  > footer {
    display: flex;
    gap: 32px;
    padding: 24px 0;

    > * {
      font-size: 14px;
      font-weight: 400;
      color: #bdbdbd;
      position: relative;
    }
    > *:not(:first-child)::before {
      content: "";
      display: block;
      width: 0.5px;
      height: 12px;
      background: #ebebeb;
      top: 50%;
      left: -16px;
      transform: translateY(-50%);
      position: absolute;
    }
    > a {
      text-decoration: none;
    }
    > a:hover {
      text-decoration: underline;
    }
  }
}

.auth-canvas {
  position: relative;
  z-index: 1;
  width: min(1040px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  border-radius: 36px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 82%, transparent);
  background: color-mix(in srgb, var(--theme-surface-base) 92%, transparent);
  box-shadow:
    0 28px 64px rgba(9, 12, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  overflow: hidden;
  isolation: isolate;
}

.auth-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--theme-surface-sunken) 82%, transparent),
      transparent 46%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 22%);
  pointer-events: none;
}

.auth-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--theme-text-ter);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.auth-close-btn:hover {
  background: var(--theme-surface-subtle);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.auth-stage {
  position: relative;
  min-width: 0;
  padding: 54px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.auth-stage::before {
  content: "";
  position: absolute;
  left: 96px;
  top: 108px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-accent1) 10%, transparent);
  filter: blur(24px);
  opacity: 0.9;
  pointer-events: none;
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
}

.auth-brand strong {
  font-size: 16px;
  line-height: 1.2;
  color: var(--theme-text);
}

.auth-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
}

.auth-stage-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-stage-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--theme-surface-accent-soft);
  color: var(--theme-accent1);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.auth-stage-copy h1 {
  margin: 0;
  max-width: 500px;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--theme-text);
  text-wrap: balance;
}

.auth-stage-copy p {
  margin: 0;
  max-width: 460px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--theme-text-sec);
}

.auth-stage-highlights {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}

.auth-stage-highlight {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent);
}

.auth-stage-highlight:first-child {
  padding-top: 0;
  border-top: 0;
}

.auth-stage-highlight-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-surface-base) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-border) 82%, transparent);
  color: var(--theme-accent1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.auth-stage-highlight-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.auth-stage-highlight-copy strong {
  font-size: 14px;
  line-height: 1.35;
  color: var(--theme-text);
}

.auth-stage-highlight-copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--theme-text-sec);
}

.auth-panel {
  position: relative;
  min-width: 0;
  padding: 54px 52px 54px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid
    color-mix(in srgb, var(--theme-border) 72%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-surface-base) 98%, transparent),
    color-mix(in srgb, var(--theme-surface-elevated) 96%, transparent)
  );
}

.auth-panel::before {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -68px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background:
    radial-gradient(
      circle at 34% 30%,
      rgba(255, 255, 255, 0.72),
      transparent 26%
    ),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--theme-accent1) 20%, transparent),
      color-mix(in srgb, var(--theme-accent2) 12%, transparent)
    );
  opacity: 0.92;
  filter: blur(8px);
  pointer-events: none;
}

.auth-panel-card {
  position: relative;
  z-index: 1;
  width: 100%;
}

.auth-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--theme-surface-subtle);
  color: var(--theme-accent1);
  font-size: 12px;
  font-weight: 700;
}

.auth-heading h2 {
  margin: 0;
  font-size: 40px;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--theme-text);
}

.auth-heading p {
  margin: 0;
  max-width: 320px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--theme-text-sec);
}

.auth-form {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-field-label {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--theme-text-sec);
}

.auth-field input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid var(--theme-input-b);
  background: var(--theme-input-bg);
  color: var(--theme-text);
  font-size: 14px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.auth-field input::placeholder {
  color: var(--theme-text-placeholder);
}

.auth-field input:focus {
  outline: none;
  border-color: var(--theme-accent1);
  box-shadow: 0 0 0 4px var(--theme-ring);
  background: var(--theme-surface-base);
}

.auth-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.auth-code-btn,
.auth-login-btn {
  height: 56px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.auth-code-btn {
  min-width: 124px;
  padding: 0 16px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface-subtle);
  color: var(--theme-text);
  cursor: pointer;
}

.auth-code-btn:hover:not(:disabled),
.auth-login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.auth-code-btn:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--theme-surface-subtle) 68%,
    var(--theme-surface-base)
  );
  border-color: var(--theme-border-hi);
}

.auth-code-btn:focus {
  outline: none;
  border-color: var(--theme-accent1);
  box-shadow: 0 0 0 4px var(--theme-ring);
}

.auth-code-btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.auth-login-btn {
  width: 100%;
  border: 0;
  background: linear-gradient(
    135deg,
    var(--theme-accent1),
    var(--theme-accent2)
  );
  color: var(--theme-text-inverse);
  cursor: pointer;
  box-shadow: 0 16px 30px
    color-mix(in srgb, var(--theme-accent1) 22%, transparent);
}

.auth-login-btn:hover:not(:disabled) {
  box-shadow: 0 20px 36px
    color-mix(in srgb, var(--theme-accent1) 30%, transparent);
}

.auth-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── OAuth Buttons (Overseas) ── */
.auth-oauth-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border-radius: 18px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface-subtle);
  color: var(--theme-text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.auth-oauth-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.auth-oauth-btn:hover {
  transform: translateY(-1px);
  background: color-mix(
    in srgb,
    var(--theme-surface-subtle) 68%,
    var(--theme-surface-base)
  );
  border-color: var(--theme-border-hi);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.auth-oauth-btn:active {
  transform: translateY(0);
}

.auth-oauth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-oauth-loading {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--theme-border) 75%, transparent);
  border-top-color: var(--theme-accent1);
  animation: authSpin 0.8s linear infinite;
}

.auth-submit-hint {
  font-size: 12px;
  line-height: 1.55;
  color: var(--theme-text-sec);
}

.auth-error {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(220, 60, 60, 0.2);
  background: var(--theme-surface-danger-soft);
  color: var(--theme-danger);
  font-size: 13px;
  line-height: 1.5;
}

.auth-loading {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--theme-text-sec);
}

.auth-spinner {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--theme-border) 75%, transparent);
  border-top-color: var(--theme-accent1);
  animation: authSpin 0.8s linear infinite;
}

.topnav-feedback-btn {
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-sec);
  padding: 0 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.topnav-feedback-btn:hover {
  color: var(--text);
  border-color: var(--border-hi);
  background: rgba(255, 255, 255, 0.08);
}

@keyframes authFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes authSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  .auth-shell {
    display: block;
    padding: calc(var(--mac-window-controls-top) + 22px) 20px 24px;
  }

  .auth-canvas {
    width: min(680px, 100%);
    grid-template-columns: 1fr;
  }

  .auth-stage {
    padding: 28px 24px 0;
    gap: 22px;
  }

  .auth-stage-copy h1 {
    max-width: 100%;
    font-size: 40px;
  }

  .auth-stage-copy p {
    max-width: 100%;
    font-size: 16px;
  }

  .auth-panel {
    padding: 24px;
    border-left: 0;
    border-top: 1px solid
      color-mix(in srgb, var(--theme-border) 72%, transparent);
  }

  .auth-panel-card {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .auth-shell {
    padding: calc(var(--mac-window-controls-top) + 18px) 12px 16px;
  }

  .auth-canvas {
    border-radius: 24px;
  }

  .auth-close-btn {
    top: 14px;
    right: 14px;
  }

  .auth-stage {
    padding: 24px 18px 0;
    gap: 18px;
  }

  .auth-brand strong {
    font-size: 15px;
  }

  .auth-stage-kicker,
  .auth-form-label {
    min-height: 26px;
    font-size: 11px;
  }

  .auth-stage-copy h1 {
    font-size: 32px;
  }

  .auth-stage-copy p {
    font-size: 14px;
  }

  .auth-stage-highlights {
    gap: 12px;
  }

  .auth-stage-highlight {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding-top: 12px;
  }

  .auth-stage-highlight-index {
    width: 34px;
    height: 34px;
  }

  .auth-stage-highlight-copy strong {
    font-size: 14px;
  }

  .auth-stage-highlight-copy p {
    font-size: 12px;
  }

  .auth-panel {
    padding: 18px;
    border-top: 1px solid
      color-mix(in srgb, var(--theme-border) 72%, transparent);
  }

  .auth-panel-card {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .auth-heading h2 {
    font-size: 34px;
  }

  .auth-heading p {
    font-size: 14px;
  }

  .auth-form {
    margin-top: 22px;
  }

  .auth-code-row {
    grid-template-columns: 1fr;
  }

  .auth-code-btn {
    width: 100%;
  }
}

.quick-setup-tag-add {
  border-style: dashed;
  color: var(--text-ter);
}

.quick-setup-tag-add:hover {
  color: var(--text-sec);
  border-color: var(--text-ter);
}

.quick-setup-tag-input {
  padding: 5px 10px;
  border-radius: 16px;
  border: 1px solid var(--accent1);
  background: rgba(94, 234, 212, 0.05);
  color: var(--text);
  font-size: 12px;
  width: 100px;
  outline: none;
}

.quick-setup-tag-input::placeholder {
  color: var(--text-ter);
}

.quick-setup-submit {
  margin-top: 10px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: var(--accent1);
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-setup-submit:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.quick-setup-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Task Config Wizard ── */
.task-config-wizard-modal .ant-modal-content {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
}

.task-config-wizard-modal .ant-modal-close {
  color: var(--text-ter);
}

.task-config-wizard-content {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-config-wizard-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.task-config-wizard-subtitle {
  font-size: 12px;
  color: var(--text-ter);
  margin-bottom: 16px;
}

/* ── Sandbox Mode Cards ── */
.sandbox-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.sandbox-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  gap: 8px;
}

.sandbox-mode-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}

.sandbox-mode-card.selected {
  border-color: var(--accent1, #5eead4);
  background: rgba(94, 234, 212, 0.04);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}

.sandbox-mode-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sandbox-mode-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.sandbox-mode-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(94, 234, 212, 0.1);
  color: var(--accent1, #5eead4);
}

.sandbox-mode-desc {
  font-size: 11px;
  color: var(--text-ter);
  line-height: 1.5;
}

.sandbox-mode-check {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--accent1, #5eead4);
}

/* ── Directory Input (Step 02) ── */
.directory-input-group {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.directory-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: all 0.2s;
}

.directory-input-row:focus-within {
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}

.directory-path-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
  min-width: 0;
}

.directory-path-input::placeholder {
  color: var(--text-ter);
}

.directory-hint {
  font-size: 11px;
  color: var(--text-ter);
  padding-left: 4px;
}

/* ── Wizard Navigation ── */
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  gap: 12px;
}

.onboarding-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.onboarding-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(400px, 100%);
}

.onboarding-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.onboarding-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-hi, var(--border));
  transform: translateY(-1px);
}

.onboarding-card-primary {
  border-color: rgba(94, 234, 212, 0.3);
  background: rgba(94, 234, 212, 0.06);
}

.onboarding-card-primary:hover {
  border-color: rgba(94, 234, 212, 0.5);
  background: rgba(94, 234, 212, 0.1);
}

.onboarding-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(94, 234, 212, 0.12);
  color: var(--accent1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboarding-card-icon-muted {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-ter);
}

.onboarding-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.onboarding-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.onboarding-card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.onboarding-badge {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.15);
  color: var(--accent1);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.onboarding-card-desc {
  font-size: 12px;
  color: var(--text-ter);
  line-height: 1.5;
}

/* ── Onboarding Form ── */
.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(360px, 100%);
}

.onboarding-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sec);
}

.onboarding-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  transition: all 0.2s;
}

.onboarding-input:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}

.onboarding-input::placeholder {
  color: var(--text-ter);
}

.onboarding-lang-row {
  display: flex;
  gap: 8px;
}

.onboarding-lang-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-sec);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.onboarding-lang-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.onboarding-lang-btn.active {
  border-color: var(--accent1);
  background: rgba(94, 234, 212, 0.1);
  color: var(--accent1);
  font-weight: 600;
}

.onboarding-submit {
  margin-top: 8px;
  height: 42px;
  border-radius: 10px;
  border: none;
  background: var(--accent1);
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.onboarding-submit:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.onboarding-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Risk Agreement Modal ── */
.risk-agreement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: riskAgreementFadeIn 0.25s ease;
}

.risk-agreement-modal {
  width: min(720px, 95vw);
  max-height: 85vh;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.48);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: riskAgreementSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.risk-agreement-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.risk-agreement-header h2 {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.risk-agreement-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-sec);
}

.risk-agreement-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sec);
  scroll-behavior: smooth;
}

.risk-agreement-content::-webkit-scrollbar {
  width: 8px;
}

.risk-agreement-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.risk-agreement-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.risk-agreement-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Markdown styles within risk agreement */
.risk-agreement-content h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 24px 0 16px 0;
  letter-spacing: -0.3px;
}

.risk-agreement-content h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 20px 0 12px 0;
}

.risk-agreement-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 10px 0;
}

.risk-agreement-content p {
  margin: 12px 0;
}

.risk-agreement-content strong {
  color: var(--text);
  font-weight: 600;
}

.risk-agreement-content ul,
.risk-agreement-content ol {
  margin: 12px 0;
  padding-left: 24px;
}

.risk-agreement-content li {
  margin: 6px 0;
}

.risk-agreement-content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent1);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 8px 8px 0;
  color: var(--text-sec);
}

.risk-agreement-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

.risk-agreement-content a {
  color: var(--accent1);
  text-decoration: none;
}

.risk-agreement-content a:hover {
  text-decoration: underline;
}

.risk-agreement-content code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent1);
  font-family: "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 13px;
}

.risk-agreement-content pre {
  margin: 16px 0;
  border-radius: 10px;
  overflow: hidden;
}

.risk-agreement-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  min-height: 60px;
}

.risk-agreement-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.scroll-reminder {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  animation: pulse 1.5s ease-in-out infinite;
  flex: 1;
}

.scroll-reminder-hidden {
  visibility: hidden;
  opacity: 0;
}

.scroll-reminder span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scroll-reminder span::before {
  content: "↓";
  font-size: 16px;
  color: var(--accent1);
}

.risk-agreement-reject-btn {
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-sec);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.risk-agreement-reject-btn:hover {
  background: rgba(255, 80, 80, 0.1);
  border-color: rgba(255, 80, 80, 0.3);
  color: var(--danger);
}

.risk-agreement-confirm-btn {
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  background: var(--accent1);
  color: #000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.risk-agreement-confirm-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.risk-agreement-confirm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

@keyframes riskAgreementFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes riskAgreementSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.pay-modal {
  .ant-modal-close {
    z-index: 10;
    border-radius: 50%;
  }

  .ant-modal {
    max-width: none;
    height: 100vh;

    .ant-modal-content,
    .ant-modal-container {
      height: 100vh;
      padding: 0;
      border-radius: 0;

      .ant-modal-body {
        height: 100%;
      }
    }
  }
}

body[data-theme="dark"] .pay-modal {
  .ant-modal-close {
    background: #383838;
  }

  .ant-modal-close:hover {
    background: black;
  }
}

@keyframes rotate-animation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.pay-webview-wrap {
  border-radius: 8px;
  overflow: hidden;
  position: relative;

  .loading-icon {
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    animation: rotate-animation 2s linear infinite;
  }
}

.pay-webview {
  z-index: 2;
  position: relative;
}

.promotion-modal {
  .ant-modal-close {
    border-radius: 50%;
  }

  .ant-modal-content {
    padding: 6px;
  }

  .ant-modal-body {
    /* text-align: center; */

    .promotion-modal-img {
      width: 100%;
      display: block;
      border-radius: 12px;
      margin: 0 0 6px;
    }

    .promotion-modal-md {
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: var(--text);
        margin: 10px auto;
      }

      img {
        max-width: 100%;
      }
    }
    .promotion-modal-md > *:not(:has(img)) {
      padding-inline: 10px;
    }

    > button {
      width: 100%;
      height: 48px;
      border-radius: 12px;
      font-size: 16px;
      border: none;
      color: #fff;
      background: rgb(41, 41, 41);
      margin-top: 16px;
    }

    > button:hover,
    > button:focus {
      color: #fff !important;
    }
  }
}

body[data-theme="dark"] .promotion-modal .ant-modal-body button:hover,
body[data-theme="dark"] .promotion-modal .ant-modal-body button:focus {
  color: #fff !important;
  background: rgb(41, 41, 41) !important;
  opacity: 0.7;
}
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}.hljs {
  display: block;
  overflow-x: auto;
  padding: 0;
  background: transparent !important;
  color: var(--code-block-text) !important;
}

.hljs-subst,
.hljs-plain {
  color: var(--code-block-text) !important;
}

.hljs-comment,
.hljs-quote {
  color: var(--code-comment) !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link,
.hljs-meta .hljs-keyword {
  color: var(--theme-accent1) !important;
}

.hljs-string,
.hljs-attr,
.hljs-template-variable,
.hljs-bullet,
.hljs-addition {
  color: var(--theme-success) !important;
}

.hljs-number,
.hljs-symbol,
.hljs-meta,
.hljs-built_in,
.hljs-type,
.hljs-title.class_ {
  color: var(--theme-accent2) !important;
}

.hljs-title,
.hljs-title.function_,
.hljs-function .hljs-title,
.hljs-name,
.hljs-tag {
  color: var(--theme-info) !important;
}

.hljs-variable,
.hljs-params,
.hljs-property,
.hljs-operator,
.hljs-punctuation,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: var(--theme-text) !important;
}
.autoclaw-skills-add-btn .default-icon {
  display: block;
}
.autoclaw-skills-add-btn .hover-icon {
  display: none;
}
.autoclaw-skills-add-btn:hover .default-icon {
  display: none;
}
.autoclaw-skills-add-btn:hover .hover-icon {
  display: block;
}

.autoclaw-skills-update-btn:hover {
  background: var(--theme-surface-subtle) !important;
}

.autoclaw-myskills-update-btn:hover {
  background: var(--theme-surface-subtle) !important;
}

.autoclaw-skills-store-nav-btn:hover {
  color: var(--theme-text) !important;
}

.autoclaw-skills-pill-btn:hover {
  background: var(--theme-surface-subtle) !important;
}

.autoclaw-skills-category-tab:hover {
  background: var(--theme-msg-agent) !important;
}

.autoclaw-skills-search-input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--theme-border);
  background: var(--theme-input-bg);
  color: var(--theme-text);
  border-radius: 10px;
  padding: 8px 12px 8px 36px;
  font-size: 14px;
}

.autoclaw-skills-search-input::placeholder {
  color: var(--theme-text-placeholder);
}

.autoclaw-skills-search-input:focus {
  outline: none;
  border-color: var(--theme-border-hi);
}

.skills-store-tooltip .ant-tooltip-content {
  border-radius: 12px;
  overflow: hidden;
}

.skills-store-tooltip .ant-tooltip-inner {
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  box-shadow: var(--theme-shadow-lg) !important;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skills-store-tooltip .ant-tooltip-arrow::before {
  background: var(--theme-surface-elevated) !important;
}