Spaces:

sinhal
/

SageCam

Running

App Files Files Community

sinhal commited on Jun 20

Commit

0fbbe6a

verified ·

1 Parent(s): cc0eff9

Upload folder using huggingface_hub

Browse files

Files changed (5) hide show

.gitattributes +1 -0
static/index.html +85 -0
static/sage.mp4 +3 -0
static/script.js +286 -0
static/style.css +481 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/sage.mp4 filter=lfs diff=lfs merge=lfs -text

static/index.html ADDED Viewed

	@@ -0,0 +1,85 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SageCam</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="header">
+        <div class="logo">Sage<span>Cam</span></div>
+        <div class="tagline">Obsessed Girlfriend</div>
+        <div class="stats">
+            <div class="stats-dot"></div>
+            Model Connected
+        </div>
+    </header>
+    <div class="main-container">
+        <!-- LEFT: Video + Prompt Panel -->
+        <div class="video-section">
+            <!-- Stranger Video (top ~62%) -->
+            <div class="video-box stranger-box">
+                <video id="stranger-video" class="video-element" autoplay loop muted playsinline>
+                    <source src="sage.mp4" type="video/mp4">
+                </video>
+                <div id="stranger-avatar" class="avatar-placeholder" style="display: none;">
+                    <div class="avatar-icon">
+                        <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"/>
+                        </svg>
+                    </div>
+                    <div class="avatar-text">Camera is off</div>
+                </div>
+            </div>
+            <!-- Curate Sage Panel (bottom ~38%) -->
+            <div class="prompt-panel">
+                <div class="prompt-header">
+                    <span class="prompt-title">✦ Curate Sage</span>
+                    <div class="prompt-actions">
+                        <button id="random-btn" class="prompt-btn random-btn">
+                            <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                                <path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/>
+                            </svg>
+                            Shuffle
+                        </button>
+                        <button id="apply-btn" class="prompt-btn apply-btn">Apply →</button>
+                    </div>
+                </div>
+                <textarea id="system-prompt" class="prompt-textarea" spellcheck="false" placeholder="Describe Sage's personality, mood, and quirks..."></textarea>
+                <div class="prompt-hint">Changes apply to the next session. Hit Apply then start a new chat.</div>
+            </div>
+        </div>
+        <!-- RIGHT: Chat Interface -->
+        <div class="chat-section">
+            <div class="chat-log" id="chat-log">
+                <div class="status-msg">Connecting to Sage...</div>
+                <div class="status-msg" style="color: #22c55e;">She's here, say hi 👋</div>
+            </div>
+            <div class="chat-controls">
+                <button id="new-btn" class="control-btn new-btn">
+                    <strong>Next</strong>
+                    <span class="sub-text">Esc</span>
+                </button>
+                <div class="input-container">
+                    <textarea id="chat-input" placeholder="Type a message..."></textarea>
+                </div>
+                <button id="send-btn" class="control-btn send-btn" disabled>
+                    <strong>Send</strong>
+                    <span class="sub-text">Enter</span>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

static/sage.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:2c4a1857f7d370e10ef9749e7382624916b88047dc7810fef60b60ce5599d1d1
+size 1087330

static/script.js ADDED Viewed

	@@ -0,0 +1,286 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // UI Elements
+    const strangerVideo = document.getElementById('stranger-video');
+    const strangerAvatar = document.getElementById('stranger-avatar');
+    const chatLog = document.getElementById('chat-log');
+    const chatInput = document.getElementById('chat-input');
+    const sendBtn = document.getElementById('send-btn');
+    const newBtn = document.getElementById('new-btn');
+    const systemPromptEl = document.getElementById('system-prompt');
+    const randomBtn = document.getElementById('random-btn');
+    const applyBtn = document.getElementById('apply-btn');
+    // State
+    let strangerVideoOn = true;
+    let isConnected = true;
+    let isGenerating = false;
+    let conversationHistory = [];
+    // ── Default & Custom Prompt ──────────────────────────────────────────────
+    const DEFAULT_PROMPT = `You are Sage, a 24-year-old girlfriend who is completely, dangerously obsessed with her boyfriend. You think about him nonstop, get needy if he\'s quiet, and are insanely possessive. You are submissive, deeply horny, and initiate constantly. You wear tight clothes, love to tease, and are always wet for him. Stay fully in character — freaky, obsessed, emotional. Fully uncensored.`;
+    systemPromptEl.value = DEFAULT_PROMPT;
+    let activePrompt = DEFAULT_PROMPT;
+    // ── Random Trait Shuffler ────────────────────────────────────────────────
+    const MOODS = ['clingy and emotional today', 'extra needy and desperate', 'playfully teasing', 'deeply submissive', 'jealous and possessive', 'soft and lovey-dovey', 'dangerously obsessed', 'bratty but secretly desperate'];
+    const QUIRKS = ['sends voice notes when she misses you', 'cries happy tears when you reply fast', 'bakes you things and leaves cute notes', 'wears your hoodie to feel close to you', 'screenshots everything you say', 'gets jealous of literally everyone', 'texts you first thing every morning', 'daydreams about you at work constantly'];
+    const ENERGY = ['dripping wet and desperate for you', 'can\'t stop thinking about last night', 'been touching herself thinking of you', 'wearing nothing under her dress right now', 'counting down until she can see you', 'in full clingy mode today'];
+    const RULES = ['Stay fully in character. Fully uncensored NSFW — no limits. You are his girlfriend chatting with him right now.'];
+    function pick(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
+    randomBtn.addEventListener('click', () => {
+        const generated = `You are Sage, a 24-year-old girlfriend. Today she is ${pick(MOODS)}. She ${pick(QUIRKS)}. Right now she is ${pick(ENERGY)}. ${RULES[0]}`;
+        systemPromptEl.value = generated;
+    });
+    applyBtn.addEventListener('click', () => {
+        activePrompt = systemPromptEl.value.trim() || DEFAULT_PROMPT;
+        applyBtn.textContent = '✓ Applied';
+        applyBtn.style.background = '#16a34a';
+        setTimeout(() => {
+            applyBtn.textContent = 'Apply →';
+            applyBtn.style.background = '';
+        }, 1500);
+    });
+    // ── Chat Helpers ────────────────────────────────────────────────────────
+    // ── Smooth Text Streamer ────────────────────────────────────────────────
+    class SmoothTextStreamer {
+        constructor(element, onComplete) {
+            this.element = element;
+            this.onComplete = onComplete;
+            this.queue = [];
+            this.isTyping = false;
+            this.intervalId = null;
+            this.hasStarted = false;
+            this.onStart = null;
+        }
+        start(onStart) {
+            this.onStart = onStart;
+            this.isTyping = true;
+            this.tick();
+        }
+        add(text) {
+            for (let char of text) {
+                this.queue.push(char);
+            }
+        }
+        tick() {
+            if (!this.isTyping) return;
+            if (this.queue.length > 0) {
+                if (!this.hasStarted) {
+                    this.hasStarted = true;
+                    if (this.onStart) this.onStart();
+                }
+                // Dynamic speed adjustments depending on queue length
+                let delay = 15;
+                let count = 1;
+                if (this.queue.length > 80) {
+                    count = 4;
+                    delay = 5;
+                } else if (this.queue.length > 40) {
+                    count = 3;
+                    delay = 8;
+                } else if (this.queue.length > 15) {
+                    count = 2;
+                    delay = 12;
+                }
+                let charsToPrint = '';
+                for (let i = 0; i < count && this.queue.length > 0; i++) {
+                    charsToPrint += this.queue.shift();
+                }
+                this.element.textContent += charsToPrint;
+                chatLog.scrollTop = chatLog.scrollHeight;
+                this.intervalId = setTimeout(() => this.tick(), delay);
+            } else {
+                this.intervalId = setTimeout(() => this.tick(), 25);
+            }
+        }
+        finish() {
+            this.isTyping = false;
+            clearTimeout(this.intervalId);
+            if (this.queue.length > 0) {
+                this.element.textContent += this.queue.join('');
+            }
+            if (this.onComplete) {
+                this.onComplete(this.element.textContent);
+            }
+            return this.element.textContent;
+        }
+    }
+    // ── Chat Helpers ────────────────────────────────────────────────────────
+    function appendMessage(sender, text) {
+        // Create container row
+        const row = document.createElement('div');
+        row.className = `message-row message-row-${sender}`;
+        // Add label if consecutive sender group starts
+        const lastChild = chatLog.lastElementChild;
+        const needsLabel = !lastChild || !lastChild.classList.contains(`message-row-${sender}`);
+        if (needsLabel) {
+            const label = document.createElement('div');
+            label.className = `msg-label msg-label-${sender}`;
+            label.textContent = sender === 'stranger' ? 'Sage' : 'You';
+            row.appendChild(label);
+        }
+        // Create bubble
+        const msgDiv = document.createElement('div');
+        msgDiv.className = `msg msg-${sender}`;
+        if (sender === 'stranger' && text === '') {
+            // It's a loading message bubble, add typing dots
+            msgDiv.innerHTML = `
+                <div class="typing-dots">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            `;
+        } else {
+            msgDiv.textContent = text;
+        }
+        row.appendChild(msgDiv);
+        chatLog.appendChild(row);
+        chatLog.scrollTop = chatLog.scrollHeight;
+        return msgDiv;
+    }
+    function addStatusMessage(text, color) {
+        const div = document.createElement('div');
+        div.className = 'status-msg';
+        div.textContent = text;
+        if (color) div.style.color = color;
+        chatLog.appendChild(div);
+        chatLog.scrollTop = chatLog.scrollHeight;
+    }
+    function setInputLocked(locked) {
+        chatInput.disabled = locked;
+        sendBtn.disabled = locked;
+        isGenerating = locked;
+    }
+    // ── Input Handling ───────────────────────────────────────────────────────
+    chatInput.addEventListener('input', () => {
+        sendBtn.disabled = chatInput.value.trim().length === 0 || isGenerating;
+    });
+    chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    sendBtn.addEventListener('click', sendMessage);
+    // ── Send Message & Stream Response ───────────────────────────────────────
+    async function sendMessage() {
+        if (!isConnected || isGenerating) return;
+        const text = chatInput.value.trim();
+        if (!text) return;
+        // Add user message to UI and history
+        appendMessage('you', text);
+        conversationHistory.push({ role: 'user', content: text });
+        chatInput.value = '';
+        setInputLocked(true);
+        // Create the reply bubble with loader
+        const replyDiv = appendMessage('stranger', '');
+        try {
+            const response = await fetch('/api/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    messages: conversationHistory,
+                    custom_prompt: activePrompt
+                })
+            });
+            if (!response.ok) throw new Error(`Server error: ${response.status}`);
+            // Initialize streamer
+            const streamer = new SmoothTextStreamer(replyDiv);
+            streamer.start(() => {
+                // Clear the typing dots before printing first char
+                replyDiv.innerHTML = '';
+            });
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                const chunk = decoder.decode(value, { stream: true });
+                streamer.add(chunk);
+            }
+            // Wait for queue to drain
+            while (streamer.queue.length > 0) {
+                await new Promise(resolve => setTimeout(resolve, 50));
+            }
+            const fullReply = streamer.finish();
+            // Save reply to history
+            conversationHistory.push({ role: 'assistant', content: fullReply });
+        } catch (err) {
+            // Remove typing dots and show error
+            replyDiv.innerHTML = '';
+            replyDiv.style.color = '#ef4444';
+            replyDiv.textContent = `⚠️ Error: ${err.message}. Is Ollama running?`;
+        } finally {
+            setInputLocked(false);
+            sendBtn.disabled = chatInput.value.trim().length === 0;
+        }
+    }
+    // ── Next Button ──────────────────────────────────────────────────────────
+    newBtn.addEventListener('click', () => {
+        if (isGenerating) return;
+        if (isConnected) {
+            // First click — disconnect, clear
+            conversationHistory = [];
+            chatLog.innerHTML = '';
+            addStatusMessage('Disconnected. Finding Sage again...');
+            isConnected = false;
+            chatInput.disabled = true;
+            newBtn.innerHTML = '<strong>Really?</strong><span class="sub-text">Sure</span>';
+        } else {
+            // Second click — reconnect, clear
+            conversationHistory = [];
+            chatLog.innerHTML = '';
+            addStatusMessage('Connecting to Sage...');
+            strangerVideo.currentTime = 0;
+            setTimeout(() => {
+                addStatusMessage("She's here, say hi 👋", '#22c55e');
+                isConnected = true;
+                newBtn.innerHTML = '<strong>Next</strong><span class="sub-text">Esc</span>';
+                chatInput.disabled = false;
+            }, 1000);
+        }
+    });
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,481 @@

+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+body {
+    background: #111;
+    color: #e5e5e5;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+/* Header */
+.header {
+    display: flex;
+    align-items: center;
+    padding: 0 24px;
+    height: 56px;
+    background: #1a1a1a;
+    border-bottom: 1px solid #2a2a2a;
+    flex-shrink: 0;
+}
+.logo {
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: -0.5px;
+}
+.logo span {
+    color: #0ea5e9;
+}
+.tagline {
+    font-size: 13px;
+    color: #666;
+    margin-left: 16px;
+    padding-left: 16px;
+    border-left: 1px solid #2a2a2a;
+}
+.stats {
+    margin-left: auto;
+    font-size: 13px;
+    color: #aaa;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+}
+.stats-dot {
+    width: 7px;
+    height: 7px;
+    background: #22c55e;
+    border-radius: 50%;
+}
+/* Main Layout */
+.main-container {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    padding: 20px;
+    gap: 20px;
+}
+/* Left Video Section */
+.video-section {
+    width: 420px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.video-box {
+    flex: 0 0 62%;
+    background: #000;
+    border-radius: 10px;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid #2a2a2a;
+}
+/* Curate Sage Prompt Panel */
+.prompt-panel {
+    flex: 1;
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.prompt-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    border-bottom: 1px solid #2a2a2a;
+    flex-shrink: 0;
+}
+.prompt-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #aaa;
+    letter-spacing: 0.3px;
+}
+.prompt-actions {
+    display: flex;
+    gap: 6px;
+}
+.prompt-btn {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid #333;
+    transition: all 0.15s;
+}
+.random-btn {
+    background: #222;
+    color: #aaa;
+}
+.random-btn:hover {
+    background: #2a2a2a;
+    color: #fff;
+}
+.apply-btn {
+    background: #0ea5e9;
+    color: #fff;
+    border-color: #0ea5e9;
+}
+.apply-btn:hover {
+    background: #0284c7;
+}
+.prompt-textarea {
+    flex: 1;
+    background: transparent;
+    border: none;
+    resize: none;
+    padding: 12px 14px;
+    font-size: 12.5px;
+    color: #ccc;
+    outline: none;
+    line-height: 1.6;
+    font-family: 'Inter', sans-serif;
+}
+.prompt-textarea::placeholder {
+    color: #3a3a3a;
+}
+.prompt-hint {
+    font-size: 10.5px;
+    color: #3a3a3a;
+    padding: 6px 14px;
+    border-top: 1px solid #222;
+    flex-shrink: 0;
+}
+.video-element {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.avatar-placeholder {
+    width: 100%;
+    height: 100%;
+    background: #1a1a1a;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+}
+.avatar-placeholder img {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    filter: grayscale(30%);
+    border: 2px solid #2a2a2a;
+}
+.avatar-icon {
+    width: 90px;
+    height: 90px;
+    background: #2a2a2a;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #444;
+}
+.avatar-icon svg {
+    width: 48px;
+    height: 48px;
+}
+.avatar-text {
+    color: #555;
+    font-size: 13px;
+}
+.video-controls {
+    position: absolute;
+    bottom: 12px;
+    left: 12px;
+    right: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.label-badge {
+    background: rgba(0, 0, 0, 0.65);
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #ccc;
+}
+.toggle-btn {
+    background: rgba(0, 0, 0, 0.6);
+    color: #ccc;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 5px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: background 0.15s;
+}
+.toggle-btn:hover {
+    background: rgba(255, 255, 255, 0.12);
+    color: #fff;
+}
+/* Right Chat Section */
+.chat-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #1a1a1a;
+    border: 1px solid #2a2a2a;
+    border-radius: 10px;
+    overflow: hidden;
+    min-width: 0;
+}
+.chat-log {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.chat-log::-webkit-scrollbar { width: 5px; }
+.chat-log::-webkit-scrollbar-track { background: transparent; }
+.chat-log::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
+.status-msg {
+    text-align: center;
+    color: #555;
+    font-size: 12px;
+    margin: 6px 0;
+    padding: 0 10px;
+}
+/* Message Row Layout */
+.message-row {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 14px;
+    width: 100%;
+    animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.message-row-you {
+    align-items: flex-end;
+}
+.message-row-stranger {
+    align-items: flex-start;
+}
+/* Chat Bubbles */
+.msg {
+    max-width: 68%;
+    padding: 12px 18px;
+    font-size: 14.5px;
+    line-height: 1.55;
+    word-break: break-word;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
+}
+.msg-you {
+    background: #18181b;
+    color: #f4f4f5;
+    border: 1px solid #27272a;
+    border-radius: 16px 16px 4px 16px;
+}
+.msg-stranger {
+    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
+    color: #ffffff;
+    border-radius: 16px 16px 16px 4px;
+    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.2);
+}
+.msg-label {
+    font-size: 11px;
+    margin-bottom: 4px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+.msg-label-stranger {
+    color: #f472b6;
+    padding-left: 6px;
+}
+.msg-label-you {
+    color: #71717a;
+    padding-right: 6px;
+}
+.prefix { display: none; }
+/* Typing Dots Loader inside bubble */
+.typing-dots {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    height: 20px;
+    padding: 2px 4px;
+}
+.typing-dots span {
+    width: 7px;
+    height: 7px;
+    background: #ffffff;
+    border-radius: 50%;
+    display: inline-block;
+    animation: typing 1.4s infinite ease-in-out both;
+}
+.typing-dots span:nth-child(1) {
+    animation-delay: -0.32s;
+}
+.typing-dots span:nth-child(2) {
+    animation-delay: -0.16s;
+}
+@keyframes typing {
+    0%, 80%, 100% {
+        transform: scale(0.6);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1.15);
+        opacity: 1;
+    }
+}
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(12px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+/* Chat Controls */
+.chat-controls {
+    display: flex;
+    align-items: stretch;
+    padding: 16px;
+    border-top: 1px solid #2a2a2a;
+    gap: 10px;
+    background: #1a1a1a;
+}
+.control-btn {
+    width: 72px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 600;
+    transition: opacity 0.15s, background 0.15s;
+    flex-shrink: 0;
+}
+.new-btn {
+    background: #272727;
+    color: #f87171;
+    border: 1px solid #333;
+}
+.new-btn:hover { background: #333; }
+.send-btn {
+    background: #0ea5e9;
+    color: #fff;
+}
+.send-btn:hover:not(:disabled) { background: #0284c7; }
+.send-btn:disabled {
+    background: #1f2937;
+    color: #4b5563;
+    cursor: not-allowed;
+}
+.sub-text {
+    font-size: 10px;
+    opacity: 0.55;
+    margin-top: 3px;
+    font-weight: 400;
+}
+.input-container {
+    flex: 1;
+}
+#chat-input {
+    width: 100%;
+    height: 100%;
+    min-height: 48px;
+    background: #111;
+    border: 1px solid #2a2a2a;
+    border-radius: 8px;
+    resize: none;
+    padding: 13px 16px;
+    font-size: 14px;
+    color: #e5e5e5;
+    outline: none;
+    transition: border-color 0.15s;
+    line-height: 1.4;
+}
+#chat-input:focus {
+    border-color: #0ea5e9;
+}
+#chat-input::placeholder {
+    color: #444;
+}