Spaces:
Sleeping
Sleeping
File size: 10,671 Bytes
18f908a | 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 164 165 | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg:#f5f0e8;
--sidebar:#2c1f14;
--sidebar-hover:rgba(255,255,255,0.05);
--sidebar-active:rgba(193,122,74,0.15);
--sidebar-active-border:rgba(193,122,74,0.3);
--sidebar-text:#a89a88;
--sidebar-text-active:#e8c9a8;
--sidebar-label:#7a6a58;
--accent:#c17a4a;
--accent-light:#f0e8d8;
--card:#ffffff;
--card-border:#ddd0be;
--text:#1a1209;
--text-2:#5a4a38;
--text-3:#a89a88;
--input-bg:#f5f0e8;
--tag-bg:#f0e8d8;
--tag-border:#d4c4ae;
--tag-text:#7a6a58;
--divider:#ecdecb;
--danger:#c0392b;
--danger-bg:#fdf0ee;
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
.app{display:flex;min-height:100vh;}
/* SIDEBAR */
.sidebar{width:230px;flex-shrink:0;background:var(--sidebar);padding:24px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.logo{font-family:'Playfair Display',serif;font-size:22px;color:#f5f0e8;letter-spacing:0.02em;margin-bottom:32px;padding-left:8px;}
.logo span{color:var(--accent);}
.nav-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.2em;color:var(--sidebar-label);text-transform:uppercase;padding:0 8px;margin:18px 0 6px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;color:var(--sidebar-text);cursor:pointer;border:0.5px solid transparent;transition:all 0.15s;margin-bottom:1px;}
.nav-item i{font-size:15px;width:16px;flex-shrink:0;}
.nav-item:hover{background:var(--sidebar-hover);color:#d4c4b0;}
.nav-item.active{background:var(--sidebar-active);border-color:var(--sidebar-active-border);color:var(--sidebar-text-active);}
.nav-item .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.nav-item .del-btn{opacity:0;font-size:12px;color:var(--sidebar-label);background:none;border:none;cursor:pointer;padding:0 2px;line-height:1;}
.nav-item:hover .del-btn{opacity:1;}
.nav-item .del-btn:hover{color:#e87a6a;}
.sidebar-footer{margin-top:auto;padding-top:16px;border-top:0.5px solid rgba(255,255,255,0.08);}
.api-key-box{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px 14px;}
.api-key-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.18em;color:var(--sidebar-label);text-transform:uppercase;margin-bottom:6px;}
.api-key-input{width:100%;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);border-radius:6px;padding:7px 9px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#d4c4b0;outline:none;transition:border-color 0.15s;}
.api-key-input:focus{border-color:rgba(193,122,74,0.5);}
.api-key-input::placeholder{color:var(--sidebar-label);}
/* MAIN */
.main{flex:1;padding:36px 32px;min-width:0;display:flex;flex-direction:column;}
.page{display:none;flex-direction:column;gap:20px;}
.page.active{display:flex;}
.page-header{margin-bottom:4px;}
.page-header h1{font-family:'Playfair Display',serif;font-size:26px;font-weight:500;color:var(--text);letter-spacing:-0.01em;margin-bottom:6px;}
.page-header p{font-size:13px;color:var(--text-3);}
/* CARDS */
.card{background:var(--card);border:0.5px solid var(--card-border);border-radius:14px;padding:20px 22px;}
.card-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.2em;color:var(--text-3);text-transform:uppercase;margin-bottom:12px;}
/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.stat-card{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;padding:18px 20px;}
.stat-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.2em;color:var(--text-3);text-transform:uppercase;margin-bottom:10px;}
.stat-value{font-family:'Playfair Display',serif;font-size:28px;color:var(--text);line-height:1;}
.stat-sub{font-size:11px;color:var(--text-3);margin-top:5px;}
/* UPLOAD */
.upload-zone{border:1.5px dashed var(--card-border);border-radius:12px;padding:32px;text-align:center;cursor:pointer;background:rgba(255,255,255,0.5);transition:all 0.2s;margin-bottom:14px;}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--accent);background:#fffcf8;}
.upload-zone input{display:none;}
.upload-icon{font-size:28px;color:var(--text-3);margin-bottom:12px;}
.upload-zone h3{font-family:'Playfair Display',serif;font-size:16px;font-weight:500;color:var(--text);margin-bottom:4px;}
.upload-zone .hint{font-size:12px;color:var(--text-3);margin-bottom:14px;}
.file-types{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.badge{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--tag-bg);border:0.5px solid var(--tag-border);border-radius:5px;padding:3px 9px;color:var(--tag-text);}
/* STATUS BAR */
.status-bar{display:none;padding:10px 14px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--accent-light);border:0.5px solid var(--tag-border);color:var(--text-2);margin-top:10px;}
/* BUTTONS */
.btn{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:10px 18px;border-radius:9px;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:7px;border:none;}
.btn-dark{background:var(--sidebar);color:#f5f0e8;}
.btn-dark:hover{background:#3d2e1f;}
.btn-dark:disabled{opacity:0.4;cursor:not-allowed;}
.btn-outline{background:transparent;color:var(--text-2);border:0.5px solid var(--card-border);}
.btn-outline:hover{background:var(--accent-light);}
.btn-full{width:100%;justify-content:center;}
.btn-sm{padding:6px 12px;font-size:12px;}
/* SEARCH/QUERY */
.query-row{display:flex;gap:8px;align-items:stretch;}
.query-input{flex:1;background:var(--input-bg);border:0.5px solid var(--card-border);border-radius:9px;padding:10px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);outline:none;transition:border-color 0.15s;}
.query-input:focus{border-color:var(--accent);}
.query-input::placeholder{color:var(--text-3);}
/* ANSWER */
.answer-block{margin-top:16px;padding-top:16px;border-top:0.5px solid var(--divider);}
.answer-text{font-size:14px;color:var(--text-2);line-height:1.8;margin-bottom:12px;}
.sources-row{display:flex;flex-wrap:wrap;gap:6px;}
.source-chip{display:inline-flex;align-items:center;gap:5px;background:var(--tag-bg);border:0.5px solid var(--tag-border);border-radius:6px;padding:4px 10px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--tag-text);}
.source-chip i{font-size:12px;}
.confidence-badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 8px;border-radius:4px;margin-left:8px;}
.conf-high{background:#eaf6ee;color:#2a7a4a;}
.conf-medium{background:#fef6e4;color:#8a6010;}
.conf-low{background:#fdf0ee;color:#c0392b;}
/* FILE CARDS */
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.file-card{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;overflow:hidden;transition:border-color 0.15s;}
.file-card:hover{border-color:var(--accent);}
.file-thumb{width:100%;height:100px;object-fit:cover;background:var(--accent-light);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--text-3);}
.file-thumb img{width:100%;height:100%;object-fit:cover;}
.file-info{padding:12px 14px;}
.file-name{font-size:12px;font-weight:500;color:var(--text);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-type{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;}
.file-meta{font-size:11px;color:var(--text-3);margin-top:6px;}
/* SUMMARY */
.summary-list{display:flex;flex-direction:column;gap:14px;}
.summary-item{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;padding:18px 20px;}
.summary-filename{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;color:var(--accent);text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.summary-text{font-size:13px;color:var(--text-2);line-height:1.75;margin-bottom:12px;}
.entity-row{display:flex;flex-wrap:wrap;gap:5px;}
.entity-chip{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--tag-bg);border:0.5px solid var(--tag-border);border-radius:4px;padding:2px 8px;color:var(--tag-text);}
/* CONNECTIONS */
.conn-list{display:flex;flex-direction:column;gap:12px;}
.conn-item{background:var(--card);border:0.5px solid var(--card-border);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;}
.conn-icon{width:36px;height:36px;border-radius:50%;background:var(--accent-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-size:16px;}
.conn-docs{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);margin-bottom:5px;}
.conn-text{font-size:13px;color:var(--text-2);line-height:1.6;}
/* EMPTY STATE */
.empty-state{text-align:center;padding:48px 20px;color:var(--text-3);}
.empty-state i{font-size:36px;display:block;margin-bottom:12px;opacity:0.4;}
.empty-state p{font-size:13px;}
/* CHAT HISTORY */
.chat-history{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto;margin-bottom:14px;padding-right:4px;}
.chat-q{background:var(--accent-light);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--text-2);align-self:flex-end;max-width:80%;border:0.5px solid var(--tag-border);}
.chat-a{background:var(--card);border:0.5px solid var(--card-border);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--text-2);line-height:1.75;}
.chat-a .src{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px;}
/* DIVIDER */
.or-divider{text-align:center;position:relative;margin:12px 0;}
.or-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:0.5px;background:var(--card-border);}
.or-divider span{background:var(--bg);position:relative;padding:0 10px;font-size:11px;color:var(--text-3);font-family:'JetBrains Mono',monospace;}
footer{text-align:center;padding:20px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-3);letter-spacing:0.12em;border-top:0.5px solid var(--card-border);margin-top:auto;}
@media(max-width:768px){
.sidebar{display:none;}
.main{padding:16px;}
.stats-row{grid-template-columns:1fr 1fr;}
.files-grid{grid-template-columns:1fr 1fr;}
}
|