File size: 2,120 Bytes
7fd5b67
 
 
 
 
 
 
 
 
 
 
 
bba6f5b
7fd5b67
bba6f5b
7fd5b67
a17febe
 
 
 
7fd5b67
 
bba6f5b
 
 
7fd5b67
 
bba6f5b
7fd5b67
 
a17febe
 
7fd5b67
 
 
bba6f5b
a17febe
7fd5b67
 
 
 
bba6f5b
 
a17febe
7fd5b67
a17febe
7fd5b67
 
a17febe
7fd5b67
 
 
 
a17febe
 
7fd5b67
 
a17febe
 
7fd5b67
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bba6f5b
7fd5b67
 
 
 
 
 
 
 
 
 
 
 
a17febe
 
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
/* ============================
   GLOBAL MOBILE FIRST STYLES
   ============================ */

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Inter", sans-serif;
}

/* Header */
#header {
    background: linear-gradient(90deg, #8e2de2, #4a00e0);
    padding: 10px;
    color: white;
    display: flex;
    align-items: center;
}

/* Hamburger button */
#hamburger > button,
#hamburger {
    background: transparent !important;
    border: none !important;
    font-size: 30px !important;
    color: white !important;
    cursor: pointer;
    padding: 0;
    box-shadow: none !important;
}

/* Login button must remain clickable */
#login-btn {
    margin-left: auto;
}

/* ============================
   DRAWER MENU / SIDE PANEL
   ============================ */

#drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    background: #ffffff;
    border-right: 2px solid #ddd;
    z-index: 9999;
}

#drawer .gradio-container {
    padding: 5px !important;
}

/* Inputs inside drawer */
#drawer input, 
#drawer select, 
#drawer textarea,
#drawer .gradio-slider input {
    font-size: 15px !important;
}

/* Hide oversized Gradio labels on mobile */
#drawer label {
    font-size: 14px !important;
    font-weight: 600;
}

/* ============================
   CHAT AREA
   ============================ */

.gradio-chatbot,
gradio-app {
    width: 100%;
}

#chatbot {
    width: 100%;
}

/* Prevent overflow issues in iPhone Safari */
.gradio-container {
    max-width: 100% !important;
}

/* ============================
   FILE OUTPUT
   ============================ */
#file_output,
.gradio-file {
    margin-top: 15px;
}

/* ============================
   RESPONSIVE RULES
   ============================ */

@media only screen and (min-width: 900px) {
    #drawer {
        display: block;
        position: relative;
        width: 250px;
        border-right: none;
    }

    #hamburger {
        display: none;
    }

    #header {
        justify-content: center;
    }
}