:root{color-scheme:dark;--bg:#0d0b16;--panel:#161220;--panel2:#20182d;--stroke:#3a2949;--text:#f8efff;--muted:#aca0bc;--pink:#f3b2d9;--violet:#9c77c8;--shadow:0 22px 70px #0006}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;font-size:15px;min-height:100vh}button,textarea,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit}.starlight{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 10% 8%,#55315a48,transparent 36%),radial-gradient(ellipse at 88% 96%,#31245a55,transparent 39%);z-index:-1}.shell{max-width:1740px;margin:auto;padding:30px 28px 18px}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:97px;border-bottom:1px solid #3c2e4d8c;margin-bottom:29px;padding:0 0 20px}.brand{display:flex;gap:18px;align-items:center;text-decoration:none}.brand-icon{display:grid;place-items:center;width:66px;height:66px;border:1px solid #61456f;background:#34213c80;border-radius:20px;color:var(--pink);font-size:39px}.brand small,.eyebrow{display:block;letter-spacing:.28em;font-size:11px;font-weight:750;color:#b6a0c4}.brand strong{display:block;font-size:27px;letter-spacing:.13em;margin-top:8px}.brand em{font-style:normal;color:var(--pink);font-size:14px;margin-left:15px;letter-spacing:.1em}.top-actions{display:flex;align-items:center;gap:18px}.status{display:inline-flex;align-items:center;gap:9px;background:#1c1727;border:1px solid #42334e;border-radius:30px;padding:12px 16px;font-size:13px;color:#c8bacf}.status i{height:9px;width:9px;background:#ffc18c;border-radius:50%}.status.connected i{background:#7ee1be}.icon-button{background:none;border:0;color:#ddd0e6;font-size:27px;padding:8px 13px;border-radius:12px}.icon-button:hover,.small-button:hover{background:#ffffff13}.layout{display:grid;grid-template-columns:minmax(270px,.95fr) minmax(380px,1.75fr) minmax(280px,.88fr);gap:23px;align-items:stretch;min-height:720px}.panel{background:#15111ece;border:1px solid var(--stroke);border-radius:25px;overflow:hidden;box-shadow:0 6px 40px #0002}.profile{padding:14px 14px 22px;display:flex;flex-direction:column}.avatar-stage{height:470px;position:relative;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse at center,#61406e80,transparent 58%),linear-gradient(150deg,#201833,#423152 50%,#1a1933)}.avatar-stage .avatar{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}.avatar[hidden]{display:none}.placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:45px}.placeholder .sparkle{display:grid;place-items:center;width:184px;height:184px;background:#2a1d3d8f;border-radius:100%;color:var(--pink);font-size:103px;text-shadow:0 0 38px #e39acd8a}.placeholder span{font-size:12px;letter-spacing:.3em;color:#bba8ca}.avatar-stars{position:absolute;top:12%;left:6%;color:#fff7;z-index:1;letter-spacing:3rem;font-size:15px;pointer-events:none}.avatar-tag{position:absolute;right:16px;top:18px;padding:11px 16px;border-radius:50px;border:1px solid #76577b;color:#ead4e5;background:#160f22d9;font-size:11px;font-weight:700;letter-spacing:.16em}.profile-body{padding:29px 18px 15px}.profile-body h1{font-size:32px;letter-spacing:.07em;margin:12px 0 13px}.profile-body h1 span,.side h2 span,.chat h2 span{color:var(--pink);font-size:.65em}.profile-body p,.side>p{font-size:13px;line-height:2.15;color:#bfb0c7}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.tags span{font-size:11px;padding:9px;border-radius:9px;background:#392840;color:#dccce2}.profile-footer{font-size:11px;line-height:1.9;color:#9686a8;margin:30px 18px 0;margin-top:auto;padding-top:20px}.chat{display:flex;flex-direction:column;min-width:0}.chat-heading{padding:37px 30px 27px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #33283f}.chat h2,.side h2{font-size:25px;letter-spacing:.035em}.chat-buttons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.small-button{background:#271c32;color:#d8c7e2;border:1px solid #4b375a;border-radius:22px;font-size:12px;padding:11px 12px}.chat-feed{height:540px;overflow-y:auto;padding:24px 28px;scrollbar-color:#74557f transparent;scrollbar-width:thin}.welcome{text-align:center;max-width:460px;margin:47px auto 0}.welcome-star{font-size:55px;color:var(--pink);margin-bottom:25px}.welcome h3{font-size:25px;margin:28px 0}.welcome p{color:var(--muted);font-size:13px;line-height:2.4}.welcome-quote{margin:31px auto;background:#30223d;border:1px solid #644569;padding:19px 17px;border-radius:14px;font-size:13px;line-height:2;color:#e9cfe5}.message{display:flex;flex-direction:column;margin:15px 0;gap:8px;max-width:88%}.message.user{margin-left:auto;align-items:flex-end}.message.ai{margin-right:auto;align-items:flex-start}.message .sender{font-size:11px;color:#bca0d1}.bubble{border:1px solid #564263;border-radius:15px;padding:15px 17px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;background:#271d35}.message.user .bubble{background:#513753;border-color:#73547d}.message.ai .bubble{background:#231a31}.message .speak{align-self:flex-start;background:none;color:var(--pink);border:0;font-size:12px;padding:4px 8px}.composer{margin-top:auto;padding:18px 24px 19px;border-top:1px solid #30253b}.composer form{display:flex;align-items:flex-end;gap:9px;background:#241c31;border:1px solid #82578a;padding:8px;border-radius:16px}.composer textarea{resize:none;max-height:140px;min-height:45px;flex:1;background:none;border:0;outline:0;color:var(--text);padding:12px;line-height:1.5}.composer textarea::placeholder{color:#a695b5}.composer button{background:linear-gradient(110deg,#ecabd3,#bda1e8);border:0;border-radius:12px;height:45px;width:49px;font-size:22px;color:#2d1c35}.composer-note{display:flex;justify-content:space-between;gap:12px;color:#8e80a4;font-size:10px;padding:12px 3px 0}.side{padding:40px 26px;display:flex;flex-direction:column}.side>p{margin-bottom:28px}.topic-list{display:grid;gap:13px}.topic{text-align:left;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:#21192c;border:1px solid #3f2f4f;border-radius:14px;padding:15px;color:var(--text)}.topic:hover{border-color:#a275af;background:#30213a}.topic>span{grid-row:1/3;display:grid;place-items:center;font-size:25px;color:var(--pink);background:#3c2a45;height:42px;border-radius:12px}.topic>b{font-size:13px}.topic>small{color:#ab9db9;font-size:11px;margin-top:4px}.side-foot{margin-top:auto;padding-top:28px;color:#9387a2;font-size:11px;line-height:2;border-top:1px solid #3a2c48}.footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:30px 10px;color:#827593;font-size:11px}.footer nav{display:flex;gap:20px}.footer a,.footer button{background:transparent;border:0;color:#b4a4c1;font-size:11px;text-decoration:none}.footer a:hover,.footer button:hover{text-decoration:underline}.toast{position:fixed;z-index:20;bottom:25px;left:50%;transform:translateX(-50%);max-width:min(90vw,600px);background:#473052;border:1px solid #c48ac0;border-radius:12px;color:#fff;padding:14px 20px;box-shadow:var(--shadow);font-size:13px;text-align:center}.modal[hidden],.toast[hidden],[hidden]{display:none!important}.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:14px}.modal-shade{position:absolute;inset:0;background:#000a;backdrop-filter:blur(8px)}.modal-panel{position:relative;max-height:min(92vh,1000px);overflow-y:auto;width:min(600px,100%);padding:30px 34px;background:#21182d;border-radius:24px;border:1px solid #70527f;box-shadow:var(--shadow)}.modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-top h2{margin:8px 0 0;font-size:23px}.stack{display:grid;gap:13px}.stack label{font-size:13px;line-height:1.7}.stack input:not([type=checkbox]),.stack textarea,.admin-section textarea,.admin-section input:not([type=file]):not([type=checkbox]){display:block;width:100%;background:#140e1c;border:1px solid #63496d;border-radius:10px;padding:13px;color:var(--text);margin-top:7px}.primary,.secondary,.danger-button{padding:12px 16px;border-radius:11px;border:1px solid #87618f;font-weight:bold;font-size:13px}.primary{background:linear-gradient(90deg,#f4afd6,#c29ce8);color:#2e1d32;border:0}.secondary{background:#50345b;color:#fff;margin-top:10px}.danger-button{background:#35202c;color:#f6acc4;border-color:#694254}.admin-section{border-top:1px solid #4f3b5c;padding:20px 0}.admin-section h3{font-size:16px;margin:2px 0 9px}.muted{color:var(--muted);font-size:12px;line-height:1.9}.error{color:#ffadc0;font-size:12px}.admin-stats{display:flex;justify-content:space-between;color:#d7bbdf;font-size:13px;padding:12px;background:#37243e;border-radius:12px;margin-bottom:17px}.admin-section input[type=file]{display:block;margin:10px 0;max-width:100%;font-size:12px}.checkline{display:flex;align-items:center;gap:9px;color:#e2cbe6}.memories{display:grid;gap:8px;margin:18px 0 0}.memory{border:1px solid #4f385d;padding:12px;border-radius:12px}.memory strong{font-size:13px}.memory small{display:block;color:var(--muted);font-size:11px;margin:5px 0;line-height:1.6;white-space:pre-wrap}.memory button{border:0;background:none;color:#f3aabe;padding:6px;font-size:11px}.admin-bottom{display:flex;justify-content:space-between;gap:9px}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}@media(max-width:1170px){.layout{grid-template-columns:280px minmax(0,1fr)}.side{display:none}.avatar-stage{height:410px}}@media(max-width:750px){.shell{padding:12px 12px 8px}.topbar{min-height:75px;margin-bottom:13px}.brand-icon{height:47px;width:47px;font-size:27px;border-radius:15px}.brand{gap:10px}.brand strong{font-size:18px}.brand small{font-size:8px;letter-spacing:.16em}.brand em{font-size:10px;margin-left:5px}.status{font-size:10px;padding:10px 11px}.layout{display:flex;flex-direction:column;gap:12px}.profile{padding:9px;display:grid;grid-template-columns:130px 1fr;gap:14px}.avatar-stage{height:175px;border-radius:12px}.placeholder .sparkle{width:84px;height:84px;font-size:50px}.placeholder span{font-size:7px;letter-spacing:.1em}.avatar-tag,.avatar-stars{display:none}.profile-body{padding:9px 3px}.profile-body h1{font-size:23px;margin:7px 0}.profile-body p{font-size:11px;line-height:1.7}.tags{gap:5px;margin-top:11px}.tags span{padding:5px;font-size:9px}.profile-body .eyebrow{font-size:8px}.profile-footer{display:none}.chat-heading{padding:21px 16px;gap:8px}.chat h2{font-size:20px;margin-bottom:0}.chat .eyebrow{font-size:9px}.chat-buttons{gap:3px}.small-button{font-size:10px;padding:7px}.chat-feed{height: min(51vh,540px);min-height:315px;padding:14px}.welcome{margin:26px auto 0}.welcome-star{font-size:35px;margin-bottom:14px}.welcome h3{font-size:19px}.welcome-quote{padding:13px;font-size:12px;margin:18px auto}.composer{padding:11px}.composer-note{font-size:9px;flex-wrap:wrap}.modal-panel{padding:22px 19px}.footer{flex-direction:column;align-items:flex-start;padding:20px 5px}.footer nav{gap:13px}}@media(prefers-reduced-motion:no-preference){.panel{animation:fade .5s ease-out both}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}

/* AI PLAY ROOM — separate panel, kept independent of the original chat layout. */
.layout{grid-template-columns:minmax(250px,.9fr) minmax(360px,1.65fr) minmax(280px,.95fr)}
.play-panel{padding:27px 19px;display:flex;flex-direction:column;gap:13px;min-width:0}
.play-panel h2{font-size:23px;margin:0 0 3px}.play-panel h2 span{color:var(--pink)}
.points-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.points-row small{color:var(--muted);display:block;font-size:11px}
.points-row strong{display:block;color:var(--pink);font-size:30px;margin-top:3px}
.points-row strong small{display:inline;color:var(--muted);font-size:13px}
.points-goal{font-size:12px;color:#e7c7e9;text-align:right}
.play-track{height:12px;background:#372442;border:1px solid #60466f;border-radius:30px;overflow:hidden}
.play-track div{height:100%;width:0;background:linear-gradient(90deg,#ff9ccb,#b09aff);transition:width .35s ease;border-radius:20px}
.play-caption{font-size:11px;line-height:1.75;color:#b7a7c7;margin:1px 0 7px}
.play-box{background:#21192d;border:1px solid #4a3658;border-radius:15px;padding:15px 12px}
.play-box h3{font-size:15px;margin:0 0 11px;color:#f7e3f4}
.play-result{color:#cfbedc;font-size:12px;min-height:30px;line-height:1.7;margin:0 0 10px;white-space:pre-line}
.play-actions{display:flex;gap:7px;flex-wrap:wrap}
.play-actions button{border:1px solid #735482;background:#3e2b4b;color:#f5dff3;border-radius:10px;padding:9px 11px;font-size:12px;flex:1;min-width:70px}
.play-actions button:hover{background:#603d65}
.play-photo-button{width:100%;border:0;border-radius:11px;padding:13px 12px;color:#2d1c35;font-weight:800;background:linear-gradient(110deg,#f5afcd,#b9a2ed)}
.play-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.play-gallery figure{margin:0}.play-gallery img{width:100%;border-radius:11px;display:block;aspect-ratio:2/3;object-fit:cover}.play-gallery figcaption{color:#ceb5d7;font-size:11px;margin-top:5px}
@media(max-width:1450px){.layout{grid-template-columns:minmax(230px,.75fr) minmax(360px,1.4fr)}.play-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.play-panel>.eyebrow,.play-panel>h2,.points-row,.play-track,.play-panel>.play-caption{grid-column:1/-1}}
@media(max-width:800px){.layout{display:flex;flex-direction:column}.play-panel{display:flex;padding:22px 16px}.chat-feed{height:min(51vh,540px)}}
/* Relationship status: independent from spendable photo points. */
.relationship-box{background:#241b30;border:1px solid #6f486e;border-radius:15px;padding:13px 14px}
.relationship-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}
.relationship-label small{font-size:11px;color:var(--muted)}.relationship-label strong{font-size:15px;color:var(--pink)}
.punpun-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-3px 0 11px;font-size:12px}.punpun-line small{font-size:11px;color:var(--muted)}.punpun-line strong{font-size:13px;color:#f39ab0;font-variant-numeric:tabular-nums}
.relation-track{height:9px;border-radius:10px;background:#42304c;overflow:hidden}
.relation-track>div{height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#e9a4ce,#f2dcad);transition:width .3s ease}
.relationship-box .play-caption{margin:9px 0 0}
@media(max-width:1450px){.play-panel>.relationship-box{grid-column:1/-1}}


/* AI image library: readable chat wallpaper and private moderator controls */
.chat-feed.with-ai-wallpaper{
  background-image:linear-gradient(180deg,rgba(17,12,28,.35),rgba(17,12,28,.47)),var(--ai-wallpaper);
  background-position:center;
  background-size:100% 100%,contain;
  background-repeat:no-repeat;
  background-color:#1a1425;
}
.chat-feed.with-ai-wallpaper .welcome{
  background:rgba(23,16,32,.7);
  border-radius:18px;
  padding:20px 14px;
  backdrop-filter:blur(8px);
}
.chat-feed.with-ai-wallpaper .message .bubble{
  box-shadow:0 4px 18px rgba(0,0,0,.27);
}
.album-background{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 16px;padding:10px 12px;background:#21172e;border:1px solid #50355e;border-radius:12px}
.album-background p{margin:0;color:#d8c5df;font-size:12px;overflow-wrap:anywhere}
.album-background button{flex-shrink:0}
.background-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}
.background-option{min-width:0;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;padding:0 0 12px;border:1px solid #664673;border-radius:13px;background:#191121;color:#f8e9ff;text-align:left}
.background-option[aria-pressed="true"]{border-color:#f4b2df;box-shadow:0 0 0 1px #f4b2df;opacity:1}
.background-option img,.background-swatch{display:block;width:100%;height:165px;object-fit:contain;background:#120d1b}
.background-swatch{display:grid;place-items:center;color:#edb0df;font-size:48px;background:linear-gradient(135deg,#30213f,#17111f)}
.background-option strong{margin:10px 10px 5px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.background-option small{margin:0 10px;color:#c5a4d4;font-size:10px}
.background-empty{grid-column:1/-1}
#admin-assets label{display:block;font-size:13px;margin-top:12px;line-height:1.8}
#admin-assets select{
  display:block;width:100%;padding:12px;border:1px solid #63496d;
  color:#f7e6f7;border-radius:10px;background:#140e1c;margin-top:7px;
}
.asset-list{display:grid;gap:12px;margin-top:17px}
.asset-card{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:11px;border:1px solid #594364;border-radius:13px;background:#2c2037}
.asset-card img{width:88px;height:112px;object-fit:cover;border-radius:9px;background:#191421}
.asset-card strong{display:block;font-size:13px;color:#fceaf9;overflow-wrap:anywhere}
.asset-card small{display:block;font-size:11px;line-height:1.7;color:#bda9c4;margin:6px 0}
.asset-actions{display:flex;gap:8px;flex-wrap:wrap}
.asset-actions button{font-size:11px;border:1px solid #89628c;background:#4b3359;color:#fff;border-radius:9px;padding:8px 10px}
.asset-actions button.danger{color:#ffd1dd;background:#392632}
.asset-current{font-size:12px;color:#ffc8eb;margin-bottom:8px}


/* Chat-first responsive experience. Images remain in the background; conversations stay legible. */
.mobile-tabs{display:none}
.album-panel{grid-column:1/-1;padding:24px}
.album-header h2{margin:0;font-size:23px}
.album-header p,.album-note{font-size:12px;color:var(--muted);line-height:1.8}
.album-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:13px;margin:20px 0}
.album-photo{margin:0;border:1px solid #564064;border-radius:13px;overflow:hidden;background:#241a31}
.album-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.album-photo figcaption{padding:10px;font-size:11px;color:#ecd7ef}
.album-empty{padding:26px 15px;text-align:center;color:var(--muted);border:1px dashed #6f557e;border-radius:14px;font-size:13px;line-height:2}
.chat-feed{--ai-profile-image:linear-gradient(135deg,#a675a7,#e7a8d7)}
.message.ai{position:relative;padding-left:42px}
.message.ai::before{content:'';position:absolute;left:0;top:13px;width:34px;height:34px;border-radius:50%;border:1px solid #edd6f3;background-color:#5c4667;background-image:var(--ai-profile-image);background-size:cover;background-position:center;box-shadow:0 2px 7px #0005}
.message.ai .sender{padding-left:1px}
.message.user .bubble{background:#e2c8f5;color:#231b2f;border:1px solid #d8b3f0}
.message.ai .bubble{background:rgba(28,22,41,.87)}
.message.ai .bubble,.message.user .bubble{border-radius:15px}
@media(max-width:800px){
  html,body{height:100%;overscroll-behavior-y:none}
  body{overflow:hidden}
  .shell{height:100dvh;min-height:0;padding:0;display:flex;flex-direction:column}
  .topbar{flex:none;min-height:62px;height:62px;padding:7px 13px;margin:0;border-bottom:1px solid #49304e}
  .brand-icon{width:36px;height:36px;font-size:24px;border-radius:50%}
  .brand small{display:none}
  .brand strong{margin:0;font-size:17px;letter-spacing:.04em}
  .brand em{font-size:10px;margin-left:5px;letter-spacing:0}
  .top-actions{gap:4px}
  .status{font-size:10px;padding:7px 8px;max-width:146px}
  .icon-button{font-size:20px;padding:5px}
  .layout{display:block;min-height:0;flex:1;overflow:hidden}
  .profile,.side{display:none}
  .panel{border:0;border-radius:0;box-shadow:none}
  .chat,.play-panel,.album-panel{height:100%;min-height:0;max-height:100%;overflow:hidden}
  .chat{display:flex;flex-direction:column}
  .chat-heading{flex:none;padding:8px 12px;border-bottom:1px solid #49344d;gap:8px}
  .chat h2{font-size:14px;margin:0}
  .chat-heading .eyebrow{display:none}
  .chat-buttons .small-button{font-size:10px;padding:7px 9px}
  .chat-feed{height:auto!important;flex:1;min-height:0;overflow-y:auto;padding:13px 11px 20px}
  .message{max-width:90%;margin:14px 0;gap:4px}
  .message.ai{padding-left:37px}
  .message.ai::before{width:30px;height:30px;top:12px}
  .message .sender{font-size:10px}
  .message .bubble{font-size:13px;line-height:1.65;padding:10px 12px}
  .welcome{margin:25px auto 0;max-width:90%}
  .welcome h3{font-size:18px}
  .composer{margin:0;padding:8px 9px 9px;background:#191224}
  .composer form{padding:5px;border-radius:13px}
  .composer textarea{padding:9px;min-height:39px;max-height:94px;font-size:14px}
  .composer button{height:39px;width:43px}
  .composer-note{display:none}
  .mobile-tabs{display:flex;order:3;flex:none;gap:3px;height:calc(54px + env(safe-area-inset-bottom));padding:4px 8px calc(4px + env(safe-area-inset-bottom));background:#181120;border-top:1px solid #503958;align-items:stretch}
  .mobile-tab{flex:1;border:0;border-radius:11px;background:transparent;color:#c3aacf;font-size:12px;font-weight:600}
  .mobile-tab.active{color:#25172d;background:linear-gradient(110deg,#f4b5dd,#bba5ed)}
  .footer{display:none}
  .play-panel{padding:15px;overflow-y:auto}
  .album-panel{padding:20px 14px;overflow-y:auto}
  .album-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout .play-panel,.layout .album-panel{display:none}
  body[data-mobile-view="play"] .layout .chat,
  body[data-mobile-view="album"] .layout .chat{display:none}
  body[data-mobile-view="play"] .layout .play-panel{display:flex}
  body[data-mobile-view="album"] .layout .album-panel{display:block}
}


/* A submitted work stays in the conversation beside Ai's saved assessment. */
.message.user .chat-grade-photo{display:block;width:auto;max-width:min(250px,70vw);height:auto;max-height:240px;object-fit:contain;border-radius:14px;border:1px solid #a481af;background:#20172a;box-shadow:0 6px 20px #0006}
.chat-grade-result .chat-grade-score{display:block;font-size:27px;line-height:1.3;color:#ffbee8;margin-bottom:12px;letter-spacing:-.03em}
.chat-grade-result>div{font-size:13px;line-height:1.85}
.chat-grade-details{display:block;margin-top:14px;padding:8px 12px;border:1px solid #9f78af;border-radius:10px;background:#412d4d;color:#f9d9ee;font-size:12px}

/* Optional curated photo attached to Ai's message */
.message.ai .chat-photo{
  display:block;
  max-width:min(300px,76vw);
  width:100%;
  height:auto;
  max-height:350px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid #9e7aa5;
  box-shadow:0 6px 20px #0007;
  margin-top:4px;
  background:#1b1426;
}
.album-subtitle{font-size:15px;margin:24px 0 0;color:#ffddf3}

.message.ai .chat-sticker{
  display:block;width:210px;max-width:100%;height:auto;aspect-ratio:1;
  object-fit:contain;border-radius:16px;margin-top:5px;
}

/* Paste or drag a generated ChatGPT image without browsing for a file */
.asset-dropzone{
  border:2px dashed #9f6baa;background:rgba(66,40,80,.34);border-radius:12px;
  padding:19px 14px;text-align:center;cursor:pointer;color:#f4d9f1;line-height:1.7;
  margin:12px 0 7px;transition:background .18s ease,border-color .18s ease
}
.asset-dropzone small{display:block;color:#c5b2ca;margin-top:6px;font-size:12px;overflow-wrap:anywhere}
.asset-dropzone.dragging,.asset-dropzone:focus-visible{border-color:#ffb5e5;background:rgba(125,70,142,.35);outline-offset:2px}

/* Collection and grading share one private album. */
[hidden]{display:none!important}
.test-banner{margin:0 0 10px;text-align:center;font-size:11px;color:#d7b6d9;letter-spacing:.12em}
.composer-tools{display:flex;align-items:center;gap:9px;margin-bottom:8px;color:#d0b9d5;font-size:11px}
.composer-tools .small-button{width:auto;height:auto;padding:6px 11px;font-size:12px}
.album-capacity{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;color:#f9d9f2}
.album-tabs,.account-tabs{display:flex;gap:6px;margin:18px 0;border-radius:12px;padding:4px;background:#130e1d}
.album-tabs button,.account-tabs button{flex:1;border:0;border-radius:9px;padding:11px 9px;background:transparent;color:#cfb6d9;font:inherit;font-size:13px;cursor:pointer}
.album-tabs button[aria-selected=true],.account-tabs button[aria-pressed=true]{background:linear-gradient(110deg,#efafd6,#b5a3e8);color:#25172d;font-weight:700}
.grading-intro{line-height:1.8;color:#e6d1e7;margin:18px 0}
.album-photo .small-button{margin:0 8px 10px;padding:7px 10px;font-size:11px}
.grade-card{position:relative;padding:0;border:1px solid #65476d;text-align:left;color:#f9eafa;background:#21172d;cursor:pointer;font:inherit;overflow:hidden}
.grade-card img{display:block;width:100%;height:220px;object-fit:contain;background:#160f21}
.grade-card-score{display:inline-block;margin:9px 10px 0;padding:3px 9px;background:#57375c;border-radius:8px;color:#ffddf3;font-size:16px;font-weight:700}
.grade-card-title{display:block;margin:8px 10px 12px;font-size:12px;overflow-wrap:anywhere}
.feature-modal{max-width:610px;max-height:90dvh;overflow:auto}
.feature-modal .modal-top h2{font-size:21px;margin:0}
.feature-modal input,.feature-modal textarea{width:100%;max-width:100%;min-width:0}
.feature-modal input[type=file]{padding:12px 8px;font-size:12px}
.feature-modal label{line-height:1.8}
.grade-preview{display:block;max-height:290px;max-width:100%;margin:0 auto;border-radius:13px;object-fit:contain}
.grade-result-header{margin:20px 0 12px}
.grade-result-header h3{overflow-wrap:anywhere;font-size:17px}
.grade-score{display:block;color:#ffbadf;font-size:54px;line-height:1.2;letter-spacing:-.04em}
.grade-score small{font-size:15px;letter-spacing:0;color:#d1b2d6;font-weight:400}
.grade-result-image{display:block;max-width:100%;max-height:400px;width:auto;margin:0 auto;border:1px solid #714a78;border-radius:14px}
.grade-praise{padding:17px 18px;line-height:1.9;border:1px solid #9a638d;border-radius:14px;background:linear-gradient(120deg,#3a233d,#2a223c);white-space:pre-line;overflow-wrap:anywhere}
.grade-reasons{padding-left:21px;color:#ddc9df;font-size:13px;line-height:1.9}
.grade-reasons li{margin-bottom:7px;overflow-wrap:anywhere}
.grade-breakdown{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:15px;border-radius:12px;background:#171020;font-size:13px;color:#d7c4df}
.grade-breakdown dd{margin:0;color:#fff0fb}
.grade-bonus{color:#b7efee;font-size:13px}
.recovery-result{margin-top:20px;padding:16px;background:#30213b;border:1px solid #aa77aa;border-radius:12px;font-size:13px;line-height:1.8}
.recovery-result textarea{font-family:monospace;font-size:15px;word-break:break-all}
.policy-links{margin-top:24px;font-size:12px;color:#d7b7d9}
.drop-notice{padding:13px;margin-top:13px;border:1px solid #b387b1;border-radius:14px;background:#35213a;color:#fcd9f2}
.drop-notice img{display:block;max-height:230px;max-width:100%;border-radius:10px;margin:0 auto;object-fit:contain}
.legal-shell{max-width:840px;margin:30px auto;padding:20px}
.legal-panel{padding:28px;line-height:1.9;overflow-wrap:anywhere}
.legal-panel h1{font-size:25px}.legal-panel h2{font-size:18px;margin-top:28px}
@media(max-width:760px){
  .top-actions{gap:5px}.top-actions #account-open{font-size:10px;padding:7px 8px;white-space:nowrap}
  .top-actions .status{display:none}.test-banner{display:none}
  .composer-tools{margin-bottom:5px;font-size:10px;gap:7px}.composer-tools .small-button{padding:5px 9px;font-size:11px}
  .feature-modal{width:calc(100vw - 20px);max-height:calc(100dvh - 28px);padding:18px}
  .modal{padding:10px}.feature-modal .modal-top h2{font-size:19px}
  .album-capacity{font-size:12px}.album-capacity button{font-size:10px;padding:7px 9px}
  .grade-card img{height:190px}.grade-score{font-size:45px}
  .legal-shell{padding:12px;margin:15px auto}.legal-panel{padding:20px}
}

/* Home-screen installation stays optional and uses the browser's own consent UI. */
.app-install-note{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:0 0 18px}.app-install-note[hidden]{display:none}.app-install-note .small-button{padding:8px 13px}.app-install-dialog{width:min(580px,calc(100% - 28px));max-height:calc(100dvh - 40px);overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--stroke);border-radius:22px;padding:24px;box-shadow:var(--shadow)}.app-install-dialog::backdrop{background:#090511c9}.app-install-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.app-install-heading h2{font-size:20px;margin:0}.app-install-dialog h3{font-size:15px;color:var(--pink);margin-top:22px}.app-install-dialog p,.app-install-dialog ol{font-size:13px;line-height:1.9}.app-install-dialog ol{padding-left:22px}.app-install-dialog button[hidden]{display:none}.app-install-dialog .muted{font-size:12px}.app-install-dialog #app-install-status:empty{display:none}

/* Community access stays available after the home-screen app is installed. */
.app-shortcuts{display:flex;flex:none;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.app-shortcuts .app-install-note{margin:0}
.community-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 14px;border:1px solid #8975cc;border-radius:10px;background:#352754;color:#f5edff;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}
.community-link:hover{background:#49366f}
.community-link:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.theme-player{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.theme-title{color:#d7c3e8;font-size:11px;white-space:nowrap}
.theme-player .small-button{min-height:36px;min-width:70px;padding:7px 9px;font-size:11px}
.theme-player select{min-height:36px;max-width:112px;border:1px solid #63507d;border-radius:10px;background:#23192f;color:var(--text);font:inherit;font-size:11px;padding:7px 8px}
.theme-player select:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
@media(max-width:800px){
  .app-shortcuts{justify-content:space-between;gap:8px;margin:0;padding:6px 12px;border-bottom:1px solid #49304e}
  .app-shortcuts .app-install-note>span{display:none}
  .community-link{font-size:11px;padding:7px 12px}
  .theme-player{width:100%}
}

/* Expand photos without cropping, including on narrow mobile screens. */
.expandable-photo{cursor:zoom-in}
.expandable-photo:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.photo-lightbox{position:fixed;inset:0;box-sizing:border-box;margin:auto;width:min(1050px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:min(900px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #715483;border-radius:16px;background:#120d1a;color:var(--text);box-shadow:0 20px 90px #000d}
.photo-lightbox::backdrop{background:rgba(0,0,0,.91)}
.photo-lightbox-content{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;padding:54px 12px 18px}
.photo-lightbox-content img{display:block;width:auto;height:auto;min-height:0;max-width:100%;max-height:calc(100dvh - 148px);object-fit:contain;border-radius:6px}
.photo-lightbox-caption{margin:0;max-width:100%;font-size:12px;color:#e8d7f1;text-align:center;overflow-wrap:anywhere}
.photo-lightbox-close{position:absolute;z-index:1;top:10px;right:10px;border:1px solid #8b6a9b;border-radius:10px;padding:8px 14px;background:#32213e;color:#fff;font:inherit;font-size:13px}
.photo-lightbox-close:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

.admin-entry-hidden{display:none!important}