/* ============================================================
   CSE411 Quiz 4: WhatsApp-style chat theme (light)
   ============================================================ */

:root {
  color-scheme: light;

  /* WhatsApp light palette */
  --wa-green:      #008069;
  --wa-green-dk:   #017561;
  --wa-panel:      #f0f2f5;
  --wa-paper:      #efeae2;
  --wa-out:        #d9fdd3;   /* outgoing bubble */
  --wa-in:         #ffffff;   /* incoming bubble */
  --wa-tick:       #53bdeb;
  --wa-link:       #027eb5;

  --ink:           #111b21;
  --ink-soft:      #3b4a54;
  --ink-meta:      #667781;
  --ink-faint:     #8696a0;

  --page-bg:       #ffffff;
  --line:          #e9edef;
  --red:           #c0392b;

  --font:          "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:          "Cascadia Mono", Consolas, "SF Mono", ui-monospace, Menlo, monospace;

  --shadow-bub:    0 1px 0.5px rgba(11,20,26,.13);
  --shadow-app:    0 6px 28px -14px rgba(11,20,26,.4);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 2.5rem;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- page header (above the chat) ---------- */

.site-head { padding: 2.6rem 0 1.5rem; text-align: center; }

.badge {
  display: inline-block;
  padding: .28rem .8rem;
  border-radius: 999px;
  background: #e7f7f2;
  color: var(--wa-green);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.site-head h1 {
  margin: .8rem 0 .5rem;
  font-size: clamp(1.55rem, 6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
}

.site-head h1 .soft { color: var(--wa-green); }

.site-head .sub {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--ink-meta);
  font-size: clamp(.88rem, 3.4vw, .95rem);
}

/* ---------- the chat app frame ---------- */

.chat-app {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-app);
}

.chat-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .85rem;
  background: var(--wa-green);
  color: #fff;
}

.chat-bar .back {
  font-size: 1.35rem;
  line-height: 1;
  opacity: .95;
}

.chat-bar .avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #cfd9dd;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}

.chat-bar .meta { flex: 1; min-width: 0; }

.chat-bar .name {
  display: block;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-bar .status {
  display: block;
  font-size: .76rem;
  opacity: .82;
}

.chat-bar .icons {
  display: flex;
  gap: .9rem;
  font-size: 1rem;
  opacity: .95;
}

/* chat wallpaper */
.chat-body {
  padding: 1.1rem .8rem .6rem;
  background-color: var(--wa-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23d8d1c6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='26' r='7'/%3E%3Cpath d='M60 20h16M68 12v16'/%3E%3Crect x='104' y='16' width='16' height='16' rx='4'/%3E%3Cpath d='M14 78q9-11 18 0t18 0'/%3E%3Ccircle cx='112' cy='90' r='7'/%3E%3Cpath d='M34 118h18M43 109v18'/%3E%3Cpath d='M78 62l10 6-10 6z'/%3E%3Cpath d='M92 122q7-8 14 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- day pill ---------- */

.day {
  display: flex;
  justify-content: center;
  margin: .4rem 0 1rem;
}

.day span {
  padding: .3rem .8rem;
  border-radius: 8px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-bub);
  color: var(--ink-meta);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---------- messages ---------- */

.msg { display: flex; margin-bottom: .55rem; }
.msg.me   { justify-content: flex-end; }
.msg.them { justify-content: flex-start; }

.bubble {
  position: relative;
  max-width: 78%;
  min-width: 0;
  padding: .4rem .55rem .35rem;
  border-radius: 8px;
  box-shadow: var(--shadow-bub);
  font-size: .935rem;
  line-height: 1.42;
  overflow-wrap: break-word;
  word-break: break-word;
}

.me .bubble   { background: var(--wa-out); border-top-right-radius: 0; }
.them .bubble { background: var(--wa-in);  border-top-left-radius: 0; }

/* bubble tails */
.me .bubble::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  width: 0; height: 0;
  border-top: 9px solid var(--wa-out);
  border-right: 9px solid transparent;
}

.them .bubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 0; height: 0;
  border-top: 9px solid var(--wa-in);
  border-left: 9px solid transparent;
}

.who {
  display: block;
  margin-bottom: .1rem;
  font-size: .78rem;
  font-weight: 600;
  color: #06cf9c;
}

.them .who { color: #e542a3; }

.bubble p { margin: 0 0 .3rem; }
.bubble p:last-of-type { margin-bottom: .1rem; }

.bubble a { color: var(--wa-link); text-decoration: underline; overflow-wrap: anywhere; }

/* ---------- timestamps ---------- */

.stamp {
  display: block;
  margin: .12rem 0 0;
  text-align: right;
  color: var(--ink-faint);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.4;
}

.stamp .tick { color: var(--wa-tick); letter-spacing: -.16em; margin-left: .1rem; }

/* time laid over an image, WhatsApp-style */
.stamp.on-media {
  position: absolute;
  right: .8rem;
  bottom: .7rem;
  margin: 0;
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 3px rgba(11,20,26,.9);
}

.stamp.on-media .tick { color: #eaf6ff; }

/* ---------- media in bubbles ---------- */

.bubble.media { padding: .18rem; max-width: 72%; }
.bubble.media .who { padding: .22rem .4rem 0; }
.bubble.media p { padding: .15rem .4rem 0; }
.bubble.media .stamp:not(.on-media) { margin-right: .45rem; margin-bottom: .2rem; }

figure.shot, figure.vid { margin: 0; position: relative; }

figure.shot img {
  width: 100%;
  border-radius: 7px;
  cursor: zoom-in;
}

/* scrim so the overlaid time stays readable on light photos */
figure.shot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(to top, rgba(11,20,26,.45), transparent);
  pointer-events: none;
}

figure.vid video {
  width: 100%;
  border-radius: 7px;
  background: #0b141a;
}

/* link preview card, WhatsApp style */
.linkcard {
  display: block;
  margin: 0 0 .25rem;
  padding: .5rem .6rem;
  border-radius: 7px;
  background: rgba(0,0,0,.045);
  border-left: 4px solid var(--wa-green);
  text-decoration: none;
  color: inherit;
}

.linkcard .t { display: block; font-size: .85rem; font-weight: 600; }
.linkcard .d { display: block; font-size: .78rem; color: var(--ink-meta); line-height: 1.38; }
.linkcard .u { display: block; margin-top: .15rem; font-size: .74rem; color: var(--ink-faint); }

/* ---------- compose bar (decorative) ---------- */

.compose {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .7rem;
  background: var(--wa-panel);
}

.compose .field {
  flex: 1;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-faint);
  font-size: .88rem;
}

.compose .ico { color: var(--ink-meta); font-size: 1.05rem; }

/* ---------- closing note ---------- */

.note {
  margin: 2rem 0 0;
  padding: 1.3rem 1.4rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--wa-green);
  box-shadow: 0 1px 3px rgba(11,20,26,.06);
}

.note h2 {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.note p { margin: 0 0 .8rem; font-size: .93rem; color: var(--ink-soft); }
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

.score {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 5px;
  background: #e7f7f2;
  color: var(--wa-green-dk);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

code {
  font-family: var(--mono);
  font-size: .88em;
  padding: .06rem .3rem;
  border-radius: 4px;
  background: var(--wa-panel);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* table of topics, scrolls sideways on narrow screens */
.tbl-wrap {
  overflow-x: auto;
  margin: .2rem 0 .9rem;
  -webkit-overflow-scrolling: touch;
}

table.tbl {
  border-collapse: collapse;
  width: 100%;
  min-width: 430px;
  font-size: .85rem;
}

.tbl th, .tbl td {
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.tbl th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-meta);
  white-space: nowrap;
}

.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .no  { color: var(--red); font-weight: 600; }
.tbl .yes { color: var(--wa-green); font-weight: 600; }

/* numbered exam topics */
.topics { margin: .2rem 0 .9rem; padding-left: 1.2rem; }
.topics li { margin-bottom: .32rem; font-size: .92rem; color: var(--ink-soft); }
.topics li strong { color: var(--ink); }

/* red emphasis inside a note */
.hl-red {
  color: var(--red);
  font-weight: 700;
}

.hl-red code {
  color: inherit;
  background: #fdecea;
  border-color: #f6d3cd;
}

/* the last line on the page */
.note p.closing {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  color: var(--ink);
}

.refs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }

.refs a {
  display: block;
  padding: .6rem .8rem;
  border-radius: 7px;
  background: var(--wa-panel);
  text-decoration: none;
  color: inherit;
}

.refs a:hover { background: #e4e8eb; }
.refs .t { display: block; font-size: .87rem; font-weight: 600; color: var(--wa-link); }
.refs .d { display: block; font-size: .8rem; color: var(--ink-meta); line-height: 1.4; }

/* ---------- lightbox ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(11,20,26,.92);
  cursor: zoom-out;
}

.lb.open { display: flex; }

.lb img { max-width: 100%; max-height: 92vh; border-radius: 6px; }

.lb .close {
  position: absolute;
  top: .8rem;
  right: 1rem;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* ---------- footer ---------- */

footer .takedown {
  max-width: 48ch;
  margin: 0 auto 1.1rem;
  padding: .8rem 1rem;
  border-radius: 8px;
  background: var(--wa-panel);
  color: var(--ink-soft);
  font-size: .83rem;
  line-height: 1.6;
}

footer .takedown a {
  color: var(--wa-link);
  font-weight: 600;
  overflow-wrap: anywhere;
}

footer {
  margin-top: 2rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: .78rem;
  line-height: 1.7;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 600px) {
  .wrap { padding: 0 .55rem; }

  .site-head { padding: 2rem 0 1.1rem; }

  .chat-app { border-radius: 8px; }

  .chat-body { padding: .9rem .55rem .5rem; }

  .bubble { max-width: 88%; }
  .bubble.media { max-width: 86%; }

  .chat-bar .icons { gap: .7rem; }

  .note { padding: 1.05rem 1.1rem; }

  .lb { padding: .5rem; }
}

@media (max-width: 380px) {
  .bubble, .bubble.media { max-width: 93%; }
  .chat-bar .icons { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}