:root{--ink:#18251f;--muted:#63736a;--line:#e5eae7;--green:#168348;--green-dark:#116b3b;--soft:#edf6ef;--page:#f7f9f8;--out:#e1f2e5;--incoming:#f1f3f2;--error:#ad332c;--focus:#168348;--radius:8px;font-family:Arial,"Segoe UI",sans-serif;color:var(--ink);font-size:14px;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:#fff}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus)}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}a{color:var(--green);text-decoration:none;text-underline-offset:3px}a:hover{text-decoration:underline}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}::selection{background:#c7e7cf}input,textarea{caret-color:var(--green)}*{scrollbar-width:thin;scrollbar-color:#b8c5bd transparent}
.app-shell{height:100dvh;display:flex;overflow:hidden}.sidebar{width:218px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:26px 12px 18px;background:#fff}.brand{display:flex;align-items:center;gap:9px;padding:0 8px;color:var(--ink);font-weight:650;font-size:16px;white-space:nowrap}.brand-mark{width:29px;height:29px;display:grid;place-items:center;color:white;background:var(--green);border-radius:8px;font-size:23px;font-weight:600}.space-name{display:block;color:var(--muted);font-size:12px;margin-top:5px}.sidebar>.space-name{padding:7px 8px 28px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav>a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:6px;color:#46554b;text-decoration:none;font-weight:500}.sidebar nav>a:hover{background:#f3f6f4}.sidebar nav>a.active{background:var(--soft);color:var(--green)}.nav-count{margin-left:auto;font-size:12px;color:var(--muted)}.sidebar-footer{margin-top:auto;padding:16px 9px 0;color:var(--muted);font-size:11px;line-height:1.8}.local-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px}.version{display:block;color:#7c8881;margin-left:13px}.workspace{flex:1;min-width:0;position:relative}.page-view{height:100%;overflow:auto;padding:40px clamp(24px,4vw,64px);background:var(--page)}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:32px}.page-heading h1{font-size:28px;letter-spacing:-.6px;font-weight:600;margin:0 0 10px}.page-heading p{margin:0;color:var(--muted);line-height:1.6;max-width:60ch}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:10px 16px;border-radius:6px;white-space:nowrap;font-weight:500;text-decoration:none;line-height:1.3}.primary{background:var(--green);border:1px solid var(--green);color:#fff}.primary:hover{background:var(--green-dark);border-color:var(--green-dark);text-decoration:none}.secondary{border:1px solid #d6dfd8;background:#fff;color:#3a5042}.secondary:hover{background:#f2f7f3;text-decoration:none}.primary svg{width:17px;height:17px}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:transparent;color:#6a7870;border-radius:6px;flex:none;text-decoration:none}.icon-button:hover{background:#eaf0ec;text-decoration:none}.icon-button svg{width:19px;height:19px}
.connection-table{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}.connection-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr) auto;align-items:center;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line)}.connection-row:last-child{border-bottom:0}.connection-identity{display:flex;gap:13px;align-items:center;min-width:0}.connection-identity h2{font-size:14px;font-weight:600;margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.connection-identity p{font-size:12px;color:var(--muted);margin:0}.transport-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:17px;color:#fff;font-weight:600;flex:none}.transport-mark.whatsapp{background:#36ad60}.transport-mark.telegram{background:#2c9dcc}.transport-mark.max{background:#7153c8}.status-pill{display:inline-flex;align-items:center;gap:7px;color:#52665a;font-size:12px}.status-pill:before{content:"";width:6px;height:6px;flex:none;background:#9ca9a1;border-radius:50%}.status-pill.connected{color:var(--green)}.status-pill.connected:before{background:#23a257}.status-pill.error,.status-pill.needs_login{color:var(--error)}.status-pill.error:before,.status-pill.needs_login:before{background:var(--error)}.connection-actions{display:flex;align-items:center;gap:8px}.text-button{background:none;border:0;color:var(--muted);padding:9px;border-radius:5px;font-size:12px}.text-button:hover{background:#f1f4f2;color:var(--ink)}.page-note{display:flex;gap:9px;margin-top:22px;align-items:flex-start;color:var(--muted);max-width:66ch;font-size:12px;line-height:1.6}.page-note svg{width:17px;height:17px;margin-top:1px;color:var(--green)}.page-note p{margin:0}.onboarding{padding:80px 24px 65px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px}.channel-orbit{display:flex;justify-content:center;gap:12px;margin-bottom:26px}.channel-orbit .transport-mark{width:50px;height:50px;font-size:23px}.onboarding h2{font-size:23px;letter-spacing:-.35px;margin:0 0 12px;font-weight:550}.onboarding p{color:var(--muted);line-height:1.7;max-width:44ch;margin:0 auto 25px}.onboarding-footnote{margin-top:24px;font-size:12px;color:#738078}
body[data-view="chats"] .sidebar{display:none}.inbox{height:100%;display:flex}.chat-column{width:340px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fff;min-width:0}.chat-column-head{height:83px;flex:none;padding:20px 18px 12px;display:flex;align-items:center;justify-content:space-between;gap:14px}.inbox-brand{color:var(--ink);font-size:17px;font-weight:600;letter-spacing:-.2px}.inbox-brand:hover{text-decoration:none;color:var(--green)}.search-field{display:flex;gap:9px;align-items:center;background:#f2f5f3;margin:8px 14px 12px;padding:0 11px;border-radius:6px;color:#7a877e;height:38px}.search-field svg{width:17px;height:17px}.search-field input{min-width:0;flex:1;background:none;border:0;height:100%;outline:none;color:var(--ink);font-size:13px}.search-field:focus-within{box-shadow:0 0 0 2px #9dcead}.search-field input::placeholder{color:#76857b}.filters{display:flex;gap:4px;padding:0 14px 13px;border-bottom:1px solid var(--line)}.filters button{padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:11px;white-space:nowrap}.filters button:hover{background:#f0f5f1}.filters button.selected{background:#e8f3eb;color:#196f3b;font-weight:600}.chat-list{overflow:auto;flex:1}.chat-item{width:100%;display:flex;gap:12px;text-align:left;border:0;border-bottom:1px solid #f0f2f1;background:#fff;padding:16px 14px;min-height:78px;color:var(--ink)}.chat-item:hover{background:#f6f8f7}.chat-item.selected{background:#eaf1ed}.avatar{position:relative;width:43px;height:43px;flex:none;display:grid;place-items:center;background:#e4e9e6;color:#4c6656;border-radius:50%;font-size:15px;font-weight:500}.avatar .transport-badge{position:absolute;right:-3px;bottom:-1px;width:18px;height:18px;font-size:9px;border:2px solid white}.chat-item-text{min-width:0;flex:1;padding-top:1px}.chat-item-top{display:flex;gap:9px;justify-content:space-between;align-items:center;margin-bottom:7px}.chat-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:14px}.chat-time{color:#77857b;font-size:10px;flex:none;font-variant-numeric:tabular-nums}.chat-item-bottom{display:flex;align-items:center;gap:8px}.chat-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;color:#738178}.unread{min-width:18px;height:18px;padding:1px 5px;background:var(--green);color:white;border-radius:12px;font-size:10px;display:grid;place-items:center;font-variant-numeric:tabular-nums}.chat-column-foot{padding:13px 16px;font-size:11px;display:flex;justify-content:space-between;gap:10px;color:var(--muted);border-top:1px solid var(--line)}.empty-list{padding:35px 22px;color:var(--muted);text-align:center;font-size:13px;line-height:1.7}.conversation{flex:1;min-width:0;background:#fff;position:relative;display:flex;flex-direction:column}.no-chat{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:32px}.no-chat-symbol{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:#f0f6f2;color:#6b9b7b;margin-bottom:25px}.no-chat-symbol svg{width:36px;height:36px;stroke-width:1.2}.no-chat h2{font-size:25px;letter-spacing:-.5px;font-weight:500;margin:0 0 12px}.no-chat p{font-size:14px;line-height:1.7;color:var(--muted);max-width:37ch;margin:0 0 24px}.no-chat>span{font-size:11px;color:#839087;margin-top:45px}.active-chat{display:flex;flex-direction:column;height:100%;min-height:0}.conversation-head{height:76px;flex:none;display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line)}.conversation-head>.avatar{width:39px;height:39px;font-size:14px}.conversation-person{min-width:0;flex:1}.conversation-person h2{font-size:15px;font-weight:550;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-person p{font-size:11px;color:var(--muted);margin:0}.message-list{flex:1;overflow:auto;padding:24px clamp(20px,6vw,110px) 28px;display:flex;flex-direction:column;gap:8px;min-height:0}.date-separator{font-size:11px;color:#718075;border:1px solid #dde5df;align-self:center;border-radius:12px;padding:5px 12px;margin:12px 0 18px;background:#fff}.message-bubble{max-width:min(78%,600px);padding:11px 13px 8px;background:var(--incoming);border-radius:2px 9px 9px 9px;align-self:flex-start;min-width:110px}.message-bubble.outgoing{align-self:flex-end;background:var(--out);border-radius:9px 2px 9px 9px}.message-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;margin:0}.message-meta{display:flex;gap:6px;justify-content:flex-end;align-items:center;color:#6e8073;font-size:10px;margin-top:7px;font-variant-numeric:tabular-nums}.message-meta svg{width:12px;height:12px}.message-bubble.unknown{outline:1px solid #dfbc88}.message-state-unknown{color:#875f22}.composer{padding:14px 24px 11px;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:8px 13px;border-top:1px solid var(--line);background:#fff}.composer textarea{border:1px solid #dce4df;border-radius:7px;padding:12px 14px;resize:none;min-height:44px;max-height:140px;overflow:auto;line-height:1.5;color:var(--ink)}.composer textarea::placeholder{color:#7e8b82}.send-button{width:42px;height:44px;border:0;background:var(--green);color:#fff;border-radius:7px;display:grid;place-items:center;align-self:end}.send-button:hover{background:var(--green-dark)}.send-button svg{width:21px;height:21px}.composer-note{grid-column:1/-1;font-size:10px;color:#819086;margin-left:2px}.channel-notice{padding:10px 24px;background:#faf4e8;color:#806125;font-size:12px;line-height:1.5;border-bottom:1px solid #f0e6cf}.send-error{padding:10px 24px;background:#fff1ed;color:#923d28;font-size:12px;line-height:1.5}.mobile-back{display:none}.history-note{font-size:11px;color:#7e8b82;align-self:center;line-height:1.5;text-align:center;padding:6px 0 16px;max-width:55ch}
.settings-list{max-width:760px;background:#fff;border:1px solid var(--line);border-radius:8px}.settings-list>div{padding:24px 28px;border-bottom:1px solid var(--line)}.settings-list>div:last-child{border:0}.settings-list h2{margin:0 0 9px;font-size:15px;font-weight:550}.settings-list p{margin:0;color:var(--muted);line-height:1.7;max-width:65ch;font-size:13px}.settings-list .secondary{margin-top:16px;font-size:12px}.tag{display:inline-block;background:#edf5ef;color:#4a7155;border-radius:5px;font-size:11px;padding:4px 8px;margin-top:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#203c2a;color:#fff;padding:12px 18px;border-radius:7px;font-size:13px;z-index:30;box-shadow:0 5px 24px #10211824;max-width:90vw;line-height:1.5}.toast.error{background:#8b392d}dialog{border:1px solid #dde5df;border-radius:12px;padding:26px;width:min(440px,calc(100vw - 28px));color:var(--ink);box-shadow:0 15px 70px #14281b2b}dialog::backdrop{background:#12281d57}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-heading h2{font-size:20px;letter-spacing:-.3px;font-weight:550;margin:0}.dialog-description{color:var(--muted);font-size:13px;line-height:1.7;margin:14px 0 20px}.transport-options{display:flex;gap:8px;margin-bottom:24px}.transport-options>label{flex:1;min-width:0;cursor:pointer}.transport-options input{position:absolute;opacity:0;pointer-events:none}.transport-options>label>span{border:1px solid #dce5df;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 5px;font-size:12px}.transport-options input:checked+span{border-color:var(--green);background:#f0f8f2;box-shadow:0 0 0 1px var(--green)}.transport-options input:focus-visible+span{outline:2px solid var(--green);outline-offset:3px}.field-label{display:block;font-size:12px;font-weight:500;margin-bottom:8px}.text-field{padding:11px 12px;width:100%;border:1px solid #d5e0d8;border-radius:6px;color:var(--ink);background:#fff}.full-width{width:100%;margin-top:20px}.form-error{font-size:12px;color:var(--error);line-height:1.5}.pair-status{font-size:13px;color:var(--muted);line-height:1.5;margin-top:18px}#pair-qr{display:block;width:300px;max-width:100%;height:auto;margin:8px auto}#pair-help{margin-bottom:4px}
@media(min-width:1700px){.chat-column{width:360px}.message-list{padding-left:clamp(40px,10vw,220px);padding-right:clamp(40px,10vw,220px)}}
@media(max-width:950px){.sidebar{width:182px;padding-left:8px;padding-right:8px}.brand{font-size:14px}.page-view{padding:28px 22px}.connection-row{grid-template-columns:minmax(130px,1fr) auto;gap:12px;padding:19px 18px}.connection-actions{grid-column:1/-1;margin-left:51px}.connection-row>.status-pill{justify-self:end}.chat-column{width:305px}.filters{gap:1px}.filters button{padding:6px 8px}.message-list{padding:20px}.message-bubble{max-width:88%}.conversation-head{padding:12px 18px}}
@media(max-width:640px){.sidebar{width:100%;height:64px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;padding:8px 10px;gap:8px}.brand{padding:0 5px}.brand>span:last-child,.sidebar>.space-name,.sidebar-footer{display:none}.sidebar nav{flex:1;flex-direction:row;justify-content:flex-end;gap:2px}.sidebar nav>a{gap:5px;padding:0 9px;font-size:12px;min-height:40px}.sidebar nav svg{width:17px;height:17px}.sidebar .nav-count{display:none}.app-shell{flex-direction:column}.workspace{min-height:0}.page-view{padding:25px 16px}.page-heading{gap:13px;flex-direction:column;margin-bottom:23px}.page-heading h1{font-size:26px}.page-heading p{font-size:13px}.connection-row{padding:18px 14px}.connection-actions{flex-wrap:wrap;gap:5px}.connection-actions .secondary{font-size:12px;padding:8px 12px;min-height:36px}.onboarding{padding:42px 18px}.onboarding h2{font-size:21px}.onboarding p{font-size:13px}.onboarding .primary{font-size:13px}.chat-column{width:100%;border-right:0}.conversation{display:none}.inbox.chat-open .chat-column{display:none}.inbox.chat-open .conversation{display:flex}.mobile-back{display:inline-flex}.conversation-head{height:70px;padding:10px 12px;gap:8px}.conversation-head>.avatar{width:35px;height:35px}.conversation-person h2{font-size:14px}.conversation-person p{font-size:10px}.conversation-head>.icon-button{width:31px}.message-list{padding:15px 13px}.message-bubble{max-width:88%;padding:10px 11px 7px}.composer{padding:12px;gap:7px}.composer-note{font-size:9px}.channel-notice,.send-error{padding:9px 14px}.settings-list>div{padding:21px}.no-chat h2{font-size:23px}.transport-options>label>span{padding:12px 3px}.page-note{font-size:11px}}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:appear 140ms ease-out}@keyframes appear{from{opacity:.7;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}
:root{--muted:#5c6e61}.chat-time,.chat-preview,.composer-note,.history-note,.message-meta,.onboarding-footnote,.no-chat>span,.version{color:var(--muted)}.composer textarea::placeholder,.search-field input::placeholder{color:var(--muted)}.transport-mark.whatsapp{background:#218448}.transport-mark.telegram{background:#1478a5}
.connection-actions{flex-wrap:wrap;justify-content:flex-end}.inbox-tools{padding:11px 14px 9px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;border-bottom:1px solid var(--line);flex:none}.compact-select{font:inherit;font-size:12px;min-width:0;width:100%;border:1px solid #d6dfd8;background:white;color:var(--ink);padding:8px 7px;border-radius:5px;min-height:34px;overflow:hidden;text-overflow:ellipsis}.filter-toggle{font-size:11px;padding:7px 8px;border:1px solid #d6dfd8;border-radius:5px;background:white;color:var(--muted)}.filter-toggle[aria-pressed=true]{background:var(--soft);color:var(--green-dark);border-color:#92b99c}.folder-picker{display:flex;align-items:center;gap:6px;grid-column:1/-1;min-width:0}.folder-picker>svg{width:17px;color:var(--muted)}.folder-picker>.compact-select{flex:1}.folder-picker>.icon-button{width:30px;height:32px}.filters{padding-bottom:9px}.read-notice{padding:8px 24px;background:var(--soft);color:#3f664a;font-size:12px;line-height:1.5;flex:none}.organize-dialog{width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto}.choice-toolbar{display:flex;gap:6px;align-items:center;margin:12px 0}.choice-toolbar .text-field{flex:1;min-width:0}.choice-toolbar .text-button{flex:none}.choice-list{max-height:260px;overflow:auto;margin:12px 0 0;border:1px solid var(--line);border-radius:6px}.choice-list:empty{display:none}.choice-row{display:flex;gap:12px;align-items:center;padding:12px;min-height:48px;border-bottom:1px solid var(--line);cursor:pointer}.choice-row:last-child{border:0}.choice-row:hover{background:var(--soft)}.choice-row>input{width:17px;height:17px;accent-color:var(--green);flex:none}.choice-text{min-width:0;display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}.choice-text small{font-size:11px;color:var(--muted)}.choice-count{font-size:12px;color:var(--muted);line-height:1.6}.folder-search-label{margin-top:20px}.dialog-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}select{font-family:inherit}select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media(max-width:640px){.organize-dialog{padding:20px}.choice-list{max-height:35dvh}.choice-toolbar{flex-wrap:wrap}.choice-toolbar .text-button{margin-left:auto}.connection-actions{justify-content:flex-start}.read-notice{padding:9px 14px}.conversation-head{gap:6px}}
/* Attachments 0.3 */
.attach-button{width:42px;height:44px;border:1px solid #dce4df;background:#fff;color:var(--muted);border-radius:7px;display:grid;place-items:center;align-self:end}
.attach-button:hover:not(:disabled){color:var(--green);border-color:#b9d3c1}
.attach-button svg,.file-card svg,.tray-item>svg,.media-missing svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.attachment-tray{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.tray-item{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--page);max-width:260px;color:var(--muted)}
.tray-item img{width:36px;height:36px;object-fit:cover;border-radius:4px;flex:none}
.tray-text{display:flex;flex-direction:column;min-width:0}
.tray-name{font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-size{font-size:11px}
.tray-remove{width:28px;height:28px;border:0;background:transparent;color:var(--muted);border-radius:5px;display:grid;place-items:center;flex:none}
.tray-remove:hover:not(:disabled){background:#e6ece8;color:var(--ink)}
.tray-remove svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.message-bubble.has-media{display:flex;flex-direction:column;gap:7px}
.message-bubble.has-media .message-meta{margin-top:0}
.media-thumb{display:block;padding:0;border:0;background:#e3e8e5;border-radius:6px;overflow:hidden;max-width:min(100%,360px);cursor:zoom-in}
.media-thumb img{display:block;max-width:100%;max-height:360px;height:auto;object-fit:contain}
.media-thumb.sticker{background:transparent;cursor:default;max-width:160px}
.media-thumb.sticker img{max-height:160px}
.media-player{display:flex;flex-direction:column;gap:5px;min-width:min(280px,100%)}
.media-player video{width:min(360px,62vw);max-width:100%;height:auto;background:#111;border-radius:6px}
.media-player audio{width:min(300px,62vw);height:40px}
.media-caption{font-size:11px;color:var(--muted)}
.media-save{font-size:11px;color:var(--green-dark);align-self:flex-start}
.file-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.65);border:1px solid rgba(24,37,31,.08);color:var(--ink);text-decoration:none;min-width:min(240px,100%)}
.file-card:hover{border-color:#b9d3c1}
.file-card svg{color:var(--green)}
.file-card-text{display:flex;flex-direction:column;min-width:0}
.file-card-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card-meta{font-size:11px;color:var(--muted)}
.media-missing{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:0;line-height:1.4}
.active-chat.dropping .message-list{outline:2px dashed var(--green);outline-offset:-10px;background:var(--soft)}
.media-dialog{max-width:min(92vw,1100px);padding:16px}
.media-dialog .dialog-heading{gap:6px}
.media-dialog .dialog-heading h2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#media-image{display:block;max-width:100%;max-height:78vh;margin:8px auto 0;border-radius:6px}
@media(max-width:640px){.attach-button{width:38px}.composer{grid-template-columns:38px minmax(0,1fr) 42px}.tray-item{max-width:100%}}
/* Search, delivery, backups 0.4 */
.list-section{padding:12px 16px 6px;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;background:#fafbfa;border-bottom:1px solid #f0f2f1}
.chat-preview mark{background:#fff0b8;color:inherit;border-radius:2px;padding:0 1px}
.message-bubble.found{box-shadow:0 0 0 2px #e7c34a}
.anchor-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 24px;background:#fff8e0;color:#6d5517;font-size:12px;line-height:1.5;border-bottom:1px solid #f0e3b4;flex:none}
.anchor-bar .secondary{min-height:32px;padding:6px 12px;font-size:12px}
.delivery{display:inline-flex}
.delivery svg{width:14px;height:14px}
.delivery.read{color:var(--green)}
.backup-status{font-size:12px;color:var(--ink)}
@media(max-width:640px){.anchor-bar{padding:8px 14px}}
/* Login and home-network access 0.5 */
.login-view{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:var(--page)}
body[data-locked="true"] .app-shell{visibility:hidden}
.login-card{width:min(360px,100%);background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px 28px;display:flex;flex-direction:column;gap:8px}
.login-card .brand-mark{width:40px;height:40px;display:grid;place-items:center;color:#fff;background:var(--green);border-radius:9px;font-size:26px;margin-bottom:8px}
.login-card h1{font-size:22px;margin:0;font-weight:600;letter-spacing:-.3px}
.login-card>p{margin:0 0 10px;color:var(--muted);line-height:1.5}
.login-card .primary{margin-top:8px}
.login-card .login-note{font-size:11px;margin:10px 0 0}
.access-form{display:flex;flex-direction:column;gap:6px;max-width:360px;margin:14px 0 18px}
.access-form .primary{align-self:flex-start;margin-top:6px}
.lan-block{border-top:1px solid var(--line);padding-top:16px;max-width:620px}
.lan-block>p{margin:0 0 12px}
.lan-urls{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.lan-url{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.lan-url code{font-size:13px;user-select:all}
.access-actions{display:flex;gap:6px;margin-top:12px}
/* Visual refresh 0.5.1: calmer conversation canvas, clearer hierarchy, softer controls */
:root{--canvas:#eef2ee;--out:#d9f2dc;--incoming:#fff}
.chat-column{background:#fff}
.chat-item{border-bottom:0;padding:12px 14px;min-height:72px;border-radius:10px;margin:2px 8px;width:calc(100% - 16px);gap:12px;transition:background .12s}
.chat-item:hover{background:#f3f6f4}
.chat-item.selected{background:#e6f2ea}
.chat-item.has-unread .chat-item-name{font-weight:650}
.chat-item.has-unread .chat-time{color:var(--green);font-weight:600}
.chat-item.has-unread .chat-preview{color:#3b4a41}
.avatar{width:46px;height:46px;font-weight:600;font-size:15px;letter-spacing:.3px}
.unread{background:var(--green);min-width:20px;height:20px;font-size:11px;font-weight:600}
.filters{gap:6px}
.filters button{border-radius:14px;padding:6px 12px;background:#f2f5f3}
.filters button.selected{background:var(--green);color:#fff}
.search-field{border-radius:10px;height:40px}
.conversation-head{background:#fff;box-shadow:0 1px 0 var(--line);border-bottom:0;z-index:1}
.conversation-person h2{font-size:16px;font-weight:600}
.message-list{background:var(--canvas);gap:4px;padding-left:max(24px,calc((100% - 860px)/2));padding-right:max(24px,calc((100% - 860px)/2))}
.message-bubble{background:var(--incoming);border-radius:4px 14px 14px 14px;box-shadow:0 1px 1.5px rgba(16,40,26,.10);padding:8px 12px 6px;margin-top:4px}
.message-bubble.outgoing{background:var(--out);border-radius:14px 4px 14px 14px}
.message-bubble+.message-bubble.outgoing,.message-bubble.outgoing+.message-bubble:not(.outgoing){margin-top:10px}
.message-text{font-size:14.5px;line-height:1.45}
.message-meta{margin-top:3px;font-size:11px;color:#6f8276}
.date-separator{position:sticky;top:6px;z-index:2;background:rgba(255,255,255,.95);border:0;box-shadow:0 1px 2px rgba(16,40,26,.12);font-weight:500;color:#4f6357;margin:14px 0 10px}
.history-note{color:#7d8c82;font-size:11px}
.unread-separator{align-self:stretch;text-align:center;margin:12px 0 6px;padding:6px 0;border-radius:8px;background:rgba(22,131,72,.10);color:#196f3b;font-size:12px;font-weight:600;letter-spacing:.2px}
.composer{background:#fff;border-top:1px solid var(--line);padding:10px max(16px,calc((100% - 900px)/2)) 8px;align-items:end}
.composer textarea{border:1px solid transparent;background:#f1f4f2;border-radius:22px;padding:11px 16px}
.composer textarea:focus{background:#fff;border-color:#b9d3c1}
.attach-button{border:0;background:transparent;border-radius:50%}
.attach-button:hover:not(:disabled){background:#eef3ef}
.send-button{border-radius:50%;width:44px}
.composer-note{text-align:center;margin:0}
.file-card{background:rgba(22,131,72,.06);border-color:transparent}
.message-bubble:not(.outgoing) .file-card{background:#f3f6f4}
@media(max-width:640px){.chat-item{margin:2px 6px;width:calc(100% - 12px)}.message-list{padding-left:10px;padding-right:10px}.composer-note{display:none}}
.delivery svg{width:16px;height:16px}
.delivery.read{color:#1c8ad6}
/* Message actions 0.6 */
.message-bubble{position:relative}
.message-actions-button{position:absolute;top:4px;right:-34px;width:28px;height:28px;border:0;border-radius:50%;background:#fff;color:var(--muted);display:grid;place-items:center;box-shadow:0 1px 2px rgba(16,40,26,.15);opacity:0;transition:opacity .12s}
.message-bubble.outgoing .message-actions-button{right:auto;left:-34px}
.message-bubble:hover .message-actions-button,.message-actions-button:focus-visible,.message-actions-button[aria-expanded=true]{opacity:1}
.message-actions-button svg{width:16px;height:16px;fill:currentColor;stroke:none}
@media(hover:none){.message-actions-button{opacity:.55;width:26px;height:26px;top:auto;bottom:4px}}
.message-menu{position:fixed;z-index:40;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 32px rgba(16,40,26,.18);padding:6px;display:flex;flex-direction:column}
.menu-reactions{display:flex;gap:2px;padding:4px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-reaction{width:34px;height:34px;border:0;border-radius:50%;background:transparent;font-size:20px;line-height:1;display:grid;place-items:center}
.menu-reaction:hover{background:#eef3ef;transform:scale(1.12)}
.menu-reaction.mine{background:#dcefe2}
.menu-item{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:8px;font-size:13px;color:var(--ink)}
.menu-item:hover,.menu-item:focus-visible{background:#f1f5f2}
.menu-item.danger{color:var(--error)}
.quote{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;border-left:3px solid var(--green);background:rgba(22,131,72,.07);border-radius:6px;padding:5px 9px;margin:2px 0 6px;cursor:pointer;color:var(--ink);max-width:420px}
.message-bubble.outgoing .quote{background:rgba(255,255,255,.55)}
.quote-author{font-size:12px;font-weight:600;color:var(--green-dark)}
.quote-text{font-size:12.5px;color:#4b5c51;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forwarded-label{font-size:11.5px;font-style:italic;color:#5f7367;margin-bottom:3px}
.edited-label{font-style:italic}
.deleted-text{font-style:italic;color:#7d8c82}
.message-bubble.deleted{background:rgba(255,255,255,.6);box-shadow:none;border:1px dashed #cfd8d2}
.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.reaction-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid #dbe4de;background:#fff;border-radius:12px;padding:2px 8px;font-size:13px;line-height:1.4}
.reaction-chip.mine{border-color:#8cc29f;background:#e6f4ea}
.reaction-count{font-size:11px;color:#4d6355;font-variant-numeric:tabular-nums}
.message-bubble.flash{animation:flash 1.5s ease-out}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px #e7c34a}100%{box-shadow:0 1px 1.5px rgba(16,40,26,.10)}}
.compose-context{grid-column:1/-1;display:flex;align-items:center;gap:10px;border-left:3px solid var(--green);background:#f3f7f4;border-radius:8px;padding:6px 6px 6px 12px}
.compose-context-body{display:flex;flex-direction:column;min-width:0;flex:1}
.compose-context-body strong{font-size:12px;color:var(--green-dark)}
.compose-context-body span{font-size:12.5px;color:#4b5c51;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.forward-row{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left}
#forward-search{margin-bottom:4px}
@media(max-width:640px){.message-actions-button{right:-30px}.message-bubble.outgoing .message-actions-button{left:-30px}}
/* 0.7: voice, albums, new chat, contact card */
.head-actions{display:flex;align-items:center;gap:2px}
.mic-button{grid-column:3;grid-row:auto}
.composer[data-recording="true"]>:is(.attach-button,textarea,.send-button,.attachment-tray,.album-toggle,.compose-context){display:none!important}
.recorder{grid-column:1/-1;display:flex;align-items:center;min-height:44px}
.recorder-live,.recorder-preview{display:flex;align-items:center;gap:12px;width:100%;flex-wrap:wrap}
.recorder-live>time{font-variant-numeric:tabular-nums;font-weight:600;margin-right:auto}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#d43c2f;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.rec-dot{animation:none}}
.recorder-preview audio{flex:1;min-width:180px;height:40px}
.recorder-length{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.recorder .primary{min-height:36px;padding:8px 16px}
.album-toggle{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#3b4a41;cursor:pointer}
.album-toggle input{width:16px;height:16px;accent-color:var(--green)}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:8px;overflow:hidden;width:min(360px,62vw)}
.media-grid.count-3>:first-child{grid-column:1/-1}
.media-grid .media-thumb{max-width:none;border-radius:0}
.media-grid .media-thumb img{width:100%!important;height:150px;max-height:none;object-fit:cover;aspect-ratio:auto!important}
.media-grid.count-3>:first-child img{height:200px}
.media-grid .media-player video{width:100%!important;height:150px;object-fit:cover;border-radius:0}
.media-grid .media-player{min-width:0}
.media-grid .media-caption,.media-grid .media-save{display:none}
.conversation-person{cursor:pointer;border-radius:8px;padding:2px 6px;margin-left:-6px}
.conversation-person:hover{background:#f2f5f3}
.new-chat-label{margin-top:16px}
.profile-dialog{width:min(420px,calc(100vw - 28px))}
.profile-top{display:flex;align-items:center;gap:16px;margin:18px 0 14px}
.profile-photo{width:84px;height:84px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.profile-photo .avatar{width:84px;height:84px;font-size:28px}
.profile-photo .transport-badge{display:none}
.profile-top h3{margin:0 0 6px;font-size:18px;font-weight:600}
.profile-top p{margin:0;color:var(--muted);font-size:12.5px}
.profile-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.profile-row{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-bottom:1px solid var(--line)}
.profile-label{font-size:11.5px;color:var(--muted)}
.profile-row>:last-child{font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.profile-related{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.profile-related h3{font-size:13px;margin:0;font-weight:600}
.profile-related .secondary{margin:0}
/* 0.8: notifications, mute, media, diagnostics */
.check-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:10px;cursor:pointer}
.check-row input{width:16px;height:16px;accent-color:var(--green)}
.settings-list .check-row+p{margin-top:12px}
.inline-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.inline-controls .secondary{margin-top:0}
.inline-controls .field-label{margin:0}
.inline-controls .compact-select{width:auto;min-width:110px}
.usage-track{height:8px;border-radius:4px;background:#e6ece8;overflow:hidden;margin:14px 0 8px;max-width:420px}
.usage-track span{display:block;height:100%;width:0;background:var(--green);border-radius:4px}
.diag-table{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.diag-row{border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.diag-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.diag-head strong{font-size:13.5px}
.diag-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;font-size:12.5px}
.diag-facts dt{color:var(--muted)}
.diag-facts dd{margin:0;font-variant-numeric:tabular-nums}
.diag-advice{margin:10px 0 0!important;color:#806125!important;background:#faf4e8;border-radius:6px;padding:6px 10px;font-size:12px!important}
.chat-item.muted .unread{background:#a3b1a8}
.chat-item.muted .chat-item-name::after{content:"";display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px;background:#9aa8a0;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 9.5-4.9M18 11v5l2 2H8M10 21h4M3 3l18 18'/%3E%3C/svg%3E") center/contain no-repeat}
#chat-mute.active{color:var(--muted)}
.mute-options{display:flex;flex-direction:column;gap:8px}
.mute-options .primary{margin-top:6px}
@media(max-width:640px){.diag-facts{grid-template-columns:1fr}.diag-facts dd{margin-bottom:4px}}
/* 1.0: API keys and webhooks */
.int-heading{font-size:13px;font-weight:600;margin:18px 0 8px}
.int-list{display:flex;flex-direction:column;gap:6px}
.int-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.int-row.revoked{opacity:.55}
.int-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.int-text strong{font-size:13px;overflow-wrap:anywhere}
.int-text span{font-size:11.5px;color:var(--muted)}
.int-input{max-width:280px}
#webhook-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-width:520px}
#webhook-form .secondary{align-self:flex-start;margin-top:4px}
.webhook-events .check-row{margin-top:4px}
.secret-reveal{border:1px solid #e7c34a;background:#fff8e0;border-radius:8px;padding:12px;margin:12px 0}
.secret-reveal p{color:#6d5517!important;margin:0 0 8px!important}
.secret-reveal code{display:block;font-size:13px;word-break:break-all;background:#fff;border-radius:6px;padding:8px;user-select:all}

/* Messenger logos instead of letters */
.transport-mark svg{width:60%;height:60%;display:block}
.avatar .transport-badge{width:20px;height:20px}
.avatar .transport-badge svg{width:13px;height:13px}
button[data-filter] .transport-mark{display:inline-grid;width:16px;height:16px;margin-right:5px;vertical-align:-3px;box-shadow:0 0 0 1.5px #fff}
button[data-filter] .transport-mark svg{width:11px;height:11px}
.filters{gap:4px}
.filters button[data-filter]:has(.transport-mark){padding:5px 9px 5px 5px;display:inline-flex;align-items:center}
button[data-filter] .transport-mark{vertical-align:0;margin-right:4px}
.avatar .transport-badge{width:22px;height:22px;right:-4px;bottom:-3px}
.avatar .transport-badge svg{width:14px;height:14px}
.login-hint{margin:-2px 0 6px!important}
#team-card form,#companies-card form{margin-top:10px}
#team-reveal-value{white-space:pre-wrap}