/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter_Tight","arguments":[{"subsets":["latin"],"variable":"--font-inter-tight-src","display":"swap"}],"variableName":"interTight"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Inter_Tight_a3c0d3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c95a17d6aa1ccc69-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_Tight_a3c0d3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/84792440f5374347-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_Tight_a3c0d3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/10735954b8957dce-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_Tight_a3c0d3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/69c8297e91a203ed-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_Tight_a3c0d3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/32ec8d161d520037-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_Tight_a3c0d3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ceda3e828136e1b8-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_Tight_a3c0d3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/103fc5fac08dcb15-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Inter_Tight_Fallback_a3c0d3';src: local("Arial");ascent-override: 100.51%;descent-override: 25.03%;line-gap-override: 0.00%;size-adjust: 96.39%
}.__className_a3c0d3 {font-family: '__Inter_Tight_a3c0d3', '__Inter_Tight_Fallback_a3c0d3';font-style: normal
}.__variable_a3c0d3 {--font-inter-tight-src: '__Inter_Tight_a3c0d3', '__Inter_Tight_Fallback_a3c0d3'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Roboto","arguments":[{"subsets":["latin"],"weight":["400","500","700"],"variable":"--font-roboto-src","display":"swap"}],"variableName":"roboto"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/001f750b538f7a9e-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/80841ae24d03ed90-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/5eae37b69937655e-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/4f48fe9100901594-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/970d71e7dcbc144d-s.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/b3f718d64f9a6dea-s.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/4120b0a488381b31-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/1a634e73dfeff02c-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/1e41be92c43b3255-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/001f750b538f7a9e-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/80841ae24d03ed90-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/5eae37b69937655e-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/4f48fe9100901594-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/970d71e7dcbc144d-s.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/b3f718d64f9a6dea-s.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/4120b0a488381b31-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/1a634e73dfeff02c-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/1e41be92c43b3255-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/001f750b538f7a9e-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/80841ae24d03ed90-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/5eae37b69937655e-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/4f48fe9100901594-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/970d71e7dcbc144d-s.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/b3f718d64f9a6dea-s.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* vietnamese */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/4120b0a488381b31-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/1a634e73dfeff02c-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Roboto_c06d0e';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/_next/static/media/1e41be92c43b3255-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Roboto_Fallback_c06d0e';src: local("Arial");ascent-override: 92.98%;descent-override: 24.47%;line-gap-override: 0.00%;size-adjust: 99.78%
}.__className_c06d0e {font-family: '__Roboto_c06d0e', '__Roboto_Fallback_c06d0e';font-style: normal
}.__variable_c06d0e {--font-roboto-src: '__Roboto_c06d0e', '__Roboto_Fallback_c06d0e'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Syne","arguments":[{"subsets":["latin"],"weight":["600","700"],"variable":"--font-syne-src","display":"swap"}],"variableName":"syne"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* greek */
@font-face {
  font-family: '__Syne_6cab51';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/0da54fcd0470ea43-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: '__Syne_6cab51';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/680a7121f7a85e3f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Syne_6cab51';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/8a1d8947e5852e30-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: '__Syne_6cab51';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/0da54fcd0470ea43-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: '__Syne_6cab51';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/680a7121f7a85e3f-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Syne_6cab51';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/8a1d8947e5852e30-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Syne_Fallback_6cab51';src: local("Arial");ascent-override: 93.93%;descent-override: 27.93%;line-gap-override: 0.00%;size-adjust: 98.47%
}.__className_6cab51 {font-family: '__Syne_6cab51', '__Syne_Fallback_6cab51';font-style: normal
}.__variable_6cab51 {--font-syne-src: '__Syne_6cab51', '__Syne_Fallback_6cab51'
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"DM_Sans","arguments":[{"subsets":["latin"],"variable":"--font-dm-sans-src","display":"swap"}],"variableName":"dmSans"} ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: '__DM_Sans_0d7163';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__DM_Sans_0d7163';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__DM_Sans_Fallback_0d7163';src: local("Arial");ascent-override: 94.90%;descent-override: 29.66%;line-gap-override: 0.00%;size-adjust: 104.53%
}.__className_0d7163 {font-family: '__DM_Sans_0d7163', '__DM_Sans_Fallback_0d7163';font-style: normal
}.__variable_0d7163 {--font-dm-sans-src: '__DM_Sans_0d7163', '__DM_Sans_Fallback_0d7163'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/*
 * Tokens extraídos do app de referência do cliente (docs/reference/website-chat-copied.css).
 * Tema escuro com acento verde-WhatsApp, bolhas estilo WhatsApp.
 *
 * REGRA (combinada no handoff): a tela de Agendamentos do Bruno reutiliza estes
 * tokens e as classes de layout daqui. Não crie paleta nova por página.
 *
 * Tailwind entra por cima disto, não no lugar: tailwind.config.ts espelha
 * estas mesmas custom properties (preflight desligado, então nada abaixo
 * regride). Novo trabalho de design pode usar classes utilitárias; o que já
 * existe aqui continua valendo.
 */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.table-cell {
  display: table-cell;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.resize {
  resize: both;
}
.border {
  border-width: 1px;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

:root {
  /*
   * Escala de superfície da referência. É CINZA QUENTE (matiz 60), não
   * azulada: a primeira extração daqui usou a camada legada de hex
   * (`--bg-sidebar: #13141A`) que ainda existe no CSS do cliente mas não é a
   * que pinta a tela. A marcação real referencia `--v29-convcol-bg` →
   * `--v27-bg-1`. Lado a lado o matiz errado se vê.
   */
  --bg-0: oklch(0.17 0.008 60);
  --bg-1: oklch(0.215 0.008 60);
  --bg-2: oklch(0.255 0.008 60);
  --bg-3: oklch(0.295 0.008 60);
  --bg-4: oklch(0.34 0.01 60);

  /* acento — VERDE, não laranja.
   *
   * O CSS da referência tem DOIS temas completos, e é fácil misturar:
   *
   *   [data-theme=dark]  --accent: #F97316 sobre --bg: #0D0E12   (laranja)
   *   --v27/--v28/--v29  cinza quente + --v28-accent-wa           (verde)
   *
   * Quem manda é o segundo, e a prova está na marcação, não no CSS: os estilos
   * inline do HTML copiado usam `var(--v27-bg-3)` 18 vezes e
   * `var(--v28-accent-wa)` 3 vezes. `#F97316` e `var(--accent)` legado:
   * ZERO ocorrências. O bloco `[data-theme=dark]` é tema morto que sobrou no
   * arquivo — o mesmo bloco de onde saíram os fundos azulados que já tinham
   * sido corrigidos antes.
   *
   * Uma versão anterior deste comentário afirmava que a referência falava
   * "duas línguas de cor de propósito", laranja no chrome e verde na coluna.
   * Estava errado: o laranja aparece só em `--departments-btn-bg`, que a
   * marcação não usa em lugar nenhum. */
  --accent: oklch(0.68 0.18 150);
  --accent-soft: oklch(0.68 0.18 150 / 0.14);
  --accent-glow: oklch(0.68 0.18 150 / 0.35);
  --accent-strong: oklch(0.62 0.19 150);
  /* Mantido como apelido: a coluna de conversas referencia este nome, e agora
   * ele e o acento do produto são a mesma cor — como na referência. */
  --accent-wa: var(--accent);

  /* superfícies */
  --bg: var(--bg-0);
  --bg-nav: var(--bg-0);
  --bg-sidebar: var(--bg-1);
  --bg-chat: var(--bg-1);
  --surface-1: var(--bg-2);
  --surface-2: var(--bg-3);
  --surface-hover: color-mix(in oklch, var(--bg-2) 55%, transparent);
  --surface-active: var(--accent-soft);

  /* linhas da lista de conversas: hover translúcido, ativo sólido */
  --item-hover: color-mix(in oklch, var(--bg-2) 55%, transparent);
  --item-active: var(--bg-2);

  /* bolhas */
  /* Bolha de saída: o verde do WhatsApp no escuro, valor da referência
   * (`--v28-bubble-out-green-dark`). O dump não tem chat aberto, então a bolha
   * é inferida — mas inferir do v28, que é a camada de semântica WhatsApp e
   * traz o `#D9FDD3` clássico na variante clara, é mais defensável que manter
   * o laranja de um tema que a marcação não usa. */
  --bubble-out: oklch(0.33 0.06 160);
  --bubble-out-b: oklch(0.42 0.08 160 / 0.6);
  --bubble-in: oklch(0.3 0.008 60);
  --bubble-in-b: oklch(0.38 0.008 60 / 0.6);
  --bubble-in-shadow: 0 1px 1.5px rgb(11 20 26 / 0.13);
  --bubble-radius: 14px;
  --bubble-max-width: 754px;

  /* traços e texto */
  --border: oklch(0.34 0.008 60 / 0.55);
  --border-s: oklch(0.42 0.008 60 / 0.75);
  --text-1: oklch(0.97 0.005 60);
  --text-2: oklch(0.8 0.006 60);
  --text-3: oklch(0.62 0.006 60);
  --text-4: oklch(0.48 0.006 60);

  /* controles */
  --input-bg: var(--bg-2);
  --input-border: transparent;
  --input-placeholder: var(--text-4);
  --scroll: oklch(0.42 0.008 60 / 0.75);
  --badge-bg: var(--accent);
  --badge-fg: #ffffff;

  /* coluna de conversas */
  --chip-active-bg: var(--accent-wa);
  --chip-active-fg: oklch(0.98 0.005 240);
  --chip-hover-bg: var(--bg-2);
  --chip-count-bg: oklch(0.45 0.006 240);
  --chip-count-fg: oklch(0.98 0.005 240);
  --unread-bg: oklch(0.72 0.18 145);
  --unread-fg: oklch(0.98 0.005 240);
  --check-read: oklch(0.68 0.14 230);
  --check-sent: oklch(0.7 0.01 240);

  /* fundo quadriculado do chat (está na marcação da referência) */
  --chat-bg-pattern: rgba(255, 255, 255, 0.018);

  /* semânticos */
  --success: oklch(0.72 0.18 145);
  --info: oklch(0.78 0.12 230);
  --warn: oklch(0.82 0.14 85);
  --danger: oklch(0.72 0.18 25);

  /* realce de macro no editor
   *
   * Fora da paleta semântica de propósito: verde/amarelo/vermelho já querem
   * dizer "resolve / atenção / não executa" na lista de validação, e pintar as
   * macros com essas mesmas cores faria o operador ler estado onde só há
   * sintaxe. Azul para `@macro` (fala com o lead) e magenta para `/comando`
   * (fala com a equipe) são duas cores que o resto da tela não usa, com contraste
   * alto sobre o fundo escuro do editor (`--bg-1`). */
  --macro: oklch(0.82 0.13 235);
  --command: oklch(0.78 0.16 320);

  /* diff por linha
   *
   * Derivados de --success/--danger em vez de duas cores novas: o painel já
   * ensina que verde é o que está valendo e vermelho é o que não vai executar,
   * e um par próprio para o diff faria a mesma pergunta ("isto é bom ou ruim?")
   * ter duas respostas de cor na mesma tela. O fundo é fraco de propósito — o
   * que se lê é o texto do prompt, e não a faixa atrás dele. */
  --diff-add: oklch(0.82 0.14 145);
  --diff-add-bg: color-mix(in oklch, var(--success) 16%, transparent);
  --diff-del: oklch(0.8 0.13 25);
  --diff-del-bg: color-mix(in oklch, var(--danger) 14%, transparent);
  --diff-gutter: var(--text-4);

  /* raio */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* movimento */
  --motion-fast: 0.14s;
  --motion-base: 0.18s;
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);

  /* tipografia
   * As variáveis `--font-*-src` vêm do next/font em `app/layout.tsx`. Sem elas
   * a cascata caía no sans do sistema — o nome 'Inter Tight' sozinho nunca
   * carregou arquivo nenhum. */
  --font-ui: var(--font-inter-tight-src), 'Inter Tight', Inter, ui-sans-serif, system-ui,
    sans-serif;
  --font-list: var(--font-roboto-src), Roboto, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: var(--font-syne-src), 'Syne', var(--font-ui);
  /* Editor de prompt: uma pilha monoespaçada legível. Mora num token porque o
   * textarea e o `<pre>` de realce atrás dele PRECISAM da mesma fonte, senão o
   * glifo e a cor pintada sob ele desalinham. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-name: 14px;
  --lh-name: 20px;
  --fs-preview: 13px;
  --lh-preview: 18px;
  --fs-time: 11px;
  --lh-time: 14px;

  /* ícones (tamanhos nominais da referência) */
  --icon-rail: 24px;
  --icon-header: 20px;
  --icon-sidebar: 18px;
  --icon-micro: 12px;

  --rail-width: 60px;
  --list-width: 340px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
textarea {
  font: inherit;
  color: inherit;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--scroll);
  border-radius: 999px;
}
::-moz-selection {
  background: var(--accent-soft);
}
::selection {
  background: var(--accent-soft);
}

/* ─── Shell ──────────────────────────────────────────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  height: 100vh;
  overflow: hidden;
}

.rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  /* São doze entradas como na referência: em telas baixas o rail rola em vez
   * de espremer os ícones. */
  overflow-y: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar {
  display: none;
}

.rail__brand {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.rail__item {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--text-2);
  transition: background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}
.rail__item:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.rail__item--active {
  background: var(--surface-active);
  color: var(--accent);
}
/* Fora do MVP: visível para o cliente reconhecer o produto, inerte ao clique. */
.rail__item--off {
  opacity: 0.35;
  cursor: not-allowed;
}
.rail__item--off:hover {
  background: none;
  color: var(--text-2);
}
.rail__spacer {
  flex: 1;
  min-height: 12px;
}

/* ─── Página com duas colunas (chat) ─────────────────────────────────────── */

.workspace {
  display: grid;
  grid-template-columns: var(--list-width) 1fr;
  min-width: 0;
  height: 100vh;
}

.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}

.page__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

/* ─── Coluna de conversas ────────────────────────────────────────────────── */

.conversations {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}

.conversations__header {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.conversations__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
}

.search {
  width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-1);
  outline: none;
}
.search::-moz-placeholder {
  color: var(--input-placeholder);
}
.search::placeholder {
  color: var(--input-placeholder);
}
.search:focus {
  border-color: var(--accent);
}

.chips {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-2);
  transition: background 0.14s ease, color 0.14s ease;
}
.chip:hover {
  background: var(--chip-hover-bg);
}
/* Verde, não laranja: na referência o chip ativo da coluna usa
 * `--v29-chip-active-bg: var(--v28-accent-wa)`. O laranja é do chrome. */
.chip--active {
  background: var(--chip-active-bg);
  color: var(--chip-active-fg);
  font-weight: 500;
}
.chip__count {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--chip-count-bg);
  color: var(--chip-count-fg);
  font-size: var(--fs-time);
  font-variant-numeric: tabular-nums;
}

/* `<select>` nativo por cima do visual de `.chip`: etiqueta é conjunto aberto
 * (YOHAN-4 §P0.4), então a lista de opções muda sozinha — um `<select>`
 * resolve isso sem popover próprio. `appearance: none` tira a seta do SO para
 * não destoar do resto dos chips, que não têm indicador de dropdown. */
.chip--tagFilter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}
.chip--tagFilter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.conversations__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ─── Quadro (kanban) por etapa do funil ─────────────────────────────────── */

.board .page__body {
  overflow-x: auto;
  overflow-y: hidden;
}

.board__columns {
  display: flex;
  gap: 16px;
  height: 100%;
  min-width: -moz-min-content;
  min-width: min-content;
}

/* Mesma largura da coluna de conversas: o `LeadCard` não precisa de nenhuma
 * variante visual entre lista e board. */
.board__column {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--list-width);
  min-height: 0;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.board__columnHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
}

.board__columnTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board__columnList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.board__empty {
  padding: 20px 14px;
  color: var(--text-3);
  font-size: 13px;
}

/* ─── Toggle board/lista ──────────────────────────────────────────────────── */

.viewToggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.viewToggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: 8px;
  color: var(--text-3);
  transition: background 0.14s ease, color 0.14s ease;
}
.viewToggle__btn:hover {
  color: var(--text-1);
}
.viewToggle__btn--active {
  background: var(--chip-active-bg);
  color: var(--chip-active-fg);
}

/* Três colunas como na referência: avatar | corpo | meta.
 * A coluna `meta` fica vazia enquanto o item não emitir `.conv__meta` — o
 * `auto` colapsa sozinho, então isto não muda nada até a marcação chegar. */
.conv {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-list);
  border-bottom: 1px solid var(--border);
  transition: background var(--motion-fast) var(--ease);
}
.conv:hover {
  background: var(--item-hover);
}
.conv--active {
  background: var(--item-active);
}

.avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.conv__body {
  min-width: 0;
}
.conv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.conv__name {
  font-size: var(--fs-name);
  line-height: var(--lh-name);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv__time {
  flex-shrink: 0;
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  color: var(--text-3);
}
.conv__preview {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-preview);
  line-height: var(--lh-preview);
  color: var(--text-3);
  min-width: 0;
}
.conv__previewText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Peças do item de conversa (marcação ainda por escrever — YOHAN-2.md) ──
 *
 * Estilo pronto para o Yohan só emitir a marcação. Cada classe abaixo é uma
 * peça que existe na referência e hoje não é renderizada; a que mais importa é
 * `.conv__labels`, porque `Conversation.tags` já vem preenchido pelo macro
 * `@adicionar_etiqueta` e não aparece em lugar nenhum da tela.
 */

/* Quem falou por último, quando não foi o lead: "Almeida Braga Advogados:" */
.conv__sender {
  flex-shrink: 0;
  color: var(--text-4);
}

/* ✓ enviado / ✓✓ lido. Azul só quando lido, como no WhatsApp. */
.conv__check {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--check-sent);
}
.conv__check--read {
  color: var(--check-read);
}

/* Etiquetas do `@adicionar_etiqueta`, sobrepostas como na referência. */
.conv__labels {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}
.conv__labels > * + * {
  margin-left: -4px;
}
.conv__label {
  filter: drop-shadow(-1.5px 0 0.5px rgba(0, 0, 0, 0.5));
}

/* Coluna da direita: hora, menu, atendente e instância. */
.conv__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  flex-shrink: 0;
}
/* `.conv__menu` e `.conv__indicators` da referência não existem aqui: `.conv` é
 * um <button>, e botão dentro de botão é aninhamento inválido — o parser fecha
 * o item antes do menu e quebra o alvo de clique da conversa inteira. Voltar a
 * ter menu exige `.conv` virar `div role="button"` com teclado na mão, o que é
 * escopo próprio. Não é o mesmo caso de `.conv__unread` e `.conv__check`, que
 * existem abaixo esperando campo no contrato. (`.conv__instance` já está em
 * uso: o snapshot passou a carregar as campanhas.) */

.conv__attendantRow {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
  font-size: var(--fs-time);
}

/* A coluna meta foi desenhada para o pill numérico da instância. Nome de agente
 * tem 25+ caracteres e, sem corte, alarga a coluna até comer o nome do lead. */
.conv__attendantName {
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Uma faixa só, rolando no eixo X — nunca empilhando.
 *
 * Com `flex-wrap: wrap` o card crescia em altura conforme o lead ganhava
 * etiqueta: IA + etapa do funil + follow-up + agendado já quebravam em três
 * linhas, e aí cada conversa da lista tinha uma altura diferente. Lista com
 * linha de altura variável é difícil de varrer com o olho, que é exatamente o
 * que o operador faz o dia inteiro.
 *
 * A rolagem fica sem barra visível e com um esmaecido na direita indicando que
 * há mais — barra de 6px dentro de um card de 40px de altura pesaria mais que
 * o conteúdo. `mask-image` e não gradiente sobreposto porque o fundo do card
 * muda no hover e no estado ativo; um pseudo-elemento com cor fixa apareceria
 * como um retângulo errado nos dois. */
.conv__badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* O esmaecido só entra quando há transbordo; sem isto a última etiqueta de
     uma lista curta nasceria apagada sem motivo. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
.conv__badges::-webkit-scrollbar {
  display: none;
}

/* Etiqueta não encolhe: com `flex-shrink` padrão, o texto de cada uma seria
   espremido até virar reticências em vez de a faixa rolar. */
.conv__badges > .badge {
  flex-shrink: 0;
}

/* O número/handle que atendeu: E.164 completo no WhatsApp
 * ("+55 85 98921-0001") ou @handle no Telegram — não o código curto que o
 * nome da classe sugere. Sem truncar, mesmo problema do `.conv__attendantName`
 * logo acima: a coluna `meta` é `auto` no grid do `.conv`, então o pill largo
 * alarga a coluna até comer o nome do lead. `title` no JSX cobre o valor
 * inteiro. */
/* Passou a exibir só o FINAL do número (4 dígitos), como a referência faz para
   distinguir instância. O max-width caiu junto: 96px era para o número
   inteiro, e sobrando espaço a pílula ficava larga e vazia. O ellipsis fica
   como rede para handle de bot, que não é numérico. */
.conv__instance {
  max-width: 56px;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: var(--bg-3);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv__unread {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--unread-bg);
  color: var(--unread-fg);
  font-size: var(--fs-time);
  font-weight: 600;
  text-align: center;
}
.conv__time--unread {
  color: var(--accent-wa);
}

/* Separador de dia entre blocos da lista ("Hoje"). */
.convDate {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 14px;
  background: var(--bg-sidebar);
  color: var(--text-3);
  font-size: var(--fs-time);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Busca com ícone dentro, como na referência (hoje é um input pelado). */
.searchPill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--input-bg);
  color: var(--text-3);
}
.searchPill:focus-within {
  outline: 1px solid var(--accent);
}
.searchPill input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text-1);
}
.searchPill input::-moz-placeholder {
  color: var(--input-placeholder);
}
.searchPill input::placeholder {
  color: var(--input-placeholder);
}

/* ─── Chat ───────────────────────────────────────────────────────────────── */

.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  background: var(--bg-chat);
}

/* Quadriculado do fundo do chat, com a máscara radial da referência: aparece
 * no topo e some antes de disputar com as bolhas. */
.chat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--chat-bg-pattern) 1px, transparent 1px),
    linear-gradient(to bottom, var(--chat-bg-pattern) 1px, transparent 1px);
  background-size: 20px 30px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 60%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 0%, #000 60%, transparent 100%);
}
.chat > * {
  position: relative;
  z-index: 1;
}

.chat__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}
.chat__headerBody {
  min-width: 0;
  flex: 1;
}
.chat__name {
  font-weight: 600;
}
.chat__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
}

/* ─── Resumo do atendimento (YOHAN-4 §P0.2) ─────────────────────────────────
 * Fechado por padrão: a timeline é a informação primária, o resumo é o atalho
 * para quem está assumindo a conversa agora. A linha visível quando fechado já
 * responde etapa + qualificação + quantos dados foram coletados sem precisar
 * abrir nada — só o detalhe (dado a dado) fica atrás do clique. */
.caseSummary {
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
  font-size: 13px;
}
.caseSummary__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}
.caseSummary__toggle:hover {
  background: var(--item-hover);
}
.caseSummary__title {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text-1);
}
.caseSummary__glance {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: 12px;
}
.caseSummary__body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 4px 18px 16px;
}
.caseSummary__section {
  min-width: 180px;
  flex: 1;
}
.caseSummary__section h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
}
/* "Próximo passo": única seção com fundo próprio — é a resposta que o
 * operador procura primeiro (YOHAN-4/5, 07_DEFINITION_OF_DONE.md), então
 * precisa se destacar das outras sem inventar um token de cor novo. */
.caseSummary__section--highlight {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  flex-basis: 100%;
}
.caseSummary__section--highlight h3 {
  color: var(--accent);
}
.caseSummary__empty {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}
.caseSummary__empty--danger {
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.caseSummary__data {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.caseSummary__dataRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.caseSummary__dataRow dt {
  color: var(--text-3);
}
.caseSummary__dataRow dd {
  margin: 0;
  color: var(--text-1);
  text-align: right;
}
.caseSummary__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.caseSummary__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 12px;
}

/* Linha ícone + texto, reaproveitada por "Agente anterior" e cada item de
 * "Mídia recebida" — mesmo espaçamento do resto do painel. */
.caseSummary__inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-1);
}
.caseSummary__media {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-1);
}

.timeline {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px clamp(16px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bubble {
  max-width: min(var(--bubble-max-width), 78%);
  padding: 8px 12px 6px;
  border-radius: var(--bubble-radius);
  border: 1px solid var(--bubble-in-b);
  background: var(--bubble-in);
  box-shadow: var(--bubble-in-shadow);
  font-family: var(--font-list);
  align-self: flex-start;
}
.bubble--out {
  align-self: flex-end;
  background: var(--bubble-out);
  border-color: var(--bubble-out-b);
}
.bubble__author {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.bubble__author--agent {
  color: var(--accent);
}
.bubble__author--human {
  color: var(--success);
}
.bubble__text {
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble__time {
  margin-top: 2px;
  text-align: right;
  font-size: 11px;
  color: var(--text-3);
}

/* Evento de sistema: NUNCA parecer mensagem do lead. */
.systemEvent {
  align-self: center;
  max-width: 80%;
  margin: 8px 0;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-s);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  text-align: center;
}
/*
 * As três pílulas que importam, e por que cada cor.
 *
 * Antes do acento virar verde, agendamento era laranja e humano era verde:
 * distintos por acidente. Com o acento correto da referência, `--accent` (150)
 * e `--success` (145) ficaram a cinco graus de matiz — duas pílulas verdes que
 * o operador não separa de relance. Resolvido dando à mais importante um peso
 * diferente, não só uma cor diferente: agendamento é a ÚNICA preenchida.
 */

/* Agendamento: o desfecho que o produto existe para produzir. Sólida. */
.systemEvent--appointment {
  border-color: transparent;
  background: var(--accent);
  color: oklch(0.2 0.02 150);
  font-weight: 500;
}

/* Troca de agente: o que o WhatsApp Web não mostra, e o motivo desta tela.
 * Amarelo por indicação do Arthur, que conhece o produto do cliente — a
 * referência copiada não tem o painel do chat aberto, então não há como
 * confirmar por ela. O token já existia (`--v27-warn` de lá). */
.systemEvent--agent {
  border-color: color-mix(in oklch, var(--warn) 55%, transparent);
  color: var(--warn);
  background: color-mix(in oklch, var(--warn) 10%, transparent);
}

/* Humano assumiu: verde, como manda o Cenário 4 do YOHAN.md. Contorno, não
 * preenchimento — é mudança de estado, não o desfecho. */
.systemEvent--human {
  border-color: color-mix(in oklch, var(--success) 60%, transparent);
  color: var(--success);
}

/* Ruído operacional (@dados, @funil, etiqueta): visível, sem competir. */
.systemEvent--muted {
  border-style: dashed;
  color: var(--text-3);
  font-size: 11px;
}

.composer {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
}
.composer__input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  outline: none;
  resize: none;
  max-height: 120px;
}
.composer__input:focus {
  border-color: var(--accent);
}
.composer__send {
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.composer__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Badges e tabela (reaproveitados pela tela do Bruno) ────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-s);
  background: var(--surface-1);
  font-size: 11px;
  color: var(--text-2);
}
.badge--ai {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.badge--human {
  border-color: color-mix(in oklch, var(--success) 60%, transparent);
  color: var(--success);
}
.badge--scheduled {
  border-color: color-mix(in oklch, var(--info) 60%, transparent);
  color: var(--info);
}
.badge--qualified {
  border-color: color-mix(in oklch, var(--success) 60%, transparent);
  color: var(--success);
}
.badge--disqualified {
  border-color: color-mix(in oklch, var(--danger) 60%, transparent);
  color: var(--danger);
}
/* Etapa do funil (`@funil(...)`): texto aberto vindo do macro, não um estado
 * do sistema como os badges acima — por isso cor neutra, sem tomar emprestado
 * o significado de `--accent`/`--success`/`--danger`. Trunca porque o macro
 * pode gravar qualquer string; `title` no JSX cobre o valor inteiro. */
.badge--funnel {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Follow-up pendente: `--warn`, o mesmo token da troca de agente — os dois
 * sinalizam "precisa de atenção", não um desfecho positivo (--success) nem
 * o marco do produto (--accent). */
.badge--followup {
  border-color: color-mix(in oklch, var(--warn) 55%, transparent);
  color: var(--warn);
}

/* A hora dentro da pílula de follow-up. Mais apagada que o "3/4" de propósito:
   o ciclo é o que decide a ação do operador (esperar ou ligar), a hora é
   detalhe de apoio. Mesmo peso deixaria a pílula com dois números disputando
   a atenção. */
.badge__quando {
  margin-left: 4px;
  padding-left: 5px;
  border-left: 1px solid currentcolor;
  opacity: 0.62;
  font-variant-numeric: tabular-nums;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.table tbody tr:hover {
  background: var(--surface-hover);
}

.empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-3);
  text-align: center;
}

.statusDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}
.statusDot--on {
  background: var(--success);
}

/* ─── Editor de prompt dos agentes ────────────────────────────────────────
   Sem cor nova: tudo sai dos tokens que o chat já usa, para a tela parecer a
   mesma aplicação e não um anexo (mesma regra da tela de agendamentos). */

.agents {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  height: 100%;
  min-height: 0;
}

.agents__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agents__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}

.agents__item:hover { background: var(--item-hover); }
.agents__item--active { background: var(--item-active); color: var(--text-1); }

.agents__name { font-size: var(--fs-name); line-height: var(--lh-name); }
.agents__role { font-size: var(--fs-time); line-height: var(--lh-time); color: var(--text-4); }

.agents__editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.agents__label { font-size: var(--fs-preview); color: var(--text-3); }

/* `monospace` de propósito: prompt tem indentação e blocos de macro que só
   ficam legíveis com largura fixa. Fonte, tamanho e altura de linha idênticos
   ao `<pre>` de realce (`--font-mono`, 14/1.6): o texto do campo fica
   transparente por cima do espelho pintado, e qualquer diferença de métrica
   descolaria o glifo da cor sob ele. */
.agents__textarea {
  flex: 1;
  min-height: 360px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-1);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  resize: vertical;
}

.agents__textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.agents__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-preview);
}

.agents__save {
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-preview);
  font-weight: 500;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease);
}

.agents__save:disabled { opacity: 0.45; cursor: default; }
.agents__save:not(:disabled):hover { opacity: 0.88; }

/* ─── Autenticacao ─────────────────────────────────────────────────────── */

.authPage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg-0);
  color: var(--text-2);
}

.authCard {
  width: min(420px, 100%);
  display: grid;
  gap: 18px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-1);
  box-shadow: 0 18px 55px rgb(0 0 0 / 0.28);
}

.authCard h1 { margin: 4px 0 8px; color: var(--text-1); }
.authCard p { margin: 0; color: var(--text-3); line-height: 1.5; }
.authCard__eyebrow { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.authCard label { display: grid; gap: 7px; color: var(--text-2); font-size: var(--fs-preview); }

.authCard input,
.weeklyDay__add input {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-1);
  padding: 10px 12px;
}

.authCard input:focus,
.weeklyDay__add input:focus { outline: none; border-color: var(--accent); }

.authCard button,
.primaryButton {
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.authCard button:disabled,
.primaryButton:disabled { opacity: .45; cursor: default; }
.authCard__error, .inlineError { color: var(--danger) !important; }

.authLogout {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  background: var(--bg-2);
  color: var(--text-3);
  cursor: pointer;
}

/* ─── Administracao da agenda ──────────────────────────────────────────── */

.availability,
.appointmentsSection {
  display: grid;
  gap: 18px;
  margin-bottom: 34px;
}

.availability__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.availability__heading h2 { margin: 0 0 4px; color: var(--text-1); font-size: 18px; }
.availability__heading p { margin: 0; color: var(--text-3); font-size: var(--fs-preview); }
.availability__heading--slots { margin-top: 10px; }
.inlineNotice { color: var(--text-3); }
.inlineSuccess { margin: 0; color: var(--success); }

.weeklyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.weeklyDay {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-1);
}

.weeklyDay__times { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; flex: 1; }
.emptyTime { color: var(--text-4); font-size: var(--fs-preview); }

.timeChip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding-left: 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-1);
  font-size: 12px;
}

.timeChip button,
.weeklyDay__add button {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.timeChip button { width: 24px; height: 24px; }
.weeklyDay__add { display: grid; grid-template-columns: 1fr 32px; gap: 5px; }
.weeklyDay__add input { min-width: 0; padding: 7px 8px; }
.weeklyDay__add button { border-radius: 8px; background: var(--bg-3); color: var(--accent); }

.slotList {
  display: grid;
  gap: 6px;
  max-height: 390px;
  overflow: auto;
  padding-right: 4px;
}

.slotRow {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
}

.slotRow > div { display: flex; flex-direction: column; gap: 2px; }
.slotRow > div span { color: var(--text-4); font-size: 12px; }
.slotRow > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: transparent; color: var(--text-2); cursor: pointer; }
.slotRow > button:disabled { opacity: .4; cursor: default; }
.badge--slot-available { color: var(--accent); }
.badge--slot-blocked { color: var(--danger); }
.badge--slot-booked { color: var(--text-2); }

.followupPolicy {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-1);
}

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

.policyField,
.policyToggle {
  display: grid;
  gap: 7px;
  color: var(--text-3);
  font-size: var(--fs-preview);
}

.policyToggle { display: flex; align-items: center; color: var(--text-2); }
.policyField--wide { grid-column: 1 / -1; }
.policyField input,
.policyField select {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--bg-2);
  color: var(--text-1);
}
.policyField input:focus,
.policyField select:focus { outline: none; border-color: var(--accent); }

.policyDays { display: flex; flex-wrap: wrap; gap: 7px; }
.policyDay {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.policyDay--active { border-color: var(--accent); background: var(--accent-soft); color: var(--text-1); }

.tableHint { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.tableMuted { color: var(--text-2); }
.badge--followup-scheduled { color: var(--accent); }
.badge--followup-processing { color: var(--warn); }
.badge--followup-sent { color: var(--success); }
.badge--followup-cancelled { color: var(--text-3); }
.badge--followup-failed { color: var(--danger); }

@media (max-width: 760px) {
  .availability__heading { align-items: flex-start; flex-direction: column; }
  .slotRow { grid-template-columns: 1fr auto; }
  .slotRow > button { grid-column: 1 / -1; }
  .policyGrid { grid-template-columns: 1fr; }
  .policyField--wide { grid-column: auto; }
}

/* ─── Quadro de agentes ─────────────────────────────────────────────────────
 *
 * Nenhum token novo (CLAUDE.md §7): tudo sai da paleta que o chat já usa. As
 * colunas reaproveitam `.board__*` do funil — é o mesmo objeto visual, só mais
 * estreito, porque card de agente tem duas linhas e o de lead tem cinco.
 */

.agentBoard .page__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.agentBoard__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agentBoard__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: var(--fs-preview);
}

.agentBoard__layout {
  display: flex;
  flex: 1;
  gap: 16px;
  min-height: 0;
}

/* Só o quadro rola na horizontal: o painel do prompt precisa ficar parado ao
 * lado, senão ele sai da tela justamente quando há colunas demais para caber. */
.agentBoard__scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.board__column--agents {
  flex-basis: 264px;
}

/* Fila manual: tracejada e mais apagada que as colunas de IA — é um destino que
 * não recebe agente, e isso tem que se ver antes de tentar arrastar. */
.board__column--manual {
  background: var(--bg-0);
  border-style: dashed;
}

.board__column--over {
  border-color: var(--accent);
}

.board__column--refused {
  border-color: var(--danger);
  background: color-mix(in oklch, var(--danger) 8%, var(--bg-0));
}

.agentColumn__meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
}

.agentColumn__hint {
  padding: 8px 14px 0;
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}

/* Onde o card vai cair. Linha, e não um espaço vazio do tamanho do card: o
 * quadro inteiro dançaria a cada pixel do arrasto. */
.agentColumn__marker {
  height: 2px;
  margin: 2px 12px;
  border-radius: 999px;
  background: var(--accent);
}

.agentCard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  transition: background var(--motion-fast) var(--ease);
}
.agentCard:hover {
  background: var(--item-hover);
}
.agentCard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.agentCard--active {
  background: var(--item-active);
}
/* Fantasma do card que está na mão: sem isto, com o indicador em outra coluna,
 * o operador perde de vista o que está movendo. */
.agentCard--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.agentCard__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agentCard__grip {
  flex-shrink: 0;
  color: var(--text-4);
}

.agentCard__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-name);
  line-height: var(--lh-name);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentCard__remove {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  color: var(--text-4);
}
.agentCard__remove:hover {
  background: var(--bg-3);
  color: var(--danger);
}

/* Recuo igual à largura da alça + gap: as etiquetas alinham com o nome. */
.agentCard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 20px;
}

.agentPanel {
  display: flex;
  flex-direction: column;
  flex: 0 0 380px;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.agentPanel__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agentPanel__identity {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.agentPanel__identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentPanel__department {
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}

.agentPanel__close {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-xs);
  color: var(--text-3);
}
.agentPanel__close:hover {
  background: var(--bg-3);
  color: var(--text-1);
}

/* O editor solto tinha `min-height: 360px` porque ocupava a página inteira.
 * Dentro do painel, que tem a altura da tela, esse piso estourava a coluna. */
.agentPanel .agents__editor {
  flex: 1;
  min-height: 0;
}
.agentPanel .agents__textarea {
  min-height: 0;
}

/* Abaixo disto o painel ao lado do quadro deixaria as duas coisas ilegíveis. */
@media (max-width: 1000px) {
  .agentBoard__layout {
    flex-direction: column;
  }
  .agentPanel {
    flex: 0 0 auto;
    max-height: 46%;
  }
}

/* ─── Dispositivos ────────────────────────────────────────────────────────
 * Nenhum token novo: tudo sai da paleta do chat, como manda a regra da tela do
 * Bruno. O que esta seção acrescenta é layout.
 *
 * A tela tem que servir a duas frotas de tamanhos muito diferentes — 2
 * aparelhos hoje, 43 na plataforma que o cliente opera. Cada decisão abaixo é
 * sobre não deixar nenhum dos dois extremos parecer defeito. */

.devices__summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

/* Limitado em ~46ch porque a linha vive ao lado dos números: solta na largura
 * inteira da página ela vira uma régua de texto e some como instrução. */
.devices__lead {
  max-width: 46ch;
  color: var(--text-3);
  font-size: var(--fs-preview);
}

.devices__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.devices__stat {
  display: grid;
  gap: 2px;
  min-width: 108px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

.devices__statValue {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.devices__statLabel {
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.devices__group {
  margin-bottom: 26px;
}

/* O cabeçalho do grupo é o departamento de entrada, e é o que responde a
 * pergunta da tela ("para onde este bloco aponta"). Linha inferior em vez de
 * fundo: com um grupo por departamento, seis faixas preenchidas empilhadas
 * competiriam com os próprios cartões. */
.devices__groupHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.devices__groupTitle {
  font-size: 15px;
  font-weight: 600;
}

.devices__groupCount {
  color: var(--text-4);
  font-size: var(--fs-preview);
}

/* Coluna com largura MÁXIMA, não `1fr`: com dois aparelhos, `1fr` esticaria
 * cada cartão por toda a página e o pouco conteúdo pareceria tela quebrada.
 * Assim os dois ficam do tamanho certo à esquerda e quarenta viram grade. */
.devices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 336px));
  gap: 12px;
}

.device {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

/* Inativo tracejado, mesmo vocabulário de `.systemEvent--muted`: sai do caminho
 * sem sair da tela — aparelho despareado é justamente o que o operador procura
 * quando abre esta página. */
.device--off {
  border-style: dashed;
  background: transparent;
}

.device__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

/* O final de 4 dígitos é o nome de guerra do aparelho: é por ele que o
 * operador fala do número, e por isso ele é o maior elemento do cartão. Largura
 * mínima fixa para que a coluna de cartões alinhe mesmo com um handle no lugar
 * dos dígitos. */
.device__final {
  display: grid;
  place-items: center;
  min-width: 58px;
  max-width: 92px;
  height: 46px;
  padding: 0 8px;
  border-radius: var(--r-md);
  background: var(--bg-3);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device--off .device__final {
  color: var(--text-3);
}

/* Bot do Telegram não tem final: a caixa mostra o canal em vez de inventar
 * dígito, e o ícone fica em peso menor para não disputar com quem tem número. */
.device__final--icon {
  color: var(--text-3);
}

.device__id {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.device__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device__number {
  color: var(--text-3);
  font-size: var(--fs-preview);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.device__route {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-preview);
}

.device__routeIcon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--text-4);
}

.device__routeStage {
  color: var(--text-4);
}

.device__routeWarn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--warn);
}

/* Enquanto o PATCH não volta, o `<select>` mostra o valor antigo. Desabilitado
 * e visivelmente apagado, porque a alternativa (aceitar um segundo clique) faria
 * duas escritas correrem para a mesma linha. */
.device select:disabled {
  opacity: 0.5;
  cursor: default;
}

.device__saving {
  color: var(--text-4);
  font-size: var(--fs-time);
}

@media (max-width: 760px) {
  .devices__summary { align-items: flex-start; }
  .devices__grid { grid-template-columns: 1fr; }
}

/* ─── Editor de prompt ────────────────────────────────────────────────────
 *
 * Nenhum token novo: o editor mora dentro do `.agentPanel` e tem que parecer a
 * mesma peça que o resto do painel. O que esta seção acrescenta é o menu de
 * macros e a lista de validação.
 *
 * As três severidades reaproveitam os tokens semânticos que a timeline já usa
 * — `--danger` para o que NÃO vai executar, `--warn` para o que executa
 * diferente do que parece, `--success` para o que resolve. É o mesmo
 * vocabulário de cor das pílulas de sistema, então quem opera o chat já sabe
 * ler esta lista. */

.promptEditor {
  gap: 8px;
}

.promptEditor__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Barra de macros: o menu por "@" é o caminho rápido, mas ele só existe para
 * quem já sabe que existe. Os botões são a descoberta — e escrevem exatamente
 * a mesma coisa. */
.promptEditor__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.promptEditor__tool {
  padding: 3px 8px;
  border: 1px solid var(--border);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  cursor: pointer;
  font-family: inherit;
}
.promptEditor__tool:hover {
  border-color: var(--accent);
  color: var(--text-1);
}

.promptEditor__area {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ─── Realce de macro (textarea espelhado) ────────────────────────────────
 *
 * O `<pre>` fica ATRÁS (z 1) e pinta os tokens; o textarea vem por cima (z 2)
 * com o texto transparente, mostrando o espelho e mantendo caret e seleção.
 * O menu de macro (z 5, mais abaixo) segue por cima dos dois.
 *
 * Todo o alinhamento depende de os dois terem a MESMA caixa: mesma fonte,
 * tamanho, altura de linha, padding, borda (largura) e wrap. Só a COR e o
 * fundo diferem. Por isso `resize` some aqui — arrastar a alça mudaria a altura
 * do campo mas não a do espelho, e a parte de baixo do texto ficaria sem cor. */
.promptEditor__highlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--bg-1);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.promptEditor__input {
  position: relative;
  z-index: 2;
  background: transparent;
  color: transparent;
  caret-color: var(--text-1);
  resize: none;
}

.promptEditor__tok--macro {
  color: var(--macro);
  font-weight: 600;
}
.promptEditor__tok--command {
  color: var(--command);
  font-weight: 600;
}

/* ─── Barra de versões do prompt ──────────────────────────────────────────
 * Cada versão é um chip; a que está no ar leva o selo "no ar". A selecionada
 * fica com o fundo do acento — é a que o editor está mostrando. */
.promptEditor__variants {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.promptEditor__variantList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.promptEditor__variant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.promptEditor__variant:hover {
  border-color: var(--accent);
  color: var(--text-1);
}
.promptEditor__variant--sel {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-1);
}

.promptEditor__variantBadge {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.promptEditor__variantsEmpty {
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}

.promptEditor__variantsNote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}
.promptEditor__variantsNote svg {
  flex-shrink: 0;
}

.promptEditor__variantActions {
  flex-wrap: wrap;
}

.promptEditor__variantNameInput {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--fs-preview);
  min-width: 170px;
}
.promptEditor__variantNameInput:focus {
  outline: none;
  border-color: var(--accent);
}
.promptEditor__variantNameInput:disabled {
  opacity: 0.5;
}

.promptEditor__variantBtn {
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
}
.promptEditor__variantBtn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text-1);
}
.promptEditor__variantBtn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Ancorado no rodapé do textarea, sobrepondo o texto: seguir o caret exigiria
 * espelhar o conteúdo num elemento fantasma com a mesma tipografia e o mesmo
 * wrap — peça frágil, que quebra no scroll. Sobrepor mantém o menu a poucos
 * pixels de onde a mão está sem essa dívida. */
.promptEditor__menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  background: var(--bg-2);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.42);
}

.promptEditor__group {
  padding: 6px 8px 3px;
  color: var(--text-4);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.promptEditor__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  text-align: left;
}
.promptEditor__option:hover {
  background: var(--item-hover);
}
.promptEditor__option--active {
  background: var(--accent-soft);
  color: var(--text-1);
}

.promptEditor__optionName {
  flex-shrink: 0;
  font-size: var(--fs-preview);
  font-weight: 500;
}

/* O detalhe explica o destino ("Fila manual", "Entra em Filtragem - Fies") e é
 * o que evita a transferência para o lugar errado — mas não pode empurrar o
 * nome para fora: corta aqui, não lá. */
.promptEditor__optionHint {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--text-4);
  font-size: var(--fs-time);
}

.promptEditor__hint {
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}
.promptEditor__hint kbd {
  padding: 0 4px;
  border: 1px solid var(--border-s);
  border-radius: var(--r-xs);
  background: var(--bg-3);
  color: var(--text-2);
  font-family: inherit;
  font-size: 10px;
}

/* Altura limitada: a lista cresce com o prompt (os de produção têm dezenas de
 * macros) e sem teto ela empurraria o botão Salvar para fora do painel. */
.promptEditor__report {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

.promptEditor__reportHead {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-3);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.promptEditor__count--erro { color: var(--danger); font-weight: 600; }
.promptEditor__count--aviso { color: var(--warn); }
.promptEditor__count--ok { color: var(--success); }

.promptEditor__findings {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.promptEditor__finding {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  border-radius: var(--r-xs);
  color: var(--text-3);
  text-align: left;
  font-size: var(--fs-preview);
  line-height: var(--lh-preview);
}
.promptEditor__finding:hover {
  background: var(--item-hover);
}
.promptEditor__finding svg {
  flex-shrink: 0;
  align-self: center;
}

/* O que não executa fica em vermelho e em peso maior — é a única linha da tela
 * que custa um lead perdido. Aviso e OK ficam legíveis, mas apagados. */
.promptEditor__finding--erro { color: var(--danger); }
.promptEditor__finding--aviso { color: var(--warn); }
.promptEditor__finding--ok svg { color: var(--success); }

.promptEditor__findingLine {
  flex-shrink: 0;
  color: var(--text-4);
  font-size: var(--fs-time);
  font-variant-numeric: tabular-nums;
}

/* Trunca porque o argumento é texto livre do prompt: um `@dados(...)` com seis
 * campos empurraria a explicação para fora da caixa. */
.promptEditor__findingMacro {
  flex-shrink: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
}

.promptEditor__findingText {
  min-width: 0;
  color: var(--text-3);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}
.promptEditor__finding--erro .promptEditor__findingText { color: var(--danger); }
.promptEditor__finding--aviso .promptEditor__findingText { color: var(--warn); }

.promptEditor__save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.promptEditor__counter {
  margin-left: auto;
  color: var(--text-4);
  font-size: var(--fs-time);
  font-variant-numeric: tabular-nums;
}

/* ─── Card de agendamento na timeline ────────────────────────────────────── */
/* Reunião marcada é MARCO, não aviso: é o que o operador procura ao abrir a
   conversa. Antes era uma pílula de texto igual às de etiqueta e funil, e
   sumia na rolagem junto com o ruído. Aqui ganha corpo, data legível e atalho
   para a agenda. Largura limitada para continuar centralizado como as pílulas
   — card de borda a borda pareceria bolha, e bolha é fala do lead. */
.aptCard {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 380px);
  margin: 10px 0;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
  color: var(--text-1);
}

.aptCard--clicavel {
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}
.aptCard--clicavel:hover {
  background: color-mix(in oklch, var(--accent) 18%, var(--bg-2));
  border-color: var(--accent);
}

.aptCard__icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.aptCard__corpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.aptCard__titulo {
  font-size: var(--fs-name);
  font-weight: 600;
}
.aptCard__quando {
  font-size: var(--fs-preview);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.aptCard__acao {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: var(--fs-time);
  color: var(--accent);
}

/* Rodapé da bolha: retomada e hora na MESMA linha.
   Em linhas separadas o card crescia e o olho tinha de descer duas vezes para
   ler dois números que se explicam juntos ("Follow-up 1/4 · hoje 15:49" e
   "14:29"). Alinha à direita porque é onde a hora sempre esteve. */
.bubble__rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Amarelo do sistema (--warn) e não o verde do acento: retomada automática é
   estado que pede atenção, não confirmação. Metadado de operação, então menor
   e mais leve que o texto — com o mesmo peso, o lead pareceria ter recebido
   "Follow-up 1/4" escrito na mensagem. */
.bubble__followup {
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  color: var(--warn);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A pendência é o que o operador procura ao rolar até o fim, então ganha
   contorno; o carimbo do passado fica só no texto. */
.bubble__followup--pendente {
  padding: 1px 7px;
  border: 1px solid color-mix(in oklch, var(--warn) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--warn) 12%, transparent);
}

/* ─── Agenda ──────────────────────────────────────────────────────────────
 * A visão de calendário da tela de agendamentos (handoff 2026-08-12: reunião é
 * o produto, e esta passou a ser a tela mais olhada do painel).
 *
 * Nenhum token de cor novo: a grade sai da mesma paleta do chat. O que ela
 * acrescenta é uma escala própria de altura — `--agenda-hora-altura` é a régua
 * do eixo Y, e todo o resto (linhas de hora, altura do quadro, posição do
 * evento) é derivado dela, então mudar a densidade da agenda é mudar um número.
 *
 * O evento se posiciona em PORCENTAGEM da faixa visível, não em pixel: o React
 * calcula "das 9h às 18h, começa em 22%" e o CSS decide quanto vale 100%. */

.agenda {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.agenda__barra {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.agenda__periodo {
  margin: 0 0 3px;
  color: var(--text-1);
  font-size: 18px;
  font-weight: 600;
}

.agenda__resumo {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-preview);
}

.agenda__acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Âmbar, e não vermelho: é a MESMA pendência que o bloco "Reunião sem
   responsável" mostra no topo desta tela, e ela já é âmbar lá. Duas cores para
   o mesmo aviso na mesma tela leem como dois problemas diferentes.
   O vermelho fica reservado à linha do agora — no calendário ele é convenção de
   "onde estamos", não de erro, e dois vermelhos disputariam a leitura. */
.badge--semDono {
  border-color: color-mix(in oklch, var(--warn) 50%, transparent);
  background: color-mix(in oklch, var(--warn) 12%, transparent);
  color: var(--warn);
}

.agenda__nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-1);
}

.agenda__nav button {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--text-2);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.agenda__nav button:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.agenda__nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.agenda__navHoje {
  font-size: 13px;
}

.agenda__vazio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border-s);
  border-radius: var(--r-md);
  background: var(--bg-1);
  color: var(--text-3);
  font-size: var(--fs-preview);
}
.agenda__vazio svg {
  flex-shrink: 0;
  color: var(--text-4);
}

/* `--agenda-colunas` e `--agenda-linhas` chegam pelo estilo inline do React:
   quantas colunas a semana mostra (sábado só aparece se tiver algo) e quantas
   horas a faixa útil cobre. Os fallbacks são a semana comercial 9–18. */
.agenda__quadro {
  --agenda-hora-altura: 54px;
  --agenda-coluna-horas: 58px;
  display: grid;
  grid-template-columns: var(--agenda-coluna-horas) repeat(var(--agenda-colunas, 5), minmax(0, 1fr));
  grid-template-rows: auto calc(var(--agenda-linhas, 9) * var(--agenda-hora-altura));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-1);
  overflow: hidden;
}

.agenda__canto {
  border-bottom: 1px solid var(--border);
}

.agenda__diaCabecalho {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.agenda__diaNome {
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agenda__diaNumero {
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.agenda__diaCabecalho--hoje {
  background: var(--accent-soft);
}
.agenda__diaCabecalho--hoje .agenda__diaNumero {
  color: var(--accent);
}

/* Rótulo no TOPO da sua faixa, não centralizado nela: a linha desenhada na
   coluna ao lado é a fronteira entre duas horas, e "10:00" tem que encostar
   nela para o olho ler a faixa como "das 10 às 11". */
.agenda__hora {
  display: block;
  height: var(--agenda-hora-altura);
  padding: 4px 8px 0 0;
  text-align: right;
  color: var(--text-4);
  font-size: var(--fs-time);
  font-variant-numeric: tabular-nums;
}

/* Linha da hora no fundo da faixa, não no topo: no topo ela dobraria com a
   borda do cabeçalho na primeira hora. */
.agenda__coluna {
  position: relative;
  border-left: 1px solid var(--border);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--agenda-hora-altura) - 1px),
    var(--border) calc(var(--agenda-hora-altura) - 1px) var(--agenda-hora-altura)
  );
}
.agenda__coluna--hoje {
  background-color: color-mix(in oklch, var(--accent) 5%, transparent);
}
/* Sábado/domingo só entram quando têm reunião — e aí entram recuados, para não
   competirem com os dias em que o escritório de fato atende. */
.agenda__coluna--fimDeSemana {
  background-color: color-mix(in oklch, var(--bg-0) 45%, transparent);
}

/* Onde AINDA cabe reunião — é o que o operador responde quando o lead liga
   perguntando "quando dá?". Tracejado e sem preenchimento de propósito:
   horário livre é ausência de compromisso; com corpo sólido ele competiria com
   as reuniões, que são a informação. */
.agendaLivre {
  position: absolute;
  z-index: 1;
  left: 3px;
  right: 3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 2px 7px;
  border: 1px dashed color-mix(in oklch, var(--accent) 38%, transparent);
  border-radius: var(--r-sm);
  color: color-mix(in oklch, var(--accent) 65%, var(--text-3));
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  white-space: nowrap;
}

/* Bloqueado não é livre nem é reunião: some da leitura, mas o operador precisa
   ver que o buraco na agenda tem dono. */
.agendaLivre--bloqueado {
  border-style: solid;
  border-color: var(--border);
  color: var(--text-4);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    color-mix(in oklch, var(--bg-0) 60%, transparent) 5px 10px
  );
}

.agendaEvento {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 20px;
  overflow: hidden;
  padding: 4px 7px;
  text-align: left;
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: color-mix(in oklch, var(--accent) 16%, var(--bg-2));
  color: var(--text-1);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

button.agendaEvento {
  cursor: pointer;
}
button.agendaEvento:hover {
  background: color-mix(in oklch, var(--accent) 26%, var(--bg-2));
  border-color: var(--accent);
}
.agendaEvento:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.agendaEvento__hora {
  color: var(--text-2);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agendaEvento__lead {
  overflow: hidden;
  font-size: var(--fs-preview);
  line-height: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `margin-top: auto` gruda o responsável na base do card: ele é a resposta de
   quem já leu hora e nome, e alinhado ao pé ele fica no mesmo lugar em todos os
   cards da coluna, em vez de flutuar conforme a altura da reunião. */
.agendaEvento__rodape {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  white-space: nowrap;
}

/* Reunião de meia hora não comporta duas linhas: vira uma só, hora e nome lado
   a lado. */
.agendaEvento--compacto {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 1px 7px;
}

.agendaEvento--cancelled {
  border-color: var(--border-s);
  border-left-color: var(--text-4);
  background: var(--bg-2);
  color: var(--text-3);
}
.agendaEvento--cancelled .agendaEvento__lead {
  text-decoration: line-through;
}
.agendaEvento--completed {
  border-left-color: var(--success);
  background: color-mix(in oklch, var(--success) 10%, var(--bg-2));
}
.agendaEvento--no_show {
  border-left-color: var(--danger);
  background: color-mix(in oklch, var(--danger) 10%, var(--bg-2));
}

/* A reunião sem dono não muda de tamanho nem de lugar — muda de cor e ganha a
   tarja âmbar na lateral. É a mesma reunião: o que falta é alguém. */
.agendaEvento--alerta {
  border-color: color-mix(in oklch, var(--warn) 50%, transparent);
  border-left-color: var(--warn);
  background: color-mix(in oklch, var(--warn) 13%, var(--bg-2));
}
.agendaEvento--alerta .agendaEvento__rodape {
  color: var(--warn);
}
button.agendaEvento--alerta:hover {
  border-color: var(--warn);
  background: color-mix(in oklch, var(--warn) 20%, var(--bg-2));
}

/* Linha do agora: fina e sem rótulo, atravessando só a coluna de hoje. A hora
   já está no eixo — repetir o número aqui só disputaria atenção com as
   reuniões. */
.agenda__agora {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 0;
  border-top: 1px solid var(--danger);
  pointer-events: none;
}
.agenda__agora::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger);
}

.agenda__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
  font-size: var(--fs-time);
}
.agenda__legendaItem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.agenda__amostra {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--border-s);
}
.agenda__amostra--reuniao {
  border-color: color-mix(in oklch, var(--accent) 42%, transparent);
  background: color-mix(in oklch, var(--accent) 30%, var(--bg-2));
}
.agenda__amostra--livre {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent) 38%, transparent);
}
.agenda__amostra--semDono {
  border-color: color-mix(in oklch, var(--warn) 60%, transparent);
  background: color-mix(in oklch, var(--warn) 25%, var(--bg-2));
}

/* Em tela estreita a coluna de horas encolhe e o nome do dia sai: cinco colunas
   de 1fr já ficam apertadas, e é a largura do card que decide se o nome do lead
   aparece ou vira reticências. */
@media (max-width: 860px) {
  .agenda__quadro {
    --agenda-coluna-horas: 44px;
    --agenda-hora-altura: 48px;
  }
  .agenda__diaCabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 7px 6px;
  }
  .agendaLivre {
    padding: 2px 4px;
  }
}

/* ─── Modo IA ─────────────────────────────────────────────────────────────
 * O compositor com revisão: o atendente escreve o rascunho, o revisor devolve
 * a mensagem já corrigida, e a pessoa decide.
 *
 * POR QUE A PRÉVIA MORA ENTRE A TIMELINE E O COMPOSITOR
 * A promessa do modo é "é isto que vai sair". Ela só se cumpre se a sugestão
 * cair na coluna onde a mensagem real aparece — mesma borda direita, mesmo
 * recuo lateral da `.timeline`, mesma `.bubble--out`. Card de formulário no
 * meio do caminho quebraria justamente a leitura que o atendente precisa fazer
 * num segundo: "essa é a frase que o lead vai ler".
 *
 * POR QUE TRACEJADA E TRANSLÚCIDA
 * Ela ainda não existe. Bolha cheia, igual às outras, faria o atendente achar
 * que já enviou — e a diferença entre pré-visualizar e ter enviado é o produto
 * inteiro deste modo. Nenhum token novo: é a bolha de saída com o peso
 * reduzido.
 *
 * A altura é limitada porque `.chat` tem 100vh: sugestão longa não pode empurrar
 * a conversa para fora da tela. */

.composerIA {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

.composerIA__previa {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
  padding: 10px clamp(16px, 6vw, 64px);
}
/* Sem revisão na tela a região continua no documento (é ela que anuncia a
   sugestão ao leitor de tela), mas não pode ocupar faixa nenhuma. `display:
   none` a tiraria também da árvore de acessibilidade, que é o oposto do que ela
   está fazendo ali. */
.composerIA__previa:empty {
  padding: 0;
}

.bubble.composerIA__bolha {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  background: color-mix(in oklch, var(--bubble-out) 50%, transparent);
}

/* Rótulo no lugar do `.bubble__author`: diz de quem é a frase sem competir com
   ela. Minúsculo e em caixa alta pequena porque é etiqueta, não fala. */
.composerIA__rotulo {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.composerIA__bolha--esperando {
  display: flex;
  align-items: center;
  gap: 10px;
}
.composerIA__bolha--esperando .composerIA__rotulo {
  margin-bottom: 0;
  color: var(--text-3);
}

.composerIA__pontos {
  display: inline-flex;
  gap: 4px;
}
.composerIA__pontos i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: composerIAPulso 1.05s ease-in-out infinite;
}
.composerIA__pontos i:nth-child(2) {
  animation-delay: 0.15s;
}
.composerIA__pontos i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes composerIAPulso {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* Nada aqui pisca para quem pediu para nada piscar — a espera continua legível
   pelo texto do rótulo. */
@media (prefers-reduced-motion: reduce) {
  .composerIA__pontos i {
    animation: none;
    opacity: 0.6;
  }
}

/* "O que eu mudei": justifica a troca do texto do atendente pelo do revisor.
   Alinhado à direita e apagado — quem confia só clica em Enviar, quem
   desconfia lê. */
.composerIA__notas {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: min(var(--bubble-max-width), 78%);
  text-align: right;
  color: var(--text-3);
  font-size: 11px;
  line-height: 15px;
}
.composerIA__notasTitulo {
  color: var(--text-4);
  letter-spacing: 0.02em;
}
.composerIA__notasLista {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
}

/* As três decisões, coladas na bolha: é onde o olho já está. */
.composerIA__acoes {
  display: flex;
  align-items: center;
  gap: 6px;
}
.composerIA__acao {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-s);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.composerIA__acao:hover {
  background: var(--surface-2);
  color: var(--text-1);
}
.composerIA__acao:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Enviar é a ação esperada e a única preenchida: as outras duas são desvios. */
.composerIA__acao--enviar {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.composerIA__acao--enviar:hover {
  background: var(--accent-strong);
  color: #fff;
}
/* Descartar não é destrutivo — envia o rascunho do atendente. Vermelho aqui
   assustaria quem só quer o próprio texto de volta. */
.composerIA__acao--descartar {
  border-style: dashed;
}

/* O interruptor do modo, dentro do compositor: o estado precisa ser legível de
   relance porque ele muda o que a tecla Enter faz. Por isso a palavra
   "ligado"/"desligado" escrita, e não só a cor — cor sozinha some para quem não
   a distingue, e o atendente descobriria a mudança pelo comportamento. */
.composerIA__modo {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-s);
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.composerIA__modo:hover {
  background: var(--surface-hover);
  color: var(--text-2);
}
.composerIA__modo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.composerIA__modo--ligado {
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}
.composerIA__modoEstado {
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-0) 55%, transparent);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* O rótulo do botão alterna entre "Revisar", "Revisando…" e "Enviar rascunho":
   sem largura mínima o compositor inteiro dança a cada troca de estado. */
.composerIA__enviar {
  min-width: 132px;
}

/* Tela estreita: o interruptor perde a palavra do estado antes de o campo de
   texto ficar pequeno demais para escrever. A cor e o `aria-checked` seguem
   dizendo em que modo ele está. */
@media (max-width: 720px) {
  .composerIA__modoEstado {
    display: none;
  }
  .composerIA__enviar {
    min-width: 0;
  }
}

/* ─── Modo dev ─────────────────────────────────────────────────────────────
 * Tela /desenvolvedor: os agentes que operam a ferramenta e o log do copiloto.
 *
 * Nenhum token novo, como nas outras telas — o modo desenvolvedor é o mesmo
 * produto visto por dentro, não um painel de administração à parte. O que esta
 * seção acrescenta é layout e os selos de estado das propostas.
 */

/* A entrada no rail fica depois do espaçador, e a linha diz que ali começa
 * outra coisa. Mais apagada que as telas de operação: é setup, não o trabalho
 * do dia — mas acende como qualquer outra quando é a tela aberta. */
.rail__divisor {
  width: 22px;
  height: 1px;
  flex-shrink: 0;
  margin: 4px 0;
  background: var(--border-s);
}

.rail__item--dev {
  color: var(--text-3);
}
.rail__item--dev:hover {
  color: var(--text-1);
}

.modoDev .page__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Texto corrido tem medida: a linha inteira de um monitor largo é ilegível. */
.modoDev__intro {
  max-width: 78ch;
  color: var(--text-2);
}
.modoDev__intro strong {
  color: var(--text-1);
}

/* O aviso do gate que ainda não existe. Cor de atenção (--warn), não de erro:
 * nada está quebrado, falta uma etapa — e quem apresenta precisa saber disso
 * antes de a pergunta vir da plateia. */
.modoDev__aviso {
  max-width: 78ch;
  margin-top: -14px;
  color: var(--warn);
  font-size: var(--fs-preview);
}

.modoDev__carregando {
  color: var(--text-3);
}
.modoDev__carregando code {
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--bg-2);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ─── Cartões dos agentes de sistema ─────────────────────────────────────── */

/* `align-items: start` para o cartão fechado não esticar até a altura do
 * vizinho aberto — são quatro fichas de tamanhos diferentes, não um grid de
 * quadros iguais. */
.agentesSistema {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  align-items: start;
  gap: 14px;
}

.agenteSistema {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

/* Aberto, o cartão toma a linha: ver o comentário no componente. */
.agenteSistema--aberto {
  grid-column: 1 / -1;
  border-color: var(--border-s);
}

.agenteSistema--off {
  opacity: 0.6;
}

.agenteSistema__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agenteSistema__icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}

.agenteSistema__id {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.agenteSistema__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-name);
  line-height: var(--lh-name);
}

.agenteSistema__slug {
  color: var(--text-4);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}

.agenteSistema__oQueFaz {
  max-width: 78ch;
  color: var(--text-2);
  font-size: var(--fs-preview);
  line-height: 1.5;
}

.agenteSistema__abrir {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-s);
  color: var(--text-2);
  font-size: 12px;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.agenteSistema__abrir:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.agenteSistema__abrir:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.agenteSistema__tamanho {
  padding-left: 8px;
  margin-left: 2px;
  border-left: 1px solid var(--border-s);
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* Uma linha só: é a abertura do prompt, não um resumo dele. */
.agenteSistema__previa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-4);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

/* O piso de 360px do editor foi feito para ele ocupar a página inteira; dentro
 * do cartão ele empurra o log para fora da tela (mesmo motivo do ajuste em
 * `.agentPanel`). O textarea continua redimensionável na mão. */
.agenteSistema .agents__textarea {
  min-height: 260px;
}

/* ─── Log das propostas do copiloto ──────────────────────────────────────── */

.logAcoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logAcoes__titulo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.logAcoes__texto {
  max-width: 78ch;
  color: var(--text-3);
  font-size: var(--fs-preview);
}

.logAcoes__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.logAcoes__recarregar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-s);
  color: var(--text-2);
  font-size: 12px;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.logAcoes__recarregar:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}
.logAcoes__recarregar:disabled {
  opacity: 0.45;
  cursor: default;
}

/* A tabela tem quatro colunas e o resumo é uma frase inteira: em tela estreita
 * ela rola dentro da caixa, em vez de espremer a coluna que interessa. */
.logAcoes__scroll {
  overflow-x: auto;
}

.logAcoes__quando {
  white-space: nowrap;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.logAcoes__tool {
  white-space: nowrap;
  color: var(--text-2);
}

.logAcoes__resumo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 32ch;
  color: var(--text-1);
}

.logAcoes__erro {
  color: var(--danger);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}

/* Vazio é o estado NORMAL de uma instalação nova. Traço tracejado e texto
 * apagado dizem "ainda não aconteceu"; caixa vermelha diria "quebrou". */
.logAcoes__vazio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 78ch;
  padding: 22px;
  border: 1px dashed var(--border-s);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: var(--fs-preview);
}

.logAcoes__vazioTitulo {
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 15px;
}

/* Os estados de `copilot_actions` (migration 0014). As cores repetem a
 * semântica que o painel já usa: --warn é o que espera decisão de alguém,
 * --success é o que terminou bem, --danger é o que falhou, neutro é o que
 * acabou sem efeito (recusada, desfeita). */
.badge--acao-pending {
  border-color: color-mix(in oklch, var(--warn) 55%, transparent);
  color: var(--warn);
}
.badge--acao-approved {
  border-color: color-mix(in oklch, var(--info) 55%, transparent);
  color: var(--info);
}
.badge--acao-applied {
  border-color: color-mix(in oklch, var(--success) 60%, transparent);
  color: var(--success);
}
.badge--acao-rejected,
.badge--acao-undone,
.badge--acao-desconhecido {
  color: var(--text-3);
}
.badge--acao-failed {
  border-color: color-mix(in oklch, var(--danger) 60%, transparent);
  color: var(--danger);
}

/* Abaixo disto duas colunas de cartão deixam o nome do agente e o botão na
 * mesma linha apertados; uma coluna só continua legível. */
@media (max-width: 900px) {
  .agentesSistema {
    grid-template-columns: 1fr;
  }
}

/* ─── Copiloto ─────────────────────────────────────────────────────────────
 * A doca de suporte (components/CopilotoDoca.tsx). Mora no layout, então esta
 * seção pinta um elemento que está vivo nas cinco telas ao mesmo tempo.
 *
 * NENHUMA COR NOVA, como no resto do arquivo: a doca é a mesma aplicação vista
 * de um canto, não um widget de terceiro colado por cima. Bolha, chip, badge e
 * compositor são as classes que o chat já usa; o que nasce aqui é a moldura
 * flutuante e os dois formatos que só existem nela — a pílula de navegação e o
 * cartão de proposta.
 *
 * A CAMADA. Até aqui o maior z-index do painel era 20 (`.authLogout`). A doca
 * fica acima disso porque é o único elemento que precisa continuar alcançável
 * com qualquer tela aberta. O painel fica um degrau ABAIXO do botão: o botão
 * também é o fechamento, e o painel se apoia encostado nele — um degrau acima
 * cobriria justamente o alvo que desfaz a ação.
 */

/* Fechado, ele é discreto de propósito: fica por cima de tela de trabalho o
 * tempo todo, e um botão preenchido de acento no canto competiria com o
 * agendamento — que é o único verde sólido do produto. */
.copiloto__botao {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-s);
  background: var(--bg-2);
  color: var(--text-3);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.3);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.copiloto__botao:hover {
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  background: var(--surface-2);
  color: var(--text-1);
}
.copiloto__botao:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Aberto o botão é o X: mais contraste, porque agora ele é o alvo de saída. */
.copiloto__botao--aberta {
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  background: var(--surface-2);
  color: var(--text-1);
}

/* 380px é a medida do `.agentPanel`: a mesma coluna auxiliar que a tela de
 * agentes já usa, para a doca não introduzir uma terceira largura no produto.
 * A altura tem teto para a conversa não virar uma coluna do chão ao teto em
 * monitor alto — e piso de sobra em tela baixa (108 = 20 do botão + 48 dele +
 * 12 de folga + 28 de respiro no topo). */
.copiloto {
  position: fixed;
  right: 20px;
  bottom: 80px;
  z-index: 59;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(680px, calc(100vh - 108px));
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-1);
  box-shadow: 0 18px 55px rgb(0 0 0 / 0.28);
  overflow: hidden;
}

.copiloto__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}

.copiloto__titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.copiloto__titulo svg {
  color: var(--accent);
}

.copiloto__fechar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-xs);
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.copiloto__fechar:hover {
  background: var(--surface-hover);
  color: var(--text-1);
}

/* Histórico que não veio é `--warn`, não `--danger`: perder a conversa antiga
 * não impede perguntar, e vermelho no topo diria que a doca quebrou. */
.copiloto__aviso {
  margin: 0;
  padding: 6px 12px;
  background: color-mix(in oklch, var(--warn) 10%, transparent);
  color: var(--warn);
  font-size: 11px;
  line-height: 15px;
}

.copiloto__lista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  overflow-y: auto;
  /* A doca flutua por cima de tela que também rola. Sem isto, rolar até o fim
   * da conversa continua rolando a página atrás dela. */
  overscroll-behavior: contain;
}

.copiloto__carregando {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.copiloto__vazio {
  display: grid;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
}
.copiloto__vazio p {
  margin: 0;
}

.copiloto__sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* `.chip` nasceu como filtro da coluna de conversas: não tem borda nem cursor
 * porque lá o contorno vem do estado ativo. Aqui cada chip é um botão que
 * dispara uma pergunta, e precisa parecer clicável. */
.copiloto__sugestao {
  border: 1px solid var(--border-s);
  font-size: 12px;
  cursor: pointer;
}

/* O turno é uma coluna própria porque a bolha de saída se alinha com
 * `align-self` (regra do chat, reaproveitada) — sem um container de largura
 * inteira, não haveria eixo onde ela se alinhar, e a pergunta do operador
 * ficaria à esquerda como a resposta. */
.copiloto__turno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.copiloto__turno--operador {
  align-items: flex-end;
}

/* Os 78% de `.bubble` são medida de chat largo; num painel de 380px eles
 * espremem a frase em quatro linhas. Vale para a bolha de espera também, que
 * vem do ComposerIA e não carrega classe daqui. */
.copiloto__bolha,
.copiloto__turno .bubble {
  max-width: 88%;
}

/* A pílula de navegação NÃO pode parecer bolha: bolha é o que foi dito, isto é
 * o que acontece se você clicar. Contorno de acento, e o preenchimento só no
 * hover — o mesmo vocabulário do `.composerIA__acao--enviar`. */
.copiloto__navegar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklch, var(--accent) 45%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}
.copiloto__navegar:hover {
  border-color: transparent;
  background: var(--accent-strong);
  color: #fff;
}
.copiloto__navegar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* O cartão de proposta é tracejado pelo mesmo motivo da prévia do ComposerIA:
 * ainda não existe. Cheio, ele leria como recibo do que foi criado — e a
 * diferença entre proposto e aplicado é o produto inteiro desta fila. */
.copiloto__proposta {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed color-mix(in oklch, var(--warn) 45%, transparent);
  border-radius: 12px;
  background: var(--surface-1);
}

.copiloto__propostaTopo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Mesmo `--warn` do selo "espera decisão" no log do modo desenvolvedor: é a
 * mesma proposta vista de outro lugar, e cor diferente faria parecer outra
 * coisa. */
.copiloto__propostaSelo {
  border-color: color-mix(in oklch, var(--warn) 55%, transparent);
  color: var(--warn);
}

.copiloto__propostaEstado {
  color: var(--warn);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.copiloto__propostaResumo {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.45;
}

.copiloto__propostaNada {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 15px;
}

.copiloto__propostaLink {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
}
.copiloto__propostaLink:hover {
  text-decoration: underline;
}

.copiloto__erro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  font-size: 12px;
}

/* Não reusa `.composer`: o `padding: 12px 18px` dele é medida de tela cheia e
 * come a largura útil de um painel de 380px. */
.copiloto__compositor {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
}

/* A pílula de 999px do compositor do chat deforma quando o campo cresce para
 * três linhas — num painel estreito isso acontece o tempo todo. */
.copiloto__campo {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.copiloto__enviar {
  padding: 0 12px;
  font-size: 13px;
}

/* Em tela estreita o painel ocupa a largura toda: 380px numa faixa de 360
 * sairia pela borda, e a conversa é o conteúdo — não há segunda coluna para
 * preservar. */
@media (max-width: 560px) {
  .copiloto {
    left: 8px;
    right: 8px;
    bottom: 76px;
    width: auto;
    height: calc(100dvh - 96px);
  }
}

/* ─── Onde a doca encosta em tela que já existia ─────────────────────────── */

/* O botão redondo cai exatamente sobre o "Revisar/Enviar" do compositor, que
 * mora na borda direita do `.composer` — e o `.chat` vai até a borda da tela.
 * O recuo devolve o botão do atendente para dentro: 76 = 20 da margem + 48 do
 * botão + 8 de folga. */
.chat .composer {
  padding-right: 76px;
}

/* O canto inferior direito era do "Sair" (`.authLogout`, fixo em 14/14). Dois
 * elementos fixos no mesmo canto significam um deles inalcançável, e quem
 * chega por último cede o lugar — mas o botão da doca precisa do canto, que é
 * onde se procura suporte. O "Sair" sobe para a linha de cima; de quebra, ele
 * para de encostar no compositor do chat, onde já se sobrepunha ao envio.
 *
 * Nenhuma regra acima foi alterada: isto é sobrescrita por ordem de cascata,
 * e some junto com a doca se ela for removida. */
.authLogout {
  bottom: 78px;
}

/* Com a doca ABERTA o painel passa por cima dessa linha. O seletor de irmão
 * depende da ordem do `AuthGate` (a doca é renderizada antes do "Sair"), e o
 * pior caso da ordem mudar é o botão voltar a ficar atrás do painel — que é
 * exatamente o estado que esta regra evita, nunca um layout quebrado. */
.copiloto ~ .authLogout {
  right: 416px;
}
@media (max-width: 560px) {
  /* Painel de largura inteira: não há para onde deslocar. Ele volta assim que
   * a doca fecha. */
  .copiloto ~ .authLogout {
    display: none;
  }
}

/* ─── Documento do lead dentro da bolha ───────────────────────────────────
 * A bolha mostrava "[imagem recebida]" e nem o operador nem o painel sabiam o
 * que havia ali. Agora o que a IA leu (resumo + campos) fica na própria bolha,
 * e o original só é assinado quando alguém pede.
 *
 * Nenhum token novo: o cartão vive DENTRO da bolha, que tem duas cores de fundo
 * (cinza recebida, verde enviada), então o fundo é um escurecimento por
 * `color-mix` em vez de cor fixa — a mesma regra assenta nas duas.
 */
.docCard {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in oklch, var(--bg-0) 55%, transparent);
}

/* Ainda lendo: contorno tracejado, mesmo vocabulário do `.systemEvent--muted`
   para "isto ainda não é definitivo". */
.docCard--lendo {
  border-style: dashed;
}

.docCard__thumb {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-s);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}
.docCard__thumb:hover:not(:disabled),
.docCard__thumb:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.docCard__thumb:disabled {
  cursor: progress;
}

.docCard__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.docCard__thumbVazio {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.docCard__thumbRotulo {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docCard__girando {
  animation: docCardGira 1s linear infinite;
}
@keyframes docCardGira {
  to {
    transform: rotate(360deg);
  }
}
/* Cartão que gira sem parar numa conversa aberta o dia todo é exatamente o que
   `prefers-reduced-motion` pede para não existir. O ícone continua lá. */
@media (prefers-reduced-motion: reduce) {
  .docCard__girando {
    animation: none;
  }
}

.docCard__corpo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.docCard__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.docCard__tipo {
  font-size: var(--fs-preview);
  font-weight: 600;
  color: var(--text-1);
}
.docCard__estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  color: var(--text-3);
}
/* Amarelo do sistema, não vermelho: o arquivo continua no bucket e continua
   abrível — o que falhou foi a leitura automática, não a entrega. */
.docCard__estado--falha {
  color: var(--warn);
}

.docCard__resumo {
  margin: 0;
  font-size: var(--fs-preview);
  line-height: var(--lh-preview);
  color: var(--text-2);
}

/* Campos lidos: pares em coluna, duas colunas quando cabe. O rótulo apagado e o
   valor forte porque a leitura útil é a do NÚMERO — "12.837,72" é o que o
   operador procura, "Saldo devedor" é só a etiqueta dele. */
.docCard__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 4px 14px;
  margin: 2px 0 0;
}
.docCard__campo {
  min-width: 0;
}
.docCard__campo dt {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-3);
}
.docCard__campo dd {
  margin: 0;
  font-size: var(--fs-preview);
  line-height: var(--lh-preview);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.docCard__mais {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: var(--fs-time);
  cursor: pointer;
}
.docCard__mais:hover {
  text-decoration: underline;
}

.docCard__aviso {
  margin: 0;
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  color: var(--text-3);
}
/* Amarelo só quando algo deu errado de verdade. Formato sem leitura automática
   (áudio, vídeo) é regra do extrator, não incidente — a etiqueta do topo já
   avisa, e repetir a cor aqui pintaria de alerta a metade da conversa. */
.docCard__aviso--falha {
  color: var(--warn);
}

.docCard__rodape {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  color: var(--text-3);
}
/* Nome de arquivo de canal é longo e sem valor no meio ("WhatsApp Image
   2026-08-12 at 15.47.01.jpeg"): truncar mantém o rodapé em uma linha, e o
   nome inteiro fica no `title`. */
.docCard__arquivo {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docCard__abrir {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
}
.docCard__abrir:hover {
  text-decoration: underline;
}

/* Numa faixa estreita a bolha inteira encolhe: a miniatura cede primeiro, para
   o resumo continuar cabendo em duas linhas em vez de seis. */
@media (max-width: 560px) {
  .docCard__thumb {
    width: 44px;
    height: 44px;
  }
  .docCard__campos {
    grid-template-columns: 1fr;
  }
}

/* ─── Decidir a proposta do copiloto ───────────────────────────────────────
 *
 * O MESMO cartão em dois lugares: a doca (380px, flutuando sobre a tela) e a
 * fila do modo desenvolvedor (largura de página). Por isso nada aqui fixa
 * largura — o cartão ocupa o que o pai der, e o diff quebra em vez de rolar.
 * Nenhum token novo: os estados reusam --warn/--info/--success/--danger, que
 * são os mesmos do selo `.badge--acao-*` do log logo acima. */

/* Tracejado enquanto pende, pelo mesmo motivo da prévia do ComposerIA: ainda
 * não existe. Decidida, o contorno fecha — a diferença entre proposto e
 * aplicado é o produto inteiro desta fila, e ela tem de se ver de relance,
 * antes de alguém ler o selo. */
.proposta {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
}
.proposta--pending {
  border-style: dashed;
  border-color: color-mix(in oklch, var(--warn) 45%, transparent);
}
.proposta--approved {
  border-color: color-mix(in oklch, var(--info) 45%, transparent);
}
.proposta--applied {
  border-color: color-mix(in oklch, var(--success) 45%, transparent);
}
.proposta--failed {
  border-color: color-mix(in oklch, var(--danger) 50%, transparent);
}

.proposta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.proposta__estado {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.proposta--pending .proposta__estado {
  color: var(--warn);
}
.proposta--applied .proposta__estado {
  color: var(--success);
}
.proposta--failed .proposta__estado {
  color: var(--danger);
}

/* O resumo é o que a pessoa lê para decidir; por isso é o único texto em
 * tamanho de leitura dentro do cartão. */
.proposta__resumo {
  margin: 0;
  color: var(--text-1);
  font-size: 13px;
  line-height: 1.45;
}

/* O diff fica sobre fundo mais escuro que a bolha para ler como CITAÇÃO do
 * banco, e não como mais uma frase do copiloto: o que está aqui não é opinião
 * dele, é o antes e o depois de uma linha. */
.proposta__diff {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--bg-0) 55%, transparent);
}

.proposta__campo {
  display: grid;
  grid-template-columns: minmax(72px, 26%) 1fr;
  gap: 2px 10px;
  align-items: baseline;
}

.proposta__campoNome {
  color: var(--text-3);
  font-size: 11px;
}

.proposta__campoValor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1.45;
  /* Prompt cortado em 240 caracteres ainda é uma palavra só para o navegador
   * quando vem sem espaço; sem isto ele estoura o cartão da doca. */
  overflow-wrap: anywhere;
}

.proposta__antes {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, var(--danger) 55%, transparent);
}
.proposta__seta {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-4);
}
/* Ausente e em branco viram a mesma palavra: numa coluna vazia ninguém
 * distingue "estava sem valor" de "a tela não sabe". */
.proposta__vazio {
  color: var(--text-4);
}

.proposta__nota {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 15px;
}
.proposta__nota--alerta {
  color: var(--warn);
}
.proposta__nota--erro {
  color: var(--danger);
}

/* A recusa do orquestrador é frase acionável em português ("recarregue a
 * proposta", "outra pessoa decidiu antes"). Fica dentro do cartão, colada nos
 * botões: é ali que a pessoa está olhando depois de clicar. */
.proposta__falha {
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--danger) 12%, transparent);
  color: var(--danger);
  font-size: 11px;
  line-height: 15px;
}

.proposta__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proposta__botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-s);
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}
.proposta__botao:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text-1);
}
.proposta__botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Aprovar é a única ação preenchida — é o caminho esperado, e as outras são
 * desvios. Mesmo vocabulário de `.composerIA__acao--enviar`. */
.proposta__botao--aprovar {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.proposta__botao--aprovar:hover:not(:disabled) {
  background: var(--accent-strong);
  color: #fff;
}
.proposta__botao--recusar {
  border-color: color-mix(in oklch, var(--danger) 55%, transparent);
  color: var(--danger);
}
.proposta__botao--desfazer {
  border-style: dashed;
}

.proposta__motivo {
  display: grid;
  gap: 6px;
}
.proposta__motivoRotulo {
  color: var(--text-3);
  font-size: 11px;
  line-height: 15px;
}
.proposta__motivoCampo {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-s);
  background: var(--input-bg);
  color: var(--text-1);
  font-size: 12px;
}
.proposta__motivoCampo::-moz-placeholder {
  color: var(--input-placeholder);
}
.proposta__motivoCampo::placeholder {
  color: var(--input-placeholder);
}
.proposta__motivoCampo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ─── Fila de pendentes, no modo desenvolvedor ──────────────────────────── */

/* Destacada com a cor de "espera decisão" que o log já usa no selo: é trabalho
 * parado esperando uma pessoa, e some da tela assim que a fila esvazia. */
.filaPendente {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in oklch, var(--warn) 40%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in oklch, var(--warn) 6%, transparent);
}

.filaPendente__titulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
}

.filaPendente__texto {
  max-width: 78ch;
  color: var(--text-3);
  font-size: var(--fs-preview);
}

.filaPendente__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  align-items: start;
}

/* ─── Colunas novas do histórico ────────────────────────────────────────── */

.logAcoes__quem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  color: var(--text-3);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}

.logAcoes__detalhe {
  color: var(--text-3);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
}

.logAcoes__situacao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Na doca (380px) e no celular o rótulo do campo em cima do valor: duas
 * colunas ali deixam o valor com quatro caracteres por linha. */
@media (max-width: 560px) {
  .proposta__campo {
    grid-template-columns: 1fr;
  }
}
.copiloto .proposta__campo {
  grid-template-columns: 1fr;
}

/* A célula do resumo volta a ser célula.
 *
 * Ela nasceu `display:flex` para empilhar o resumo e o erro, e isso funcionava
 * enquanto era a única `<td>` assim: uma `<td>` que deixa de ser `table-cell`
 * sai do modelo da tabela e vira bloco dentro de uma célula anônima — com a
 * borda desenhada na altura do próprio conteúdo, e não na da linha. Com a
 * coluna "Quem" em duas linhas, isso virava um risco solto no meio da linha.
 * Aqui a pilha volta a ser dos filhos, e a célula, célula. (Sobrescrito no fim
 * do arquivo em vez de editado lá em cima: o bloco original é de outro dono.) */
.logAcoes__resumo {
  display: table-cell;
}
.logAcoes__resumo > .logAcoes__erro,
.logAcoes__resumo > .logAcoes__detalhe {
  display: block;
  margin-top: 4px;
}

/* Log é leitura de cima para baixo: com uma célula de duas linhas, alinhar pela
 * base joga a data para o meio da linha e a lista deixa de ter uma régua. */
.logAcoes .table td {
  vertical-align: top;
}

/* Fila sem nada pendente, só com o que acabou de ser decidido: a caixa
 * continua para segurar o resultado do clique, mas perde o amarelo de "espera
 * você" — senão ela pediria decisão de algo já decidido. */
.filaPendente--resolvida {
  border-color: var(--border);
  background: transparent;
}
.filaPendente--resolvida .filaPendente__titulo {
  color: var(--text-2);
}

/* ─── Dispositivos: estado de conexão da frota ────────────────────────────
 *
 * Somado no fim do arquivo, e não dentro do bloco `.device` lá em cima, porque
 * aquele bloco é de outro dono e três agentes estão neste arquivo na mesma
 * rodada — mesma convenção do `.logAcoes__resumo` acima.
 *
 * Nenhum token novo. O que estas regras acrescentam é UMA distinção que a
 * paleta ainda não fazia: "não sei" tem que ser visivelmente diferente de
 * "está no ar" E de "caiu". Verde e vermelho já existem (`--success`,
 * `--danger`); o desconhecido fica no cinza dos tokens de texto, sem
 * preenchimento — desenho de ausência, não de estado. */

.badge--online {
  border-color: color-mix(in oklch, var(--success) 60%, transparent);
  color: var(--success);
}
.badge--offline {
  border-color: color-mix(in oklch, var(--danger) 60%, transparent);
  color: var(--danger);
}

.statusDot--off {
  background: var(--danger);
}
/* Oco: a diferença entre "não sei" e "desligado" não pode depender só de
 * matiz — com daltonismo, ou num monitor ruim, os dois cinzas empatam. O miolo
 * vazado sobrevive a isso. */
.statusDot--unknown {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-4);
}

/* Coluna da esquerda do resumo: a frase e a hora da leitura são a mesma peça e
 * têm que subir juntas quando os números quebram para a linha de baixo. */
.devices__intro {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.devices__checkedAt {
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: var(--lh-time);
  font-variant-numeric: tabular-nums;
}
.devices__checkedAt--warn {
  max-width: 46ch;
  color: var(--warn);
}

/* O contador de conectados é o único número do resumo que muda sozinho: verde
 * quando a frota inteira responde, âmbar quando falta alguém. Sem estado
 * "vermelho" de propósito — quem diz qual aparelho caiu é o cartão, e um total
 * em vermelho no topo mandaria procurar um problema que a tela já localizou. */
.devices__stat--on .devices__statValue {
  color: var(--success);
}
.devices__stat--alerta {
  border-color: color-mix(in oklch, var(--warn) 45%, transparent);
}
.devices__stat--alerta .devices__statValue {
  color: var(--warn);
}

/* Avisos da frota (número no ar sem cadastro, número em dois gateways). Ficam
 * ACIMA dos grupos porque não pertencem a departamento nenhum — é exatamente o
 * que há de errado com eles. */
.devices__avisos {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.devices__aviso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklch, var(--warn) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in oklch, var(--warn) 8%, transparent);
  color: var(--text-2);
  font-size: var(--fs-preview);
  line-height: 1.45;
}
.devices__aviso svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--warn);
}
.devices__aviso strong {
  color: var(--text-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Linha de rodapé do cartão: motivo do estado ou divergência entre cadastro e
 * aparelho. Fica antes do `<select>` porque é ela que explica por que alguém
 * mexeria no controle logo abaixo. */
.device__note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: -4px;
  color: var(--text-4);
  font-size: var(--fs-time);
  line-height: 1.45;
}
.device__note--warn {
  color: var(--warn);
}
.device__noteIcon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* O cabeçalho do cartão passa a QUEBRAR em vez de espremer o número.
 *
 * O selo virou "Desconectado"/"Desconhecido", bem mais largo que o "Ativo" que
 * ocupava esta coluna antes, e na grade de três colunas quem cedia largura era
 * o número — que aparecia como "+55 (11) 94794-0…". Justo no cartão do
 * aparelho com problema, e justo o dado que o operador vai ler em voz alta
 * para quem for consertar. Com flex e uma largura mínima na identidade, o selo
 * desce uma linha quando não cabe e o número fica inteiro. (Sobrescrito aqui, e
 * não editado no bloco original, porque aquele bloco é de outro dono.) */
.device__head {
  display: flex;
  flex-wrap: wrap;
}
.device__id {
  flex: 1 1 auto;
  /* Medido, não chutado: "+55 (11) 94794-0569" ocupa 130px na fonte da lista.
   * Com este piso, o cartão saudável ("Conectado", o selo mais curto) mantém
   * tudo numa linha só, e os selos maiores — que são os dos aparelhos com
   * problema — descem para a linha de baixo em vez de comer o número. O cartão
   * que destoa é o que precisa de atenção, então destoar ajuda. */
  min-width: 134px;
}

/* ─── Estado tri-estado da frota + funil canônico + tela de leads ──────────
 *
 * Somado no fim do arquivo pela mesma convenção das seções acima: o bloco
 * `.device`/`.table` lá em cima é de outro dono e o arquivo tem mais de um
 * agente por rodada.
 *
 * NENHUM TOKEN NOVO (CLAUDE.md §7). O que estas regras acrescentam é o terceiro
 * estado de conexão — "aguardando QR Code" — que a paleta já sabia dizer com
 * `--warn` mas nenhuma classe expunha, e quatro tons genéricos de selo que a
 * tela de leads usa para separar desfecho bom de ruim sem inventar cor. */

/* Âmbar: não é falha, é ação pendente de gente (alguém precisa ler o código).
 * Mesmo token do "precisa de atenção" do resto do painel. */
.badge--waiting {
  border-color: color-mix(in oklch, var(--warn) 60%, transparent);
  color: var(--warn);
}
.statusDot--waiting {
  background: var(--warn);
}

/* Tons genéricos de selo. Existem porque `badge--qualified` e
 * `badge--disqualified` já carregam um significado ("o agente qualificou") que
 * não é o desfecho de uma reunião — reaproveitar o nome faria a marcação da
 * tela de leads mentir sobre o que está mostrando. */
.badge--ok {
  border-color: color-mix(in oklch, var(--success) 60%, transparent);
  color: var(--success);
}
.badge--ruim {
  border-color: color-mix(in oklch, var(--danger) 60%, transparent);
  color: var(--danger);
}
.badge--atencao {
  border-color: color-mix(in oklch, var(--warn) 55%, transparent);
  color: var(--warn);
}
.badge--neutro {
  border-color: color-mix(in oklch, var(--info) 55%, transparent);
  color: var(--info);
}

/* O título da coluna do quadro virou link para a tela de leads daquela etapa.
 * Sem sublinhado e herdando a cor: dentro do cabeçalho ele continua sendo o
 * título, e não um link azul no meio do kanban. */
.board__columnLink {
  /* O corte do texto mora aqui, e não mais só no `.board__columnTitle`: o
   * título virou filho de um <a>, e `text-overflow` não age sobre elemento
   * inline — sem isto, uma etapa de nome longo empurraria a contagem para fora
   * do cabeçalho. */
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.board__columnLink:hover .board__columnTitle {
  color: var(--accent);
}
.board__columnLink:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ─── Tela de leads ──────────────────────────────────────────────────────── */

/* Os filtros são sete e precisam caber juntos: quem opera combina campanha +
 * período + closer na mesma pergunta. Grade que quebra sozinha, em vez de uma
 * linha com rolagem horizontal — filtro escondido é filtro que não existe. */
.leads__filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  gap: 10px 12px;
  margin-bottom: 18px;
}

.leads__busca {
  grid-column: span 2;
}

/* A tabela tem dez colunas e não cabe em tela estreita. A rolagem é DELA, e não
 * da página: com a página rolando na horizontal, o rail e o cabeçalho saem da
 * vista junto. */
.leads__tabela {
  overflow-x: auto;
}
.leads__tabela .table {
  min-width: 1080px;
}

.leads__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .leads__busca {
    grid-column: auto;
  }
}

/* ─── Documentos — reprodução da tela fornecida em `refrencia.md` ─────────
 *
 * O HTML de referência é uma tabela compacta de contratos. Nesta adaptação a
 * linguagem muda para documentos, mas a hierarquia visual permanece: filtros,
 * três indicadores, tabela e rodapé. Os detalhes expandem dentro da própria
 * linha porque cada conversa pode conter tipos diferentes de arquivo e o MVP
 * ainda não oferece um ZIP do conjunto.
 */

.documentsOriginalPage {
  overflow-y: auto;
  background: var(--bg);
}

.documentsOriginal {
  --docs-card: #15181a;
  --docs-inset: #1b1f21;
  --docs-inset-2: #22272a;
  --docs-text: #eef1f0;
  --docs-text-muted: #9aa3a6;
  --docs-text-faint: #6a7378;
  --docs-border: #262b2e;
  --docs-border-strong: #333a3e;
  --docs-brand: #2bd06e;
  --docs-brand-soft: #15301f;
  --docs-brand-ink: #7ee2a8;
  --docs-shadow: 0 1px 2px rgb(0 0 0 / 40%);
  --docs-shadow-card: 0 1px 2px rgb(0 0 0 / 35%), 0 6px 18px rgb(0 0 0 / 18%);

  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 24px 28px;
  color: var(--docs-text);
  font-family: var(--font-dm-sans-src), sans-serif;
}

.documentsOriginal__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.documentsOriginal__heading h1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--docs-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.documentsOriginal__heading h1 svg {
  color: var(--docs-brand);
}
.documentsOriginal__heading p {
  margin: 0;
  color: var(--docs-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.documentsOriginal__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.documentsOriginal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.documentsOriginal__field > span {
  color: var(--docs-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.documentsOriginal__field input,
.documentsOriginal__field select,
.documentsOriginal__search {
  min-height: 34px;
  border: 1px solid var(--docs-border);
  border-radius: 10px;
  background: var(--docs-card);
  color: var(--docs-text);
  box-shadow: var(--docs-shadow);
  font: inherit;
  font-size: 13px;
  outline: 0;
  transition: border-color 150ms ease;
}
.documentsOriginal__field input,
.documentsOriginal__field select {
  padding: 7px 10px;
}
.documentsOriginal__field select {
  min-width: 154px;
}
.documentsOriginal__field input[type='date'] {
  width: 146px;
  color-scheme: dark;
}
.documentsOriginal__field input:hover,
.documentsOriginal__field select:hover,
.documentsOriginal__search:hover {
  border-color: var(--docs-border-strong);
}
.documentsOriginal__field input:focus,
.documentsOriginal__field select:focus,
.documentsOriginal__search:focus-within {
  border-color: var(--docs-brand);
}
.documentsOriginal__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 230px;
}
.documentsOriginal__search svg {
  position: absolute;
  left: 10px;
  color: var(--docs-text-faint);
  pointer-events: none;
}
.documentsOriginal__search input {
  width: 100%;
  min-width: 0;
  padding: 7px 10px 7px 31px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.documentsOriginal__search input::-moz-placeholder {
  color: var(--docs-text-faint);
}
.documentsOriginal__search input::placeholder {
  color: var(--docs-text-faint);
}

.documentsOriginal__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--docs-border);
  border-radius: 9px;
  background: var(--docs-card);
  color: var(--docs-text);
  box-shadow: var(--docs-shadow);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.documentsOriginal__button:hover:not(:disabled) {
  border-color: var(--docs-border-strong);
  background: var(--docs-inset);
}
.documentsOriginal__button:focus-visible {
  outline: 2px solid var(--docs-brand);
  outline-offset: 2px;
}
.documentsOriginal__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.documentsOriginal__button--primary {
  border-color: color-mix(in srgb, var(--docs-brand) 35%, var(--docs-border));
  background: var(--docs-brand-soft);
  color: var(--docs-brand-ink);
}
.documentsOriginal__export {
  align-self: flex-end;
  min-height: 34px;
  margin-left: auto;
  padding: 7px 12px;
  font-size: 13px;
}

.documentsOriginal__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.documentsOriginal__metrics > div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--docs-border);
  border-radius: 10px;
  background: var(--docs-card);
  box-shadow: var(--docs-shadow);
}
.documentsOriginal__metrics strong {
  color: var(--docs-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.documentsOriginal__metrics span {
  color: var(--docs-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.documentsOriginal__tableCard {
  overflow: hidden;
  border: 1px solid var(--docs-border);
  border-radius: 16px;
  background: var(--docs-card);
  box-shadow: var(--docs-shadow-card);
}
.documentsOriginal__tableScroll {
  overflow-x: auto;
}
.documentsOriginal table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
}
.documentsOriginal thead {
  background: var(--docs-inset);
}
.documentsOriginal th {
  padding: 13px 16px;
  color: var(--docs-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}
.documentsOriginal__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: uppercase;
  cursor: pointer;
}
.documentsOriginal__sort svg {
  opacity: 0.4;
}
.documentsOriginal__sort:hover,
.documentsOriginal__sort--active {
  color: var(--docs-text);
}
.documentsOriginal__sort--active svg {
  color: var(--docs-brand);
  opacity: 1;
}
.documentsOriginal__actionHeading,
.documentsOriginal__actionCell {
  text-align: right !important;
}
.documentsOriginal tbody tr {
  border-top: 1px solid var(--docs-border);
}
.documentsOriginal tbody tr:first-child {
  border-top: 0;
}
.documentsOriginal__row {
  transition: background 150ms ease;
}
.documentsOriginal__row:hover,
.documentsOriginal__row--expanded {
  background: var(--docs-inset);
}
.documentsOriginal td {
  padding: 14px 12px;
  color: var(--docs-text);
  font-size: 13.5px;
  vertical-align: middle;
}
.documentsOriginal__clientCell,
.documentsOriginal__instanceCell {
  max-width: 250px;
  display: table-cell;
}
.documentsOriginal__clientCell > button,
.documentsOriginal__clientCell > span,
.documentsOriginal__instanceCell > span,
.documentsOriginal__instanceCell > button {
  display: block;
  overflow: hidden;
  max-width: 235px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.documentsOriginal__clientCell > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--docs-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.documentsOriginal__clientCell > button:hover {
  color: var(--docs-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.documentsOriginal__clientCell > span,
.documentsOriginal__instanceCell > button {
  margin-top: 2px;
  color: var(--docs-text-faint);
  font-size: 11px;
}
.documentsOriginal__instanceCell > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.documentsOriginal__instanceCell > button:hover {
  color: var(--docs-brand);
}
.documentsOriginal__dateCell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.documentsOriginal__count {
  min-width: 21px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--docs-inset-2);
  color: var(--docs-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.documentsOriginal__chevron {
  color: var(--docs-text-faint);
  transition: transform 150ms ease;
}
.documentsOriginal__chevron--open {
  transform: rotate(180deg);
}
.documentsOriginal__actionWrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.documentsOriginal__actionError {
  display: block;
  overflow: hidden;
  max-width: 180px;
  color: var(--danger);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.documentsOriginal__spin,
.documentsOriginalFile__status--pending svg {
  animation: docOriginalSpin 1s linear infinite;
}

.documentsOriginal__detailsRow {
  background: #111416;
}
.documentsOriginal__detailsRow > td {
  padding: 0;
}
.documentsOriginal__details {
  padding: 16px 18px 18px;
  border-top: 1px solid color-mix(in srgb, var(--docs-brand) 22%, var(--docs-border));
}
.documentsOriginal__detailsHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.documentsOriginal__detailsHeading > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.documentsOriginal__detailsHeading strong {
  font-size: 13px;
}
.documentsOriginal__detailsHeading span {
  color: var(--docs-text-muted);
  font-size: 11px;
}
.documentsOriginal__detailsHeading button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--docs-text-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.documentsOriginal__detailsHeading button:hover {
  color: var(--docs-brand);
}
.documentsOriginal__fileGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 8px;
}

.documentsOriginalFile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--docs-border);
  border-radius: 11px;
  background: var(--docs-card);
}
.documentsOriginalFile__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--docs-inset-2);
  color: var(--docs-text-muted);
}
.documentsOriginalFile__icon--image { color: var(--docs-brand); }
.documentsOriginalFile__icon--video,
.documentsOriginalFile__icon--audio { color: var(--info); }
.documentsOriginalFile__icon--pdf { color: var(--danger); }
.documentsOriginalFile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.documentsOriginalFile__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.documentsOriginalFile__topline strong {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.documentsOriginalFile__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  color: var(--docs-text-muted);
  font-size: 9.5px;
}
.documentsOriginalFile__status--extracted { color: var(--docs-brand-ink); }
.documentsOriginalFile__status--failed,
.documentsOriginalFile__status--unsupported { color: var(--warn); }
.documentsOriginalFile p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--docs-text-muted);
  font-size: 11.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.documentsOriginalFile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  color: var(--docs-text-faint);
  font-size: 9.5px;
}
.documentsOriginalFile__actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.documentsOriginalFile__actions .documentsOriginal__button {
  min-height: 27px;
  padding: 4px 8px;
  font-size: 11px;
}

.documentsOriginal__state {
  height: 170px;
  color: var(--docs-text-muted) !important;
  text-align: center;
}
.documentsOriginal__state > svg,
.documentsOriginal__state > span,
.documentsOriginal__state > button {
  margin: 0 3px;
  vertical-align: middle;
}
.documentsOriginal__state--error {
  color: var(--warn) !important;
}
.documentsOriginal__footer {
  color: var(--docs-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@keyframes docOriginalSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .documentsOriginal__export {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .documentsOriginal {
    gap: 16px;
    padding: 14px 12px 24px;
  }
  .documentsOriginal__filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .documentsOriginal__field--search {
    grid-column: 1 / -1;
  }
  .documentsOriginal__search,
  .documentsOriginal__field select,
  .documentsOriginal__field input[type='date'],
  .documentsOriginal__export {
    width: 100%;
  }
  .documentsOriginal__export {
    grid-column: 1 / -1;
  }
  .documentsOriginal__heading p {
    max-width: 48ch;
  }
}

/* ─── Operações da conversa, nota interna e resultado da reunião ───────────
 *
 * Somado no fim do arquivo pela convenção das seções acima (o arquivo tem mais
 * de um dono por rodada e os blocos originais são de outra frente).
 *
 * NENHUM TOKEN NOVO (CLAUDE.md §7). O post-it da nota interna é o único
 * elemento com cor própria e ela é derivada de `--warn` — o mesmo amarelo do
 * "precisa de gente" do resto do painel, que é exatamente o que uma nota
 * interna é. */

/* ─── Menu de ações do chat (o kebab do cabeçalho) ───────────────────────── */

.chatActions {
  position: relative;
  flex-shrink: 0;
}

.chatActions__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}
.chatActions__botao:hover,
.chatActions__botao[aria-expanded='true'] {
  background: var(--item-hover);
  color: var(--text-1);
}

/* Sobreposto, não empurrando o layout: o cabeçalho é uma linha só e um menu
 * que abre no fluxo empurraria a timeline inteira para baixo a cada clique. */
.chatActions__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 262px;
  padding: 6px;
  border: 1px solid var(--border-s);
  border-radius: var(--r-md);
  background: var(--bg-1);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.38);
}

.chatActions__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-preview);
  text-align: left;
  cursor: pointer;
}
.chatActions__item:hover:not(:disabled) {
  background: var(--item-hover);
  color: var(--text-1);
}
.chatActions__item:disabled {
  opacity: 0.5;
  cursor: default;
}
.chatActions__item svg {
  flex-shrink: 0;
  color: var(--text-3);
}

.chatActions__separador {
  height: 1px;
  margin: 5px 4px;
  background: var(--border);
}

/* O closer é escolha, não gatilho: fica num campo com rótulo em vez de virar
 * mais um item de menu que abriria um segundo nível de submenu. */
.chatActions__campo {
  display: grid;
  gap: 5px;
  padding: 8px 10px 10px;
}
.chatActions__rotulo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-3);
  font-size: var(--fs-time);
}
.chatActions__rotulo svg {
  color: var(--text-3);
}
.chatActions__campo select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--input-bg);
  color: var(--text-1);
  font-size: var(--fs-preview);
}

/* Resposta da ação, colada no cabeçalho onde ela foi disparada. Some quando a
 * conversa muda (ver ChatPanel): confirmação de outra conversa é mentira. */
.chat__aviso {
  margin: 0;
  padding: 7px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--success) 9%, var(--bg-sidebar));
  color: var(--success);
  font-size: var(--fs-preview);
}
.chat__aviso--erro {
  background: color-mix(in oklch, var(--danger) 9%, var(--bg-sidebar));
  color: var(--danger);
}

/* ─── Nota interna na timeline ───────────────────────────────────────────── */

/* O bilhete NÃO é uma bolha e não pode virar uma por acidente: sem raio de
 * bolha, sem cauda, sem alinhamento à direita (onde ficam as falas enviadas) e
 * com o selo em caixa alta que nenhuma mensagem tem. Ele fica encostado à
 * esquerda com largura própria — dentro da coluna da conversa, mas claramente
 * fora do diálogo. */
.nota {
  align-self: flex-start;
  max-width: min(560px, 86%);
  margin: 6px 0;
  padding: 8px 12px 7px;
  border: 1px solid color-mix(in oklch, var(--warn) 45%, transparent);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  background: color-mix(in oklch, var(--warn) 10%, var(--bg-2));
  font-family: var(--font-list);
}

.nota__selo {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  color: var(--warn);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nota__texto {
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}

.nota__rodape {
  margin-top: 4px;
  color: var(--text-3);
  font-size: var(--fs-time);
}

/* ─── Seletor de modo do compositor ──────────────────────────────────────── */

.composerModo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px clamp(16px, 6vw, 64px) 0;
  background: var(--bg-sidebar);
}

.composerModo__opcao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-time);
  cursor: pointer;
}
.composerModo__opcao--ativa {
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  background: var(--accent-soft);
  color: var(--text-1);
}
/* O modo nota tem a cor da nota, não a do produto: o compositor inteiro muda
 * de tom junto, e é essa mudança que impede alguém de escrever para si mesmo
 * achando que está respondendo ao lead. */
.composerModo__opcao--nota.composerModo__opcao--ativa {
  border-color: color-mix(in oklch, var(--warn) 55%, transparent);
  background: color-mix(in oklch, var(--warn) 16%, transparent);
  color: var(--warn);
}

.composerModo__dica {
  color: var(--text-4);
  font-size: var(--fs-time);
}
.composerIA--nota .composerModo__dica {
  color: var(--warn);
}

.composer--nota {
  background: color-mix(in oklch, var(--warn) 7%, var(--bg-sidebar));
}
.composer--nota .composer__input:focus {
  border-color: var(--warn);
}
.composer--nota .composer__send {
  background: var(--warn);
  color: oklch(0.25 0.03 85);
}

/* ─── Coluna de conversas: bloco das fixadas ─────────────────────────────── */

.convDate--fixadas {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
}

/* ─── Pílula do resultado da reunião ─────────────────────────────────────── */

/* Contorno e não preenchimento: o preenchido é do agendamento, que é o marco.
 * O resultado é o desfecho do mesmo marco — mesma família, peso menor. */
.systemEvent--result {
  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
  color: var(--accent);
  font-weight: 500;
}

/* ─── Registro do resultado (/agendamentos) ──────────────────────────────── */

/* A linha herda `.slotRow` (três colunas) e ganha uma quarta faixa embaixo: os
 * cinco desfechos não cabem ao lado do nome sem espremer o lead a duas
 * palavras. */
.slotRow.resultado {
  grid-template-columns: minmax(190px, 1fr) auto auto;
}

.resultado__opcoes {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}

/* ─── Resultado no card da agenda ────────────────────────────────────────── */

/* `margin-left: auto` encosta o selo na direita, tanto dentro do rodapé quanto
 * na linha única do card compacto; `flex-shrink: 0` faz o NOME ceder largura
 * primeiro — o nome tem reticências, o desfecho pela metade ("não fec…") seria
 * o oposto de informação. */
.agendaEvento__resultado {
  flex-shrink: 0;
  margin-left: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 0 5px;
  border-radius: var(--r-xs);
  background: color-mix(in oklch, var(--text-1) 12%, transparent);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agendaEvento__resultado--fechou,
.agendaEvento__resultado--sinal_pago {
  background: color-mix(in oklch, var(--success) 22%, transparent);
  color: var(--success);
}
.agendaEvento__resultado--nao_fechou {
  background: color-mix(in oklch, var(--danger) 20%, transparent);
  color: var(--danger);
}
.agendaEvento__resultado--nao_compareceu {
  background: color-mix(in oklch, var(--warn) 20%, transparent);
  color: var(--warn);
}

/* A tarja lateral segue o desfecho — é ela que dá para ler varrendo a semana
 * com o olho, sem parar em cada card. */
.agendaEvento--resultado-fechou,
.agendaEvento--resultado-sinal_pago {
  border-left-color: var(--success);
}
.agendaEvento--resultado-nao_fechou {
  border-left-color: var(--danger);
}
.agendaEvento--resultado-nao_compareceu {
  border-left-color: var(--warn);
}

/* O desfecho dentro do card da reunião, na mesma linha da data: é a resposta
 * de quem já leu "quando", e uma linha nova empurraria o botão "ver na agenda"
 * para fora do card em telas estreitas. */
.aptCard__resultado {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--accent) 55%, transparent);
  color: var(--accent);
  font-size: var(--fs-time);
  font-weight: 600;
  font-variant-numeric: normal;
  white-space: nowrap;
}

/* ─── Revisão visual da sugestão: diff, origem, macros e a fila ────────────
 *
 * O cartão de proposta já existia (ver "Decidir a proposta do copiloto"); o que
 * entra aqui é o que faltava para a confirmação humana valer alguma coisa —
 * ver o TEXTO que muda, e não uma frase sobre ele. Nada aqui fixa largura: o
 * mesmo cartão é desenhado na doca de 380px e na largura da tela de agentes. */

/* Utilitário: texto que só o leitor de tela ouve. O sinal "+/−" do diff é
 * visual; sem um par falado, trinta linhas seriam anunciadas idênticas. */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Diff por linha ──────────────────────────────────────────────────────── */

.diff {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--bg-0) 55%, transparent);
}

.diff__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.diff__campo {
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.diff__contagem {
  display: inline-flex;
  gap: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.diff__mais { color: var(--diff-add); }
.diff__menos { color: var(--diff-del); }
.diff__nada { color: var(--text-4); font-size: 11px; }

.diff__aviso {
  margin: 0;
  color: var(--warn);
  font-size: 11px;
  line-height: 15px;
}

/* Rola no eixo X dentro do próprio quadro: prompt tem linha longa, e quebrar
 * palavra no meio de uma macro (`@departa\nmento(...)`) faria a conferência
 * mentir sobre o que está escrito. */
.diff__corpo {
  max-height: 320px;
  overflow: auto;
  border-radius: 8px;
  background: var(--bg-0);
}

.diff__bloco {
  display: block;
}

.diff__linha {
  display: grid;
  grid-template-columns: 34px 14px 1fr;
  align-items: baseline;
  gap: 4px;
  padding: 0 6px;
}
.diff__linha--removida {
  background: var(--diff-del-bg);
  color: var(--diff-del);
}
.diff__linha--adicionada {
  background: var(--diff-add-bg);
  color: var(--diff-add);
}

.diff__numero {
  color: var(--diff-gutter);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.diff__sinal {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.diff__texto {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 17px;
  white-space: pre;
  color: inherit;
}
.diff__linha--igual .diff__texto {
  color: var(--text-3);
}

.diff__expandir {
  display: block;
  width: 100%;
  padding: 2px 6px;
  border: 0;
  background: color-mix(in oklch, var(--bg-2) 60%, transparent);
  color: var(--text-4);
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}
.diff__expandir:hover {
  color: var(--text-2);
}

/* ─── Cartão de proposta: origem, texto e macros ──────────────────────────── */

.proposta__selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.proposta__origem {
  padding: 1px 7px;
  font-size: 10px;
}
/* A proposta de máquina tem cor própria: quem aprova precisa saber, antes de
 * ler o diff, que ninguém do escritório conferiu isto antes de chegar. */
.proposta__origem--ia_testes {
  border-color: color-mix(in oklch, var(--info) 55%, transparent);
  background: color-mix(in oklch, var(--info) 12%, transparent);
  color: var(--info);
}
.proposta__origem--copiloto {
  color: var(--text-3);
}

.proposta__texto {
  display: grid;
  gap: 6px;
}

.proposta__macros {
  display: grid;
  gap: 4px;
}

.proposta__macrosTitulo {
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.proposta__macrosLista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.proposta__macro {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.proposta__macro--entra {
  background: var(--diff-add-bg);
  color: var(--diff-add);
}
.proposta__macro--sai {
  background: var(--diff-del-bg);
  color: var(--diff-del);
}

/* O bloqueio é caixa, e não linha de texto: ele muda o que a pessoa pode fazer
 * na tela, e precisa ser lido antes de ela procurar o botão. */
.proposta__bloqueio {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklch, var(--danger) 45%, transparent);
  background: color-mix(in oklch, var(--danger) 8%, transparent);
}

.proposta__bloqueioTitulo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}

.proposta__bloqueioLista {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
  color: var(--text-2);
  font-size: 11px;
  line-height: 16px;
}
.proposta__bloqueioLista code {
  color: var(--danger);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.proposta__bloqueioLinha {
  color: var(--text-4);
}

/* ─── Fila de sugestões em /agentes ───────────────────────────────────────── */

.sugestoes {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklch, var(--warn) 35%, transparent);
  background: color-mix(in oklch, var(--warn) 5%, var(--surface-1));
}

.sugestoes__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sugestoes__titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
}

.sugestoes__texto {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 17px;
}

/* Uma coluna: cada cartão pede leitura de diff, e duas colunas de diff lado a
 * lado convidam a passar o olho — que é o oposto do que esta fila é. */
.sugestoes__lista {
  display: grid;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

/* ─── Contador no rail ────────────────────────────────────────────────────── */

.rail__item {
  position: relative;
}

.rail__contador {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--warn);
  color: var(--bg-0);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* ─── Doca: anexos e gravação ─────────────────────────────────────────────── */

/* O compositor vira coluna: a bandeja de anexos e a dica ficam acima da linha
 * de escrita, que continua sendo [campo][enviar]. */
.copiloto__compositor {
  flex-direction: column;
  gap: 6px;
}

.copiloto__linha {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.copilotoAnexos {
  display: grid;
  gap: 6px;
}

.copilotoAnexos__botoes {
  display: flex;
  gap: 6px;
}

/* O input de arquivo real fica fora da tela, mas NÃO com `display:none`: o
 * clique programático precisa de um elemento que exista no layout em alguns
 * navegadores, e escondê-lo assim mantém o `click()` funcionando. */
.copilotoAnexos__campo {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.copilotoAnexos__botao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
}
.copilotoAnexos__botao:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.copilotoAnexos__botao:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Gravando: vermelho e pulsando, porque um microfone aberto que ninguém
 * percebe é o pior estado possível desta tela. */
.copilotoAnexos__botao--gravando {
  border-color: var(--danger);
  color: var(--danger);
  animation: copilotoGravando 1.2s ease-in-out infinite;
}
@keyframes copilotoGravando {
  50% { background: color-mix(in oklch, var(--danger) 18%, var(--bg-2)); }
}
@media (prefers-reduced-motion: reduce) {
  .copilotoAnexos__botao--gravando { animation: none; }
}

.copilotoAnexos__tempo {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.copilotoAnexos__aviso {
  margin: 0;
  color: var(--danger);
  font-size: 11px;
  line-height: 15px;
}

.copilotoAnexos__dica {
  margin: 0;
  color: var(--text-3);
  font-size: 11px;
  line-height: 15px;
}

.copilotoAnexos__bandeja {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.copilotoAnexos__bandeja--turno {
  margin-top: 4px;
  justify-content: flex-end;
}
/* Dentro do turno do copiloto o anexo alinha à esquerda como a bolha dele. */
.copiloto__turno:not(.copiloto__turno--operador) .copilotoAnexos__bandeja--turno {
  justify-content: flex-start;
}

.anexo {
  position: relative;
  display: grid;
  gap: 4px;
  width: 148px;
  margin: 0;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.anexo--falhou {
  border-color: color-mix(in oklch, var(--danger) 55%, transparent);
}

.anexo__imagem,
.anexo__video {
  width: 100%;
  height: 76px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 7px;
  background: var(--bg-0);
}

.anexo__tocador {
  width: 100%;
  height: 32px;
}

.anexo__documento {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 7px;
  background: var(--bg-0);
  color: var(--text-3);
}

.anexo__legenda {
  display: grid;
  gap: 1px;
}

.anexo__nome {
  overflow: hidden;
  color: var(--text-2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anexo__meta {
  color: var(--text-4);
  font-size: 10px;
}
.anexo--falhou .anexo__estado {
  color: var(--danger);
}

.anexo__remover {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-0) 75%, transparent);
  color: var(--text-2);
  cursor: pointer;
}
.anexo__remover:hover {
  color: var(--danger);
}

/* ─── Relatos do copiloto (/desenvolvedor) ────────────────────────────────── */

.relatos {
  margin-top: 22px;
}

.relatos__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.relatos__gerar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.relatos__caminho code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.relatos__tipo--bug {
  border-color: color-mix(in oklch, var(--danger) 50%, transparent);
  color: var(--danger);
}
.relatos__tipo--melhoria {
  border-color: color-mix(in oklch, var(--accent) 50%, transparent);
  color: var(--accent);
}
.relatos__tipo--duvida {
  border-color: color-mix(in oklch, var(--info) 50%, transparent);
  color: var(--info);
}

.relatos__situacao--novo {
  color: var(--warn);
}
.relatos__situacao--documentado {
  color: var(--success);
}

.relatos__anexos {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 11px;
}
.relatos__semAnexo {
  color: var(--text-4);
}