/* Product tokens override the preserved PortalFramework foundation. */
:root {
    --portal-brand:#4057d6;
    --portal-brand-soft:#eef1ff;
    --portal-ink:#202738;
    --portal-muted:#667085;
    --portal-canvas:#f7f8fb;
    --portal-line:#e7e9ef;
    --quokka-blue:#4057d6;
    --quokka-radius:14px;
}
body {
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a,button,input,textarea,summary {
    -webkit-tap-highlight-color:transparent;
}
button,input,textarea {
    font:inherit;
}
button {
    cursor:pointer;
}
button:disabled {
    cursor:not-allowed;
}
button,a,summary {
    touch-action:manipulation;
}
a,button,summary {
    transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid #4057d6;
    outline-offset:4px;
}
button:disabled,.button-disabled {
    opacity:.56;
}
h1,h2,h3,p {
    margin-top:0;
}
h1,h2,h3 {
    color:var(--portal-ink);
}
svg {
    flex-shrink:0;
}
::selection {
    background:#dde4ff;
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.portal-shell {
    min-height:100dvh;
    display:flex;
}
.portal-sider {
    position:fixed;
    inset:0 auto 0 0;
    z-index:30;
    width:234px;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-right:1px solid var(--portal-line);
    overflow-y:auto;
}
.portal-main {
    margin-left:234px;
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}
.quokka-brand {
    height:89px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 25px;
    color:#252c42;
    font-size:30px;
    font-weight:750;
    letter-spacing:-1.8px;
}
.quokka-mark {
    color:var(--quokka-blue);
    flex-shrink:0;
}
.brand-period {
    color:var(--quokka-blue);
}
.workspace-switch {
    display:flex;
    align-items:center;
    gap:10px;
    margin:8px 17px 30px;
    padding:11px;
    border:1px solid var(--portal-line);
    border-radius:9px;
    background:#fafbfe;
}
.workspace-switch>svg {
    width:12px;
    height:12px;
    margin-left:auto;
    transform:rotate(90deg);
    color:#626e84;
}
.workspace-switch strong,.workspace-switch small {
    display:block;
}
.workspace-switch strong {
    font-size:12px;
    font-weight:650;
}
.workspace-switch small {
    font-size:10px;
    color:#626e84;
    margin-top:2px;
}
.workspace-avatar {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    background:#e9edff;
    border-radius:8px;
    color:#626e84;
    font-weight:700;
}
.nav-label {
    font-size:10px;
    font-weight:650;
    letter-spacing:1.3px;
    color:#626e84;
    margin:0 28px 12px;
}
.quokka-nav {
    display:grid;
    gap:5px;
    padding:0 14px;
}
.quokka-nav>a {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:46px;
    padding:0 14px;
    border-radius:8px;
    color:#626e84;
    font-size:13px;
    font-weight:550;
}
.quokka-nav>a svg {
    width:19px;
    height:19px;
}
.quokka-nav>a:hover {
    background:#f5f6fa;
    color:#354ac5;
}
.quokka-nav>a.active {
    background:#eef1ff;
    color:#4057d6;
}
.nav-preview {
    margin-left:auto;
    font-size:9px;
    font-weight:600;
    padding:2px 5px;
    border:1px solid #e3e6ed;
    border-radius:4px;
    color:#626e84;
    background:#fff;
}
.nav-count {
    margin-left:auto;
    font-size:10px;
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border:1px solid #e6e8ef;
    border-radius:5px;
    color:#626e84;
    background:#fff;
}
.sidebar-bottom {
    margin-top:auto;
    padding-top:36px;
}
.setup-card {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:12px 19px 24px;
    padding:18px 16px;
    background:#f8f9fd;
    border:1px solid #eceef5;
    border-radius:11px;
}
.setup-symbol {
    color:#626e84;
    margin-bottom:10px;
}
.setup-card strong {
    font-size:12px;
    margin-bottom:6px;
}
.setup-card>span:not(.setup-symbol):not(.setup-link) {
    font-size:11px;
    color:#626e84;
    line-height:1.7;
}
.setup-link {
    display:flex;
    align-items:center;
    gap:9px;
    color:#4057d6;
    font-size:11px;
    font-weight:650;
    margin-top:15px;
}
.setup-link svg {
    width:14px;
    height:14px;
}
.workspace-profile {
    display:flex;
    align-items:center;
    gap:10px;
    border-top:1px solid var(--portal-line);
    padding:18px 19px;
    min-height:75px;
}
.profile-avatar {
    width:30px;
    height:30px;
    background:#f1f2f6;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#626e84;
}
.profile-avatar svg {
    width:16px;
    height:16px;
}
.workspace-profile strong,.workspace-profile small {
    display:block;
}
.workspace-profile strong {
    font-size:11px;
}
.workspace-profile small {
    font-size:10px;
    color:#626e84;
    margin-top:2px;
}
.workspace-profile>svg {
    width:16px;
    height:16px;
    margin-left:auto;
    color:#626e84;
}
.portal-header {
    height:73px;
    min-height:73px;
    display:flex;
    align-items:center;
    padding:0 35px;
    gap:20px;
    background:#fff;
    border-bottom:1px solid var(--portal-line);
}
.header-location {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
}
.header-location strong {
    font-weight:550;
}
.workspace-dot {
    width:7px;
    height:7px;
    border:2px solid #8c96bd;
    border-radius:2px;
}
.header-slash {
    color:#626e84;
    margin:0 4px;
}
.header-subtitle {
    color:#626e84;
}
.environment-badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    letter-spacing:.1px;
    color:#626e84;
    border:1px solid #e7eaf2;
    border-radius:6px;
    padding:5px 9px;
    margin-left:auto;
    background:#fbfcff;
}
.environment-badge>span {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#8c98b9;
}
.header-help {
    width:32px;
    min-height:38px;
    display:grid;
    place-items:center;
    color:#626e84;
}
.header-help svg {
    width:18px;
    height:18px;
}
.portal-content {
    padding:36px 36px 30px;
    width:100%;
    max-width:1540px;
    margin:0 auto;
    flex:1;
    min-width:0;
}
.portal-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:20px 36px;
    font-size:10px;
    color:#626e84;
}
.portal-footer>span:first-child {
    display:flex;
    align-items:center;
    gap:7px;
}
.footer-dot,.status-dot {
    display:inline-block;
    flex-shrink:0;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#b1b8c9;
    box-shadow:none;
}
.mobile-navigation {
    display:none;
}
.skip-link {
    position:fixed;
    top:-100px;
    left:15px;
    z-index:100;
    padding:12px 18px;
    border:2px solid var(--quokka-blue);
    border-radius:8px;
    background:white;
}
.skip-link:focus {
    top:10px;
}
#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:1000;
    background:#fff3d6;
    padding:16px;
    color:#624716;
}
#blazor-error-ui a {
    text-decoration:underline;
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}
.eyebrow {
    display:block;
    font-size:9px;
    letter-spacing:1.6px;
    line-height:1.5;
    font-weight:650;
    color:#626e84;
    margin-bottom:9px;
}
.page-heading h1 {
    font-size:29px;
    letter-spacing:-1.1px;
    line-height:1.25;
    font-weight:650;
    margin:0 0 9px;
}
.page-heading p {
    font-size:12px;
    color:#626e84;
    margin:0;
    line-height:1.7;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:40px;
    padding:10px 15px;
    border-radius:7px;
    font-size:11px;
    font-weight:600;
    border:1px solid transparent;
    white-space:nowrap;
}
.button svg {
    width:15px;
    height:15px;
}
.button-primary {
    background:var(--quokka-blue);
    border-color:var(--quokka-blue);
    color:#fff;
    box-shadow:0 3px 5px #4057d615;
}
.button-primary:not(:disabled):hover {
    background:#3348bd;
    color:white;
}
.button-secondary {
    background:#fff;
    color:#505b73;
    border-color:#e1e5ed;
    box-shadow:0 2px 3px #20273803;
}
.button-secondary:hover {
    background:#f0f3ff;
    border-color:#cdd6fd;
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--quokka-blue);
    font-size:11px;
    font-weight:600;
    background:none;
    border:0;
    padding:0;
    min-height:36px;
}
.text-link svg {
    width:15px;
    height:15px;
}
.subtle-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#626e84;
    background:#f8f9fc;
    border:1px solid #e8eaf1;
    padding:4px 8px;
    border-radius:5px;
    font-size:9px;
    white-space:nowrap;
}
.surface-panel {
    background:#fff;
    border:1px solid var(--portal-line);
    border-radius:var(--quokka-radius);
    padding:25px;
    min-width:0;
}
.panel-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}
.panel-heading h2,.surface-panel h2 {
    font-size:15px;
    font-weight:650;
    letter-spacing:-.25px;
    margin:0 0 7px;
}
.panel-heading p {
    font-size:11px;
    color:#626e84;
    margin:0;
}
.icon-tile {
    display:inline-grid;
    place-items:center;
    width:34px;
    height:34px;
    background:#f4f6fc;
    border:1px solid #eef0f6;
    border-radius:9px;
    color:#626e84;
}
.icon-tile svg {
    width:17px;
    height:17px;
}
.large-icon {
    display:inline-grid;
    place-items:center;
    width:64px;
    height:64px;
    background:#eef1ff;
    border-radius:19px;
    color:#626e84;
}
.large-icon svg {
    width:29px;
    height:29px;
}
.welcome-panel {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr);
    background:#eef2ff;
    border:1px solid #e2e8fc;
    border-radius:15px;
    padding:31px 35px;
    overflow:hidden;
    min-height:288px;
}
.welcome-copy {
    position:relative;
    z-index:2;
}
.label-kicker {
    font-size:9px;
    letter-spacing:1.8px;
    color:#626e84;
    font-weight:650;
    display:inline-flex;
    align-items:center;
    gap:7px;
}
.label-kicker>span {
    width:5px;
    height:5px;
    background:#6f83cb;
    border-radius:50%;
}
.welcome-copy h2 {
    font-size:36px;
    line-height:1.18;
    letter-spacing:-1.3px;
    font-weight:600;
    margin:13px 0;
}
.welcome-copy p {
    font-size:11px;
    line-height:1.85;
    color:#626e84;
    margin:0 0 17px;
}
.welcome-caption {
    display:block;
    font-size:9px;
    color:#626e84;
    margin-top:11px;
}
.welcome-art {
    position:relative;
    min-height:230px;
    isolation:isolate;
}
.art-orbit {
    position:absolute;
    border:1px solid #dce3fa;
    border-radius:50%;
    width:285px;
    height:285px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}
.orbit-two {
    width:380px;
    height:380px;
    border-style:dashed;
    opacity:.6;
}
.art-spark {
    position:absolute;
    color:#626e84;
    font-size:26px;
}
.spark-one {
    right:21px;
    top:26px;
}
.spark-two {
    left:5px;
    bottom:21px;
    font-size:36px;
}
.art-bot {
    position:absolute;
    width:136px;
    height:141px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(-7deg);
    background:#fff;
    border:1px solid #dce3fa;
    border-radius:28px;
    box-shadow:0 16px 30px #5668ae12;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
}
.art-bot .quokka-mark {
    width:70px;
    height:70px;
}
.art-bot>span {
    font-size:7px;
    color:#626e84;
    letter-spacing:.1px;
}
.art-note {
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #e0e6f8;
    border-radius:10px;
    box-shadow:0 5px 10px #6676b20a;
    font-size:10px;
    color:#626e84;
    z-index:3;
    padding:11px 13px;
    white-space:nowrap;
}
.note-top {
    left:7px;
    top:4px;
    transform:rotate(-6deg);
}
.note-bottom {
    right:6px;
    bottom:1px;
    transform:rotate(6deg);
}
.note-icon {
    background:#eef2ff;
    border-radius:5px;
    padding:5px;
    color:#626e84;
}
.note-icon svg {
    width:14px;
    height:14px;
}
.tiny-check {
    color:#626e84;
    background:#edf6f0;
    border-radius:50%;
    font-size:8px;
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    margin-left:6px;
}
.wave {
    font-size:20px;
    color:#626e84;
}
.note-dots {
    font-size:10px;
    color:#626e84;
    letter-spacing:2px;
    margin-left:10px;
}
.workspace-stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:17px;
    margin:22px 0;
}
.stat-card {
    position:relative;
    background:#fff;
    border:1px solid var(--portal-line);
    border-radius:11px;
    padding:18px 20px;
    min-height:123px;
}
.stat-icon {
    position:absolute;
    right:17px;
    top:17px;
    color:#626e84;
}
.stat-icon svg {
    width:17px;
    height:17px;
}
.stat-label {
    font-size:10px;
    color:#626e84;
    display:block;
    margin-right:20px;
}
.stat-card>strong {
    display:block;
    font-size:27px;
    font-weight:600;
    letter-spacing:-1px;
    margin:7px 0 5px;
    line-height:1.2;
}
.stat-card>strong>span {
    font-size:13px;
    letter-spacing:0;
    color:#626e84;
    margin-left:7px;
    font-weight:400;
}
.stat-card>strong.stat-placeholder {
    color:#626e84;
    font-weight:400;
}
.stat-card>strong.stat-word {
    font-size:19px;
    letter-spacing:-.5px;
    margin:12px 0 9px;
}
.stat-caption {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:9px;
    color:#626e84;
}
.overview-columns {
    display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
    gap:22px;
}
.onboarding-list {
    list-style:none;
    margin:0;
    padding:0;
}
.onboarding-list li {
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 0;
    border-bottom:1px solid #f0f1f6;
}
.onboarding-list li:first-child {
    padding-top:4px;
}
.onboarding-list li:last-child {
    border-bottom:0;
}
.step-number {
    display:inline-grid;
    place-items:center;
    flex-shrink:0;
    width:30px;
    height:30px;
    border:1px solid #e7eaf2;
    border-radius:50%;
    font-size:10px;
    color:#626e84;
    background:#fcfcff;
}
.onboarding-list h3 {
    font-size:12px;
    font-weight:600;
    margin:0 0 4px;
}
.onboarding-list p {
    font-size:10px;
    color:#626e84;
    margin:0;
}
.onboarding-list li>a {
    display:grid;
    place-items:center;
    min-width:40px;
    min-height:40px;
    margin-left:auto;
    color:#626e84;
    border-radius:7px;
}
.onboarding-list li>a:hover {
    background:#edf1ff;
    color:#4057d6;
}
.onboarding-list li>a svg {
    width:15px;
    height:15px;
}
.panel-footnote {
    display:flex;
    gap:7px;
    align-items:flex-start;
    font-size:9px;
    color:#626e84;
    margin:16px 0 0;
    padding-top:16px;
    border-top:1px solid #f0f1f6;
}
.panel-footnote svg {
    width:13px;
    height:13px;
    flex-shrink:0;
}
.conversation-panel {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.conversation-panel .panel-heading {
    width:100%;
    text-align:left;
}
.empty-illustration {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    position:relative;
    margin:8px 0 15px;
}
.empty-envelope {
    position:relative;
    display:grid;
    place-items:center;
    width:71px;
    height:56px;
    background:#f3f5fc;
    border:1px solid #e4e8f4;
    border-radius:13px;
    transform:rotate(-5deg);
    margin:3px 0;
    color:#626e84;
}
.empty-envelope svg {
    width:29px;
    height:29px;
}
.empty-line {
    width:51px;
    height:5px;
    background:#edf0f8;
    border-radius:3px;
    transform:rotate(-5deg);
}
.empty-line.short {
    width:30px;
}
.conversation-panel>h3 {
    font-size:13px;
    font-weight:600;
    margin:0 0 6px;
}
.conversation-panel>p {
    font-size:10px;
    line-height:1.8;
    color:#626e84;
    max-width:240px;
    margin:0 0 5px;
}
.channel-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:26px 0 0;
    margin-top:6px;
}
.channel-strip .eyebrow {
    font-size:8px;
    margin-bottom:6px;
}
.channel-strip h2 {
    font-size:13px;
    font-weight:550;
    letter-spacing:-.15px;
    margin:0;
}
.channel-wordmarks {
    display:flex;
    align-items:center;
    gap:21px;
    flex-wrap:wrap;
}
.channel-wordmarks>span,.channel-wordmarks>a {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    color:#626e84;
}
.channel-wordmarks>a {
    font-size:9px;
    color:#626e84;
}
.channel-wordmarks>a svg {
    width:13px;
    height:13px;
}
.mini-channel {
    font-style:normal;
    display:inline-grid;
    place-items:center;
    width:19px;
    height:19px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    background:#eef1fa;
    color:#626e84;
}
.whatsapp {
    background:#eaf7f0;
    color:#626e84;
}
.messenger {
    background:#edf1ff;
    color:#626e84;
}
.telegram {
    background:#eaf5fb;
    color:#626e84;
}
.wechat {
    background:#edf8ed;
    color:#626e84;
}
.qq {
    background:#f0f2f8;
    color:#5a6680;
}
.slack {
    background:#f4eefa;
    color:#626e84;
}
.web {
    background:#edf1fe;
    color:#626e84;
}
.info-banner,.preview-banner {
    display:flex;
    align-items:center;
    gap:14px;
    padding:17px 20px;
    background:#f0f3fd;
    border:1px solid #e3e8fa;
    border-radius:10px;
    margin-bottom:23px;
}
.info-banner strong {
    font-size:12px;
    font-weight:600;
}
.info-banner p {
    font-size:11px;
    color:#626e84;
    margin:4px 0 0;
}
.channel-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}
.channel-card {
    padding:23px;
    display:flex;
    flex-direction:column;
}
.channel-card-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:19px;
}
.channel-logo {
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    font-size:27px;
    font-weight:650;
    border-radius:13px;
}
.channel-card h2 {
    font-size:17px;
    margin-bottom:8px;
}
.channel-card>p {
    font-size:11px;
    line-height:1.8;
    color:#626e84;
    margin:0 0 22px;
    flex:1;
}
.channel-card-bottom {
    border-top:1px solid #edf0f5;
    padding-top:15px;
}
.channel-card-bottom>span {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:10px;
    color:#626e84;
    margin-bottom:10px;
}
details summary {
    cursor:pointer;
    list-style:none;
}
details summary::-webkit-details-marker {
    display:none;
}
.channel-card-bottom summary,.source-preview summary {
    display:flex;
    align-items:center;
    gap:8px;
    color:#626e84;
    font-size:10px;
    min-height:32px;
}
.channel-card-bottom summary svg,.source-preview summary svg {
    width:12px;
    height:12px;
}
details[open]>summary svg {
    transform:rotate(90deg);
}
.channel-card-bottom details>p {
    font-size:10px;
    line-height:1.8;
    color:#626e84;
    margin:8px 0 0;
}
.quiet-note {
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-top:25px;
    padding:20px 0;
    color:#626e84;
}
.quiet-note>svg {
    margin-top:2px;
    width:19px;
    height:19px;
}
.quiet-note strong {
    font-size:11px;
    color:#626e84;
    font-weight:600;
}
.quiet-note p {
    font-size:10px;
    line-height:1.8;
    color:#626e84;
    margin:5px 0 0;
    max-width:720px;
}
.knowledge-layout {
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);
    gap:24px;
}
.knowledge-empty,.inbox-empty {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    min-height:450px;
    padding:45px 25px;
}
.knowledge-empty .large-icon,.inbox-empty .large-icon {
    margin-bottom:28px;
}
.knowledge-empty h2,.inbox-empty h2 {
    font-size:24px;
    letter-spacing:-.6px;
    margin:2px 0 12px;
}
.knowledge-empty p,.inbox-empty p {
    font-size:12px;
    line-height:1.9;
    color:#626e84;
    margin:0 0 25px;
}
.button-disabled {
    color:#626e84;
    background:#eef1ff;
    border-color:#e3e8fa;
    opacity:1;
}
.empty-caption {
    font-size:10px;
    color:#626e84;
    margin-top:13px;
}
.knowledge-guide {
    padding:28px;
}
.knowledge-guide>.icon-tile {
    margin-bottom:20px;
}
.knowledge-guide h2 {
    font-size:17px;
}
.knowledge-guide ol {
    list-style:none;
    padding:0;
    margin:26px 0 20px;
}
.knowledge-guide li {
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:24px;
}
.knowledge-guide li>span {
    color:#626e84;
    font-size:12px;
    font-weight:550;
}
.knowledge-guide h3 {
    font-size:12px;
    margin:0 0 6px;
    font-weight:600;
}
.knowledge-guide p {
    font-size:11px;
    color:#626e84;
    line-height:1.8;
    margin:0;
}
.settings-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.settings-list {
    margin:25px 0 0;
}
.settings-list>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:17px 0;
    border-top:1px solid #edf0f5;
    font-size:11px;
}
.settings-list dt {
    color:#626e84;
}
.settings-list dd {
    margin:0;
    color:#59657f;
    text-align:right;
}
.settings-checks>div {
    display:flex;
    align-items:center;
    gap:16px;
    margin:25px 0;
}
.settings-checks strong {
    font-size:12px;
    font-weight:600;
}
.settings-checks p {
    font-size:11px;
    color:#626e84;
    margin:6px 0 0;
}
.privacy-panel {
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:24px;
}
.privacy-panel>.large-icon {
    flex-shrink:0;
}
.privacy-panel p {
    font-size:11px;
    line-height:1.9;
    color:#626e84;
    max-width:720px;
    margin:8px 0 5px;
}
.preview-banner {
    padding:12px 16px;
    font-size:10px;
    color:#626e84;
    background:#f5f2fc;
    border-color:#eae4f5;
    gap:12px;
}
.preview-tag {
    font-size:8px;
    letter-spacing:.7px;
    font-weight:650;
    white-space:nowrap;
    color:#626e84;
}
.inbox-workspace {
    display:grid;
    grid-template-columns:278px minmax(0,1fr) 210px;
    min-height:630px;
    background:#fff;
    border:1px solid var(--portal-line);
    border-radius:13px;
    overflow:hidden;
}
.inbox-list {
    display:flex;
    flex-direction:column;
    border-right:1px solid var(--portal-line);
    min-width:0;
}
.inbox-list-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:21px 18px 15px;
}
.inbox-list-heading h2 {
    font-size:13px;
    font-weight:600;
    margin:0;
}
.inbox-list-heading h2>span {
    font-size:10px;
    font-weight:400;
    margin-left:6px;
    color:#626e84;
}
.inbox-search {
    margin:0 15px 14px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 10px;
    border:1px solid #e9ecf3;
    border-radius:7px;
    background:#fafbfe;
}
.inbox-search svg {
    width:15px;
    height:15px;
    color:#626e84;
}
.inbox-search input {
    width:100%;
    min-width:0;
    border:0;
    outline:none;
    background:none;
    font-size:10px;
    color:#58657f;
}
.inbox-search:focus-within {
    outline:2px solid #7385db;
    outline-offset:2px;
}
.inbox-filters {
    display:flex;
    gap:12px;
    margin:0 16px;
    border-bottom:1px solid #edf0f6;
}
.inbox-filters button {
    font-size:9px;
    border:0;
    border-bottom:2px solid transparent;
    background:none;
    padding:8px 0 12px;
    color:#626e84;
    min-height:36px;
}
.inbox-filters button.selected {
    color:#626e84;
    border-bottom-color:#576cce;
}
.conversation-list {
    padding:8px 7px;
}
.conversation-item {
    display:flex;
    align-items:flex-start;
    gap:9px;
    width:100%;
    min-width:0;
    padding:17px 10px;
    background:white;
    border:0;
    border-radius:7px;
    text-align:left;
}
.conversation-item:hover {
    background:#f8f9fd;
}
.conversation-item.selected {
    background:#f0f3ff;
}
.contact-avatar {
    flex-shrink:0;
    width:33px;
    height:33px;
    border-radius:50%;
    display:inline-grid;
    place-items:center;
    font-size:10px;
    color:#626e84;
    background:#f1ebf8;
}
.mint {
    background:#e8f4ef;
    color:#626e84;
}
.peach {
    background:#fbefe8;
    color:#626e84;
}
.conversation-summary {
    min-width:0;
    flex:1;
}
.conversation-name {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    font-size:11px;
    color:#414d69;
    font-weight:600;
}
.conversation-name small {
    font-size:8px;
    font-weight:400;
    color:#626e84;
    white-space:nowrap;
}
.conversation-topic {
    display:block;
    font-size:9px;
    color:#626e84;
    margin:3px 0 6px;
}
.conversation-last {
    display:block;
    font-size:10px;
    color:#626e84;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
.conversation-meta {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:8px;
    color:#626e84;
    margin-top:9px;
}
.conversation-meta .mini-channel {
    width:12px;
    height:12px;
    font-size:8px;
    border-radius:3px;
}
.status-label {
    margin-left:auto;
    color:#626e84;
    font-size:7px;
}
.amber {
    color:#b38b42!important;
    background:#fbf5e8!important;
}
.inbox-list-footer {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:9px;
    color:#626e84;
    padding:15px 17px;
    border-top:1px solid #edf0f5;
    margin-top:auto;
}
.conversation-detail {
    display:flex;
    flex-direction:column;
    min-width:0;
}
.conversation-header {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:76px;
    padding:17px 22px;
    border-bottom:1px solid #edf0f5;
}
.conversation-header h2 {
    font-size:12px;
    font-weight:600;
    margin:0 0 3px;
}
.conversation-header>div>span {
    font-size:9px;
    color:#626e84;
}
.conversation-state {
    font-size:8px;
    color:#626e84;
    background:#eff3fc;
    border:1px solid #e4ebfa;
    padding:4px 7px;
    border-radius:5px;
    margin-left:auto;
    white-space:nowrap;
}
.chat-transcript {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:21px;
    padding:27px 25px;
    flex:1;
    background:#fcfcfe;
    min-height:337px;
}
.transcript-date {
    font-size:7px;
    letter-spacing:1.1px;
    color:#626e84;
    align-self:center;
    margin-bottom:9px;
}
.chat-message {
    max-width:93%;
    padding:15px 17px;
    border:1px solid #e9ecf3;
    border-radius:0 12px 12px 12px;
    background:#fff;
}
.chat-message p {
    font-size:11px;
    line-height:1.85;
    color:#626e84;
    margin:8px 0;
}
.message-author {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:9px;
    font-weight:600;
    color:#626e84;
}
.message-author .quokka-mark {
    width:20px;
    height:20px;
}
.message-author>span {
    font-size:7px;
    color:#626e84;
    font-weight:400;
    margin-left:auto;
}
.chat-message time {
    display:block;
    text-align:right;
    font-size:7px;
    color:#626e84;
}
.chat-message.assistant {
    background:#f0f3ff;
    border-color:#e3e9ff;
    align-self:flex-end;
    border-radius:12px 0 12px 12px;
}
.message-source {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:8px;
    color:#626e84;
    border-top:1px solid #dfe6fa;
    padding-top:10px;
    margin-top:12px;
}
.message-source svg {
    width:12px;
    height:12px;
}
.transcript-note {
    display:flex;
    align-items:center;
    align-self:center;
    gap:6px;
    font-size:8px;
    color:#626e84;
    text-align:center;
}
.transcript-note svg {
    width:12px;
    height:12px;
}
.reply-preview {
    padding:18px;
    border-top:1px solid #edf0f5;
}
.reply-preview label {
    display:block;
    font-size:9px;
    color:#626e84;
    margin-bottom:8px;
}
.reply-preview textarea {
    width:100%;
    resize:none;
    background:#fbfcfe;
    border:1px solid #e9edf5;
    padding:12px;
    border-radius:8px;
    font-size:10px;
    color:#626e84;
}
.reply-preview textarea::placeholder {
    color:#626e84;
}
.reply-preview>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:9px;
}
.reply-preview>div>span {
    font-size:8px;
    color:#626e84;
}
.reply-preview .button {
    font-size:9px;
    min-height:32px;
    padding:7px 10px;
}
.conversation-context {
    border-left:1px solid #edf0f5;
    padding:24px 18px;
    background:#fff;
}
.conversation-context>.eyebrow {
    font-size:8px;
}
.conversation-context>h2 {
    font-size:13px;
    line-height:1.5;
    font-weight:600;
    letter-spacing:-.3px;
}
.context-contact {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:23px 0 19px;
    border-bottom:1px solid #edf0f5;
    gap:6px;
}
.context-contact .contact-avatar {
    width:45px;
    height:45px;
    font-size:14px;
    margin-bottom:4px;
}
.context-contact strong {
    font-size:11px;
    font-weight:550;
}
.context-contact>span:last-child {
    font-size:8px;
    color:#626e84;
}
.conversation-context dl {
    margin:17px 0 23px;
}
.conversation-context dl>div {
    display:flex;
    justify-content:space-between;
    gap:9px;
    font-size:8px;
    margin-bottom:12px;
}
.conversation-context dt {
    color:#626e84;
}
.conversation-context dd {
    margin:0;
    text-align:right;
    color:#626e84;
}
.source-preview {
    padding:13px;
    background:#f9fafe;
    border:1px solid #e9edf8;
    border-radius:9px;
}
.source-preview .icon-tile {
    width:27px;
    height:27px;
    margin-bottom:10px;
}
.source-preview h3 {
    font-size:10px;
    font-weight:600;
    margin:0 0 6px;
}
.source-preview>p {
    font-size:8px;
    color:#626e84;
    line-height:1.8;
    margin:0;
}
.source-preview summary {
    font-size:8px;
    margin-top:6px;
}
.source-preview blockquote {
    font-size:9px;
    line-height:1.9;
    color:#626e84;
    margin:8px 0 0;
    border-left:2px solid #dce4fc;
    padding-left:8px;
}
.context-note {
    font-size:8px;
    color:#626e84;
    line-height:1.9;
    margin-top:20px;
}
.context-note svg {
    width:12px;
    height:12px;
    margin-right:3px;
}
.search-empty {
    padding:30px 12px;
    text-align:center;
    color:#626e84;
}
.search-empty>svg {
    width:22px;
    height:22px;
    margin-bottom:12px;
}
.search-empty strong {
    display:block;
    font-size:11px;
}
.search-empty p {
    font-size:10px;
}
.search-empty .text-link {
    font-size:10px;
}
.inbox-empty {
    min-height:540px;
}
.empty-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}
@media(min-width:1550px) {
    .portal-content {
        padding-top:44px;
    }
    .welcome-panel {
        min-height:315px;
    }
    .welcome-art {
        min-height:250px;
    }
    .welcome-copy h2 {
        font-size:40px;
    }
}
@media(max-width:1250px) {
    .portal-sider {
        width:211px;
    }
    .portal-main {
        margin-left:211px;
    }
    .portal-content {
        padding:28px;
    }
    .portal-header {
        padding:0 28px;
    }
    .page-heading h1 {
        font-size:25px;
    }
    .welcome-panel {
        padding:28px;
        grid-template-columns:minmax(0,1fr) minmax(230px,.8fr);
    }
    .welcome-copy h2 {
        font-size:32px;
    }
    .welcome-art {
        transform:scale(.9);
    }
    .stat-card {
        padding:16px;
    }
    .stat-label {
        font-size:9px;
    }
    .stat-caption {
        font-size:8px;
    }
    .channel-strip {
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }
    .inbox-workspace {
        grid-template-columns:245px minmax(0,1fr);
    }
    .conversation-context {
        grid-column:1/-1;
        border-left:0;
        border-top:1px solid #edf0f5;
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:30px;
    }
    .conversation-context>.eyebrow,.conversation-context>h2 {
        grid-column:1/-1;
    }
    .context-contact {
        grid-column:1;
        grid-row:3/5;
        border:0;
    }
    .conversation-context dl {
        grid-column:2;
    }
    .source-preview {
        grid-column:2;
    }
    .context-note {
        grid-column:1/-1;
    }
    .overview-columns {
        gap:18px;
    }
    .surface-panel {
        padding:22px;
    }
}
@media(max-width:1000px) {
    .portal-sider {
        width:190px;
    }
    .portal-main {
        margin-left:190px;
    }
    .quokka-brand {
        font-size:26px;
        padding:0 22px;
    }
    .workspace-switch {
        margin:5px 13px 27px;
        padding:8px;
    }
    .workspace-switch>svg {
        display:none;
    }
    .quokka-nav {
        padding:0 10px;
    }
    .quokka-nav>a {
        font-size:12px;
        padding:0 11px;
        gap:9px;
    }
    .nav-preview {
        font-size:8px;
    }
    .setup-card {
        margin:12px 14px 22px;
    }
    .workspace-profile {
        padding:15px 12px;
        gap:7px;
    }
    .workspace-profile strong {
        font-size:10px;
    }
    .portal-content {
        padding:25px;
    }
    .welcome-panel {
        grid-template-columns:1fr 220px;
        padding:25px;
    }
    .welcome-copy h2 {
        font-size:29px;
    }
    .welcome-art {
        transform:scale(.82);
        transform-origin:center;
    }
    .note-top {
        left:-14px;
    }
    .note-bottom {
        right:-17px;
    }
    .workspace-stats {
        gap:12px;
    }
    .stat-card {
        padding:14px 12px;
    }
    .stat-icon {
        display:none;
    }
    .stat-label {
        margin-right:0;
    }
    .stat-card>strong.stat-word {
        font-size:16px;
    }
    .overview-columns {
        grid-template-columns:1fr;
    }
    .channel-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .knowledge-layout {
        grid-template-columns:1fr;
    }
    .knowledge-empty {
        min-height:370px;
    }
    .knowledge-guide ol {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }
    .settings-layout {
        grid-template-columns:1fr;
    }
    .page-heading>.button {
        flex-shrink:0;
    }
    .inbox-workspace {
        grid-template-columns:215px minmax(0,1fr);
    }
    .conversation-item {
        padding:15px 7px;
        gap:7px;
    }
    .conversation-item .contact-avatar {
        width:27px;
        height:27px;
        font-size:9px;
    }
    .conversation-name {
        font-size:10px;
    }
    .conversation-name small {
        font-size:7px;
    }
    .conversation-header {
        padding:15px;
    }
    .conversation-state {
        font-size:7px;
    }
    .chat-transcript {
        padding:24px 16px;
    }
    .chat-message {
        max-width:98%;
        padding:13px;
    }
    .chat-message p {
        font-size:10px;
    }
    .message-author>span {
        font-size:6px;
    }
    .reply-preview>div>span {
        max-width:110px;
    }
    .header-subtitle {
        display:none;
    }
}
@media(max-width:760px) {
    .portal-sider {
        display:none;
    }
    .portal-main {
        margin-left:0;
    }
    .portal-header {
        height:55px;
        min-height:55px;
        padding:0 21px;
        gap:11px;
    }
    .header-location {
        font-size:10px;
        gap:8px;
    }
    .header-slash {
        display:none;
    }
    .header-help {
        width:24px;
    }
    .environment-badge {
        font-size:8px;
        padding:4px 7px;
    }
    .mobile-navigation {
        display:block;
        background:#fff;
        border-bottom:1px solid var(--portal-line);
    }
    .mobile-navigation>summary {
        display:flex;
        align-items:center;
        justify-content:space-between;
        min-height:59px;
        padding:10px 21px;
        font-size:13px;
        font-weight:650;
    }
    .mobile-navigation>summary>span {
        display:flex;
        align-items:center;
        gap:9px;
    }
    .mobile-navigation>summary>span:last-child {
        font-size:11px;
        font-weight:500;
        color:#626e84;
    }
    .mobile-navigation .quokka-mark {
        width:28px;
        height:28px;
    }
    .mobile-navigation summary svg:not(.quokka-mark) {
        width:18px;
        height:18px;
    }
    .mobile-navigation .quokka-nav {
        padding:0 14px 15px;
    }
    .portal-content {
        padding:26px 20px;
    }
    .page-heading {
        align-items:flex-start;
        margin-bottom:23px;
        gap:15px;
    }
    .page-heading h1 {
        font-size:25px;
        max-width:290px;
    }
    .page-heading p {
        font-size:11px;
        line-height:1.8;
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:1.2px;
    }
    .page-heading>.button {
        font-size:0;
        padding:10px;
        min-width:39px;
    }
    .page-heading>.button svg {
        width:15px;
        height:15px;
    }
    .page-heading>.button[aria-label] {
        font-size:11px;
    }
    .welcome-panel {
        grid-template-columns:1fr 200px;
        padding:25px;
        min-height:260px;
    }
    .welcome-copy h2 {
        font-size:30px;
    }
    .welcome-copy p {
        font-size:10px;
    }
    .welcome-art {
        min-height:210px;
        transform:scale(.8);
    }
    .welcome-caption {
        font-size:8px;
    }
    .workspace-stats {
        gap:12px;
        margin:18px 0;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .stat-card {
        padding:17px 18px;
        min-height:112px;
    }
    .stat-icon {
        display:block;
    }
    .stat-label {
        font-size:10px;
    }
    .stat-caption {
        font-size:9px;
    }
    .stat-card>strong.stat-word {
        font-size:20px;
    }
    .overview-columns {
        gap:18px;
    }
    .panel-heading h2 {
        font-size:15px;
    }
    .panel-heading p {
        font-size:10px;
    }
    .surface-panel {
        padding:23px;
    }
    .channel-strip {
        padding:23px 2px 5px;
    }
    .channel-wordmarks {
        gap:15px;
    }
    .channel-wordmarks>span {
        font-size:9px;
    }
    .portal-footer {
        padding:15px 22px;
        font-size:9px;
        flex-wrap:wrap;
    }
    .channel-grid {
        gap:14px;
    }
    .channel-card {
        padding:18px;
    }
    .channel-card-top {
        flex-wrap:wrap;
    }
    .channel-card h2 {
        font-size:16px;
    }
    .channel-card>p {
        font-size:10px;
    }
    .info-banner {
        padding:16px;
        align-items:flex-start;
    }
    .info-banner p {
        font-size:10px;
    }
    .info-banner .icon-tile {
        flex-shrink:0;
    }
    .knowledge-guide ol {
        grid-template-columns:1fr;
    }
    .knowledge-empty h2,.inbox-empty h2 {
        font-size:22px;
    }
    .knowledge-empty p,.inbox-empty p {
        font-size:11px;
    }
    .knowledge-empty {
        padding:35px 18px;
    }
    .privacy-panel {
        align-items:flex-start;
        gap:16px;
    }
    .privacy-panel>.large-icon {
        width:43px;
        height:43px;
        border-radius:13px;
    }
    .privacy-panel>.large-icon svg {
        width:22px;
        height:22px;
    }
    .inbox-workspace {
        grid-template-columns:235px minmax(0,1fr);
    }
    .preview-banner {
        flex-wrap:wrap;
        gap:5px;
    }
    .conversation-context {
        padding:24px;
    }
    .conversation-header {
        flex-wrap:wrap;
    }
    .conversation-state {
        margin-left:42px;
        margin-top:-5px;
    }
    .chat-message p {
        font-size:11px;
    }
}
@media(max-width:540px) {
    .page-heading {
        flex-wrap:wrap;
    }
    .page-heading>.button {
        font-size:10px;
        min-height:36px;
    }
    .page-heading h1 {
        max-width:100%;
    }
    .welcome-panel {
        grid-template-columns:1fr;
        padding:25px;
        min-height:435px;
    }
    .welcome-copy {
        max-width:100%;
    }
    .welcome-copy h2 {
        font-size:33px;
    }
    .welcome-copy p {
        max-width:245px;
    }
    .welcome-copy .button {
        position:relative;
        z-index:3;
    }
    .welcome-art {
        position:absolute;
        width:205px;
        height:205px;
        right:5px;
        bottom:-4px;
        transform:scale(.82);
        transform-origin:bottom right;
        opacity:.95;
    }
    .welcome-caption {
        position:relative;
        z-index:3;
        max-width:150px;
        line-height:1.7;
    }
    .art-bot {
        width:123px;
        height:130px;
    }
    .art-bot .quokka-mark {
        width:60px;
        height:60px;
    }
    .note-top {
        left:-42px;
        top:6px;
    }
    .note-bottom {
        right:2px;
        bottom:-10px;
    }
    .spark-one {
        right:0;
        top:12px;
    }
    .spark-two {
        left:-20px;
        bottom:0;
    }
    .orbit-one {
        width:235px;
        height:235px;
    }
    .orbit-two {
        width:320px;
        height:320px;
    }
    .desktop-break {
        display:none;
    }
    .onboarding-list li {
        gap:11px;
    }
    .onboarding-list h3 {
        font-size:11px;
    }
    .onboarding-list p {
        font-size:9px;
        line-height:1.8;
    }
    .onboarding-list li>a {
        min-width:32px;
    }
    .panel-footnote {
        line-height:1.8;
    }
    .channel-grid {
        grid-template-columns:1fr;
    }
    .channel-card-top {
        flex-wrap:nowrap;
    }
    .channel-card>p {
        font-size:11px;
    }
    .settings-list>div {
        font-size:10px;
    }
    .privacy-panel {
        flex-direction:column;
    }
    .inbox-workspace {
        grid-template-columns:minmax(0,1fr);
    }
    .inbox-list {
        border-right:0;
        border-bottom:1px solid var(--portal-line);
    }
    .conversation-list {
        max-height:240px;
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .conversation-item .contact-avatar {
        width:33px;
        height:33px;
        font-size:10px;
    }
    .conversation-name {
        font-size:11px;
    }
    .conversation-name small {
        font-size:9px;
    }
    .conversation-item {
        padding:15px 12px;
    }
    .conversation-meta {
        font-size:9px;
    }
    .status-label {
        font-size:8px;
    }
    .conversation-header {
        padding:18px;
        flex-wrap:nowrap;
    }
    .conversation-state {
        margin-left:auto;
        margin-top:0;
    }
    .chat-transcript {
        padding:24px 20px;
        min-height:375px;
    }
    .chat-message {
        max-width:93%;
    }
    .message-author>span {
        font-size:7px;
    }
    .reply-preview>div>span {
        max-width:none;
    }
    .conversation-context {
        grid-template-columns:1fr;
    }
    .conversation-context>.eyebrow,.conversation-context>h2,.context-contact,.conversation-context dl,.source-preview,.context-note {
        grid-column:1;
        grid-row:auto;
    }
    .context-contact {
        border-bottom:1px solid #edf0f5;
    }
    .conversation-context dl {
        font-size:10px;
    }
    .conversation-context dl>div {
        font-size:10px;
    }
    .source-preview h3 {
        font-size:12px;
    }
    .source-preview>p,.source-preview summary,.source-preview blockquote,.context-note {
        font-size:10px;
    }
    .empty-actions {
        flex-direction:column;
        width:100%;
    }
    .knowledge-empty p br {
        display:none;
    }
    .inbox-search input {
        font-size:16px;
    }
    .conversation-panel .panel-heading {
        align-items:flex-start;
    }
    .header-location strong {
        font-size:10px;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        transition:none!important;
        animation:none!important;
        scroll-behavior:auto!important;
    }
}