/* Mobile week grid, student calendar, chat, inbox. Paper / ink / gold, square edges. */

.teacher-chat-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}
.teacher-chat-heading-text {
    min-width: 0;
}
.teacher-chat-form textarea,
#chat-input {
    flex: 1 1 auto;
    min-width: 0;
}
.teacher-chat-compose-tools {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
}
.chat-file-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.chat-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.chat-file-caption {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid var(--border, #d8cfc0);
    background: #fffdf8;
    color: var(--text, #1a1612);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.2;
    pointer-events: none;
}
.teacher-inbox-meta,
.teacher-inbox-actions {
    min-width: 0;
}

@media (max-width: 900px) {
    .teacher-chat-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
    }
    .teacher-chat-form textarea,
    .teacher-chat-form > textarea,
    #chat-input,
    #teacher-chat-input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .teacher-chat-compose-tools {
        width: 100%;
        grid-column: 1 / -1;
    }
}

@media (max-width: 960px) {
    .weekboard-card,
    .weekboard-body,
    .weekboard-toolbar,
    .weekboard-legend,
    .weekboard-hours,
    .teacher-inbox,
    .tripi-student-cal,
    .teacher-chat-card,
    .teacher-chat-shell,
    .chat-main-pane,
    .chat-list-pane {
        max-width: 100%;
        min-width: 0;
    }

    .weekboard-body {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
        align-items: stretch;
    }
    .weekboard-scroll {
        order: 1;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-radius: 0;
    }
    .weekboard-side {
        order: 2;
        width: 100%;
        min-height: 0;
        border-radius: 0;
    }
}

@media (max-width: 720px) {
    .weekboard-card {
        overflow-x: clip;
    }

    .weekboard-grid {
        --wb-gutter: 40px;
        --wb-day: 108px;
        --wb-hour: 56px;
        min-width: calc(var(--wb-gutter) + 7 * var(--wb-day));
        width: max-content;
        max-width: none;
        box-sizing: border-box;
    }
    .wb-head,
    .wb-body-row {
        display: grid;
        grid-template-columns: var(--wb-gutter) repeat(7, minmax(var(--wb-day), 1fr));
        width: 100%;
        min-width: calc(var(--wb-gutter) + 7 * var(--wb-day));
    }
    .wb-corner,
    .wb-hours {
        position: sticky;
        left: 0;
        z-index: 4;
        background: #f3eee4;
        box-shadow: 1px 0 0 var(--border, #d8cfc0);
    }
    .wb-head {
        z-index: 5;
    }
    .wb-hours {
        z-index: 3;
    }
    .wb-gutter {
        height: auto;
        box-sizing: border-box;
        line-height: 1.15;
        overflow: hidden;
    }
    .wb-col {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: var(--wb-day);
        overflow: hidden;
        isolation: isolate;
    }
    .wb-cell {
        flex: 0 0 auto;
        width: 100%;
        box-sizing: border-box;
        min-height: 0;
    }
    .wb-block {
        box-sizing: border-box;
        max-width: calc(100% - 4px);
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        border-radius: 0;
        z-index: 2;
    }
    .wb-block strong,
    .wb-block span {
        display: block;
        overflow-wrap: anywhere;
    }
    .wb-cloud {
        width: 28px;
        z-index: 3;
        pointer-events: auto;
    }
    .wb-cloud-dot,
    .wb-cloud-svg {
        width: 28px;
        height: 20px;
    }
    .wb-cloud.is-open {
        left: 4px;
        right: 4px !important;
        width: auto;
        z-index: 8;
    }
    .wb-cloud-pop {
        box-sizing: border-box;
        max-width: 100%;
    }
    .wb-cloud-pop textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .wb-now {
        left: var(--wb-gutter);
    }

    .weekboard-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .weekboard-toolbar .pill-row,
    .weekboard-modal .pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .weekboard-toolbar .pill-row .btn,
    .weekboard-modal .pill-row .btn,
    #wb-modal .pill-row .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        text-align: center;
        border-radius: 0;
    }

    .teacher-inbox .student-week-item,
    .student-week-item,
    .teacher-inbox-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        overflow: hidden;
    }
    .teacher-inbox .student-week-item > div,
    .student-week-item > div,
    .teacher-inbox-meta {
        min-width: 0;
        max-width: 100%;
    }
    .teacher-inbox .student-week-item strong,
    .student-week-item strong,
    .teacher-inbox-meta strong,
    .teacher-inbox .student-week-item p,
    .student-week-item p {
        overflow-wrap: anywhere;
    }
    .teacher-inbox .pill-row,
    .student-week-item .pill-row,
    .teacher-inbox-actions {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }
    .teacher-inbox .pill-row .btn,
    .student-week-item .pill-row .btn,
    .teacher-inbox-actions .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        text-align: center;
        border-radius: 0;
    }

    .tripi-student-cal {
        overflow-x: clip;
    }
    .tripi-student-cal > .pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .tripi-student-cal > .pill-row label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1 1 140px;
        min-width: 0;
    }
    .tripi-student-cal > .pill-row input,
    .tripi-student-cal > .pill-row select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 0;
    }
    #stu-cal-title {
        flex: 1 1 140px;
        min-width: 0 !important;
        text-align: center;
        overflow-wrap: anywhere;
    }
    .tripi-student-cal-grid.is-week,
    .tripi-student-cal-grid.is-month {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .tripi-student-cal-grid.is-week .sch-week {
        display: grid;
        width: max-content;
        min-width: 100%;
        grid-template-columns: repeat(7, minmax(112px, 1fr));
        overflow: visible;
        padding-bottom: 4px;
    }
    .sch-daycard {
        min-width: 112px;
        max-width: 160px;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 0;
    }
    .sch-daycard-list,
    .sch-chip {
        max-width: 100%;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    .tripi-student-cal-grid.is-month {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
        overflow-x: hidden;
    }
    .tripi-student-cal-cell {
        min-width: 0;
        min-height: 48px;
        padding: 4px 3px;
        overflow: hidden;
        border-radius: 0;
        box-sizing: border-box;
    }
    .sch-month-chip {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tripi-student-cal-detail {
        overflow-wrap: anywhere;
        border-radius: 0;
    }

    .teacher-chat-card,
    .teacher-chat-shell,
    .chat-list-pane,
    .chat-main-pane,
    .chat-list-item,
    .teacher-chat-form,
    .teacher-chat-avatar {
        border-radius: 0;
    }
    .teacher-chat-shell--with-list {
        display: block;
        grid-template-columns: none;
    }
    .teacher-chat-header {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 8px 10px;
        padding-right: 0;
    }
    .teacher-chat-header > .teacher-chat-heading {
        grid-column: 2;
        min-width: 0;
    }
    .teacher-chat-header > .teacher-chat-tools,
    .teacher-chat-header > #chat-teacher-tools {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .teacher-chat-title,
    .teacher-chat-subtitle {
        overflow-wrap: anywhere;
        margin: 0;
    }
    .teacher-chat-title {
        font-size: 18px;
        line-height: 1.2;
    }
    .chat-list-item-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 8px;
    }
    .chat-list-item-head strong,
    .chat-list-preview {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .teacher-chat-form {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
        max-width: 100%;
        box-sizing: border-box;
    }
    .teacher-chat-form textarea,
    .teacher-chat-form > textarea,
    #chat-input,
    #teacher-chat-input {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        grid-column: auto;
        border-radius: 0;
    }
    .teacher-chat-compose-tools {
        display: flex;
        align-items: stretch;
        gap: 8px;
        width: 100%;
    }
    .chat-file-label {
        flex: 1 1 auto;
        width: auto;
        grid-column: auto;
    }
    .chat-file-caption {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .teacher-chat-form .btn,
    .teacher-chat-send {
        flex: 0 0 auto;
        grid-column: auto;
        width: auto;
        white-space: nowrap;
        border-radius: 0;
    }
    .teacher-chat-status,
    #copy-chat-pass {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .sch-ww-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }
    .sch-ww-bar,
    .sch-ww-row input {
        grid-column: 2;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .teacher-detail-main-grid .teacher-chat-form {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-end;
    }
    .teacher-detail-main-grid #teacher-chat-input {
        flex: 1 1 auto;
        width: auto;
    }
    .teacher-detail-main-grid .teacher-chat-send {
        position: absolute;
        right: 6px;
        top: 16px;
        bottom: 4px;
        margin-top: auto;
        margin-bottom: auto;
        transform: none;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
    }
}

@media (max-width: 420px) {
    .weekboard-grid {
        --wb-gutter: 36px;
        --wb-day: 100px;
    }
    .teacher-inbox .pill-row .btn,
    .student-week-item .pill-row .btn,
    .teacher-inbox-actions .btn,
    .weekboard-toolbar .pill-row .btn {
        flex-basis: 100%;
    }
    .tripi-student-cal-grid.is-month .sch-month-chip {
        font-size: 9px;
    }
}