/* ================================================
   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 var(--octo-c-accent);
    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:var(--octo-c-accent-ink);
    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 color-mix(in srgb, var(--octo-c-accent) 60%, transparent); }
    50%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--octo-c-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--octo-c-accent) 0%, transparent); }
}

/* 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--bot .msg-bubble {
    background: var(--octo-c-card-head, #f3f4f6) !important;
    color: var(--octo-c-text, #111827) !important;
    border: 1px dashed var(--octo-c-border, #e5e7eb);
    box-shadow: none !important;
}
.olc-msg .msg-tag-bot {
    margin: 0 0 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--octo-c-muted, #6b7280);
    text-align: right;
}

.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-text); }

.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 color-mix(in srgb, var(--octo-c-accent) 50%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--octo-c-accent) 10%, transparent);
    color: var(--octo-c-accent-ink);
    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: color-mix(in srgb, var(--octo-c-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--octo-c-accent) 70%, transparent);
    color: var(--octo-c-accent-ink-deep);
}
.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; }

/* ---- the online switch in the header of the chat panel (was in the sidebar footer: 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; }
.olc-header .osn-chat-toggle { margin-left: auto; margin-right: 12px; border-color: rgba(255, 255, 255, 0.35); color: var(--octo-c-on-dark, #ffffff); }
.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; }

/* an answer saved in the ticket whose e-mail to the customer could not be sent through the mailbox of the support (page and floating panel) */
.msg-failed { margin-left: 8px; font-size: 0.8rem; color: var(--octo-c-danger, #dc2626); }
/*
 * Telephony: the call list, the dialog of a call, the box on the contact page and the settings. Colours come from the roles of the theme (status chips are the
 * badges of the appointment proposals, osn-ap-badge), the colour of an outcome is a data value (--osn-tel-hue); sizes come from the type scale; the page defines no
 * colour of a button and no font size of its own.
 */
.osn-tel-card { padding: 16px 20px; margin: 0 0 20px; }
.osn-tel-title { margin: 0 0 12px; font-size: var(--osn-fs-sub); font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-tel-muted { color: var(--octo-c-muted, #626973); font-size: var(--osn-fs-text); }

.osn-tel-bar-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 40px; align-items: center; gap: 12px; margin: 0 0 8px; font-size: var(--osn-fs-text); }
.osn-tel-bar-track { display: block; height: 8px; border-radius: 4px; background: var(--octo-c-card-head, #f7f9fb); overflow: hidden; }
.osn-tel-bar { display: block; height: 100%; width: var(--osn-tel-share, 0%); border-radius: 4px; background: var(--osn-tel-hue, var(--octo-c-accent, #e09000)); }
.osn-tel-bar-count { text-align: right; color: var(--octo-c-muted, #626973); }

/* the filters fill the row; the period (from and to) is one unit that wraps as a whole and never splits, so "To" is not left alone under the others */
.osn-tel-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.osn-tel-filters > .octo-form-group { flex: 1 1 140px; min-width: 0; margin: 0; }
.osn-tel-range { display: flex; gap: 16px; flex: 2 1 300px; min-width: 0; }
.osn-tel-range > .octo-form-group { flex: 1 1 0; min-width: 0; margin: 0; }
.osn-tel-table td, .osn-tel-table th { vertical-align: middle; }
.osn-tel-num { text-align: right; white-space: nowrap; }
.osn-tel-row--missed td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-card)); }
.osn-tel-direction { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: var(--osn-fs-text); }
.osn-tel-direction--compact .osn-tel-direction__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.osn-tel-number { white-space: nowrap; }
.osn-tel-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 8px 4px; font-size: var(--osn-fs-text); }

.osn-tel-outcome { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: var(--osn-fs-badge); font-weight: 600; line-height: 1.4; white-space: nowrap;
    color: var(--octo-c-text, #111827); border: 1px solid color-mix(in srgb, var(--osn-tel-hue, var(--octo-c-border)) 55%, transparent);
    background: color-mix(in srgb, var(--osn-tel-hue, var(--octo-c-border)) 16%, var(--octo-c-card)); }

.osn-tel-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 16px; font-size: var(--osn-fs-text); }
.osn-tel-facts dt { color: var(--octo-c-muted, #626973); }
.osn-tel-facts dd { margin: 0; overflow-wrap: anywhere; }
.osn-tel-section { margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--octo-c-border, #e5e7eb); }
.osn-tel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 12px; }
.osn-tel-actions--end { justify-content: flex-end; }
.osn-tel-player { width: 100%; margin: 4px 0 8px; }
.osn-tel-rec { font-size: 18px; width: 18px; height: 18px; color: var(--octo-c-muted, #626973); }
.osn-tel-health { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.osn-tel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin: 8px 0 0; }
.osn-tel-reload { margin: 8px 0 0; }

.osn-tel-call-button { margin-left: 6px; vertical-align: middle; }
.osn-tel-box-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.osn-tel-box-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card-head, #f7f9fb); }
.osn-tel-box-action { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; }
.osn-tel-box-number { display: inline-flex; align-items: center; gap: 4px; font-size: var(--osn-fs-text); }

.osn-tel-url { margin: 8px 0 0; width: 100%; }
.osn-tel-code { margin: 0 0 12px; padding: 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px; background: var(--octo-c-card-head, #f7f9fb); color: var(--octo-c-text, #111827); font-size: var(--osn-fs-hint); overflow-x: auto; }
.osn-tel-score { display: inline-flex; align-items: center; gap: 8px; }
.osn-tel-score .octo-input { width: 80px; }
.osn-tel-title + .octo-field-hint { margin-top: 0; }
@media (max-width: 700px) {
    .osn-tel-bar-row { grid-template-columns: 1fr 40px; }
    .osn-tel-bar-track { grid-column: 1 / -1; order: 3; }
    .osn-tel-direction__text { display: none; }
}

/* the phone window (/octo/phone): a small window without the frame of the application (500 x 760). The page is the darkest surface, the cards sit on it
   one step lighter (card), their heads one more (card-head); the call card carries a coloured edge for its state. Buttons are the octo-btn roles: the one
   main action (answer, place call, save) orange with dark text, everything else tinted glass. Text, numbers and labels are roles of the theme. */
body.octo-phone-window { background: var(--octo-c-page, #f3f4f6); margin: 0; }
.osn-pw { min-height: 100vh; box-sizing: border-box; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: var(--osn-fs-text); display: flex; flex-direction: column; gap: 12px; background: var(--octo-c-page, #f3f4f6); color: var(--octo-c-text, #111827); }
.osn-pw-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 10px; background: var(--octo-c-card-head, #f7f9fb); }
.osn-pw-status { font-size: var(--osn-fs-label); font-weight: 600; }
.osn-pw-dial, .osn-pw-call, .osn-pw-result, .osn-pw-note { box-sizing: border-box; padding: 16px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 10px; background: var(--octo-c-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.osn-pw-dial { display: flex; flex-direction: column; gap: 8px; }
.osn-pw-dial label { font-size: var(--osn-fs-label); font-weight: 600; }
.osn-pw-note { margin: 0; font-size: var(--osn-fs-text); }
.osn-pw .osn-phone-hint { width: auto; }
.osn-pw-call { display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--octo-c-link, #006b95); }
.osn-pw-call--incoming, .osn-pw-call--answering { border-left-color: var(--octo-c-accent, #e09000); }
.osn-pw-call--connected { border-left-color: #16a34a; }
.osn-pw-call-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-pw-direction { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.osn-pw-name { margin-top: 6px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.osn-pw-number { font-size: var(--osn-fs-text); color: var(--octo-c-muted, #626973); font-variant-numeric: tabular-nums; }
.osn-pw-call .osn-phone-state { margin-top: 4px; font-weight: 600; color: var(--octo-c-text, #111827); }
.osn-pw-links { display: flex; gap: 8px; margin-top: 8px; }
.osn-pw-call .osn-phone-actions { margin-top: 12px; }
.osn-pw-call .osn-phone-actions .octo-btn { flex: 1 1 auto; }
.osn-pw-result { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.osn-pw-result-title { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card-head, #f7f9fb); font-size: var(--osn-fs-card); font-weight: 600; }
.osn-pw-result-body { padding: 16px; }
.osn-tel-dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--octo-c-border, #e5e7eb); background: var(--octo-c-card-head, #f7f9fb); }
.osn-tel-dialog-footer .osn-dialog-start { margin-right: auto; }

/* the dial field: tools under the field, the list of hits or recent numbers as a card of its own, the active option tinted with a ring (keyboard) */
.osn-pw-dial-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.osn-pw-chosen { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-pw-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 8px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card-head, #f7f9fb); max-height: 360px; overflow-y: auto; }
.osn-pw-options-title { font-size: var(--osn-fs-hint); font-weight: 600; color: var(--octo-c-muted, #626973); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 4px; }
.osn-pw-hit { display: flex; flex-direction: column; gap: 4px; padding: 4px; }
.osn-pw-hit + .osn-pw-hit { border-top: 1px solid var(--octo-c-border-soft, #f1f5f9); padding-top: 8px; }
.osn-pw-hit-name { font-weight: 600; font-size: var(--osn-fs-text); color: var(--octo-c-text, #111827); }
.osn-pw-hit-company { margin-left: 8px; font-weight: 400; color: var(--octo-c-muted, #626973); }
.osn-pw-hit-numbers { display: flex; flex-direction: column; gap: 4px; }
.osn-pw .osn-pw-option { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 6px;
    background: var(--octo-c-card, #fff); color: var(--octo-c-text, #111827); font: inherit; font-size: var(--osn-fs-text); text-align: left; cursor: pointer; }
.osn-pw .osn-pw-option:hover, .osn-pw .osn-pw-option.is-active { background: var(--octo-c-quiet-bg, rgba(0, 107, 149, 0.08)); border-color: var(--octo-c-link, #006b95); }
.osn-pw .osn-pw-option.is-active { box-shadow: 0 0 0 2px var(--octo-c-link, #006b95) inset; }
.osn-pw .osn-pw-option:focus-visible { outline: 2px solid var(--octo-c-accent, #e09000); outline-offset: 1px; }
.osn-pw-option-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.osn-pw-option-kind { flex: none; min-width: 56px; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.osn-pw-option-number { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.osn-pw-option .dashicons { flex: none; color: var(--octo-c-muted, #626973); }

/* the dialog of a call (main tab and phone window): caller on top, then the state, the facts, who called and the result */
#osn-tel-call .octo-modal-content { width: min(600px, calc(100vw - 32px)); max-width: 600px; }
.osn-tel-caller { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.osn-tel-caller-main { min-width: 0; }
.osn-tel-caller-name { font-size: 1.125rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; color: var(--octo-c-text, #111827); }
.osn-tel-caller-number { font-size: var(--osn-fs-text); color: var(--octo-c-muted, #626973); font-variant-numeric: tabular-nums; }
.osn-tel-caller-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.osn-tel-dialog .osn-tel-section { padding: 12px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card-head, #f7f9fb); }
.osn-tel-dialog .osn-tel-section + .osn-tel-section { margin-top: 12px; }
/* tinted glass needs a body in the dark scheme: there the quiet blue of the light scheme almost vanishes on the card and the button reads as blue text */
:root[data-octo-theme="dark"] :is(.osn-pw, .osn-tel-dialog, .osn-tel-dialog-footer, #osn-tel-call) .octo-btn.octo-btn--secondary { background: rgba(79, 165, 201, 0.18); border-color: rgba(79, 165, 201, 0.55); color: #e6f0f4; }
:root[data-octo-theme="dark"] :is(.osn-pw, .osn-tel-dialog, .osn-tel-dialog-footer, #osn-tel-call) .octo-btn.octo-btn--secondary:hover:not(:disabled) { background: rgba(79, 165, 201, 0.28); border-color: #4fa5c9; color: #ffffff; }
:root[data-octo-theme="dark"] :is(.osn-pw, .osn-tel-dialog, #osn-tel-call) .octo-btn.octo-btn--danger { background: rgba(220, 38, 38, 0.18); border-color: rgba(248, 113, 113, 0.55); color: #fecaca; }
:root[data-octo-theme="dark"] :is(.osn-pw, .osn-tel-dialog, #osn-tel-call) .octo-btn.octo-btn--danger:hover:not(:disabled) { background: rgba(220, 38, 38, 0.3); border-color: #f87171; color: #ffffff; }
/* the labels of the dialog are labels, not headings */
.osn-tel-dialog .octo-form-group > label, .osn-pw-result .octo-form-group > label { font-size: var(--osn-fs-label); font-weight: 600; }
@media (max-width: 480px) { .osn-pw { padding: 8px; } }

/* the phone in a tab (no phone window open): the same face as the phone window, as a card above the button at the bottom right */
.osn-tab-phone { width: 500px; max-width: calc(100vw - 16px); max-height: calc(100vh - 96px); overflow-y: auto; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.osn-tab-phone .osn-pw { min-height: 0; }
/*
 * Support time (L6): the meter of the minutes included, the figures, the decision chips of the entries. Colours come from the roles of the theme; meaning (warning, full, billed)
 * is tinted the way the project badges are, the dark scheme mixes the surface down and the text up. A page defines no colour of a button and no font size of its own.
 */
.ost-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
.ost-figures--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ost-figure { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 8px; background: var(--octo-c-card, #ffffff); }
.ost-figure-value { font-size: 1.25rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.ost-figure-text { font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.ost-figure--warn .ost-figure-value { color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.ost-meter-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.ost-meter { position: relative; flex: 1 1 auto; height: 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 9999px; background: var(--octo-c-card-head, #f7f9fb); overflow: hidden; }
.ost-meter-bar { display: block; width: var(--ost-pct, 0%); height: 100%; background: var(--octo-c-link, #006899); }
.ost-meter.is-warn .ost-meter-bar { background: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); }
.ost-meter.is-full .ost-meter-bar { background: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); }
.ost-meter-text { flex: none; min-width: 3em; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); text-align: right; }
.sup-row .ost-meter { flex: 0 0 140px; }
.ost-note { grid-column: 1 / -1; margin: 0; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.ost-note.is-warn { color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); font-weight: 600; }
.ost-note.is-full { color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); font-weight: 600; }

/* ---- the decision of an entry, tinted by meaning */
.ost-chip { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 9999px; background: var(--octo-c-card-head, #f7f9fb); color: var(--octo-c-text, #111827); font-size: var(--osn-fs-badge); font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.ost-chip--overage { background: color-mix(in srgb, #fef3c7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); border-color: color-mix(in srgb, #92400e 35%, var(--octo-c-card)); }
.ost-chip--fault, .ost-chip--offer { background: color-mix(in srgb, #dbeafe var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #1e40af var(--octo-ink, 100%), var(--octo-c-text)); border-color: color-mix(in srgb, #1e40af 35%, var(--octo-c-card)); }
.ost-chip--billed { background: color-mix(in srgb, #dcfce7 var(--octo-tint, 100%), var(--octo-c-card)); color: color-mix(in srgb, #166534 var(--octo-ink, 100%), var(--octo-c-text)); border-color: color-mix(in srgb, #166534 35%, var(--octo-c-card)); }

/* ---- the box of the contact and the company, and the page */
.ost-box-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.ost-box-for { margin: 0 0 8px; font-size: var(--osn-fs-hint); color: var(--octo-c-muted, #626973); }
.ost-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ost-toolbar-left, .ost-toolbar-right { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.ost-field { display: flex; flex-direction: column; gap: 4px; }
.ost-field label { font-size: var(--osn-fs-label); font-weight: 600; }
.ost-field .octo-input { width: auto; min-width: 150px; }
.ost-empty { padding: 24px; text-align: center; }
.ost-sub { display: block; color: var(--octo-c-muted, #626973); font-size: var(--osn-fs-hint); font-weight: 400; }
.ost-num { text-align: right; white-space: nowrap; }
.ost-pct-cell { white-space: nowrap; }
.ost-pct-cell.is-warn { color: color-mix(in srgb, #92400e var(--octo-ink, 100%), var(--octo-c-text)); font-weight: 600; }
.ost-pct-cell.is-full { color: color-mix(in srgb, #991b1b var(--octo-ink, 100%), var(--octo-c-text)); font-weight: 600; }
.ost-detail-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; }
.ost-detail-head h2 { margin: 0; }
.ost-package { display: inline-flex; align-items: center; gap: 6px; }
.ost-support-flag { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--octo-c-border, #e5e7eb); border-radius: 9999px; background: var(--octo-c-card-head, #f7f9fb); color: var(--octo-c-text, #111827); font-size: var(--osn-fs-badge); font-weight: 600; white-space: nowrap; }
.ost-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ost-detail { margin-top: 20px; }
.ost-detail .octo-form-actions { justify-content: flex-end; }
@media (max-width: 760px) {
    .ost-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ost-card { min-width: 0; max-width: 100%; }
.ost-card .osn-scroll-x { max-width: 100%; }