/* ================================================
   Octo LiveChat – Floating Chat Panel
   Drei Typen: Support (blau), Verkauf (orange), Team (dunkelblau)
   ================================================ */

/* Farben */
:root {
    --olc-support: #006899;
    --olc-sales: #e09000;
    /* Dasselbe Orange als SCHRIFT traegt auf Weiss nur 2.57 - der Reiter
       "Team" war praktisch unlesbar. Als Flaeche bleibt --olc-sales, als
       Schrift gilt der dunklere Ton (4.57 hell), im Dunkelmodus ueber
       --octo-ink wieder aufgehellt. */
    --olc-sales-text: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text, #111827));
    --olc-team: #003450;
    --olc-bg: var(--octo-c-card, #fff);
    --olc-border: var(--octo-c-border, #e5e7eb);
    --olc-text: var(--octo-c-text, #111827);
    --olc-muted: var(--octo-c-muted, #6b7280);
    --olc-light: var(--octo-c-card-head, #f9fafb);
}

/* ---- Trigger-Button (rechter Rand) ---- */
#olc-trigger {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 80px;
    background: var(--octo-c-card, #ffffff);
    border: 2px solid #e09000;
    border-right: none;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.2s;
    box-shadow: -2px 0 8px rgba(0,0,0,0.08);
}

#olc-trigger:hover {
    width: 36px;
    background: var(--octo-c-accent, #e09000);
    color: var(--octo-c-accent-text, #1a1200);
}

#olc-trigger .trigger-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    color: #1a1200;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
}

#olc-trigger .trigger-badge.visible {
    display: flex;
}

/* ---- Panel ---- */
#olc-panel {
    position: fixed;
    right: -400px;
    top: 0;
    width: 380px;
    height: 100vh;
    background: var(--olc-bg);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    z-index: 99991;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

#olc-panel.open {
    right: 0;
}

/* ---- Panel Header ---- */
.olc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--olc-team);
    color: var(--octo-c-on-dark, #ffffff);
    flex-shrink: 0;
}

.olc-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--octo-c-on-dark, #ffffff) !important;
}

.olc-close {
    background: none;
    border: none;
    color: var(--octo-c-on-dark, #ffffff);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.olc-close:hover { opacity: 1; }

/* ---- Tabs ---- */
.olc-tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 2px solid var(--olc-border);
}

.olc-tab {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--olc-light);
    color: var(--olc-muted);
    transition: all 0.2s;
    position: relative;
}

/* Tab Hover: transparente Typ-Farbe */
.olc-tab[data-type="support"]:hover { background: rgba(0, 104, 153, 0.08); color: var(--olc-support); }
.olc-tab[data-type="sales"]:hover { background: rgba(0, 52, 80, 0.08); color: var(--olc-team); }
.olc-tab[data-type="team"]:hover { background: rgba(224, 144, 0, 0.08); color: var(--olc-sales-text); }

/* Tab Active: Unterlinie + Schrift in Typ-Farbe */
.olc-tab.active { background: var(--octo-c-card, #ffffff); }
.olc-tab[data-type="support"].active { border-bottom: 3px solid var(--olc-support); color: var(--olc-support); }
.olc-tab[data-type="sales"].active { border-bottom: 3px solid var(--olc-team); color: var(--olc-team); }
.olc-tab[data-type="team"].active { border-bottom: 3px solid var(--olc-sales); color: var(--olc-sales-text); }

.olc-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--octo-c-on-dark, #ffffff);
    margin-left: 4px;
    vertical-align: middle;
}

.olc-tab[data-type="support"] .olc-tab-badge { background: var(--olc-support); }
.olc-tab[data-type="sales"] .olc-tab-badge { background: var(--olc-sales); }
.olc-tab[data-type="team"] .olc-tab-badge { background: var(--olc-team); }

/* ---- Tab Content ---- */
.olc-content {
    flex: 1;
    overflow-y: auto;
    display: none;
}

.olc-content.active {
    display: flex;
    flex-direction: column;
}

/* ---- Team: Favoriten ---- */
.olc-favorites {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--olc-border);
    min-height: 56px;
}

.olc-fav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--octo-c-on-dark, #ffffff);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s;
}

.olc-fav:hover { transform: scale(1.15); }

.olc-fav .fav-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--octo-c-card, #ffffff);
}

.olc-fav .fav-status.online { background: #22c55e; }
.olc-fav .fav-status.offline { background: var(--octo-c-muted, #6b7280); }

/* Pulsierender Rand bei neuen Nachrichten */
.olc-fav.has-unread {
    animation: olc-pulse 1.5s ease-in-out infinite;
}

@keyframes olc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(224, 144, 0, 0.6); }
    50%  { box-shadow: 0 0 0 6px rgba(224, 144, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 144, 0, 0); }
}

/* Unread-Zaehler auf Favoriten-Kreis */
.fav-unread {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    background: #ef4444;
    color: #1a1200;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 2px solid var(--octo-c-card, #ffffff);
}

/* Unread-Punkt in der Mitarbeiterliste */
.olc-member-unread {
    min-width: 18px;
    height: 18px;
    background: var(--octo-c-accent, #e09000);
    color: var(--octo-c-accent-text, #1a1200);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
}

/* ---- Team: Mitarbeiter-Dropdown ---- */
.olc-team-select {
    padding: 8px 16px;
    border-bottom: 1px solid var(--olc-border);
}

.olc-team-select select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--olc-border);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--olc-text);
}

/* ---- Gespraeche-Liste ---- */
.olc-chat-list {
    flex: 1;
    overflow-y: auto;
}

.olc-chat-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--octo-c-page, #f3f4f6);
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.olc-chat-item:hover { background: var(--octo-c-card-head, #f9fafb); }
.olc-chat-item.active { background: color-mix(in srgb, #eff6ff var(--octo-tint, 100%), var(--octo-c-card)); }

.olc-chat-item .item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--octo-c-on-dark, #ffffff);
    flex-shrink: 0;
}

.olc-chat-item .item-info {
    flex: 1;
    min-width: 0;
}

.olc-chat-item .item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--olc-text);
}

.olc-chat-item .item-preview {
    font-size: 11px;
    color: var(--olc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.olc-chat-item .item-time {
    font-size: 0.6875rem;
    color: var(--octo-c-muted, #6b7280);
    flex-shrink: 0;
}

.olc-chat-item .item-unread {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- Chat-Fenster (innerhalb Panel) ---- */
.olc-chat-view {
    display: none;
    flex-direction: column;
    height: 100%;
}

.olc-chat-view.active {
    display: flex;
}

.olc-chat-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--olc-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.olc-chat-back {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--olc-muted);
    padding: 0;
}

.olc-chat-header-name {
    font-weight: 600;
    font-size: 14px;
}

.olc-chat-header-status {
    font-size: 11px;
    color: var(--olc-muted);
}

.olc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    background: var(--olc-light);
}

.olc-msg {
    margin-bottom: 8px;
    max-width: 85%;
}

/* Eigene Nachrichten: links */
.olc-msg.outgoing {
    margin-right: auto;
    margin-left: 0;
}

/* Eingehende Nachrichten: rechts */
.olc-msg.incoming {
    margin-left: auto;
    margin-right: 0;
}

.olc-msg .msg-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

/* Eigene Nachrichten: weiss, links */
.olc-msg.outgoing .msg-bubble {
    background: var(--octo-c-card, #ffffff);
    border: 1px solid var(--olc-border);
    border-radius: 12px 12px 12px 2px;
    color: var(--olc-text);
}

/* Eingehende Nachrichten: rechts, Farbe nach Typ */
.olc-msg.incoming .msg-bubble {
    color: var(--octo-c-on-dark, #ffffff);
    border-radius: 12px 12px 2px 12px;
}
.olc-msg.incoming[data-type="support"] .msg-bubble {
    background: var(--olc-support);
    box-shadow: 0 1px 3px rgba(0, 104, 153, 0.2);
}
.olc-msg.incoming[data-type="sales"] .msg-bubble {
    background: var(--olc-team);
    box-shadow: 0 1px 3px rgba(0, 52, 80, 0.2);
}
.olc-msg.incoming[data-type="team"] .msg-bubble {
    background: var(--olc-sales);
    box-shadow: 0 1px 3px rgba(224, 144, 0, 0.2);
}

.olc-msg.incoming .msg-time {
    text-align: right;
}

.olc-msg .msg-time {
    font-size: 0.6875rem;
    color: var(--octo-c-muted, #6b7280);
    margin-top: 2px;
}

.olc-input-area {
    padding: 10px 16px;
    border-top: 1px solid var(--olc-border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    background: var(--octo-c-card, #ffffff);
}

.olc-input-area input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--olc-border);
    border-radius: 20px;
    font-size: 13px;
    outline: none;
}

.olc-input-area input:focus {
    border-color: var(--olc-team);
}

.olc-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    color: var(--octo-c-on-dark, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: opacity 0.2s;
}

.olc-send-btn:hover { opacity: 0.85; }

/* ---- Benachrichtigungs-Fahnchen ---- */
.olc-notification {
    position: fixed;
    right: 40px;
    bottom: -120px;
    width: 320px;
    padding: 14px 18px;
    border-radius: 10px;
    color: var(--octo-c-on-dark, #ffffff);
    cursor: pointer;
    z-index: 99995;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    transition: bottom 0.4s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.olc-notification.visible {
    bottom: 30px;
}

.olc-notification.type-support {
    background: var(--octo-c-card, #ffffff);
    border: 2px solid var(--olc-support);
    color: var(--octo-c-text, #111827);
}
.olc-notification.type-sales {
    background: var(--octo-c-card, #ffffff);
    border: 2px solid var(--olc-team);
    color: var(--octo-c-text, #111827);
}
.olc-notification.type-team {
    background: var(--octo-c-card, #ffffff);
    border: 2px solid var(--olc-sales);
    color: var(--octo-c-text, #111827);
}

.olc-notification .notif-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 4px;
}
.olc-notification.type-support .notif-title { color: var(--olc-support); }
.olc-notification.type-sales .notif-title { color: var(--olc-team); }
.olc-notification.type-team .notif-title { color: var(--olc-sales); }

.olc-notification .notif-body {
    font-size: 13px;
    line-height: 1.4;
    color: var(--octo-c-text, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.olc-notification .notif-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: none;
    color: var(--octo-c-muted, #6b7280);
    font-size: 0.875rem;
    cursor: pointer;
}

.olc-notification .notif-close:hover { color: color-mix(in srgb, #ef4444 var(--octo-ink, 100%), var(--octo-c-text)); }

/* ---- Stern-Button ---- */
.olc-star-btn:hover {
    transform: scale(1.2);
    color:color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)) !important;
}

/* ---- Team-Mitglieder ---- */
#olc-team-members {
    border-top: 1px solid var(--olc-border);
    padding: 4px 8px;
}

#olc-team-members .olc-chat-item {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 2px;
}

#olc-team-toggle {
    padding: 10px 16px !important;
}

/* ---- Leer-Zustand ---- */
.olc-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--olc-muted);
    font-size: 13px;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    #olc-panel {
        width: 100vw;
        right: -100vw;
    }
}

/* Sprung in die Kontaktakte, direkt unter dem Eingabefeld des Panels.
   Glas-Design in getoentem Blau, nicht weiss: eine weisse Flaeche auf
   weissem Grund findet man erst, wenn man sie sucht. Muster wie
   .octo-lc-btn--quiet (livechat-settings.css). */
.olc-contact-actions {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}
.olc-contact-btn {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid rgba(0, 107, 149, 0.25);
    border-radius: 0;
    background: rgba(0, 107, 149, 0.08);
    color: color-mix(in srgb, #006b95 var(--octo-ink, 100%), var(--octo-c-text));
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background .15s, border-color .15s, color .15s;
}
.olc-contact-btn:hover {
    background: rgba(0, 107, 149, 0.15);
    border-color: rgba(0, 107, 149, 0.4);
    color: color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text));
}

/* Gespraech beenden: gruenes Glas, links neben Notiz und Aufgabe.
   Gruen ist im Design-System fuer Erfolgs- und Abschlussaktionen
   reserviert - Werte wie .octo-btn-glass-green (campaigns.css). */
.olc-resolve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(16, 185, 129, .5);
    border-radius: 0;
    background: rgba(16, 185, 129, .1);
    color: color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text));
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.olc-resolve-btn:hover:not(:disabled) {
    background: rgba(16, 185, 129, .18);
    border-color: rgba(16, 185, 129, .7);
    color: color-mix(in srgb, #047857 var(--octo-ink, 100%), var(--octo-c-text));
}
.olc-resolve-btn--wide {
    flex: 1;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
}

/* Rueckfrage vor dem Beenden, innerhalb des Panels. */
.olc-end {
    position: absolute;
    inset: 0;
    background: rgba(0, 52, 80, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 5;
}
.olc-end-card {
    background: var(--octo-c-card, #ffffff);
    border: 1px solid rgba(0, 52, 80, .2);
    padding: 16px;
    width: 100%;
}
.olc-end-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: color-mix(in srgb, #003450 var(--octo-ink, 100%), var(--octo-c-text));
    margin-bottom: 12px;
}
.olc-end-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--octo-c-text, #111827);
    margin-bottom: 8px;
    cursor: pointer;
}
.olc-end-buttons {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

/* Gespraech anbieten: Glas in der Akzentfarbe #e09000 - siehe staff-chat.css. */
.olc-offer-btn {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid rgba(224, 144, 0, .5);
    border-radius: 0;
    background: rgba(224, 144, 0, .1);
    color: color-mix(in srgb, #a16800 var(--octo-ink, 100%), var(--octo-c-text));
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.olc-offer-btn:hover:not(:disabled) {
    background: rgba(224, 144, 0, .18);
    border-color: rgba(224, 144, 0, .7);
    color: color-mix(in srgb, #8e5900 var(--octo-ink, 100%), var(--octo-c-text));
}
.olc-offer-btn:disabled { opacity: .6; cursor: default; }

/* Kanal-Kennzeichen in der Liste (chat | email | whatsapp) - seit 2.18.0 */
.olc-channel {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    border: 1px solid var(--octo-c-border, #e5e7eb);
    color: var(--octo-c-muted, #6b7280);
    background: var(--octo-c-card, #ffffff);
}
.olc-channel--whatsapp {
    color: color-mix(in srgb, #128c7e var(--octo-ink, 100%), var(--octo-c-text));
    border-color: color-mix(in srgb, #128c7e 60%, var(--octo-c-border));
}
/*
 * Livechat in the new build: what today's pages set with inline styles or with the filters of the plugins, as classes with the same values
 * (design system "CSS classes instead of inline styles"). A fixed surface carries a fixed text, a role surface a role text.
 */

/* ---- floating panel: avatars, presence, system line (chat-panel.js inline styles) ---- */
.olc-av { background: #003450; color: var(--octo-c-on-dark, #ffffff); border: 3px solid var(--olc-av, #003450); }
.olc-av--support { background: #006899; border-color: #006899; color: var(--octo-c-on-dark, #ffffff); }
.olc-av--sales { background: #e09000; border-color: #e09000; color: #1a1200; }
.olc-av--team { background: #003450; color: var(--octo-c-on-dark, #ffffff); }
.item-unread.olc-av--support { background: #006899; border: 0; }
.item-unread.olc-av--sales { background: #e09000; border: 0; }
.olc-send-btn.olc-av--sales { color: #1a1200; }
.olc-send-btn.olc-av--support, .olc-send-btn.olc-av--team { border: 0; }
.olc-fav { background: #003450; border: 3px solid var(--olc-av, #003450); }
.olc-fav-empty { font-size: 11px; color: var(--octo-c-faint, #9ca3af); }
.olc-presence { color: var(--octo-c-faint, #9ca3af); }
.olc-presence.is-online { color: color-mix(in srgb, #0f7a37 var(--octo-ink, 100%), var(--octo-c-text)); }
.olc-msg-system { text-align: center; font-size: 11px; color: var(--octo-c-faint, #9ca3af); padding: 4px 0; font-style: italic; }
#olc-team-toggle { padding: 8px 16px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); cursor: pointer; font-size: 0.8rem; color: var(--octo-c-muted, #6b7280); display: flex; justify-content: space-between; align-items: center; }
#olc-team-toggle .olc-toggle-arrow { font-size: 0.6875rem; }
.olc-star-btn { background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px; color: #d1d5db; }
.olc-star-btn:hover { color: color-mix(in srgb, #9a6200 var(--octo-ink, 100%), var(--octo-c-text)); }
.olc-fav .fav-unread { position: absolute; }

/* ---- sidebar footer: the online switch (sidebar-footer.php inline styles, presence.js) ---- */
.osn-chat-toggle { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid #374151; border-radius: 12px; background: transparent; cursor: pointer; font-size: 0.625rem; color: var(--octo-c-sidebar-text, #d1d5db); transition: all 0.2s; }
.osn-chat-toggle .toggle-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; }
.osn-chat-toggle.is-online .toggle-dot { background: #22c55e; }
.octo-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: #ef4444; color: #1a1200; font-size: 0.6875rem; font-weight: 600; border-radius: 8px; margin-left: 6px; }

/* ---- box "Chat history" of the contact page (box-chat.php inline styles) ---- */
.box-chat .octo-box-badge { background: #006899; color: var(--octo-c-on-dark, #ffffff); border-radius: 10px; padding: 2px 8px; font-size: var(--octo-dv-label, 0.8125rem); margin-left: 8px; }
.octo-chat-entry { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); text-decoration: none; color: inherit; transition: background 0.15s; }
.octo-chat-entry:hover { background: var(--octo-c-card-head, #f9fafb); }
.octo-chat-type-icon { flex: 0 0 auto; margin-top: 2px; }
.octo-chat-type-icon .dashicons { font-size: 18px; }
.octo-chat-type-support { color: color-mix(in srgb, #dc2626 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-chat-type-sales { color: color-mix(in srgb, #059669 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-chat-info { flex: 1; min-width: 0; }
.octo-chat-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.octo-chat-subject { font-weight: 500; color: var(--octo-c-text, #111827); font-size: var(--octo-dv-value, 0.875rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.octo-chat-status { display: inline-block; font-size: var(--octo-dv-label, 0.8125rem); border-radius: 4px; padding: 1px 6px; border: 1px solid var(--octo-c-border, #e5e7eb); color: var(--octo-c-muted, #6b7280); }
.octo-chat-status--open { background: color-mix(in srgb, #dcfce7 var(--octo-tint, 100%), var(--octo-c-card)); border-color: color-mix(in srgb, #86efac var(--octo-tint, 100%), var(--octo-c-border)); color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-chat-status--waiting { background: color-mix(in srgb, #fef9c3 var(--octo-tint, 100%), var(--octo-c-card)); border-color: color-mix(in srgb, #fde047 var(--octo-tint, 100%), var(--octo-c-border)); color: color-mix(in srgb, #854d0e var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-chat-status--in_progress { background: color-mix(in srgb, #dbeafe var(--octo-tint, 100%), var(--octo-c-card)); border-color: color-mix(in srgb, #93c5fd var(--octo-tint, 100%), var(--octo-c-border)); color: color-mix(in srgb, #1e40af var(--octo-ink, 100%), var(--octo-c-text)); }
.octo-chat-meta { font-size: var(--octo-dv-label, 0.8125rem); color: var(--octo-c-muted, #6b7280); margin-top: 2px; }
.octo-chat-ticket { font-family: monospace; }
.octo-chat-arrow { flex: 0 0 auto; color: var(--octo-c-muted, #6b7280); margin-top: 4px; }

/* ---- the chat page: the line that proposes a contact (new, P14) ---- */
.chat-contact-line .sup-level a { color: inherit; text-decoration: underline; }

/* ---- settings page: orange buttons carry dark text (rule of the design system) ---- */
.octo-lc-btn--primary { color: var(--octo-c-accent-text, #1a1200); }
.octo-lc-hidden { display: none; }

/* ---- contrast and scale found by the measurement (the plugin's own rules left these below 4.5:1 or at the browser default) ---- */
#olc-trigger .trigger-badge { color: #1a1200; }
.chat-offer-btn, .olc-offer-btn { color: color-mix(in srgb, #7a4f00 var(--octo-ink, 100%), var(--octo-c-text)); }
.chat-attach > span { font-size: 0.95rem; }
.olc-tab[data-type="sales"] .olc-tab-badge { color: #1a1200; }
.olc-av--sales .fav-unread, .olc-chat-item .item-unread.olc-av--sales { color: #1a1200; }
.olc-msg.incoming[data-type="team"] .msg-bubble { color: #1a1200; }
.chat-detail-actions { flex-wrap: wrap; }
.octo-lc-settings .octo-form-group > label { display: block; font-size: 14px; margin-bottom: 4px; }