/* Okada Chat — Slack-familiar layout: workspace rail, top search bar, sidebar sections, channel header with tabs,
   Slack-style messages and composer. Control sizes: 28px (inline), 32px (toolbar), 36px (header); 44px on touch screens. */
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url(/lato-400.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url(/lato-400i.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url(/lato-700.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;src:url(/lato-900.woff2) format("woff2")}

:root{
  --rail:#3b1240;--side:#4a1b4f;--side-hover:rgba(255,255,255,.08);--side-active:rgba(255,255,255,.2);--side-ink:#e7dbe8;--side-muted:#c1a9c4;--side-line:rgba(255,255,255,.12);
  --ink:#1d1c1d;--ink-2:#454245;--muted:#616061;--line:#e2e2e2;--line-2:#cfcfcf;--hover:#f8f8f8;--surface:#fff;
  --blue:#1264a3;--blue-soft:#e8f5fa;--blue-line:#1d9bd1;--green:#007a5a;--green-2:#148567;--red:#cd2553;--gold:#ecb22e;
  --shadow:0 4px 12px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06);--shadow-pop:0 18px 48px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.08);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  font-family:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.46668;color:var(--ink);
  -webkit-font-smoothing:antialiased;background:var(--rail);
}
*{box-sizing:border-box}
body{margin:0;background:var(--rail);overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--blue-line);outline-offset:1px;border-radius:6px}
.logo{width:36px;height:36px;border-radius:9px;background:var(--rail);display:grid;place-items:center;color:#e0b75c}
.logo svg{width:28px;height:28px;fill:#9dbb74}

/* ---------- shell ---------- */
.app{height:100dvh;display:grid;grid-template-columns:70px 260px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);grid-template-areas:"top top top" "rail side main";background:var(--rail);overflow:hidden}
.app[hidden]{display:none!important}
.globalbar{grid-area:top;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;position:relative}
.rail{grid-area:rail;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 12px;position:relative}
.sidebar{grid-area:side;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--side);color:var(--side-ink);border-radius:8px 0 0 8px;margin-bottom:6px;position:relative}
.main{grid-area:main;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface);border-radius:0 8px 8px 0;margin:0 6px 6px 0;overflow:hidden;position:relative}
.details{display:none}

/* ---------- global bar ---------- */
.search{flex:0 1 640px;height:28px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.2);color:#f2e9f3;border:1px solid transparent}
.search:hover{background:rgba(255,255,255,.26)}
.search:focus-within{background:#fff;color:var(--muted);border-color:var(--blue-line)}
.search .ic{width:15px;height:15px}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:13px;color:inherit}
.search input::placeholder{color:rgba(255,255,255,.85)}
.search:focus-within input{color:var(--ink)}
.search:focus-within input::placeholder{color:var(--muted)}
.top-actions{position:absolute;right:10px;top:8px;display:flex;gap:4px}
.globalbar .icon-btn{width:28px;height:28px;border-radius:6px;color:#f2e9f3}
.globalbar .icon-btn:hover{background:rgba(255,255,255,.2)}
.icon-btn{border:0;background:transparent;display:grid;place-items:center;flex:none;position:relative;padding:0}
#pushToggle.on::after{content:"";position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#2bac76;box-shadow:0 0 0 2px var(--rail)}
#soundToggle::before{content:"";width:17px;height:17px;background:currentColor;
  -webkit-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='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat;
  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='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E") center/contain no-repeat}
#soundToggle.muted::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='m16 9.5 5 5M21 9.5l-5 5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='m16 9.5 5 5M21 9.5l-5 5'/%3E%3C/svg%3E")}

/* ---------- workspace rail ---------- */
.rail-logo{width:36px;height:36px;border-radius:9px;background:#fff;display:grid;place-items:center;margin:2px 0 10px;color:#3b1240}
.rail-logo svg{width:26px;height:26px;fill:#6f9447}
.rail-btn{width:62px;border:0;background:transparent;color:#f2e9f3;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0 4px;font-size:11.5px;font-weight:700;border-radius:8px}
.rail-ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;transition:background .12s,transform .12s}
.rail-ic .ic{width:20px;height:20px}
.rail-btn:hover .rail-ic{background:rgba(255,255,255,.2);transform:scale(1.04)}
.rail-btn.active .rail-ic{background:rgba(255,255,255,.28)}
.rail-spacer{flex:1}
.rail-feedback .ic{color:#b9d98f}
.rail-me{position:relative;width:36px;height:36px;border:0;padding:0;border-radius:8px;background:transparent;margin-top:6px}
.rail-me .avatar-mini{width:36px;height:36px;border-radius:8px;font-size:13px}
.rail-me::after{content:"";position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:#2bac76;border:3px solid var(--rail)}
.rail-me-label{display:none}
.profile-pop{position:fixed;left:76px;bottom:12px;z-index:70;width:280px;background:#fff;color:var(--ink);border-radius:10px;box-shadow:var(--shadow-pop);padding:8px 0}
.profile{display:flex;align-items:center;gap:12px;padding:10px 16px 12px;border-bottom:1px solid var(--line)}
.profile .avatar-mini{width:40px;height:40px;border-radius:8px;font-size:15px}
.profile strong{display:block;font-size:15px;font-weight:900}
.profile small{display:block;font-size:12.5px;color:var(--muted)}
.pop-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 16px;font-size:15px;text-align:left;color:var(--ink);min-height:36px}
button.pop-row:hover{background:var(--blue);color:#fff}
.pop-row select{margin-left:auto;border:1px solid var(--line-2);border-radius:6px;padding:4px 6px;background:#fff;font-size:13.5px}
.pop-row.danger{border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.pop-row .ic{width:17px;height:17px}

/* ---------- sidebar ---------- */
.ws-head{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;border-bottom:1px solid var(--side-line);flex:none}
.brand strong{display:block;font-size:17px;font-weight:900;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:none}
.ws-compose{width:34px;height:34px;border-radius:8px;border:0;background:#fff;color:var(--rail);display:grid;place-items:center}
.ws-compose:hover{background:#f1e8f2}
.mode-banner{margin:8px 12px 0;padding:6px 10px;border-radius:6px;background:rgba(236,178,46,.16);color:#f5d27d;font-size:12px;font-weight:700}
.mode-banner:empty{display:none}
.side-scroll{flex:1;overflow:auto;padding:10px 8px 16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.nav-item{display:flex;align-items:center;gap:8px;width:100%;height:28px;border:0;background:transparent;color:var(--side-ink);text-align:left;padding:0 10px 0 16px;border-radius:6px;font-size:15px;margin:0;position:relative}
.nav-item:hover{background:var(--side-hover)}
.nav-item.active,.nav-item[aria-current=page]{background:var(--side-active);color:#fff;font-weight:700}
.nav-item .ic{width:16px;height:16px;color:var(--side-muted)}
.nav-item.active .ic{color:#fff}
.nav-item .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item small{margin-left:auto;font-size:11px;color:var(--side-muted)}
.nav-item:has(.badge) .name{color:#fff;font-weight:900}
.hash{width:16px;text-align:center;color:var(--side-muted);font-size:17px;line-height:1}
.nav-item.active .hash{color:#fff}
.badge{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--red);color:#fff;font-size:12px;font-weight:700;display:inline-grid;place-items:center;line-height:1}
.side-heading{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 6px;margin:14px 0 2px;color:var(--side-muted);font-size:15px;border-radius:6px;cursor:pointer;user-select:none}
.side-heading:hover{background:var(--side-hover);color:#fff}
.side-heading small{font-size:12px;opacity:.8}
.side-heading .caret{width:16px;height:16px;transition:transform .15s}
.side-heading.collapsed .caret{transform:rotate(-90deg)}
.side-heading.collapsed+div{display:none}
.side-heading:has(+#favorites:empty){display:none}
.add-item{color:var(--side-muted)}
.add-box{width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.14);display:grid;place-items:center;margin-left:-2px}
.add-box .ic{width:14px;height:14px;color:var(--side-ink)}
.add-item:hover .add-box{background:rgba(255,255,255,.26)}
.avatar-mini{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:9.5px;font-weight:900;color:#fff;background:#7a4f82;flex:none}
.nav-item .avatar-mini{margin-left:-2px}
.nav-item .presence-dot{position:absolute;left:30px;top:17px;width:9px;height:9px;border:2px solid var(--side)}
.presence-dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:transparent;border:1.5px solid var(--side-muted)}
.presence-dot.online{background:#2bac76;border-color:#2bac76}
.presence-dot.away{background:transparent;border-color:var(--side-muted)}
#teamPresence .nav-item{padding-left:18px}
#teamPresence .presence-dot{position:static;border-width:1.5px}
#teamPresence small{font-size:12px}
.channel-folder{margin:2px 0}
.channel-folder>summary{list-style:none;cursor:pointer;height:28px;display:flex;align-items:center;padding:0 10px 0 16px;color:var(--side-muted);font-size:14px;border-radius:6px}
.channel-folder>summary::-webkit-details-marker{display:none}
.channel-folder>summary:hover{background:var(--side-hover)}
.channel-folder .nav-item{padding-left:26px}
.close-sidebar,.sidebar-backdrop{display:none}
[data-hue="0"]{background:#7a4f82!important}[data-hue="1"]{background:#2d7d58!important}[data-hue="2"]{background:#b45c3a!important}
[data-hue="3"]{background:#2f6a92!important}[data-hue="4"]{background:#a6771c!important}[data-hue="5"]{background:#a3325e!important}
[data-style="s2"]{background:#7a4f82}[data-style="s4"]{margin:6px 0 0}

/* ---------- channel header + tabs ---------- */
.topbar{display:flex;align-items:center;gap:8px;min-height:49px;padding:0 12px 0 16px;border-bottom:1px solid var(--line);flex:none}
.mobile-menu{display:none}
.title-wrap{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.title-btn{display:inline-flex;align-items:center;gap:4px;max-width:100%;border:0;background:transparent;border-radius:6px;padding:3px 6px;margin-left:-6px;color:var(--ink);min-width:0;flex:none}
.title-btn:hover{background:var(--hover)}
.title-btn .ic{width:14px;height:14px;color:var(--muted)}
.channel-title{font-size:18px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#description{margin:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.head-actions{display:flex;gap:2px}
.head-actions .icon-btn{width:32px;height:32px;border-radius:6px;color:var(--ink-2);font-size:0}
.head-actions .icon-btn:hover{background:var(--hover)}
.head-actions .icon-btn::before{content:"";width:18px;height:18px;background:currentColor}
#favoriteToggle::before{-webkit-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='1.8' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat;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='1.8' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
#favoriteToggle.on{color:var(--gold)}
#favoriteToggle.on::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E") center/contain no-repeat}
#muteConversation::before{-webkit-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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5h4'/%3E%3C/svg%3E") center/contain no-repeat;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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5h4'/%3E%3C/svg%3E") center/contain no-repeat}
#muteConversation.on{color:var(--red)}
#muteConversation.on::before{-webkit-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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5h4M4 4l16 16'/%3E%3C/svg%3E") center/contain no-repeat;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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5h4M4 4l16 16'/%3E%3C/svg%3E") center/contain no-repeat}
.conversation-tools{display:flex;align-items:center;gap:2px;height:38px;padding:0 12px;border-bottom:1px solid var(--line);flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap}
.conversation-tools::-webkit-scrollbar{display:none}
.conversation-tools .tab{height:38px;border:0;background:transparent;padding:0 10px;font-size:13.5px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent;border-radius:0;flex:none}
.conversation-tools .tab:hover{color:var(--ink);background:var(--hover)}
.conversation-tools .tab[data-view=messages]{color:var(--ink);border-bottom-color:var(--green)}
.project-pill{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;margin-left:8px;border-radius:6px;background:var(--hover);border:1px solid var(--line);color:var(--ink-2);font-size:12.5px;font-weight:700}
.project-pill::before{content:"";width:8px;height:8px;border-radius:2px;background:#2d7d58;transform:rotate(45deg)}
.tools-spacer{flex:1;min-width:8px}
.conversation-tools .tool,.folder-control>summary{height:26px;border:0;background:transparent;border-radius:6px;padding:0 8px;font-size:12.5px;font-weight:700;color:var(--muted);flex:none;display:inline-flex;align-items:center}
.conversation-tools .tool:hover,.folder-control>summary:hover{background:var(--hover);color:var(--ink)}
#connectionStatus{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding-left:8px;margin-left:4px;border-left:1px solid var(--line)}
#connectionStatus::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
#connectionStatus[data-ok]::before{background:#2bac76}
.folder-control{flex:none}
.folder-control>summary{list-style:none;cursor:pointer}
.folder-control>summary::-webkit-details-marker{display:none}
.folder-control[open]{position:fixed;left:var(--fx,20px);top:var(--fy,120px);z-index:45;width:260px;background:#fff;border-radius:10px;padding:8px 14px 14px;box-shadow:var(--shadow-pop);white-space:normal}
.folder-control[open]>summary{margin:0 0 6px -8px;color:var(--ink)}
.folder-control label{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.folder-control input{display:block;width:100%;margin-top:6px;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:6px;font-size:15px}
.folder-control #saveFolder{margin-top:10px;height:32px;border:0;background:var(--green);color:#fff;border-radius:6px;padding:0 12px;font-weight:700;font-size:13.5px}
.folder-control small{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.push-nudge{display:flex;align-items:center;gap:10px;margin:10px 16px 0;padding:8px 8px 8px 14px;border-radius:8px;background:var(--blue-soft);color:#0b4c7c;font-size:14px;flex:none}
.push-nudge span{flex:1;min-width:0}
.push-nudge #pushNudgeGo{height:28px;border:0;background:var(--blue);color:#fff;border-radius:6px;padding:0 12px;font-weight:700;font-size:13px}
.push-nudge #pushNudgeClose{width:28px;height:28px;border:0;background:transparent;color:#0b4c7c;font-size:20px;border-radius:6px;line-height:1}

/* ---------- feed ---------- */
.feed{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0 16px;overscroll-behavior:contain}
.search-summary{margin:8px 20px;padding:8px 12px;border-radius:6px;background:var(--hover);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.date-sep{position:sticky;top:8px;z-index:3;display:flex;justify-content:center;margin:16px 0 4px;pointer-events:none}
.date-sep::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);z-index:-1}
.date-sep span{background:#fff;border:1px solid var(--line);border-radius:24px;height:28px;padding:0 16px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.message{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 8px;padding:8px 20px;position:relative}
.message:hover,.message:focus-within{background:var(--hover)}
.message:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--blue-line)}
.message.grouped{padding-top:2px;padding-bottom:4px}
.message.grouped .avatar{visibility:hidden;height:0}
.message.grouped .msg-head{position:absolute;left:0;width:64px;top:6px;justify-content:center;margin:0}
.message.grouped .msg-head>*:not(time){display:none}
.message.grouped .msg-head time{visibility:hidden;font-size:11.5px}
.message.grouped:hover .msg-head time{visibility:visible}
.avatar{width:36px;height:36px;border-radius:8px;background:#7a4f82;color:#fff;display:grid;place-items:center;font-weight:900;font-size:13.5px;margin-top:3px;user-select:none}
.purple{background:#7a4f82}
.msg-body{min-width:0}
.msg-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.msg-head strong{font-size:15px;font-weight:900}
.time{font-size:12px;color:var(--muted)}
.imported{font-size:11.5px;color:var(--muted);background:#f1f1f1;border-radius:4px;padding:0 5px}
.pin-label{font-size:11.5px;font-weight:700;color:#8a5b00;background:#fdf1d5;border-radius:4px;padding:0 5px}
.msg-text{font-size:15px;line-height:1.46668;white-space:pre-wrap;overflow-wrap:anywhere;padding:0}
.msg-text a,.message a{color:var(--blue);text-decoration:none}
.msg-text a:hover{text-decoration:underline}
.msg-text code{font-family:Monaco,Menlo,Consolas,monospace;font-size:12px;color:#e01e5a;background:#f6f6f6;border:1px solid #e1e1e1;border-radius:3px;padding:2px 3px}
.mention{background:var(--blue-soft);color:var(--blue);border-radius:3px;padding:0 2px}

/* reactions row */
.reactions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:4px}
.reaction{height:24px;border:1px solid transparent;background:#efefef;border-radius:24px;padding:0 8px;font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px;font-weight:700}
.reaction:hover{border-color:#bbb;background:#fff}
.reaction.selected,.reaction[aria-pressed=true]{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue)}
.reactions>.reaction{order:0}.reactions>.reaction[aria-label^="Toggle"]{display:none}
.reactions>.reaction-picker{order:1}.reactions>.thread-btn{order:2;flex-basis:100%}
.reaction-picker{position:relative;display:inline-block}
.reaction-picker>summary{list-style:none;cursor:pointer;width:32px;height:24px;border-radius:24px;background:#efefef;display:grid;place-items:center;color:var(--muted);font-size:14px;border:1px solid transparent}
.reaction-picker>summary::-webkit-details-marker{display:none}
.reaction-picker>summary:hover{background:#fff;border-color:#bbb}
.reactions:not(:has(>.reaction:not([aria-label^="Toggle"])))>.reaction-picker:not([open]){display:none}
.reaction-picker>button{display:none}
.reaction-picker[open]{z-index:20;display:grid;grid-template-columns:repeat(6,36px);gap:2px;position:absolute;background:#fff;border-radius:10px;padding:8px;box-shadow:var(--shadow-pop)}
.reaction-picker[open]>summary{position:fixed;inset:0;width:auto;height:auto;border-radius:0;background:transparent;border:0;font-size:0;z-index:0;cursor:default}
.reaction-picker[open]>button{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:transparent;border-radius:6px;font-size:20px}
.reaction-picker[open]>button:hover{background:var(--blue-soft)}
.thread-btn{border:1px solid transparent;background:transparent;border-radius:6px;height:28px;padding:0 8px 0 6px;margin-left:-6px;font-size:13px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px;max-width:max-content}
.thread-btn:hover{background:#fff;border-color:var(--line)}
.thread-btn.no-replies{display:none}
.thread-btn.has-replies::before{content:"";width:20px;height:20px;border-radius:5px;background:#e8e0e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a4f82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14v9H11l-4 3.5V14H5z'/%3E%3C/svg%3E") center/13px no-repeat}
.thread-btn.has-replies::after{content:"View thread";color:var(--muted);font-weight:400;font-size:12.5px;opacity:0}
.thread-btn:hover::after{opacity:1}

/* hover toolbar (Slack-style) */
.message-quick-actions{position:absolute;right:52px;top:-16px;display:flex;background:#fff;border-radius:6px 0 0 6px;box-shadow:var(--shadow);padding:2px;z-index:6;visibility:hidden}
.message-quick-actions button{width:32px;height:32px;border:0;background:transparent;border-radius:4px;color:var(--ink-2);display:grid;place-items:center;font-size:0;padding:0}
.message-quick-actions button:hover{background:var(--hover);color:var(--ink)}
.message-quick-actions button::before{content:"";width:18px;height:18px;background:currentColor}
.qa-react::before{-webkit-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='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='12' r='7.5'/%3E%3Cpath d='M8.2 14a3.4 3.4 0 0 0 5.6 0M8.5 10h.01M13.5 10h.01M19 3v5M16.5 5.5h5'/%3E%3C/svg%3E") center/contain no-repeat;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='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='12' r='7.5'/%3E%3Cpath d='M8.2 14a3.4 3.4 0 0 0 5.6 0M8.5 10h.01M13.5 10h.01M19 3v5M16.5 5.5h5'/%3E%3C/svg%3E") center/contain no-repeat}
.qa-reply::before{-webkit-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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14v9H11l-4 3.5V14H5z'/%3E%3C/svg%3E") center/contain no-repeat;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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14v9H11l-4 3.5V14H5z'/%3E%3C/svg%3E") center/contain no-repeat}
.message-quick-actions [data-message-action=forward]::before{-webkit-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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5l6 6-6 6'/%3E%3Cpath d='M20 11H10a6 6 0 0 0-6 6v1'/%3E%3C/svg%3E") center/contain no-repeat;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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5l6 6-6 6'/%3E%3Cpath d='M20 11H10a6 6 0 0 0-6 6v1'/%3E%3C/svg%3E") center/contain no-repeat}
.message-quick-actions [data-message-action=save]::before{-webkit-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='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat;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='1.8' stroke-linejoin='round'%3E%3Cpath d='M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat}
.message-quick-actions [data-message-action=save][aria-label^=Remove]{color:var(--red)}
.message-quick-actions [data-message-action=save][aria-label^=Remove]::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat}
.message-actions{position:absolute;right:16px;top:-16px;z-index:6;background:#fff;border-radius:0 6px 6px 0;box-shadow:var(--shadow);padding:2px;visibility:hidden}
.message-actions summary{list-style:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;color:var(--ink-2);border-radius:4px;font-size:0}
.message-actions summary::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5.5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='18.5' r='1.7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5.5' r='1.7'/%3E%3Ccircle cx='12' cy='12' r='1.7'/%3E%3Ccircle cx='12' cy='18.5' r='1.7'/%3E%3C/svg%3E") center/contain no-repeat}
.message-actions summary::-webkit-details-marker{display:none}
.message-actions summary:hover{background:var(--hover)}
.message-actions:not([open])>button{display:none}
.message-actions[open]{visibility:visible;z-index:50;padding:6px 0;border-radius:8px;box-shadow:var(--shadow-pop);overflow:auto}
.message-actions[open]>summary{display:none}
.message-actions[open]>button{display:block;width:100%;text-align:left;height:32px;padding:0 20px;background:transparent;color:var(--ink);border:0;font-size:15px}
.message-actions[open]>button:hover{background:var(--blue);color:#fff}
.message-actions[open]>button[data-message-action=delete]{color:var(--red)}
.message-actions[open]>button[data-message-action=delete]:hover{background:var(--red);color:#fff}
.message:hover>.msg-body>.message-quick-actions,.message:focus-within>.msg-body>.message-quick-actions,.message:hover>.msg-body>.message-actions,.message:focus-within>.msg-body>.message-actions,
.thread-message:hover>.message-quick-actions,.thread-message:focus-within>.message-quick-actions,.thread-message:hover>.message-actions,.thread-message:focus-within>.message-actions{visibility:visible}

/* attachments */
.photo-container{margin-top:6px}
.photo-load{display:block;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--hover);color:var(--blue);cursor:zoom-in;min-height:40px;min-width:160px;max-width:100%;font-size:13px;font-weight:700}
.photo-load:not(:has(img)){padding:10px 14px}
.photo-preview{display:block;max-width:min(360px,100%);max-height:300px;object-fit:cover}
.attachment{margin-top:6px;display:inline-flex;align-items:center;gap:8px;max-width:min(420px,100%);border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 12px;font-size:14px;font-weight:700;text-align:left;overflow-wrap:anywhere;min-height:44px}
.attachment:hover{border-color:var(--line-2);background:var(--hover)}
.attachment small{color:var(--muted);font-weight:400;white-space:nowrap}
.photo-container+.attachment{margin-top:2px;min-height:0;padding:2px 6px;font-size:12px;border:0;background:transparent;color:var(--muted);font-weight:400}
.photo-container+.attachment:hover{color:var(--blue);text-decoration:underline}
.empty{margin:40px auto;max-width:380px;text-align:center;color:var(--muted);font-size:15px;padding:24px}

/* thread pane (splits the view like Slack) */
.thread{position:fixed;top:44px;right:6px;bottom:6px;width:400px;z-index:30;background:#fff;border-radius:0 8px 8px 0;border-left:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto}
body.thread-open .main{margin-right:406px;border-radius:0}
.thread-heading{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;min-height:49px;padding:0 10px 0 16px;border-bottom:1px solid var(--line);background:#fff;flex:none}
.thread-heading strong{font-size:18px;font-weight:900}
.thread-heading button{width:32px;height:32px;border-radius:6px;border:0;background:transparent;color:var(--ink-2);font-size:22px;line-height:1}
.thread-heading button:hover{background:var(--hover)}
.thread>*:not(.thread-heading):not(.reply-form){margin-left:16px;margin-right:16px}
.thread-parent{flex:none;margin-top:14px!important;padding:0 0 12px;border-bottom:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.thread-message{position:relative;padding:8px 0}
.thread-message strong{font-size:15px;font-weight:900}
.thread-message .time{margin-left:4px}
.thread-message .message-quick-actions{right:36px;top:-8px}
.thread-message .message-actions{right:0;top:-8px}
.thread .photo-preview{max-width:100%;max-height:240px}
.reply-form{position:sticky;bottom:0;margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;padding:12px 16px calc(12px + var(--safe-b))}
.reply-form input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;font-size:15px;outline:none}
.reply-form input:focus{border-color:var(--blue-line);box-shadow:0 0 0 1px var(--blue-line)}
.reply-attach{position:relative;overflow:hidden;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:var(--ink-2);font-size:0;background:var(--hover)}
.reply-attach::before{content:"";width:18px;height:18px;background:currentColor;-webkit-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' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;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' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.reply-attach input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.reply-form [data-remove-reply-file]{order:5;flex-basis:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);background:var(--hover);border-radius:6px;padding:6px 10px;font-size:13px}
.reply-form .send{height:40px;width:auto;padding:0 16px}

/* ---------- composer ---------- */
.composer{margin:0 20px 20px;border:1px solid var(--line-2);border-radius:8px;background:#fff;position:relative;flex:none}
.composer:focus-within{border-color:#868686;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.format-tools{display:flex;align-items:center;gap:2px;padding:4px 6px;background:#f8f8f8;border-radius:8px 8px 0 0}
.format-tools>button{width:28px;height:28px;border:0;background:transparent;border-radius:4px;color:var(--muted);font-size:13px;display:grid;place-items:center;padding:0}
.format-tools>button:hover{background:#ececec;color:var(--ink)}
.format-tools>span{margin-left:auto;font-size:12px;color:#8d8d8d;padding-right:6px;white-space:nowrap}
.composer textarea{display:block;width:100%;border:0;outline:none;resize:none;padding:10px 12px 4px;min-height:42px;max-height:40vh;font-size:15px;line-height:1.46668;background:transparent;field-sizing:content}
.composer textarea::placeholder{color:#8d8d8d}
.selected-photo{max-width:120px;max-height:90px;margin:6px 12px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
#fileSelection{margin:4px 12px;padding:6px 10px;border-radius:6px;background:var(--blue-soft);color:#0b4c7c;font-size:13px;font-weight:700;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fileSelection:empty{display:none}
.compose-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 6px}
.compose-left{display:flex;align-items:center;gap:2px}
.attach-label,.emoji-picker>summary,.mention-btn{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;flex:none}
.attach-label{background:#ececec}
.attach-label:hover{background:#dcdcdc}
.attach-label:focus-within,.mention-btn:focus-within{outline:2px solid var(--blue-line)}
.attach-label input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.emoji-picker{position:relative}
.emoji-picker>summary{list-style:none;font-size:16px;border-radius:4px}
.emoji-picker>summary::-webkit-details-marker{display:none}
.emoji-picker>summary:hover,.mention-btn:hover{background:#ececec}
.emoji-picker[open] #emojiChoices{position:absolute;bottom:36px;left:-34px;background:#fff;display:grid;grid-template-columns:repeat(6,36px);gap:2px;padding:8px;z-index:20;box-shadow:var(--shadow-pop);border-radius:10px}
.emoji-picker button{font-size:20px;width:36px;height:36px;padding:0;background:transparent;border:0;border-radius:6px}
.emoji-picker button:hover{background:var(--blue-soft)}
.mention-btn{border-radius:4px;font-size:17px;font-weight:700}
.mention-btn select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.mention-suggestions{position:absolute;bottom:calc(100% + 6px);left:8px;background:#fff;box-shadow:var(--shadow-pop);border-radius:8px;padding:6px 0;min-width:240px;z-index:20}
.mention-suggestions button{display:block;width:100%;height:32px;padding:0 16px;text-align:left;border:0;background:transparent;font-size:15px}
.mention-suggestions button[aria-selected=true],.mention-suggestions button:hover{background:var(--blue);color:#fff}
.send{border:0;background:var(--green);color:#fff;border-radius:4px;height:28px;min-width:32px;padding:0 8px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.send:hover{background:var(--green-2)}
.send:disabled{background:#c6c6c6;cursor:progress}
.send .ic{width:16px;height:16px}

/* ---------- modals ---------- */
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:80}
.modal-wrap:not([hidden]){display:flex}
.modal{position:relative;width:min(540px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border-radius:8px;box-shadow:var(--shadow-pop)}
section.modal{padding:20px 28px 28px}
section.modal>h2{margin:0 44px 8px 0}
section.modal>p{color:var(--muted);font-size:14px;margin:0 0 12px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:20px 28px 4px}
.modal-head h2,section.modal>h2{font-size:22px;font-weight:900;margin:0;line-height:1.3}
.modal-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.close{width:36px;height:36px;border:0;background:transparent;border-radius:6px;font-size:24px;line-height:1;color:var(--ink-2);flex:none;display:grid;place-items:center}
section.modal>.close{position:absolute;right:16px;top:16px}
.close:hover{background:var(--hover)}
.modal-body{padding:12px 28px 28px}
.modal-body>p{color:var(--ink-2);font-size:15px}
.modal-body label,#canvasForm>label{display:block;font-size:15px;font-weight:700;margin:0 0 16px}
.modal-body input:not([type=checkbox]),.modal-body select,.modal-body textarea,#directorySearch,#switchQuery,#canvasBody{display:block;width:100%;margin-top:8px;min-height:40px;padding:8px 12px;border:1px solid var(--line-2);border-radius:4px;background:#fff;font-size:15px;outline:none;font-weight:400}
.modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus,#directorySearch:focus,#switchQuery:focus,#canvasBody:focus{border-color:var(--blue-line);box-shadow:0 0 0 1px var(--blue-line)}
.modal-body textarea,#canvasBody{resize:vertical}
.modal .send{height:36px;padding:0 16px;font-size:15px;border-radius:4px}
.person-choice{display:flex!important;gap:10px;align-items:center;height:40px;padding:0 12px;margin:0 0 4px!important;border-radius:6px;font-weight:400!important;cursor:pointer}
.person-choice:hover{background:var(--hover)}
.person-choice input{width:18px;height:18px;accent-color:var(--green)}
#peoplePicker{max-height:34vh;overflow:auto;margin-bottom:8px;border:1px solid var(--line);border-radius:6px;padding:4px}
#conversationError,#messageActionError,#feedbackError,#directoryStatus{color:var(--red);font-size:14px;margin:4px 0}
#canvasStatus{color:var(--muted);font-size:14px}
#canvasForm details,#canvasHistory{margin-top:12px;border:1px solid var(--line);border-radius:6px;padding:10px 12px}
#canvasForm summary,#canvasHistory summary{cursor:pointer;font-weight:700;font-size:14px}
#canvasBody{min-height:220px;margin-bottom:6px}
#reloadCanvas{height:36px;border:1px solid var(--line-2);background:#fff;border-radius:4px;padding:0 14px;margin-right:8px;font-size:14px;font-weight:700}
.directory-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.directory-row p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.directory-row button{height:32px;padding:0 14px;border:0;border-radius:4px;background:var(--green);color:#fff;font-weight:700;font-size:13.5px}
#switchResults{max-height:50vh;overflow:auto;margin-top:10px}
#switchResults button{display:block;width:100%;text-align:left;height:36px;padding:0 12px;border:0;background:transparent;border-radius:6px;font-size:15px}
#switchResults button[aria-selected=true],#switchResults button:hover{background:var(--blue);color:#fff}
#channelActionsModal .modal>button:not(.close){display:block;width:100%;text-align:left;height:40px;padding:0 14px;margin:4px 0;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:15px}
#channelActionsModal .modal>button:not(.close):hover{background:var(--hover)}
#messageActionNote{white-space:pre-wrap}
.import-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.stat{padding:12px;border:1px solid var(--line);border-radius:6px}
.stat strong{display:block;font-size:22px;font-weight:900}
.stat small{color:var(--muted);font-size:12px}
.verified{padding:10px 12px;border-radius:6px;background:#e3f4ec;color:#0c5c3e;font-size:14px;margin-bottom:12px}
.modal-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}
.photo-modal{width:min(96vw,1100px)}
#enlargedPhoto{display:block;max-width:100%;max-height:72vh;margin:0 auto 16px;object-fit:contain;border-radius:6px}
.feedback-list{border-top:1px solid var(--line);padding:16px 28px 24px;background:#fafafa}
.feedback-list h3{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:900}
.fb-item{background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:8px}
.fb-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.fb-meta strong{color:var(--ink);font-size:14px;font-weight:900}
.fb-cat{border-radius:4px;padding:0 6px;font-weight:700;background:var(--blue-soft);color:var(--blue)}
.fb-cat[data-cat=bug]{background:#fce4ec;color:var(--red)}
.fb-cat[data-cat=idea]{background:#e3f4ec;color:#0c5c3e}
.fb-meta time{margin-left:auto}
.fb-item p{margin:6px 0 0;font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-empty{color:var(--muted);font-size:14px;margin:0}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,10px);background:#1d1c1d;color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:700;max-width:min(92vw,480px);box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:95;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- sign in ---------- */
.auth{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:var(--rail)}
.auth[hidden]{display:none!important}
.auth-card{width:min(420px,100%);background:#fff;border-radius:10px;padding:32px 28px 26px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.auth-card .logo{width:52px;height:52px;border-radius:12px;margin-bottom:14px}
.auth-card .logo svg{width:40px;height:40px}
.auth-card h1{font-size:28px;font-weight:900;margin:0 0 4px}
.auth-card p{color:var(--muted);margin:0 0 18px;font-size:15px}
.auth-card label{display:block;font-size:15px;font-weight:700;margin-bottom:14px}
.auth-card input{display:block;width:100%;margin-top:6px;height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:4px;font-size:17px;outline:none}
.auth-card input:focus{border-color:var(--blue-line);box-shadow:0 0 0 1px var(--blue-line)}
.auth-card .send{width:100%;height:44px;font-size:17px;border-radius:4px;background:var(--rail)}
.auth-card .send:hover{background:#2d0c31}
.auth-card img{display:block;margin:0 auto 14px;max-width:200px}
.auth-card .auth-note{font-size:13px;margin:16px 0 0;text-align:center}
.auth-resume{display:none;flex-direction:column;align-items:center;gap:14px;color:#e7dbe8;font-size:15px}
.auth-resume .logo{width:60px;height:60px;border-radius:14px;background:#fff}
.auth-resume .logo svg{width:46px;height:46px;fill:#6f9447;color:var(--rail)}
.ok-resuming .auth-card{display:none}
.ok-resuming .auth-resume{display:flex}

/* ---------- tablet ---------- */
@media (max-width:1000px) and (min-width:701px){
  .app{grid-template-columns:64px 230px minmax(0,1fr)}
  .thread{width:min(380px,50vw)}
  body.thread-open .main{margin-right:calc(min(380px,50vw) + 6px)}
  .format-tools>span,#description{display:none}
}

/* ---------- phones: Slack mobile pattern (Home list + bottom tabs, full-screen conversation) ---------- */
@media (max-width:700px){
  .app{display:block;height:100dvh;background:#fff}
  .main{height:100dvh;margin:0;border-radius:0}
  .sidebar{position:fixed;inset:0;z-index:40;border-radius:0;margin:0;transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.2,1);padding-top:var(--safe-t)}
  .sidebar.open{transform:none}
  .sidebar-backdrop{display:none!important}
  .ws-head{height:56px;padding:0 12px 0 16px}
  .brand strong{font-size:20px}
  .ws-compose{width:40px;height:40px;border-radius:10px}
  .side-scroll{padding:60px 8px calc(88px + var(--safe-b))}
  .nav-item,.side-heading,.channel-folder>summary{height:44px;font-size:17px}
  .nav-item .ic{width:20px;height:20px}
  .avatar-mini{width:26px;height:26px;border-radius:6px;font-size:11px}
  .nav-item .presence-dot{left:36px;top:26px}
  .hash{font-size:20px;width:22px}
  .add-box{width:26px;height:26px}
  .globalbar{display:none;position:fixed;left:0;right:0;top:calc(56px + var(--safe-t));height:56px;z-index:45;background:var(--side);padding:8px 12px;justify-content:flex-start;gap:6px}
  .sidebar.open~.globalbar{display:flex}
  .search{flex:1;height:40px;border-radius:10px}
  .search input{font-size:16px}
  .top-actions{position:static;display:flex;gap:4px}
  .globalbar .icon-btn{width:40px;height:40px;border-radius:10px}
  .rail{display:none;position:fixed;left:0;right:0;bottom:0;z-index:46;flex-direction:row;justify-content:space-around;align-items:stretch;gap:0;padding:6px 4px calc(6px + var(--safe-b));background:var(--rail);border-top:1px solid rgba(255,255,255,.12)}
  .sidebar.open~.rail{display:flex}
  .rail-logo,.rail-spacer,.rail-feedback{display:none}
  .rail-btn{width:auto;flex:1;min-height:52px;font-size:11.5px;gap:2px}
  .rail-ic{width:44px;height:30px;border-radius:15px}
  .rail-me{flex:1;width:auto;height:auto;min-height:52px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#f2e9f3;font-size:11.5px;font-weight:700}
  .rail-me .avatar-mini{width:26px;height:26px;border-radius:7px;font-size:10.5px}
  .rail-me::after{display:none}
  .rail-me-label{display:block}
  .profile-pop{left:8px;right:8px;width:auto;bottom:calc(74px + var(--safe-b));border-radius:14px}
  .pop-row{min-height:48px;font-size:17px}
  .topbar{min-height:56px;padding:var(--safe-t) 6px 0 2px;gap:2px}
  .mobile-menu{display:grid;width:44px;height:44px;border-radius:10px;color:var(--ink)}
  .mobile-menu .ic{width:24px;height:24px}
  .title-wrap{flex-direction:column;align-items:flex-start;gap:0}
  .title-btn{margin-left:0;padding:2px 4px}
  .channel-title{font-size:17px}
  #description{display:block;font-size:12px;padding-left:4px;max-width:100%}
  .head-actions .icon-btn{width:44px;height:44px;border-radius:10px}
  .head-actions .icon-btn::before{width:21px;height:21px}
  .conversation-tools{height:44px;padding:0 6px}
  .conversation-tools .tab{height:44px;font-size:15px;padding:0 12px}
  .conversation-tools .tool,.folder-control>summary{height:36px;font-size:14px;padding:0 10px}
  .push-nudge{margin:8px 8px 0;font-size:14.5px}
  .push-nudge #pushNudgeGo{height:36px}
  .push-nudge #pushNudgeClose{width:36px;height:36px}
  .message{padding:8px 12px}
  .message.grouped .msg-head{width:56px}
  .msg-text{font-size:16px}
  .message-quick-actions{display:none}
  .message-actions{visibility:visible;top:4px;right:4px;box-shadow:none;background:transparent}
  .message-actions summary{width:44px;height:36px;color:#9a9a9a}
  .message.grouped .message-actions{top:0}
  .reaction{height:32px;font-size:14px;padding:0 10px}
  .reaction-picker>summary{width:40px;height:32px}
  .thread-btn{height:36px;font-size:14.5px}
  .thread-btn.no-replies{display:inline-flex;color:var(--muted);font-weight:400}
  .reactions:has(>.thread-btn.no-replies)>.reaction-picker:not([open]){display:inline-block}
  .reaction-picker[open]{position:fixed;left:8px;right:8px;bottom:calc(90px + var(--safe-b));grid-template-columns:repeat(auto-fill,44px);justify-content:center;border-radius:14px;padding:10px}
  .reaction-picker[open]>button{width:44px;height:44px;font-size:24px}
  .composer{margin:0 8px calc(8px + var(--safe-b));border-radius:12px}
  .format-tools{display:none}
  .composer textarea{font-size:16px;padding:10px 12px 2px}
  .compose-bottom{padding:2px 6px 6px}
  .attach-label,.emoji-picker>summary,.mention-btn{width:40px;height:40px}
  .attach-label .ic{width:20px;height:20px}
  .emoji-picker>summary,.mention-btn{font-size:20px}
  .emoji-picker[open] #emojiChoices{position:fixed;left:8px;right:8px;bottom:calc(76px + var(--safe-b));grid-template-columns:repeat(auto-fill,44px);justify-content:center}
  .emoji-picker button{width:44px;height:44px;font-size:24px}
  .send{height:40px;min-width:44px;border-radius:10px}
  .send .ic{width:19px;height:19px}
  .thread{top:0;right:0;bottom:0;left:0;width:auto;border-radius:0;border:0;z-index:50;padding-top:var(--safe-t)}
  body.thread-open .main{margin-right:0}
  .thread-heading{min-height:56px}
  .thread-heading button{width:44px;height:44px;font-size:28px}
  .reply-form input{height:44px;font-size:16px}
  .reply-attach,.reply-form .send{height:44px}
  .reply-attach{width:44px}
  .modal-wrap{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:92dvh;border-radius:14px 14px 0 0;padding-bottom:var(--safe-b)}
  .modal-head{padding:18px 18px 4px}
  .modal-body{padding:10px 18px 22px}
  section.modal{padding:18px 18px calc(22px + var(--safe-b))}
  .close{width:44px;height:44px}
  .modal-body input:not([type=checkbox]),.modal-body select,.modal-body textarea,#directorySearch,#switchQuery{min-height:44px;font-size:16px}
  .modal .send{height:44px;width:100%}
  .person-choice{height:48px;font-size:16px}
  #switchResults button,#channelActionsModal .modal>button:not(.close){height:48px;font-size:16px}
  .directory-row button{height:40px}
  .import-summary{grid-template-columns:1fr}
  .modal-foot{flex-direction:column;align-items:stretch}
  .toast{bottom:calc(96px + var(--safe-b))}
  .feedback-list{padding:14px 18px 20px}
  .attachment{min-height:48px}
}
@media (hover:none){.message:hover{background:transparent}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (min-width:701px){.pop-feedback{display:none!important}}
@media (max-width:700px){.ws-head{margin-bottom:56px}.side-scroll{padding-top:6px}.mode-banner{margin-top:0}}
/* audit: status words become dots with hover text */
#connectionStatus{font-size:0;gap:0;padding-left:10px;cursor:help}
#connectionStatus::before{width:8px;height:8px}
#teamPresence small{display:none}
.imported{font-size:0;width:16px;height:16px;padding:0;display:inline-grid;place-items:center;background:#f1f1f1;border-radius:4px;vertical-align:-3px;cursor:help}
.imported::before{content:"";width:11px;height:11px;background:var(--muted);-webkit-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' stroke-linejoin='round'%3E%3Cpath d='M5 8h13l-3-3M19 16H6l3 3'/%3E%3C/svg%3E") center/contain no-repeat;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' stroke-linejoin='round'%3E%3Cpath d='M5 8h13l-3-3M19 16H6l3 3'/%3E%3C/svg%3E") center/contain no-repeat}
#fileSelection::after{content:"×";float:right;margin-left:8px;font-size:15px;line-height:1.1}
/* emoji autocomplete */
.emoji-suggest{position:fixed;z-index:85;background:#fff;border-radius:8px;box-shadow:var(--shadow-pop);padding:6px 0;max-height:360px;overflow:auto}
.emoji-suggest button{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 14px;border:0;background:transparent;text-align:left;font-size:15px;color:var(--ink)}
.emoji-suggest button[aria-selected=true],.emoji-suggest button:hover{background:var(--blue);color:#fff}
.es-e{font-size:20px;width:24px;text-align:center}
@media (max-width:700px){.emoji-suggest button{height:44px;font-size:16px}}
.es-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* DMs view (Slack-style): the rail's DMs button shows only your direct messages */
.ok-dmview .side-scroll>*:not(#dmHeading):not(.dm-body){display:none!important}
.ok-dmview #dmHeading{margin-top:4px;color:#fff;font-weight:900;font-size:17px;cursor:default;pointer-events:none}
.ok-dmview #dmHeading .caret{display:none}
.ok-dmview #dmHeading+.dm-body{display:block!important}
.ok-dmview #dms .nav-item{height:40px}
.ok-dmview #dms .avatar-mini{width:26px;height:26px;border-radius:6px;font-size:10.5px}
.ok-dmview #dms .presence-dot{left:36px;top:24px}
@media (max-width:700px){.ok-dmview #dms .nav-item{height:52px}.ok-dmview #dms .presence-dot{top:30px}}