/* Profile switcher — the "Switch profile" row and its flyout inside the profile
   popover. Mirrors the availability flyout pattern (.av-current / .av-flyout)
   so it opens and reads the same way. */

.pp-switch { position: relative; }
.pp-switch-chev { margin-left: auto; display: inline-flex; color: #98A2B3; }

.pp-switch-flyout {
  position: absolute; left: calc(100% + 6px); top: -6px;
  min-width: 272px; padding: 6px;
  background: #fff; border: 1px solid #EAECF0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.06);
  opacity: 0; visibility: hidden;
  transform: translateX(-4px) scale(.985); transform-origin: left center;
  transition: opacity .22s cubic-bezier(.16,1,.3,1),
              transform .26s cubic-bezier(.16,1,.3,1),
              visibility 0s linear .22s;
  z-index: 60;
}
/* Bridges the gap so the pointer can travel into the flyout without closing it. */
.pp-switch-flyout::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }
.pp-switch:hover .pp-switch-flyout,
.pp-switch.open .pp-switch-flyout {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1);
}

.pp-switch-label {
  padding: 6px 10px 4px;
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .04em;
  color: #98A2B3; text-transform: uppercase;
}

.pp-prof {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: transparent; border: none; border-radius: 8px;
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background .12s ease;
}
.pp-prof:hover { background: #F9FAFB; }
.pp-prof-av {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 600 11px/1 'Inter', sans-serif; color: #fff; flex-shrink: 0;
}
.pp-prof-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pp-prof-name {
  font: 500 13.5px/1.2 'Inter', sans-serif; color: #101828;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-prof-role { font: 500 11px/1 'Inter', sans-serif; color: #667085; }
.pp-prof-check { margin-left: auto; display: none; color: #004CE6; flex-shrink: 0; }
.pp-prof[aria-checked="true"] .pp-prof-check { display: inline-flex; }
.pp-prof[aria-checked="true"] .pp-prof-name { font-weight: 600; }

body.theme-dark .pp-switch-flyout { background: #1B1D21; border-color: #2A2D33; }
body.theme-dark .pp-prof:hover { background: #24262B; }
body.theme-dark .pp-prof-name { color: #E5E7EB; }
body.theme-dark .pp-prof-role { color: #9CA3AF; }

/* ---------------------------------------------------------------------------
   Organize conversations (Settings → Conversation Settings)
   --------------------------------------------------------------------------- */
.oc-panel { max-width: 680px; padding: 4px 0 40px; }

/* Page header — separated from the settings body by a rule, matching how the
   other settings pages open. */
.oc-head {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border, #E4E7EC);
}
.oc-title { margin: 0 0 6px; font: 600 18px/1.4 'Inter', sans-serif; color: var(--text-primary, #101828); letter-spacing: -0.01em; }
.oc-sub { margin: 0; font: 400 13.5px/1.55 'Inter', sans-serif; color: var(--text-secondary, #667085); }

.oc-section + .oc-section { margin-top: 32px; }
.oc-group-label {
  font: 600 11px/1 'Inter', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-tertiary, #98A2B3);
  margin: 0 0 8px; padding: 0 12px;
}
.oc-list { display: flex; flex-direction: column; }

.oc-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 12px; border-radius: 10px; cursor: pointer;
  transition: background .12s ease;
}
.oc-item:hover { background: var(--surface-alt, #F9FAFB); }
/* The design-system checkbox. Values mirror the canonical rules in
   call-logs-table.css exactly — those are scoped to `.ct-table`, so they don't
   reach outside a table. Worth promoting `.cb` to a shared component; until
   then this restates it rather than inventing a second checkbox style. */
.oc-item .cb {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer; margin-top: 1px; flex-shrink: 0;
}
.oc-item .cb input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.oc-item .cb-box {
  width: 16px; height: 16px; box-sizing: border-box;
  border: 1px solid var(--border-strong, #D0D5DD); border-radius: 4px; background: #fff;
  display: inline-grid; place-items: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.oc-item:hover .cb-box { border-color: var(--text-tertiary, #98A2B3); }
.oc-item .cb-box svg {
  width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.6);
  transition: opacity .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.oc-item .cb input:checked + .cb-box {
  background: var(--brand-blue, #004CE6); border-color: var(--brand-blue, #004CE6);
}
.oc-item .cb input:checked + .cb-box svg { opacity: 1; transform: scale(1); }
.oc-item-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oc-item-label { font: 500 14px/1.4 'Inter', sans-serif; color: var(--text-primary, #101828); }
.oc-item-desc { font: 400 13px/1.5 'Inter', sans-serif; color: var(--text-secondary, #667085); }

/* The real input is visually hidden, so carry focus onto the drawn box. */
.oc-item .cb input:focus-visible + .cb-box {
  outline: 2px solid var(--brand-blue, #004CE6);
  outline-offset: 2px;
}

body.theme-dark .oc-head { border-bottom-color: #2A2D33; }
body.theme-dark .oc-title,
body.theme-dark .oc-item-label { color: #E5E7EB; }
body.theme-dark .oc-sub,
body.theme-dark .oc-item-desc { color: #9CA3AF; }
body.theme-dark .oc-item:hover { background: #24262B; }

/* Profile avatars are the illustrated ones from the Contacts table, so the
   coloured initials background must not show through behind them. */
.pp-prof-av:has(.jc-av-svg),
.pp-id-avatar:has(.jc-av-svg),
.jc-prof-av:has(.jc-av-svg){background:transparent !important;padding:0;overflow:hidden}
.pp-prof-av .jc-av-svg,
.pp-id-avatar .jc-av-svg,
.jc-prof-av .jc-av-svg{width:100%;height:100%;display:block;border-radius:50%}
.pp-id-avatar{position:relative;overflow:visible}
.pp-id-avatar .pp-id-dot{position:absolute}

/* Marks the row as a prototype-only affordance, not a shipping feature. */
.pp-badge{margin-left:8px;flex:0 0 auto;height:18px;padding:0 7px;border-radius:999px;
  display:inline-flex;align-items:center;font:500 10px/1 'Inter',sans-serif;
  letter-spacing:.02em;color:#5925DC;background:#F4F3FF;border:1px solid #E4DFFE}
.pp-switch .pp-label{flex:0 0 auto}

/* ---------------------------------------------------------------------------
   Connected-CRM stack (contact side sheet)
   --------------------------------------------------------------------------- */
.crm-more-menu {
  opacity: 0; visibility: hidden;
  transform: translateY(-2px);
  transition: opacity .14s ease, transform .18s cubic-bezier(.16,1,.3,1), visibility 0s linear .14s;
}
/* Bridges the gap so the pointer can reach the menu without it closing. */
.crm-more::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 8px; }
.crm-more:hover .crm-more-menu,
.crm-more:focus-within .crm-more-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .14s ease, transform .18s cubic-bezier(.16,1,.3,1);
}
body.theme-dark .crm-more-menu { background: #1B1D21; border-color: #2A2D33; }

/* Subtle lift on hover; the tile sits above its neighbours so the overlap
   doesn't clip the highlight. */
.crm-tile:hover {
  background: #F9FAFB;
  border-color: #D0D5DD;
  transform: translateY(-1px);
  position: relative;
  z-index: 2;
}
.crm-more:hover { background: #F9FAFB; border-color: #D0D5DD; }
body.theme-dark .crm-tile:hover,
body.theme-dark .crm-more:hover { background: #24262B; border-color: #3A3D44; }

/* ---------------------------------------------------------------------------
   Conversation row — mark-as-closed control and its exit animation
   --------------------------------------------------------------------------- */

/* Close / Closed control in the thread header. */
.th-close-btn { transition: background-color .12s ease, border-color .12s ease; }
.th-close-btn:hover { background: #F9FAFB !important; border-color: #D0D5DD !important; }
/* Once closed, hovering previews the reverse action rather than deepening the
   green — the click reopens, so it shouldn't look like more closing. */
.th-close-btn.is-closed:hover { background: #FFFFFF !important; border-color: #A6F4C5 !important; }

/* Dissolve, then collapse the row's own height so everything below slides up
   into the gap rather than jumping. */
.convo-row-exit {
  overflow: hidden;
  pointer-events: none;
  animation: convoRowExit 240ms cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes convoRowExit {
  0%   { opacity: 1; max-height: 160px; transform: translateX(0); }
  45%  { opacity: 0; max-height: 160px; transform: translateX(10px); }
  100% {
    opacity: 0; transform: translateX(10px);
    max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .convo-row-exit { animation-duration: 1ms; }
}

/* Phone Numbers table — rows fade in as the skeleton is replaced. */
.pn-filled .pn-row { animation: pnRowIn .22s ease-out both; }
.pn-filled .pn-row:last-child { border-bottom: none; }
@keyframes pnRowIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .pn-filled .pn-row { animation: none; } }