/* Peermigo community features — responsive, consistent with existing design */
:root{--social-card:#fff;--social-border:#e9eaf4;--social-text:#18213d;--social-sub:#65728e;--social-wash:#f6f7fd}
.social-eyebrow{font-weight:800;font-size:10px;letter-spacing:.17em;color:#6054da;text-transform:uppercase}
.social-panel,.note-post{background:var(--social-card);border:1px solid var(--social-border);border-radius:20px;padding:26px;box-shadow:0 13px 36px rgba(22,29,64,.035)}
.social-panel h2,.social-panel h3,.note-post h3{color:var(--social-text);margin:9px 0 10px}
.social-panel h2{font-size:25px;letter-spacing:-.035em}.social-panel h3{font-size:18px}
.social-panel p,.note-post p,.social-panel small{color:var(--social-sub)}
.social-panel-head{display:flex;align-items:center;justify-content:space-between;gap:22px}
.social-empty{background:var(--social-card);border:1px dashed #dfe0f2;border-radius:17px;padding:27px;color:var(--social-sub)}
.social-empty h3{color:var(--social-text);margin:0 0 9px}
.full-span{grid-column:1/-1}
.pm-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:47px;height:47px;border-radius:50%;background:#e9e5ff;color:#6254bb;font-size:14px;font-weight:800;background-position:center;background-size:cover;border:2px solid #fff;box-shadow:0 2px 14px #26204b0e;overflow:hidden;vertical-align:middle}
.pm-avatar span{line-height:1}.pm-avatar.has-image>span{opacity:0}
.pm-avatar.large{width:76px;height:76px;font-size:23px}.pm-avatar.xl{width:108px;height:108px;font-size:32px;border-width:4px}
.pm-avatar.card-avatar{width:62px;height:62px;box-shadow:none}
.pm-avatar.conversation-avatar{width:41px;height:41px}
.profile-name-link{color:inherit;text-decoration:none}.profile-name-link:hover{color:#5e50d9}
.view-profile-btn{font-size:12px;font-weight:800;padding:10px 13px;border-radius:10px;background:#f0eeff;color:#5545cf;display:inline-flex;align-items:center;justify-content:center}
.view-profile-btn:hover{background:#e4e0ff;transform:translateY(-1px)}
.peer-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.peer-card-actions .connect-btn{flex:1;min-width:130px}
.all-peers-section{margin-top:76px;border-top:1px solid var(--social-border);padding-top:48px}
.all-peers-section .section-row{margin-bottom:25px}.load-more-wrap{text-align:center;padding:30px 0 0}
.privacy-panel{margin-top:22px}.avatar-upload-panel{margin:0 0 24px}.avatar-photo-holder{border-radius:50%}
.photo-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 11px}
.photo-actions input[type=file]{max-width:240px;width:100%;font-size:11px}
.pm-switch{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--social-border);cursor:pointer}
.pm-switch>span{display:flex;flex-direction:column;gap:4px}.pm-switch strong{color:var(--social-text);font-size:13px}
.pm-switch small{font-size:11px;line-height:1.55}
.pm-switch input[type=checkbox]{appearance:none;flex-shrink:0;width:43px;height:25px;border-radius:30px;border:1px solid #d2d3de;background:#dddfea;position:relative;transition:background .2s;cursor:pointer}
.pm-switch input[type=checkbox]:before{content:"";position:absolute;background:white;top:3px;left:3px;width:17px;height:17px;border-radius:50%;box-shadow:0 1px 4px #0002;transition:transform .2s}
.pm-switch input:checked{background:#6657dc;border-color:#6657dc}.pm-switch input:checked:before{transform:translateX(18px)}
.pm-switch input:focus-visible{outline:3px solid #ada5ff;outline-offset:3px}
.privacy-panel .btn{margin-top:18px}.text-muted{font-size:11px;color:var(--social-sub)}
.notes-on-profile{padding-top:5px}.notes-feed{display:flex;flex-direction:column;gap:17px}
.notes-layout{display:grid;grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr);gap:36px;align-items:start}
.notes-editor{position:sticky;top:105px}
.notes-editor .form-group{margin-top:16px}.notes-editor textarea{min-height:180px;resize:vertical}
.notes-editor input[type=file]{font-size:11px;max-width:100%;padding:12px}
.notes-editor .form-group small{font-size:10px;display:block;margin-top:6px}
.note-form-footer{display:flex;align-items:center;gap:15px;margin-top:19px}
.note-post-meta{display:flex;justify-content:space-between;align-items:center;gap:13px;flex-wrap:wrap;font-size:11px;color:var(--social-sub)}
.note-post-meta b{font-weight:800;color:#6558cf}.note-visibility{color:#6555c5;font-size:11px;font-weight:800;padding:6px 10px;background:#f1efff;border-radius:8px}
.note-post h3{font-size:20px;margin-top:18px}.note-post-body{line-height:1.85;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.note-actions{display:flex;gap:14px;margin-top:15px;border-top:1px solid var(--social-border);padding-top:15px}
.danger-text{color:#c35266!important}.danger-text:hover{color:#9c3043!important}
.note-attachments,.post-files,.bubble-attachments{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.file-tile{background:var(--social-wash);border:1px solid var(--social-border);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.file-title{font-size:11px;color:var(--social-text);font-weight:700;overflow-wrap:anywhere;flex:1;min-width:120px}
.file-thumbnail{width:55px;height:55px;object-fit:cover;border-radius:8px;background:#e9e7fc}
.file-tile .text-button{font-size:11px;padding:3px}
.attachment-picker{font-size:21px;color:#685add;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--social-border);border-radius:11px;background:var(--social-card);flex-shrink:0;transition:transform .2s,background .2s}
.attachment-picker:hover{transform:translateY(-2px);background:#f0efff}
.attachment-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.attachment-picker:focus-within{outline:3px solid #b6b0ff}
.chat-header .activity-status{display:block;margin-top:2px;color:#4e9d83!important}
.student-page-wrap{min-height:60vh}.student-cover{border:1px solid var(--social-border);background:linear-gradient(135deg,#f6f3ff,#fff 58%,#edf6ff);border-radius:24px;padding:38px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:25px}
.student-profile-main{display:flex;align-items:center;gap:22px}.student-profile-main h1{font-size:35px;letter-spacing:-.055em;color:var(--social-text);margin:6px 0}
.student-profile-main p{font-size:13px;margin:0}.student-overline{font-size:10px;font-weight:800;letter-spacing:.12em;color:#6153cb}.student-meta{font-size:12px;color:var(--social-sub);margin-top:9px}
.student-actions{display:flex;gap:10px;flex-wrap:wrap}.student-profile-info{display:grid;grid-template-columns:.74fr 1.26fr;gap:24px}
.student-profile-info .social-panel{height:fit-content}.student-profile-info .social-panel>p{font-size:13px;line-height:1.9}
.profile-detail-chips{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 30px}.profile-detail-chips span{font-size:11px;background:#f0efff;padding:8px 11px;border-radius:8px;color:#5449a8;font-weight:700}
.profile-detail-chips.profile-detail-labelled span{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:120px;padding:10px 12px}
.profile-detail-chips.profile-detail-labelled span strong{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6d63b2}
.profile-detail-chips.profile-detail-labelled span small{font-size:12px;line-height:1.35;color:#5449a8;font-weight:700}
html[data-theme=dark] .profile-detail-chips.profile-detail-labelled span strong{color:#b9afff}
html[data-theme=dark] .profile-detail-chips.profile-detail-labelled span small{color:#ece9ff}

.student-profile-info .note-post{box-shadow:none;margin-top:16px;padding:19px;border-radius:14px}
.email-panel{margin-top:29px}.email-icon{display:inline-flex;justify-content:center;align-items:center;border-radius:16px;width:54px;height:54px;background:#eeecff;color:#6758d6;font-size:25px}
.email-actions{display:flex;gap:18px;align-items:center;margin-top:24px;font-size:12px;color:#438e70}.email-disclaimer{font-size:11px!important;line-height:1.7;margin-top:20px}
/* Smoothness without blocking navigation or causing heavy reflows */
@media(prefers-reduced-motion:no-preference){.page-hero .container,.app-section>.container{animation:pmReveal .42s cubic-bezier(.2,.8,.2,1) both}@keyframes pmReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
 .note-post,.peer-card,.social-panel,.platform-card,.file-tile,.btn,.nav-link{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background-color .24s ease,color .24s ease}
 .note-post:hover,.peer-card:hover{transform:translateY(-3px);box-shadow:0 16px 42px #1c215516}
 .btn:active,.view-profile-btn:active{transform:scale(.97)}
 html{scroll-behavior:smooth}}
html[data-theme=dark]{--social-card:#1a243b;--social-border:#36405d;--social-text:#edf0ff;--social-sub:#aab5d0;--social-wash:#222d48}
html[data-theme=dark] .social-empty{border-color:#3b4565}
html[data-theme=dark] .student-cover{background:linear-gradient(135deg,#2a2b51,#1c253e 70%,#252d4b)}
html[data-theme=dark] .note-visibility,html[data-theme=dark] .profile-detail-chips span,html[data-theme=dark] .view-profile-btn{background:#302c54;color:#cec5ff}
html[data-theme=dark] .pm-avatar{border-color:#25304b;background:#393463;color:#e5dfff}
html[data-theme=dark] .email-icon{background:#33305d;color:#d8d0ff}
html[data-theme=dark] .attachment-picker{color:#afa4ff}
html[data-theme=dark] .attachment-picker:hover{background:#303454}
@media(max-width:1050px){.notes-layout,.student-profile-info{grid-template-columns:1fr}.notes-editor{position:static}.student-profile-info{gap:18px}}
@media(max-width:650px){.social-panel,.note-post{padding:18px;border-radius:15px}.notes-layout{gap:24px}.student-cover{padding:25px 19px}.student-profile-main{align-items:flex-start;gap:15px}.student-profile-main h1{font-size:25px}.pm-avatar.xl{width:76px;height:76px}.student-actions{width:100%}.student-actions .btn{flex:1;text-align:center}.file-thumbnail{width:44px;height:44px}.peer-card-actions{gap:7px}.view-profile-btn{width:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* The login slot should not consume an empty grid column. */
#notesLogin:empty{display:none}
#notesLogin:not(:empty){grid-column:1/-1}
.post-author{display:flex;align-items:center;gap:10px}
.pm-avatar.post-avatar{width:34px;height:34px;font-size:11px}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}::view-transition-old(root){animation:pmExit .16s ease-in both}::view-transition-new(root){animation:pmEnter .25s ease-out both}@keyframes pmExit{to{opacity:.5}}@keyframes pmEnter{from{opacity:.45}}}
.picked-files{font-size:10px;font-weight:700;color:#6557d6;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme=dark] .picked-files{color:#a99cff}

/* Email delivery guidance, shown only when at least one optional email category is enabled. */
.email-delivery-tip{display:flex;gap:13px;align-items:flex-start;background:#f2f7ff;border:1px solid #dce8fb;border-radius:13px;padding:15px 17px;margin:16px 0 20px;color:#233751}
.email-delivery-tip[hidden]{display:none!important}
.email-delivery-tip .email-delivery-icon{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:10px;background:#e3edff;color:#4c5fcd;font-size:17px}
.email-delivery-tip strong{display:block;margin:0 0 4px;font-size:13px;font-weight:800}
.email-delivery-tip p{font-size:12px;line-height:1.7;margin:0;color:#51617c}
html[data-theme="dark"] .email-delivery-tip{background:#222d46;border-color:#3a4866;color:#f1f4ff}
html[data-theme="dark"] .email-delivery-tip .email-delivery-icon{background:#303d63;color:#c2c9ff}
html[data-theme="dark"] .email-delivery-tip p{color:#c4cee4}
@media(max-width:560px){.email-delivery-tip{padding:13px;gap:10px}}

/* Notification preferences shortcut – beside Mark all as read */
.pm-notification-heading{flex-wrap:wrap}
.pm-notification-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-shrink:0;margin-left:auto}
.pm-notification-actions .btn{white-space:nowrap}
.pm-notification-settings-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #e3e2f0;border-radius:12px;background:var(--social-card);color:#6053c9;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.pm-notification-settings-link:hover{background:#eeebff;border-color:#b9b1f1;transform:translateY(-1px)}
.pm-notification-settings-link:focus-visible{outline:3px solid #8d80ec;outline-offset:3px}
.pm-notification-settings-link svg{width:21px;height:21px;flex:none}
#email-notification-settings{scroll-margin-top:135px}
#email-notification-settings:target{border-color:#a79af0;box-shadow:0 0 0 3px rgba(111,93,228,.13)}
html[data-theme="dark"] .pm-notification-settings-link{background:#202b43;border-color:#3b4661;color:#bfb3ff}
html[data-theme="dark"] .pm-notification-settings-link:hover{background:#32305a;border-color:#8174e6}
@media(max-width:600px){.pm-notification-actions{margin-left:0;align-self:stretch;justify-content:flex-end;width:100%}.pm-notification-actions .btn{flex:0 1 auto;min-width:0}.pm-notification-settings-link{flex-basis:44px}#email-notification-settings{scroll-margin-top:150px}}
@media(max-width:340px){.pm-notification-actions{gap:7px}.pm-notification-actions .btn{padding:12px 13px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.pm-notification-settings-link{transition:none}}

/* Jump from My Profile directly to the Notes/Post editor. */
#notesForm {scroll-margin-top: 125px;}
.pm-create-note-link {display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.pm-create-note-link .pm-icon {width:16px;height:16px;flex-shrink:0;}
@media(max-width:800px) {#notesForm {scroll-margin-top: 145px;}}