/* ============================================================================
   Inbox dashboard redesign (CSInboxDashboard) - prototype variant B.
   Scoped under .cs-inbox-dashboard so the shared voicemail/fax/SMS selector
   items are untouched elsewhere. Type accents: voicemail = indigo, fax = amber,
   messages = green. FontAwesome 5 (the app ships FA 5.13).
   ============================================================================ */

/* ---------------- type tab strip (segmented, with backgrounds) ---------------- */
.cs-inbox-dashboard .cs-inbox-tabs
{
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid #e4e6ef;
    border-radius: 12px;
    padding: 5px;
    margin-bottom: 16px;
}

.cs-inbox-dashboard .cs-inbox-tab
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13.5px;
    color: #5e6278;
    user-select: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

.cs-inbox-dashboard .cs-inbox-tab .cs-inbox-tab__icon { color: #a1a5b7; font-size: 14px; line-height: 1; }
.cs-inbox-dashboard .cs-inbox-tab:hover { background: #f3f4f7; color: #181c32; }

.cs-inbox-dashboard .cs-inbox-tab.active { background: #181c32; color: #fff; }
/* active tab: force the label AND the icon glyph white so it stays visible on the dark/coloured bg */
.cs-inbox-dashboard .cs-inbox-tab.active,
.cs-inbox-dashboard .cs-inbox-tab.active .cs-inbox-tab__label,
.cs-inbox-dashboard .cs-inbox-tab.active .cs-inbox-tab__icon,
.cs-inbox-dashboard .cs-inbox-tab.active .cs-inbox-tab__icon i { color: #fff !important; }
.cs-inbox-dashboard .cs-inbox-tab--vm.active  { background: #7239ea; }
.cs-inbox-dashboard .cs-inbox-tab--fax.active { background: #f6a609; }
.cs-inbox-dashboard .cs-inbox-tab--sms.active { background: #50cd89; }

.cs-inbox-dashboard .cs-inbox-tab__badge
{
    font-size: 11px; font-weight: 800;
    background: #f1416c; color: #fff;
    border-radius: 999px; padding: 1px 7px;
    min-width: 18px; text-align: center; line-height: 1.5;
}
.cs-inbox-dashboard .cs-inbox-tab.active .cs-inbox-tab__badge { background: rgba(255,255,255,.28); }
.cs-inbox-dashboard .cs-inbox-tab__badge--zero { display: none; }

/* ---------------- per-type accent variables ---------------- */
.cs-inbox-dashboard .cs-inbox-row--voicemail { --cs-accent: #7239ea; --cs-tint: #f8f5ff; --cs-pill: #7239ea; }
.cs-inbox-dashboard .cs-inbox-row--fax       { --cs-accent: #f6a609; --cs-tint: #fff8dd; --cs-pill: #f6a609; }
.cs-inbox-dashboard .cs-inbox-row--messages  { --cs-accent: #50cd89; --cs-tint: #e8fff3; --cs-pill: #50cd89; }

/* ---------------- row chrome ---------------- */
/* border-box so the row/info padding (incl. the 58px content indent) never overflows the
   width and forces horizontal scrolling (the app has no global border-box reset). */
.cs-inbox-dashboard .cs-inbox-row,
.cs-inbox-dashboard .cs-inbox-row *
{
    box-sizing: border-box;
}
.cs-inbox-dashboard .cs-inbox-row.selector-item
{
    padding: 17px 18px;
    border-bottom: 1px solid #c2c8d6;   /* stronger divider between rows */
    position: relative;
}
.cs-inbox-dashboard .cs-inbox-row.selector-item:last-child { border-bottom: 0; }

/* Run the list flush to the card edges so each row's divider spans fully side-to-side.
   The card-body's default horizontal padding (~2.25rem) otherwise insets every row, making
   the dividers look short. The row keeps its own 18px padding for content breathing room. */
.cs-inbox-dashboard .card.card-custom > .card-body { padding-left: 0; padding-right: 0; }
.cs-inbox-dashboard .cs-inbox-row.selector-item:hover { background: #fafbfd; }

/* unread = type-coloured inset accent bar + soft tint */
.cs-inbox-dashboard .cs-inbox-row--unread { box-shadow: inset 3px 0 0 var(--cs-accent); background: var(--cs-tint); }

/* ---------------- LAYOUT: stack content BELOW the title (not beside it) ----------------
   The framework lays .icon-title-container and .info-container side-by-side in a flex row.
   Wrap the row and force the info block to a full-width second line, indented under the
   title (past the 44px avatar + 14px gap). */
.cs-inbox-dashboard .cs-inbox-row .avidbit-selector-item-container
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 14px;
    row-gap: 2px;
}
.cs-inbox-dashboard .cs-inbox-row .icon-title-container { flex: 1 1 auto; min-width: 0; }
.cs-inbox-dashboard .cs-inbox-row .info-container
{
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;               /* allow the flex item to shrink so nowrap text actually clips (text clips at the text element, not here -> no vertical clipping of the play circle) */
    padding-left: 58px;
    padding-right: 0;
    margin-top: 6px;
}

/* ---------------- symbol / avatar: type-soft (read) -> vivid (unread) ---------------- */
.cs-inbox-dashboard .cs-inbox-row .symbol-label
{
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800;
    background: var(--cs-tint);
    color: var(--cs-accent);
}
.cs-inbox-dashboard .cs-inbox-row .symbol-label > * { color: inherit; }
.cs-inbox-dashboard .cs-inbox-row--unread .symbol-label { background: var(--cs-accent) !important; color: #fff !important; }
.cs-inbox-dashboard .cs-inbox-row--unread .symbol-label > * { color: #fff !important; }
/* SMS avatars: always a darker solid green with solid-white initials */
.cs-inbox-dashboard .cs-inbox-row--messages .symbol-label { background: #1f9d57 !important; color: #fff !important; }
.cs-inbox-dashboard .cs-inbox-row--messages .symbol-label > * { color: #fff !important; }
/* the framework's red "new" dot is redundant next to our accent bar + pill */
.cs-inbox-dashboard .cs-inbox-row .selector-item-new-badge { display: none; }

/* ---------------- title line: name + tag inline, date pinned top-right ---------------- */
/* the title block becomes a single flex row so the type tag + pill sit next to the name */
.cs-inbox-dashboard .cs-inbox-row .title-container
{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;          /* keep name + tag + pill on ONE line */
    gap: 8px;
    flex: 1 1 auto;             /* span the row so the date floats to the far right */
    min-width: 0;
}
/* the name takes only the room it needs and truncates only when genuinely too long */
.cs-inbox-dashboard .cs-inbox-row .selector-item-title
{
    flex: 0 1 auto; min-width: 0;
    font-weight: 700; color: #181c32; font-size: 14.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-inbox-dashboard .cs-inbox-row--unread .selector-item-title { font-weight: 800; }
/* tag + pill never shrink or wrap off the title line */
.cs-inbox-dashboard .cs-inbox-row .cs-inbox-typetag,
.cs-inbox-dashboard .cs-inbox-row .cs-inbox-newpill { flex: 0 0 auto; }
/* date/time pinned to the row's top-right instead of stacked under the name */
.cs-inbox-dashboard .cs-inbox-row .selector-item-subtitle
{
    color: #a1a5b7; font-size: 12px; font-weight: 600;
    position: absolute; top: 14px; right: 18px; margin: 0;
}

/* "● New" pill - always injected, shown only on unread rows */
.cs-inbox-dashboard .cs-inbox-newpill { display: none; }
.cs-inbox-dashboard .cs-inbox-row--unread .cs-inbox-newpill
{
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 1px 8px 1px 7px; margin-left: 8px;
    border-radius: 999px; color: #fff; background: var(--cs-pill, #009ef7);
    vertical-align: middle; white-space: nowrap;
}
.cs-inbox-dashboard .cs-inbox-newpill::before
{
    content: ""; display: inline-block; width: 5px; height: 5px;
    border-radius: 50%; background: #fff; margin-right: 5px;
}

/* type tag chip (Voicemail / Fax / Message) - injected by the dashboard */
.cs-inbox-dashboard .cs-inbox-typetag
{
    display: inline-block;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 6px; margin-left: 8px; vertical-align: middle;
}
.cs-inbox-dashboard .cs-inbox-typetag--voicemail { background: #f8f5ff; color: #7239ea; }
.cs-inbox-dashboard .cs-inbox-typetag--fax       { background: #fff8dd; color: #b9790a; }
.cs-inbox-dashboard .cs-inbox-typetag--messages  { background: #e8fff3; color: #1f9d57; }

/* ---------------- voicemail content ---------------- */
.cs-inbox-dashboard .cs-inbox-row--voicemail .voicemail-text-bubble,
.cs-inbox-dashboard .cs-inbox-row--voicemail .f_voicemailStatusContainer
{
    color: #5e6278; font-size: 13px; line-height: 1.45;
}
.cs-inbox-dashboard .cs-inbox-row--voicemail .voicemailPlayButtonContainer { display: flex; align-items: center; margin-right: 12px; }

/* ---------------- fax content: status pill on the left, download/delete actions on the right ---------------- */
.cs-inbox-dashboard .cs-inbox-row--fax .info-container { display: flex; align-items: center; gap: 12px; }
.cs-inbox-dashboard .cs-inbox-row--fax .f_faxStatusContainer { flex: 1 1 auto; min-width: 0; }
.cs-inbox-dashboard .cs-inbox-row--fax .cs-inbox-row-actions { margin-left: auto; }
.cs-inbox-dashboard .cs-inbox-row--fax .fax-text-bubble
{
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff8dd; color: #b9790a;
    border-radius: 999px; padding: 3px 11px;
    font-size: 12px; font-weight: 700;
}
.cs-inbox-dashboard .cs-inbox-icon-btn--danger:hover { color: #f1416c; border-color: #f1416c; }

/* ---------------- SMS content: shortened one-line previews with sender (NOT bubbles) ---------------- */
.cs-inbox-dashboard .cs-inbox-sms-info { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; }
.cs-inbox-dashboard .f_smsTextContainer { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.cs-inbox-dashboard .rtxt
{
    font-size: 13px; color: #5e6278; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-inbox-dashboard .rtxt.is-last { color: #181c32; }
.cs-inbox-dashboard .rtxt .rt-who { font-weight: 800; color: #181c32; margin-right: 4px; }
.cs-inbox-dashboard .rtxt .rt-who.out { color: #1f9d57; }

/* one-line preview + inline expand chevron (shown only when the line is truncated) */
.cs-inbox-dashboard .cs-inbox-sms-line { display: flex; align-items: flex-start; gap: 6px; width: 100%; min-width: 0; }
.cs-inbox-dashboard .cs-inbox-sms-line .rtxt { flex: 1 1 auto; min-width: 0; }
.cs-inbox-dashboard .rtxt.cs-inbox-sms-open { white-space: normal; overflow: visible; }
.cs-inbox-dashboard .cs-inbox-sms-expand { flex: 0 0 auto; cursor: pointer; color: #a1a5b7; font-size: 11px; padding: 1px 4px; }
.cs-inbox-dashboard .cs-inbox-sms-expand:hover { color: #50cd89; }
.cs-inbox-dashboard .cs-inbox-sms-expand.open i { display: inline-block; transform: rotate(180deg); }

/* ---------------- ghost icon action buttons (match prototype .icon-btn) ---------------- */
.cs-inbox-dashboard .cs-inbox-row-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.cs-inbox-dashboard .cs-inbox-icon-btn
{
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid #e4e6ef; background: #fff; color: #5e6278;
    display: grid; place-items: center; cursor: pointer; font-size: 13px;
}
.cs-inbox-dashboard .cs-inbox-icon-btn:hover { border-color: #a1a5b7; color: #181c32; }
.cs-inbox-dashboard .cs-inbox-icon-btn--conv:hover { color: #50cd89; border-color: #50cd89; }

/* ---------------- voicemail: inline [play] [duration] [waveform] [transcript] ---------------- */
.cs-inbox-dashboard .cs-inbox-row--voicemail .info-container { display: flex; align-items: center; gap: 12px; }
/* remove the framework's pink "bubble" border/background around the transcription */
.cs-inbox-dashboard .cs-inbox-row--voicemail .voicemail-text-bubble { background: transparent !important; padding: 0 !important; border: 0 !important; }
.cs-inbox-dashboard .cs-inbox-row--voicemail .voicemailPlayButtonContainer { order: -2; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cs-inbox-dashboard .cs-inbox-row--voicemail .cs-inbox-vm-dur { order: -1; flex: 0 0 auto; font-weight: 800; color: #181c32; font-size: 13px; }
/* transcript expand chevron (shown only when the transcript is truncated) */
.cs-inbox-dashboard .cs-inbox-row--voicemail .cs-inbox-vm-expand { display: none; flex: 0 0 auto; cursor: pointer; color: #a1a5b7; font-size: 11px; padding: 1px 4px; }
.cs-inbox-dashboard .cs-inbox-row--voicemail .cs-inbox-vm-expand:hover { color: #7239ea; }
.cs-inbox-dashboard .cs-inbox-row--voicemail .cs-inbox-vm-expand.open i { display: inline-block; transform: rotate(180deg); }
.cs-inbox-dashboard .cs-inbox-row--voicemail .f_voicemailStatusContainer.cs-inbox-vm-open { white-space: normal; overflow: visible; }
.cs-inbox-dashboard .cs-inbox-row--voicemail .f_voicemailStatusContainer
{
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #5e6278; font-size: 13px;
}

/* a real (varying-height) waveform next to the play button */
.cs-inbox-dashboard .cs-inbox-row--voicemail .voicemailPlayButtonContainer::after
{
    content: "";
    width: 80px; height: 18px; flex: 0 0 80px;
    background-repeat: no-repeat; background-position: left center;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='18'%3E%3Cg%20fill='%237239ea'%3E%3Crect%20x='0'%20y='6'%20width='3'%20height='6'%20rx='1.5'/%3E%3Crect%20x='7'%20y='3'%20width='3'%20height='12'%20rx='1.5'/%3E%3Crect%20x='14'%20y='7'%20width='3'%20height='4'%20rx='1.5'/%3E%3Crect%20x='21'%20y='1'%20width='3'%20height='16'%20rx='1.5'/%3E%3Crect%20x='28'%20y='5'%20width='3'%20height='8'%20rx='1.5'/%3E%3Crect%20x='35'%20y='2'%20width='3'%20height='14'%20rx='1.5'/%3E%3Crect%20x='42'%20y='6'%20width='3'%20height='5'%20rx='1.5'/%3E%3Crect%20x='49'%20y='3'%20width='3'%20height='11'%20rx='1.5'/%3E%3Crect%20x='56'%20y='4'%20width='3'%20height='9'%20rx='1.5'/%3E%3Crect%20x='63'%20y='5'%20width='3'%20height='7'%20rx='1.5'/%3E%3Crect%20x='70'%20y='6'%20width='3'%20height='6'%20rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* the shared CSCirclePlayButton -> one clean purple icon-only circle */
.cs-inbox-dashboard .player_button
{
    width: 38px; height: 38px; min-width: 38px; padding: 0; margin: 0;
    flex: 0 0 auto;                 /* never let the flex row squish the circle into an ellipse */
    border-radius: 50% !important;
    background: #7239ea !important; color: #fff !important;
    display: flex; align-items: center; justify-content: center;
    font-size: 0;
    box-shadow: none !important;
    transition: transform .1s ease;
}
/* kill the portal's global grey ring on the inner icon (the extra "outside circle") */
.cs-inbox-dashboard .player_button i
{
    border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
    width: auto !important; height: auto !important; line-height: 1 !important;
}
/* keep only the icon in the centred flex; collapse the widget's hidden text label */
.cs-inbox-dashboard .player_button > * { margin: 0 !important; }
/* Material's play_arrow flex-centres on its own; the framework's global .material-icons has
   position:relative; top:3px which shoves the glyph down off-centre -> zero it. */
.cs-inbox-dashboard .player_button .material-icons { font-size: 20px; color: #fff; line-height: 1; margin: 0 !important; top: 0 !important; position: static !important; }
.cs-inbox-dashboard .player_button:hover { transform: scale(1.06); }

/* ---------------- selection bar (dark, top of the widget when rows are selected) ---------------- */
.cs-inbox-dashboard .cs-inbox-selbar
{
    display: flex; align-items: center; gap: 12px;
    background: #181c32; color: #fff;
    border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(24, 28, 50, .22);
}
.cs-inbox-dashboard .cs-inbox-selbar__count { font-weight: 800; }
.cs-inbox-dashboard .cs-inbox-selbar__spacer { flex: 1 1 auto; }
.cs-inbox-dashboard .cs-inbox-selbar__btn
{
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .12); color: #fff;
    border-radius: 8px; padding: 6px 12px;
    font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.cs-inbox-dashboard .cs-inbox-selbar__btn:hover { background: rgba(255, 255, 255, .2); }
.cs-inbox-dashboard .cs-inbox-selbar__btn--danger { background: #f1416c; }
.cs-inbox-dashboard .cs-inbox-selbar__btn--danger:hover { background: #d9365d; }

/* ---------------- mobile: remove wrapper padding/margins that overflow the viewport ----------------
   Root cause of the horizontal scroll on phones (Codex, measured 617->508px at 500px wide): it's the
   container/col/card wrapper spacing around + inside the inbox, NOT the row text. Zero it on mobile so
   the list runs flush to the edges. Inner wrappers are descendants of .cs-inbox-dashboard; the outer
   .container is an ancestor, reached with :has() (universally supported on modern mobile browsers; the
   descendant rules still apply on the rare browser without :has(), so it degrades gracefully). */
@media (max-width: 991.98px)
{
    .container:has(.cs-inbox-dashboard)
    {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;     /* clip any residual few-px overflow so the page can't scroll sideways */
    }
    .cs-inbox-dashboard { margin-left: 0; margin-right: 0; }
    .cs-inbox-dashboard .col-12 { padding-left: 0; padding-right: 0; }
    .cs-inbox-dashboard .card.card-custom { margin-left: 0; margin-right: 0; }
    .cs-inbox-dashboard .card.card-custom > .card-body { padding-left: 0; padding-right: 0; }
}

/* ---------------- infinite-scroll sentinel + footer ---------------- */
.cs-inbox-dashboard .cs-inbox-load-sentinel { width: 100%; height: 1px; }
.cs-inbox-dashboard .cs-inbox-load-footer { padding: 16px; font-size: 12px; text-align: center; }
.cs-inbox-dashboard .cs-inbox-load-done { color: #a1a5b7; font-weight: 700; }