1+ # desi-chat-widget {
2+ position : fixed;
3+ bottom : 20px ;
4+ right : 20px ;
5+ z-index : 9999 ;
6+ font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI' , Roboto, sans-serif
7+ }
8+ # desi-chat-button {
9+ width : 60px ;
10+ height : 60px ;
11+ border-radius : 50% ;
12+ background : linear-gradient (135deg , # 667eea 0 , # 764ba2 100% );
13+ border : none;
14+ cursor : pointer;
15+ box-shadow : 0 4px 12px rgba (0 , 0 , 0 , .15 );
16+ display : flex;
17+ align-items : center;
18+ justify-content : center;
19+ transition : all .3s ease;
20+ color : # fff ;
21+ font-size : 24px
22+ }
23+ # desi-chat-button : hover {
24+ transform : scale (1.1 );
25+ box-shadow : 0 6px 20px rgba (0 , 0 , 0 , .2 )
26+ }
27+ # desi-chat-window {
28+ position : absolute;
29+ bottom : 80px ;
30+ right : 0 ;
31+ width : 350px ;
32+ height : 500px ;
33+ background : # fff ;
34+ border-radius : 12px ;
35+ box-shadow : 0 8px 30px rgba (0 , 0 , 0 , .12 );
36+ display : none;
37+ flex-direction : column;
38+ overflow : hidden;
39+ border : 1px solid # e1e5e9
40+ }
41+ # desi-chat-window .open {
42+ display : flex
43+ }
44+ .desi-chat-header {
45+ background : linear-gradient (135deg , # 667eea 0 , # 764ba2 100% );
46+ color : # fff ;
47+ padding : 16px ;
48+ display : flex;
49+ align-items : center;
50+ justify-content : space-between
51+ }
52+ .desi-chat-header h3 {
53+ margin : 0 ;
54+ font-size : 16px ;
55+ font-weight : 600
56+ }
57+ .desi-chat-close {
58+ background : 0 0 ;
59+ border : none;
60+ color : # fff ;
61+ cursor : pointer;
62+ font-size : 18px ;
63+ padding : 4px ;
64+ border-radius : 4px ;
65+ transition : background-color .2s
66+ }
67+ .desi-chat-close : hover {
68+ background-color : rgba (255 , 255 , 255 , .2 )
69+ }
70+ .desi-chat-messages {
71+ flex : 1 ;
72+ overflow-y : auto;
73+ padding : 16px ;
74+ display : flex;
75+ flex-direction : column;
76+ gap : 12px
77+ }
78+ .desi-message {
79+ max-width : 80% ;
80+ padding : 10px 14px ;
81+ border-radius : 18px ;
82+ font-size : 14px ;
83+ line-height : 1.4 ;
84+ word-wrap : break-word
85+ }
86+ .desi-message .user {
87+ background : # 667eea ;
88+ color : # fff ;
89+ align-self : flex-end;
90+ border-bottom-right-radius : 4px
91+ }
92+ .desi-message .assistant {
93+ background : # f1f3f5 ;
94+ color : # 333 ;
95+ align-self : flex-start;
96+ border-bottom-left-radius : 4px
97+ }
98+ .desi-message .loading {
99+ background : # f1f3f5 ;
100+ color : # 666 ;
101+ align-self : flex-start;
102+ border-bottom-left-radius : 4px ;
103+ font-style : italic
104+ }
105+ .desi-chat-input {
106+ padding : 16px ;
107+ border-top : 1px solid # e1e5e9 ;
108+ display : flex;
109+ gap : 8px
110+ }
111+ .desi-chat-input input {
112+ flex : 1 ;
113+ padding : 10px 14px ;
114+ border : 1px solid # d1d9e0 ;
115+ border-radius : 20px ;
116+ outline : 0 ;
117+ font-size : 14px ;
118+ transition : border-color .2s
119+ }
120+ .desi-chat-input input : focus {
121+ border-color : # 667eea
122+ }
123+ .desi-chat-input button {
124+ padding : 10px 16px ;
125+ background : # 667eea ;
126+ color : # fff ;
127+ border : none;
128+ border-radius : 20px ;
129+ cursor : pointer;
130+ font-size : 14px ;
131+ transition : background-color .2s
132+ }
133+ .desi-chat-input button : hover {
134+ background : # 5a6fd8
135+ }
136+ .desi-chat-input button : disabled {
137+ background : # ccc ;
138+ cursor : not-allowed
139+ }
140+ .desi-message .markdown-content h1 ,
141+ .desi-message .markdown-content h2 ,
142+ .desi-message .markdown-content h3 {
143+ font-size : 1.1em ;
144+ margin : 8px 0 4px 0 ;
145+ font-weight : 600
146+ }
147+ .desi-message .markdown-content p {
148+ margin : 4px 0
149+ }
150+ .desi-message .markdown-content code {
151+ background : rgba (0 , 0 , 0 , .1 );
152+ padding : 2px 4px ;
153+ border-radius : 3px ;
154+ font-family : Monaco, Consolas, monospace;
155+ font-size : .9em
156+ }
157+ .desi-message .markdown-content pre {
158+ background : rgba (0 , 0 , 0 , .05 );
159+ padding : 8px ;
160+ border-radius : 6px ;
161+ overflow-x : auto;
162+ margin : 8px 0
163+ }
164+ .desi-message .markdown-content ol ,
165+ .desi-message .markdown-content ul {
166+ margin : 4px 0 ;
167+ padding-left : 20px
168+ }
169+ @media (max-width : 480px ) {
170+ # desi-chat-window {
171+ width : calc (100vw - 40px );
172+ height : calc (100vh - 140px );
173+ bottom : 80px ;
174+ right : 20px
175+ }
176+ }
0 commit comments