diff --git a/templates/agent.html b/templates/agent.html
deleted file mode 100644
index b4d0217..0000000
--- a/templates/agent.html
+++ /dev/null
@@ -1,411 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Support Dashboard</title>
-  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg:        #0f1117;
-      --surface:   #1a1d27;
-      --surface2:  #20243a;
-      --border:    #2a2d3a;
-      --accent:    #6c63ff;
-      --accent-dim:#4a44b5;
-      --text:      #e8e8f0;
-      --muted:     #6b6e80;
-      --customer:  #6c63ff;
-      --agent:     #22c55e;
-      --radius:    10px;
-    }
-
-    html, body {
-      height: 100%;
-      background: var(--bg);
-      font-family: 'Inter', system-ui, sans-serif;
-      color: var(--text);
-      overflow: hidden;
-    }
-
-    /* --- Layout --- */
-    .layout {
-      display: grid;
-      grid-template-columns: 280px 1fr;
-      grid-template-rows: 56px 1fr;
-      height: 100vh;
-    }
-
-    /* --- Top bar --- */
-    .topbar {
-      grid-column: 1 / -1;
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0 1.5rem;
-      border-bottom: 1px solid var(--border);
-      background: var(--surface);
-    }
-
-    .topbar-logo { font-size: 1.2rem; }
-
-    .topbar h1 {
-      font-size: 1rem;
-      font-weight: 700;
-      letter-spacing: -0.01em;
-    }
-
-    .topbar-badge {
-      margin-left: auto;
-      font-size: 0.75rem;
-      color: var(--muted);
-      background: var(--bg);
-      padding: 0.2rem 0.6rem;
-      border-radius: 20px;
-      border: 1px solid var(--border);
-    }
-
-    /* --- Sidebar --- */
-    .sidebar {
-      border-right: 1px solid var(--border);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .sidebar-header {
-      padding: 1rem;
-      border-bottom: 1px solid var(--border);
-      font-size: 0.78rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--muted);
-    }
-
-    #session-list {
-      flex: 1;
-      overflow-y: auto;
-      padding: 0.5rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.3rem;
-    }
-
-    #session-list::-webkit-scrollbar { width: 4px; }
-    #session-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-
-    .session-item {
-      width: 100%;
-      text-align: left;
-      background: transparent;
-      border: 1px solid transparent;
-      border-radius: var(--radius);
-      padding: 0.7rem 0.8rem;
-      cursor: pointer;
-      color: var(--text);
-      font-size: 0.88rem;
-      transition: background 0.15s, border-color 0.15s;
-      display: flex;
-      flex-direction: column;
-      gap: 0.3rem;
-    }
-
-    .session-item:hover { background: var(--surface2); border-color: var(--border); }
-    .session-item.selected { background: var(--surface2); border-color: var(--accent); }
-
-    .session-name { font-weight: 600; }
-
-    .session-meta {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    .session-badge {
-      font-size: 0.68rem;
-      padding: 0.15rem 0.5rem;
-      border-radius: 20px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-
-    .status-waiting { background: rgba(234, 179, 8, 0.15); color: #eab308; }
-    .status-active  { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
-    .status-closed  { background: rgba(107, 110, 128, 0.15); color: var(--muted); }
-
-    .session-count { font-size: 0.75rem; color: var(--muted); }
-    .session-id    { font-size: 0.7rem; color: var(--muted); font-family: monospace; }
-
-    .no-sessions {
-      padding: 1.5rem 1rem;
-      font-size: 0.85rem;
-      color: var(--muted);
-      text-align: center;
-    }
-
-    /* --- Main panel --- */
-    .main-panel {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .main-header {
-      padding: 0.9rem 1.5rem;
-      border-bottom: 1px solid var(--border);
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      min-height: 56px;
-    }
-
-    #active-session-name {
-      font-weight: 700;
-      font-size: 1rem;
-    }
-
-    #active-session-meta {
-      font-size: 0.8rem;
-      color: var(--muted);
-    }
-
-    #agent-messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1.2rem 1.5rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      scroll-behavior: smooth;
-    }
-
-    #agent-messages::-webkit-scrollbar { width: 4px; }
-    #agent-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-
-    .empty-state {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: var(--muted);
-      gap: 0.5rem;
-    }
-
-    .empty-state .icon { font-size: 2rem; }
-    .empty-state p { font-size: 0.9rem; }
-
-    /* Message bubbles (same as customer page) */
-    .msg-wrap { display: flex; }
-    .msg-customer-wrap { justify-content: flex-end; }
-    .msg-agent-wrap    { justify-content: flex-start; }
-
-    .msg-customer, .msg-agent {
-      max-width: 65%;
-      padding: 0.6rem 0.9rem;
-      border-radius: 16px;
-      font-size: 0.88rem;
-      line-height: 1.5;
-    }
-
-    .msg-customer { background: var(--customer); color: #fff; border-bottom-right-radius: 4px; }
-    .msg-agent    { background: var(--border); color: var(--text); border-bottom-left-radius: 4px; }
-
-    .msg-label {
-      display: block;
-      font-size: 0.7rem;
-      font-weight: 600;
-      opacity: 0.7;
-      margin-bottom: 2px;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    .msg-text { margin: 0; }
-
-    .msg-time {
-      display: block;
-      font-size: 0.68rem;
-      opacity: 0.5;
-      margin-top: 4px;
-      text-align: right;
-    }
-
-    .msg-system-wrap { display: flex; justify-content: center; margin: 0.25rem 0; }
-    .msg-system-text {
-      font-size: 0.75rem;
-      color: var(--muted);
-      background: var(--bg);
-      padding: 0.25rem 0.75rem;
-      border-radius: 20px;
-    }
-
-    /* --- Reply form --- */
-    #reply-area {
-      border-top: 1px solid var(--border);
-      padding: 0.75rem 1.5rem;
-      display: none;
-    }
-
-    #reply-area.visible { display: flex; gap: 0.6rem; }
-
-    #reply-area input[type="text"] {
-      flex: 1;
-      padding: 0.65rem 1rem;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-size: 0.9rem;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-
-    #reply-area input[type="text"]:focus { border-color: var(--accent); }
-
-    #reply-area button {
-      padding: 0.65rem 1.2rem;
-      background: var(--agent);
-      color: #0f1117;
-      border: none;
-      border-radius: var(--radius);
-      font-weight: 700;
-      font-size: 0.88rem;
-      cursor: pointer;
-      transition: opacity 0.2s;
-    }
-
-    #reply-area button:hover { opacity: 0.85; }
-  </style>
-</head>
-<body>
-
-<div class="layout">
-
-  <!-- Top bar -->
-  <header class="topbar">
-    <span class="topbar-logo">🎧</span>
-    <h1>Support Dashboard</h1>
-    <span class="topbar-badge" id="ws-status">● Connecting…</span>
-  </header>
-
-  <!-- Sidebar: session list -->
-  <aside class="sidebar">
-    <div class="sidebar-header">Conversations</div>
-    <div id="session-list"
-         hx-get="/sessions"
-         hx-trigger="load, every 5s"
-         hx-swap="innerHTML">
-      <p class="no-sessions">Loading…</p>
-    </div>
-  </aside>
-
-  <!-- Main: message view + reply -->
-  <section class="main-panel">
-    <div class="main-header">
-      <span id="active-session-name" style="color: var(--muted)">Select a conversation</span>
-      <span id="active-session-meta"></span>
-    </div>
-
-    <div id="agent-messages">
-      <div class="empty-state">
-        <span class="icon">💬</span>
-        <p>No conversation selected</p>
-      </div>
-    </div>
-
-    <div id="reply-area">
-      <input type="text" id="reply-input" placeholder="Reply to customer…" autocomplete="off" />
-      <button id="reply-btn">Send</button>
-    </div>
-  </section>
-
-</div>
-
-<script>
-  let activeSessionId = null;
-
-  function setActiveSession(sessionId, name) {
-    activeSessionId = sessionId;
-    document.getElementById('active-session-name').textContent = name;
-    document.getElementById('active-session-meta').textContent = '#' + sessionId.slice(0, 8);
-    document.getElementById('reply-area').classList.add('visible');
-    scrollAgentMessages();
-  }
-
-  function scrollAgentMessages() {
-    const el = document.getElementById('agent-messages');
-    if (el) el.scrollTop = el.scrollHeight;
-  }
-
-  document.addEventListener('htmx:afterSwap', (e) => {
-    if (e.detail.target.id === 'agent-messages') scrollAgentMessages();
-  });
-
-  // Send reply on button click
-  document.getElementById('reply-btn').addEventListener('click', () => {
-    if (!activeSessionId) return;
-    const input = document.getElementById('reply-input');
-    const content = input.value.trim();
-    if (!content) return;
-
-    fetch(`/agent/send/${activeSessionId}`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: `content=${encodeURIComponent(content)}`
-    })
-    .then(r => r.text())
-    .then(html => {
-      const msgs = document.getElementById('agent-messages');
-      msgs.insertAdjacentHTML('beforeend', html);
-      scrollAgentMessages();
-      input.value = '';
-    });
-  });
-
-  // Also send on Enter
-  document.getElementById('reply-input').addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') document.getElementById('reply-btn').click();
-  });
-
-  // WebSocket: get push notifications for new messages / sessions
-  function connectAgentWS() {
-    const ws = new WebSocket(`ws://${location.host}/ws/agent/dashboard`);
-
-    ws.onopen = () => {
-      document.getElementById('ws-status').textContent = '● Live';
-      document.getElementById('ws-status').style.color = '#22c55e';
-    };
-
-    ws.onmessage = (e) => {
-      const updatedSessionId = e.data;
-      // Refresh session list
-      htmx.trigger('#session-list', 'refresh');
-
-      // If this session is currently open, refresh its messages
-      if (updatedSessionId === activeSessionId) {
-        fetch(`/messages/${activeSessionId}`)
-          .then(r => r.text())
-          .then(html => {
-            document.getElementById('agent-messages').innerHTML = html;
-            scrollAgentMessages();
-          });
-      }
-    };
-
-    ws.onclose = () => {
-      document.getElementById('ws-status').textContent = '● Reconnecting…';
-      document.getElementById('ws-status').style.color = '#eab308';
-      setTimeout(connectAgentWS, 2000);
-    };
-  }
-
-  connectAgentWS();
-</script>
-
-</body>
-</html>
diff --git a/templates/customer.html b/templates/customer.html
deleted file mode 100644
index e8e5c6d..0000000
--- a/templates/customer.html
+++ /dev/null
@@ -1,321 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Support Chat</title>
-  <script src="https://unpkg.com/htmx.org@1.9.12"></script>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg:        #0f1117;
-      --surface:   #1a1d27;
-      --border:    #2a2d3a;
-      --accent:    #6c63ff;
-      --accent-dim:#4a44b5;
-      --text:      #e8e8f0;
-      --muted:     #6b6e80;
-      --customer:  #6c63ff;
-      --agent:     #22c55e;
-      --radius:    12px;
-    }
-
-    body {
-      background: var(--bg);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: 'Inter', system-ui, sans-serif;
-      color: var(--text);
-    }
-
-    /* --- Start form --- */
-    #start-form {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 20px;
-      padding: 2.5rem;
-      width: 360px;
-      text-align: center;
-    }
-
-    #start-form .icon {
-      font-size: 2.5rem;
-      margin-bottom: 1rem;
-    }
-
-    #start-form h1 {
-      font-size: 1.4rem;
-      font-weight: 700;
-      margin-bottom: 0.4rem;
-      letter-spacing: -0.02em;
-    }
-
-    #start-form p {
-      font-size: 0.9rem;
-      color: var(--muted);
-      margin-bottom: 1.8rem;
-    }
-
-    #start-form input[type="text"] {
-      width: 100%;
-      padding: 0.75rem 1rem;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-size: 0.95rem;
-      margin-bottom: 1rem;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-
-    #start-form input[type="text"]:focus {
-      border-color: var(--accent);
-    }
-
-    #start-form button {
-      width: 100%;
-      padding: 0.75rem;
-      background: var(--accent);
-      color: #fff;
-      border: none;
-      border-radius: var(--radius);
-      font-size: 0.95rem;
-      font-weight: 600;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-
-    #start-form button:hover { background: var(--accent-dim); }
-
-    /* --- Chat container --- */
-    #chat-container {
-      display: none;
-      flex-direction: column;
-      width: 380px;
-      height: 580px;
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: 20px;
-      overflow: hidden;
-    }
-
-    #chat-header {
-      display: flex;
-      align-items: center;
-      gap: 0.6rem;
-      padding: 1rem 1.2rem;
-      border-bottom: 1px solid var(--border);
-      font-weight: 600;
-      font-size: 0.95rem;
-    }
-
-    .chat-status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--muted);
-    }
-
-    .chat-status-dot.active { background: var(--agent); }
-
-    .chat-session-id {
-      margin-left: auto;
-      font-size: 0.75rem;
-      color: var(--muted);
-      font-weight: 400;
-    }
-
-    #messages {
-      flex: 1;
-      overflow-y: auto;
-      padding: 1rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      scroll-behavior: smooth;
-    }
-
-    #messages::-webkit-scrollbar { width: 4px; }
-    #messages::-webkit-scrollbar-track { background: transparent; }
-    #messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
-
-    /* --- Message bubbles --- */
-    .msg-wrap { display: flex; }
-
-    .msg-customer-wrap { justify-content: flex-end; }
-    .msg-agent-wrap    { justify-content: flex-start; }
-
-    .msg-customer, .msg-agent {
-      max-width: 75%;
-      padding: 0.6rem 0.9rem;
-      border-radius: 16px;
-      font-size: 0.88rem;
-      line-height: 1.5;
-    }
-
-    .msg-customer {
-      background: var(--customer);
-      color: #fff;
-      border-bottom-right-radius: 4px;
-    }
-
-    .msg-agent {
-      background: var(--border);
-      color: var(--text);
-      border-bottom-left-radius: 4px;
-    }
-
-    .msg-label {
-      display: block;
-      font-size: 0.7rem;
-      font-weight: 600;
-      opacity: 0.7;
-      margin-bottom: 2px;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
-
-    .msg-text { margin: 0; }
-
-    .msg-time {
-      display: block;
-      font-size: 0.68rem;
-      opacity: 0.5;
-      margin-top: 4px;
-      text-align: right;
-    }
-
-    .msg-system-wrap {
-      display: flex;
-      justify-content: center;
-      margin: 0.25rem 0;
-    }
-
-    .msg-system-text {
-      font-size: 0.75rem;
-      color: var(--muted);
-      background: var(--bg);
-      padding: 0.25rem 0.75rem;
-      border-radius: 20px;
-    }
-
-    /* --- Typing indicator --- */
-    #typing-indicator {
-      display: none;
-      padding: 0 1rem 0.5rem;
-      gap: 4px;
-      align-items: center;
-    }
-
-    #typing-indicator.htmx-request { display: flex; }
-
-    .typing-dot {
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: var(--muted);
-      animation: bounce 1.2s infinite;
-    }
-
-    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
-    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
-
-    @keyframes bounce {
-      0%, 80%, 100% { transform: translateY(0); }
-      40% { transform: translateY(-6px); }
-    }
-
-    /* --- Input form --- */
-    #chat-form {
-      display: flex;
-      gap: 0.5rem;
-      padding: 0.75rem 1rem;
-      border-top: 1px solid var(--border);
-    }
-
-    #chat-form input[type="text"] {
-      flex: 1;
-      padding: 0.6rem 0.9rem;
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-size: 0.9rem;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-
-    #chat-form input[type="text"]:focus { border-color: var(--accent); }
-
-    #chat-form button {
-      padding: 0.6rem 1.1rem;
-      background: var(--accent);
-      color: #fff;
-      border: none;
-      border-radius: var(--radius);
-      font-weight: 600;
-      font-size: 0.88rem;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-
-    #chat-form button:hover { background: var(--accent-dim); }
-  </style>
-</head>
-<body>
-
-  <!-- Step 1: Start form -->
-  <div id="start-form">
-    <div class="icon">💬</div>
-    <h1>Talk to Support</h1>
-    <p>We're here to help. Start a conversation and we'll get back to you right away.</p>
-    <form hx-post="/sessions/new"
-          hx-target="body"
-          hx-swap="beforeend">
-      <input type="text" name="name" placeholder="Your name (optional)" maxlength="40" />
-      <button type="submit">Start Chat</button>
-    </form>
-  </div>
-
-  <!-- Step 2: Chat UI (injected by server after session creation) -->
-  <div id="chat-container"></div>
-
-  <script>
-    function scrollMessages() {
-      const el = document.getElementById('messages');
-      if (el) el.scrollTop = el.scrollHeight;
-    }
-
-    // Auto-scroll when HTMX adds new messages
-    document.addEventListener('htmx:afterSwap', (e) => {
-      if (e.detail.target.id === 'messages') scrollMessages();
-    });
-
-    // WebSocket for instant push (agent replies trigger a refresh)
-    // Session ID is injected after session creation
-    let ws = null;
-
-    document.addEventListener('htmx:afterRequest', (e) => {
-      if (e.detail.requestConfig?.path === '/sessions/new' && !ws) {
-        // Extract session id from the returned HTML
-        const container = document.getElementById('chat-container');
-        if (!container) return;
-        const match = container.innerHTML.match(/\/messages\/([a-f0-9-]+)/);
-        if (!match) return;
-        const sessionId = match[1];
-
-        ws = new WebSocket(`ws://${location.host}/ws/customer/${sessionId}`);
-        ws.onmessage = () => {
-          // Trigger an out-of-band refresh of the messages div
-          htmx.trigger('#messages', 'refresh');
-        };
-        ws.onerror = () => console.warn('WS error, falling back to polling');
-      }
-    });
-  </script>
-
-</body>
-</html>
diff --git a/templates/index.html b/templates/index.html
index aff4e4c..0ee72d8 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,70 +3,209 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
-  <title>Support Chat</title>
+  <title>Support Chat — FLÓ</title>
+
+  <script>
+    (function () {
+      var stored = localStorage.getItem('poc-theme');
+      var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    :root {
-      --bg: #111318;
-      --surface: #191c22;
-      --surface-soft: #20242c;
-      --border: #2b303a;
-      --accent: #8f9cff;
+    :root,
+    [data-theme="light"] {
+      --bg: #f4f1ec;
+      --bg-panel: rgba(255, 253, 250, 0.72);
+      --nav-bg: rgba(244, 241, 236, 0.6);
+      --ink: #1a1d22;
+      --ink-muted: #595f68;
+      --ink-dim: #9299a2;
+      --accent: #2c5a7a;
+      --border: rgba(26, 29, 34, 0.1);
+      --danger: #a03030;
+      --danger-soft: rgba(160, 48, 48, 0.08);
+      --danger-text: #a03030;
+    }
+
+    [data-theme="tokyo"] {
+      --bg: #07070d;
+      --bg-panel: rgba(15, 16, 28, 0.72);
+      --nav-bg: rgba(7, 7, 13, 0.65);
+      --ink: #e8f4ff;
+      --ink-muted: #a3b3cc;
+      --ink-dim: #7886a0;
+      --accent: #64dcff;
+      --border: rgba(100, 220, 255, 0.12);
       --danger: #d93d3d;
       --danger-soft: rgba(217, 61, 61, 0.16);
       --danger-text: #ffd1d1;
-      --text: #eceff4;
-      --muted: #9aa3b2;
-      --radius: 14px;
     }
 
+    html { scroll-behavior: smooth; }
+
     body {
       min-height: 100vh;
       min-height: 100dvh;
       background: var(--bg);
-      color: var(--text);
-      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: var(--ink);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.92rem;
+      font-weight: 300;
+      line-height: 1.65;
+      display: flex;
+      flex-direction: column;
+      transition: background 0.3s ease, color 0.3s ease;
+    }
+
+    a {
+      color: var(--accent);
+      text-decoration: none;
+      border-bottom: 1px solid transparent;
+      transition: all 0.2s ease;
+    }
+    a:hover { border-bottom-color: var(--accent); }
+
+    /* ---- Nav (subdomain pattern) ---- */
+    nav {
+      position: fixed; top: 0; left: 0;
+      width: 100%; z-index: 20;
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      align-items: center;
+      gap: 1rem;
+      padding: 1.25rem 2.5rem;
+      background: var(--nav-bg);
+      backdrop-filter: blur(12px) saturate(120%);
+      -webkit-backdrop-filter: blur(12px) saturate(120%);
+      border-bottom: 1px solid var(--border);
+      transition: background 0.3s ease;
+    }
+
+    nav::before { content: none; display: none; }
+
+    .back-link {
+      grid-column: 1;
+      justify-self: start;
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 400;
+      font-size: 0.7rem;
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+      white-space: nowrap;
+      color: var(--ink-muted);
+      text-decoration: none;
+      padding: 0.35rem 0.6rem;
+      border: 1px solid var(--border);
+      border-radius: 2px;
+      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+    }
+    .back-link:hover {
+      color: var(--ink);
+      border-color: var(--ink-muted);
+      background: var(--bg-panel);
+      border-bottom-color: var(--ink-muted);
+    }
+
+    .nav-brand {
+      grid-column: 2;
+      justify-self: center;
+      display: inline-flex;
+      align-items: baseline;
+      gap: 0.35rem;
+      white-space: nowrap;
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 700;
+      font-size: 1.1rem;
+      letter-spacing: -0.02em;
+      color: var(--ink);
+      text-decoration: none;
+    }
+    .nav-brand:hover { color: var(--accent); border-bottom: none; }
+
+    .brand-sep {
+      font-weight: 300;
+      color: var(--ink-dim);
+    }
+    .brand-sub {
+      font-weight: 400;
+      font-size: 0.78rem;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--ink-muted);
+      align-self: center;
+      padding-top: 2px;
+    }
+
+    [data-theme="tokyo"] .nav-brand {
+      color: #e8f4ff;
+      text-shadow: 0 0 8px rgba(100, 220, 255, 0.3);
+    }
+
+    /* ---- Main content ---- */
+    .page-body {
+      flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 1.25rem;
+      padding: calc(65px + 2.5rem) 2rem 4rem;
     }
 
     .card {
       width: min(560px, 100%);
-      background: var(--surface);
+      background: var(--bg-panel);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
       border: 1px solid var(--border);
-      border-radius: 22px;
-      padding: 2rem;
-      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
+      border-radius: 3px;
+      padding: 3rem 3.5rem;
+      box-shadow: 0 8px 30px rgba(26, 29, 34, 0.06);
+      animation: panel-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: background 0.3s ease, border-color 0.3s ease;
     }
 
     .timer {
       display: inline-flex;
-      margin-bottom: 1rem;
+      margin-bottom: 1.5rem;
       color: var(--danger-text);
       border: 1px solid var(--danger);
-      border-radius: 999px;
-      padding: 0.38rem 0.8rem;
-      font-size: 0.82rem;
-      font-weight: 800;
+      border-radius: 2px;
+      padding: 0.3rem 0.7rem;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.72rem;
+      font-weight: 500;
+      letter-spacing: 0.08em;
       background: var(--danger-soft);
-      box-shadow: 0 0 0 1px rgba(217, 61, 61, 0.08), 0 8px 24px rgba(217, 61, 61, 0.08);
     }
 
     h1 {
-      font-size: clamp(1.55rem, 4vw, 2.1rem);
-      letter-spacing: -0.035em;
-      margin-bottom: 0.55rem;
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 700;
+      font-size: 1.5rem;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.6rem;
+      color: var(--ink);
     }
 
-    p {
-      color: var(--muted);
-      line-height: 1.55;
-      margin-bottom: 1.25rem;
-      font-size: 0.95rem;
+    [data-theme="tokyo"] h1 {
+      text-shadow: 0 0 10px rgba(100, 220, 255, 0.3);
+    }
+
+    .card > p {
+      color: var(--ink-muted);
+      line-height: 1.75;
+      margin-bottom: 2rem;
+      font-size: 0.88rem;
     }
 
     .choices {
@@ -75,52 +214,164 @@
       gap: 0.9rem;
     }
 
-    a {
+    .choices a {
       display: flex;
       flex-direction: column;
-      gap: 0.35rem;
-      text-decoration: none;
-      color: var(--text);
-      background: var(--surface-soft);
+      gap: 0.4rem;
+      color: var(--ink);
+      background: transparent;
       border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 1.05rem;
-      transition: transform 0.15s, border-color 0.15s, background 0.15s;
+      border-radius: 3px;
+      padding: 1.1rem;
+      transition: border-color 0.2s ease, background 0.2s ease;
     }
-
-    a:hover {
-      transform: translateY(-1px);
+    .choices a:hover {
       border-color: var(--accent);
-      background: #242936;
+      background: var(--bg-panel);
+      border-bottom-color: var(--accent);
     }
 
-    .role-title { font-weight: 700; font-size: 1rem; }
-    .role-detail { color: var(--muted); font-size: 0.88rem; line-height: 1.45; }
+    .role-title {
+      font-weight: 700;
+      font-size: 0.88rem;
+      letter-spacing: -0.01em;
+    }
+    .role-detail {
+      color: var(--ink-muted);
+      font-size: 0.78rem;
+      font-weight: 300;
+      line-height: 1.5;
+    }
 
-    @media (max-width: 560px) {
-      body { align-items: stretch; padding: 1rem; }
+    /* ---- Footer ---- */
+    footer {
+      position: relative;
+      z-index: 10;
+      padding: 0.9rem 2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 1.5rem;
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 300;
+      font-size: 0.72rem;
+      letter-spacing: 0.05em;
+      color: var(--ink-muted);
+      border-top: 1px solid var(--border);
+      background: var(--nav-bg);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      transition: background 0.3s ease;
+    }
+
+    /* ---- Theme toggle ---- */
+    .theme-toggle {
+      position: fixed;
+      bottom: 4rem;
+      right: 1.5rem;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 1px solid var(--border);
+      cursor: pointer;
+      padding: 0;
+      z-index: 30;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    }
+    .theme-toggle:hover {
+      transform: scale(1.08);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+    }
+    [data-theme="light"] .theme-toggle {
+      background: linear-gradient(135deg, #07070d 0%, #64dcff 100%);
+      border-color: rgba(26, 29, 34, 0.2);
+    }
+    [data-theme="tokyo"] .theme-toggle {
+      background: #f4f1ec;
+      border-color: rgba(100, 220, 255, 0.4);
+      box-shadow:
+        0 0 10px rgba(100, 220, 255, 0.5),
+        0 0 25px rgba(100, 220, 255, 0.3),
+        0 0 50px rgba(60, 180, 255, 0.2);
+    }
+
+    @keyframes panel-in {
+      0%   { opacity: 0; transform: translateY(10px); }
+      100% { opacity: 1; transform: translateY(0); }
+    }
+
+    @media (max-width: 640px) {
+      nav {
+        gap: 0.5rem;
+        padding: 0.85rem 0.85rem;
+      }
+      .back-link { font-size: 0.58rem; padding: 0.25rem 0.4rem; letter-spacing: 0.08em; }
+      .nav-brand { font-size: 0.9rem; }
+      .brand-sub { font-size: 0.6rem; letter-spacing: 0.1em; }
+      .page-body { padding: calc(55px + 1.25rem) 1rem 3rem; }
+      .card { padding: 2rem 1.5rem; }
+      h1 { font-size: 1.25rem; }
       .choices { grid-template-columns: 1fr; }
-      .card { padding: 1.35rem; border-radius: 18px; align-self: center; }
-      .timer { width: 100%; justify-content: center; }
+      footer { font-size: 0.65rem; padding: 0.7rem 1rem; }
+      .theme-toggle { width: 20px; height: 20px; bottom: 3rem; right: 0.9rem; }
     }
   </style>
 </head>
 <body>
-  <main class="card">
-    <span class="timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
-    <h1>Support chat</h1>
-    <p>A small in-memory chat demo with separate user and supporter views. Conversations, messages, and rate limits reset every 3 minutes.</p>
 
-    <div class="choices">
-      <a href="/user" target="_blank" rel="noopener noreferrer">
-        <span class="role-title">User</span>
-        <span class="role-detail">Start a conversation</span>
-      </a>
-      <a href="/supporter" target="_blank" rel="noopener noreferrer">
-        <span class="role-title">Supporter</span>
-        <span class="role-detail">View and reply to conversations</span>
-      </a>
+  <nav>
+    <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
+    <a href="/" class="nav-brand">
+      FLÓ <span class="brand-sep">/</span> <span class="brand-sub">POC</span>
+    </a>
+  </nav>
+
+  <main class="page-body">
+    <div class="card">
+      <span class="timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
+      <h1>Support chat</h1>
+      <p>A small in-memory chat demo with separate user and supporter views. Conversations, messages, and rate limits reset every 3 minutes.</p>
+
+      <div class="choices">
+        <a href="/user" target="_blank" rel="noopener noreferrer">
+          <span class="role-title">User</span>
+          <span class="role-detail">Start a conversation</span>
+        </a>
+        <a href="/supporter" target="_blank" rel="noopener noreferrer">
+          <span class="role-title">Supporter</span>
+          <span class="role-detail">View and reply to conversations</span>
+        </a>
+      </div>
     </div>
   </main>
+
+  <footer>
+    <span>&copy; 2025 FLÓ.FO</span>
+  </footer>
+
+  <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+
+  <script>
+    (() => {
+      function currentSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
+      }
+      const btn = document.getElementById('theme-toggle');
+      if (btn) {
+        btn.addEventListener('click', () => {
+          const current = document.documentElement.getAttribute('data-theme') || 'light';
+          const next = current === 'light' ? 'tokyo' : 'light';
+          document.documentElement.setAttribute('data-theme', next);
+          localStorage.setItem('poc-theme', next);
+        });
+      }
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (!localStorage.getItem('poc-theme')) {
+          document.documentElement.setAttribute('data-theme', currentSystemTheme());
+        }
+      });
+    })();
+  </script>
 </body>
 </html>
diff --git a/templates/supporter.html b/templates/supporter.html
index d55d51a..0889c02 100644
--- a/templates/supporter.html
+++ b/templates/supporter.html
@@ -3,26 +3,75 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
-  <title>Support Dashboard</title>
+  <title>Support Dashboard — FLÓ</title>
+
+  <script>
+    (function () {
+      var stored = localStorage.getItem('poc-theme');
+      var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    :root {
-      --bg: #111318;
-      --surface: #191c22;
-      --surface2: #20242c;
-      --border: #2b303a;
-      --accent: #8f9cff;
-      --accent-dim: #737fd3;
+    :root,
+    [data-theme="light"] {
+      --bg: #f4f1ec;
+      --bg-panel: rgba(255, 253, 250, 0.72);
+      --nav-bg: rgba(244, 241, 236, 0.6);
+      --ink: #1a1d22;
+      --ink-muted: #595f68;
+      --ink-dim: #9299a2;
+      --accent: #2c5a7a;
+      --border: rgba(26, 29, 34, 0.1);
+      --danger: #a03030;
+      --danger-soft: rgba(160, 48, 48, 0.08);
+      --danger-text: #a03030;
+      --own-bubble: #2c5a7a;
+      --own-bubble-ink: #f4f1ec;
+      --peer-bubble: rgba(26, 29, 34, 0.06);
+      --peer-bubble-ink: #1a1d22;
+      --input-bg: rgba(26, 29, 34, 0.04);
+      --surface-hover: rgba(26, 29, 34, 0.04);
+      --status-waiting-bg: rgba(180, 130, 20, 0.1);
+      --status-waiting-ink: #8a6a10;
+      --status-active-bg: rgba(44, 90, 122, 0.1);
+      --status-active-ink: #2c5a7a;
+      --status-closed-bg: rgba(146, 153, 162, 0.1);
+      --status-closed-ink: #9299a2;
+    }
+
+    [data-theme="tokyo"] {
+      --bg: #07070d;
+      --bg-panel: rgba(15, 16, 28, 0.72);
+      --nav-bg: rgba(7, 7, 13, 0.65);
+      --ink: #e8f4ff;
+      --ink-muted: #a3b3cc;
+      --ink-dim: #7886a0;
+      --accent: #64dcff;
+      --border: rgba(100, 220, 255, 0.12);
       --danger: #d93d3d;
       --danger-soft: rgba(217, 61, 61, 0.16);
       --danger-text: #ffd1d1;
-      --text: #eceff4;
-      --muted: #9aa3b2;
-      --own: #8f9cff;
-      --peer: #2b303a;
-      --radius: 12px;
+      --own-bubble: #64dcff;
+      --own-bubble-ink: #07070d;
+      --peer-bubble: rgba(100, 220, 255, 0.08);
+      --peer-bubble-ink: #e8f4ff;
+      --input-bg: rgba(100, 220, 255, 0.04);
+      --surface-hover: rgba(100, 220, 255, 0.06);
+      --status-waiting-bg: rgba(220, 173, 43, 0.15);
+      --status-waiting-ink: #dcad2b;
+      --status-active-bg: rgba(100, 220, 255, 0.12);
+      --status-active-ink: #64dcff;
+      --status-closed-bg: rgba(163, 179, 204, 0.1);
+      --status-closed-ink: #7886a0;
     }
 
     html, body {
@@ -30,55 +79,98 @@
       height: 100%;
       height: var(--app-height, 100dvh);
       background: var(--bg);
-      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      color: var(--text);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.92rem;
+      font-weight: 300;
+      line-height: 1.65;
+      color: var(--ink);
       overflow: hidden;
       -webkit-text-size-adjust: 100%;
+      transition: background 0.3s ease, color 0.3s ease;
     }
 
     button, input { font: inherit; }
 
+    a {
+      color: var(--accent);
+      text-decoration: none;
+      border-bottom: 1px solid transparent;
+      transition: all 0.2s ease;
+    }
+    a:hover { border-bottom-color: var(--accent); }
+
+    /* ---- Layout ---- */
     .layout {
       display: grid;
-      grid-template-columns: 320px minmax(0, 1fr);
-      grid-template-rows: 58px minmax(0, 1fr);
+      grid-template-columns: 280px minmax(0, 1fr);
+      grid-template-rows: 52px minmax(0, 1fr);
       width: 100%;
       height: 100%;
       height: var(--app-height, 100dvh);
       overflow: hidden;
     }
 
+    /* ---- Topbar ---- */
     .topbar {
       grid-column: 1 / -1;
       display: flex;
       align-items: center;
       gap: 0.75rem;
-      padding: 0.6rem 1rem;
+      padding: 0 1.5rem;
       border-bottom: 1px solid var(--border);
-      background: var(--surface);
+      background: var(--nav-bg);
+      backdrop-filter: blur(12px) saturate(120%);
+      -webkit-backdrop-filter: blur(12px) saturate(120%);
       min-width: 0;
+      transition: background 0.3s ease;
     }
 
     .menu-button {
       display: none;
-      background: var(--surface2);
-      color: var(--text);
+      background: transparent;
+      color: var(--ink);
       border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 0.55rem 0.75rem;
-      font-size: 0.9rem;
-      font-weight: 700;
+      border-radius: 2px;
+      padding: 0.4rem 0.65rem;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.72rem;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
       cursor: pointer;
+      transition: border-color 0.2s, color 0.2s;
+    }
+    .menu-button:hover { border-color: var(--ink-muted); }
+
+    .topbar-brand {
+      display: inline-flex;
+      align-items: baseline;
+      gap: 0.35rem;
+      white-space: nowrap;
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 700;
+      font-size: 1rem;
+      letter-spacing: -0.02em;
+      color: var(--ink);
+      text-decoration: none;
+    }
+    .topbar-brand:hover { color: var(--accent); border-bottom: none; }
+
+    [data-theme="tokyo"] .topbar-brand {
+      color: #e8f4ff;
+      text-shadow: 0 0 8px rgba(100, 220, 255, 0.3);
     }
 
-    .topbar h1 {
-      font-size: 1rem;
-      font-weight: 700;
-      letter-spacing: -0.01em;
-      min-width: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+    .topbar-brand .brand-sep {
+      font-weight: 300;
+      color: var(--ink-dim);
+    }
+    .topbar-brand .brand-sub {
+      font-weight: 400;
+      font-size: 0.72rem;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--ink-muted);
     }
 
     .topbar-timer {
@@ -86,15 +178,14 @@
       align-items: center;
       justify-content: center;
       margin-left: auto;
-      font-size: 0.86rem;
+      font-size: 0.72rem;
+      font-weight: 500;
+      letter-spacing: 0.08em;
       color: var(--danger-text);
       background: var(--danger-soft);
-      padding: 0.42rem 0.85rem;
-      border-radius: 999px;
+      padding: 0.3rem 0.7rem;
+      border-radius: 2px;
       border: 1px solid var(--danger);
-      font-weight: 850;
-      letter-spacing: 0.01em;
-      box-shadow: 0 0 0 1px rgba(217, 61, 61, 0.08), 0 8px 24px rgba(217, 61, 61, 0.08);
       white-space: nowrap;
     }
 
@@ -102,19 +193,24 @@
       display: none;
       position: fixed;
       inset: 0;
-      background: rgba(0, 0, 0, 0.58);
+      background: rgba(0, 0, 0, 0.45);
       z-index: 40;
+      backdrop-filter: blur(2px);
     }
 
+    /* ---- Sidebar ---- */
     .sidebar {
       grid-column: 1;
       grid-row: 2;
       border-right: 1px solid var(--border);
-      background: var(--surface);
+      background: var(--bg-panel);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
       display: flex;
       flex-direction: column;
       overflow: hidden;
       min-width: 0;
+      transition: background 0.3s ease;
     }
 
     .sidebar-header {
@@ -127,60 +223,69 @@
     }
 
     .sidebar-title {
-      font-size: 0.78rem;
-      font-weight: 700;
+      font-size: 0.65rem;
+      font-weight: 500;
       text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--muted);
+      letter-spacing: 0.2em;
+      color: var(--ink-dim);
     }
 
     .close-sidebar {
       display: none;
       background: transparent;
       border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: 10px;
-      padding: 0.5rem 0.7rem;
+      color: var(--ink-muted);
+      border-radius: 2px;
+      padding: 0.35rem 0.6rem;
       cursor: pointer;
-      font-size: 0.9rem;
-      font-weight: 700;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.68rem;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
     }
+    .close-sidebar:hover { color: var(--ink); border-color: var(--ink-muted); }
 
     #session-list {
       flex: 1;
       overflow-y: auto;
-      padding: 0.55rem;
+      padding: 0.5rem;
       display: flex;
       flex-direction: column;
-      gap: 0.35rem;
+      gap: 0.25rem;
       -webkit-overflow-scrolling: touch;
     }
 
     #session-list::-webkit-scrollbar,
-    #supporter-messages::-webkit-scrollbar { width: 4px; height: 4px; }
+    #supporter-messages::-webkit-scrollbar { width: 3px; height: 3px; }
     #session-list::-webkit-scrollbar-thumb,
-    #supporter-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+    #supporter-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 
     .session-item {
       width: 100%;
       text-align: left;
       background: transparent;
       border: 1px solid transparent;
-      border-radius: var(--radius);
-      padding: 0.8rem;
+      border-radius: 2px;
+      padding: 0.7rem 0.75rem;
       cursor: pointer;
-      color: var(--text);
-      font-size: 0.9rem;
+      color: var(--ink);
+      font-size: 0.85rem;
       transition: background 0.15s, border-color 0.15s;
       display: flex;
       flex-direction: column;
-      gap: 0.35rem;
+      gap: 0.3rem;
     }
+    .session-item:hover { background: var(--surface-hover); border-color: var(--border); }
+    .session-item.selected { background: var(--surface-hover); border-color: var(--accent); }
 
-    .session-item:hover { background: var(--surface2); border-color: var(--border); }
-    .session-item.selected { background: var(--surface2); border-color: var(--accent); }
-
-    .session-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .session-name {
+      font-weight: 700;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 0.85rem;
+    }
 
     .session-meta {
       display: flex;
@@ -190,29 +295,35 @@
     }
 
     .session-badge {
-      font-size: 0.68rem;
-      padding: 0.15rem 0.5rem;
-      border-radius: 20px;
-      font-weight: 700;
+      font-size: 0.6rem;
+      padding: 0.12rem 0.45rem;
+      border-radius: 2px;
+      font-weight: 500;
       text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+
+    .status-waiting { background: var(--status-waiting-bg); color: var(--status-waiting-ink); }
+    .status-active  { background: var(--status-active-bg);  color: var(--status-active-ink); }
+    .status-closed  { background: var(--status-closed-bg);  color: var(--status-closed-ink); }
+
+    .session-count { font-size: 0.7rem; color: var(--ink-dim); }
+    .session-id {
+      font-size: 0.65rem;
+      color: var(--ink-dim);
+      font-family: 'JetBrains Mono', monospace;
       letter-spacing: 0.04em;
     }
 
-    .status-waiting { background: rgba(220, 173, 43, 0.15); color: #dcad2b; }
-    .status-active { background: rgba(143, 156, 255, 0.16); color: var(--accent); }
-    .status-closed { background: rgba(154, 163, 178, 0.12); color: var(--muted); }
-
-    .session-count { font-size: 0.75rem; color: var(--muted); }
-    .session-id { font-size: 0.7rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
-
     .no-sessions {
       padding: 1.5rem 1rem;
-      font-size: 0.88rem;
-      color: var(--muted);
+      font-size: 0.82rem;
+      color: var(--ink-dim);
       text-align: center;
-      line-height: 1.5;
+      line-height: 1.6;
     }
 
+    /* ---- Main panel ---- */
     .main-panel {
       grid-column: 2;
       grid-row: 2;
@@ -223,28 +334,31 @@
       overflow: hidden;
       min-width: 0;
       background: var(--bg);
-      padding: 1.1rem;
+      padding: 1rem;
     }
 
     .chat-shell {
       display: flex;
       flex-direction: column;
-      width: min(960px, 100%);
+      width: min(860px, 100%);
       height: 100%;
-      background: var(--surface);
+      background: var(--bg-panel);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
       border: 1px solid var(--border);
-      border-radius: 20px;
+      border-radius: 3px;
       overflow: hidden;
-      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
+      box-shadow: 0 8px 30px rgba(26, 29, 34, 0.06);
+      transition: background 0.3s ease, border-color 0.3s ease;
     }
 
     .main-header {
       display: flex;
       align-items: center;
       gap: 0.55rem;
-      padding: 0.9rem 1rem;
+      padding: 0.8rem 1rem;
       border-bottom: 1px solid var(--border);
-      min-height: 52px;
+      min-height: 50px;
       flex-shrink: 0;
     }
 
@@ -257,7 +371,7 @@
 
     #active-session-name {
       font-weight: 700;
-      font-size: 0.96rem;
+      font-size: 0.88rem;
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -265,11 +379,13 @@
     }
 
     #active-session-meta {
-      font-size: 0.72rem;
-      color: var(--muted);
+      font-size: 0.65rem;
+      color: var(--ink-dim);
       white-space: nowrap;
+      letter-spacing: 0.04em;
     }
 
+    /* ---- Messages ---- */
     #supporter-messages {
       flex: 1;
       min-height: 0;
@@ -288,12 +404,12 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      color: var(--muted);
-      gap: 0.5rem;
-      font-size: 0.9rem;
+      color: var(--ink-dim);
+      gap: 0.4rem;
+      font-size: 0.85rem;
       text-align: center;
       padding: 1rem;
-      line-height: 1.5;
+      line-height: 1.6;
     }
 
     .msg-wrap { display: flex; }
@@ -302,62 +418,64 @@
 
     .msg-user, .msg-supporter {
       max-width: 78%;
-      padding: 0.58rem 0.85rem;
-      border-radius: 16px;
-      font-size: 0.9rem;
-      line-height: 1.48;
+      padding: 0.55rem 0.8rem;
+      border-radius: 12px;
+      font-size: 0.85rem;
+      line-height: 1.55;
       overflow-wrap: anywhere;
     }
 
     .msg-user {
-      background: var(--peer);
-      color: var(--text);
-      border-bottom-left-radius: 4px;
+      background: var(--peer-bubble);
+      color: var(--peer-bubble-ink);
+      border-bottom-left-radius: 3px;
     }
 
     .msg-supporter {
-      background: var(--own);
-      color: #111318;
-      border-bottom-right-radius: 4px;
+      background: var(--own-bubble);
+      color: var(--own-bubble-ink);
+      border-bottom-right-radius: 3px;
     }
 
     .msg-label {
       display: block;
-      font-size: 0.68rem;
-      font-weight: 600;
+      font-size: 0.62rem;
+      font-weight: 500;
       opacity: 0.7;
       margin-bottom: 2px;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.12em;
     }
 
     .msg-text { margin: 0; }
 
     .msg-time {
       display: block;
-      font-size: 0.66rem;
-      opacity: 0.55;
+      font-size: 0.6rem;
+      opacity: 0.5;
       margin-top: 4px;
       text-align: right;
+      letter-spacing: 0.04em;
     }
 
     .msg-system-wrap { display: flex; justify-content: center; margin: 0.25rem 0; }
     .msg-system-text {
-      font-size: 0.75rem;
-      color: var(--muted);
-      background: var(--bg);
+      font-size: 0.7rem;
+      color: var(--ink-dim);
+      background: var(--input-bg);
       padding: 0.25rem 0.75rem;
-      border-radius: 20px;
+      border-radius: 2px;
       text-align: center;
+      letter-spacing: 0.04em;
     }
 
+    /* ---- Typing bubble ---- */
     .typing-bubble {
       display: none;
       padding: 0 0.9rem 0.55rem;
       justify-content: flex-start;
       flex-shrink: 0;
     }
-
     .typing-bubble.visible { display: flex; }
 
     .typing-bubble-inner {
@@ -366,125 +484,128 @@
       align-items: center;
       gap: 4px;
       min-width: 48px;
-      padding: 0.58rem 0.78rem;
-      background: var(--peer);
-      border-radius: 16px;
-      border-bottom-left-radius: 4px;
-    }
-
-    .typing-bubble-inner::after {
-      content: "";
-      position: absolute;
-      left: 7px;
-      bottom: -4px;
-      width: 9px;
-      height: 9px;
-      background: var(--peer);
-      transform: rotate(45deg);
-      border-radius: 2px;
+      padding: 0.55rem 0.75rem;
+      background: var(--peer-bubble);
+      border-radius: 12px;
+      border-bottom-left-radius: 3px;
     }
 
     .typing-dot {
-      width: 6px;
-      height: 6px;
+      width: 5px;
+      height: 5px;
       border-radius: 50%;
-      background: var(--muted);
+      background: var(--ink-dim);
       animation: typing-bounce 1.1s infinite ease-in-out;
     }
-
     .typing-dot:nth-child(2) { animation-delay: 0.16s; }
     .typing-dot:nth-child(3) { animation-delay: 0.32s; }
 
     @keyframes typing-bounce {
       0%, 75%, 100% { transform: translateY(0); opacity: 0.45; }
-      35% { transform: translateY(-5px); opacity: 1; }
+      35% { transform: translateY(-4px); opacity: 1; }
     }
 
+    /* ---- Reply area ---- */
     #reply-area {
       border-top: 1px solid var(--border);
-      padding: 0.65rem 0.85rem max(0.8rem, env(safe-area-inset-bottom));
+      padding: 0.6rem 0.85rem max(0.75rem, env(safe-area-inset-bottom));
       display: none;
       flex-shrink: 0;
     }
-
     #reply-area.visible { display: flex; gap: 0.45rem; }
 
     #reply-area input[type="text"] {
       flex: 1;
       min-width: 0;
-      padding: 0.62rem 0.85rem;
-      background: var(--bg);
+      padding: 0.55rem 0.8rem;
+      background: var(--input-bg);
       border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-size: 16px;
+      border-radius: 3px;
+      color: var(--ink);
+      font-size: 0.85rem;
       line-height: 1.25;
       outline: none;
       transition: border-color 0.2s;
     }
-
     #reply-area input[type="text"]:focus { border-color: var(--accent); }
+    #reply-area input[type="text"]::placeholder { color: var(--ink-dim); }
 
     #reply-area button {
-      padding: 0.62rem 0.95rem;
+      padding: 0.55rem 0.9rem;
       background: var(--accent);
-      color: #111318;
+      color: var(--bg);
       border: none;
-      border-radius: var(--radius);
+      border-radius: 3px;
+      font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
-      font-size: 0.92rem;
+      font-size: 0.78rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
       cursor: pointer;
-      transition: background 0.2s;
+      transition: opacity 0.2s;
       white-space: nowrap;
     }
+    #reply-area button:hover { opacity: 0.85; }
 
-    #reply-area button:hover { background: var(--accent-dim); }
+    /* ---- Theme toggle ---- */
+    .theme-toggle {
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 1px solid var(--border);
+      cursor: pointer;
+      padding: 0;
+      z-index: 30;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    }
+    .theme-toggle:hover { transform: scale(1.08); }
+    [data-theme="light"] .theme-toggle {
+      background: linear-gradient(135deg, #07070d 0%, #64dcff 100%);
+      border-color: rgba(26, 29, 34, 0.2);
+    }
+    [data-theme="tokyo"] .theme-toggle {
+      background: #f4f1ec;
+      border-color: rgba(100, 220, 255, 0.4);
+      box-shadow:
+        0 0 10px rgba(100, 220, 255, 0.5),
+        0 0 25px rgba(100, 220, 255, 0.3);
+    }
 
+    /* ---- Mobile ---- */
     @media (max-width: 820px) {
       .layout {
-        display: grid;
         grid-template-columns: minmax(0, 1fr);
-        grid-template-rows: 58px minmax(0, 1fr);
-      }
-
-      .topbar {
-        min-height: 58px;
-        padding: 0.55rem 0.75rem;
+        grid-template-rows: 52px minmax(0, 1fr);
       }
 
+      .topbar { padding: 0 0.75rem; }
       .menu-button { display: inline-flex; }
 
-      .topbar h1 { font-size: 0.95rem; }
-
-      .topbar-timer {
-        font-size: 0.78rem;
-        padding: 0.36rem 0.65rem;
-      }
-
       .drawer-backdrop.visible { display: block; }
 
       .sidebar {
         position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
+        top: 0; left: 0; bottom: 0;
         height: 100%;
         height: var(--app-height, 100dvh);
-        width: min(88vw, 340px);
+        width: min(88vw, 320px);
         border-right: 1px solid var(--border);
         z-index: 50;
         transform: translateX(-102%);
-        transition: transform 0.2s ease;
-        box-shadow: 16px 0 40px rgba(0, 0, 0, 0.35);
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+        box-shadow: 12px 0 35px rgba(0, 0, 0, 0.25);
       }
-
       .sidebar.open { transform: translateX(0); }
       .close-sidebar { display: inline-flex; }
 
       .main-panel {
         grid-column: 1;
         grid-row: 2;
-        padding: 0.75rem;
+        padding: 0.65rem;
         align-items: stretch;
         justify-content: stretch;
       }
@@ -493,22 +614,21 @@
         width: 100%;
         max-width: none;
         height: 100%;
-        border-radius: 18px;
       }
 
-      .main-header { padding: 0.8rem 0.9rem; }
+      .main-header { padding: 0.75rem 0.85rem; }
       .msg-user, .msg-supporter { max-width: 86%; }
       #reply-area.visible { gap: 0.4rem; }
-      #reply-area button { padding-inline: 0.85rem; }
+      #reply-area button { padding-inline: 0.75rem; }
     }
 
     @media (max-width: 460px) {
-      .topbar h1 { display: none; }
-      .topbar-timer { flex: 1; margin-left: 0; }
-      .main-panel { padding: 0.55rem; }
-      .chat-shell { border-radius: 16px; }
-      .main-header { min-height: 50px; }
-      #supporter-messages { padding: 0.8rem; }
+      .topbar-brand .brand-sub { display: none; }
+      .topbar-brand .brand-sep { display: none; }
+      .main-panel { padding: 0.45rem; }
+      .main-header { min-height: 46px; }
+      #supporter-messages { padding: 0.75rem; }
+      .theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.75rem; }
     }
   </style>
 </head>
@@ -517,7 +637,9 @@
 <div class="layout">
   <header class="topbar">
     <button class="menu-button" type="button" onclick="openSidebar()">Chats</button>
-    <h1>Support dashboard</h1>
+    <a href="/" class="topbar-brand">
+      FLÓ <span class="brand-sep">/</span> <span class="brand-sub">SUPPORT</span>
+    </a>
     <span class="topbar-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
   </header>
 
@@ -540,7 +662,7 @@
     <div class="chat-shell">
       <div class="main-header">
         <div class="active-copy">
-          <span id="active-session-name" style="color: var(--muted)">Select a conversation</span>
+          <span id="active-session-name" style="color: var(--ink-dim)">Select a conversation</span>
           <span id="active-session-meta"></span>
         </div>
       </div>
@@ -566,6 +688,8 @@
   </section>
 </div>
 
+<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+
 <script>
   let activeSessionId = null;
   let supporterWs = null;
@@ -617,7 +741,7 @@
     stopSupporterTyping(lastTypingSessionId);
     activeSessionId = null;
     document.getElementById('active-session-name').textContent = 'Select a conversation';
-    document.getElementById('active-session-name').style.color = 'var(--muted)';
+    document.getElementById('active-session-name').style.color = 'var(--ink-dim)';
     document.getElementById('active-session-meta').textContent = '';
     document.getElementById('reply-area').classList.remove('visible');
     hideUserTyping();
@@ -751,6 +875,27 @@
   }
 
   connectSupporterWS();
+
+  // Theme toggle
+  (() => {
+    function currentSystemTheme() {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
+    }
+    const btn = document.getElementById('theme-toggle');
+    if (btn) {
+      btn.addEventListener('click', () => {
+        const current = document.documentElement.getAttribute('data-theme') || 'light';
+        const next = current === 'light' ? 'tokyo' : 'light';
+        document.documentElement.setAttribute('data-theme', next);
+        localStorage.setItem('poc-theme', next);
+      });
+    }
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (!localStorage.getItem('poc-theme')) {
+        document.documentElement.setAttribute('data-theme', currentSystemTheme());
+      }
+    });
+  })();
 </script>
 
 </body>
diff --git a/templates/user.html b/templates/user.html
index 6edc436..f0b2db6 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -3,26 +3,61 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />
-  <title>Support Chat</title>
+  <title>Support Chat — FLÓ</title>
+
+  <script>
+    (function () {
+      var stored = localStorage.getItem('poc-theme');
+      var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light');
+      document.documentElement.setAttribute('data-theme', theme);
+    })();
+  </script>
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
   <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
-    :root {
-      --bg: #111318;
-      --surface: #191c22;
-      --surface-soft: #20242c;
-      --border: #2b303a;
-      --accent: #8f9cff;
-      --accent-dim: #737fd3;
+    :root,
+    [data-theme="light"] {
+      --bg: #f4f1ec;
+      --bg-panel: rgba(255, 253, 250, 0.72);
+      --nav-bg: rgba(244, 241, 236, 0.6);
+      --ink: #1a1d22;
+      --ink-muted: #595f68;
+      --ink-dim: #9299a2;
+      --accent: #2c5a7a;
+      --border: rgba(26, 29, 34, 0.1);
+      --danger: #a03030;
+      --danger-soft: rgba(160, 48, 48, 0.08);
+      --danger-text: #a03030;
+      --user-bubble: #2c5a7a;
+      --user-bubble-ink: #f4f1ec;
+      --peer-bubble: rgba(26, 29, 34, 0.06);
+      --peer-bubble-ink: #1a1d22;
+      --input-bg: rgba(26, 29, 34, 0.04);
+    }
+
+    [data-theme="tokyo"] {
+      --bg: #07070d;
+      --bg-panel: rgba(15, 16, 28, 0.72);
+      --nav-bg: rgba(7, 7, 13, 0.65);
+      --ink: #e8f4ff;
+      --ink-muted: #a3b3cc;
+      --ink-dim: #7886a0;
+      --accent: #64dcff;
+      --border: rgba(100, 220, 255, 0.12);
       --danger: #d93d3d;
       --danger-soft: rgba(217, 61, 61, 0.16);
       --danger-text: #ffd1d1;
-      --text: #eceff4;
-      --muted: #9aa3b2;
-      --user: #8f9cff;
-      --supporter: #2b303a;
-      --radius: 12px;
+      --user-bubble: #64dcff;
+      --user-bubble-ink: #07070d;
+      --peer-bubble: rgba(100, 220, 255, 0.08);
+      --peer-bubble-ink: #e8f4ff;
+      --input-bg: rgba(100, 220, 255, 0.04);
     }
 
     html, body {
@@ -35,16 +70,29 @@
 
     body {
       background: var(--bg);
+      color: var(--ink);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.92rem;
+      font-weight: 300;
+      line-height: 1.65;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      color: var(--text);
       padding: 4.4rem 1rem max(1rem, env(safe-area-inset-bottom));
+      transition: background 0.3s ease, color 0.3s ease;
     }
 
     button, input { font: inherit; }
 
+    a {
+      color: var(--accent);
+      text-decoration: none;
+      border-bottom: 1px solid transparent;
+      transition: all 0.2s ease;
+    }
+    a:hover { border-bottom-color: var(--accent); }
+
+    /* ---- Timer ---- */
     .page-timer {
       display: inline-flex;
       align-items: center;
@@ -55,81 +103,101 @@
       transform: translateX(-50%);
       color: var(--danger-text);
       border: 1px solid var(--danger);
-      border-radius: 999px;
-      padding: 0.38rem 0.8rem;
-      font-size: 0.82rem;
-      font-weight: 800;
+      border-radius: 2px;
+      padding: 0.3rem 0.7rem;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.72rem;
+      font-weight: 500;
+      letter-spacing: 0.08em;
       background: var(--danger-soft);
-      box-shadow: 0 0 0 1px rgba(217, 61, 61, 0.08), 0 8px 24px rgba(217, 61, 61, 0.08);
       z-index: 10;
       white-space: nowrap;
     }
 
+    /* ---- Start form ---- */
     #start-form {
-      background: var(--surface);
+      background: var(--bg-panel);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
       border: 1px solid var(--border);
-      border-radius: 20px;
-      padding: 2rem;
-      width: min(360px, 100%);
+      border-radius: 3px;
+      padding: 3rem 3.5rem;
+      width: min(400px, 100%);
       text-align: left;
-      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
+      box-shadow: 0 8px 30px rgba(26, 29, 34, 0.06);
+      animation: panel-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: background 0.3s ease, border-color 0.3s ease;
     }
 
     #start-form h1 {
-      font-size: 1.35rem;
+      font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
-      margin-bottom: 0.45rem;
+      font-size: 1.5rem;
       letter-spacing: -0.02em;
+      margin-bottom: 0.6rem;
+      color: var(--ink);
+    }
+
+    [data-theme="tokyo"] #start-form h1 {
+      text-shadow: 0 0 10px rgba(100, 220, 255, 0.3);
     }
 
     #start-form p {
-      font-size: 0.9rem;
-      color: var(--muted);
-      margin-bottom: 1.35rem;
-      line-height: 1.55;
+      font-size: 0.85rem;
+      color: var(--ink-muted);
+      margin-bottom: 2rem;
+      line-height: 1.75;
     }
 
     #start-form input[type="text"] {
       width: 100%;
-      padding: 0.72rem 0.95rem;
-      background: var(--bg);
+      padding: 0.65rem 0.85rem;
+      background: var(--input-bg);
       border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-size: 16px;
+      border-radius: 3px;
+      color: var(--ink);
+      font-size: 0.88rem;
       line-height: 1.25;
       margin-bottom: 1rem;
       outline: none;
       transition: border-color 0.2s;
     }
-
     #start-form input[type="text"]:focus { border-color: var(--accent); }
+    #start-form input[type="text"]::placeholder { color: var(--ink-dim); }
 
     #start-form button {
       width: 100%;
-      padding: 0.72rem;
+      padding: 0.65rem;
       background: var(--accent);
-      color: #111318;
+      color: var(--bg);
       border: none;
-      border-radius: var(--radius);
-      font-size: 0.95rem;
+      border-radius: 3px;
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 0.82rem;
       font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
       cursor: pointer;
-      transition: background 0.2s;
+      transition: opacity 0.2s;
     }
+    #start-form button:hover { opacity: 0.85; }
 
-    #start-form button:hover { background: var(--accent-dim); }
-
+    /* ---- Chat container ---- */
     #chat-container {
       display: none;
       flex-direction: column;
-      width: min(390px, 100%);
+      width: min(420px, 100%);
       height: min(620px, calc(var(--app-height, 100dvh) - 5.4rem));
-      background: var(--surface);
+      background: var(--bg-panel);
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
       border: 1px solid var(--border);
-      border-radius: 20px;
+      border-radius: 3px;
       overflow: hidden;
-      box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
+      box-shadow: 0 8px 30px rgba(26, 29, 34, 0.06);
+      transition: background 0.3s ease, border-color 0.3s ease;
     }
 
     #chat-header {
@@ -139,18 +207,20 @@
       padding: 0.9rem 1rem;
       border-bottom: 1px solid var(--border);
       font-weight: 700;
-      font-size: 0.95rem;
+      font-size: 0.88rem;
       min-height: 52px;
     }
 
     .chat-session-id {
       margin-left: auto;
-      font-size: 0.72rem;
-      color: var(--muted);
+      font-size: 0.68rem;
+      color: var(--ink-dim);
       font-weight: 400;
       white-space: nowrap;
+      letter-spacing: 0.04em;
     }
 
+    /* ---- Messages ---- */
     #messages {
       flex: 1;
       min-height: 0;
@@ -162,9 +232,9 @@
       scroll-behavior: smooth;
     }
 
-    #messages::-webkit-scrollbar { width: 4px; }
+    #messages::-webkit-scrollbar { width: 3px; }
     #messages::-webkit-scrollbar-track { background: transparent; }
-    #messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+    #messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 
     .msg-wrap { display: flex; }
     .msg-user-wrap { justify-content: flex-end; }
@@ -172,43 +242,44 @@
 
     .msg-user, .msg-supporter {
       max-width: 78%;
-      padding: 0.58rem 0.85rem;
-      border-radius: 16px;
-      font-size: 0.88rem;
-      line-height: 1.48;
+      padding: 0.55rem 0.8rem;
+      border-radius: 12px;
+      font-size: 0.85rem;
+      line-height: 1.55;
       overflow-wrap: anywhere;
     }
 
     .msg-user {
-      background: var(--user);
-      color: #111318;
-      border-bottom-right-radius: 4px;
+      background: var(--user-bubble);
+      color: var(--user-bubble-ink);
+      border-bottom-right-radius: 3px;
     }
 
     .msg-supporter {
-      background: var(--supporter);
-      color: var(--text);
-      border-bottom-left-radius: 4px;
+      background: var(--peer-bubble);
+      color: var(--peer-bubble-ink);
+      border-bottom-left-radius: 3px;
     }
 
     .msg-label {
       display: block;
-      font-size: 0.68rem;
-      font-weight: 600;
+      font-size: 0.62rem;
+      font-weight: 500;
       opacity: 0.7;
       margin-bottom: 2px;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.12em;
     }
 
     .msg-text { margin: 0; }
 
     .msg-time {
       display: block;
-      font-size: 0.66rem;
-      opacity: 0.55;
+      font-size: 0.6rem;
+      opacity: 0.5;
       margin-top: 4px;
       text-align: right;
+      letter-spacing: 0.04em;
     }
 
     .msg-system-wrap {
@@ -218,20 +289,21 @@
     }
 
     .msg-system-text {
-      font-size: 0.75rem;
-      color: var(--muted);
-      background: var(--bg);
+      font-size: 0.7rem;
+      color: var(--ink-dim);
+      background: var(--input-bg);
       padding: 0.25rem 0.75rem;
-      border-radius: 20px;
+      border-radius: 2px;
       text-align: center;
+      letter-spacing: 0.04em;
     }
 
+    /* ---- Typing bubble ---- */
     .typing-bubble {
       display: none;
       padding: 0 0.9rem 0.55rem;
       justify-content: flex-start;
     }
-
     .typing-bubble.visible { display: flex; }
 
     .typing-bubble-inner {
@@ -240,40 +312,28 @@
       align-items: center;
       gap: 4px;
       min-width: 48px;
-      padding: 0.58rem 0.78rem;
-      background: var(--supporter);
-      border-radius: 16px;
-      border-bottom-left-radius: 4px;
-    }
-
-    .typing-bubble-inner::after {
-      content: "";
-      position: absolute;
-      left: 7px;
-      bottom: -4px;
-      width: 9px;
-      height: 9px;
-      background: var(--supporter);
-      transform: rotate(45deg);
-      border-radius: 2px;
+      padding: 0.55rem 0.75rem;
+      background: var(--peer-bubble);
+      border-radius: 12px;
+      border-bottom-left-radius: 3px;
     }
 
     .typing-dot {
-      width: 6px;
-      height: 6px;
+      width: 5px;
+      height: 5px;
       border-radius: 50%;
-      background: var(--muted);
+      background: var(--ink-dim);
       animation: typing-bounce 1.1s infinite ease-in-out;
     }
-
     .typing-dot:nth-child(2) { animation-delay: 0.16s; }
     .typing-dot:nth-child(3) { animation-delay: 0.32s; }
 
     @keyframes typing-bounce {
       0%, 75%, 100% { transform: translateY(0); opacity: 0.45; }
-      35% { transform: translateY(-5px); opacity: 1; }
+      35% { transform: translateY(-4px); opacity: 1; }
     }
 
+    /* ---- Chat input ---- */
     #chat-form {
       display: flex;
       gap: 0.45rem;
@@ -285,44 +345,80 @@
     #chat-form input[type="text"] {
       flex: 1;
       min-width: 0;
-      padding: 0.58rem 0.85rem;
-      background: var(--bg);
+      padding: 0.55rem 0.8rem;
+      background: var(--input-bg);
       border: 1px solid var(--border);
-      border-radius: var(--radius);
-      color: var(--text);
-      font-size: 16px;
+      border-radius: 3px;
+      color: var(--ink);
+      font-size: 0.85rem;
       line-height: 1.25;
       outline: none;
       transition: border-color 0.2s;
     }
-
     #chat-form input[type="text"]:focus { border-color: var(--accent); }
+    #chat-form input[type="text"]::placeholder { color: var(--ink-dim); }
 
     #chat-form button {
-      padding: 0.58rem 1rem;
+      padding: 0.55rem 0.9rem;
       background: var(--accent);
-      color: #111318;
+      color: var(--bg);
       border: none;
-      border-radius: var(--radius);
+      border-radius: 3px;
+      font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
-      font-size: 0.88rem;
+      font-size: 0.78rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
       cursor: pointer;
-      transition: background 0.2s;
+      transition: opacity 0.2s;
       white-space: nowrap;
     }
+    #chat-form button:hover { opacity: 0.85; }
 
-    #chat-form button:hover { background: var(--accent-dim); }
+    /* ---- Theme toggle ---- */
+    .theme-toggle {
+      position: fixed;
+      bottom: 1.5rem;
+      right: 1.5rem;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 1px solid var(--border);
+      cursor: pointer;
+      padding: 0;
+      z-index: 30;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    }
+    .theme-toggle:hover { transform: scale(1.08); }
+    [data-theme="light"] .theme-toggle {
+      background: linear-gradient(135deg, #07070d 0%, #64dcff 100%);
+      border-color: rgba(26, 29, 34, 0.2);
+    }
+    [data-theme="tokyo"] .theme-toggle {
+      background: #f4f1ec;
+      border-color: rgba(100, 220, 255, 0.4);
+      box-shadow:
+        0 0 10px rgba(100, 220, 255, 0.5),
+        0 0 25px rgba(100, 220, 255, 0.3);
+    }
+
+    @keyframes panel-in {
+      0%   { opacity: 0; transform: translateY(10px); }
+      100% { opacity: 1; transform: translateY(0); }
+    }
 
     @media (max-width: 520px) {
       body { align-items: stretch; padding: 4.2rem 0.75rem max(0.75rem, env(safe-area-inset-bottom)); }
       .page-timer { top: 0.75rem; width: calc(100% - 1.5rem); text-align: center; justify-content: center; }
-      #start-form { align-self: center; padding: 1.45rem; border-radius: 18px; }
-      #chat-container { width: 100%; height: calc(var(--app-height, 100dvh) - 5rem); max-height: none; border-radius: 18px; }
+      #start-form { align-self: center; padding: 2rem 1.5rem; }
+      #chat-container { width: 100%; height: calc(var(--app-height, 100dvh) - 5rem); max-height: none; }
       .chat-session-id { display: none; }
       .msg-user, .msg-supporter { max-width: 86%; }
       #messages { padding: 0.8rem; }
       #chat-form { gap: 0.4rem; }
-      #chat-form button { padding-inline: 0.85rem; }
+      #chat-form button { padding-inline: 0.75rem; }
+      .theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.9rem; }
     }
   </style>
 </head>
@@ -342,6 +438,8 @@
 
   <div id="chat-container"></div>
 
+  <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+
   <script>
     let ws = null;
     let userTypingActive = false;
@@ -458,6 +556,27 @@
         ws.onerror = () => console.warn('WebSocket error; polling will continue.');
       }
     });
+
+    // Theme toggle
+    (() => {
+      function currentSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'tokyo' : 'light';
+      }
+      const btn = document.getElementById('theme-toggle');
+      if (btn) {
+        btn.addEventListener('click', () => {
+          const current = document.documentElement.getAttribute('data-theme') || 'light';
+          const next = current === 'light' ? 'tokyo' : 'light';
+          document.documentElement.setAttribute('data-theme', next);
+          localStorage.setItem('poc-theme', next);
+        });
+      }
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (!localStorage.getItem('poc-theme')) {
+          document.documentElement.setAttribute('data-theme', currentSystemTheme());
+        }
+      });
+    })();
   </script>
 </body>
 </html>
