:root {
    --bg: #0f0f1a; --surface: #1a1a2e; --surface2: #252540;
    --primary: #6c5ce7; --primary-hover: #5a4bd1;
    --text: #e0e0f0; --text-dim: #8888aa;
    --danger: #e74c3c; --success: #2ecc71; --radius: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg); color: var(--text); height: 100dvh; overflow: hidden; direction: rtl; }
#app { display: flex; flex-direction: column; height: 100dvh; max-width: 100%; }
header { display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--surface2); }
header h1 { font-size: 1.1rem; font-weight: 600; }
.status { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; }
.status.connected { background: var(--success); color: #000; }
.status.disconnected { background: var(--danger); color: #fff; }
#chat-container { flex: 1; overflow-y: auto; padding: 12px 16px; scroll-behavior: smooth; }
#messages { display: flex; flex-direction: column; gap: 10px; }
.message { max-width: 85%; padding: 10px 14px; border-radius: var(--radius);
    font-size: 0.9rem; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
.message.user { align-self: flex-start; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.message.assistant { align-self: flex-end; background: var(--surface2); color: var(--text); border-bottom-left-radius: 4px; }
.message.system { align-self: center; background: transparent; color: var(--text-dim); font-size: 0.8rem; font-style: italic; }
#typing-indicator { font-size: 0.8rem; color: var(--text-dim); padding: 8px 0; text-align: center; }
.hidden { display: none !important; }
footer { padding: 10px 16px 16px; background: var(--surface); border-top: 1px solid var(--surface2); }
.input-row { display: flex; gap: 8px; align-items: flex-end; }
#message-input { flex: 1; padding: 10px 14px; border-radius: var(--radius);
    border: 1px solid var(--surface2); background: var(--bg); color: var(--text);
    font-size: 0.9rem; resize: none; max-height: 120px; font-family: inherit; }
#message-input:focus { outline: none; border-color: var(--primary); }
button { padding: 10px 18px; border: none; border-radius: var(--radius);
    background: var(--primary); color: #fff; font-size: 0.85rem; cursor: pointer;
    transition: background 0.2s; font-family: inherit; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:not(:disabled):hover { background: var(--primary-hover); }
#stop-btn { background: var(--danger); }
.status-row { display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; font-size: 0.7rem; color: var(--text-dim); }
#new-chat-btn { background: transparent; border: 1px solid var(--surface2);
    color: var(--text-dim); padding: 4px 10px; font-size: 0.7rem; }