:root {
  --bg: #f5f5f7; --panel: #ffffff; --panel-soft: #f8f8fb; --text: #17171c; --muted: #8b8b98;
  --line: #e9e9ef; --accent: #6d5dfc; --accent-dark: #5545e8; --accent-soft: #efedff;
  --sent: #6d5dfc; --received: #f0f0f4; --shadow: 0 24px 80px rgba(24, 20, 65, .12);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--text); background: radial-gradient(circle at 20% 0%, #e5e0ff, transparent 36%), var(--bg); font-family: "DM Sans", sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1440px, 100%); height: 100dvh; margin: auto; display: grid; grid-template-columns: 340px 1fr; background: var(--panel); overflow: hidden; }
.sidebar { z-index: 5; display: flex; flex-direction: column; padding: 26px 18px 18px; background: var(--panel-soft); border-right: 1px solid var(--line); }
.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 800 22px Manrope, sans-serif; letter-spacing: -.6px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: white; background: var(--accent); border-radius: 11px 11px 11px 3px; font-size: 17px; }
.profile-card { display: flex; align-items: center; gap: 11px; margin: 0 4px 20px; padding: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 6px 24px rgba(50,40,110,.05); }
.profile-card > div:nth-child(2), .chat-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.profile-card strong, .chat-title strong { font-weight: 700; }
.profile-card span:not(.status-dot), .chat-title span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: #4c3e42; background: #ffcbbf; font-weight: 700; }
.avatar-you { color: #3e356f; background: #d9d3ff; }
.avatar-noah { color: #245e51; background: #bcebdc; }.avatar-team { color:#744e18;background:#ffe1a9}.avatar-lina{color:#54316c;background:#e8c6fa}.avatar-sam{color:#813e50;background:#fac7d5}
.status-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid var(--panel); background: #35c985; border-radius: 50%; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 700; }
.icon-button:hover { color: var(--accent); background: var(--accent-soft); }
.search-box { display: flex; align-items: center; gap: 9px; margin: 0 4px 22px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--muted); }
.search-box:focus-within { border-color: #b9b1ff; box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); font-size: 10px; white-space: nowrap; }
.section-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.section-heading button { width: 26px; height: 26px; border: 0; border-radius: 8px; color: var(--accent); background: var(--accent-soft); cursor:pointer; font-size: 17px; }
.conversation-list { flex: 1; overflow-y: auto; padding-right: 2px; }
.conversation { width: 100%; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 11px 10px; border: 0; border-radius: 15px; background: transparent; text-align: left; cursor: pointer; }
.conversation:hover { background: var(--panel); }.conversation.active { background: var(--panel); box-shadow: 0 7px 26px rgba(43,35,95,.07); }
.conversation-copy { min-width: 0; }.conversation-top { display:flex; justify-content:space-between; gap:8px; }.conversation-name { font-weight: 700; font-size: 14px; }.conversation-time { color: var(--muted); font-size: 10px; white-space:nowrap; }
.conversation-preview { display:block; overflow:hidden; margin-top:4px; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.conversation.active .conversation-preview{color:#696873}
.unread { display:grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; color:white; background:var(--accent); font-size:10px; font-weight:700; }
.sidebar-footer { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding-top:12px; border-top:1px solid var(--line); }
.footer-link { display:flex; flex-direction:column; gap:4px; align-items:center; padding:7px 4px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size:15px; cursor:pointer }.footer-link span{font-size:10px}.footer-link.active{color:var(--accent);background:var(--accent-soft)}
.chat-panel { min-width:0; display:flex; flex-direction:column; position:relative; background:var(--panel); }
.chat-header { height:85px; display:flex; align-items:center; gap:13px; padding:0 32px; border-bottom:1px solid var(--line); }.chat-title span{color:#3abb7d}.header-actions{display:flex;gap:5px}.menu-button,.mobile-close{display:none}
.messages { flex:1; overflow-y:auto; padding:34px clamp(20px,6vw,92px) 12px; scroll-behavior:smooth; }
.day-divider { display:flex; align-items:center; gap:14px; margin:0 0 26px; color:var(--muted); font-size:11px; }.day-divider::before,.day-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.message-row { display:flex; gap:10px; align-items:flex-end; margin:12px 0; animation:pop .2s ease-out both; }.message-row.sent{justify-content:flex-end}.message-row .avatar{width:30px;height:30px;border-radius:10px;font-size:11px}
.bubble-wrap { max-width:min(530px,75%); }.bubble { padding:11px 15px; border-radius:18px 18px 18px 5px; background:var(--received); line-height:1.45; font-size:14px; }.sent .bubble{color:white;background:var(--sent);border-radius:18px 18px 5px 18px}.message-meta{display:flex;gap:6px;margin:5px 4px 0;color:var(--muted);font-size:10px}.sent .message-meta{justify-content:flex-end}.reaction{display:inline-flex;margin-top:-3px;padding:3px 7px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:12px;box-shadow:0 3px 9px rgba(20,20,50,.08)}
.typing { display:flex; align-items:center; gap:4px; height:0; overflow:hidden; padding:0 clamp(20px,6vw,92px); color:var(--muted); font-size:11px; transition:.2s }.typing.show{height:28px}.typing span{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:bounce 1s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}.typing em{margin-left:6px;font-style:normal}
.composer { position:relative; display:flex; align-items:flex-end; gap:8px; margin:12px clamp(18px,4vw,60px) 24px; padding:8px; border:1px solid var(--line); border-radius:20px; background:var(--panel-soft); box-shadow:0 12px 35px rgba(35,28,78,.08); }.composer:focus-within{border-color:#b9b1ff;box-shadow:0 0 0 3px var(--accent-soft),0 12px 35px rgba(35,28,78,.08)}
.composer textarea{flex:1;max-height:120px;resize:none;padding:9px 4px;border:0;outline:0;background:transparent;color:var(--text);line-height:1.35}.attach-button,.emoji-button,.send-button{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:12px;cursor:pointer}.attach-button,.emoji-button{color:var(--muted);background:transparent;font-size:19px}.send-button{color:white;background:var(--accent);box-shadow:0 8px 18px rgba(109,93,252,.27)}.send-button:hover{background:var(--accent-dark);transform:translateY(-1px)}
.emoji-menu{position:absolute;right:45px;bottom:58px;display:flex;gap:3px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}.emoji-menu[hidden]{display:none}.emoji-menu button{border:0;background:transparent;padding:5px;cursor:pointer;font-size:20px}
.install-toast{position:fixed;right:22px;bottom:22px;z-index:20;display:flex;align-items:center;gap:14px;padding:15px;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:var(--shadow)}.install-toast[hidden]{display:none}.install-toast div{display:flex;flex-direction:column}.install-toast span{color:var(--muted);font-size:12px}.install-toast button{padding:8px 13px;border:0;border-radius:10px;background:var(--accent);color:white;cursor:pointer}.install-toast button:last-child{padding:7px;background:transparent;color:var(--muted)}
dialog{width:min(490px,calc(100% - 28px));padding:0;border:0;border-radius:22px;background:var(--panel);color:var(--text);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(20,18,36,.42);backdrop-filter:blur(4px)}.dialog-card{padding:24px}.dialog-heading{display:flex;justify-content:space-between;align-items:start}.dialog-heading h2{margin:5px 0 20px;font:800 25px Manrope}.dialog-heading button{border:0;background:transparent;font-size:24px;color:var(--muted);cursor:pointer}.eyebrow{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.13em}.dialog-card label{display:flex;flex-direction:column;gap:7px;margin-top:14px;font-size:12px;font-weight:700}.dialog-card input,.dialog-card textarea{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-soft);color:var(--text);outline:0}.dialog-card textarea{min-height:90px;resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.dialog-actions button{padding:10px 16px;border-radius:11px;border:0;cursor:pointer}.secondary{background:var(--panel-soft)}.primary{color:white;background:var(--accent)}
body.dark{--bg:#121218;--panel:#1b1b22;--panel-soft:#16161d;--text:#f5f4fa;--muted:#9998a6;--line:#2d2c37;--accent-soft:#292546;--received:#292932;--shadow:0 24px 80px rgba(0,0,0,.4)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes bounce{50%{transform:translateY(-3px)}}
@media(min-width:1441px){.app-shell{height:calc(100dvh - 36px);margin:18px auto;border-radius:24px;box-shadow:var(--shadow)}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 12% 0 0;transform:translateX(-105%);transition:.24s;box-shadow:var(--shadow)}.sidebar.open{transform:none}.mobile-close,.menu-button{display:grid}.chat-header{height:72px;padding:0 14px}.header-actions .icon-button:first-child{display:none}.messages{padding:24px 14px 8px}.composer{margin:10px 10px calc(10px + env(safe-area-inset-bottom))}.bubble-wrap{max-width:82%}.install-toast{left:12px;right:12px;bottom:12px}.search-box kbd{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}