:root{color-scheme:light;--nav:#162238;--nav-raised:#21314b;--ink:#18263c;--muted:#65738a;--line:#e5eaf2;--accent:#2f7df6;--surface:#fff;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:#f4f6fa;color:var(--ink)}button,input,select{font:inherit}button,summary,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;border-radius:8px;padding:9px 14px;background:#eaf1fd;color:#205cad;font-weight:600}button:hover{background:#dce9fd}button:disabled{opacity:.55;cursor:wait}a{color:#2869ce;text-underline-offset:3px}button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #71a8fb;outline-offset:3px}[hidden]{display:none!important}
main{max-width:590px;margin:9vh auto;padding:36px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px #17243c0a}h1{font-size:25px;line-height:1.3}h2{font-size:19px;line-height:1.4}main p{color:var(--muted)}main button{background:var(--accent);color:white}main button:hover{background:#2568d0}main #registerPasskey{display:block;width:100%;padding:13px;margin:24px 0;font-size:15px}label{display:block;font-weight:600;font-size:13px;color:var(--muted);margin:16px 0 6px}input,select{display:block;width:100%;padding:11px 12px;border:1px solid #cbd5e2;border-radius:8px;color:var(--ink);background:white;margin-top:6px}input[type=checkbox]{display:inline-block;width:auto;margin:0 0 0 10px;accent-color:var(--accent)}input[readonly]{font-family:monospace;font-size:13px}main form button{margin-top:14px}
.collaboration{display:grid;grid-template-columns:250px minmax(0,1fr);height:100dvh;overflow:hidden;background:var(--surface)}aside{display:flex;flex-direction:column;min-height:0;background:var(--nav);color:#edf2fb;padding:24px 14px 12px}.workspace-brand{display:flex;align-items:center;gap:9px;color:#f4f7fc;text-decoration:none;font-weight:750;font-size:18px;padding:0 12px}.brand-mark{display:grid;place-items:center;width:26px;height:28px;background:#377cf2;color:white;border-radius:8px;font-size:16px}.workspace-heading{padding:24px 12px 18px}.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a1b1cd;margin:0 0 5px}.workspace-heading h1{font-size:20px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.channel-section-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 6px 12px}.channel-section-heading h2{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a1b1cd}.icon-button{display:inline-grid;place-items:center;flex:0 0 auto;width:36px;height:36px;padding:7px;border:0;border-radius:8px;background:transparent;color:inherit;font-size:24px;font-weight:400;line-height:1}.icon-button svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}aside .icon-button{color:#bac9e1}aside button:hover,aside summary:hover{background:#ffffff10}#channels{flex:1;min-height:40px;overflow:auto;padding:0 0 20px;scrollbar-width:thin}#channels button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;color:#becbe0;padding:8px 13px;margin:2px 0;font-weight:450;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#channels button:hover{background:#ffffff0b;color:white}#channels button[aria-current=page]{background:#2b4673;color:#fff;font-weight:600}#channels .channel-symbol{font-size:19px;color:#91a8cc;width:18px;text-align:center}
.sidebar-footer{flex:0 0 auto;border-top:1px solid #ffffff12;padding-top:9px}.sidebar-footer #status{font-size:12px;color:#c0cde1;overflow-wrap:anywhere;margin:0;padding:0 10px}.sidebar-footer #status:empty{display:none}.sidebar-footer>a{display:block;padding:8px 12px;color:#a9caff;font-size:12px}.context-menu{position:relative}.context-menu>summary{list-style:none;cursor:pointer;border-radius:8px}.context-menu>summary::-webkit-details-marker{display:none}.workspace-settings>summary{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:13px;color:#b9c8e0}.menu-items{position:absolute;z-index:30;min-width:220px;padding:6px;background:white;color:var(--ink);border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 36px #15243f26}.menu-items button{display:block;width:100%;background:transparent;text-align:left;padding:10px 12px;color:var(--ink);font-size:13px;font-weight:450}.menu-items button:hover{background:#edf3fc}.sidebar-footer .menu-items{bottom:calc(100% + 8px);left:0}.user-menu>summary{display:flex;align-items:center;gap:10px;padding:10px}.profile-avatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:#365e97;color:#fff;font-size:13px;font-weight:700}.profile-label{display:flex;flex:1;min-width:0;flex-direction:column}.profile-label strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-label small{color:#a9bad5;font-size:11px}.profile-label small:before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:#8b9db9}.profile-label small.online:before{background:#45c58d}
.channel-content{display:flex;flex-direction:column;min-height:0;min-width:0;position:relative}.channel-header{height:76px;min-height:76px;display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line);background:white}.channel-heading{flex:1;min-width:0}.channel-heading h2{font-size:18px;font-weight:700;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.channel-heading p{font-size:12px;margin:3px 0 0;color:var(--muted)}.channel-actions{display:flex;align-items:center;gap:6px;color:#52617b}.channel-menu .menu-items{top:calc(100% + 8px);right:0}.mobile-nav{display:none}#channelFrame{border:0;display:block;width:100%;flex:1;min-height:0;background:white}.workspace-empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;color:var(--muted)}.workspace-empty h2{color:var(--ink);margin:18px 0 0;font-size:22px}.workspace-empty p{max-width:340px}.empty-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:#edf3fd;color:#5786ce;font-size:36px;font-weight:400}
dialog{width:min(530px,calc(100% - 32px));max-height:85dvh;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:25px;color:var(--ink);background:white;box-shadow:0 24px 70px #10213a35}dialog::backdrop{background:#0c1d365e;backdrop-filter:blur(2px)}dialog h2{margin:0 0 16px}dialog p{font-size:13px;color:var(--muted)}dialog>button{margin:10px 6px 0 0}dialog .dialog-close{float:right;font-size:20px;padding:4px 10px;margin:-8px -8px 0 0;background:transparent;color:var(--muted)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-heading h2{margin:0}.search-panel{width:min(680px,calc(100% - 32px))}.search-input{display:flex;gap:10px;align-items:center}.search-input input{margin:0;min-width:0}#results{margin-top:18px;overflow-wrap:anywhere}#results p{padding:10px 0;border-bottom:1px solid var(--line);white-space:pre-wrap}.person-row{display:flex;align-items:center;gap:12px;padding:10px 0}.person-row .profile-avatar{background:#edf3fd;color:#3765a8}.person-row strong{font-size:14px}.person-row small{display:block;color:var(--muted);font-size:12px}.info-grid{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;font-size:13px}.info-grid dt{color:var(--muted)}.info-grid dd{margin:0;overflow-wrap:anywhere}.sidebar-backdrop{display:none}
@media(max-width:760px){.collaboration{grid-template-columns:minmax(0,1fr)}aside{position:fixed;inset:0 auto 0 0;width:260px;z-index:60;transform:translateX(-100%);visibility:hidden;transition:transform .18s ease}.sidebar-open aside{transform:translateX(0);visibility:visible}.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:55;background:#0c1d3670;border-radius:0}.mobile-nav{display:grid}.channel-header{height:76px;padding:12px;gap:7px}.channel-actions{gap:0}.channel-heading h2{font-size:16px}.channel-heading p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-button{width:34px;height:34px}.channel-menu .menu-items{min-width:210px}main{margin:20px 16px;padding:25px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

#channels .channel-row{display:flex;align-items:center;position:relative;gap:2px}#channels .channel-row>button[data-channel]{flex:1;min-width:0}#channels .channel-options{width:28px;height:28px;flex:0 0 auto;padding:0;margin:0;font-size:20px;justify-content:center;opacity:0}#channels .channel-row:hover .channel-options,#channels .channel-row:focus-within .channel-options{opacity:1}.channel-context-menu{position:fixed;inset:auto;margin:0;min-width:212px;padding:6px;border:1px solid #e5eaf2;border-radius:10px;background:#fff;color:#18263c;box-shadow:0 10px 32px #15243f26}.channel-context-menu button{display:block;width:100%;padding:10px 12px;text-align:left;background:transparent;font-size:13px;color:#18263c}.channel-context-menu button:hover,.channel-context-menu button:focus-visible{background:#edf3fc}.danger-action{color:#b52c32!important}.danger-action:hover{background:#fbe9e9!important}@media(pointer:coarse){#channels .channel-options{opacity:1}}

#channels .channel-options[aria-expanded=true]{opacity:1}#channels button[data-channel]>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Actions stay within the channel: compact navigation, restrained rows, one detail drawer. */
.action-tabs{display:flex;gap:20px;padding:0 24px;border-bottom:1px solid var(--border,#e6eaf0);background:#fff;min-height:34px;align-items:stretch}.action-tabs button{padding:6px 0;border:0;background:none;color:#64748b;border-radius:0;font-size:12px}.action-tabs button[aria-current=page]{border-bottom:2px solid #2869cc;color:#1e3a5f}.channel-action-list{flex:1;overflow:auto;padding:24px 32px;background:#fff;color:#24354a}.actions-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.actions-heading h2{font-size:16px;margin:0}.actions-heading button,.actions-empty button{font-size:12px;padding:7px 12px}.action-counts{color:#64748b;font-size:11px;margin-bottom:14px}.action-item{width:100%;display:flex;gap:14px;align-items:center;text-align:left;border:0;border-bottom:1px solid #edf0f4;border-radius:0;background:#fff;color:#25364b;padding:16px 0}.action-item:hover{background:#f8fafc}.action-item>span:nth-child(2){flex:1;min-width:0}.action-item strong{display:block;font-size:13px;font-weight:550;overflow-wrap:anywhere}.action-item small{display:block;color:#708093;font-size:11px;margin-top:7px}.action-state{font-size:18px;width:22px;text-align:center;color:#426ba3}.actions-empty{text-align:center;padding:60px 16px;color:#6a788a}.actions-empty h3{color:#27384f;font-size:17px}.actions-empty p{font-size:13px}.completed-toggle{border:0;background:none;color:#63748a;font-size:12px;margin-top:16px}.action-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:430px;max-width:100vw;max-height:100dvh;height:100dvh;border:0;border-left:1px solid #e1e7ee;border-radius:0;padding:28px;box-shadow:-8px 0 32px #142b4214;overflow:auto}.action-drawer>button:not(.dialog-close){margin:10px 6px 0 0}.action-drawer>p{font-size:12px;color:#6b7b8e}.action-drawer>a{display:block;margin-top:20px;font-size:12px}.action-source{border-left:2px solid #c6d5e7;padding:8px 12px;white-space:pre-wrap;overflow-wrap:anywhere;color:#61748b;font-size:12px}.action-assignees{max-height:100px;overflow:auto;border:1px solid #e4e9ef;border-radius:5px;padding:4px 8px}.action-assignees label{display:flex;align-items:center;gap:7px;margin:4px 0;font-weight:400}.action-assignees input[type=checkbox]{width:auto;margin:0}.action-thread-context{display:flex;align-items:center;gap:12px;padding:4px 24px 8px;border-bottom:1px solid #e6eaf0;background:#fff}.action-thread-context button{border:0;background:none;padding:4px 0;color:#527097;font-size:11px}.action-thread-context select{margin-left:auto;width:auto;font-size:11px;padding:4px;max-width:130px}.thread-expand{flex:0 0 auto!important;width:27px!important;padding:5px 0!important;font-size:10px!important;color:#8c9bb0!important}.action-children{padding:0 8px 4px 35px}.action-children button{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;background:none;border:0;color:#aab6c7;font-size:11px;padding:7px}.action-children button:hover{color:#fff;background:#ffffff08}.action-tabs[hidden],.channel-action-list[hidden],.action-thread-context[hidden],.action-children[hidden]{display:none!important}@media(max-width:650px){.channel-action-list{padding:18px}.action-tabs{padding:0 18px}.action-thread-context{padding:4px 14px 8px;gap:8px}.action-thread-context button:first-child{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.action-drawer{width:100%;padding:22px}.action-item small{line-height:1.6}}

.channel-content:has(.action-tabs:not([hidden])) .channel-header{height:60px;min-height:60px}.action-editor textarea,.action-drawer textarea{font:inherit;resize:vertical;width:100%;border:1px solid #d8e0ec;border-radius:6px;padding:8px;color:#263c56;background:#fff}.action-tabs button{font-weight:500}

.participant-picker{max-height:300px;overflow-y:auto;margin:12px 0}.participant-option{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line);font-size:14px}.participant-option input{width:16px;height:16px;flex:0 0 auto;margin:0}.participant-option[hidden]{display:none}

/* Keep member identity and controls on separate, wrapping rows. */
dialog .member-management-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line,#dce3ee);min-width:0}
dialog .member-management-row:last-child{border-bottom:0}
dialog .member-management-details{min-width:0;overflow-wrap:anywhere}
dialog .member-management-details strong{display:block;font-size:14px;line-height:1.5}
dialog .member-management-row p{margin:0;line-height:1.6;overflow-wrap:anywhere}
dialog .member-management-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;min-width:0}
dialog .member-management-actions button{margin:0;max-width:100%;white-space:normal;text-align:left;line-height:1.4}
dialog button.danger-action{background:#fff1f2;color:#b42335;border:1px solid #fecdd3}
.channel-actions { flex-wrap: wrap; }
.channel-actions > button:not(.icon-button) { padding: .5rem .7rem; font-size: .82rem; white-space: nowrap; }
dialog label textarea[readonly] { display: block; width: 100%; min-height: 12rem; margin-top: .5rem; padding: .7rem; border: 1px solid var(--line, #cbd5e1); border-radius: .5rem; color: inherit; background: transparent; font: .8rem/1.5 ui-monospace, monospace; }