.unread-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      margin-right: 8px;
      vertical-align: middle;
      flex-shrink: 0;
    }

    .chat-thread {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: min(60vh, 520px);
      overflow-y: auto;
      padding: 14px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
    }

    .chat-row {
      display: flex;
      flex-direction: column;
      max-width: 75%;
    }

    .chat-row.inbound { align-self: flex-start; align-items: flex-start; }

    .chat-row.outbound { align-self: flex-end; align-items: flex-end; }

    .chat-bubble {
      padding: 8px 12px;
      border-radius: 14px;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 0.95rem;
    }

    .chat-bubble.inbound {
      background: #e8eaee;
      color: var(--text);
      border-bottom-left-radius: 4px;
    }

    .chat-bubble.outbound {
      background: var(--accent);
      color: #fff;
      border-bottom-right-radius: 4px;
    }

    .chat-time {
      font-size: 0.75rem;
      color: var(--muted);
      margin-top: 4px;
    }

    .chat-reply {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      margin-top: 12px;
    }

    .chat-reply textarea {
      margin-bottom: 0;
      min-height: 64px;
      flex: 1;
    }

    .chat-composer {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .chat-composer .chat-reply {
      margin-top: 0;
    }

    .chat-composer .msg.error {
      margin: 0;
      font-size: 13px;
    }

    .composer-consent-panel {
      background: #F6F7F9;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
    }

    .composer-consent-panel p {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--text);
    }

    .composer-consent-panel .choice-row {
      margin-bottom: 6px;
    }

    .composer-consent-panel .choice {
      min-height: 44px;
    }

    .composer-marketing-link {
      border: 0;
      background: none;
      padding: 0;
      color: var(--muted);
      font: 500 12px var(--font-body);
      cursor: pointer;
      text-decoration: underline;
    }

    .composer-consent-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #EEF0F3;
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
    }

    .composer-consent-tag button {
      border: 0;
      background: none;
      padding: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1;
    }

    .composer-dnc {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 12px 0 0;
      padding: 12px 14px;
      border-radius: 14px;
      background: #FFE7DF;
      color: #A3321E;
      font-weight: 700;
      min-height: 44px;
    }

    .composer-dnc input {
      width: 22px;
      height: 22px;
      margin-top: 1px;
      flex: none;
    }

    .composer-block-notice {
      background: #F0F2F5;
      color: var(--muted);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 13px;
      margin-top: 12px;
    }

    .consent-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
      vertical-align: middle;
    }

    .consent-marketing_ok {
      background: #DCFCE7;
      color: #166534;
    }

    .consent-service_only {
      background: #FEF3C7;
      color: #B45309;
    }

    .consent-opted_out {
      background: #FEE2E2;
      color: #B91C1C;
    }

    .consent-dd {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .thread-assign {
      margin-bottom: 16px;
    }

    #thread-consent-badge {
      margin-left: 8px;
      display: inline-flex;
      align-items: center;
    }

    .thread-phone {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 400;
      margin-left: 8px;
    }

    .thread-name-btn {
      background: none;
      padding: 0;
      font: inherit;
      font-size: 1.15rem;
      font-weight: 600;
      color: inherit;
      text-align: left;
    }

    .thread-name-btn.editable:hover {
      text-decoration: underline;
    }

    .thread-name-btn:disabled {
      cursor: default;
      opacity: 1;
    }

    .thread-name-edit {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .thread-name-edit input {
      margin-bottom: 0;
      width: 220px;
      font-size: 1rem;
    }

    .chat-delivery { color: var(--muted); }

    .chat-delivery.is-failed {
      color: var(--danger);
      font-weight: 700;
    }

    .composer-credits {
      margin: -2px 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    .composer-credits:empty { display: none; }

    .composer-improve-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .composer-improve-row select {
      width: auto;
      height: 40px;
      margin: 0;
      padding: 0 10px;
      border: 1.5px solid var(--border-strong);
      border-radius: var(--radius-sm);
      background: #fff;
      font: inherit;
    }

    .composer-suggestion {
      margin-top: 8px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--soft);
    }

    .composer-suggestion-label {
      font: 800 12px var(--font-body);
      color: var(--accent);
    }

    .composer-suggestion-text {
      margin: 6px 0 8px;
      white-space: pre-wrap;
    }

    .composer-suggestion-warn {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--wait);
    }

    /* Conversations inbox (CV1) */
    .inbox-tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 16px;
    }

    .inbox-page .inbox-search {
      margin-left: 0;
      max-width: 340px;
    }

    .inbox-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .inbox-chip {
      min-height: 36px;
      padding: 0 14px;
      border-radius: 18px;
      border: 1.5px solid var(--band-line);
      background: transparent;
      color: #fff;
      font: 700 13px var(--font-body);
      cursor: pointer;
    }

    .inbox-chip.is-on {
      background: #fff;
      border-color: #fff;
      color: var(--text);
    }

    .inbox-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
      gap: 16px;
      margin: -50px 32px 24px;
      align-items: start;
    }

    .inbox-layout > .card {
      margin: 0;
      border-radius: var(--radius-lg);
      box-shadow: 0 1px 2px rgba(27, 21, 48, 0.06), 0 14px 34px rgba(27, 21, 48, 0.10);
    }

    .inbox-list-card {
      padding: 6px;
      max-height: calc(100vh - 180px);
      overflow-y: auto;
    }

    .inbox-list {
      display: flex;
      flex-direction: column;
    }

    .inbox-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
      padding: 12px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      text-align: left;
      font: inherit;
      color: var(--text);
      cursor: pointer;
    }

    .inbox-row + .inbox-row { border-top: 1px solid var(--border); }

    .inbox-row:hover { background: var(--bg); }

    .inbox-row.is-selected {
      background: var(--soft);
      border-top-color: transparent;
    }

    .inbox-row.is-selected + .inbox-row { border-top-color: transparent; }

    .inbox-row-top {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .inbox-dot {
      flex: none;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
    }

    .inbox-dot.is-read { background: transparent; }

    .inbox-row-name {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
    }

    .inbox-row.is-unread .inbox-row-name { font-weight: 800; }

    .inbox-row-time {
      flex: none;
      margin-left: auto;
      font-size: 12px;
      color: var(--muted);
    }

    .inbox-row.is-unread .inbox-row-time {
      color: var(--accent);
      font-weight: 700;
    }

    .inbox-row-preview {
      margin: 0 0 0 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      color: var(--muted);
    }

    .inbox-row.is-unread .inbox-row-preview { color: var(--text); }

    .inbox-row-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      margin-left: 16px;
      font-size: 12px;
    }

    .inbox-row-office {
      color: var(--muted);
      font-weight: 600;
    }

    .inbox-tag {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 8px;
      border-radius: 11px;
      font: 700 11px var(--font-body);
      white-space: nowrap;
    }

    .inbox-tag.is-grey { background: var(--bg); color: var(--muted); }
    .inbox-tag.is-violet { background: var(--soft); color: var(--accent); }
    .inbox-tag.is-coral { background: var(--attention-bg); color: var(--attention); }
    .inbox-tag.is-route { background: var(--ok-bg); color: var(--ok); }
    .inbox-tag.is-green { background: var(--ok-bg); color: var(--ok); }
    .inbox-row-top .person-avatar { margin-right: 2px; }
    #inbox-name .person-avatar { vertical-align: middle; margin-right: 4px; }

    /* DT1: Text the team, Text one person */
    .team-text-dialog { max-width: 560px; }
    .team-text-body { display: grid; gap: 8px; padding: 16px 20px 20px; }
    .team-text-body label { font-weight: 700; font-size: 13px; }
    .team-text-body textarea, .team-text-body select, .team-text-body input[type="search"] { width: 100%; }
    .team-text-pick { display: grid; gap: 4px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
    .team-text-pick label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
    .team-text-preview { display: grid; gap: 4px; max-height: 220px; overflow: auto; font-size: 13px; }
    .team-text-person { display: flex; align-items: center; gap: 8px; }
    .team-text-person .why { color: var(--muted); margin-left: auto; text-align: right; }
    .team-text-person.is-skipped .name { color: var(--muted); }
    .team-one-list { display: grid; gap: 2px; max-height: 360px; overflow: auto; }
    .team-one-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
      background: transparent; text-align: left; font: inherit; }
    .team-one-row:hover { background: var(--bg); }
    .team-one-row .why { color: var(--muted); margin-left: auto; font-size: 12px; }
    .team-one-row:disabled { opacity: 0.55; }

    .inbox-more {
      display: block;
      margin: 8px auto 6px;
    }

    .inbox-list-card .band-empty { padding: 28px 16px; }

    .inbox-pane {
      padding: 18px 20px 20px;
      min-height: 420px;
    }

    .inbox-pane-empty {
      padding: 80px 16px;
      text-align: center;
    }

    .inbox-back { display: none; }

    .inbox-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px 16px;
    }

    .inbox-head h2 {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 12px;
      margin: 0;
      font-family: var(--font-display);
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .inbox-rename {
      font: 600 13px var(--font-body);
      color: var(--muted);
    }

    .inbox-rename-edit {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .inbox-rename-edit input {
      width: 200px;
      margin: 0;
    }

    .inbox-phone {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .inbox-lead {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px 16px;
      margin: 14px 0;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
    }

    .inbox-lead-main {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .inbox-lead-label {
      font: 800 11px var(--font-body);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .inbox-lead-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      font-size: 14px;
    }

    .inbox-lead-none {
      margin: 0;
      font-size: 14px;
    }

    .inbox-lead-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .inbox-lead-finder {
      flex: 1 1 100%;
    }

    .inbox-lead-finder input {
      margin-bottom: 8px;
    }

    .inbox-lead-results {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .inbox-lead-result {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 12px;
      min-height: 44px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
      text-align: left;
      font: inherit;
      cursor: pointer;
    }

    .inbox-lead-result:hover { border-color: var(--accent); }

    .inbox-lead-result-name { font-weight: 700; }

    .inbox-lead-result-phone {
      color: var(--muted);
      font-size: 13px;
    }

    .inbox-blocked {
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--attention-bg);
      color: var(--attention);
      font-size: 14px;
    }

    .inbox-blocked-note { color: var(--text); }

    .inbox-thread .composer-block-notice {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--attention-bg);
      color: var(--attention);
      font-weight: 700;
    }

    .inbox-phone:empty { display: none; }

    .inbox-thread .chat-thread {
      max-height: calc(100vh - 460px);
      min-height: 220px;
    }

    @media (max-width: 1100px) {
      .inbox-layout { margin: -36px 16px 20px; }
    }

    /* Phones and small tablets: the list first; tap a conversation to open it. */
    @media (max-width: 900px) {
      .inbox-layout { grid-template-columns: minmax(0, 1fr); }

      .inbox-list-card { max-height: none; }

      .inbox-pane { display: none; }

      .inbox-layout.is-thread .inbox-list-card { display: none; }

      .inbox-layout.is-thread .inbox-pane { display: block; }

      .inbox-back {
        display: inline-flex;
        margin: -4px 0 8px;
        color: var(--accent);
        font-weight: 700;
      }

      .inbox-thread .chat-thread { max-height: 60vh; }

      .inbox-page .inbox-search { max-width: none; flex-basis: 100%; }
    }