/* Stage 4: web chat and contact card. Mobile keeps its existing DOM order and styles. */
@media (min-width: 761px) {
  #inbound-view .conversation-chat { position: relative; }
  .desktop-day-divider {
    display: flex; justify-content: center; margin: 12px 0 16px;
    color: #788197; font-size: .7rem; font-weight: 650;
  }
  .desktop-day-divider span { padding: 5px 10px; border: 1px solid #e7e8f1; border-radius: 999px; background: #fff; }
  #inbound-view .desktop-new-messages {
    position: absolute; z-index: 5; right: 20px; min-height: 34px; padding: 7px 12px;
    border: 1px solid #cfc9ff; border-radius: 999px; background: #f0edff;
    color: #5149c6; box-shadow: 0 8px 20px rgb(44 45 93 / 16%);
    font-size: .74rem; font-weight: 700;
  }
  #inbound-view .desktop-new-messages[hidden] { display: none; }
  #inbound-view .conversation-chat-header {
    min-height: 68px; padding: 12px 16px; background: #fff; gap: 11px;
  }
  #inbound-view .conversation-chat-header h2 { font-size: 1rem; line-height: 1.2; }
  #inbound-view .conversation-chat-header p { margin-top: 3px; font-size: .72rem; }
  #inbound-view .desktop-chat-assignee { display: inline-block; margin-top: 4px; color: #777e91; font-size: .68rem; }
  #inbound-view .desktop-chat-assignee[hidden] { display: none; }
  #inbound-view .conversation-chat-header > #mark-conversation-read,
  #inbound-view .conversation-chat-header > #reply-not-required,
  #inbound-view .conversation-chat-header > #reply-snooze,
  #inbound-view .conversation-chat-header > #open-message-search { display: none; }
  #inbound-view #conversation-latest:not([hidden]) { display: inline-flex; padding: 7px 9px; white-space: nowrap; }
  #inbound-view #open-contact-panel:not([hidden]) { padding: 7px 9px; white-space: nowrap; }
  #inbound-view .desktop-contact-toggle {
    flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid #e2e5ee;
    border-radius: 9px; background: #fff; color: #586078; font-size: 20px; cursor: pointer;
  }
  #inbound-view .desktop-contact-toggle:hover { background: #f2f0ff; color: #554ddd; }
  .desktop-chat-menu { position: relative; flex: 0 0 auto; }
  .desktop-chat-menu > summary {
    display: grid; width: 34px; height: 34px; place-items: center; list-style: none;
    border: 1px solid #e2e5ee; border-radius: 9px; color: #586078;
    background: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  }
  .desktop-chat-menu > summary::-webkit-details-marker { display: none; }
  .desktop-chat-menu[open] > summary,
  .desktop-chat-menu > summary:hover { background: #f2f0ff; color: #554ddd; }
  .desktop-chat-menu-popover {
    position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 210px;
    padding: 5px; border: 1px solid #e3e5ef; border-radius: 10px;
    background: #fff; box-shadow: 0 12px 30px rgb(44 45 93 / 15%);
  }
  .desktop-chat-menu-popover button {
    display: block; width: 100%; min-height: 34px; padding: 7px 9px;
    border: 0; border-radius: 7px; background: transparent; color: #3d4357;
    font: inherit; font-size: .73rem; text-align: left; cursor: pointer;
  }
  .desktop-chat-menu-popover button:hover { background: #f5f3ff; }
  .desktop-chat-menu-popover button[hidden] { display: none; }
  .desktop-chat-menu-popover button:disabled { opacity: .5; cursor: default; }

  .desktop-unread-divider {
    display: flex; align-items: center; gap: 10px; margin: 12px 0 18px;
    color: #5e55d8; font-size: .72rem; font-weight: 700;
  }
  .desktop-unread-divider::before,
  .desktop-unread-divider::after { content: ''; height: 1px; flex: 1; background: #dcd8ff; }
  .desktop-unread-divider span { padding: 5px 9px; border-radius: 999px; background: #f0edff; white-space: nowrap; }
  .desktop-message-menu { position: absolute; right: 7px; bottom: 6px; width: fit-content; margin: 0; }
  #inbound-view .conversation-bubble:has(.desktop-message-menu) footer { padding-right: 20px; }
  .desktop-message-menu > summary {
    display: grid; width: 22px; height: 20px; place-items: center; border-radius: 5px;
    color: #777f93; font-size: 17px; line-height: 1; list-style: none; cursor: pointer;
    opacity: 0;
  }
  #inbound-view .conversation-message:hover .desktop-message-menu > summary,
  #inbound-view .conversation-message:focus-within .desktop-message-menu > summary,
  .desktop-message-menu[open] > summary { opacity: 1; }
  .desktop-message-menu > summary::-webkit-details-marker { display: none; }
  .desktop-message-menu > summary:hover,
  .desktop-message-menu[open] > summary { background: #efedff; color: #514bd1; }
  .desktop-message-menu .conversation-message-actions {
    position: absolute; z-index: 8; top: calc(100% + 3px); right: 0;
    display: grid; gap: 0; width: max-content; min-width: 125px; margin: 0; padding: 4px;
    justify-content: stretch; justify-items: stretch;
    border: 1px solid #e4e5ef; border-radius: 8px; background: #fff;
    box-shadow: 0 8px 20px rgb(40 42 80 / 15%);
  }
  .desktop-message-menu .conversation-message-actions button {
    display: block; width: 100%; padding: 7px 8px; border-radius: 5px; font-size: .72rem; text-align: left;
  }
  .desktop-message-menu .conversation-message-actions button:hover { background: #f3f1ff; }
  .desktop-message-menu.is-flipped .conversation-message-actions { left: 0; right: auto; }
  .desktop-message-menu.is-above .conversation-message-actions { top: auto; bottom: calc(100% + 4px); }
  #inbound-view .conversation-message:has(.desktop-message-menu[open]) { z-index: 20; }
  #inbound-view .conversation-bubble > .conversation-message-actions { display: none; }

  #inbound-view .conversation-composer { gap: 8px; padding: 10px 12px 12px; }
  .desktop-compose-tabs { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid #e9e8f2; }
  .desktop-compose-tabs button {
    min-height: 27px; padding: 0 3px 7px; border: 0; border-bottom: 2px solid transparent;
    background: transparent; color: #7a8295; font: inherit; font-size: .73rem; cursor: pointer;
  }
  .desktop-compose-tabs button[aria-selected="true"] { border-color: #6659e5; color: #383b70; font-weight: 700; }
  .desktop-compose-tabs button:disabled { opacity: .45; cursor: default; }
  #desktop-inline-note { display: grid; gap: 7px; }
  #desktop-inline-note[hidden] { display: none; }
  #desktop-note-input {
    width: 100%; min-height: 75px; padding: 10px 11px; resize: vertical;
    border: 1px solid #e2dfef; border-radius: 9px; background: #fffdf7;
    color: #2f3446; font: inherit; font-size: .8rem;
  }
  .desktop-inline-note-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .desktop-inline-note-actions span { color: #848b9c; font-size: .67rem; line-height: 1.35; }
  .desktop-inline-note-actions button { min-height: 33px; padding: 7px 10px; font-size: .72rem; white-space: nowrap; }
  #desktop-note-status { margin: 0; color: #6266a1; font-size: .72rem; }
  #desktop-note-status:empty { display: none; }
  #inbound-view .conversation-composer.desktop-note-mode { opacity: 1; }
  #inbound-view .conversation-composer.desktop-note-mode > #conversation-message-input,
  #inbound-view .conversation-composer.desktop-note-mode > #conversation-draft-status,
  #inbound-view .conversation-composer.desktop-note-mode > #conversation-presence,
  #inbound-view .conversation-composer.desktop-note-mode > .conversation-composer-actions,
  #inbound-view .conversation-composer.desktop-note-mode > #conversation-message-error { display: none; }

  #inbound-view .conversation-contact { padding: 0; background: #fff; }
  .desktop-contact-tabs {
    position: sticky; z-index: 4; top: 0; display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #e7e8f1; background: #fff;
  }
  .desktop-contact-tabs button {
    min-width: 0; min-height: 43px; padding: 7px 2px;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    color: #788197; font: inherit; font-size: .67rem; cursor: pointer;
  }
  .desktop-contact-tabs button[aria-selected="true"] { border-color: #6659e5; color: #3e426f; font-weight: 700; }
  .desktop-contact-tabs button:hover { background: #f8f7ff; }
  .desktop-contact-panel-page { padding: 14px; }
  .desktop-contact-panel-page[hidden] { display: none; }
  #desktop-contact-panel-contact > .eyebrow { display: none; }
  #desktop-contact-panel-contact .conversation-contact-title { margin-bottom: 8px; }
  #desktop-contact-panel-contact .conversation-contact-details { margin-top: 9px; }
  #desktop-contact-panel-contact .conversation-contact-details div { padding: 7px 0; }
  #desktop-contact-lesson-brief {
    width: 100%; margin: 12px 0; padding: 10px 11px; border: 1px solid #e5e4f3;
    border-radius: 9px; background: #f7f7ff; color: #414477; text-align: left;
    font: inherit; font-size: .73rem; line-height: 1.45; cursor: pointer;
  }
  #desktop-contact-lesson-brief[hidden] { display: none; }
  .desktop-contact-tags { display: grid; gap: 7px; margin: 10px 0 14px; }
  .desktop-contact-tags[hidden] { display: none; }
  .desktop-contact-tags > strong { font-size: .72rem; }
  #desktop-contact-tags-list { display: flex; flex-wrap: wrap; gap: 5px; }
  .desktop-contact-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 6px 4px 9px; border-radius: 999px; background: #f0edff; color: #5149c6; font-size: .68rem; }
  .desktop-contact-tag button { padding: 0 2px; border: 0; background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
  .desktop-contact-tags-empty { color: #8a91a1; font-size: .7rem; }
  #desktop-contact-tag-form { display: flex; gap: 5px; }
  #desktop-contact-tag-form[hidden] { display: none; }
  #desktop-contact-tag-input { min-width: 0; width: 100%; padding: 6px 8px; border: 1px solid #e5e7f0; border-radius: 7px; font: inherit; font-size: .7rem; }
  #desktop-contact-tag-form button { min-height: 31px; padding: 5px 8px; font-size: .7rem; }
  #desktop-contact-tag-error:empty { display: none; }
  #desktop-contact-tag-error { color: #a43b47; font-size: .68rem; }
  .desktop-next-lessons { margin-top: 13px; padding-top: 10px; border-top: 1px solid #e5e7f0; }
  .desktop-next-lessons strong { font-size: .72rem; }
  .desktop-next-lessons p { margin: 6px 0; font-size: .7rem; }
  #desktop-contact-panel-contact .conversation-status-control,
  #desktop-contact-panel-contact .conversation-assignment,
  #desktop-contact-panel-contact .conversation-routing-control { margin-top: 14px; }
  .desktop-crm-summary {
    margin: 0 0 12px; padding: 10px 11px; border-radius: 8px;
    background: #f5f4ff; color: #4d4a99; font-size: .78rem; font-weight: 650;
  }
  .desktop-contact-empty { margin: 5px 0; color: #7e879b; font-size: .78rem; line-height: 1.5; }
  #desktop-contact-panel-lessons .contact-upcoming-lessons { margin: 0; background: #f8f9ff; }
  #desktop-contact-panel-notes #contact-notes-preview { display: none; }
  #desktop-contact-notes-list { display: grid; gap: 8px; }
  .desktop-inline-note-item {
    display: grid; gap: 5px; width: 100%; padding: 10px; border: 1px solid #e7e8f1;
    border-radius: 9px; background: #fffdf8; color: #303746; text-align: left;
    font: inherit; cursor: pointer;
  }
  .desktop-inline-note-item span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: .75rem; line-height: 1.45; }
  .desktop-inline-note-item small { color: #7e879b; font-size: .64rem; }
  .desktop-inline-notes-more { padding: 8px; border: 1px solid #e5e4f3; border-radius: 8px; background: #fff; color: #554ddd; font: inherit; font-size: .72rem; cursor: pointer; }
  #desktop-contact-panel-notes #contact-notes-open { width: 100%; margin-top: 9px; }
  .desktop-chat-menu > summary:focus-visible,
  .desktop-message-menu > summary:focus-visible,
  .desktop-contact-tabs button:focus-visible,
  .desktop-compose-tabs button:focus-visible { outline: 2px solid #6559e5; outline-offset: 2px; }
}

@media (min-width: 761px) and (max-width: 1180px) {
  #inbound-view .desktop-contact-toggle { display: none; }
}

@media (min-width: 1181px) {
  #inbound-view.desktop-contact-collapsed .inbox-layout { grid-template-columns: minmax(260px, 320px) minmax(470px, 1fr); }
  #inbound-view.desktop-contact-collapsed .conversation-contact { display: none; }
}