Welcome to RED
Ask anything — code, homework, creative ideas.
RED • Built with focus
Privacy Contact
Action
-moz-osx-font-smoothing:grayscale; overflow:hidden; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ---------- Background ---------- */ .bg-wrap{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; display:flex; align-items:center; justify-content:center; } .bg-layer{ position:absolute; inset:-10% ; background-position:center center; background-size:cover; transition: opacity 900ms cubic-bezier(.2,.9,.2,1), transform 900ms ease; filter: blur(28px) brightness(0.36) saturate(1.08); opacity:0; transform: scale(1.04); } .bg-layer.visible{ opacity:1; transform:scale(1); } .bg-hue{ position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(255,59,48,0.06), rgba(10,10,11,0.8)); mix-blend-mode: overlay; pointer-events:none; } #particlesCanvas{ position: absolute; inset:0; z-index:0; pointer-events:none; } /* ---------- Layout ---------- */ .app { position:relative; z-index:2; max-width:1400px; margin:18px auto; height: calc(100vh - 36px); display:grid; grid-template-columns: 320px 1fr; gap:18px; padding:14px; transition: margin-left var(--anim-duration) ease; } /* ---------- Sidebar (desktop default) ---------- */ .sidebar{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; border:1px solid var(--glass-border); padding:18px; display:flex; flex-direction:column; gap:12px; backdrop-filter: blur(10px) saturate(1.1); min-height:0; overflow:auto; transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease; } .sidebar.hidden { opacity: 0; transform: translateX(-18px); pointer-events: none; } .logo {display:flex; gap:12px; align-items:center} .logo-badge{ width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2)); display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;box-shadow:0 10px 30px rgba(255,59,48,0.12); } .brand { font-weight:800; font-size:20px; letter-spacing:-0.4px; background: linear-gradient(135deg,var(--primary),var(--primary-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .tag { color:var(--muted); font-size:12px; margin-top:2px; } .new-chat-btn{ display:flex; align-items:center; gap:10px; padding:12px;border-radius:12px;border:none; cursor:pointer; background: linear-gradient(90deg, rgba(255,59,48,0.12), rgba(255,107,107,0.06)); color:var(--primary); font-weight:700; justify-content:center; transition: transform 160ms ease, box-shadow 160ms ease; } .new-chat-btn:active{ transform:translateY(2px) } .chats-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; } .chat-item{ padding:10px 12px; border-radius:10px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:8px; cursor:pointer; border:1px solid transparent;} .chat-item:hover{ background: rgba(255,255,255,0.02); color:#fff; border-color:var(--glass-border); } .chat-item.active{ border-color: rgba(255,59,48,0.18); background: rgba(255,59,48,0.03); color:#fff; } /* ---------- Chat panel ---------- */ .chat-panel{ display:flex; flex-direction:column; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; border:1px solid var(--glass-border); overflow:hidden; backdrop-filter: blur(12px) saturate(1.08); transition: filter var(--anim-duration) ease, opacity var(--anim-duration) ease; } .chat-header{ display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid rgba(255,255,255,0.02); } .header-left h1{ font-size:20px; margin:0; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--primary-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .subtitle { color:var(--muted); font-size:13px; margin-top:4px; } .status { display:flex; gap:10px; align-items:center; } .status .badge{ padding:6px 10px; border-radius:18px; font-weight:700; font-size:13px; display:flex; gap:8px; align-items:center; background: rgba(52,199,89,0.06); color:var(--success); border:1px solid rgba(52,199,89,0.12); } .messages { flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); } .empty{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--muted); text-align:center; padding:12px; } .msg { display:flex; gap:12px; align-items:flex-end; max-width:100% } .msg.user{ flex-direction:row-reverse; } .avatar{ width:44px;height:44px;border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); border:1px solid var(--glass-border); } .bubble{ padding:12px 16px; border-radius:14px; line-height:1.45; font-size:15px; max-width:72%; word-wrap:break-word; opacity:0; transform: translateY(8px); transition: opacity 220ms ease, transform 260ms ease; } .bubble.show { opacity:1; transform: translateY(0); } .bubble.assistant{ background: rgba(255,255,255,0.02); border:1px solid var(--glass-border); } .bubble.user{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:white; box-shadow:0 10px 30px rgba(255,59,48,0.08); } .msg-time { font-size:12px; color:var(--muted); margin-top:6px; } .input-area{ padding:14px; border-top:1px solid rgba(255,255,255,0.02); background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); } .input-row{ display:flex; gap:12px; align-items:flex-end; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:10px; border:1px solid var(--glass-border); } #messageInput{ flex:1; resize:none; background:transparent; color:var(--text); border:none; outline:none; font-size:15px; padding:12px 10px 8px 10px; line-height:1.35; min-height:64px; max-height:160px; padding-top:16px; } .send { width:52px;height:52px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-2)); display:flex;align-items:center;justify-content:center;color:white;font-size:18px; cursor:pointer; box-shadow:0 10px 30px rgba(255,59,48,0.12); } /* ---------- Edge tab to reopen sidebar ---------- */ .edge-tab { position: fixed; left: 0; top: calc(50% - 28px); width: 16px; height: 56px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-radius: 0 8px 8px 0; display:flex; align-items:center; justify-content:center; z-index: 1100; cursor: pointer; color: var(--muted); transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease; } .edge-tab.hidden { opacity: 0; transform: translateX(-8px); pointer-events: none; } /* ---------- Incognito visual ---------- */ body.incognito .chat-panel { filter: grayscale(85%); opacity: 0.92; } body.incognito .sidebar { opacity: 0; transform: translateX(-18px); pointer-events: none; } /* ---------- Mobile drawer behavior ---------- */ @media (max-width: 980px){ body{ overflow:hidden; } .app{ grid-template-columns: 1fr; height:100vh; margin:0; padding:10px; gap:10px; } /* Sidebar becomes overlay drawer */ .sidebar{ position: fixed; top: 0; left: 0; height: 100vh; width: 260px; z-index: 1000; border-radius: 0 16px 16px 0; transform: translateX(-260px); opacity: 0; pointer-events: none; } .sidebar.visible{ transform: translateX(0); opacity: 1; pointer-events:auto; } .sidebar.hidden{ transform: translateX(-260px); opacity: 0; pointer-events:none; } .chats-list{ max-height: calc(100vh - 200px); overflow-y:auto; } .chat-panel{ order:1; height:100%; } #edgeTab{ width:20px; height:60px; left:0; top:calc(50% - 30px); background: rgba(255,255,255,0.06); border-radius:0 10px 10px 0; display:flex; align-items:center; justify-content:center; } #edgeTab.hidden{ opacity:0; pointer-events:none; } } button:focus, textarea:focus, a:focus { outline: 3px solid rgba(255,59,48,0.14); outline-offset:2px; border-radius:8px; } .muted{ color:var(--muted) }
Welcome to RED
Ask anything — code, homework, creative ideas.
RED • Built with focus
Privacy Contact
Action
font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow:hidden; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ---------------- Background layers (kept) ---------------- */ .bg-wrap{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; display:flex; align-items:center; justify-content:center; } .bg-layer{ position:absolute; inset:-10% ; background-position:center center; background-size:cover; transition: opacity 900ms cubic-bezier(.2,.9,.2,1), transform 900ms ease; filter: blur(28px) brightness(0.36) saturate(1.08); opacity:0; transform: scale(1.04); } .bg-layer.visible{ opacity:1; transform:scale(1); } .bg-hue{ position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(255,59,48,0.06), rgba(10,10,11,0.8)); mix-blend-mode: overlay; pointer-events:none; } /* particles canvas */ #particlesCanvas{ position: absolute; inset:0; z-index:0; pointer-events:none; } /* ---------------- Layout grid (kept) ---------------- */ .app { position:relative; z-index:2; max-width:1400px; margin:18px auto; height: calc(100vh - 36px); display:grid; grid-template-columns: 320px 1fr; gap:18px; padding:14px; transition: margin-left var(--anim-duration) ease; } /* ---------------- Sidebar (glass) original style, now can be toggled ---------------- */ .sidebar{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; border:1px solid var(--glass-border); padding:18px; display:flex; flex-direction:column; gap:12px; backdrop-filter: blur(10px) saturate(1.1); min-height:0; overflow:auto; transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease; } .sidebar.hidden { opacity: 0; transform: translateX(-18px); pointer-events: none; } .logo {display:flex; gap:12px; align-items:center} .logo-badge{ width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2)); display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;box-shadow:0 10px 30px rgba(255,59,48,0.12); } .brand { font-weight:800; font-size:20px; letter-spacing:-0.4px; background: linear-gradient(135deg,var(--primary),var(--primary-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .tag { color:var(--muted); font-size:12px; margin-top:2px; } .new-chat-btn{ display:flex; align-items:center; gap:10px; padding:12px;border-radius:12px;border:none; cursor:pointer; background: linear-gradient(90deg, rgba(255,59,48,0.12), rgba(255,107,107,0.06)); color:var(--primary); font-weight:700; justify-content:center; transition: transform 160ms ease, box-shadow 160ms ease; } .new-chat-btn:active{ transform:translateY(2px) } .chats-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; } .chat-item{ padding:10px 12px; border-radius:10px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:8px; cursor:pointer; border:1px solid transparent;} .chat-item:hover{ background: rgba(255,255,255,0.02); color:#fff; border-color:var(--glass-border); } .chat-item.active{ border-color: rgba(255,59,48,0.18); background: rgba(255,59,48,0.03); color:#fff; } /* ---------------- Chat panel ---------------- */ .chat-panel{ display:flex; flex-direction:column; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:16px; border:1px solid var(--glass-border); overflow:hidden; backdrop-filter: blur(12px) saturate(1.08); transition: filter var(--anim-duration) ease, opacity var(--anim-duration) ease; } .chat-header{ display:flex; align-items:center; justify-content:space-between; padding:18px; border-bottom:1px solid rgba(255,255,255,0.02); } .header-left h1{ font-size:20px; margin:0; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--primary-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .subtitle { color:var(--muted); font-size:13px; margin-top:4px; } .status { display:flex; gap:10px; align-items:center; } .status .badge{ padding:6px 10px; border-radius:18px; font-weight:700; font-size:13px; display:flex; gap:8px; align-items:center; background: rgba(52,199,89,0.06); color:var(--success); border:1px solid rgba(52,199,89,0.12); } /* messages area with fade-in class for messages */ .messages { flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); } .empty{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--muted); text-align:center; padding:12px; } .msg { display:flex; gap:12px; align-items:flex-end; max-width:100% } .msg.user{ flex-direction:row-reverse; } .avatar{ width:44px;height:44px;border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); border:1px solid var(--glass-border); } .bubble{ padding:12px 16px; border-radius:14px; line-height:1.45; font-size:15px; max-width:72%; word-wrap:break-word; opacity:0; transform: translateY(8px); transition: opacity 220ms ease, transform 260ms ease; } .bubble.show { opacity:1; transform: translateY(0); } .bubble.assistant{ background: rgba(255,255,255,0.02); border:1px solid var(--glass-border); } .bubble.user{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:white; box-shadow:0 10px 30px rgba(255,59,48,0.08); } .msg-time { font-size:12px; color:var(--muted); margin-top:6px; } /* input */ .input-area{ padding:14px; border-top:1px solid rgba(255,255,255,0.02); background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)); } .input-row{ display:flex; gap:12px; align-items:flex-end; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; padding:10px; border:1px solid var(--glass-border); } #messageInput{ flex:1; resize:none; background:transparent; color:var(--text); border:none; outline:none; font-size:15px; padding:12px 10px 8px 10px; line-height:1.35; min-height:64px; max-height:160px; padding-top:16px; } .send { width:52px;height:52px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-2)); display:flex;align-items:center;justify-content:center;color:white;font-size:18px; cursor:pointer; box-shadow:0 10px 30px rgba(255,59,48,0.12); } /* ---------------- Left edge tab (when sidebar hidden) ---------------- */ .edge-tab { position: fixed; left: 0; top: calc(50% - 28px); width: var(--edge-tab-width); height: 56px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-radius: 0 8px 8px 0; display:flex; align-items:center; justify-content:center; z-index: 1100; cursor: pointer; color: var(--muted); transition: opacity var(--anim-duration) ease, transform var(--anim-duration) ease; } .edge-tab.hidden { opacity: 0; transform: translateX(-8px); pointer-events: none; } /* ---------------- Incognito overlay / styles ---------------- */ body.incognito .chat-panel { filter: grayscale(85%); opacity: 0.92; } body.incognito .sidebar { opacity: 0; transform: translateX(-18px); pointer-events: none; } /* responsive */ @media (max-width: 980px){ .app{ grid-template-columns: 1fr; height:100vh; margin:0; padding:10px; gap:10px; } .sidebar{ order:2; display:flex; flex-direction:row; gap:10px; overflow:auto; align-items:center; padding:10px; } .chats-list{ display:none } .chat-panel{ order:1; height: calc(100vh - 120px) } body{ overflow:hidden } } button:focus, textarea:focus, a:focus { outline: 3px solid rgba(255,59,48,0.14); outline-offset:2px; border-radius:8px; }
Welcome to RED
Ask anything — code, homework, creative ideas.
RED • Built with focus
Privacy Contact
Action