/* Falha ao minimizar. Retornando o conteúdo não minimizado. (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (78,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (79,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-bg' (89,18): run-time error CSS1039: Token not allowed after unary operator: '-ai-app-height' (105,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (106,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (107,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (119,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (131,88): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (132,36): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (134,65): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (136,49): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (140,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (141,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (155,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (170,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (171,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (181,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (182,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (183,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (205,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (210,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (212,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (213,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (223,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (227,40): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (252,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (253,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (254,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (278,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-blue' (278,65): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (278,85): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (292,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (307,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (308,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (329,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (330,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (341,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (350,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (355,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (356,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (358,42): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (369,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (380,38): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (398,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (399,40): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (399,65): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (402,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (402,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (471,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (472,30): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (480,31): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (481,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-blue' (487,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (490,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (529,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (532,39): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (535,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (567,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (572,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (578,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (625,45): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (625,63): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (652,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (652,64): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (697,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (698,30): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (706,31): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (707,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-blue' (713,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (716,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (795,45): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (795,63): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (800,45): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (800,63): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (840,38): run-time error CSS1039: Token not allowed after unary operator: '-d' (853,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (853,64): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (881,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (881,64): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (914,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-bg' (915,34): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (936,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (942,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (943,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (953,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (954,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (961,51): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (964,51): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (979,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (982,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-bubble-user-bg' (983,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-bubble-user-text' (984,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-bubble-user-border' (988,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-bubble-bot' (989,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (991,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1021,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1021,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (1041,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1045,97): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1050,62): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1051,62): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1056,49): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1060,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1065,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (1076,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (1077,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1081,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1089,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (1090,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1095,48): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (1102,59): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (1110,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1113,66): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1139,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1149,61): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1157,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (1162,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1164,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (1167,52): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1187,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1229,62): run-time error CSS1039: Token not allowed after unary operator: '-bn-bg' (1265,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1279,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1280,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (1281,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1287,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (1291,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1295,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1296,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1313,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-blue' (1315,40): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (1317,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-blue' (1319,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-blue' (1335,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-input-bg' (1336,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1340,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (1344,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1353,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1355,37): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1360,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1360,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (1376,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1384,38): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (1384,68): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1414,137): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1415,48): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1438,49): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1450,54): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (1458,54): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (1481,66): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (1481,96): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1513,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (1514,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1524,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1537,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1544,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (1561,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1564,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1568,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1575,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (1585,36): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1588,59): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1597,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1597,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (1610,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1611,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1613,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (1613,71): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1613,103): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1625,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (1632,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (1633,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (1637,69): run-time error CSS1039: Token not allowed after unary operator: '-bn-bg' (1642,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1646,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1647,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (1647,58): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1647,88): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-sm' (1651,152): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (1694,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1695,30): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (1701,31): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (1702,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-blue' (1709,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-teal' (1710,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1723,53): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1727,51): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1754,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1756,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (1757,31): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1767,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1787,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (1817,31): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1819,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (1820,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1838,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (1845,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (1854,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1888,31): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1896,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (1899,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1926,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (1933,72): run-time error CSS1039: Token not allowed after unary operator: '-bn-shadow-md' (1980,72): run-time error CSS1039: Token not allowed after unary operator: '-bn-radius-sm' (1985,81): run-time error CSS1039: Token not allowed after unary operator: '-bn-radius-sm' (1989,80): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (1989,105): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2007,27): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2029,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2040,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2047,27): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2066,27): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2069,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2089,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2090,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (2091,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2107,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (2108,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2109,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2136,19): run-time error CSS1039: Token not allowed after unary operator: '-ai-app-offset' (2200,26): run-time error CSS1039: Token not allowed after unary operator: '-bn-bg' (2202,37): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2214,32): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2215,26): run-time error CSS1039: Token not allowed after unary operator: '-bn-bg' (2216,21): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2220,55): run-time error CSS1039: Token not allowed after unary operator: '-bn-bg-soft' (2233,26): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2253,32): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (2308,1): run-time error CSS1019: Unexpected token, found '}' (2330,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (2331,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2332,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2348,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (2350,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (2356,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2360,36): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2366,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2367,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (2368,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2375,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (2376,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2377,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2382,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (2383,35): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (2391,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2394,59): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2396,34): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2399,42): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2401,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (2408,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2410,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (2414,54): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2417,38): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2422,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (2426,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-input-bg' (2427,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2429,48): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (2432,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2439,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2439,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (2463,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2464,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (2472,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2476,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2477,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (2477,72): run-time error CSS1039: Token not allowed after unary operator: '-bn-card' (2483,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2483,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (2496,52): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2501,36): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (2508,52): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2511,58): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2516,36): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2518,53): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2519,69): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2523,34): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2532,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2537,42): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2543,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (2544,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2545,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2552,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (2553,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2554,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2557,46): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2557,67): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-2' (2573,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2576,40): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2591,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (2592,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (2598,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange-soft' (2599,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2605,54): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2610,36): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2614,37): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2619,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (2620,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2622,34): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (2625,42): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2631,32): run-time error CSS1039: Token not allowed after unary operator: '-bn-border-soft' (2636,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-border' (2637,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2645,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-card-2' (2646,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text' (2647,24): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (2651,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-2' (2656,40): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' (2698,22): run-time error CSS1039: Token not allowed after unary operator: '-bn-tip-bg' (2699,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-tip-fg' (2738,16): run-time error CSS1039: Token not allowed after unary operator: '-tip-arrow-left' (2740,28): run-time error CSS1039: Token not allowed after unary operator: '-bn-tip-bg' (2744,16): run-time error CSS1039: Token not allowed after unary operator: '-tip-arrow-left' (2746,31): run-time error CSS1039: Token not allowed after unary operator: '-bn-tip-bg' (2752,29): run-time error CSS1039: Token not allowed after unary operator: '-bn-tip-bg' (2758,30): run-time error CSS1039: Token not allowed after unary operator: '-bn-tip-bg' (2762,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2763,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2776,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (2809,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-text-muted' (2817,17): run-time error CSS1039: Token not allowed after unary operator: '-bn-orange' */ /* ============================================================= BrasilNFe - AI Chat Tema light/dark + splash cinematografico + onboarding fullscreen ============================================================= */ @font-face { font-family: 'Poppins'; src: url('login/fonts/poppins/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('login/fonts/poppins/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('login/fonts/poppins/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } :root { --bn-orange: #ef8f2f; --bn-orange-2: #ffaf0f; --bn-orange-soft: #fff4e6; --bn-blue: #0a3d62; --bn-teal: #0097a7; --bn-bg: #f7f8fa; --bn-card: #ffffff; --bn-card-2: #fafbfc; --bn-border: #e5e7eb; --bn-border-soft: #f1f5f9; --bn-text: #1f2937; --bn-text-2: #4b5563; --bn-text-muted: #9ca3af; --bn-bubble-bot: #ffffff; --bn-input-bg: #ffffff; --bn-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04); --bn-shadow-md: 0 4px 16px rgba(15, 23, 42, .08); --bn-radius: 14px; --bn-radius-sm: 10px; --bn-bubble-user-bg: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); --bn-bubble-user-text: #ffffff; --bn-bubble-user-border: transparent; } html[data-theme="dark"] { --bn-bg: #0b1220; --bn-card: #131c2e; --bn-card-2: #0f1729; --bn-border: #1f2a44; --bn-border-soft: #1a2338; --bn-text: #e2e8f0; --bn-text-2: #94a3b8; --bn-text-muted: #64748b; --bn-bubble-bot: #1a2440; --bn-input-bg: #131c2e; --bn-orange-soft: rgba(239, 143, 47, .12); --bn-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .25); --bn-shadow-md: 0 4px 16px rgba(0, 0, 0, .35); /* Bubble do user no dark: laranja "queimado" - menos saturacao, combina com o background azul-escuro sem berrar. Borda sutil pra dar profundidade. */ --bn-bubble-user-bg: linear-gradient(135deg, #a8521a 0%, #c47020 100%); --bn-bubble-user-text: #fff4e6; --bn-bubble-user-border: rgba(239, 143, 47, .35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } .ai-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--bn-text); background: var(--bn-bg); /* 100vh em iOS Safari nao considera a UI dinamica do browser (barra inferior, barra de URL retratil), so o user ve o composer cortado quando a barra aparece. 100dvh ajusta dinamicamente conforme a UI. Fallback pro 100vh em navegadores < 2022. --ai-app-height eh setado por JS em mobile via visualViewport.height pra acompanhar a abertura do teclado virtual (iOS Safari < 16.4 e Android Chrome em modo pan nao encolhem 100dvh quando o teclado sobe). */ height: 100vh; height: 100dvh; height: var(--ai-app-height, 100dvh); display: flex; flex-direction: column; overflow: hidden; transition: background-color .3s ease, color .3s ease; } /* ──────────────────────────────────────────────────────────── HEADER ──────────────────────────────────────────────────────────── */ .ai-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--bn-card); border-bottom: 1px solid var(--bn-border); box-shadow: var(--bn-shadow-sm); z-index: 10; transition: background-color .3s ease, border-color .3s ease; } .ai-header-left, .ai-header-right { display: flex; align-items: center; gap: 14px; } .ai-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bn-text); } .ai-logo-mark { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(239, 143, 47, .25)); transition: transform .25s ease; } .ai-logo:hover .ai-logo-mark { transform: rotate(-6deg) scale(1.06); } .ai-logo-text { font-size: 16px; font-weight: 500; letter-spacing: -0.2px; color: var(--bn-text); } .ai-logo-text strong { color: var(--bn-orange); font-weight: 700; } .ai-header-divider { width: 1px; height: 22px; background: var(--bn-border); } .ai-header-title { font-size: 14px; color: var(--bn-text-2); font-weight: 500; } .ai-badge-beta { display: inline-block; background: var(--bn-orange-soft); color: var(--bn-orange); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 4px; } .ai-badge-mcp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(0, 151, 167, .08); color: var(--bn-teal); border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid rgba(0, 151, 167, .15); transition: all .15s ease; } .ai-badge-mcp:hover { background: rgba(0, 151, 167, .15); } .ai-new-chat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin-left: auto; background: transparent; color: var(--bn-text-muted); border: 1px dashed var(--bn-border); border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; flex-shrink: 0; transition: all .15s ease; font-family: inherit; } .ai-new-chat-btn:hover:not(:disabled) { background: var(--bn-orange-soft); color: var(--bn-orange); border-color: var(--bn-orange); border-style: solid; } .ai-new-chat-btn:disabled { opacity: .5; cursor: not-allowed; } .ai-new-chat-btn i { font-size: 11px; } @media (max-width: 767px) { .ai-new-chat-btn span { display: none; } .ai-new-chat-btn { padding: 6px 9px; } } /* Divisor inline entre conversas no scroll continuo */ .ai-conv-divider { display: flex; align-items: center; margin: 24px 0 16px; gap: 12px; } .ai-conv-divider::before, .ai-conv-divider::after { content: ''; flex: 1; height: 1px; background: var(--bn-border); } .ai-conv-divider-label { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--bn-border); border-radius: 999px; background: var(--bn-card); color: var(--bn-text-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .ai-conv-divider-label small { text-transform: none; font-weight: 500; color: var(--bn-text-muted); letter-spacing: 0; margin-left: 4px; } .ai-conv-divider-label i { color: var(--bn-orange); font-size: 11px; } /* Seletor de empresas (logado) - usa o combobox virtualizado do painel (NFplus.js custom.combobox). Aqui so dimensionamos o wrapper. */ .ai-empresa-combo { width: 420px; max-width: 420px; } .ai-empresa-combo .custom-combobox { width: 100%; } @media (max-width: 991px) { .ai-empresa-combo { width: 280px; max-width: 280px; } } @media (max-width: 767px) { .ai-empresa-combo { width: 180px; max-width: 180px; } .ai-badge-mcp { display: none; } } .ai-theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bn-border); background: var(--bn-card-2); color: var(--bn-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .2s ease; position: relative; } /* ── User avatar dropdown (logado) ───────────────────────── */ .ai-user-area { position: relative; display: inline-block; } .ai-user-avatar { width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .5px; background: linear-gradient(135deg, var(--bn-blue) 0%, var(--bn-teal) 50%, var(--bn-orange) 100%); display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; box-shadow: 0 2px 6px rgba(10, 61, 98, .25); position: relative; } .ai-user-avatar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border-radius: 50%; background: #49a342; border: 2px solid var(--bn-card); } .ai-user-avatar:hover { transform: scale(1.06); filter: saturate(1.15) brightness(1.05); box-shadow: 0 4px 12px rgba(239, 143, 47, .35); } .ai-user-avatar:active { transform: scale(.96); } .ai-user-avatar i { font-size: 16px; } .ai-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; background: var(--bn-card); border: 1px solid var(--bn-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 4px 0; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 100; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .ai-user-area.open .ai-user-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .ai-user-menu-header { padding: 6px 16px 8px; font-size: 13px; font-weight: 600; color: var(--bn-text); border-bottom: 1px solid var(--bn-border-soft); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .ai-user-menu-item { display: flex; align-items: center; padding: 6px 16px; color: var(--bn-text-2); font-size: 13px; font-weight: 400; text-decoration: none; transition: background-color .12s ease, color .12s ease; } .ai-user-menu-item i { width: 20px; margin-right: 8px; color: var(--bn-text-muted); font-size: 13px; text-align: center; } .ai-user-menu-item:hover { background: var(--bn-orange-soft); color: var(--bn-orange); } .ai-user-menu-item:hover i { color: var(--bn-orange); } .ai-user-menu-item--danger:hover { background: rgba(239, 68, 68, .10); color: #b91c1c; } .ai-user-menu-item--danger:hover i { color: #b91c1c; } .ai-user-menu-divider { height: 1px; margin: 4px 0; background: var(--bn-border-soft); } html[data-theme="dark"] .ai-user-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .5); } html[data-theme="dark"] .ai-user-menu-item--danger:hover { background: rgba(239, 68, 68, .18); color: #fca5a5; } html[data-theme="dark"] .ai-user-menu-item--danger:hover i { color: #fca5a5; } .ai-theme-toggle:hover { color: var(--bn-orange); transform: rotate(15deg); } .ai-theme-toggle [data-icon-light] { display: inline-block; } .ai-theme-toggle [data-icon-dark] { display: none; } html[data-theme="dark"] .ai-theme-toggle [data-icon-light] { display: none; } html[data-theme="dark"] .ai-theme-toggle [data-icon-dark] { display: inline-block; } .ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; line-height: 1; } .ai-btn-ghost { color: var(--bn-text-2); background: transparent; } .ai-btn-ghost:hover { background: var(--bn-card-2); color: var(--bn-text); } .ai-btn-primary { background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); color: #fff !important; box-shadow: 0 2px 6px rgba(239, 143, 47, .35); } .ai-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 143, 47, .45); } .ai-btn-sm { padding: 4px 10px; font-size: 12px; } /* ──────────────────────────────────────────────────────────── SPLASH (logo + ring rotating + glow + pulse) ──────────────────────────────────────────────────────────── */ .ai-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .6s ease, visibility .6s ease; overflow: hidden; } .ai-splash.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } .ai-splash-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(0, 151, 167, .35), transparent 50%), radial-gradient(circle at 70% 70%, rgba(239, 143, 47, .35), transparent 55%), radial-gradient(circle at 50% 50%, rgba(10, 61, 98, .25), transparent 60%), #ffffff; animation: ai-bg-shift 14s ease-in-out infinite alternate; } html[data-theme="dark"] .ai-splash-bg { background: radial-gradient(circle at 30% 30%, rgba(0, 151, 167, .25), transparent 50%), radial-gradient(circle at 70% 70%, rgba(239, 143, 47, .28), transparent 55%), radial-gradient(circle at 50% 50%, rgba(10, 61, 98, .35), transparent 60%), #050b18; } @keyframes ai-bg-shift { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1.1) rotate(8deg); } } .ai-splash-stage { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; animation: ai-splash-float 4s ease-in-out infinite; } @keyframes ai-splash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .ai-splash-glow { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(239, 143, 47, .55) 0%, rgba(255, 175, 15, .15) 35%, transparent 70%); filter: blur(30px); animation: ai-splash-glow-pulse 2.4s ease-in-out infinite; z-index: 0; } @keyframes ai-splash-glow-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } } .ai-splash-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--bn-orange); border-right-color: var(--bn-teal); animation: ai-splash-spin 1.6s linear infinite; z-index: 1; } .ai-splash-ring--2 { inset: 18px; border-width: 2px; border-top-color: transparent; border-bottom-color: var(--bn-orange-2); border-left-color: var(--bn-blue); animation: ai-splash-spin 2.4s linear infinite reverse; } .ai-splash-ring--3 { inset: -22px; border-width: 1.5px; border-top-color: var(--bn-teal); border-right-color: transparent; border-bottom-color: transparent; border-left-color: var(--bn-orange); opacity: .55; animation: ai-splash-spin 3.5s linear infinite; } @keyframes ai-splash-spin { to { transform: rotate(360deg); } } .ai-splash-logo { position: relative; z-index: 2; width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 12px 36px rgba(239, 143, 47, .45)); animation: ai-splash-logo-in 1.2s ease-out, ai-splash-logo-pulse 2.4s ease-in-out 1.2s infinite; } @keyframes ai-splash-logo-in { 0% { opacity: 0; transform: scale(.55) rotate(-25deg); filter: drop-shadow(0 0 0 transparent) blur(6px); } 60% { opacity: 1; transform: scale(1.08) rotate(0deg); filter: drop-shadow(0 12px 36px rgba(239,143,47,.5)) blur(0); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes ai-splash-logo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .ai-splash-caption { margin-top: 32px; text-align: center; z-index: 2; animation: ai-splash-caption-in 1s ease-out .6s both; } @keyframes ai-splash-caption-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ai-splash-brand { font-size: 32px; font-weight: 500; color: var(--bn-text); letter-spacing: -0.6px; } .ai-splash-brand strong { color: var(--bn-orange); font-weight: 800; } .ai-splash-tag { font-size: 13px; color: var(--bn-text-muted); margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; } /* ──────────────────────────────────────────────────────────── CINEMA ONBOARDING (fullscreen, 4 cenas) ──────────────────────────────────────────────────────────── */ .ai-cinema { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; } .ai-cinema-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #0a1628 0%, #04080f 70%, #000 100%); } .ai-cinema-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; animation: ai-cinema-orb-float 14s ease-in-out infinite alternate; } .ai-cinema-orb--1 { width: 460px; height: 460px; background: radial-gradient(circle, var(--bn-orange) 0%, transparent 60%); top: -100px; left: -100px; } .ai-cinema-orb--2 { width: 520px; height: 520px; background: radial-gradient(circle, var(--bn-teal) 0%, transparent 60%); bottom: -150px; right: -100px; animation-delay: -4s; } .ai-cinema-orb--3 { width: 380px; height: 380px; background: radial-gradient(circle, var(--bn-orange-2) 0%, transparent 60%); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -8s; opacity: .25; } @keyframes ai-cinema-orb-float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, -40px) scale(1.1); } } .ai-cinema-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%); } .ai-cinema-skip { position: absolute; top: 24px; right: 24px; background: transparent; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; z-index: 10; transition: all .2s ease; } .ai-cinema-skip:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); } .ai-cinema-progress { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 8px; z-index: 10; } .ai-cinema-progress span { width: 26px; height: 3px; background: rgba(255,255,255,.2); border-radius: 999px; transition: all .4s ease; } .ai-cinema-progress span.active { background: linear-gradient(90deg, var(--bn-orange), var(--bn-orange-2)); box-shadow: 0 0 12px rgba(239,143,47,.6); width: 60px; } .ai-cinema-next, .ai-cinema-prev { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: rgba(255,255,255,.85); font-size: 18px; cursor: pointer; z-index: 10; transition: all .25s ease; backdrop-filter: blur(8px); } .ai-cinema-next { right: 32px; } .ai-cinema-prev { left: 32px; } .ai-cinema-prev:hover { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.4); transform: translateY(-50%) scale(1.05); } .ai-cinema-next:hover { background: linear-gradient(135deg, var(--bn-orange), var(--bn-orange-2)); color: #fff; border-color: transparent; transform: translateY(-50%) scale(1.06); box-shadow: 0 8px 24px rgba(239,143,47,.4); } .ai-cinema-scene { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 24px 60px; opacity: 0; transform: scale(.96) translateY(20px); transition: opacity .55s ease, transform .55s ease; } .ai-cinema-scene.active { display: flex; opacity: 1; transform: scale(1) translateY(0); } .ai-cinema-stage { position: relative; width: 280px; height: 280px; margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; animation: ai-cinema-stage-float 5s ease-in-out infinite; } .ai-cinema-stage--small { width: 180px; height: 180px; margin-bottom: 18px; } .ai-cinema-glow { position: absolute; inset: -20px; background: radial-gradient(circle, rgba(239, 143, 47, .55) 0%, rgba(255, 175, 15, .18) 38%, transparent 72%); filter: blur(34px); z-index: 0; animation: ai-cinema-glow-pulse 3.2s ease-in-out infinite; } .ai-cinema-ring { position: absolute; inset: 18px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--bn-orange); border-right-color: var(--bn-teal); animation: ai-splash-spin 3.2s linear infinite; z-index: 1; } .ai-cinema-ring--2 { inset: 38px; border-width: 2px; border-top-color: transparent; border-bottom-color: var(--bn-orange-2); border-left-color: var(--bn-blue); animation: ai-splash-spin 4.6s linear infinite reverse; } .ai-cinema-ring--3 { inset: -8px; border-width: 1.5px; border-top-color: var(--bn-teal); border-right-color: transparent; border-bottom-color: transparent; border-left-color: var(--bn-orange); opacity: .55; animation: ai-splash-spin 6.5s linear infinite; } .ai-cinema-stage--small .ai-cinema-ring { inset: 10px; border-width: 1.5px; animation-duration: 3.6s; } .ai-cinema-stage--small .ai-cinema-ring--2 { inset: 26px; animation-duration: 5.2s; } .ai-cinema-stage--small .ai-cinema-ring--3 { inset: -8px; animation-duration: 7.4s; } @keyframes ai-cinema-stage-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes ai-cinema-glow-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } } .ai-cinema-logo { position: relative; z-index: 2; width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 16px 48px rgba(239,143,47,.55)); animation: ai-cinema-logo-in 1.2s cubic-bezier(.16,1,.3,1) both, ai-cinema-logo-pulse 2.8s ease-in-out 1.2s infinite; } .ai-cinema-logo--small { width: 80px; height: 80px; } @keyframes ai-cinema-logo-in { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.1) rotate(0deg); } 100% { opacity: 1; transform: scale(1); } } @keyframes ai-cinema-logo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .ai-cinema-pulse { position: relative; margin-bottom: 0; } .ai-cinema-pulse::before, .ai-cinema-pulse::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(239, 143, 47, .35); animation: ai-cinema-pulse-ring 2.6s ease-out infinite; } .ai-cinema-pulse::after { animation-delay: 1.3s; } @keyframes ai-cinema-pulse-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2.0); opacity: 0; } } .ai-cinema-h1 { font-size: 56px; font-weight: 800; letter-spacing: -1.5px; margin: 0 0 18px; line-height: 1.05; color: #fff; } .ai-cinema-h1--big { font-size: 78px; } .ai-cinema-h1 .word, .ai-cinema-h1 .line { display: inline-block; margin: 0 6px; opacity: 0; transform: translateY(24px); animation: ai-cinema-word-in .8s cubic-bezier(.16,1,.3,1) forwards; } .ai-cinema-h1--big .line { display: block; margin: 0; } .ai-cinema-scene.active .ai-cinema-h1 .word:nth-child(1), .ai-cinema-scene.active .ai-cinema-h1 .line:nth-child(1) { animation-delay: .25s; } .ai-cinema-scene.active .ai-cinema-h1 .word:nth-child(2), .ai-cinema-scene.active .ai-cinema-h1 .line:nth-child(2) { animation-delay: .45s; } .ai-cinema-scene.active .ai-cinema-h1 .word:nth-child(3) { animation-delay: .65s; } .ai-cinema-h1 .brand em { font-style: normal; background: linear-gradient(90deg, var(--bn-orange), var(--bn-orange-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ai-cinema-h1 .accent { background: linear-gradient(90deg, var(--bn-orange), var(--bn-orange-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes ai-cinema-word-in { to { opacity: 1; transform: translateY(0); } } .ai-cinema-sub { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.75); max-width: 620px; margin: 0 auto; opacity: 0; animation: ai-cinema-sub-in .8s ease-out 1s both; } @keyframes ai-cinema-sub-in { from { opacity: 0; transform: translateY(12px); } to { opacity: .85; transform: translateY(0); } } .ai-cinema-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; max-width: 880px; width: 100%; } .ai-cinema-feature { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 28px 22px; backdrop-filter: blur(10px); opacity: 0; transform: translateY(20px); animation: ai-cinema-feat-in .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.4s + var(--d, 0s)); transition: transform .25s ease, background .25s ease; } .ai-cinema-feature:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); } @keyframes ai-cinema-feat-in { to { opacity: 1; transform: translateY(0); } } .ai-cinema-feature .icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--bn-orange), var(--bn-orange-2)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; margin-bottom: 14px; box-shadow: 0 6px 20px rgba(239,143,47,.4); } .ai-cinema-feature .ttl { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; } .ai-cinema-feature .desc { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; } .ai-cinema-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 32px; opacity: 0; animation: ai-cinema-sub-in .7s ease-out 1.2s both; } .ai-cinema-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; border: 0; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .2s ease; } .ai-cinema-btn--primary { background: linear-gradient(135deg, var(--bn-orange), var(--bn-orange-2)); color: #fff; box-shadow: 0 12px 32px rgba(239,143,47,.45); } .ai-cinema-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(239,143,47,.6); } .ai-cinema-btn--ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); } .ai-cinema-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; } /* fade out global do cinema */ .ai-cinema.fade-out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility .5s ease; } /* ──────────────────────────────────────────────────────────── APP / SPLIT ──────────────────────────────────────────────────────────── */ .ai-main { flex: 1; overflow: hidden; } .ai-app { display: grid; grid-template-columns: 0.95fr 1.05fr; height: 100%; gap: 0; } /* Primeira visita: esconde a app ate o cinema fechar para evitar flicker entre o fim do splash e o aparecimento do cinema. Atributo setado inline em no _AiChatLayout antes do CSS carregar; removido em closeCinema(). */ html[data-first-visit="1"] .ai-app { visibility: hidden; } /* ── Chat pane ──────────────────────────────────────────── */ .ai-chat-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bn-bg); border-right: 1px solid var(--bn-border); min-width: 0; position: relative; transition: background-color .3s ease, border-color .3s ease; } .ai-suggestions { margin: 18px auto 0; max-width: 460px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ai-suggestions-label { margin: 24px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bn-text-muted); opacity: .8; } .ai-chip { background: transparent; border: 1px dashed var(--bn-border); color: var(--bn-text-2); padding: 7px 13px; border-radius: 999px; font-size: 12.5px; cursor: pointer; transition: all .15s ease; box-shadow: none; } .ai-chip:hover { border-style: solid; border-color: var(--bn-orange); color: var(--bn-orange); background: rgba(239,143,47,.06); transform: translateY(-1px); } .ai-messages { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; } .ai-empty-state { text-align: center; color: var(--bn-text-muted); padding: 48px 16px; margin: auto 0; } .ai-empty-icon { margin-bottom: 16px; opacity: .85; } .ai-empty-icon img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(239,143,47,.25)); } .ai-empty-state h3 { margin: 0 0 8px; color: var(--bn-text); font-size: 18px; font-weight: 600; } .ai-empty-state p { margin: 0 auto; font-size: 14px; max-width: 360px; } .ai-msg { display: flex; gap: 10px; animation: ai-in .25s ease-out; } @keyframes ai-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ai-msg-user { justify-content: flex-end; } .ai-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; word-wrap: break-word; box-shadow: var(--bn-shadow-sm); } .ai-msg-user .ai-bubble { background: var(--bn-bubble-user-bg); color: var(--bn-bubble-user-text); border: 1px solid var(--bn-bubble-user-border); border-bottom-right-radius: 4px; } .ai-msg-assistant .ai-bubble { background: var(--bn-bubble-bot); color: var(--bn-text); border-bottom-left-radius: 4px; border: 1px solid var(--bn-border); } .ai-bubble p { margin: 0 0 8px; } .ai-bubble p:last-child { margin-bottom: 0; } .ai-bubble-error { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(185, 28, 28, .08); border: 1px solid rgba(185, 28, 28, .25); color: #b91c1c; font-size: 13px; display: flex; gap: 8px; align-items: flex-start; } .ai-bubble-error i { margin-top: 2px; } .ai-bubble-error-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .ai-bubble-error-text { line-height: 1.4; } .ai-bubble-error-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .ai-bubble-error-cta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); color: #fff; border: 0; border-radius: 8px; font-size: 12.5px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(239, 143, 47, .25); transition: all .15s ease; } .ai-bubble-error-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 143, 47, .4); color: #fff; text-decoration: none; } .ai-bubble-error-cta i { color: #fff; margin-top: 0; } .ai-bubble code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; } html[data-theme="dark"] .ai-bubble code { background: rgba(255,255,255,.08); } .ai-bubble strong { font-weight: 600; } .ai-bubble a { color: var(--bn-orange); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .ai-bubble a:hover { text-decoration: none; } /* Markdown rico dentro da bolha: titulos, regua e listas (renderMarkdown). */ .ai-bubble .ai-md-heading { margin: 14px 0 6px; font-weight: 700; line-height: 1.3; color: var(--bn-text); } .ai-bubble .ai-md-heading:first-child { margin-top: 0; } .ai-bubble h3.ai-md-heading { font-size: 15px; } .ai-bubble h4.ai-md-heading { font-size: 13.5px; } .ai-bubble h5.ai-md-heading, .ai-bubble h6.ai-md-heading { font-size: 12.5px; color: var(--bn-text-2); text-transform: uppercase; letter-spacing: .03em; } .ai-bubble .ai-md-hr { border: 0; border-top: 1px solid var(--bn-border); margin: 12px 0; } .ai-bubble .ai-md-list { margin: 6px 0; padding-left: 20px; } .ai-bubble ul.ai-md-list { list-style: disc; } .ai-bubble ol.ai-md-list { list-style: decimal; } .ai-bubble .ai-md-list li { margin: 3px 0; line-height: 1.5; } .ai-bubble .ai-md-list li::marker { color: var(--bn-orange); } .ai-table-wrap { margin: 8px 0; border: 1px solid var(--bn-border); border-radius: 10px; overflow-x: auto; overflow-y: hidden; max-width: 100%; background: var(--bn-card); -webkit-overflow-scrolling: touch; } .ai-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12.5px; line-height: 1.4; } .ai-table thead th { background: var(--bn-card-2); color: var(--bn-text); font-weight: 600; text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--bn-border); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .ai-table tbody td { padding: 7px 12px; border-bottom: 1px solid var(--bn-border-soft); color: var(--bn-text-2); white-space: nowrap; vertical-align: top; } .ai-table tbody tr:last-child td { border-bottom: 0; } .ai-table tbody tr:hover td { background: var(--bn-card-2); } .ai-table code { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; font-size: 12px; } html[data-theme="dark"] .ai-table-wrap { background: var(--bn-card); } html[data-theme="dark"] .ai-table thead th { background: rgba(255,255,255,.04); } html[data-theme="dark"] .ai-table tbody tr:hover td { background: rgba(255,255,255,.03); } html[data-theme="dark"] .ai-table code { background: rgba(255,255,255,.08); } .ai-table-wrap::-webkit-scrollbar { height: 8px; } .ai-table-wrap::-webkit-scrollbar-track { background: transparent; } .ai-table-wrap::-webkit-scrollbar-thumb { background: var(--bn-border); border-radius: 4px; } .ai-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--bn-text-muted); } .ai-bubble[data-time]::after { content: attr(data-time); display: block; text-align: right; font-size: 10px; opacity: .55; margin-top: 4px; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none; } .ai-day-divider { display: flex; align-items: center; justify-content: center; margin: 18px 0 10px; } .ai-day-divider span { display: inline-block; padding: 4px 12px; background: rgba(0, 0, 0, .06); border-radius: 10px; font-size: 11px; color: var(--bn-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } html[data-theme="dark"] .ai-day-divider span { background: rgba(255, 255, 255, .08); } .ai-typing { display: inline-flex; gap: 4px; padding: 4px 0; } .ai-typing span { width: 6px; height: 6px; background: var(--bn-orange); border-radius: 50%; animation: ai-typing 1.2s ease-in-out infinite; } .ai-typing span:nth-child(2) { animation-delay: .15s; } .ai-typing span:nth-child(3) { animation-delay: .3s; } @keyframes ai-typing { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } } /* ── Tool cards ──────────────────────────────────────────── */ .ai-tool-card { background: var(--bn-orange-soft); border: 1px solid #fde2b3; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--bn-text-2); transition: all .25s ease; box-shadow: var(--bn-shadow-sm); } html[data-theme="dark"] .ai-tool-card { border-color: rgba(239,143,47,.3); } .ai-tool-card.ai-tool-running { border-color: var(--bn-orange); } .ai-tool-card.ai-tool-ok { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .5); color: #14532d; } html[data-theme="dark"] .ai-tool-card.ai-tool-ok { color: #4ade80; } .ai-tool-card.ai-tool-error { background: rgba(220, 38, 38, .12); border-color: rgba(220, 38, 38, .5); color: #7f1d1d; } html[data-theme="dark"] .ai-tool-card.ai-tool-error { color: #fca5a5; } .ai-tool-card { min-width: 0; } .ai-tool-header { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; flex-wrap: wrap; min-width: 0; } .ai-tool-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; word-break: break-word; } .ai-tool-spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ai-spin .8s linear infinite; flex-shrink: 0; } @keyframes ai-spin { to { transform: rotate(360deg); } } .ai-tool-summary { font-size: 12px; opacity: .85; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; max-height: 180px; overflow-y: auto; } /* Tool card clicavel (emissoes no historico) - hover sutil pra sinalizar interatividade */ .ai-tool-card--clickable { cursor: pointer; } .ai-tool-card--clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .08), 0 0 0 1px rgba(239, 143, 47, .35); } .ai-tool-card--clickable:focus-visible { outline: 2px solid var(--bn-orange); outline-offset: 2px; } .ai-tool-card-cta { margin-top: 8px; padding-top: 7px; border-top: 1px dashed currentColor; font-size: 11.5px; font-weight: 600; opacity: .75; display: inline-flex; align-items: center; gap: 6px; } .ai-tool-card-cta .fa { font-size: 12px; } .ai-tool-card--clickable:hover .ai-tool-card-cta { opacity: 1; } .ai-tool-admin-detail { margin: 8px 0 0; padding: 8px 10px; background: rgba(0, 0, 0, .06); border-left: 3px solid currentColor; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; line-height: 1.4; color: inherit; opacity: .85; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; } html[data-theme="dark"] .ai-tool-admin-detail { background: rgba(255, 255, 255, .06); } /* ── Composer ──────────────────────────────────────────── */ .ai-composer { padding: 16px 20px 20px; /* iOS: respeita a "home indicator" (barra horizontal de gestos na parte inferior do iPhone X+) somando ao padding-bottom existente. Em devices sem safe area inset, env() resolve pra 0 e o padding fica como antes. */ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent 0%, var(--bn-bg) 30%); flex-shrink: 0; } /* ── Doc-type chips (atalho de tipo de documento) ──────── */ .ai-doctype-chips { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 4px; } .ai-doctype-chips-scroll { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ai-doctype-chips-scroll::-webkit-scrollbar { display: none; } .ai-doctype-chips-fixed { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .ai-doctype-label-lead { font-size: 11px; font-weight: 600; color: var(--bn-text-muted); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; padding-right: 4px; user-select: none; } .ai-doctype-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--bn-border); background: var(--bn-card); color: var(--bn-text-2); font-size: 12px; font-weight: 500; cursor: pointer; flex-shrink: 0; transition: all .15s ease; box-shadow: var(--bn-shadow-sm); } .ai-doctype-chip i { font-size: 12px; color: var(--bn-orange); transition: color .15s ease; } .ai-doctype-chip:hover { border-color: var(--bn-orange); color: var(--bn-orange); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(239, 143, 47, .15); } .ai-doctype-chip:active { transform: translateY(0) scale(.96); } .ai-doctype-chip:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .ai-doctype-chip--help { background: linear-gradient(135deg, rgba(10, 61, 98, .08) 0%, rgba(0, 151, 167, .08) 100%); border-color: rgba(10, 61, 98, .3); color: var(--bn-blue); } .ai-doctype-chip--help i { color: var(--bn-teal); } .ai-doctype-chip--help:hover { border-color: var(--bn-blue); background: linear-gradient(135deg, rgba(10, 61, 98, .15) 0%, rgba(0, 151, 167, .15) 100%); color: var(--bn-blue); box-shadow: 0 3px 10px rgba(10, 61, 98, .15); } html[data-theme="dark"] .ai-doctype-chip--help { background: linear-gradient(135deg, rgba(10, 61, 98, .25) 0%, rgba(0, 151, 167, .25) 100%); border-color: rgba(0, 151, 167, .35); color: #67e8f9; } html[data-theme="dark"] .ai-doctype-chip--help i { color: #67e8f9; } @media (max-width: 640px) { .ai-doctype-label-lead { display: none; } .ai-doctype-chip { padding: 6px 10px; font-size: 11.5px; } } .ai-composer-inner { display: flex; align-items: flex-end; gap: 10px; background: var(--bn-input-bg); border: 1px solid var(--bn-border); border-radius: 16px; padding: 8px; transition: border-color .15s ease, box-shadow .15s ease, background-color .3s ease; box-shadow: var(--bn-shadow-sm); } .ai-composer-inner.no-voice { padding-left: 14px; } .ai-composer-inner:focus-within { border-color: var(--bn-orange); box-shadow: 0 0 0 3px rgba(239, 143, 47, .15); } #aiInput { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 14px; line-height: 1.5; max-height: 160px; padding: 6px 0; background: transparent; color: var(--bn-text); } #aiInput::placeholder { color: var(--bn-text-muted); } .ai-send-btn { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); color: #fff; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; flex-shrink: 0; } .ai-send-btn:hover { transform: scale(1.04); box-shadow: 0 4px 10px rgba(239,143,47,.4); } .ai-send-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .ai-mic-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--bn-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, color .15s ease, transform .15s ease; flex-shrink: 0; font-size: 15px; position: relative; } .ai-mic-btn:hover { background: var(--bn-orange-soft); color: var(--bn-orange); } .ai-mic-btn:active { transform: scale(.94); } .ai-mic-btn:disabled { opacity: .4; cursor: not-allowed; background: transparent; } .ai-mic-btn.recording { background: rgba(239, 68, 68, .14); color: #ef4444; animation: ai-mic-pulse 1.4s ease-in-out infinite; } .ai-mic-btn.recording::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 1.5px solid rgba(239, 68, 68, .55); animation: ai-mic-ring 1.4s ease-out infinite; pointer-events: none; } html[data-theme="dark"] .ai-mic-btn.recording { background: rgba(239, 68, 68, .22); color: #fca5a5; } @keyframes ai-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } } @keyframes ai-mic-ring { 0% { transform: scale(.95); opacity: .9; } 80% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } .ai-composer-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--bn-text-muted); gap: 8px; } .ai-composer-hint .fa-microphone { color: var(--bn-orange); margin: 0 1px 0 2px; } .ai-composer-meta { display: inline-flex; align-items: center; gap: 6px; } .ai-composer-status { font-weight: 500; } .ai-composer-status.error { color: #b91c1c; } .ai-composer-status.listening { color: #ef4444; } .ai-env { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 1.4; border: 1px solid transparent; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; font-family: inherit; } .ai-env i { font-size: 10px; } .ai-env:hover { transform: translateY(-1px); } .ai-env:focus-visible { outline: 2px solid var(--bn-orange); outline-offset: 2px; } .ai-env--homolog { background: rgba(34,197,94,.14); color: #166534; border-color: rgba(34,197,94,.30); } .ai-env--prod { background: rgba(245,158,11,.16); color: #92400e; border-color: rgba(245,158,11,.45); } .ai-env--locked { cursor: not-allowed; opacity: .85; } .ai-env--locked:hover { transform: none; } html[data-theme="dark"] .ai-env--homolog { background: rgba(34,197,94,.20); color: #4ade80; border-color: rgba(34,197,94,.40); } html[data-theme="dark"] .ai-env--prod { background: rgba(245,158,11,.22); color: #fbbf24; border-color: rgba(245,158,11,.50); } .ai-composer-inner.is-prod { border-color: rgba(245,158,11,.35); box-shadow: 0 0 0 1px rgba(245,158,11,.10), var(--bn-shadow-sm); } .ai-composer-inner.is-prod:focus-within { border-color: #d97706; box-shadow: 0 0 0 3px rgba(245,158,11,.20); } html[data-theme="dark"] .ai-composer-inner.is-prod { border-color: rgba(251,191,36,.48); box-shadow: 0 0 0 1px rgba(251,191,36,.18), var(--bn-shadow-sm); } html[data-theme="dark"] .ai-composer-inner.is-prod:focus-within { border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.24); } .ai-composer-status.quota { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; transition: background-color .25s ease, color .25s ease, border-color .25s ease; } .ai-composer-status.quota i { font-size: 10px; } .ai-composer-status.quota-demo.quota-ok { background: rgba(100,116,139,.12); color: #475569; border-color: rgba(100,116,139,.25); } .ai-composer-status.quota-plan.quota-ok { background: rgba(34,197,94,.14); color: #166534; border-color: rgba(34,197,94,.30); } .ai-composer-status.quota-credits.quota-ok { background: var(--bn-orange-soft); color: var(--bn-orange); border-color: rgba(239,143,47,.35); } .ai-composer-status.quota-warn { background: rgba(245,158,11,.16); color: #b45309; border-color: rgba(245,158,11,.45); } .ai-composer-status.quota-critical { background: rgba(239,68,68,.18); color: #b91c1c; border-color: rgba(239,68,68,.5); animation: ai-quota-pulse 1.6s ease-in-out infinite; } @keyframes ai-quota-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); } } html[data-theme="dark"] .ai-composer-status.quota-demo.quota-ok { background: rgba(148,163,184,.18); color: #cbd5e1; border-color: rgba(148,163,184,.30); } html[data-theme="dark"] .ai-composer-status.quota-plan.quota-ok { background: rgba(34,197,94,.20); color: #4ade80; border-color: rgba(34,197,94,.40); } html[data-theme="dark"] .ai-composer-status.quota-credits.quota-ok { background: rgba(239,143,47,.20); color: #ffaf0f; border-color: rgba(239,143,47,.45); } html[data-theme="dark"] .ai-composer-status.quota-warn { background: rgba(245,158,11,.22); color: #fbbf24; border-color: rgba(245,158,11,.5); } html[data-theme="dark"] .ai-composer-status.quota-critical { background: rgba(239,68,68,.25); color: #fca5a5; border-color: rgba(239,68,68,.55); } .ai-composer-status.quota-clickable { cursor: pointer; } .ai-composer-status.quota-clickable:hover { transform: translateY(-1px); } /* ── Quota popover ───────────────────────────────────────── */ .ai-quota-popover { position: fixed; width: 300px; background: var(--bn-card); border: 1px solid var(--bn-border); border-radius: 14px; box-shadow: 0 12px 36px rgba(15, 23, 42, .18); padding: 14px; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 200; font-size: 12.5px; color: var(--bn-text); } .ai-quota-popover.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .ai-quota-pop-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--bn-text-muted); margin-bottom: 12px; } .ai-quota-row { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bn-border-soft); } .ai-quota-row:last-of-type { border-bottom: 0; margin-bottom: 8px; padding-bottom: 4px; } .ai-quota-row-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; } .ai-quota-row-head i { font-size: 13px; } .ai-quota-row-meta { margin-left: auto; font-weight: 600; color: var(--bn-text-2); font-size: 12px; } .ai-quota-row-meta.ai-quota-empty { font-weight: 400; color: var(--bn-text-muted); font-style: italic; } .ai-quota-row-foot { font-size: 11px; color: var(--bn-text-muted); margin-top: 4px; } .ai-quota-bar { height: 6px; border-radius: 3px; background: var(--bn-border-soft); overflow: hidden; } .ai-quota-bar-fill { height: 100%; border-radius: 3px; transition: width .35s ease; } .quota-plan-color { color: #16a34a; } .quota-credits-color { color: var(--bn-orange); } .quota-demo-color { color: #64748b; } .ai-quota-bar-fill.quota-plan-color { background: #16a34a; } .ai-quota-bar-fill.quota-credits-color { background: var(--bn-orange); } .ai-quota-bar-fill.quota-demo-color { background: #64748b; } .ai-quota-cta { display: block; width: 100%; text-align: center; margin-top: 10px; padding: 10px 14px; background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); color: #fff; border: none; border-radius: 10px; font: 600 13px inherit; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } button.ai-quota-cta { font-family: inherit; } .ai-quota-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 143, 47, .35); } .ai-quota-cta-ghost { background: transparent; color: var(--bn-text-2); border: 1px solid var(--bn-border); } .ai-quota-cta-ghost:hover { background: var(--bn-card-2); color: var(--bn-orange); border-color: var(--bn-orange); box-shadow: none; } html[data-theme="dark"] .ai-quota-popover { box-shadow: 0 12px 36px rgba(0, 0, 0, .5); } /* ── Preview pane ──────────────────────────────────────── */ .ai-preview-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bn-card-2); min-width: 0; transition: background-color .3s ease; } .ai-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--bn-border); background: var(--bn-card); flex-shrink: 0; transition: background-color .3s ease, border-color .3s ease; } .ai-preview-tabs { display: inline-flex; gap: 4px; background: var(--bn-bg); padding: 3px; border-radius: 10px; } .ai-tab { background: transparent; border: 0; padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--bn-text-2); cursor: pointer; transition: all .15s ease; } .ai-tab:hover { color: var(--bn-text); } .ai-tab.active { background: var(--bn-card); color: var(--bn-orange); box-shadow: var(--bn-shadow-sm); } .ai-preview-body { flex: 1 1 0; min-height: 0; overflow: auto; padding: 20px; position: relative; } .ai-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--bn-text-muted); padding: 32px; } .ai-preview-empty-icon { position: relative; width: 150px; height: 150px; aspect-ratio: 1 / 1; flex-shrink: 0; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; } .ai-preview-empty-icon img { position: relative; z-index: 2; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(239,143,47,.3)); animation: ai-preview-logo-float 4.2s ease-in-out infinite; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .ai-preview-empty-icon--turbo .ai-preview-ring--1 { animation-duration: 1.4s; } .ai-preview-empty-icon--turbo .ai-preview-ring--2 { animation-duration: 1.9s; } .ai-preview-empty-icon--turbo .ai-preview-ring--3 { animation-duration: 2.8s; } .ai-preview-empty-icon--turbo .ai-preview-glow { animation-duration: 1.6s; } .ai-preview-glow { position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(239, 143, 47, .3) 0%, rgba(255, 175, 15, .1) 40%, transparent 70%); filter: blur(20px); z-index: 0; animation: ai-preview-glow-pulse 4.2s ease-in-out infinite; } .ai-preview-ring { position: absolute; border-radius: 50%; border: 1.5px solid transparent; pointer-events: none; z-index: 1; } .ai-preview-ring--1 { inset: 8px; border-top-color: var(--bn-orange); border-right-color: var(--bn-teal); opacity: .5; animation: ai-splash-spin 5.5s linear infinite; } .ai-preview-ring--2 { inset: 24px; border-bottom-color: var(--bn-orange-2); border-left-color: var(--bn-blue); opacity: .35; animation: ai-splash-spin 7.5s linear infinite reverse; } .ai-preview-ring--3 { inset: -10px; border-width: 1px; border-top-color: var(--bn-teal); border-left-color: var(--bn-orange); opacity: .25; animation: ai-splash-spin 11s linear infinite; } @keyframes ai-preview-glow-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.08); } } @keyframes ai-preview-logo-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.03); } } .ai-preview-empty h4 { margin: 0 0 8px; color: var(--bn-text); font-size: 16px; font-weight: 600; } .ai-preview-empty p { margin: 0 0 20px; font-size: 13px; max-width: 380px; } .ai-feature-list { list-style: none; padding: 0; margin: 0; text-align: left; font-size: 13px; } .ai-feature-list li { padding: 4px 0; color: var(--bn-text-2); } .ai-feature-list li i { color: #16a34a; margin-right: 8px; } /* ──────────────────────────────────────────────────────────── Carrossel "lo-fi SaaS doodles" no preview vazio ──────────────────────────────────────────────────────────── */ /* Mount vazio enquanto o JS nao montou. evita layout shift e mantem a empty state centralizada pelo justify-content:center do .ai-preview-empty. */ .ai-tool-cards-mount { width: 100%; max-width: 420px; margin: 0 auto; } .ai-tool-cards { width: 100%; margin-top: 28px; text-align: center; } .ai-tool-cards-head { margin-bottom: 16px; } .ai-tool-cards-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bn-orange); padding: 4px 11px; background: var(--bn-orange-soft); border: 1.5px dashed var(--bn-orange); border-radius: 999px; transform: rotate(-1.5deg); } .ai-tool-cards-eyebrow i { font-size: 9px; } .ai-tool-cards-head h5 { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--bn-text); } /* Stage com altura fixa - todos os cards posicionados absolutos sobrepostos, so o .is-active e visivel. Evita "pulo" de layout entre cards de alturas diferentes e simplifica a animacao de fade. */ .ai-tool-cards-stage { position: relative; height: 130px; margin: 0 auto; } .ai-tool-cards-stage .ai-tool-card { position: absolute; inset: 0; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; text-align: left; background: var(--bn-card); /* border-radius nao uniforme = sensacao desenhada a mao */ border: 1.5px dashed rgba(239, 143, 47, .5); border-radius: 18px 22px 16px 20px; padding: 14px 18px; /* sombra dupla: offset solido (estilo "sticker") + ambient sutil */ box-shadow: 4px 5px 0 rgba(239, 143, 47, .1), 0 6px 16px rgba(15, 23, 42, .05); opacity: 0; visibility: hidden; transform: translateY(10px) rotate(-1.4deg); transition: opacity .4s ease, transform .5s cubic-bezier(.4, 0, .2, 1), visibility .4s linear; } /* alterna leve rotacao por posicao (par/impar) pra reforcar feel "lo-fi" */ .ai-tool-cards-stage .ai-tool-card:nth-child(even) { transform: translateY(10px) rotate(1.1deg); } .ai-tool-cards-stage .ai-tool-card.is-active { opacity: 1; visibility: visible; transform: translateY(0) rotate(-1.4deg); } .ai-tool-cards-stage .ai-tool-card:nth-child(even).is-active { transform: translateY(0) rotate(1.1deg); } /* Icone circulo tracejado + glow ao trocar (sincronizado com fade do card) */ .ai-tool-card-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px dashed var(--bn-orange); border-radius: 16px 18px 16px 20px; background: var(--bn-orange-soft); color: var(--bn-orange); font-size: 22px; flex-shrink: 0; position: relative; } .ai-tool-cards-stage .ai-tool-card.is-active .ai-tool-card-icon { animation: ai-tool-icon-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes ai-tool-icon-pop { 0% { transform: scale(.7) rotate(-8deg); } 60% { transform: scale(1.08) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } .ai-tool-card-body h6 { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--bn-text); line-height: 1.3; } .ai-tool-card-body p { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--bn-text-2); } /* Doodles "asterisco/cross" nos cantos - feitos com pseudo-elements: uma linha horizontal e uma vertical sobrepostas, rotacionadas. Visual de anotacao a mao tipica de illustration packs. */ .ai-tool-card-doodle { position: absolute; width: 12px; height: 12px; color: var(--bn-orange); opacity: .55; pointer-events: none; } .ai-tool-card-doodle::before, .ai-tool-card-doodle::after { content: ""; position: absolute; background: currentColor; border-radius: 999px; } .ai-tool-card-doodle::before { left: 0; right: 0; top: 50%; height: 1.6px; transform: translateY(-50%); } .ai-tool-card-doodle::after { top: 0; bottom: 0; left: 50%; width: 1.6px; transform: translateX(-50%); } .ai-tool-card-doodle--tl { top: -7px; left: -4px; transform: rotate(18deg); } .ai-tool-card-doodle--br { bottom: -7px; right: 10px; transform: rotate(-22deg); } /* Dots indicador - circulo tracejado, preenche solido no ativo */ .ai-tool-cards-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .ai-tool-cards-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed var(--bn-orange); background: transparent; cursor: pointer; transition: transform .25s ease, background-color .25s ease, border-style .25s ease; padding: 0; box-sizing: border-box; } .ai-tool-cards-dot:hover { background: var(--bn-orange-soft); } .ai-tool-cards-dot.is-active { background: var(--bn-orange); border-style: solid; transform: scale(1.25); } /* Hover no card ativo: tilt + leve lift, mantendo a sensacao "post-it" */ .ai-tool-cards-stage .ai-tool-card.is-active:hover { transform: translateY(-2px) rotate(-2deg); } .ai-tool-cards-stage .ai-tool-card:nth-child(even).is-active:hover { transform: translateY(-2px) rotate(1.8deg); } /* Reduced motion: desliga rotacoes e o "pop" do icone; mantem so o fade. Pessoas com vestibulopatia/motion sickness recebem versao calma. */ @media (prefers-reduced-motion: reduce) { .ai-tool-cards-stage .ai-tool-card { transform: none !important; transition: opacity .2s linear; } .ai-tool-cards-stage .ai-tool-card.is-active .ai-tool-card-icon { animation: none; } .ai-tool-cards-eyebrow { transform: none; } } /* Dark theme: cards ganham um pouco mais de contraste no border (orange esta mais saturado no dark) e a sombra "sticker" enfraquece pra nao virar mancha. */ html[data-theme="dark"] .ai-tool-cards-stage .ai-tool-card { background: var(--bn-card-2); border-color: rgba(239, 143, 47, .55); box-shadow: 4px 5px 0 rgba(239, 143, 47, .12), 0 6px 16px rgba(0, 0, 0, .25); } .ai-pdf-canvas { display: block; margin: 0 auto 12px; box-shadow: var(--bn-shadow-md); border-radius: 4px; background: #fff; } /* Wrapper edge-to-edge. aspect-ratio A4 portrait (210x297mm = 1/1.4142), ajustado pra 1/1.47 pra acomodar o overshoot lateral do frame (104% width): o PDF com view=FitH+zoom=page-width renderiza com page_width = frame_width, logo page_height = 1.04 * 1.4142 ≈ 1.47 * wrap_width. Sem essa altura extra o conteudo do bottom ficaria fora do wrap (escondido por overflow:hidden). overflow:hidden + position:relative deixam o embed ser oversize e ter as bordas cortadas - elimina filete cinza do viewer em zoom-out subpixel. */ .ai-pdf-wrap { width: 100%; aspect-ratio: 1 / 1.43; background: #fff; overflow: hidden; position: relative; } /* embed renderizado um pouquinho maior que o wrap pra esconder a area preta que o viewer pinta atras do PDF (subpixel rounding em zoom-out). Crop sutil no topo (-0.4%) - o suficiente pra cortar o filete sem comer o cabecalho do DANFE; lateral mais agressiva pq nao tem conteudo nas margens. */ .ai-pdf-frame { display: block; position: absolute; top: -0.4%; left: -1.5%; width: 104%; height: 101%; border: 0; background: #fff; } /* Overlay transparente sobre o embed: bind manual no JS captura `wheel` e scrolla o `.ai-preview-body` direto, contornando o "travamento" inicial do plugin nativo de PDF do Chrome (ver renderPdf em ai-chat.js). */ .ai-pdf-wheel-catcher { position: absolute; inset: 0; background: transparent; z-index: 2; } /* Body sem padding pro PDF ficar colado nas bordas. overflow:auto pra rolar verticalmente se o wrap (height calculado por aspect-ratio) for maior que o body. bg branco preenche qualquer espaco sobrando se o body for mais alto que a pagina (raro em pane vertical). */ .ai-preview-body.has-pdf { padding: 0; overflow: auto; background: #fff; } .ai-xml-pre { background: #1e1e2e; color: #cdd6f4; border-radius: var(--bn-radius-sm); padding: 16px; font-size: 12px; line-height: 1.55; overflow: auto; margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; tab-size: 2; } /* Bloco de codigo dentro da bolha do chat (JSON de api_schema, XML, etc.). Cabecalho com label da linguagem + botao copiar; corpo dark com tokens do Prism (tema prism-tomorrow ja carregado no layout). */ .ai-code-block { margin: 10px 0; border: 1px solid #2a2a3a; border-radius: var(--bn-radius-sm); overflow: hidden; background: #1e1e2e; } .ai-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 6px 12px; background: #181825; border-bottom: 1px solid #2a2a3a; } .ai-code-lang { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9399b2; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .ai-code-copy { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid #2a2a3a; color: #cdd6f4; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 6px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .ai-code-copy:hover { background: rgba(255, 255, 255, .06); border-color: var(--bn-orange); color: var(--bn-orange); } .ai-code-copy.copied { color: #a6e3a1; border-color: #a6e3a1; } .ai-code-copy i { font-size: 11px; } .ai-code-pre { background: #1e1e2e; color: #cdd6f4; margin: 0; padding: 14px 16px; font-size: 12px; line-height: 1.55; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; white-space: pre; tab-size: 2; } .ai-code-block pre code { background: transparent; padding: 0; border-radius: 0; font-size: inherit; font-family: inherit; white-space: pre; text-shadow: none; } /* ── Scrollbars (modern, brand-aware) ────────────────────── Aplicado nas areas que rolam dentro do chat: timeline de mensagens, pane de previa (PDF/HTML/empty) e bloco de XML. Thin, com track quase invisivel e thumb soft que ganha cor laranja no hover. - Firefox usa scrollbar-width / scrollbar-color - Chromium/WebKit usa ::-webkit-scrollbar */ .ai-messages, .ai-preview-body, .ai-xml-pre, .ai-buy-credits { scrollbar-width: thin; scrollbar-color: var(--bn-border) transparent; } .ai-messages::-webkit-scrollbar, .ai-preview-body::-webkit-scrollbar, .ai-xml-pre::-webkit-scrollbar, .ai-buy-credits::-webkit-scrollbar { width: 10px; height: 10px; } .ai-messages::-webkit-scrollbar-track, .ai-preview-body::-webkit-scrollbar-track, .ai-xml-pre::-webkit-scrollbar-track, .ai-buy-credits::-webkit-scrollbar-track { background: transparent; } .ai-messages::-webkit-scrollbar-thumb, .ai-preview-body::-webkit-scrollbar-thumb, .ai-xml-pre::-webkit-scrollbar-thumb, .ai-buy-credits::-webkit-scrollbar-thumb { background-color: var(--bn-border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background-color .2s ease; } .ai-messages::-webkit-scrollbar-thumb:hover, .ai-preview-body::-webkit-scrollbar-thumb:hover, .ai-xml-pre::-webkit-scrollbar-thumb:hover, .ai-buy-credits::-webkit-scrollbar-thumb:hover { background-color: var(--bn-orange); } .ai-messages:hover, .ai-preview-body:hover, .ai-xml-pre:hover, .ai-buy-credits:hover { scrollbar-color: var(--bn-orange) transparent; } .ai-messages::-webkit-scrollbar-corner, .ai-preview-body::-webkit-scrollbar-corner, .ai-xml-pre::-webkit-scrollbar-corner, .ai-buy-credits::-webkit-scrollbar-corner { background: transparent; } /* Tema escuro: thumb mais sutil pra contrastar com fundo escuro do XML (que usa cor fixa #1e1e2e independente do tema). */ .ai-xml-pre { scrollbar-color: rgba(255, 255, 255, .15) transparent; } .ai-xml-pre::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .15); } .ai-xml-pre:hover { scrollbar-color: var(--bn-orange) transparent; } .ai-xml-pre::-webkit-scrollbar-thumb:hover { background-color: var(--bn-orange); } /* ── Responsive ────────────────────────────────────────── */ /* Mobile-only widgets: ficam escondidos em desktop. O JS controla o `hidden` attribute conforme abre/fecha o drawer, por isso !important e via media. */ .ai-mobile-fab { display: none; } /* ── Botao "ir pro final" - aparece quando o usuario sobe o scroll ─────── */ .ai-scroll-bottom-btn { position: absolute; /* Posicionado acima do composer. O composer tem altura variavel (depende dos chips de doctype + textarea + footer); escolhi um offset que cobre o caso padrao em desktop. Em mobile o media query abaixo recalcula. */ bottom: 180px; right: 18px; z-index: 30; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bn-border); background: var(--bn-card); color: var(--bn-text-2); box-shadow: 0 6px 18px rgba(15, 23, 42, .12); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, background-color .15s, color .15s, border-color .15s; } .ai-scroll-bottom-btn[hidden] { display: none; } .ai-scroll-bottom-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .ai-scroll-bottom-btn:hover { background: var(--bn-orange-soft); color: var(--bn-orange); border-color: var(--bn-orange); } .ai-scroll-bottom-btn i { font-size: 14px; } @media (max-width: 920px) { .ai-scroll-bottom-btn { bottom: 200px; right: 14px; } } .ai-mobile-preview-close { display: none; } @media (max-width: 920px) { /* ── Contencao global ── Em mobile o preview-pane fica off-screen via transform translateX(100%). Alguns browsers (Chrome Android principalmente) ainda contabilizam o elemento positioned na scrollWidth do body, criando um scroll horizontal fantasma. overflow-x:hidden no html/body mata definitivamente. */ html, body { overflow-x: hidden; } /* Ancora o body na VIEWPORT VISIVEL (visualViewport) em vez do layout viewport. Quando o teclado virtual abre no iOS Safari, ele encolhe so a visual viewport e ainda pode rolar o documento pra cima pra "manter o input visivel" - so que o body fica desalinhado: input vai pro topo e sobra um gap grande entre o input e o teclado. Com position:fixed + top = vv.offsetTop (setado por JS) o body acompanha a viewport visivel pixel a pixel, e o composer cola embaixo do teclado igual app de mensagem nativo. */ .ai-body { position: fixed; top: var(--ai-app-offset, 0px); left: 0; right: 0; } /* Chat ocupa a tela inteira; preview-pane vira drawer off-canvas a direita. Ao trocar para 1 coluna o grid-rows precisa colapsar tambem - senao o chat sofre o split em duas linhas mesmo com 1 coluna e a parte de baixo fica vazia. */ .ai-app { grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100%; max-width: 100vw; overflow: hidden; } .ai-chat-pane { border-right: 0; border-bottom: 0; width: 100%; max-width: 100vw; min-width: 0; } /* Unico scroll do app: vertical, dentro da area de mensagens. overscroll-behavior impede que o rubber-band do iOS propague pro parent (e cause efeito de "puxar" a tela toda). -webkit-overflow-scrolling deixa o scroll com momentum nativo. */ .ai-messages { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 14px; } /* Bolhas: forca quebra de palavras/URLs longas pra nao estourar lateral. O max-width:78% ja existe no desktop, em mobile da pra ir um pouco mais largo (85%) pra aproveitar melhor a tela. */ .ai-bubble { max-width: 85%; overflow-wrap: anywhere; word-break: break-word; } /* Composer com padding lateral menor pra dar mais espaco util pro input em telas estreitas (iPhone SE = 375px). */ .ai-composer { padding: 12px 12px 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } /* iOS Safari faz auto-zoom ao focar qualquer input/textarea com font-size menor que 16px, e o zoom nao volta sozinho - usuario fica preso numa viewport ampliada dificil de mexer. Subir a fonte pra 16px no mobile mata o trigger do zoom sem mudar nada visual (14px x 16px e imperceptivel em telas pequenas). */ #aiInput { font-size: 16px; } .ai-preview-pane { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100vw; z-index: 1050; transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); background: var(--bn-bg); box-shadow: -8px 0 32px rgba(0, 0, 0, .12); border-left: 1px solid var(--bn-border); } .ai-preview-pane.is-open { transform: translateX(0); } .ai-mobile-preview-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 6px; border: 1px solid var(--bn-border); background: var(--bn-bg); color: var(--bn-text-2); border-radius: 8px; cursor: pointer; } .ai-mobile-preview-close:hover { background: var(--bn-bg-soft); } /* FAB inline: fica na barra fixa (ai-doctype-chips-fixed) junto do "Nova conversa". Fora do scroll horizontal dos chips. Aspecto de pill laranja com badge pulsante quando ha previa nova nao vista. */ .ai-mobile-fab { display: inline-flex; align-items: center; gap: 6px; position: relative; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--bn-orange); color: #fff; font-weight: 600; font-size: 12px; line-height: 1; box-shadow: 0 2px 8px rgba(239, 143, 47, .35); cursor: pointer; flex-shrink: 0; transition: transform .15s ease; } .ai-mobile-fab:active { transform: scale(.96); } .ai-mobile-fab[hidden] { display: none !important; } .ai-mobile-fab i { font-size: 12px; } .ai-mobile-fab-badge { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: #dc2626; border: 2px solid var(--bn-card); opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease, background .2s ease; } /* Tem previa carregada (mesmo apos fechar drawer): bolinha verde pulsando devagar - indica "ha algo pra ver" sem brigar com o vermelho da novidade. */ .ai-mobile-fab--has-content .ai-mobile-fab-badge { opacity: 1; transform: scale(1); background: #16a34a; animation: ai-mobile-fab-pulse-soft 2.2s ease-in-out infinite; } /* Previa nova chegou: bolinha vermelha pulsante mais intensa (sobrescreve has-content) */ .ai-mobile-fab--new .ai-mobile-fab-badge { opacity: 1; transform: scale(1); background: #dc2626; animation: ai-mobile-fab-pulse 1.4s ease-in-out infinite; } @keyframes ai-mobile-fab-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .65); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } } @keyframes ai-mobile-fab-pulse-soft { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } } .ai-header-title { display: none; } .ai-cinema-h1 { font-size: 38px; } .ai-cinema-h1--big { font-size: 48px; } .ai-cinema-features { grid-template-columns: 1fr; } /* Em mobile os botoes laterais a meia-altura brigam com o conteudo da cena (features em 1 coluna, CTA da cena 4). Move pra base flanqueando o indicador de progresso, encolhe e aproxima das bordas. */ .ai-cinema-next, .ai-cinema-prev { top: auto; bottom: 20px; transform: none; width: 44px; height: 44px; font-size: 16px; } .ai-cinema-next { right: 16px; } .ai-cinema-prev { left: 16px; } .ai-cinema-prev:hover { transform: scale(1.05); } .ai-cinema-next:hover { transform: scale(1.06); } /* Sobe os dots para nao colidir com os botoes */ .ai-cinema-progress { bottom: 76px; } /* Reserva espaco no rodape das cenas para nao sobrepor os controles */ .ai-cinema-scene { padding-bottom: 130px; } } /* ============================================================ Comprar creditos - overlay + modal (vanilla, sem Bootstrap JS) Estrutura: aiBuyCreditsBackdrop > .ai-buy-credits (partial) ============================================================ */ .ai-bc-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 22, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9500; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .18s ease-out; } .ai-bc-backdrop.is-open { opacity: 1; pointer-events: auto; } .ai-buy-credits { background: var(--bn-card); color: var(--bn-text); border: 1px solid var(--bn-border); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .25); width: 100%; max-width: 980px; max-height: calc(100vh - 48px); overflow-y: auto; transform: translateY(8px) scale(.98); transition: transform .22s ease-out; } .ai-bc-backdrop.is-open .ai-buy-credits { transform: translateY(0) scale(1); } .ai-bc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 28px 16px; border-bottom: 1px solid var(--bn-border-soft); position: sticky; top: 0; z-index: 2; background: var(--bn-card); border-radius: 18px 18px 0 0; } .ai-bc-title h3 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--bn-text); } .ai-bc-title p { margin: 0; font-size: 13.5px; color: var(--bn-text-2); max-width: 560px; } .ai-bc-close { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--bn-border); background: var(--bn-card-2); color: var(--bn-text-2); border-radius: 10px; cursor: pointer; font-size: 14px; transition: background .15s, color .15s, border-color .15s; } .ai-bc-close:hover { background: var(--bn-orange-soft); color: var(--bn-orange); border-color: var(--bn-orange); } .ai-bc-balance { padding: 14px 28px; background: var(--bn-card-2); border-bottom: 1px solid var(--bn-border-soft); } .ai-bc-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; } .ai-bc-balance-label { color: var(--bn-text-2); font-weight: 500; } .ai-bc-balance-label .fa { margin-right: 6px; color: var(--bn-orange); } .ai-bc-balance-value strong { font-size: 18px; color: var(--bn-text); font-weight: 700; margin-right: 4px; } .ai-bc-balance-value small { color: var(--bn-text-2); font-size: 12.5px; } .ai-bc-balance-value em { color: var(--bn-text-muted); font-style: normal; margin-left: 8px; font-size: 12.5px; } .ai-bc-redeem { margin: 18px 28px 0; padding: 14px 16px; border: 1px dashed var(--bn-orange); border-radius: 12px; background: var(--bn-orange-soft); } .ai-bc-redeem-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--bn-text); margin-bottom: 10px; } .ai-bc-redeem-head .fa { color: var(--bn-orange); } .ai-bc-redeem-form { display: flex; gap: 8px; } .ai-bc-redeem-input { flex: 1 1 auto; padding: 10px 12px; border: 1px solid var(--bn-border-soft); border-radius: 8px; font-size: 14px; text-transform: uppercase; background: var(--bn-input-bg); color: var(--bn-text); } .ai-bc-redeem-input::placeholder { color: var(--bn-text-muted); } .ai-bc-redeem-input:focus { outline: none; border-color: var(--bn-orange); box-shadow: 0 0 0 3px rgba(239, 143, 47, .15); } .ai-bc-redeem-btn { flex: 0 0 auto; padding: 10px 18px; border: none; border-radius: 8px; background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; } .ai-bc-redeem-btn .fa { margin-right: 6px; } .ai-bc-redeem-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(239, 143, 47, .35); } .ai-bc-redeem-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; } .ai-bc-redeem-msg { margin: 8px 2px 0; font-size: 12.5px; min-height: 16px; } .ai-bc-redeem-msg.is-ok { color: #16a34a; } .ai-bc-redeem-msg.is-err { color: #dc2626; } .ai-bc-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 28px 8px; } .ai-bc-pack { position: relative; border: 1px solid var(--bn-border); background: var(--bn-card); border-radius: 14px; padding: 22px 18px 18px; display: flex; flex-direction: column; transition: transform .18s ease, border-color .18s, box-shadow .18s; } .ai-bc-pack:hover { transform: translateY(-2px); border-color: var(--bn-orange); box-shadow: 0 12px 32px rgba(239, 143, 47, .12); } .ai-bc-pack.is-highlighted { border-color: var(--bn-orange); background: linear-gradient(180deg, var(--bn-orange-soft) 0%, var(--bn-card) 70%); box-shadow: 0 12px 32px rgba(239, 143, 47, .18); } .ai-bc-pack-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(239, 143, 47, .35); white-space: nowrap; } .ai-bc-pack-ribbon .fa { margin-right: 4px; } .ai-bc-pack-head { margin-bottom: 6px; } .ai-bc-pack-head h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--bn-text); } .ai-bc-pack-tag { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--bn-text-muted); } .ai-bc-pack-credits { margin: 4px 0 2px; display: flex; align-items: baseline; gap: 6px; } .ai-bc-pack-credits strong { font-size: 28px; font-weight: 700; color: var(--bn-orange); line-height: 1; } .ai-bc-pack-credits small { font-size: 13px; color: var(--bn-text-2); } .ai-bc-pack-price { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--bn-border); } .ai-bc-pack-currency { font-size: 14px; color: var(--bn-text-2); font-weight: 600; } .ai-bc-pack-amount { font-size: 24px; font-weight: 700; color: var(--bn-text); } .ai-bc-pack-bullets { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--bn-text-2); flex: 1; } .ai-bc-pack-bullets li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .ai-bc-pack-bullets li > span { flex: 1; min-width: 0; } .ai-bc-pack-bullets .fa { color: var(--bn-orange); font-size: 12px; width: 14px; text-align: center; flex: 0 0 14px; margin-top: 4px; } .ai-bc-pack-bullets strong { color: var(--bn-text); font-weight: 600; } .ai-bc-pack-cta { width: 100%; padding: 11px 14px; border: none; border-radius: 10px; background: var(--bn-card-2); color: var(--bn-text); border: 1px solid var(--bn-border); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; } .ai-bc-pack-cta .fa { margin-right: 6px; } .ai-bc-pack-cta:hover { background: var(--bn-orange-soft); color: var(--bn-orange); border-color: var(--bn-orange); } .ai-bc-pack.is-highlighted .ai-bc-pack-cta { background: linear-gradient(135deg, var(--bn-orange) 0%, var(--bn-orange-2) 100%); border-color: transparent; color: #fff; } .ai-bc-pack.is-highlighted .ai-bc-pack-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(239, 143, 47, .35); color: #fff; } .ai-bc-howitworks { padding: 12px 28px 8px; } .ai-bc-howitworks h5 { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--bn-text); text-transform: uppercase; letter-spacing: .4px; } .ai-bc-howitworks h5 .fa { color: var(--bn-orange); margin-right: 6px; } .ai-bc-howitworks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Quando ha um numero impar de cards (5, 7, ...), o ultimo fica orfao em 1 coluna deixando um buraco. Estica ele pra ocupar as 2 colunas - bom pro card "Vale em qualquer empresa" que vira destaque natural no rodape. */ .ai-bc-howitworks-grid .ai-bc-how-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .ai-bc-how-card { display: flex; gap: 12px; padding: 14px; background: var(--bn-card-2); border: 1px solid var(--bn-border-soft); border-radius: 12px; } .ai-bc-how-icon { flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--bn-orange-soft); color: var(--bn-orange); display: flex; align-items: center; justify-content: center; font-size: 16px; } .ai-bc-how-body strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--bn-text); margin-bottom: 4px; } .ai-bc-how-body p { margin: 0; font-size: 12.5px; color: var(--bn-text-2); line-height: 1.5; } .ai-bc-how-body strong em { font-style: normal; color: var(--bn-orange); } .ai-bc-howitworks-foot { margin: 14px 0 0; padding: 10px 12px; background: var(--bn-card-2); border: 1px dashed var(--bn-border); border-radius: 10px; font-size: 12px; color: var(--bn-text-muted); line-height: 1.5; } .ai-bc-howitworks-foot .fa { color: var(--bn-orange); margin-right: 6px; } .ai-bc-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 28px 24px; border-top: 1px solid var(--bn-border-soft); margin-top: 8px; } .ai-bc-footer-back { background: transparent; border: 1px solid var(--bn-border); color: var(--bn-text-2); padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .ai-bc-footer-back:hover { background: var(--bn-card-2); color: var(--bn-text); border-color: var(--bn-text-muted); } .ai-bc-footer-back .fa { margin-right: 6px; } .ai-bc-footer-link { color: var(--bn-text-2); font-size: 13px; text-decoration: none; transition: color .15s; } .ai-bc-footer-link:hover { color: var(--bn-orange); } .ai-bc-footer-link .fa { margin-left: 4px; font-size: 11px; } /* Mobile: pacotes em coluna, "como funciona" em coluna unica, padding reduzido */ @media (max-width: 760px) { .ai-bc-backdrop { padding: 12px; align-items: flex-start; } .ai-buy-credits { border-radius: 14px; max-height: calc(100vh - 24px); } .ai-bc-header { padding: 18px 18px 14px; border-radius: 14px 14px 0 0; } .ai-bc-title h3 { font-size: 18px; } .ai-bc-balance { padding: 12px 18px; } .ai-bc-balance-row { flex-direction: column; align-items: flex-start; gap: 4px; } .ai-bc-packs { grid-template-columns: 1fr; gap: 14px; padding: 18px; } .ai-bc-pack { padding: 18px 16px 16px; } .ai-bc-howitworks { padding: 8px 18px; } .ai-bc-howitworks-grid { grid-template-columns: 1fr; } .ai-bc-footer { padding: 14px 18px 20px; flex-direction: column; align-items: stretch; } .ai-bc-footer-back { width: 100%; } .ai-bc-footer-link { text-align: center; padding-top: 4px; } } /* ============================================================================ Custom tooltip (portal) ---------------------------------------------------------------------------- Substitui o tooltip nativo do browser. Atributo `data-tip` carrega o texto; `data-tip-pos` ("top"|"bottom"|"left"|"right") controla onde aparece. Por que portal (1 elemento global appendado ao body) em vez de pseudo-element no proprio trigger: ancestrais com `overflow: hidden/auto` (ex: .ai-doctype-chips-scroll, que tem overflow-x: auto -> a spec forca overflow-y tambem virar auto) clipam o tooltip. Renderizando no body, escapa de qualquer overflow/stacking context do ancestral. JS (ai-chat.js) cria 1x o #aiTip, posiciona via getBoundingClientRect() no hover/focus, e esconde no leave/blur. ============================================================================ */ .ai-tip { position: fixed; top: 0; left: 0; background: var(--bn-tip-bg, #1f2937); color: var(--bn-tip-fg, #f9fafb); padding: 6px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 500; line-height: 1.35; letter-spacing: .01em; max-width: 260px; width: max-content; text-align: center; white-space: normal; z-index: 10050; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease; } .ai-tip.is-visible { opacity: 1; transform: translateY(0); } .ai-tip[data-tip-pos="bottom"] { transform: translateY(-4px); } .ai-tip[data-tip-pos="bottom"].is-visible { transform: translateY(0); } .ai-tip[data-tip-pos="left"] { transform: translateX(4px); } .ai-tip[data-tip-pos="left"].is-visible { transform: translateX(0); } .ai-tip[data-tip-pos="right"] { transform: translateX(-4px); } .ai-tip[data-tip-pos="right"].is-visible { transform: translateX(0); } /* Seta direcional. Posicionada via custom prop --tip-arrow-left setada pelo JS, pra que aponte pro centro do elemento trigger (que pode nao estar centralizado no balao quando este foi puxado pra dentro do viewport pelo clamp). */ .ai-tip::before { content: ''; position: absolute; border: 5px solid transparent; } .ai-tip[data-tip-pos="top"]::before { bottom: -10px; left: var(--tip-arrow-left, 50%); transform: translateX(-50%); border-top-color: var(--bn-tip-bg, #1f2937); } .ai-tip[data-tip-pos="bottom"]::before { top: -10px; left: var(--tip-arrow-left, 50%); transform: translateX(-50%); border-bottom-color: var(--bn-tip-bg, #1f2937); } .ai-tip[data-tip-pos="left"]::before { right: -10px; top: 50%; transform: translateY(-50%); border-left-color: var(--bn-tip-bg, #1f2937); } .ai-tip[data-tip-pos="right"]::before { left: -10px; top: 50%; transform: translateY(-50%); border-right-color: var(--bn-tip-bg, #1f2937); } html[data-theme="dark"] .ai-tip { --bn-tip-bg: #f3f4f6; --bn-tip-fg: #111827; } @media (prefers-reduced-motion: reduce) { .ai-tip { transition: none; } } /* ============================================================================ Strike-through de preco "antigo" no card de compra ============================================================================ */ .ai-bc-pack-price-from { display: block; font-size: 12px; color: var(--bn-text-muted); text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, .55); text-decoration-thickness: 1.5px; margin-bottom: 2px; font-weight: 500; letter-spacing: .01em; } .ai-bc-pack-discount { display: inline-block; font-size: 10.5px; font-weight: 700; background: rgba(220, 38, 38, .10); color: #b91c1c; border: 1px solid rgba(220, 38, 38, .25); padding: 2px 7px; border-radius: 999px; margin-top: 4px; letter-spacing: .02em; text-transform: uppercase; } html[data-theme="dark"] .ai-bc-pack-discount { background: rgba(248, 113, 113, .14); color: #fca5a5; border-color: rgba(248, 113, 113, .35); } /* ============================================================================ Disclaimer "IA pode cometer erros" - linha discreta abaixo do composer ============================================================================ */ .ai-composer-disclaimer { margin-top: 6px; font-size: 10.5px; color: var(--bn-text-muted); text-align: center; line-height: 1.4; opacity: .85; letter-spacing: .01em; } .ai-composer-disclaimer i { margin-right: 4px; color: var(--bn-orange); opacity: .75; }