/* ============================================================================
   Texting — two-way client SMS (plugins/texting.html + js/texting.js)

   Own token layer on #textingTool (the --ch-* tokens are deliberately scoped
   to Call Hub; co-opting them couples the two tools). Aliases the shared
   theme variables, so dark mode is mostly free.
   ============================================================================ */

#textingTool {
    --tx-bg: var(--bg-card);
    --tx-border: var(--border);
    --tx-text: var(--text);
    --tx-muted: var(--text-secondary);
    --tx-accent: var(--apple-blue);
    --tx-bubble-in: var(--bg-input);
    --tx-radius: 12px;
    /* Query container for the pane collapse below (not @media: the docked
       chat panel narrows the shell without changing the viewport — the
       documented plugin-responsive rule). The container must sit ABOVE
       .tx-container because a @container rule cannot restyle its own
       container. Safe: no position:fixed descendants in this plugin
       (the compliance `.cgl-container`-not-`#complianceTool` caveat). */
    container-type: inline-size;
}

/* ── Header ── */
#textingTool .tx-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
#textingTool .tx-header h2 { margin: 0 0 4px; }
#textingTool .tx-sub { margin: 0; color: var(--tx-muted); font-size: 13px; }

/* ── Buttons ── */
#textingTool .tx-btn {
    padding: 7px 14px;
    border: 1px solid var(--tx-border);
    border-radius: 8px;
    background: var(--tx-bg);
    color: var(--tx-text);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
#textingTool .tx-btn:hover { border-color: var(--tx-accent); }
#textingTool .tx-btn:disabled { opacity: 0.5; cursor: default; }
#textingTool .tx-btn-primary {
    background: var(--tx-accent);
    border-color: var(--tx-accent);
    color: #fff;
}

/* ── Two-pane chassis ── */
#textingTool .tx-container {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

/* ── Thread rail ── */
#textingTool .tx-rail {
    background: var(--tx-bg);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
    min-height: 420px;
}
#textingTool .tx-toolbar { padding: 10px; border-bottom: 1px solid var(--tx-border); }
#textingTool .tx-search,
#textingTool .tx-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--tx-border);
    border-radius: 8px;
    background: var(--tx-bubble-in);
    color: var(--tx-text);
    font-size: 13px;
}
#textingTool .tx-threads { overflow-y: auto; flex: 1; }

#textingTool .tx-thread {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--tx-border);
    background: transparent;
    color: var(--tx-text);
    cursor: pointer;
}
#textingTool .tx-thread:hover { background: var(--tx-bubble-in); }
#textingTool .tx-thread.is-active { background: var(--tx-bubble-in); box-shadow: inset 3px 0 0 var(--tx-accent); }
#textingTool .tx-thread-top { display: flex; justify-content: space-between; gap: 8px; }
#textingTool .tx-thread-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#textingTool .tx-thread.is-unread .tx-thread-title { color: var(--tx-accent); }
#textingTool .tx-thread-time { color: var(--tx-muted); font-size: 11px; flex-shrink: 0; }
#textingTool .tx-thread-sub { display: block; color: var(--tx-muted); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#textingTool .tx-thread-preview { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; }
#textingTool .tx-thread-snippet { color: var(--tx-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#textingTool .tx-unread-badge {
    background: var(--tx-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    padding: 1px 7px;
    flex-shrink: 0;
}

/* ── Conversation pane ── */
#textingTool .tx-detail {
    background: var(--tx-bg);
    border: 1px solid var(--tx-border);
    border-radius: var(--tx-radius);
    min-height: 420px;
    display: flex;
    flex-direction: column;
}
#textingTool .tx-convo { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 420px; }
#textingTool .tx-convo-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--tx-border);
}
#textingTool .tx-convo-title { font-weight: 600; font-size: 15px; }
#textingTool .tx-convo-sub { color: var(--tx-muted); font-size: 12px; margin-top: 2px; }
#textingTool .tx-convo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#textingTool .tx-client-chip {
    font-size: 12px;
    color: var(--tx-muted);
    border: 1px solid var(--tx-border);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}
#textingTool .tx-client-unmatched { border-style: dashed; }

#textingTool .tx-optout-banner {
    background: rgba(255, 59, 48, 0.12);
    color: #ff3b30;
    font-size: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--tx-border);
}

/* Messages */
#textingTool .tx-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
#textingTool .tx-msgs-none { text-align: center; margin-top: 30px; }
#textingTool .tx-msg { max-width: 72%; display: flex; flex-direction: column; }
#textingTool .tx-msg-in { align-self: flex-start; }
#textingTool .tx-msg-out { align-self: flex-end; align-items: flex-end; }
#textingTool .tx-bubble {
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
#textingTool .tx-msg-in .tx-bubble { background: var(--tx-bubble-in); color: var(--tx-text); border-bottom-left-radius: 4px; }
#textingTool .tx-msg-out .tx-bubble { background: var(--tx-accent); color: #fff; border-bottom-right-radius: 4px; }
#textingTool .tx-msg-failed .tx-bubble { background: rgba(255, 59, 48, 0.18); color: var(--tx-text); }
#textingTool .tx-msg-meta { color: var(--tx-muted); font-size: 11px; margin-top: 3px; padding: 0 4px; }
#textingTool .tx-msg-failed .tx-msg-meta { color: #ff3b30; }
#textingTool .tx-msg-warn { opacity: 0.8; }
#textingTool .tx-media { max-width: 240px; max-height: 240px; border-radius: 10px; display: block; margin-top: 6px; }
#textingTool .tx-media-chip {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--tx-border);
    background: var(--tx-bg);
    color: var(--tx-text);
    cursor: pointer;
}

/* Compose */
#textingTool .tx-compose { border-top: 1px solid var(--tx-border); padding: 10px 14px 12px; }
#textingTool .tx-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--tx-border);
    border-radius: 10px;
    background: var(--tx-bubble-in);
    color: var(--tx-text);
    font-size: 14px;
    font-family: inherit;
    resize: none;
}
#textingTool .tx-textarea:focus { outline: none; border-color: var(--tx-accent); }
#textingTool .tx-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
#textingTool .tx-compose-btns { display: flex; gap: 8px; }
#textingTool .tx-seg-hint { color: var(--tx-muted); font-size: 11px; }
#textingTool .tx-seg-warn { color: #ff9f0a; }

/* New-conversation form */
#textingTool .tx-new-form { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
#textingTool .tx-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--tx-muted); }

/* Empty / loading / error states */
#textingTool .tx-empty { text-align: center; padding: 46px 20px; color: var(--tx-muted); }
#textingTool .tx-empty-title { font-weight: 600; font-size: 15px; color: var(--tx-text); margin-bottom: 6px; }
#textingTool .tx-empty-sub { font-size: 13px; margin-bottom: 12px; }
#textingTool .tx-loading { padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; }
#textingTool .tx-skel { display: block; height: 42px; border-radius: 8px; background: var(--tx-bubble-in); opacity: 0.7; }
#textingTool .tx-sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Responsive: single column, rail above conversation ── */
@container (max-width: 760px) {
    #textingTool .tx-container { grid-template-columns: 1fr; }
    #textingTool .tx-rail { max-height: 40vh; min-height: 220px; }
    #textingTool .tx-convo { height: auto; min-height: 380px; }
    #textingTool .tx-msgs { max-height: 46vh; }
}