/* SociaLearn mobile-first interaction layer. Feature files own their desktop
 * visuals; this file owns viewport geometry, touch ergonomics and overlays. */
:root {
  --mobile-gutter: clamp(1rem, 4vw, 1.25rem);
  --mobile-control-size: 2.75rem;
  --app-height: 100dvh;
  --visual-viewport-top: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 0; max-width: 100%; overflow-x: hidden; }
body { overscroll-behavior-x: none; }
img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
input, select, textarea { font-size: max(16px, 1em); }
.site-header { padding-top: env(safe-area-inset-top, 0px); }
.room-page, .messages-page { min-height: calc(var(--app-height) - var(--header-height, 6rem)); }
.room-page .room, .room-page .room-header, .room-page .room-header__identity,
.room-page .room-header__copy, .room-page .room-header__tools, .room-composer { min-width: 0; }
.room-header__copy h1, .room-header__copy p, .thread__bubble, .thread__text,
.message-body, .announcement-card p, .participant p { overflow-wrap: anywhere; word-break: break-word; }
.room-page .conversation { min-width: 0; overflow-x: hidden; }
.room__message { padding-bottom: max(.8rem, env(safe-area-inset-bottom, 0px)); }
.room__message textarea { max-width: 100%; font-size: 16px; }
.room-header__tools > * { flex: 0 0 auto; }
.shared-tasks-board, .shared-task-card, .session-card, .participant-row { min-width: 0; }
.shared-task-card__actions, .session-card__footer, .participant__moderation-actions { flex-wrap: wrap; }

/* Fixed surfaces always use the visual viewport and own their scroll region. */
.mobile-nav-drawer, .room-page .participants-drawer, .room-page .sessions-drawer,
.room-page .shared-tasks-drawer, .room-page .announcements-drawer,
.room-page .whiteboard-drawer, .room-document-notes-panel, .room-ai-assistant-panel {
  max-width: 100vw;
  max-height: var(--app-height);
}
.participants__list, .sessions-drawer__body, .announcements-list, .shared-tasks-board,
.room-document-notes-panel__body, .room-ai-messages { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal-backdrop { min-height: var(--app-height); padding: max(1rem, env(safe-area-inset-top, 0px)) var(--mobile-gutter) max(1rem, env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.modal-card { width: min(100%, 44rem); max-height: calc(var(--app-height) - 2rem); display: flex; flex-direction: column; }
.modal-card__body { min-height: 0; overflow-y: auto; overflow-wrap: anywhere; }
.modal-card__header, .modal-card__actions { flex: 0 0 auto; }
.modal-card__close, .icon-button, .menu-button { min-width: var(--mobile-control-size); min-height: var(--mobile-control-size); }
.modal-card__actions { padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }

@media (max-width: 767px) {
  .container { padding-inline: var(--mobile-gutter); }
  .site-header .container { padding-inline: .8rem; }
  .room-page > .container { padding-inline: 0; }
  .room-page .room-header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: .55rem; padding: .75rem var(--mobile-gutter); min-height: 7.8rem; }
  .room-header__identity { gap: .7rem; }
  .room-header__mark { flex-basis: 2.9rem; width: 2.9rem; height: 2.9rem; border-radius: .85rem; }
  .room-header__title-row { gap: .45rem; }
  .room-header__copy h1 { max-width: min(55vw, 20rem); font-size: 1.25rem; }
  .room-header__copy p { margin-top: .2rem; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .room-header__tools { display: flex; align-items: center; justify-content: flex-start; gap: .25rem; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; }
  .room-header__tools .room-header__icon { min-width: 2.75rem; min-height: 2.75rem; }
  .room-header__tools > #room-search-toggle, .room-header__tools > #room-announcements-toggle, .room-header__tools > .room-info { display: none; }
  .room-header__more { display: inline-flex; }
  .room-header__tools .room-header__pomodoro-btn, .room-header__tools .room-header__tasks-btn { display: none; }

  .room-page .participants-drawer, .room-page .sessions-drawer, .room-page .shared-tasks-drawer, .room-page .announcements-drawer { inset-inline: 0; width: 100%; height: var(--app-height); max-height: var(--app-height); border-inline: 0; }
  .participants__top, .sessions-drawer__header, .announcements-drawer__header, .shared-tasks-drawer__header { padding-inline: var(--mobile-gutter); }
  .participants__top, .announcements-drawer__header { padding-top: max(1rem, env(safe-area-inset-top, 0px)); }
  .announcements-drawer__header, .shared-tasks-drawer__header { flex-wrap: wrap; }
  .modal-card__actions { justify-content: stretch; }
  .modal-card__actions .btn { flex: 1 1 10rem; min-height: 2.75rem; }
  .shared-task-modal-card .form__group-row { grid-template-columns: 1fr; }

  .participant-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .75rem var(--mobile-gutter); }
  .participant-row .participant { grid-column: 1 / 3; min-width: 0; }
  .participant-row .participant__actions-group, .participant-row > .participant__moderation-actions { display: none; }
  .participant__menu-trigger { grid-column: 3; grid-row: 1; display: inline-flex; }
  .participant p { min-width: 0; }
  .participant p > span { display: block; white-space: normal; }

  .whiteboard-drawer { display: flex; flex-direction: column; height: var(--app-height); max-height: var(--app-height); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .whiteboard-drawer__header { min-height: 3.3rem; padding: .35rem .75rem; }
  .whiteboard-drawer__title h2 { max-width: 14rem; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .whiteboard-status-text { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .whiteboard-drawer__actions { margin-left: auto; gap: .25rem; overflow: visible; }
  .whiteboard-drawer__actions > .btn { display: none; }
  .whiteboard-drawer__actions .whiteboard-drawer__close { display: inline-flex; }
  .whiteboard-toolbar { position: absolute; z-index: 2; inset-inline: .65rem; bottom: max(.65rem, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: .35rem; width: auto; max-width: calc(100% - 1.3rem); padding: .4rem; border: 1px solid var(--border, rgb(148 163 184 / .25)); border-radius: 1rem; background: color-mix(in srgb, var(--surface, #101827) 94%, transparent); box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .3); overflow-x: auto; overscroll-behavior-x: contain; }
  .whiteboard-toolbar__tools { display: flex; gap: .25rem; flex: 0 0 auto; }
  .whiteboard-toolbar__tools .btn { min-width: 2.85rem; min-height: 2.85rem; padding-inline: .65rem; font-size: .85rem; }
  .whiteboard-toolbar__colors { display: flex; gap: .3rem; flex: 0 0 auto; }
  .whiteboard-color, .whiteboard-custom-color-wrapper { flex: 0 0 2rem; width: 2rem; height: 2rem; }
  .whiteboard-toolbar__sizes { display: none; }
  .whiteboard-toolbar__danger { display: block; flex: 0 0 auto; margin-left: auto; }
  .whiteboard-toolbar__danger .btn { min-height: 2.85rem; white-space: nowrap; }
  .whiteboard-canvas-container { flex: 1 1 auto; min-height: 0; }

  .room-pinned-announcement-bar { max-height: 5.5rem; overflow: hidden; }
  .announcement-card footer { align-items: flex-start; flex-direction: column; }
  .announcement-card__actions { display: none; width: 100%; }
  .announcement-card__menu-trigger { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; margin-inline-start: auto; border: 1px solid var(--border, rgb(148 163 184 / .25)); border-radius: .6rem; background: transparent; color: inherit; }
}

@media (max-width: 767px) {
  .room-info__panel { position: fixed !important; z-index: 5000 !important; top: max(4.5rem, calc(var(--header-height, 6rem) + env(safe-area-inset-top, 0px))) !important; transform: translateZ(0); }
}

/* Shared action sheet: labelled, grouped, safe-area aware and non-clipping. */
.mobile-action-sheet[hidden] { display: none; }
.mobile-action-sheet { position: fixed; inset: 0; z-index: 3000; }
.mobile-action-sheet__backdrop { position: absolute; inset: 0; background: rgb(2 8 23 / .68); backdrop-filter: blur(4px); }
.mobile-action-sheet__surface { position: absolute; inset-inline: 0; bottom: 0; max-height: min(82dvh, 48rem); overflow-y: auto; overscroll-behavior: contain; padding: .5rem var(--mobile-gutter) max(1rem, env(safe-area-inset-bottom, 0px)); border: 1px solid var(--surface-border, rgb(148 163 184 / .2)); border-bottom: 0; border-radius: 1.25rem 1.25rem 0 0; background: var(--surface, #101827); color: var(--text-primary, #e2e8f0); box-shadow: 0 -1rem 3rem rgb(0 0 0 / .32); }
.mobile-action-sheet__grabber { width: 2.5rem; height: .25rem; margin: .1rem auto .45rem; border-radius: 999px; background: var(--text-muted, #94a3b8); opacity: .65; }
.mobile-action-sheet__header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3.8rem; padding: .15rem 0 .65rem; background: var(--surface, #101827); border-bottom: 1px solid var(--surface-border, rgb(148 163 184 / .2)); }
.mobile-action-sheet__eyebrow { margin: 0 0 .15rem; color: var(--primary, #53c7e8); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mobile-action-sheet__header h2 { margin: 0; font-size: 1.15rem; }
.mobile-action-sheet__body { padding-top: .85rem; }
.mobile-action-sheet__tool-groups, .mobile-action-sheet__actions { display: grid; gap: .9rem; }
.mobile-action-sheet__group { display: grid; gap: .45rem; }
.mobile-action-sheet__group::before { content: attr(data-label); color: var(--text-muted, #94a3b8); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mobile-action-sheet__tool { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; width: 100%; min-height: 4.1rem; padding: .65rem .8rem; border: 1px solid var(--surface-border, rgb(148 163 184 / .2)); border-radius: .85rem; background: var(--surface-raised, #132439); color: inherit; text-align: start; }
.mobile-action-sheet__tool:active, .mobile-action-sheet__tool:focus-visible { border-color: var(--primary, #53c7e8); background: var(--primary-soft, rgb(83 199 232 / .12)); outline: none; }
.mobile-action-sheet__tool-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .65rem; color: var(--primary, #53c7e8); background: var(--primary-soft, rgb(83 199 232 / .12)); }
.mobile-action-sheet__tool-icon .ui-icon { width: 1.25rem; height: 1.25rem; }
.mobile-action-sheet__tool-copy { min-width: 0; display: grid; gap: .15rem; }
.mobile-action-sheet__tool-copy strong, .mobile-action-sheet__tool-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-action-sheet__tool-copy small { color: var(--text-muted, #94a3b8); font-size: .78rem; }
.mobile-action-sheet__actions form, .mobile-action-sheet__actions button { width: 100%; }
.mobile-action-sheet__actions .participant__moderation-actions { display: grid; gap: .55rem; }
.mobile-action-sheet-open { overflow: hidden; }
.room-header__more, .participant__menu-trigger, .announcement-card__menu-trigger { display: none; }
@media (max-width: 767px) { .room-header__more, .participant__menu-trigger, .announcement-card__menu-trigger { display: inline-flex; } }

@media (max-width: 360px) {
  .room-page .room-header { padding-inline: .75rem; }
  .room-header__copy h1 { max-width: 48vw; font-size: 1.15rem; }
  .room-header__tools .room-header__icon { min-width: 2.6rem; min-height: 2.6rem; }
  .pinned-bar__preview { display: none; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .room-page .room-header { min-height: 4.4rem; }
  .whiteboard-toolbar { bottom: .4rem; }
  .mobile-action-sheet__surface { max-height: 92dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Feature sheets may add later responsive rules; keep the mobile contract
 * explicit here so controls remain reachable even when the toolbar changes
 * density at runtime. */
@media (max-width: 767px) {
  .room-header__identity { min-width: 0; overflow: hidden; }
  .room-header__title-row h1 { min-width: 0; flex: 1 1 auto; max-width: none; }
  .room-header__tools { width: 100%; min-width: 0; overflow-x: auto; overflow-y: visible; scrollbar-width: none; position: relative; z-index: 10; isolation: isolate; background: var(--surface-raised); }
  .room-header__tools::-webkit-scrollbar { display: none; }
  .room-header__tools > .room-info { display: block; flex: 0 0 auto; }
}