Hugging Face's logo

Spaces:
caarleexx
/
paraAI_CHATBOT
Paused

App Files Community
paraAI_CHATBOT
File size: 5,306 Bytes
43e76ab
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79977fa
 
 
 
 
43e76ab
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79977fa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
569fee8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79977fa
43e76ab
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79977fa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,500;0,600;1,400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── BASE ────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { font-size: 16px; }

  body {
    @apply bg-dark-950 text-slate-100;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::-webkit-scrollbar          { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track    { background: transparent; }
  ::-webkit-scrollbar-thumb    { @apply bg-dark-600 rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-gold-700; }

  ::selection {
    @apply bg-gold-700/40 text-gold-100;
  }
}

/* ── CUSTOM PROSE (markdown in chat) ─────────────────────────────── */
@layer components {
  .prose-para {
    @apply text-slate-200 leading-relaxed;
  }
  .prose-para h1 {
    @apply font-serif font-semibold text-gold-300 text-xl mt-4 mb-2 pb-1 border-b border-dark-600;
  }
  .prose-para h2 {
    @apply font-serif font-semibold text-gold-300 text-lg mt-3 mb-1.5;
  }
  .prose-para h3 {
    @apply font-serif font-medium text-slate-200 text-base mt-3 mb-1;
  }
  .prose-para strong {
    @apply font-semibold text-slate-100;
  }
  .prose-para em {
    @apply italic text-slate-300;
  }
  .prose-para code {
    @apply font-mono text-xs bg-navy-900/60 border border-navy-600/40 text-sky-300 rounded px-1.5 py-0.5;
    /* Garantir quebra de linha para código inline */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .prose-para blockquote {
    @apply border-l-2 border-gold-600 bg-gold-950/20 rounded-r-lg px-4 py-2.5 my-3;
    @apply font-serif italic text-gold-200/90 text-sm;
  }
  .prose-para a {
    @apply text-gold-400 underline underline-offset-2 hover:text-gold-300 transition-colors;
  }
  .prose-para hr {
    @apply border-dark-600 my-4;
  }
  .prose-para br {
    @apply leading-relaxed;
  }

  /* Consecutive blockquotes */
  .prose-para blockquote + blockquote {
    @apply mt-1;
  }

  /* ── BLOCOS DE CÓDIGO (para highlight.js ou outros) ────────── */
  /* Aplica a blocos <pre><code> e também a <code> com classes de highlight */
  pre code,
  pre code.hljs,
  code.hljs,
  .hljs {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
  }
  /* Ajuste adicional para <pre> que envolve o código */
  pre {
    @apply bg-navy-900/80 border border-navy-700 rounded-lg p-3 overflow-x-auto;
  }

  /* ── ESTILO ESPECÍFICO PARA EMENTAS (language-ementa) ────────── */
  pre code.language-ementa {
    display: block;
    position: relative;
    padding-top: 2rem; /* espaço para o label */
    background-color: #1e293b; /* tom navy mais escuro */
    border-left: 4px solid #c9a84c; /* dourado */
    border-radius: 0.5rem;
    font-family: 'Lora', Georgia, serif; /* fonte serifada para contraste */
    font-size: 0.9rem;
    line-height: 1.6;
    color: #e2e8f0;
  }

  /* Pseudo-elemento para o label "EMENTA" */
  pre code.language-ementa::before {
    content: "⚖ EMENTA";
    position: absolute;
    top: 0;
    left: 0;
    background: #c9a84c;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 0 0 0.5rem 0;
    text-transform: uppercase;
    z-index: 10;
  }
}

/* ── ANIMATIONS ───────────────────────────────────────────────────── */
@layer utilities {
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);     }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-6px); }
  }
  @keyframes blink {
    0%, 100% { opacity: 1;  }
    50%       { opacity: 0;  }
  }
  @keyframes accordion {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
  }
  @keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
    50%       { box-shadow: 0 0 12px 3px rgba(201,168,76,.25); }
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .animate-slideUp  { animation: slideUp 0.35s ease both; }
  .animate-fadeIn   { animation: fadeIn 0.5s ease both; }
  .animate-float    { animation: float 3s ease-in-out infinite; }
  .animate-blink    { animation: blink 1s step-end infinite; }
  .animate-accordion { animation: accordion 0.25s ease both; }
  .animate-goldPulse { animation: goldPulse 2s ease-in-out infinite; }
  .animate-spin-slow { animation: spin 1.5s linear infinite; }
}