/* Team chat + Website chat + Schedule (Ops pages and the /chat/ phone app). Light by default; [data-theme="dark"] on switches every token. */ :root{--nc-bg:#ffffff;--nc-panel:#ffffff;--nc-soft:#f3f5f7;--nc-soft2:#eef1f4;--nc-line:#e4e8ec;--nc-text:#1f2933;--nc-muted:#7b8794; --nc-accent:#1a9df0;--nc-accent-soft:#e3f2fd;--nc-on-accent:#ffffff;--nc-mine:#e1f1fd;--nc-mine-line:#c7e3fa;--nc-theirs:#f1f3f5;--nc-theirs-line:#e6e9ec; --nc-green:#2eaf6d;--nc-red:#e53935;--nc-warn:#f08c1a;--nc-tag:#eef1f4;--nc-tag-text:#3d4a55;--nc-shadow:0 8px 24px rgba(20,30,40,.14);--nc-input:#ffffff;--nc-link:#1a86d4} :root[data-theme="dark"]{color-scheme:dark;--nc-bg:#0f151c;--nc-panel:#121a23;--nc-soft:#1a2430;--nc-soft2:#16202a;--nc-line:#26323f;--nc-text:#e8edf2;--nc-muted:#8d9cab; --nc-accent:#3aa9f5;--nc-accent-soft:#16324a;--nc-on-accent:#ffffff;--nc-mine:#173a55;--nc-mine-line:#1f4b6d;--nc-theirs:#1a2430;--nc-theirs-line:#233140; --nc-green:#4cc88a;--nc-red:#ef5350;--nc-warn:#f5a54a;--nc-tag:#223140;--nc-tag-text:#cfe0ef;--nc-shadow:0 8px 24px rgba(0,0,0,.45);--nc-input:#0b1117;--nc-link:#8fcaff} :root:root .nc-root{color:var(--nc-text);font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif} :root:root .nc-root *{box-sizing:border-box} :root:root .nc-root [hidden]{display:none!important} :root:root .nc-root input[type=file]{display:none!important} :root:root .nc-root button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--nc-line);background:var(--nc-panel);color:var(--nc-text);padding:8px 12px;font-weight:600} :root:root .nc-root button:hover{border-color:var(--nc-muted)} :root:root .nc-root button:disabled{opacity:.55;cursor:default} :root:root .nc-root .nc-primary,:root:root .nc-dialog .nc-primary{background:var(--nc-accent);border-color:var(--nc-accent);color:var(--nc-on-accent)} :root:root .nc-root input[type=search],:root:root .nc-root textarea{width:100%;background:var(--nc-input);color:var(--nc-text);border:1px solid var(--nc-line);border-radius:10px;padding:9px 12px;font:inherit} :root:root .nc-root input[type=search]{background:var(--nc-soft);border-color:transparent;border-radius:999px;padding:9px 16px} :root:root .nc-layout{display:grid;grid-template-columns:minmax(270px,360px) 1fr;height:100%;min-height:0;border:1px solid var(--nc-line);border-radius:14px;overflow:hidden;background:var(--nc-panel)} :root:root .nc-desktop .nc-layout{height:calc(100vh - 210px);min-height:460px} :root:root .nc-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--nc-line);background:var(--nc-panel)} :root:root .nc-list-head{display:flex;flex-wrap:wrap;gap:8px;padding:12px;align-items:center} :root:root .nc-list-head .nc-search{flex:1 1 100%;order:2} :root:root .nc-new{position:relative} :root:root .nc-root .nc-new>button{background:var(--nc-accent);border-color:var(--nc-accent);color:var(--nc-on-accent);border-radius:999px;padding:8px 16px} :root:root .nc-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:20;min-width:200px;background:var(--nc-panel);border:1px solid var(--nc-line);border-radius:12px;box-shadow:var(--nc-shadow);padding:6px;display:grid} :root:root .nc-root .nc-menu button{border:0;background:none;text-align:left;font-weight:500;padding:9px 12px} :root:root .nc-root .nc-menu button:hover{background:var(--nc-soft)} :root:root .nc-filter{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--nc-line)} :root:root .nc-root .nc-filter button{border:0;border-radius:0;background:none;color:var(--nc-text);font-weight:500;padding:8px 10px;border-bottom:2px solid transparent} :root:root .nc-root .nc-filter button.active{color:var(--nc-accent);border-bottom-color:var(--nc-accent)} :root:root .nc-rows{overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y} :root:root .nc-root .nc-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--nc-line);border-radius:0;background:transparent;padding:12px 14px;font-weight:400} :root:root .nc-root .nc-row:hover{background:var(--nc-soft)} :root:root .nc-root .nc-row.active{background:var(--nc-accent-soft)} :root:root .nc-row-main{min-width:0;display:grid;gap:2px} :root:root .nc-row-main b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} :root:root .nc-row-main small{color:var(--nc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px} :root:root .nc-row.unread .nc-row-main b{font-weight:700} :root:root .nc-row.unread .nc-row-main small{color:var(--nc-text)} :root:root .nc-row-side{display:grid;justify-items:end;gap:5px} :root:root .nc-row-side small{color:var(--nc-muted);font-size:12px;white-space:nowrap} :root:root .nc-badge,:root:root .nc-nav-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--nc-accent);color:#fff;font-size:11px;font-weight:700;font-style:normal;line-height:1} :root:root .nc-nav-badge{margin-left:8px;vertical-align:1px;background:var(--nc-red)} :root:root .nc-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#5c6bc0;color:#fff;font-weight:600;font-size:14px;flex:none;position:relative} :root:root .nc-avatar.sm{width:26px;height:26px;font-size:10px;vertical-align:middle} :root:root .nc-avatar.group{background:#1e6fd9} :root:root .nc-avatar.group::before{content:"";width:22px;height:22px;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.8'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='16.5' cy='9' r='2.6'/%3E%3Cpath d='M16 13.6c2.7.2 5 2 5 5'/%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'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 19c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5'/%3E%3Ccircle cx='16.5' cy='9' r='2.6'/%3E%3Cpath d='M16 13.6c2.7.2 5 2 5 5'/%3E%3C/svg%3E") center/contain no-repeat} :root:root .nc-avatar.web{background:#2e9d6a} :root:root .nc-avatar.here::after{content:"";position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--nc-green);border:2px solid var(--nc-panel)} :root:root .nc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--nc-muted);vertical-align:1px} :root:root .nc-dot.on{background:var(--nc-green)} :root:root .nc-tag{display:inline-block;font-style:normal;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;background:var(--nc-tag);color:var(--nc-tag-text)} :root:root .nc-tag.wait{background:#fff1dc;color:#9a5a00} :root:root .nc-tag.mail{background:#efe4fb;color:#6a3d9a} :root[data-theme="dark"] .nc-tag.wait{background:#5a3a14;color:#ffd08a} :root[data-theme="dark"] .nc-tag.mail{background:#3b2a4d;color:#dcc6f5} :root:root .nc-empty{color:var(--nc-muted);padding:18px;text-align:center} :root:root .nc-empty-thread{display:grid;place-content:center;justify-items:center;height:100%;gap:8px} :root:root .nc-empty-thread .nc-empty-icon{width:84px;height:84px;border-radius:50%;background:var(--nc-soft);display:grid;place-items:center;font-size:34px;color:var(--nc-muted)} :root:root .nc-empty-thread b{color:var(--nc-text);font-size:16px;font-weight:500} :root:root .nc-thread{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--nc-panel)} :root:root .nc-thread-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--nc-line);background:var(--nc-panel)} :root:root .nc-head-main{display:grid;min-width:0;flex:1} :root:root .nc-head-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px} :root:root .nc-head-main small{color:var(--nc-muted)} :root:root .nc-head-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} :root:root .nc-desktop .nc-back{display:none} :root:root .nc-root .nc-back{font-size:28px;line-height:1;padding:0 10px 4px;background:transparent;border:0;color:var(--nc-accent)} :root:root .nc-visitor{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 14px;border-bottom:1px solid var(--nc-line);background:var(--nc-soft2);font-size:13px} :root:root .nc-visitor a,:root:root .nc-bubble a{color:var(--nc-link)} :root:root .nc-muted{color:var(--nc-muted)} :root:root .nc-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 14px 6px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y} :root:root .nc-day{text-align:center;color:var(--nc-muted);font-size:11px;margin:14px 0 8px;text-transform:uppercase;letter-spacing:.5px} :root:root .nc-system{text-align:center;color:var(--nc-muted);font-size:12px;margin:8px 20px} :root:root .nc-system small{opacity:.7} :root:root .nc-msg{display:flex;flex-direction:column;max-width:78%;margin-top:10px} :root:root .nc-msg.cont{margin-top:3px} :root:root .nc-msg.mine{margin-left:auto;align-items:flex-end} :root:root .nc-meta{margin:0 4px 3px;font-size:12px;color:var(--nc-muted)} :root:root .nc-meta b{color:var(--nc-text);font-weight:600} :root:root .nc-bubble{background:var(--nc-theirs);border:1px solid var(--nc-theirs-line);border-radius:16px 16px 16px 4px;padding:8px 12px;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text} :root:root .nc-msg.mine .nc-bubble{background:var(--nc-mine);border-color:var(--nc-mine-line);border-radius:16px 16px 4px 16px} :root:root .nc-bubble p{margin:0;color:var(--nc-text)} :root:root .nc-img{display:block;margin-top:6px} :root:root .nc-bubble p+.nc-img,:root:root .nc-bubble p+.nc-file{margin-top:8px} :root:root .nc-img img{display:block;max-width:min(320px,100%);max-height:320px;border-radius:10px;background:var(--nc-soft)} :root:root .nc-file{display:inline-block;margin-top:4px} :root:root .nc-file small{color:var(--nc-muted)} :root:root .nc-seen{text-align:right;color:var(--nc-muted);font-size:11px;margin:4px 4px 0} :root:root .nc-root .nc-more{display:block;margin:4px auto 10px;background:transparent} :root:root .nc-compose{border-top:1px solid var(--nc-line);padding:10px;background:var(--nc-panel)} :root:root .nc-compose-row{display:flex;gap:8px;align-items:flex-end} :root:root .nc-compose textarea{resize:none;min-height:40px;max-height:160px;line-height:1.35;border-radius:20px;background:var(--nc-soft);border-color:transparent} :root:root .nc-attach{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer;flex:none;font-size:18px;background:var(--nc-soft);color:var(--nc-text);margin:0} :root:root .nc-root .nc-send{background:var(--nc-accent);border-color:var(--nc-accent);color:var(--nc-on-accent);height:40px;flex:none;border-radius:20px;padding:0 16px} :root:root .nc-attach-preview{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 10px;border-radius:8px;background:var(--nc-soft);font-size:13px} :root:root .nc-attach-preview button{padding:2px 8px} :root:root .nc-closed{margin:0;padding:12px;text-align:center;color:var(--nc-muted);border-top:1px solid var(--nc-line)} :root:root .nc-web-status{padding:12px;border-bottom:1px solid var(--nc-line);display:grid;gap:6px;background:var(--nc-soft2)} :root:root .nc-online{margin:0;font-size:12px;color:var(--nc-muted)} :root:root .nc-online.on b{color:var(--nc-green)} :root:root .nc-online.off b{color:var(--nc-warn)} :root:root .nc-switch{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--nc-text);font-weight:600} :root:root .nc-switch input{position:absolute;opacity:0;width:1px;height:1px} :root:root .nc-switch span{display:inline-block;width:44px;height:26px;border-radius:13px;background:#c8d0d8;position:relative;flex:none;transition:background .15s} :root[data-theme="dark"] .nc-switch span{background:#33475a} :root:root .nc-switch span::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s} :root:root .nc-switch input:checked+span{background:var(--nc-green)} :root:root .nc-switch input:checked+span::after{transform:translateX(18px)} :root:root .nc-switch input:focus-visible+span{outline:2px solid var(--nc-accent);outline-offset:2px} :root:root .nc-tabs{display:flex;gap:4px;flex:1 1 100%} :root:root .nc-tabs button{flex:1;background:transparent} :root:root .nc-root .nc-tabs button.active{background:var(--nc-accent-soft);border-color:var(--nc-accent);color:var(--nc-accent)} :root:root .nc-root .nc-link,:root:root .nc-dialog .nc-link{background:none;border:0;padding:0;color:var(--nc-link);font-weight:600;justify-self:start;cursor:pointer} :root:root .nc-link.danger{color:var(--nc-red)!important} :root:root .nc-mode-switch{display:flex;gap:4px} :root:root .nc-root .nc-mode-switch button{flex:1;padding:5px 8px;font-size:12px;background:transparent} :root:root .nc-root .nc-mode-switch button.active{background:var(--nc-accent-soft);border-color:var(--nc-accent);color:var(--nc-accent)} /* Toast for new messages */ :root:root .nc-toasts{position:fixed;right:16px;top:calc(12px + env(safe-area-inset-top));z-index:1000;display:grid;gap:8px;width:min(340px,calc(100vw - 32px))} :root:root .nc-toast{display:flex;gap:10px;align-items:flex-start;background:var(--nc-panel);color:var(--nc-text);border:1px solid var(--nc-line);border-radius:14px;box-shadow:var(--nc-shadow);padding:10px 12px;cursor:pointer;animation:nc-in .18s ease-out;font:14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;text-align:left} :root:root .nc-toast b{display:block;font-size:13px} :root:root .nc-toast span{display:block;color:var(--nc-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px} @keyframes nc-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){:root:root .nc-toast{animation:none}} /* Dialogs */ :root:root .nc-dialog{border:1px solid var(--nc-line);border-radius:16px;background:var(--nc-panel);color:var(--nc-text);padding:0;width:min(460px,94vw);max-height:86vh;box-shadow:var(--nc-shadow)} :root:root .nc-dialog::backdrop{background:rgba(15,22,30,.45)} :root:root .nc-dialog form{display:grid;gap:12px;padding:18px} :root:root .nc-dialog h2{margin:0;font-size:18px} :root:root .nc-dialog label{display:grid;gap:6px;color:var(--nc-muted)} :root:root .nc-dialog input:not([type=checkbox]):not([type=radio]),:root:root .nc-dialog textarea,:root:root .nc-dialog select{width:100%;background:var(--nc-input);color:var(--nc-text);border:1px solid var(--nc-line);border-radius:8px;padding:9px 10px;font:inherit} :root:root .nc-dialog .nc-check{display:flex;align-items:center;gap:8px;color:var(--nc-text)} :root:root .nc-dialog .nc-check input{width:auto} :root:root .nc-people{display:grid;gap:2px;max-height:44vh;overflow:auto;border:1px solid var(--nc-line);border-radius:10px;padding:4px;overscroll-behavior:contain} :root:root .nc-people label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;color:var(--nc-text);cursor:pointer} :root:root .nc-people label:hover{background:var(--nc-soft)} :root:root .nc-people input{width:auto;margin:0} :root:root .nc-dialog-actions{display:flex;justify-content:flex-end;gap:8px} :root:root .nc-dialog button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--nc-line);background:var(--nc-panel);color:var(--nc-text);padding:8px 14px;font-weight:600} :root:root .nc-dialog .nc-primary{background:var(--nc-accent);border-color:var(--nc-accent);color:var(--nc-on-accent)} :root:root .nc-error{color:var(--nc-red);margin:0} :root:root .nc-dialog .nc-member-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 8px;border-radius:8px} :root:root .nc-dialog .nc-member-row:hover{background:var(--nc-soft)} :root:root .nc-dialog .nc-member-row label{display:flex;align-items:center;gap:10px;color:var(--nc-text);cursor:pointer;padding:3px 0} :root:root .nc-dialog .nc-member-row .nc-admin-pick{color:var(--nc-muted);font-size:13px;gap:6px} :root:root .nc-dialog .nc-member-row input,:root:root .nc-dialog .nc-hours input[type=checkbox],:root:root .nc-dialog .nc-mode input{width:auto;margin:0} :root:root .nc-dialog .nc-tag{display:inline-block;font-style:normal;font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;background:var(--nc-tag);color:var(--nc-tag-text);margin-left:4px} :root:root .nc-group-list{display:grid;gap:6px;max-height:60vh;overflow:auto} :root:root .nc-group-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--nc-line);border-radius:10px} :root:root .nc-group-row small{display:block;color:var(--nc-muted);margin-top:2px} :root:root .nc-group-actions{display:flex;gap:6px;flex:none} :root:root .nc-dialog .nc-mode{border:1px solid var(--nc-line);border-radius:10px;padding:8px 12px;display:grid;gap:6px;margin:0} :root:root .nc-dialog .nc-mode legend{color:var(--nc-muted);padding:0 4px} :root:root .nc-hours{display:grid;gap:6px} :root:root .nc-hours small{color:var(--nc-muted)} :root:root .nc-dialog .nc-hours-row{display:grid;grid-template-columns:130px 1fr auto 1fr;align-items:center;gap:8px} :root:root .nc-dialog .nc-hours-row input[type=time]{padding:6px 8px} :root:root .nc-dialog .nc-hours-row span{color:var(--nc-muted)} @media (max-width:480px){:root:root .nc-dialog .nc-hours-row{grid-template-columns:1fr 1fr auto 1fr}:root:root .nc-dialog .nc-hours-row .nc-check{grid-column:1/-1}} /* Ops page frame */ :root:root .nc-page-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px} :root:root .nc-page-bar .lo-subtitle{margin:0} :root:root .nc-page-tools{display:flex;gap:8px;align-items:center} :root:root .nc-page-tools a{color:var(--nc-link)} /* Phone: one pane at a time */ :root:root .nc-phone{height:100%} :root:root .nc-phone .nc-layout{grid-template-columns:1fr;border:0;border-radius:0;height:100%} :root:root .nc-phone .nc-list{border-right:0} :root:root .nc-phone .nc-thread{display:none} :root:root .nc-phone.nc-show-thread .nc-list{display:none} :root:root .nc-phone.nc-show-thread .nc-thread{display:flex} :root:root .nc-phone .nc-msg{max-width:86%} :root:root .nc-phone .nc-compose{padding-bottom:calc(10px + env(safe-area-inset-bottom))} :root:root .nc-phone .nc-compose textarea,:root:root .nc-phone .nc-search{font-size:16px} @media (max-width:800px){:root:root .nc-desktop .nc-layout{grid-template-columns:1fr;height:calc(100vh - 170px)}:root:root .nc-desktop .nc-thread{display:none}:root:root .nc-desktop.nc-show-thread .nc-list{display:none}:root:root .nc-desktop.nc-show-thread .nc-thread{display:flex}:root:root .nc-desktop .nc-back{display:inline-block}}