:root{--ink:#203b32;--deep:#103e35;--mint:#d9efdf;--lime:#c8e6bc;--cream:#fbfcf8;--shadow:0 24px 80px rgba(30,71,51,.12)}
body{background:#f5f8f3;color:var(--ink)}
.auth-screen{background:var(--cream);gap:0}.intro{background:linear-gradient(145deg,#e8f4e5,#dcecdf);box-shadow:inset -1px 0 rgba(255,255,255,.65)}.intro:after{content:"";position:absolute;width:310px;height:310px;border:1px solid rgba(31,111,80,.13);border-radius:50%;right:-110px;top:14%;box-shadow:0 0 0 24px rgba(255,255,255,.12),0 0 0 48px rgba(255,255,255,.1)}.intro .brand{position:relative;z-index:1}.intro h1{font-weight:620;color:#1b4236}.intro h1>span{color:#238261}.intro-content .eyebrow{display:flex;align-items:center;gap:8px}.intro-content .status-dot{width:6px;height:6px}.illustration{filter:drop-shadow(0 20px 20px rgba(53,92,61,.1))}.note>div{border:1px solid rgba(48,100,65,.07)}.auth-panel{background:rgba(255,255,255,.7)}.auth-card{padding:34px;border:1px solid #e5eee3;border-radius:24px;background:#fff;box-shadow:var(--shadow)}.auth-tabs{border-radius:12px}.primary{background:linear-gradient(135deg,#197d63,#11634f);box-shadow:0 8px 18px rgba(18,105,80,.16)}.primary:hover:enabled{background:linear-gradient(135deg,#11634f,#0b4d3e);transform:translateY(-1px)}
.chat-app{border-color:#dfeadf;box-shadow:var(--shadow);background:#fff}.sidebar{background:#fff}.sidebar-brand{padding-bottom:24px}.sidebar-heading h1{letter-spacing:.5px}.user-item{transition:transform .16s,background .16s,box-shadow .16s}.user-item:hover{transform:translateX(2px);box-shadow:0 5px 18px rgba(37,74,47,.06)}.user-item.selected{box-shadow:inset 3px 0 #258264,0 5px 18px rgba(37,74,47,.06)}.user-name{display:flex;align-items:center;gap:6px;min-width:0}.role-badge{display:inline-flex;align-items:center;padding:3px 6px;border-radius:999px;background:#e7f3e7;color:#287454;font-size:9px;line-height:1;font-weight:700;white-space:nowrap}.sidebar-admin{flex:0 0 auto;padding:12px 16px 10px}.admin-entry{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:11px 12px;border:1px solid #dcebdd;border-radius:12px;background:#eef7ed;color:#2e684d}.admin-entry:hover{border-color:#9bc8a8;box-shadow:0 6px 18px rgba(37,109,72,.1)}.admin-entry>span:nth-child(2){display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.admin-entry>span:last-child{flex:none}.admin-entry strong{font-size:11px}.admin-entry small{font-size:9px;color:#819783}.shield-icon{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#d2ebd2;color:#287b5a;line-height:0}.role-badge[hidden]{display:none}.my-profile{flex:0 0 auto;position:relative;z-index:1;background:#fff}.conversation{background:#f9fcf8}.chat-header{box-shadow:0 4px 20px rgba(35,69,44,.04)}.chat-header h2{display:flex;align-items:center;gap:7px}.secondary-button{border:1px solid #d5e5d7;color:#317257;background:#fff;border-radius:8px;padding:8px 11px;font-size:11px;white-space:nowrap}.secondary-button:hover{background:#edf7ed;border-color:#9ec9a9}.bubble{box-shadow:0 4px 16px rgba(42,74,50,.04)}.own .bubble{background:linear-gradient(135deg,#dff3d5,#d0eac6);box-shadow:0 5px 16px rgba(66,126,64,.1)}.welcome{position:relative}.welcome-topline{position:absolute;top:24px;left:34px;right:34px;display:flex;justify-content:space-between;color:#a1afa0;font-size:10px;letter-spacing:1px}.welcome-art{box-shadow:0 18px 40px rgba(74,126,75,.11);background:linear-gradient(145deg,#dcedd7,#cbe4c2)}.welcome-art .orbit-dot{position:absolute;width:9px;height:9px;right:17px;top:17px;background:#fff4bc;border-radius:50%;box-shadow:0 0 0 7px rgba(255,255,255,.22)}.welcome-tags{display:flex;gap:8px;margin-top:25px}.welcome-tags span{border:1px solid #dce9d8;background:#fff;border-radius:999px;padding:7px 10px;color:#718b76;font-size:10px}.composer{background:#fff}.composer.is-muted{background:#fffaf1}.mute-banner{padding:9px 16px;background:#fff4d9;color:#95733d;font-size:11px;text-align:center;border-top:1px solid #f3e2bd}.manage-dialog{width:min(420px,calc(100vw - 32px));border:0;border-radius:22px;padding:27px;box-shadow:0 24px 100px rgba(24,55,38,.26);color:var(--ink)}.manage-dialog::backdrop{background:rgba(24,50,37,.38);backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialog-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#e5f3e3;color:#237a59;font-size:24px}.dialog-close{font-size:25px;color:#87968a;padding:2px 8px}.manage-dialog h2{font-size:23px;margin:9px 0}.manage-dialog label{margin-top:18px}.manage-dialog input{background:#fbfdfb}.dialog-footnote,.attempts-note{color:#96a398;font-size:10px;line-height:1.6;text-align:center}.admin-benefits{display:flex;flex-direction:column;gap:7px;margin:16px 0;padding:13px;border-radius:12px;background:#f2f8ef;color:#55755d;font-size:11px}.info-box{padding:11px;border-radius:10px;background:#fff5dc;color:#8b7043;font-size:12px;line-height:1.6}.lock-note{padding:10px;border-radius:9px;background:#fff0ec;color:#b35a48;font-size:11px}.duration-options{display:flex;gap:8px;margin:14px 0}.duration-options button{flex:1;padding:9px;border:1px solid #dce9db;border-radius:8px;color:#3b7756;background:#f8fcf7;font-size:11px}.duration-options button:hover{background:#eaf6e8}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}.dialog-actions .primary{padding:10px 14px}.dialog-actions .secondary-button{padding:10px 12px}@media(max-width:700px){.auth-card{padding:0;border:0;box-shadow:none;background:transparent}.welcome-topline{display:none}.welcome-tags{margin-top:18px}.manage-dialog{padding:23px}.sidebar-admin{padding-top:9px}}
.compose-preview{display:flex;align-items:center;gap:9px;margin:-3px 0 10px;padding:8px 11px;border:1px solid #dbeadd;border-radius:9px;background:#f2f8ef;color:#4d765a;font-size:11px}.compose-preview span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.compose-preview button{font-size:17px;color:#7e9a83;padding:0 3px}.file-pick{font-size:18px;line-height:1;padding:1px 2px;color:#718d78}.file-pick:hover:enabled{color:#257b5a}.message-quote{margin:-2px -3px 9px;padding:7px 9px;border-left:3px solid #83b58a;background:#f1f7ef;color:#6d8370;font-size:10px;line-height:1.5;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.attachment-link{display:block;color:#267656;text-decoration:none;font-size:12px;padding:9px 10px;border:1px solid #d8ead9;border-radius:9px;background:#f6fbf4;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-link:hover{background:#eaf5e8}.message-image{display:block;max-width:min(280px,100%);max-height:240px;border-radius:10px;object-fit:contain;background:#eef5eb}.image-link{display:block}.file-expired{padding:8px 10px;border-radius:8px;background:#f1f3ef;color:#9aa69b;font-size:11px}.message-text{white-space:pre-wrap;overflow-wrap:anywhere}#composer-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-tool{display:inline-flex;align-items:center;gap:5px;padding:7px;border-radius:8px;color:#47745d;flex:none;font-size:12px}.attachment-tool:hover{background:#edf6eb}.attachment-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.composer-top{flex-wrap:wrap}.upload-list{list-style:none;padding:0;margin:16px 0;max-height:35vh;overflow:auto}.upload-list li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid #e5ede4}.upload-list li span{min-width:0;overflow-wrap:anywhere}.upload-list small{white-space:nowrap;color:#738b78}.upload-total{font-size:13px;font-weight:600}#upload-status{font-size:12px;color:#47745d;overflow-wrap:anywhere}.image-dialog{border:0;border-radius:16px;background:#17271f;color:#fff;padding:16px;width:min(1100px,96vw);max-width:96vw;max-height:94dvh}.image-dialog::backdrop{background:#09150dde}.image-dialog header{display:flex;align-items:center;gap:15px;padding:0 0 12px}.image-dialog header strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.image-dialog header a{font-size:13px;white-space:nowrap;text-decoration:underline}.image-dialog header button{font-size:26px}.image-stage{overflow:auto;max-height:78dvh;text-align:center}.image-stage img{max-width:100%;max-height:78dvh;object-fit:contain}.image-link{padding:0;cursor:zoom-in}.message-image{width:260px;height:200px;object-fit:contain}@media(max-width:700px){#composer-note{display:none}.attachment-tool{min-height:38px}.image-dialog{padding:12px}.message-image{width:200px;height:160px}}

/* The same calm, hand-drawn look runs from sign-in through the conversation. */
:root {
  --ink: #183e34;
  --deep: #0b5948;
  --line: #e2ece4;
  --motion: cubic-bezier(.2, .75, .25, 1);
}
body {
  background: #f6faf5;
}
body.chat-mode { display: flow-root; min-height: 100dvh; }
.duration-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duration-fields label { min-width: 0; }
.check-label { display: flex !important; align-items: center; gap: 9px; }
.check-label input { width: auto; margin: 0; }
.manage-dialog select { display: block; width: 100%; margin-top: 9px; padding: 11px; border: 1px solid #dfe5df; border-radius: 8px; background: #fbfdfb; color: var(--ink); }
.moderation-list { max-height: 25vh; overflow: auto; font-size: 12px; color: #657b69; }
.moderation-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.moderation-row span { min-width: 0; overflow-wrap: anywhere; }
.notice-dialog { text-align: center; }
.notice-dialog .primary { margin-top: 12px; }
.group-avatar { background: #dcefe6 !important; color: #19785d !important; }
.group-item { background: #f3faf4; box-shadow: 0 2px 10px rgba(30,71,51,.06); }
.admin-shortcuts { display: flex; gap: 7px; margin-top: 7px; }
.admin-shortcuts .secondary-button { flex: 1; min-width: 0; }
.order-dialog { width: min(560px, calc(100vw - 32px)); max-height: 85dvh; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.order-list { max-height: 48dvh; overflow: auto; padding-right: 3px; }
.order-list h3 { margin: 16px 0 7px; color: #698171; font-size: 12px; }
.order-row { display: flex; align-items: center; gap: 7px; padding: 8px 0; border-bottom: 1px solid #e8efe7; }
.order-rank { width: 22px; flex: none; color: #478468; font-size: 12px; font-weight: 700; }
.order-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.order-row .secondary-button { padding: 6px 8px; }
.order-empty { color: #95a397; font-size: 12px; }
@media (max-width: 500px) { .order-dialog { padding: 18px; } .order-row { flex-wrap: wrap; } .order-name { flex-basis: calc(100% - 30px); } }
.chat-header .peer-details { min-width: 0; }
#peer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media(max-width:700px) { .chat-header #profile-open { display: none !important; } }
.group-sender { display: block; color: #718b76; font-size: 11px; margin-bottom: 4px; }
.group-sender .role-badge { margin-left: 5px; }
.ban-badge { background: #fff0e8; color: #a95542; }
.brand img { filter: drop-shadow(0 5px 9px rgba(19, 95, 72, .15)); }
.intro {
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.65), transparent 30%),
    linear-gradient(155deg, #e9f7e9 4%, #d8ede3 95%);
}
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(#6b9d7a .65px, transparent .65px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, transparent 25%, #000);
}
.intro-content, .intro-footer { position: relative; z-index: 1; }
.note-one { animation: noteDrift 7s ease-in-out infinite; }
.note-two { animation: noteDrift 7s ease-in-out -3.5s infinite; }
.auth-panel { background: #f9fcf8; }
.auth-card {
  border-color: #dfece2;
  box-shadow: 0 26px 76px rgba(24, 67, 48, .1), 0 2px 10px rgba(24, 67, 48, .04);
  animation: riseIn .48s var(--motion) both;
}
.auth-tabs { border: 1px solid #e8eee8; }
form input, .search-box {
  transition: border-color .2s var(--motion), box-shadow .2s var(--motion), background .2s var(--motion);
}
form input:hover { border-color: #b6cfc0; }
form input:focus, .search-box:focus-within {
  background: #fff;
  border-color: #57a987 !important;
  box-shadow: 0 0 0 4px rgba(45, 146, 103, .12);
}
.primary { transition: transform .2s var(--motion), box-shadow .2s var(--motion), background .2s var(--motion); }
.primary:hover:enabled { box-shadow: 0 12px 24px rgba(17, 100, 77, .23); }
.primary:active:enabled { transform: translateY(0) scale(.985); }

.chat-app {
  border-radius: 22px;
  border-color: #d9e8dc;
  box-shadow: 0 30px 86px rgba(21, 75, 51, .13), 0 1px 3px rgba(21, 75, 51, .04);
}
.sidebar { background: #fff; }
.sidebar-brand { border-bottom: 1px solid #edf2ec; padding-bottom: 22px; }
.sidebar-heading { padding-top: 18px; }
.school-label {
  background: #f1f8ef;
  border-color: #dcebd9;
  border-radius: 999px;
  color: #4e8161;
  padding: 6px 9px;
}
.connection { padding: 5px 8px; border-radius: 999px; background: #f2f6f2; }
.connection.connected { background: #ecf8ef; }
.search-box {
  margin-top: 18px;
  margin-bottom: 22px;
  border: 1px solid #e5efe7;
  background: #f7faf7;
  border-radius: 11px;
  padding: 10px 12px;
}
.search-box svg, .icon-button svg, .shield-icon svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.search-box svg { color: #7c9a87; }
.search-box input { font-size: 13px; }
.user-list { padding: 0 8px 10px; background: #fff; }
.user-item {
  border: 1px solid transparent;
  margin: 4px 0;
  border-radius: 13px;
  transition: transform .22s var(--motion), background .22s var(--motion), border-color .22s var(--motion), box-shadow .22s var(--motion);
}
.user-item:hover { background: #f3f9f3; border-color: #e0ede1; }
.user-item.selected {
  background: #eaf7ed;
  border-color: #d7ead8;
  box-shadow: inset 3px 0 #238967, 0 7px 22px rgba(40, 112, 71, .07);
}
.user-item.pinned-item { background: #edf4fd; border-color: #dce7f7; box-shadow: 0 2px 10px rgba(49, 81, 139, .06); }
.user-item.pinned-item:hover { background: #e7f0fc; border-color: #cadcf3; }
.user-item.pinned-item.selected { background: #deebfb; border-color: #bad2ef; box-shadow: inset 3px 0 #5a83bd, 0 5px 18px rgba(49, 81, 139, .1); }
.preview, .user-top time, .peer-status { color: #74877a; }
.unread { box-shadow: 0 3px 9px rgba(17, 111, 78, .22); }
.sidebar-admin { padding-top: 10px; }
.admin-entry {
  border-color: #d8e9dd;
  background: #eef7ed;
  transition: transform .22s var(--motion), box-shadow .22s var(--motion), border-color .22s var(--motion);
}
.admin-entry:hover { transform: translateY(-2px); }
.shield-icon { color: #1a7858; }
.my-profile {
  border-top-color: #e7eee6;
  box-shadow: 0 -8px 22px rgba(29,72,45,.03);
}
.icon-button { display: grid; place-items: center; min-width: 38px; min-height: 38px; }
.back { display: none; }

.conversation {
  background: #f9fcf8;
}
.welcome-art { animation: welcomeFloat 7s ease-in-out infinite; }
.welcome-art::before {
  content: "";
  position: absolute;
  inset: -22px;
  border: 1px dashed rgba(48, 126, 82, .22);
  border-radius: 50%;
}
.welcome h2 { color: #1e4838; font-weight: 650; }
.welcome-tags span { box-shadow: 0 4px 12px rgba(34, 86, 48, .04); }
.chat-header {
  background: #fff;
  box-shadow: 0 5px 20px rgba(32, 80, 49, .04);
}
.message-scroll {
  background: #f9fcf8;
}
.bubble {
  border-color: #e1ede4;
  box-shadow: 0 5px 18px rgba(33, 78, 51, .055);
}
.own .bubble {
  background: linear-gradient(140deg, #dcf2d9, #d0eacb);
  border-color: #cde8ca;
  box-shadow: 0 5px 18px rgba(46, 120, 71, .1);
}
.message-row:last-child { animation: messageAppear .26s var(--motion) both; }
.day-divider { color: #728978; }
.composer {
  background: #fff;
  border-top-color: #dfeae1;
  box-shadow: 0 -8px 26px rgba(30, 77, 49, .045);
  transition: border-color .2s var(--motion);
}
.composer:focus-within { border-top-color: #a3d2ad; }
.composer-top { gap: 6px; }
.composer-top > .attachment-tool:first-child { margin-left: -10px; }
.attachment-tool, .emoji-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #43765d;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .2s var(--motion), background .2s var(--motion), border-color .2s var(--motion), color .2s var(--motion);
}
.attachment-tool:hover:enabled, .emoji-button[aria-expanded="true"] {
  background: #eaf6ec;
  border-color: #d7eadb;
  color: #137354;
  transform: translateY(-1px);
}
.attachment-tool:active:enabled { transform: scale(.96); }
.attachment-tool svg { width: 19px; height: 19px; stroke-width: 1.8; }
.emoji-button .emoji-eye { fill: currentColor; stroke: none; }
.composer textarea { color: #214333; }
#composer-note { color: #738778; }
.newline-button { border-radius: 9px; }
.newline-button:hover:enabled { background: #edf7ee; }
.send { border-radius: 10px; }
.emoji-panel { border-top-color: #e2ede3; box-shadow: 0 -10px 26px rgba(33,78,51,.05); }
.emoji-choice { transition: background .18s var(--motion), transform .18s var(--motion); }
.emoji-choice:hover { transform: translateY(-2px) scale(1.08); }
.attachment-link { transition: border-color .18s var(--motion), background .18s var(--motion), transform .18s var(--motion); }
.attachment-link:hover { border-color: #9cccad; transform: translateY(-1px); }
.image-link img { transition: transform .25s var(--motion); }
.image-link:hover img { transform: scale(1.025); }
.new-messages { box-shadow: 0 8px 24px rgba(35, 86, 51, .14); }

.manage-dialog[open], .image-dialog[open] { animation: dialogIn .23s var(--motion) both; }
.manage-dialog::backdrop, .image-dialog::backdrop { animation: backdropIn .23s ease both; }
.manage-dialog { border: 1px solid #e1eee4; }
.dialog-close { display: grid; place-items: center; min-width: 38px; min-height: 38px; border-radius: 10px; }
.dialog-close:hover { background: #f0f7ef; color: #216d51; }
.upload-list li { border-bottom-color: #e3ede4; }
.toast { animation: toastIn .25s var(--motion) both; }

@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes noteDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes welcomeFloat { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-7px); } }
@keyframes messageAppear { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialogIn { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 7px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 1100px) {
  .chat-app { border-radius: 0; }
}
@media (max-width: 700px) {
  body.chat-mode { height: 100dvh; overflow: hidden; }
  body.chat-mode .chat-app { margin: 0; min-height: 0; }
  .chat-app.show-chat .conversation, .active-chat { min-height: 0; overflow: hidden; }
  .back { display: grid; }
  .intro::before { opacity: .13; }
  .auth-card {
    width: 100%;
    animation: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .sidebar-brand { padding-bottom: 27px; }
  .sidebar-heading { padding-top: 22px; }
  .user-item { margin: 3px 0; }
  .composer-top { gap: 3px; }
  .composer-top > .attachment-tool:first-child { margin-left: -8px; }
  .attachment-tool, .emoji-button { gap: 4px; padding: 6px 7px; }
  .attachment-tool svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}