/* Desktop shell only. The existing mobile bottom navigation stays unchanged. */
.desktop-shell-only,
.desktop-nav-only { display: none; }

@media (max-width: 760px) {
  body.inbox-open #main-nav .section-nav-button.desktop-nav-only { display: none; }
}

@media (min-width: 761px) {
  body.desktop-session { --desktop-nav-width: 188px; }
  body.desktop-session .topbar {
    gap: 12px; min-height: 62px; padding: 8px 22px;
    border-color: #e9ebf2; background: rgb(255 255 255 / 96%);
  }
  body.desktop-session .desktop-shell-only { display: block; }
  body.desktop-session .brand { margin-right: auto; }
  body.desktop-session .brand-mark {
    width: 38px; height: 38px; border: 0; border-radius: 11px;
    background: linear-gradient(145deg, #8776fc, #5558e6); font-size: 19px;
  }
  body.desktop-session .brand strong { font-size: .9rem; }
  body.desktop-session .brand small {
    max-width: 220px; overflow: hidden; color: #81879b;
    font-family: var(--sans); font-size: .69rem; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap;
  }
  body.desktop-session .desktop-nav-toggle {
    flex: 0 0 38px; display: grid; width: 38px; height: 38px; place-items: center;
    padding: 8px; border: 1px solid #e8eaf2; border-radius: 10px;
    background: white; color: #4c536a; cursor: pointer;
  }
  body.desktop-session .desktop-nav-toggle:hover,
  body.desktop-session .desktop-account-menu > summary:hover,
  body.desktop-session #refresh-button:hover { background: #f3f1ff; color: #5a51df; }
  body.desktop-session .desktop-nav-toggle svg,
  body.desktop-session #refresh-button svg,
  body.desktop-session .desktop-account-menu svg {
    width: 19px; height: 19px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  body.desktop-session .topbar-actions { gap: 8px; }
  body.desktop-session .live-indicator {
    gap: 7px; padding: 0 11px; color: #626a7e; white-space: nowrap; font-size: .73rem;
  }
  body.desktop-session .live-indicator i { flex: 0 0 7px; }
  body.desktop-session .refresh-control { position: relative; }
  body.desktop-session #refresh-button {
    display: grid; width: 38px; height: 38px; min-height: 38px; place-items: center;
    padding: 0; border: 1px solid #e8eaf2; border-radius: 10px; background: white;
  }
  body.desktop-session #refresh-button span { display: none; }
  body.desktop-session #refresh-button svg { display: block; }
  body.desktop-session #refresh-button[aria-busy="true"] svg { animation: desktop-refresh-spin .8s linear infinite; }
  body.desktop-session #data-updated-at { display: none; }
  body.desktop-session #logout-button { display: none; }
  body.desktop-session .desktop-account-menu { position: relative; }
  body.desktop-session .desktop-account-menu > summary {
    display: flex; gap: 5px; align-items: center; padding: 2px 5px 2px 2px;
    border: 1px solid #e8eaf2; border-radius: 22px; cursor: pointer; list-style: none;
  }
  body.desktop-session .desktop-account-menu > summary::-webkit-details-marker { display: none; }
  body.desktop-session #desktop-account-avatar {
    display: grid; width: 32px; height: 32px; place-items: center;
    border-radius: 50%; background: #303746; color: white; font-size: .84rem; font-weight: 700;
  }
  body.desktop-session .desktop-account-menu svg { width: 15px; height: 15px; }
  body.desktop-session .desktop-account-popover {
    position: absolute; z-index: 20; top: calc(100% + 9px); right: 0;
    display: grid; gap: 4px; min-width: 210px; padding: 14px;
    border: 1px solid #e8eaf2; border-radius: 12px; background: white;
    box-shadow: 0 12px 28px rgb(37 36 75 / 14%);
  }
  body.desktop-session .desktop-account-popover strong { font-size: .85rem; }
  body.desktop-session #desktop-account-role { color: #81879b; font-size: .75rem; }
  body.desktop-session #desktop-account-preferences { margin-top: 8px; text-align: left; }
  body.desktop-session .desktop-account-theme { display: grid; gap: 5px; margin-top: 7px; color: #626a7e; font-size: .75rem; }
  body.desktop-session .desktop-account-theme select {
    width: 100%; min-height: 34px; padding: 5px 8px; border: 1px solid #e8eaf2;
    border-radius: 8px; background: #fff; color: #303746; font: inherit;
  }
  body.desktop-session #desktop-logout-button { margin-top: 8px; text-align: left; }

  body.desktop-session #main-nav {
    position: fixed; z-index: 9; top: 62px; bottom: 0; left: 0;
    display: flex; flex-direction: column; gap: 4px; width: var(--desktop-nav-width);
    max-width: none; max-height: none; padding: 22px 11px 14px;
    border: 0; border-right: 1px solid #e9ebf2; border-radius: 0;
    background: #fff; box-shadow: none; overflow-x: hidden; overflow-y: auto;
    transition: transform .18s ease, visibility .18s;
  }
  body.desktop-session #main-nav .desktop-nav-caption {
    margin: 0 10px 8px; color: #9a9eac; font-size: .64rem;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  }
  body.desktop-session #main-nav .section-nav-button,
  body.desktop-session #main-nav .desktop-nav-only {
    display: flex; gap: 10px; align-items: center; width: 100%; min-height: 40px;
    padding: 8px 10px; border-radius: 9px; color: #626b7e;
    font-size: .79rem; font-weight: 600; text-align: left;
  }
  body.desktop-session #main-nav .section-nav-button:hover { background: #f6f5ff; color: #5b53dc; }
  body.desktop-session #main-nav .section-nav-button.is-active { background: #f0edff; color: #554ddd; }
  body.desktop-session #main-nav .section-nav-button::before {
    content: ''; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor;
    mask: var(--desktop-nav-icon) center / contain no-repeat;
  }
  body.desktop-session #main-nav .section-nav-button span {
    margin-left: auto; padding: 1px 6px; border-radius: 9px;
    background: #eef0f5; font-size: .65rem;
  }
  body.desktop-session #main-nav .section-nav-button.is-active span { background: #e1dcff; }
  body.desktop-session #main-nav [data-view="settings"] { margin-top: auto; }
  body.desktop-session.desktop-nav-collapsed #main-nav {
    transform: translateX(-100%); visibility: hidden; pointer-events: none;
  }
  body.desktop-session main {
    width: auto; max-width: none; margin: 0 0 0 var(--desktop-nav-width);
    padding: 22px 20px 44px; transition: margin-left .18s ease;
  }
  body.desktop-session.desktop-nav-collapsed main { margin-left: 0; }
  body.desktop-session #inbound-view { width: 100%; margin-left: 0; transform: none; }
  body.desktop-session #main-nav [data-view="overview"] { --desktop-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 10 9-7 9 7v11h-7v-7h-4v7H3Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  body.desktop-session #main-nav [data-view="statistics"] { --desktop-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20V10m8 10V4m8 16V8' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
  body.desktop-session #main-nav [data-view="inbound"] { --desktop-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 11a9 9 0 0 1-9 9H4l-3 3 2-7a9 9 0 1 1 18-5Z' fill='black'/%3E%3C/svg%3E"); }
  body.desktop-session #main-nav [data-view="calls"] { --desktop-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 3 4 5-3 3a16 16 0 0 0 6 6l3-3 5 4c-1 7-9 3-13-1S0 4 6 3Z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
  body.desktop-session #main-nav [data-view="templates"] { --desktop-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h10l4 4v14H5Zm10 0v5h4M8 12h8M8 16h8' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  body.desktop-session #main-nav [data-view="auto-replies"] { --desktop-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H9l-5 4Zm4 5h8M8 13h5' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  body.desktop-session #main-nav [data-view="settings"] { --desktop-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
}

@keyframes desktop-refresh-spin { to { transform: rotate(360deg); } }

@media (min-width: 761px) and (max-width: 1100px) {
  body.desktop-session .brand small { display: none; }
  body.desktop-session .live-indicator { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  body.desktop-session main { padding-inline: 12px; }
}