/* ============================================================================
   Anruf-Dock — die gemeinsame Hülle ALLER Gespräche in Team Hub.

   Nutzer:
     · UC_Phone (#ucPhonePanel, SIP-Softphone)      — js/views/UC_Phone/softphone.js
     · UC_Chat  (#ucCallDock,  LiveKit-Teamanruf)   — js/views/UC_Chat/uc-call.js

   Die uc-phone-*-Selektoren stehen bewusst hier mit in den Regeln: es gibt EINE
   Quelle für Rahmen, Kopf, Anfasser und Pill — nicht zwei, die auseinanderlaufen.
   Position/Größe setzt js/shared/call-dock.js als Inline-Style; hier steht nur
   die Standardplatzierung, der Griff und das mobile Bottom-Sheet.

   Vorher (bis 29.07.2026) heftete sich der Teamanruf im Audio-Modus als
   Querbalken über die Seite (top/left/right: 0) und verdeckte die Toolbar jedes
   Moduls. Kein Anruf-Element darf sich mehr über die Kopfzeile legen.
   ============================================================================ */

/* ---- Panel-Rahmen ------------------------------------------------------- */

.call-dock,
.uc-phone-panel {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 3100;
    display: flex;
    flex-direction: column;
    width: 21.5rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 6rem);
    background: var(--ds-card, var(--ds-background));
    color: var(--ds-foreground);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-card-radius, 0.75rem);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
    overflow: hidden;
    animation: call-dock-in 0.15s ease-out;
}

@keyframes call-dock-in {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Kopf (Griff zum Verschieben) --------------------------------------- */

.call-dock-head,
.uc-phone-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.5rem 0.6rem 0.9rem;
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    touch-action: none; /* sonst scrollt der Browser statt zu verschieben */
}
.call-dock-head:active,
.uc-phone-head:active { cursor: grabbing; }

.call-dock-head-icon,
.uc-phone-head-icon { color: var(--ds-success, #16a34a); }

.call-dock-head-title,
.uc-phone-head-title {
    flex: 1;
    min-width: 0;              /* Titel weicht zuerst, bevor die Kopf-Buttons gedrückt werden */
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-dock-x,
.uc-phone-x { flex-shrink: 0; }

/* Beschriftung am Einstellungen-Knopf — am Handy bleibt nur das Symbol. */
.call-dock-btn-label,
.uc-phone-btn-label { margin-left: 0.35rem; font-size: 0.8rem; }

/* ---- Inhaltsfläche ------------------------------------------------------ */

.call-dock-view,
.uc-phone-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem 0.9rem 0.9rem;
    gap: 0.6rem;
    overflow-y: auto;
    scrollbar-width: thin;
    /* Inhaltsfläche etwas abgesetzt vom Kopf — sonst verschwänden die ds-cards darin. */
    background: var(--ds-background);
}

/* ---- Verschieben & Skalieren -------------------------------------------- */

.call-dock-resize,
.uc-phone-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.15rem;
    height: 1.15rem;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 2;
    background: linear-gradient(135deg,
        transparent 0 52%, var(--ds-border) 52% 64%,
        transparent 64% 74%, var(--ds-border) 74% 86%,
        transparent 86%);
}

/* Zweiter Anfasser unten links: das Panel hängt rechts oben, nach links aufziehen ist der Normalfall. */
.call-dock-resize-left,
.uc-phone-resize-left {
    right: auto;
    left: 0;
    cursor: nesw-resize;
    background: linear-gradient(225deg,
        transparent 0 52%, var(--ds-border) 52% 64%,
        transparent 64% 74%, var(--ds-border) 74% 86%,
        transparent 86%);
}

body.call-dock-dragging,
body.uc-phone-dragging {
    user-select: none;
    cursor: grabbing;
}

/* ---- Minimiert-Pills ----------------------------------------------------
   Alle Pills hängen in EINER Spalte (call-dock.js legt den Host an), damit sich
   zwei gleichzeitige Gespräche — SIP und Teamanruf — nicht überlagern. */

.call-dock-pills {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 3100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;      /* die Pills selbst sind klickbar, der Streifen nicht */
}

.call-dock-pill,
.uc-phone-pill {
    position: static;          /* Platzierung macht der Pill-Streifen */
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--ds-success, #16a34a);
    border-radius: 999px;
    background: var(--ds-card, var(--ds-background));
    color: var(--ds-foreground);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgb(0 0 0 / 0.2);
    animation: call-dock-pulse 1.6s ease-in-out infinite;
}
.call-dock-pill i,
.uc-phone-pill i { color: var(--ds-success, #16a34a); }

@keyframes call-dock-pulse {
    0%   { box-shadow: 0 0 0 0 rgb(22 163 74 / 0.5); }
    70%  { box-shadow: 0 0 0 12px rgb(22 163 74 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(22 163 74 / 0); }
}

/* ---- Gesprächsansicht: Kopfblock, Steuerreihe --------------------------- */

.call-dock-callee,
.uc-phone-callee {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0 0.25rem;
    text-align: center;
}
.call-dock-callee-name,
.uc-phone-callee-name {
    font-weight: 600;
    font-size: 1.05rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.call-dock-callee-sub,
.uc-phone-callee-sub { font-size: 0.85rem; color: var(--ds-muted-foreground); }
.call-dock-callee-meta,
.uc-phone-callee-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ds-muted-foreground);
    min-height: 1.3rem;
}

.call-dock-actions-row,
.uc-phone-actions-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}
.call-dock-actions-row .ds-btn,
.uc-phone-actions-row .ds-btn { flex: 1; }

.call-dock-accept,
.uc-phone-accept {
    background: var(--ds-success, #16a34a);
    border-color: var(--ds-success, #16a34a);
    color: #fff;
}
.call-dock-accept:hover,
.uc-phone-accept:hover { filter: brightness(1.1); color: #fff; }

.call-dock-reject,
.uc-phone-reject {
    background: var(--ds-destructive, #dc2626);
    border-color: var(--ds-destructive, #dc2626);
    color: #fff;
}
.call-dock-reject:hover,
.uc-phone-reject:hover { filter: brightness(1.1); color: #fff; }

.call-dock-ctl-row,
.uc-phone-ctl-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
}
.call-dock-ctl-row-5,
.uc-phone-ctl-row-5 { grid-template-columns: repeat(5, 1fr); }
.call-dock-ctl-row-5 .call-dock-ctl span,
.uc-phone-ctl-row-5 .uc-phone-ctl span { font-size: 0.62rem; }

.call-dock-ctl,
.uc-phone-ctl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.55rem 0.25rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius, 0.5rem);
    background: transparent;
    color: var(--ds-foreground);
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.1s ease;
}
.call-dock-ctl span,
.uc-phone-ctl span { font-size: 0.62rem; color: var(--ds-muted-foreground); }
.call-dock-ctl:hover,
.uc-phone-ctl:hover { background: var(--ds-accent); }
.call-dock-ctl.is-active,
.uc-phone-ctl.is-active {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: var(--ds-primary-foreground, #fff);
}
.call-dock-ctl.is-active span,
.uc-phone-ctl.is-active span { color: var(--ds-primary-foreground, #fff); }
.call-dock-ctl-hangup,
.uc-phone-ctl-hangup {
    background: var(--ds-destructive, #dc2626);
    border-color: var(--ds-destructive, #dc2626);
    color: #fff;
}
.call-dock-ctl-hangup span,
.uc-phone-ctl-hangup span { color: rgb(255 255 255 / 0.85); }
.call-dock-ctl-hangup:hover,
.uc-phone-ctl-hangup:hover { background: var(--ds-destructive, #dc2626); filter: brightness(1.1); }

/* Pulsierendes Symbol (klingelt / verbindet) */
.call-dock-pulse,
.uc-phone-pulse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--ds-success, #16a34a);
    color: #fff;
    animation: call-dock-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}

/* ---- Übernahme nach Seitenwechsel --------------------------------------- */
/* Während call-dock.js das Gespräch wieder anbindet, bleibt die Hülle stehen und
   zeigt nur, dass gerade verbunden wird — der Anwender soll nicht denken, der
   Anruf sei weg. */

.call-dock-reattaching .call-dock-callee-name::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: var(--ds-warning, #f59e0b);
    animation: call-dock-blink 0.9s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes call-dock-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* ---- Mobil: Bottom-Sheet ------------------------------------------------ */

@media (max-width: 576px) {
    .call-dock,
    .uc-phone-panel {
        top: auto;
        bottom: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-height: 75vh;
    }
    .call-dock-pills { top: auto; bottom: 1rem; }
    /* Bottom-Sheet: Verschieben/Skalieren ergibt hier keinen Sinn — JS wendet auch keine Geometrie an. */
    .call-dock-resize,
    .uc-phone-resize { display: none; }
    .call-dock-head,
    .uc-phone-head { cursor: default; }
    .call-dock-btn-label,
    .uc-phone-btn-label { display: none; }
}