.brand-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.brand-company .badge{display:inline-block;font-size:12px;padding:3px 10px}.brand-company form{display:flex;align-items:center;gap:6px}.brand-company select,.brand-company button{font-size:12px;min-height:32px;padding:3px 7px}.headerbrand .brand-subtitle{display:block;font-size:12px;line-height:1.5;white-space:normal;margin-top:3px}
.header-online{--online-border:#b8ccc3;--online-background:#edf5f0;--online-text:#29564b;display:flex;align-items:center;justify-content:flex-end;gap:0;flex-wrap:nowrap;max-width:290px}.header-online:empty{display:none}.header-online .online-face{position:relative;flex:0 0 34px;display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;margin:0;border-radius:50%;border:2px solid var(--online-border);background:var(--online-background);color:var(--online-text);box-shadow:none;font-size:12px;font-weight:600;cursor:default}.online-face img{position:absolute;inset:2px;width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--surface,#fff)}.online-name{display:none;position:absolute;z-index:80;top:calc(100% + 8px);right:0;white-space:nowrap;background:var(--surface,#fff);color:var(--text,#173e34);border:1px solid var(--line,#dce8e1);border-radius:7px;padding:6px 10px;box-shadow:0 4px 15px #0002;font-size:12px;font-weight:400;max-width:250px;white-space:normal;width:max-content}.online-face:hover .online-name,.online-face:focus-visible .online-name,.online-face.show-name .online-name{display:block}
@media(max-width:640px){.header-online{max-width:100%;flex-basis:100%;justify-content:flex-end}.brand-title-row{gap:8px}.headerbrand .brand-subtitle{font-size:11px}.header-online .online-face{flex-basis:30px;width:30px;height:30px;min-height:30px}.online-face img{width:22px;height:22px}.online-name{max-width:200px}}
@media print{.header-online{display:none}}

.header-online .online-face+.online-face{margin-left:-11px}.header-online .online-face:hover,.header-online .online-face:focus,.header-online .online-face.show-name{z-index:3}.online-more{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin-left:-6px;border:1px solid var(--online-border);border-radius:50%;background:var(--online-background);color:var(--online-text);font-size:11px;font-weight:600;z-index:1}

html[data-theme=dark] .header-online{--online-border:#617d70;--online-background:#243c30;--online-text:#d6e7dd}

/* Mobile: live avatars follow the company badge in the title row. */
@media(max-width:640px){
 .headerbrand{min-width:0;max-width:100%}
 .headerbrand>div{min-width:0;flex:1}
 .headerbrand .brand-title-row{flex-wrap:nowrap;min-width:0;gap:8px}
 .brand-title-row>strong,.brand-title-row>.brand-company{flex:0 0 auto}
 .brand-title-row>.header-online{flex:0 1 auto;min-width:0;max-width:100%;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding:2px 0;scrollbar-width:none}
 .brand-title-row>.header-online::-webkit-scrollbar{display:none}
 .brand-title-row>.header-online .online-face{flex:0 0 28px;width:28px;height:28px;min-height:28px;font-size:10px}
 .brand-title-row>.header-online .online-face img{width:20px;height:20px}
 .brand-title-row>.header-online .online-face+.online-face{margin-left:-19px}
 .brand-title-row>.header-online .online-more{flex:0 0 28px;width:28px;height:28px;margin-left:-10px;font-size:10px}
}

@media(max-width:640px){
 .workspace>header{flex-wrap:wrap}
 .workspace>header .headerbrand{width:100%}
 .brand-title-row>.header-online{margin-left:auto}
}

.online-touch-name{position:fixed;z-index:1000;max-width:calc(100vw - 16px);width:max-content;padding:7px 12px;border:1px solid var(--line,#dce8e1);border-radius:8px;background:var(--surface,#fff);color:var(--text,#173e34);box-shadow:0 4px 16px #0002;font-size:12px;font-weight:400;line-height:1.6;overflow-wrap:anywhere;pointer-events:none}
@media(max-width:640px){.header-online .online-face .online-name{display:none}}
@media print{.online-touch-name{display:none}}