A React Native app for the ultimate thinking partner.
1/* Prevent zoom from pushing content off bottom */
2html, body {
3 /* Prevent iOS Safari from zooming when focusing inputs */
4 -webkit-text-size-adjust: 100%;
5 /* Ensure consistent rendering */
6 touch-action: manipulation;
7}
8
9/* Input styling */
10textarea,
11input[type="text"],
12.input-transparent {
13 -webkit-appearance: none;
14 /* Prevent iOS zoom on focus - minimum 16px font */
15 font-size: 16px !important;
16 /* Remove default outline */
17 outline: none !important;
18 border: none !important;
19}
20
21textarea:focus,
22input[type="text"]:focus {
23 outline: none !important;
24 border: none !important;
25}
26
27/* Override any blue focus styles */
28textarea:focus-visible,
29input[type="text"]:focus-visible {
30 outline: none !important;
31 border: none !important;
32}
33
34/* Force user message text color based on app theme */
35[data-theme="light"] [data-user-message="true"] * {
36 color: white !important;
37}
38
39[data-theme="dark"] [data-user-message="true"] * {
40 color: black !important;
41}
42
43/* Typing cursor animation */
44@keyframes blink {
45 0%, 49% {
46 opacity: 1;
47 }
48 50%, 100% {
49 opacity: 0;
50 }
51}
52
53/* Apply blink animation to typing cursor - web only */
54.cursor-blink {
55 animation: blink 1s infinite;
56}
57
58/* Copy button hover effect - web only */
59/* Target copy button by testID */
60[data-testid="copy-button"]:hover {
61 opacity: 0.7 !important;
62 transition: opacity 0.2s ease;
63}
64
65/* Fallback: Target copy button by its unique style combination */
66[style*="padding: 8px"][style*="opacity: 0.3"][style*="borderRadius: 4px"]:hover,
67[style*="padding:8px"][style*="opacity:0.3"][style*="borderRadius:4px"]:hover {
68 opacity: 0.7 !important;
69 transition: opacity 0.2s ease;
70}
71
72/* More specific targeting - include parent container selector */
73[style*="justifyContent: flex-end"] [style*="padding: 8px"][style*="opacity: 0.3"]:hover,
74[style*="justifyContent:flex-end"] [style*="padding:8px"][style*="opacity:0.3"]:hover {
75 opacity: 0.7 !important;
76 transition: opacity 0.2s ease;
77}