/* 2026 Peermigo quality pass: layout containment, keyboard-friendly chats,
   shared icons, stable loading and an accessible photo cropper. */
:root{--pm-line:#e7e9f3;--pm-focus:#6658de}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;min-width:0}
body{overflow-x:clip}
.container,.app-section,.app-section>.container,.social-panel,.student-cover,.profile-aside,.form-group{min-width:0}
img,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}
.pm-icon{width:1.13em;height:1.13em;display:inline-block;vertical-align:-.19em;flex-shrink:0;stroke:currentColor;fill:none}
.attachment-picker .pm-icon{width:20px;height:20px}
.pm-avatar{contain:layout paint}
.file-tile,.chat-bubble,.conversation-item,.notification-item,.student-profile-main{min-width:0;max-width:100%}
.file-tile,.note-post,.social-panel,.message-composer{overflow-wrap:anywhere}
.file-title{min-width:0;word-break:break-word}
.email-panel,.notes-layout,.student-profile-info{min-width:0}
.skeleton-text{display:block;width:72%;height:12px;background:linear-gradient(90deg,#efeff8,#f7f7ff,#efeff8);background-size:200% 100%;border-radius:7px;animation:pmSkeleton 1.7s ease infinite}
@keyframes pmSkeleton{to{background-position-x:-200%}}
@media(prefers-reduced-motion:reduce){.skeleton-text{animation:none}}
.loading-state{min-height:72px;display:flex;align-items:center;gap:12px;line-height:1.5}
.loading-state::before{content:'';width:17px;height:17px;flex:none;border:2px solid #dedbf8;border-top-color:#6855df;border-radius:50%;animation:pmSpin .85s linear infinite}
@keyframes pmSpin{to{transform:rotate(360deg)}}
/* Desktop messaging: avoid flex items squeezing each other */
.messaging-layout{min-width:0;width:100%;grid-template-columns:minmax(235px,300px) minmax(0,1fr)}
.chat-window{min-width:0;overflow:hidden}
.chat-header{height:auto;min-height:78px;flex-wrap:wrap;gap:9px 12px}
.chat-header>a:first-child{flex-shrink:0}
.chat-header>div{flex:1 1 130px;min-width:0}
.chat-header>div strong,.chat-header>div small{overflow-wrap:anywhere}
.chat-header>.text-button{margin-left:0;white-space:nowrap;flex-shrink:0}
.chat-messages{min-width:0;overscroll-behavior:contain;overflow-anchor:auto}
.chat-bubble{width:fit-content;max-width:min(84%,450px);word-wrap:break-word}
.chat-bubble .file-tile{max-width:100%;min-width:0}
.message-composer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:12px;min-width:0}
.message-composer #messageBody,.message-composer #groupPostBody{grid-column:1;grid-row:1;min-width:0;width:100%;font-size:16px;line-height:1.4}
.message-composer .attachment-picker{grid-column:2;grid-row:1;position:relative}
.message-composer #sendMessageBtn{grid-column:3;grid-row:1;min-width:0}
.message-composer .picked-files{grid-column:1/-1;grid-row:2;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.message-composer .picked-files:empty{display:none}
.conversation-item{gap:10px;overflow:hidden}
.conversation-item>span:not(.pm-avatar){min-width:0;overflow:hidden}
.conversation-item strong,.conversation-item small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-mobile-back{display:none}
/* Photo editor */
.pm-modal-open{overflow:hidden}
.pm-crop-dialog[hidden]{display:none!important}
.pm-crop-dialog{position:fixed;inset:0;z-index:2000;background:rgba(14,19,38,.72);display:grid;place-items:center;padding:18px;overflow-y:auto}
.pm-crop-card{width:min(100%,450px);max-height:calc(100dvh - 30px);overflow-y:auto;border-radius:22px;background:var(--social-card,#fff);padding:24px;border:1px solid var(--social-border,#e5e5ef);box-shadow:0 24px 85px #0005;text-align:center}
.pm-crop-card h2{font-size:21px;color:var(--social-text,#1b2440);margin:0 0 7px}
.pm-crop-card p{font-size:12px;color:var(--social-sub,#67738f);line-height:1.6;margin:0 0 20px}
.pm-crop-frame{width:min(100%,290px);aspect-ratio:1;border-radius:50%;overflow:hidden;display:block;margin:0 auto 18px;position:relative;border:5px solid #dcd9fa;box-shadow:0 7px 23px #1d1e4424;touch-action:none;cursor:grab}
.pm-crop-frame:active{cursor:grabbing}
.pm-crop-frame canvas{width:100%;height:100%;display:block;touch-action:none;max-width:none}
.pm-crop-zoom{display:flex;align-items:center;gap:12px;margin:0 auto 20px;max-width:290px;font-size:12px;color:var(--social-sub,#67738f)}
.pm-crop-zoom input{flex:1;min-width:0;accent-color:var(--pm-focus)}
.pm-crop-controls{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.pm-crop-controls button{min-width:125px}
.pm-avatar-ready{width:46px;height:46px;object-fit:cover;border-radius:50%;border:2px solid #7d6df0;flex-shrink:0}
.pm-avatar-ready[hidden]{display:none!important}
.photo-actions{gap:10px}
.photo-actions button{white-space:normal}
/* Consistency */
.btn,.text-button,.view-profile-btn{line-height:1.4}
:where(.btn,.text-button,.attachment-picker,.nav-link,input,textarea,select):focus-visible{outline:3px solid #8172e9;outline-offset:3px}
/* Phone / small tablet: one panel at a time in Messages */
@media(max-width:720px){
 .messaging-layout{display:flex;flex-direction:column;min-height:unset;border-radius:16px;overflow:hidden}
 .messaging-layout .inbox-sidebar{display:flex;flex-direction:column;min-height:340px;border-right:0;border-bottom:0}
 .messaging-layout .inbox-head{padding:16px}
 .messaging-layout .conversation-list{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;max-height:min(63dvh,610px);width:100%}
 .messaging-layout .conversation-item{width:100%;min-width:0;min-height:68px;border-right:0;border-bottom:1px solid var(--pm-line);padding:10px 16px;text-align:left}
 .messaging-layout .conversation-item small{max-width:100%}
 .messaging-layout .chat-window{display:none}
 .messaging-layout.chat-open{scroll-margin-top:92px}
 .messaging-layout.chat-open .inbox-sidebar{display:none}
 .messaging-layout.chat-open .chat-window{display:flex;min-height:0;height:min(760px,calc(100dvh - 106px));height:min(760px,calc(100svh - 106px));max-height:760px;overflow:hidden}
 .messaging-layout.chat-open .chat-messages{flex:1;min-height:0;max-height:none;overflow-y:auto;padding:16px 12px}
 .messaging-layout .chat-header{padding:10px 12px;gap:7px;min-height:65px}
 .messaging-layout .chat-header .pm-avatar{width:34px;height:34px}
 .messaging-layout .chat-header .text-button{font-size:11px;padding:6px}
 .messaging-layout .chat-header>div{flex:1 1 85px}
 .messaging-layout .chat-header small{font-size:9px}
 .chat-mobile-back{display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:flex-start;min-height:34px;background:none;border:none;color:#6658de;font-weight:800;font-size:12px;margin:4px 0 0 10px;padding:4px 7px;cursor:pointer}
 .messaging-layout .message-composer{padding:9px;gap:7px;position:relative;z-index:1;flex-shrink:0}
 .messaging-layout .message-composer #sendMessageBtn{padding:10px 12px!important;font-size:12px}
 .messaging-layout .message-composer #messageBody,.message-composer #groupPostBody{padding:10px;min-height:43px;line-height:1.3}
 .messaging-layout .attachment-picker{width:42px;height:43px}
 .messaging-layout .chat-bubble{max-width:91%;padding:10px 11px}
 .messaging-layout .file-tile{padding:8px;gap:7px}
 .safe-strip{flex-wrap:wrap}
 .student-profile-main{flex-wrap:wrap}
 .student-cover{overflow:hidden}
 .student-actions{min-width:0}
 .notes-layout,.student-profile-info{grid-template-columns:minmax(0,1fr)}
 .note-form-footer,.social-panel-head{flex-wrap:wrap}
}
@media(max-width:370px){
 .container{width:calc(100% - 24px)}
 .messaging-layout .chat-header>.text-button{font-size:10px}
 .messaging-layout .chat-header .pm-avatar{width:29px;height:29px}
 .messaging-layout .message-composer{gap:5px;padding:7px}
 .messaging-layout .message-composer #sendMessageBtn{padding:9px!important}
 .file-thumbnail{width:40px;height:40px}
 .pm-crop-card{padding:17px}
}
html[data-theme=dark]{--pm-line:#36415f}
html[data-theme=dark] .messaging-layout .conversation-item{border-color:var(--pm-line)}
html[data-theme=dark] .pm-crop-frame{border-color:#514b89}
@media(prefers-reduced-motion:reduce){.loading-state::before{animation:none}}

#groupPostForm button[type=submit]{grid-column:3;grid-row:1}
html[data-theme=dark] .skeleton-text{background:linear-gradient(90deg,#29304b,#36405e,#29304b);background-size:200% 100%}
@media(max-width:720px){#groupPostForm .attachment-picker{grid-column:2;grid-row:1}#groupPostForm .picked-files{grid-column:1/-1;grid-row:2}}
/* Decorative shapes must not widen the landing page grid. */
.hero-grid{grid-template-columns:minmax(0,49%) minmax(0,51%)}
.hero-art{min-width:0}
@media(max-width:820px){.hero-art .pattern-two{right:0}.hero-art .note-top{right:4px}.hero-art .note-bottom{left:4px}.hero-art{overflow:clip;border-radius:18px}}
.hero-art .pattern-two{right:0}
.hero-art .note-top{right:0}
.hero-art .note-bottom{left:0}


/* Unread-message navigation indicators */
.nav-messages-link{display:inline-flex;align-items:center;gap:7px;min-width:0}
.nav-unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ec476b;color:#fff;font:800 10px/1 system-ui,sans-serif;letter-spacing:0;box-shadow:0 0 0 2px var(--surface,#fff);flex:none;white-space:nowrap}
.nav-unread-badge[hidden],.menu-unread-dot[hidden]{display:none!important}
.menu-toggle{position:relative}
.menu-unread-dot{position:absolute;right:2px;top:1px;width:9px;height:9px;border-radius:50%;background:#ec476b;box-shadow:0 0 0 2px #fff;pointer-events:none}
html[data-theme="dark"] .nav-unread-badge{box-shadow:0 0 0 2px #1a2338}
html[data-theme="dark"] .menu-unread-dot{box-shadow:0 0 0 2px #1a2338}
@media(max-width:1140px){.nav-messages-link{justify-content:space-between;width:100%;padding-right:10px!important}.nav-unread-badge{min-width:22px;height:22px;font-size:11px}}


/* Homepage phone/tablet correction (2026-10-21).
   This file loads after style.css: the desktop .hero-grid declaration above
   previously overrode style.css's mobile grid media query. */
@media (max-width: 820px) {
  #visitorHome .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-height: 0;
  }
  #visitorHome .hero-copy {
    width: 100%;
    min-width: 0;
  }
  #visitorHome .hero-art {
    width: min(100%, 550px);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
  }
}
@media (max-width: 600px) {
  #visitorHome .hero-grid {
    padding-top: 43px;
    padding-bottom: 32px;
    gap: 16px;
  }
  #visitorHome .hero h1 {
    font-size: clamp(34px, 10.7vw, 44px);
    letter-spacing: -.064em;
    line-height: 1.14;
    overflow-wrap: normal;
  }
  #visitorHome .hero-description {
    font-size: 13px;
    line-height: 1.75;
    max-width: 480px;
    margin-inline: auto;
    margin-bottom: 23px;
  }
  #visitorHome .hero-actions {
    display: flex;
    width: 100%;
    max-width: 370px;
    margin-inline: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #visitorHome .hero-actions .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
    padding: 13px 12px;
  }
  #visitorHome .hero-actions .btn-ghost {
    background: rgba(255,255,255,.72);
    border: 1px solid #e5e2fa;
  }
  #visitorHome .hero-proof {margin-top: 23px;}
  #visitorHome .hero-art {
    height: clamp(340px, 95vw, 415px);
    margin-top: 5px;
  }
  #visitorHome .dashboard-card {
    width: min(100%, 425px);
    margin: 0;
    transform: rotate(-.7deg);
  }
  #visitorHome .dash-card {min-width: 0;}
  #visitorHome .dash-person {min-width: 0; flex: 1 1 auto;}
  #visitorHome .dash-person > span {max-width: 100%;}
  #visitorHome .floating-note.note-top {top: 0; right: 4px;}
  #visitorHome .floating-note.note-bottom {bottom: 0; left: 4px;}
  #visitorHome .member-hero-actions .btn {max-width: 100%;}
}
@media (max-width: 390px) {
  #visitorHome .hero-art {height: 350px;}
  #visitorHome .floating-note {display: none;}
  #visitorHome .dash-card {gap: 7px;}
  #visitorHome .dash-person > span {white-space: normal; line-height: 1.35;}
  #visitorHome .dash-match {right: 6px; top: 6px;}
  #visitorHome .dashboard-card {padding: 15px 10px 11px;}
}
@media (max-width: 350px) {
  #visitorHome .hero h1 {font-size: 34px;}
  #visitorHome .eyebrow {font-size: 8px; letter-spacing: .075em;}
  #visitorHome .dashboard-card {padding-inline: 9px;}
  #visitorHome .dash-avatar {height: 32px; width: 32px;}
  #visitorHome .dash-brand {font-size: 11px;}
  #visitorHome .dash-top-tag {font-size: 9px;}
}
/* Keep buttons inside the authenticated student homepage on tiny screens. */
@media (max-width: 380px) {
  .member-hero-actions {width: 100%;}
  .member-hero-actions .btn {max-width: 100%;white-space: normal;text-align: center;}
  .member-stats {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .member-stat {min-width: 0;}
}

/* Let the full matching illustration size itself naturally on phones.
   A fixed 350px art frame previously clipped the card's title and footer. */
@media (max-width: 600px) {
  #visitorHome .hero-art {
    height: auto;
    min-height: 0;
    padding: 26px 8px 30px;
    overflow: visible;
    border-radius: 0;
  }
  #visitorHome .floating-note {display: none;}
}
@media (max-width: 390px) {
  #visitorHome .hero-art {height: auto;}
}

/* Profile photo: a foreground <img> remains visible when the dark-mode avatar background changes. */
.pm-avatar{position:relative;isolation:isolate;background-image:none!important}
.pm-avatar>.pm-avatar-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:inherit;filter:none!important;opacity:0;transition:opacity .15s ease;max-width:none;pointer-events:none}
.pm-avatar.has-image>.pm-avatar-photo{opacity:1}
.pm-avatar.has-image>span{opacity:0}
html[data-theme="dark"] .pm-avatar.has-image>.pm-avatar-photo{opacity:1;filter:none!important}
/* Emoji chooser for private messages. The tray is positioned in the viewport by app.js. */
#messageForm{position:relative;grid-template-columns:minmax(0,1fr) auto auto auto}
#messageForm #messageBody{grid-column:1;grid-row:1}
#messageForm .pm-emoji-toggle{grid-column:2;grid-row:1}
#messageForm .attachment-picker{grid-column:3;grid-row:1}
#messageForm #sendMessageBtn{grid-column:4;grid-row:1}
#messageForm .picked-files{grid-column:1/-1;grid-row:2}
#messageForm .pm-emoji-toggle{width:43px;height:43px;min-width:43px;min-height:43px!important;padding:0!important;display:grid;place-items:center;border-radius:11px;border:1px solid #e2e3ef;background:#fff;color:#6857dd;cursor:pointer;transition:background .16s,border-color .16s}
#messageForm .pm-emoji-toggle .pm-icon{width:21px;height:21px}
#messageForm .pm-emoji-toggle:hover,#messageForm .pm-emoji-toggle[aria-expanded="true"]{background:#eeebff;border-color:#c5bfff}
#messageForm .pm-emoji-toggle:disabled{opacity:.48;cursor:not-allowed}
.pm-emoji-panel[hidden]{display:none!important}
.pm-emoji-panel{position:fixed;z-index:205;background:#fff;border:1px solid #dddff0;box-shadow:0 17px 46px rgba(17,23,50,.24);border-radius:16px;padding:12px;max-height:min(310px,70dvh);overflow-y:auto;overscroll-behavior:contain}
.pm-emoji-title{font-size:12px;font-weight:800;color:#58617b;margin:3px 3px 10px}
.pm-emoji-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.pm-emoji-choice{display:grid;place-items:center;min-width:0;width:100%;min-height:36px!important;padding:2px!important;background:transparent;border:none;border-radius:8px;font-size:23px;line-height:1;cursor:pointer}
.pm-emoji-choice:hover,.pm-emoji-choice:focus-visible{background:#efedff;outline:2px solid #9488ef;outline-offset:0}
html[data-theme="dark"] #messageForm .pm-emoji-toggle{color:#c9c0ff;background:#222d45;border-color:#465173}
html[data-theme="dark"] #messageForm .pm-emoji-toggle:hover,html[data-theme="dark"] #messageForm .pm-emoji-toggle[aria-expanded="true"]{background:#383358}
html[data-theme="dark"] .pm-emoji-panel{background:#222d45;border-color:#465173;color:#eff2ff}
html[data-theme="dark"] .pm-emoji-title{color:#c4cee5}
html[data-theme="dark"] .pm-emoji-choice:hover,html[data-theme="dark"] .pm-emoji-choice:focus-visible{background:#393b65}
@media(max-width:370px){#messageForm{gap:5px!important;padding:7px!important}#messageForm .pm-emoji-toggle,#messageForm .attachment-picker{width:35px;height:40px;min-width:35px;min-height:40px!important}#messageForm #sendMessageBtn{padding:8px!important;font-size:11px!important}#messageForm #messageBody{padding:9px 8px;min-width:0}}
@media(prefers-reduced-motion:reduce){.pm-avatar>.pm-avatar-photo{transition:none}}