:root{color-scheme:dark;--bg:#10191a;--panel:#182222;--panel-2:#1d2929;--line:#2a3736;--text:#f0f3ed;--muted:#9ca9a2;--accent:#c7f36b;--accent-dark:#17200d;--soft:#d9e8ce;font-family:'DM Sans',sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -18%,#324843 0,transparent 48%),var(--bg);color:var(--text)}button,input{font:inherit}.shell{width:min(100% - 40px,900px);margin:0 auto;padding:32px 0 26px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:Manrope,sans-serif;font-size:20px;font-weight:800;letter-spacing:-.8px}.brand-mark{width:30px;height:30px;border-radius:10px;background:var(--accent);color:#17200d;display:grid;place-items:center;font-size:15px}.brand-dot{color:var(--accent)}.room-status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.status-dot{width:7px;height:7px;background:#eab86e;border-radius:50%;box-shadow:0 0 10px #eab86e66}.room-status.is-online .status-dot{background:var(--accent);box-shadow:0 0 10px #c7f36b80}.status-separator{color:#64706c}.chat-card{flex:1;min-height:570px;border:1px solid #34413f;border-radius:20px;background:linear-gradient(145deg,#1b2726,#172120 60%);box-shadow:0 24px 80px #0003;display:flex;flex-direction:column;overflow:hidden}.room-heading{padding:35px 40px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--accent);margin:0 0 12px}.room-heading h1{font-family:Manrope,sans-serif;font-size:25px;line-height:1.3;letter-spacing:-.8px;margin:0;font-weight:700}.subtitle{margin:8px 0 0;color:var(--muted);font-size:13px}.room-icon{width:45px;height:45px;border-radius:15px;background:#c7f36b12;border:1px solid #c7f36b35;color:var(--accent);display:grid;place-items:center;font-size:25px}.message-area{flex:1;min-height:260px;max-height:calc(100vh - 390px);overflow-y:auto;padding:24px 40px;scrollbar-color:#455450 transparent;scrollbar-width:thin}.empty-state{height:100%;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:12px;text-align:center}.empty-state[hidden]{display:none}.empty-state strong{color:#dbe2da;font-size:14px;font-weight:600}.empty-icon{width:39px;height:39px;display:grid;place-items:center;background:#c7f36b12;border:1px solid #c7f36b2e;border-radius:13px;color:var(--accent);font-size:18px;margin-bottom:5px}.messages{padding:0;margin:0;list-style:none}.message{display:flex;align-items:flex-start;gap:12px;margin:0 0 20px;animation:arrive .2s ease-out}.avatar{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;background:#c7f36b1a;border:1px solid #c7f36b25;border-radius:12px;color:var(--accent);font-size:13px;font-weight:700}.message-body{min-width:0}.message-meta{display:flex;align-items:baseline;gap:9px;margin:0 0 5px}.message-meta strong{font-size:12px;font-weight:600;color:#eef2ea}.message-meta time{font-size:10px;color:#86928b}.message-text{margin:0;color:#c9d2cb;font-size:13px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.composer{margin:0 24px;border:1px solid #3a4844;background:#111b1a;border-radius:13px;min-height:56px;display:flex;align-items:center;padding:5px 6px 5px 15px;gap:12px;transition:border-color .15s}.composer:focus-within{border-color:#819e5a}.composer input{border:0;outline:0;background:transparent;color:var(--text);min-width:0;font-size:12px}.composer input::placeholder{color:#84908a}.composer #name{width:125px}.composer #message{flex:1}.composer-divider{height:22px;width:1px;background:var(--line)}.char-count{white-space:nowrap;font-size:10px;color:#77837d}.send-button{border:0;border-radius:9px;background:var(--accent);color:var(--accent-dark);height:40px;padding:0 13px;display:flex;align-items:center;gap:13px;font-size:11px;font-weight:700;cursor:pointer;transition:filter .15s,transform .15s}.send-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.send-button:disabled{opacity:.55;cursor:wait;transform:none}.send-button span:last-child{font-size:15px}.form-note{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 10px 17px;color:#78857e;font-size:10px}.form-note>span:first-child{width:15px;height:15px;display:grid;place-items:center;border:1px solid #4a5751;border-radius:4px;color:#aeb8b1;font-size:9px}.note-separator{padding:0 4px;color:#495650}.error-message{color:#ff9e91;text-align:center;font-size:11px;min-height:0;margin:0 20px 12px}.error-message:not(:empty){min-height:17px}.shell footer{display:flex;justify-content:space-between;color:#738079;font-size:10px;padding:17px 3px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.shell{width:min(100% - 24px,900px);padding:18px 0 15px}.topbar{margin-bottom:22px}.chat-card{min-height:calc(100vh - 111px);border-radius:16px}.room-heading{padding:25px 20px 20px}.room-heading h1{font-size:20px}.room-icon{width:39px;height:39px;border-radius:13px}.message-area{padding:19px 20px;max-height:none}.composer{margin:0 12px;padding-left:11px;gap:8px;min-height:52px}.composer #name{width:80px}.composer-divider{height:19px}.char-count{display:none}.send-button{height:38px;padding:0 11px;gap:8px}.form-note{padding-bottom:12px}.shell footer{font-size:9px}.room-status{font-size:10px;gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.tool-button{flex:0 0 34px;width:34px;height:34px;border:1px solid #3a4844;border-radius:9px;background:#1b2826;color:#cbd5ce;display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer}.tool-button:hover{border-color:#809c5a;color:var(--accent)}.record-button{font-size:11px;color:#e69b8e}.record-button.recording{background:#5b2624;border-color:#aa554e;color:#ffb0a5;animation:pulse 1s infinite}.selected-file{margin:10px 25px 0;padding:8px 11px;border:1px solid #3a4844;border-radius:8px;color:#cad4cc;font-size:11px;overflow-wrap:anywhere}.selected-file[hidden]{display:none}.remove-file{margin-left:10px;border:0;background:none;color:var(--accent);font-size:10px;cursor:pointer}.message-attachment{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:9px}.message-attachment img{display:block;max-width:min(320px,65vw);max-height:230px;object-fit:contain;border:1px solid #3a4844;border-radius:10px}.message-attachment audio{max-width:min(320px,65vw);height:38px}.message-attachment>a{color:var(--accent);font-size:11px;text-decoration:none;overflow-wrap:anywhere}.message-attachment>a:hover{text-decoration:underline}@keyframes pulse{50%{box-shadow:0 0 0 4px #ff8e7b22}}
@media(max-width:600px){.composer{gap:6px;padding-left:9px}.composer #name{width:65px}.tool-button{width:30px;height:32px;flex-basis:30px}.send-button{height:36px;padding:0 9px;gap:6px}.selected-file{margin-left:13px;margin-right:13px}.message-attachment img{max-width:70vw}}
.shell footer a{color:#9eae9e;text-decoration:none}.shell footer a:hover{color:var(--accent)}