/* ========================================
   VideoChat - BEM Overlay Styles
   Additive CSS: enhances visual appearance
   while legacy layout.css handles positioning.
   All IDs and ng-class classes are preserved.
   ======================================== */

/* ========================================
   Main Container
   ======================================== */

.vchat__title {
    padding-left: var(--padding-lateral);
}

.vchat__speech-bubble {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-body-bold);
}

.vchat__help-btn {
    position: absolute;
    right: 65px;
    height: 40px;
    width: 190px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    font-family: 'robotomedium';
    cursor: pointer;
    top: 78px;
    z-index: 9999;
    font-size: 17px;
    transition: var(--transition-fast);
}

.vchat__help-btn:hover {
    background: var(--color-primary-hover);
}

/* ========================================
   Trainer Rating Popup
   ======================================== */

.vchat-rating__heading {
    font-family: var(--font-secondary-header);
    font-weight: var(--weight-secondary-header);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
}

.vchat-rating__text {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

.vchat-rating__category {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.vchat-rating__stars {
    display: flex;
    gap: var(--spacing-xs);
}

.vchat-rating__star {
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: var(--transition-fast);
}

.vchat-rating__star:hover {
    transform: scale(1.15);
}

.vchat-rating__comment-label {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-top: var(--spacing-lg);
}

.vchat-rating__comment {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    transition: var(--transition-default);
}

.vchat-rating__comment:focus {
    border-color: var(--color-border-focus);
    outline: none;
}

.vchat-rating__confirm {
    transition: var(--transition-default);
}

.vchat-rating__confirm:hover:not(.confirmIconDisabled) {
    opacity: 0.9;
}

/* ========================================
   Support Chat
   ======================================== */

.vchat-support__title {
    font-family: var(--font-secondary-header);
    font-weight: var(--weight-secondary-header);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.vchat-support__date {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.vchat-support__bubble p {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
}

.vchat-support__time {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.vchat-support__input {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.vchat-support__input::placeholder {
    color: var(--color-text-muted);
}

.vchat-support__student-name {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.vchat-support__student-date {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.vchat-support .mail-button,
.vchat-support .expand-trigger.expandable-background.visible,
.vchat-support .expand-trigger.expandable-background:hover {
    background-color: var(--color-primary);
}

.vchat-support .vchat-support__send.send-message-bar-send:hover {
    background-color: var(--color-primary-hover);
}

/* ========================================
   Lobby (Pre-call States)
   ======================================== */

.vchat-lobby__status {
    color: var(--color-button-exam);
    text-align: center;
    padding-top: 5px;
    padding-bottom: 1px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    font-size: 16px;
}

.vchat-lobby__status h5,
.vchat-lobby__connecting h5,
.vchat-lobby__online h5 {
    font-family: var(--font-secondary-header);
    font-weight: var(--weight-secondary-header);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
}

.vchat-lobby__session {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.vchat-lobby__help-link {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: var(--weight-body-bold);
    transition: var(--transition-default);
}

.vchat-lobby__help-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

/* ========================================
   Audio/Video Test
   ======================================== */

.vchat-test__panel {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 600px;
    height: 300px;
    margin: 0 auto;
}

.vchat-test__header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vchat-test__start {
    float: left;
    width: 100%;
}

.vchat-test__label {
    font-family: var(--font-secondary-header);
    font-weight: var(--weight-secondary-header);
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-preheader);
    color: var(--color-text-primary);
}

.vchat-test__again p,
.vchat-test__end p {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-body-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-preheader);
}

.vchat-test__btn {
    width: 100%;
    border-radius: 0;
    background: var(--color-background-sidebar);
}

.vchat-test__btn:hover {
    background: var(--color-background-light-gold);
}

.vchat-test__btn img {
    width: 20px;
    margin-right: 10px;
}

/* ========================================
   Active Video Call
   ======================================== */

.vchat-video__name {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.vchat-video__timer {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.vchat-video__company {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
}

.vchat-video__control {
    transition: var(--transition-fast);
}

.vchat-video__control:hover {
    transform: scale(1.1);
}

.vchat-video__notification p {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: #ffffff;
}

.vchat-video__myspace {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-preheader);
    transition: var(--transition-default);
}

.vchat-video__myspace:hover {
    opacity: 0.8;
}

/* ========================================
   Audio-Only Call
   ======================================== */

.vchat-audio__status p {
    font-family: var(--font-secondary-header);
    font-weight: var(--weight-secondary-header);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-preheader);
    color: var(--color-text-primary);
}

.vchat-audio__name {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-md);
}

.vchat-audio__timer {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.vchat-audio__control {
    transition: var(--transition-fast);
}

.vchat-audio__control:hover {
    transform: scale(1.1);
}

/* ========================================
   Text Chat
   ======================================== */

.vchat-chat__date {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.vchat-chat__bubble p {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
}

.vchat-chat__time {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.vchat-chat__input {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.vchat-chat__input::placeholder {
    color: var(--color-text-muted);
}

.vchat-chat__doc-name {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.vchat-chat__doc-name:hover {
    text-decoration: underline;
}

/* ========================================
   Teacher: Student List
   ======================================== */

.vchat-students__section-title {
    font-family: var(--font-preheader);
    font-weight: var(--weight-preheader);
    font-size: var(--size-preheader);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-preheader);
    color: var(--color-text-muted);
}

.vchat-students__empty {
    color: var(--color-button-exam);
    width: 240px;
    height: 45px;
    text-align: center;
    padding-top: 1px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    margin-top: 85px;
}

.vchat-students__empty h5 {
    font-family: var(--font-secondary-header);
    font-weight: var(--weight-secondary-header);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
}

.vchat-students__name {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.vchat-students__company {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.vchat-students__status-text {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-preheader);
}

.vchat-students__join {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    cursor: pointer;
    text-transform: uppercase;
    transition: var(--transition-default);
}

.vchat-students__join:hover {
    color: var(--color-primary-hover);
}

.vchat-students__call-btn {
    transition: var(--transition-fast);
}

.vchat-students__call-btn:hover {
    transform: scale(1.08);
}

/* ========================================
   Teacher: Class Sessions
   ======================================== */

.vchat-classes__section-title {
    font-family: var(--font-preheader);
    font-weight: var(--weight-preheader);
    font-size: var(--size-preheader);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-preheader);
    color: var(--color-text-muted);
}

.vchat-classes__name {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.vchat-classes__date {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.vchat-classes__call-btn {
    transition: var(--transition-fast);
}

.vchat-classes__call-btn:hover {
    transform: scale(1.08);
}

/* ========================================
   Teacher: Connecting State
   ======================================== */

.vchat-connect__name {
    font-family: var(--font-body);
    font-weight: var(--weight-body-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.vchat-connect__company {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.vchat-connect__avatar {
    border-radius: var(--border-radius-round);
    border: 2px solid var(--color-primary);
}

/* ========================================
   Responsive
   ======================================== */

@media screen and (max-width: 860px) {
    .vchat__title {
        padding-left: 0;
    }

    .vchat-students__item {
        flex-wrap: wrap;
    }

    .vchat-students__controls {
        width: 100%;
        justify-content: flex-start;
        margin-top: var(--spacing-sm);
    }

    .vchat-test__panel {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .vchat-rating__stars {
        gap: var(--spacing-sm);
    }

    .vchat-rating__star {
        font-size: var(--font-size-lg);
    }
}