/* God's Heritage School — the conversation view
   ---------------------------------------------------------------------------
   Shared by the class groups, the staff room and direct messages. It used to
   be pasted into student.html and teacher.html twice over, which meant every
   change had to be made in two places and one of them was always behind.

   The chat is FULL SCREEN. A chat squeezed into a panel beside a sidebar is a
   chat nobody uses, and on a phone it was half a screen of scrolling inside
   another scroll. */

/* The layer the whole chat lives in.
   z-index has to clear the page's own furniture: the sticky header is 900,
   the bottom nav 1000 and the sidebar 1200. At 900 the chat opened UNDERNEATH
   the bottom nav, which swallowed taps on the send button. It must still sit
   below GHSDialog (5000+), so a confirm box opens over the chat. */
.gc-full{
  position:fixed; inset:0; z-index:1300;
  display:flex; flex-direction:column;
  background:var(--bg, #f4f8f5);
}
body.gc-open{overflow:hidden;}

.gc-head{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; flex:0 0 auto;
  background:rgba(255,255,255,0.92);
  border-bottom:1px solid rgba(15,60,40,0.12);
  backdrop-filter:blur(10px);
}
.gc-back{
  width:40px; height:40px; flex:0 0 auto; border:0; border-radius:12px; cursor:pointer;
  background:transparent; color:var(--green-900, #0f3c28);
  display:grid; place-items:center;
}
.gc-back:hover{background:rgba(15,60,40,0.07);}
.gc-head-photo{
  width:42px; height:42px; flex:0 0 auto; border-radius:50%; object-fit:cover;
  background:rgba(15,60,40,0.08);
}
.gc-head-photo.initials{
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px;
}
.gc-head-text{min-width:0; flex:1 1 auto;}
.gc-head-text h3{
  font-size:16px; margin:0; color:var(--green-900, #0f3c28);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gc-head-text span{
  display:block; font-size:12.5px; color:var(--ink-soft, #5c6b63);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gc-menu-wrap{position:relative; flex:0 0 auto;}
.gc-menu-btn{
  width:40px; height:40px; border:0; border-radius:12px; cursor:pointer;
  background:transparent; color:var(--green-900, #0f3c28);
  display:grid; place-items:center;
}
.gc-menu-btn:hover{background:rgba(15,60,40,0.07);}
.gc-menu{
  position:absolute; right:0; top:46px; z-index:5; min-width:190px;
  background:#fff; border:1px solid rgba(15,60,40,0.14); border-radius:14px;
  box-shadow:0 14px 34px rgba(15,60,40,0.18); overflow:hidden; padding:6px;
}
.gc-menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px;
  border:0; background:none; cursor:pointer; border-radius:10px;
  font-size:13.5px; text-align:left; color:var(--ink, #14211b);
}
.gc-menu button:hover{background:rgba(15,60,40,0.06);}
.gc-menu button.danger{color:#b23b3b;}
.gc-menu .material-symbols-rounded{font-size:18px;}

.gc-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:16px 14px 6px; scroll-behavior:smooth;
}

.gc-captain{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--green-900);
  background:var(--green-100); border:1px solid rgba(15,138,75,0.22);
  border-radius:999px; padding:5px 13px;
}
.gc-captain .material-symbols-rounded{font-size:17px;}

.gc-pinned{
  background:rgba(216,173,77,0.13); border:1px solid rgba(216,173,77,0.32);
  border-radius:12px; padding:11px 14px; margin-bottom:14px;
}
.gc-pinned-title{
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:#7a5c14; margin-bottom:7px;
}
.gc-pinned-title .material-symbols-rounded{font-size:15px;}
.gc-pinned-item{font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:5px;}
.gc-pinned-item:last-child{margin-bottom:0;}
.gc-mini{
  font-size:11px; font-weight:700; color:#7a5c14; background:none; border:0;
  cursor:pointer; text-decoration:underline; margin-left:6px; padding:0;
}
.gc-day{text-align:center; margin:14px 0 10px;}
.gc-day span{
  font-size:11px; font-weight:700; color:#8a978f;
  background:rgba(15,60,40,0.06); border-radius:999px; padding:4px 12px;
}
.gc-msg{display:flex; gap:9px; margin-bottom:11px; align-items:flex-end;}
.gc-msg.mine{flex-direction:row-reverse;}
.gc-avatar{
  width:31px; height:31px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11.5px; font-weight:800;
}
.gc-bubble{
  position:relative; max-width:76%; background:#fff;
  border:1px solid rgba(15,60,40,0.10); border-radius:15px 15px 15px 4px;
  padding:9px 13px 7px;
}
.gc-msg.mine .gc-bubble{
  background:var(--green-100); border-color:rgba(15,138,75,0.22);
  border-radius:15px 15px 4px 15px;
}
.gc-msg.announcement .gc-bubble{
  background:rgba(216,173,77,0.14); border-color:rgba(216,173,77,0.38);
}
.gc-who{
  font-size:12px; font-weight:800; color:var(--green-900);
  margin-bottom:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.gc-tag{
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  border-radius:999px; padding:2px 7px;
}
.gc-tag.teacher{background:var(--green-700); color:#fff;}
.gc-tag.admin{background:#0a5c33; color:#fff;}
.gc-tag.captain{background:var(--gold); color:#4a3708;}
.gc-ann-label{
  display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:#7a5c14; margin-bottom:4px;
}
.gc-ann-label .material-symbols-rounded{font-size:14px;}
.gc-text{font-size:14px; line-height:1.55; word-wrap:break-word; overflow-wrap:anywhere;}
.gc-meta{font-size:10.5px; color:#8a978f; margin-top:4px; text-align:right;}
.gc-pin-mark{font-size:12px; vertical-align:-2px;}
.gc-actions{
  position:absolute; top:-9px; right:8px; display:none; gap:2px;
  background:#fff; border:1px solid rgba(15,60,40,0.14);
  border-radius:999px; padding:2px; box-shadow:0 3px 10px rgba(15,60,40,.14);
}
.gc-bubble:hover .gc-actions, .gc-bubble:focus-within .gc-actions{display:flex;}
.gc-actions button{
  width:26px; height:26px; border:0; background:none; cursor:pointer;
  color:var(--ink-soft); border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.gc-actions button:hover{background:rgba(15,60,40,0.07); color:var(--green-900);}
.gc-actions .material-symbols-rounded{font-size:15px;}

.gc-empty{text-align:center; padding:38px 18px; color:#8a978f;}
.gc-empty .material-symbols-rounded{font-size:38px; color:#cbd8d0; display:block; margin-bottom:8px;}
.gc-empty div{font-weight:700; color:var(--ink-soft); margin-bottom:4px;}
.gc-empty p{font-size:13px;}

.gc-composer{
  display:flex; align-items:flex-end; gap:9px; flex-wrap:nowrap;
  flex:0 0 auto; margin:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(15,60,40,0.10);
  background:rgba(255,255,255,0.92); backdrop-filter:blur(10px);
}
.gc-composer textarea{
  flex:1; min-width:150px; resize:none; font:inherit; font-size:14px;
  padding:11px 14px; border-radius:16px; border:1.5px solid rgba(15,60,40,0.14);
  background:#fff; line-height:1.45; max-height:130px;
}
.gc-composer textarea:focus{outline:none; border-color:var(--green-400);}
.gc-send{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; flex-shrink:0;
  background:linear-gradient(135deg,var(--green-600),var(--green-900)); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.gc-ann-toggle{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:#7a5c14; background:rgba(216,173,77,0.14); border:1px solid rgba(216,173,77,0.3);
  border-radius:999px; padding:7px 13px; cursor:pointer; flex-basis:100%;
  justify-content:center;
}
.gc-ann-toggle .material-symbols-rounded{font-size:16px;}

@media (max-width:600px){
  .gc-bubble{max-width:84%;}
  .gc-actions{display:flex; position:static; margin-top:6px; box-shadow:none; border:none; background:none; padding:0;}
}

/* A picture in a bubble, and the one waiting to be sent. */
.gc-photo{display:block; margin:-2px 0 6px; border-radius:12px; overflow:hidden;}
.gc-photo img{display:block; max-width:100%; max-height:320px; border-radius:12px;}
/* `hidden` is only a default of display:none, and an explicit display in a
   rule beats it — so without this the empty strip showed as a grey pill above
   the composer in every chat. */
.gc-pending[hidden]{display:none;}
.gc-pending{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  margin:0 14px 8px; padding:8px 10px; border-radius:12px;
  background:rgba(15,60,40,0.06); border:1px solid rgba(15,60,40,0.12);
}
.gc-pending img{width:44px; height:44px; border-radius:9px; object-fit:cover;}
.gc-pending span{flex:1 1 auto; font-size:12.5px; color:var(--ink-soft, #5c6b63);}
.gc-pending button{
  width:30px; height:30px; border:0; border-radius:9px; cursor:pointer;
  background:rgba(15,60,40,0.10); color:var(--green-900, #0f3c28);
  display:grid; place-items:center;
}
.gc-attach{
  width:40px; height:40px; flex:0 0 auto; border:0; border-radius:12px; cursor:pointer;
  background:rgba(15,60,40,0.07); color:var(--green-900, #0f3c28);
  display:grid; place-items:center;
}
.gc-attach:hover{background:rgba(15,60,40,0.13);}

/* The note under the composer sits still; only the messages scroll. */
.gc-note{
  flex:0 0 auto; margin:0; padding:0 14px 10px;
  font-size:11.5px; line-height:1.5; color:var(--ink-soft, #5c6b63);
  background:rgba(255,255,255,0.92);
}

@media (max-width:600px){
  .gc-head-photo{width:38px; height:38px;}
  .gc-captain{display:none;}
}

/* ===========================================================================
   The chat list — search, results and conversations (assets/ghs-dm.js)
   ========================================================================= */

.dm-search{
  position:relative; display:flex; align-items:center; margin-bottom:14px;
}
.dm-search .material-symbols-rounded{
  position:absolute; left:13px; font-size:20px; color:var(--ink-soft, #5c6b63);
  pointer-events:none;
}
.dm-search input{
  width:100%; font:inherit; font-size:14px; padding:12px 14px 12px 42px;
  border-radius:14px; border:1.5px solid rgba(15,60,40,0.14); background:#fff;
}
.dm-search input:focus{outline:none; border-color:var(--green-400, #4bbd85);}

.dm-results{
  margin:-6px 0 14px; padding:6px; border-radius:14px;
  background:rgba(15,60,40,0.04); border:1px solid rgba(15,60,40,0.10);
  max-height:46vh; overflow-y:auto;
}
.dm-searching{padding:14px; font-size:13px; color:var(--ink-soft, #5c6b63); text-align:center;}

.dm-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border:0; background:none; cursor:pointer; border-radius:13px;
}
.dm-row:hover{background:rgba(15,60,40,0.06);}
.dm-photo{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%; object-fit:cover;
  background:rgba(15,60,40,0.08);
}
.dm-photo.initials{
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px;
}
.dm-row-text{min-width:0; flex:1 1 auto; display:block;}
.dm-row-text strong{
  display:block; font-size:14.5px; color:var(--ink, #14211b);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dm-row-text span{
  display:block; font-size:12.5px; color:var(--ink-soft, #5c6b63);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dm-row-right{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px;
}
.dm-when{font-size:11px; color:#8a978f;}
.dm-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--green-600, #1a9c61);
}

.dm-empty{text-align:center; padding:34px 18px; color:#8a978f;}
.dm-empty .material-symbols-rounded{font-size:38px; color:#cbd8d0; display:block; margin-bottom:8px;}
.dm-empty div{font-weight:700; color:var(--ink-soft, #5c6b63); margin-bottom:4px;}
.dm-empty p{font-size:13px;}

/* ===========================================================================
   Voice notes (assets/ghs-voice.js)

   The recording bar covers the composer rather than sitting above it, the way
   a phone messaging app does — the textarea is of no use while a voice note is
   being recorded, and a second row appearing under the keyboard pushes the
   whole chat up.
   ========================================================================= */

.gv-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:9px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(15,60,40,0.10);
  background:rgba(255,255,255,0.97); backdrop-filter:blur(10px);
  animation:gv-rise .16s ease-out;
}
@keyframes gv-rise{from{transform:translateY(8px); opacity:0;} to{transform:none; opacity:1;}}

/* Tipping it into the bin. The bar is dragged left and down into the lid,
   shrinking as it goes, so the recording is visibly thrown away rather than
   just disappearing. */
.gv-bar.tossing .gv-rec,
.gv-bar.tossing .gv-prev,
.gv-bar.tossing .gv-mic,
.gv-bar.tossing .gv-go{
  animation:gv-toss .4s cubic-bezier(.55,.06,.68,.19) forwards;
  transform-origin:left center;
}
@keyframes gv-toss{
  to{transform:translate(-40px,14px) scale(.15) rotate(-12deg); opacity:0;}
}
.gv-bar.tossing .gv-bin .lid{animation:gv-lid .4s ease-out forwards;}
.gv-bar.tossing .gv-bin .can{animation:gv-can .4s ease-out forwards;}
@keyframes gv-lid{
  0%{transform:none;}
  35%{transform:translate(2px,-5px) rotate(-46deg);}
  75%{transform:translate(2px,-5px) rotate(-46deg);}
  100%{transform:none;}
}
@keyframes gv-can{
  0%,100%{transform:none;}
  45%{transform:translateY(1px) scaleY(.88);}
  70%{transform:translateY(0) scaleY(1.06);}
}

/* The bin itself is drawn rather than borrowed from the icon font, because
   the lid has to lift on its own and a single glyph cannot be taken apart. */
.gv-bin{
  position:relative; flex:0 0 auto; width:22px; height:24px; display:block;
  opacity:.32; transition:opacity .12s, transform .12s;
}
.gv-bin .lid{
  position:absolute; top:3px; left:1px; width:20px; height:3px; border-radius:2px;
  background:#c0473f; transform-origin:right center; display:block;
}
.gv-bin .lid::after{
  content:''; position:absolute; left:6px; top:-3px; width:8px; height:3px;
  border-radius:2px 2px 0 0; background:#c0473f;
}
.gv-bin .can{
  position:absolute; top:8px; left:4px; width:14px; height:14px; display:block;
  border:2px solid #c0473f; border-top:0; border-radius:0 0 4px 4px;
  background:
    linear-gradient(#c0473f,#c0473f) 4px 3px/1.5px 7px no-repeat,
    linear-gradient(#c0473f,#c0473f) 8px 3px/1.5px 7px no-repeat;
  transform-origin:center bottom;
}
.gv-del{
  border:0; background:none; cursor:pointer; padding:6px; border-radius:10px;
  display:grid; place-items:center; flex:0 0 auto;
}
.gv-del .gv-bin{opacity:.85;}
.gv-del:hover{background:rgba(192,71,63,0.10);}

/* Recording. */
.gv-rec{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px;
  height:42px; padding:0 14px; border-radius:21px;
  background:rgba(15,60,40,0.06);
}
.gv-dot{
  width:9px; height:9px; border-radius:50%; background:#d6453c; flex:0 0 auto;
  animation:gv-pulse 1.1s ease-in-out infinite;
}
@keyframes gv-pulse{0%,100%{opacity:1;} 50%{opacity:.18;}}
.gv-elapsed{
  font-size:13px; font-weight:700; color:var(--ink, #14211b);
  font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:52px;
}
.gv-live{
  flex:1 1 auto; min-width:0; height:22px; display:flex; align-items:center;
  gap:2px; overflow:hidden;
}
.gv-live i{
  flex:1 1 auto; min-width:2px; max-width:3px; border-radius:2px;
  background:var(--green-600, #1a9c61); opacity:.75;
  transition:height .09s linear;
}
.gv-slide{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:2px;
  font-size:12px; color:var(--ink-soft, #5c6b63); white-space:nowrap;
  transition:opacity .12s;
}
.gv-slide .material-symbols-rounded{font-size:16px;}
@media (max-width:420px){ .gv-live{display:none;} }

.gv-mic, .gv-go{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center;
  background:rgba(15,60,40,0.07); color:var(--green-900, #0f3c28);
}
.gv-go{background:linear-gradient(135deg,var(--green-600,#1a9c61),var(--green-900,#0f3c28)); color:#fff;}
.gv-mic.live{
  background:#d6453c; color:#fff;
  box-shadow:0 0 0 0 rgba(214,69,60,.5);
  animation:gv-ring 1.4s ease-out infinite;
}
@keyframes gv-ring{to{box-shadow:0 0 0 16px rgba(214,69,60,0);}}

/* Listening back before it is sent. */
.gv-prev{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px;
  height:42px; padding:0 12px; border-radius:21px;
  background:rgba(15,60,40,0.06);
}
.gv-pp{
  width:30px; height:30px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  background:var(--green-600, #1a9c61); color:#fff; display:grid; place-items:center;
}
.gv-pp .material-symbols-rounded{font-size:19px;}
.gv-pp.loading{opacity:.55; pointer-events:none;}
.gv-time{
  font-size:12px; font-weight:700; color:var(--ink-soft, #5c6b63);
  font-variant-numeric:tabular-nums; flex:0 0 auto;
}

/* A little note asking them to hold, after a tap that was too quick. */
.gv-tip{
  position:absolute; right:14px; bottom:66px; z-index:6;
  background:rgba(20,33,27,0.92); color:#fff; font-size:12px;
  padding:7px 12px; border-radius:999px; pointer-events:none;
  animation:gv-rise .16s ease-out;
}

/* The mic in the composer, which swaps places with the send arrow. */
.gc-mic{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; flex-shrink:0;
  background:rgba(15,60,40,0.07); color:var(--green-900, #0f3c28);
  display:flex; align-items:center; justify-content:center;
  touch-action:none;            /* or sliding to cancel scrolls the chat instead */
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.gc-mic:active{background:rgba(15,60,40,0.16);}

/* A sent voice note, in its bubble. */
.gv-note{
  display:flex; align-items:center; gap:10px; min-width:186px; padding:2px 0 4px;
}
.gv-play{
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  background:var(--green-600, #1a9c61); color:#fff; display:grid; place-items:center;
}
.gv-play .material-symbols-rounded{font-size:21px;}
.gv-play.loading{opacity:.55; pointer-events:none;}
.gv-play.loading .material-symbols-rounded{animation:gv-spin 1s linear infinite;}
@keyframes gv-spin{to{transform:rotate(360deg);}}
.gv-wave{
  /* overflow:hidden because forty bars at their smallest are wider than the
     preview strip on a small phone, and without it they ran underneath the
     duration beside them. */
  flex:1 1 auto; min-width:0; height:26px; overflow:hidden;
  display:flex; align-items:center; gap:2px;
}
.gv-wave i{
  flex:1 1 auto; min-width:2px; border-radius:2px;
  background:rgba(15,60,40,0.26); display:block;
}
.gv-prev .gv-wave{gap:1.5px;}
.gv-prev .gv-wave i{min-width:1.5px;}
.gv-wave i.on{background:var(--green-600, #1a9c61);}
.gv-wave.prev i{background:var(--green-600, #1a9c61); opacity:.55;}
.gv-len{
  font-size:11px; font-weight:700; color:#8a978f; flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}