/* Moonlight Reflections — conversational experience (v2, namespaced mr-) 2026-06-12.
   All classes prefixed mr- to avoid any collision with host/theme styles. */

.mr-root{
  --mr-night-0:#080f22;--mr-night-1:#0b1730;
  --mr-ink:#eef2fb;--mr-ink-soft:#c4d0e6;--mr-ink-mute:#7e90b0;
  --mr-gold:#ecc97e;--mr-gold-soft:#f4dca6;
  --mr-line:rgba(170,195,240,.14);
  --mr-serif:'Fraunces',Georgia,serif;--mr-sans:'Inter',system-ui,sans-serif;
  position:relative;height:100%;min-height:520px;width:100%;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;
  font-family:var(--mr-sans);color:var(--mr-ink);
  background:
    radial-gradient(1100px 680px at 80% -12%, #18386a 0%, rgba(24,56,106,0) 58%),
    radial-gradient(820px 560px at 6% 114%, #112a52 0%, rgba(17,42,82,0) 55%),
    linear-gradient(165deg, var(--mr-night-1) 0%, var(--mr-night-0) 62%, #060b18 100%);
}
.mr-root *{box-sizing:border-box;}

.mr-stars{position:absolute;inset:0;pointer-events:none;}
.mr-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:mr-tw 4s ease-in-out infinite;}
@keyframes mr-tw{0%,100%{opacity:.15;}50%{opacity:.75;}}

.mr-wrap{position:relative;width:100%;max-width:880px!important;margin:0 auto;padding:20px 26px 18px;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.mr-topbar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex:none;}
.mr-orb{width:54px;height:54px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 38% 34%, #fff7e6 0%, #f0d49a 34%, #b9904a 78%, #6d5026 100%);
  box-shadow:0 0 26px 4px rgba(236,201,126,.28), inset -8px -7px 18px rgba(40,26,8,.5);animation:mr-breathe 6s ease-in-out infinite;}
@keyframes mr-breathe{0%,100%{box-shadow:0 0 22px 3px rgba(236,201,126,.24), inset -8px -7px 18px rgba(40,26,8,.5);}50%{box-shadow:0 0 34px 7px rgba(236,201,126,.4), inset -8px -7px 18px rgba(40,26,8,.5);}}
.mr-brand h1{font-family:var(--mr-serif);font-weight:500;font-size:29px;margin:0;color:var(--mr-gold-soft);letter-spacing:.3px;}
.mr-brand p{margin:3px 0 0;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--mr-ink-mute);}

.mr-view.mr-hidden{display:none;}
.mr-view.mr-enter{animation:mr-rise .55s ease both;}
@keyframes mr-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.mr-view{min-height:0;}
.mr-view[data-mr-view="cal"]:not(.mr-hidden){display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}

.mr-calhead .mr-month{font-family:var(--mr-serif);font-size:27px;color:var(--mr-gold-soft);}
.mr-calhead .mr-sub2{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mr-ink-mute);margin-top:4px;}
.mr-hint{font-size:14px;color:var(--mr-ink-soft);margin:10px 0 14px;font-style:italic;font-family:var(--mr-serif);flex:none;}
.mr-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(46px,1fr);gap:8px;position:relative;flex:1 1 auto;min-height:0;}
.mr-dow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mr-ink-mute);text-align:center;padding-bottom:6px;}
.mr-blank{aspect-ratio:1/1;}

.mr-cell{min-height:0;border-radius:16px;border:1px solid var(--mr-line);position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(160deg, rgba(150,180,235,.05), rgba(255,255,255,.012));
  animation:mr-cellin .75s ease both;transition:transform .28s ease, border-color .28s ease, box-shadow .35s ease;}
@keyframes mr-cellin{from{opacity:0;transform:translateY(10px) scale(.95);}to{opacity:1;transform:none;}}
.mr-cell:hover{transform:translateY(-4px);border-color:rgba(236,201,126,.5);box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 18px rgba(236,201,126,.12);}
.mr-cell.mr-future{cursor:default;opacity:.5;}
.mr-cell.mr-future:hover{transform:none;border-color:var(--mr-line);box-shadow:none;}
.mr-daynum{position:absolute;top:11px;left:13px;font-size:16px;color:var(--mr-ink-soft);z-index:2;transition:color .3s;}
.mr-cell.mr-done .mr-daynum,.mr-cell.mr-today .mr-daynum{color:#fff;}

.mr-kintsugi{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .4s;z-index:1;}
.mr-kintsugi path{fill:none;stroke:url(#mr-goldgrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(236,201,126,.55));}
.mr-cell.mr-done{background:radial-gradient(120% 120% at 70% 20%, rgba(236,201,126,.14), rgba(120,150,210,.04) 60%);}
.mr-cell.mr-done .mr-kintsugi{opacity:1;}
.mr-cell.mr-done .mr-kintsugi path{stroke-dasharray:260;stroke-dashoffset:260;animation:mr-draw 2.4s ease var(--mr-kd,.3s) forwards;}
@keyframes mr-draw{to{stroke-dashoffset:0;}}
.mr-cell.mr-today{border-color:rgba(236,201,126,.7);background:radial-gradient(120% 120% at 50% 30%, rgba(236,201,126,.1), rgba(120,150,220,.06) 65%);}
.mr-cell.mr-today .mr-kintsugi{opacity:1;}
.mr-cell.mr-today .mr-kintsugi path{stroke-dasharray:260;stroke-dashoffset:0;animation:mr-seam 3s ease-in-out infinite;}
@keyframes mr-seam{0%,100%{opacity:.35;}50%{opacity:1;}}
.mr-cell.mr-today::after{content:"";position:absolute;inset:-2px;border-radius:18px;border:1px solid rgba(236,201,126,.45);animation:mr-halo 3s ease-in-out infinite;pointer-events:none;}
@keyframes mr-halo{0%,100%{opacity:.25;transform:scale(1);}50%{opacity:.7;transform:scale(1.02);}}
.mr-cell.mr-justmended .mr-kintsugi path{animation:mr-draw 2.2s ease forwards;}
.mr-joins path{fill:none;stroke:url(#mr-goldgrad);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 2.5px rgba(236,201,126,.6));stroke-dasharray:170;stroke-dashoffset:170;animation:mr-draw 1.9s ease var(--mr-jd,2.4s) forwards;}

.mr-legend{display:flex;gap:22px;margin-top:26px;font-size:12px;color:var(--mr-ink-mute);flex-wrap:wrap;}
.mr-legend span{display:inline-flex;align-items:center;gap:8px;}
.mr-legend i{width:16px;height:3px;border-radius:2px;display:inline-block;}

.mr-console{max-width:600px;margin:0 auto;}
.mr-ctop{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.mr-back{background:none;border:none;color:var(--mr-ink-mute);font-size:13px;cursor:pointer;font-family:var(--mr-sans);transition:color .2s;}
.mr-back:hover{color:var(--mr-gold-soft);}
.mr-cdate{font-family:var(--mr-serif);font-size:22px;color:var(--mr-gold-soft);}

.mr-thread{display:flex;flex-direction:column;gap:11px;min-height:280px;margin-bottom:22px;}
.mr-line{width:fit-content;max-width:76%;animation:mr-pop .46s cubic-bezier(.2,.8,.25,1) both;}
@keyframes mr-pop{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
.mr-cloud{position:relative;overflow:hidden;padding:13px 17px;font-size:16px;line-height:1.5;border-radius:22px;border:1px solid rgba(170,195,240,.2);}
.mr-line.mr-from-moon{align-self:flex-start;}
.mr-line.mr-from-moon .mr-cloud{background:rgba(34,52,96,.74);color:var(--mr-gold-soft);font-family:var(--mr-serif);font-size:17px;
  text-shadow:0 0 10px rgba(236,201,126,.3);border-bottom-left-radius:7px;}
.mr-line.mr-from-moon .mr-cloud::before{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 32%,rgba(255,247,224,.16) 50%,transparent 68%);animation:mr-sweep 1.2s ease .12s 1;}
@keyframes mr-sweep{to{transform:translateX(130%);}}
.mr-line.mr-from-me{align-self:flex-end;}
.mr-line.mr-from-me .mr-cloud{background:rgba(86,116,232,.6);color:#f6f8ff;border-bottom-right-radius:7px;border-color:rgba(150,175,255,.34);}

.mr-typing{display:inline-flex;gap:5px;padding:15px 18px;border-radius:22px;border-bottom-left-radius:7px;
  background:rgba(34,52,96,.74);border:1px solid rgba(170,195,240,.2);}
.mr-typing span{width:7px;height:7px;border-radius:50%;background:rgba(214,225,255,.9);animation:mr-bl 1.2s infinite;}
.mr-typing span:nth-child(2){animation-delay:.18s;}.mr-typing span:nth-child(3){animation-delay:.36s;}
@keyframes mr-bl{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-4px);}}

.mr-compose{border-top:1px solid var(--mr-line);padding-top:18px;}
.mr-input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--mr-line);border-radius:16px;color:var(--mr-ink);
  font-family:var(--mr-sans);font-size:15px;line-height:1.6;padding:14px 16px;resize:none;outline:none;transition:border-color .25s, background .25s, box-shadow .25s;}
.mr-input:focus{border-color:rgba(140,170,235,.55);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(120,150,235,.12);}
.mr-input::placeholder{color:var(--mr-ink-mute);}
.mr-crow{display:flex;align-items:center;justify-content:space-between;margin-top:12px;}
.mr-btn{font-family:var(--mr-sans);font-size:14px;border-radius:999px;padding:10px 20px;cursor:pointer;border:1px solid var(--mr-line);background:none;color:var(--mr-ink-soft);transition:.2s;}
.mr-btn:hover{border-color:rgba(140,170,235,.5);color:var(--mr-ink);}
.mr-send{background:rgba(96,124,236,.95);border:none;color:#fff;font-weight:500;box-shadow:0 6px 18px rgba(96,124,236,.32);}
.mr-send:hover{background:rgba(112,140,248,1);color:#fff;transform:translateY(-1px);}
.mr-finish{opacity:.5;}
.mr-finish.mr-ready{opacity:1;border-color:rgba(236,201,126,.55);color:#f0dcab;box-shadow:0 0 18px rgba(236,201,126,.16);}
.mr-btn:disabled{opacity:.32;cursor:default;}
.mr-err{color:#ffd2cf;font-size:13px;margin:10px 2px 0;}

.mr-page{max-width:560px;margin:0 auto;text-align:center;animation:mr-rise .7s ease both;}
.mr-seal{width:62px;height:62px;border-radius:50%;margin:0 auto 18px;transition:box-shadow .8s ease;
  background:radial-gradient(circle at 38% 34%, #fff7e6, #f0d49a 42%, #b9904a 82%);box-shadow:0 0 30px 5px rgba(236,201,126,.3);}
.mr-seal.mr-sealed{box-shadow:0 0 56px 12px rgba(236,201,126,.6);}
.mr-k{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--mr-ink-mute);}
.mr-page h2{font-family:var(--mr-serif);font-weight:500;color:var(--mr-gold-soft);font-size:24px;margin:8px 0 6px;}
.mr-psub{font-size:13px;color:var(--mr-ink-mute);margin:0 0 22px;}
.mr-paper{background:rgba(36,56,102,.5);border:1px solid rgba(170,195,240,.2);border-radius:20px;
  padding:26px 28px;text-align:left;font-family:var(--mr-serif);font-size:17px;line-height:1.85;color:var(--mr-ink);white-space:pre-wrap;}
.mr-mood{margin-top:18px;font-size:13.5px;color:var(--mr-ink-mute);font-family:var(--mr-serif);font-style:italic;}
.mr-mood b{color:var(--mr-gold-soft);font-weight:500;font-style:normal;}
.mr-moodrow{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px;}
.mr-moodrow input[type=range]{width:200px;accent-color:#ecc97e;}
.mr-actions{margin-top:26px;display:flex;gap:12px;justify-content:center;align-items:center;}
.mr-loading{text-align:center;color:var(--mr-ink-mute);font-family:var(--mr-serif);font-style:italic;padding:40px 0;}

/* Narrow screens (phones/tablets): tighten chrome, let the calendar scroll if it can't fit. */
@media (max-width:560px){
  .mr-wrap{padding:16px 14px 14px;}
  .mr-topbar{gap:12px;margin-bottom:12px;}
  .mr-orb{width:42px;height:42px;}
  .mr-brand h1{font-size:22px;}
  .mr-brand p{font-size:10.5px;letter-spacing:2px;}
  .mr-calhead .mr-month{font-size:21px;}
  .mr-hint{font-size:13px;margin:8px 0 12px;}
  .mr-grid{gap:5px;grid-auto-rows:minmax(40px,1fr);}
  .mr-dow{font-size:9.5px;letter-spacing:.5px;padding-bottom:4px;}
  .mr-daynum{top:6px;left:7px;font-size:12px;}
  .mr-view[data-mr-view="cal"]:not(.mr-hidden){overflow-y:auto;}
  .mr-line{max-width:90%;}
  .mr-cloud{font-size:15px;padding:11px 14px;}
  .mr-line.mr-from-moon .mr-cloud{font-size:16px;}
}