:root{
  --bg:#f7f5ef;
  --paper:#fffdf8;
  --ink:#21231f;
  --muted:#77786f;
  --line:#dedbd1;
  --soft:#eeece4;
  --accent:#253b32;
  --accent-2:#8b4d38;
  --shadow:0 16px 40px rgba(28,31,27,.08);
  --max:820px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif}
button,textarea{font:inherit}
button{color:inherit}
body{min-height:100vh}
.app-shell{min-height:100vh}
.topbar{
  height:68px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,4vw,42px);position:sticky;top:0;z-index:20;
  background:rgba(247,245,239,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(222,219,209,.7)
}
.brand{display:flex;align-items:center;gap:10px;border:0;background:none;font-size:16px;font-weight:700;cursor:pointer;padding:8px 0}
.brand-mark{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:white;font-family:Georgia,serif;font-style:italic}
.top-actions{display:flex;gap:8px}
.ghost-btn{border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:999px;padding:8px 13px;cursor:pointer;font-size:13px}
.ghost-btn:hover{background:#fff}
.hero{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:42px 20px 80px}
.hero-inner{width:min(760px,100%);text-align:center}
.eyebrow{letter-spacing:.18em;font-size:11px;font-weight:700;color:var(--accent-2);margin:0 0 18px}
.hero h1{font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(42px,8vw,76px);font-weight:500;letter-spacing:-.04em;margin:0}
.lead{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(18px,3vw,23px);line-height:1.8;margin:23px 0 36px;color:#3d4039}
.ask-box{display:flex;align-items:flex-end;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-ask{padding:10px 10px 10px 18px;border-radius:20px}
.ask-box textarea{
  flex:1;border:0;outline:0;resize:none;background:transparent;line-height:1.65;color:var(--ink);
  min-height:48px;max-height:180px;padding:10px 8px
}
.ask-box textarea::placeholder{color:#aaa99f}
.send-btn{border:0;background:var(--accent);color:#fff;border-radius:14px;padding:14px 18px;cursor:pointer;white-space:nowrap}
.send-btn:hover,.icon-send:hover{filter:brightness(1.08)}
.examples{margin:24px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.examples button{border:0;background:transparent;color:var(--muted);text-decoration:underline;text-decoration-color:#ccc8bc;text-underline-offset:4px;cursor:pointer;padding:5px 7px;font-size:13px}
.chat-view{min-height:calc(100vh - 68px);padding:0 20px 130px}
.speaker-strip{
  width:min(var(--max),100%);margin:0 auto;padding:16px 2px 11px;border-bottom:1px solid var(--line);
  position:sticky;top:68px;background:rgba(247,245,239,.94);backdrop-filter:blur(10px);z-index:10
}
.speaker-label{font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.speaker-name{font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;margin-top:3px}
.messages{width:min(var(--max),100%);margin:0 auto;padding:30px 0 10px}
.message{margin:0 0 28px}
.message.user{display:flex;justify-content:flex-end}
.user-bubble{max-width:78%;background:#e8e5dc;padding:13px 16px;border-radius:18px 18px 4px 18px;line-height:1.72;white-space:pre-wrap}
.ai-line{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;line-height:1.95;white-space:pre-wrap;padding:0 4px}
.ai-speaker{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans",sans-serif;font-size:12px;font-weight:700;color:var(--accent-2);margin-bottom:8px;letter-spacing:.02em}
.character-card{
  border:1px solid #d9d4c6;border-radius:3px;background:var(--paper);padding:26px 28px;margin:16px 0 24px;
  box-shadow:0 10px 28px rgba(50,46,35,.05);animation:arrive .55s ease both
}
.character-kicker{font-size:10px;letter-spacing:.18em;color:var(--accent-2);font-weight:700;margin-bottom:13px}
.character-name{font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-size:28px;font-weight:500;margin:0}
.character-role{font-size:12px;color:var(--muted);margin-top:5px}
.character-intro{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:15px;line-height:1.8;color:#4e504a;margin:15px 0 0}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.composer-wrap{position:fixed;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(to top,var(--bg) 55%,rgba(247,245,239,0));z-index:15}
.composer{width:min(var(--max),100%);margin:0 auto;border-radius:18px;padding:8px 8px 8px 14px}
.icon-send{width:42px;height:42px;border:0;border-radius:13px;background:var(--accent);color:#fff;cursor:pointer;font-size:20px}
.overlay{position:fixed;inset:0;background:rgba(23,24,21,.24);z-index:30}
.drawer{
  position:fixed;top:0;right:0;width:min(420px,92vw);height:100vh;background:#fbfaf6;z-index:31;
  transform:translateX(105%);transition:transform .25s ease;box-shadow:-20px 0 50px rgba(0,0,0,.12)
}
.drawer.open{transform:none}
.drawer-head{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500;font-size:22px}
.close-btn{font-size:28px;border:0;background:none;cursor:pointer}
.drawer-body{padding:22px;overflow:auto;height:calc(100vh - 68px)}
.person-item{padding:15px 0;border-bottom:1px solid var(--line)}
.person-name{font-weight:700}
.person-role,.person-intro{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55}
.recall-btn{margin-top:10px;border:1px solid var(--line);background:white;border-radius:999px;padding:7px 11px;cursor:pointer;font-size:12px}
.trail{display:flex;flex-direction:column;gap:0}
.trail-item{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;line-height:1.55;padding:8px 0}
.trail-arrow{color:#aaa69b;padding-left:10px}
.empty{color:var(--muted);font-size:14px;line-height:1.7}
.error{width:min(var(--max),100%);margin:12px auto;color:#8b3e31;background:#f6e9e4;border:1px solid #ebcfc5;padding:12px 14px;border-radius:10px;font-size:13px}
@media(max-width:640px){
  .topbar{height:60px;padding:0 15px}.speaker-strip{top:60px}
  .brand{font-size:14px}.brand-mark{width:25px;height:25px}
  .ghost-btn{font-size:12px;padding:7px 9px}
  .hero{min-height:calc(100vh - 60px);padding:30px 15px 70px}
  .hero h1{font-size:46px}
  .lead{font-size:18px}
  .hero-ask{display:block;padding:8px;border-radius:17px}
  .hero-ask textarea{width:100%;padding:11px 10px}
  .send-btn{width:100%;margin-top:5px}
  .chat-view{padding-left:15px;padding-right:15px}
  .character-card{padding:22px 20px}
  .character-name{font-size:24px}
  .ai-line{font-size:16px;line-height:1.9}
  .user-bubble{max-width:88%}
  .composer-wrap{padding:14px 12px 16px}
}


/* v0.4 */
.met-people-wrap{
  width:min(var(--max),100%);margin:0 auto;padding:16px 2px 6px;
}
.met-people-head{
  font-size:10px;letter-spacing:.12em;color:var(--muted);margin-bottom:9px;
}
.met-people-strip{
  display:flex;gap:10px;overflow-x:auto;padding:0 0 7px;scrollbar-width:thin;
}
.met-person{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.55);
  border-radius:999px;padding:6px 11px 6px 6px;cursor:pointer;transition:.18s ease;
}
.met-person:hover{background:#fff;transform:translateY(-1px)}
.met-person.active{
  border-color:var(--accent);background:#fff;box-shadow:0 5px 15px rgba(30,40,34,.08);
}
.met-avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;font-size:16px;
}
.met-copy{min-width:0;text-align:left}
.met-name{display:block;font-size:12px;font-weight:700;white-space:nowrap}
.met-role{display:block;font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap}

.conversation-actions{
  width:min(var(--max),100%);margin:0 auto 8px;display:flex;gap:7px;
  overflow-x:auto;padding:0 1px 2px;
}
.conversation-actions button{
  flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.84);
  border-radius:999px;padding:8px 12px;font-size:12px;color:#55574f;cursor:pointer;
}
.conversation-actions button:hover{background:#fff;border-color:#c9c5b8}
.conversation-actions button:disabled{opacity:.45;cursor:default}

@media(max-width:640px){
  .top-actions{gap:5px}
  .ghost-btn{padding:7px 8px}
  .met-people-wrap{padding-top:12px}
  .met-person{padding-right:9px}
  .met-avatar{width:31px;height:31px}
  .conversation-actions{gap:6px}
  .conversation-actions button{font-size:11px;padding:7px 10px}
}


/* v0.4.3 safe UI patch */
.met-people-wrap{
  position:sticky !important;
  top:68px !important;
  z-index:16 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:10px clamp(18px,4vw,42px) 8px !important;
  background:rgba(247,245,239,.96) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(222,219,209,.85);
}
.met-people-head,
.met-people-strip{
  width:min(var(--max),100%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.speaker-strip{
  top:142px !important;
}

/* Move existing top action controls next to the composer */
.composer-wrap > .top-actions{
  width:min(var(--max),100%);
  margin:0 auto 7px;
  display:flex !important;
  justify-content:flex-end;
  gap:7px;
  position:static;
}
.composer-wrap > .top-actions[hidden]{
  display:flex !important;
}
.composer-wrap > .top-actions .ghost-btn{
  background:rgba(255,255,255,.84);
}

@media(max-width:640px){
  .met-people-wrap{
    top:60px !important;
    padding:9px 12px 7px !important;
  }
  .speaker-strip{
    top:130px !important;
  }
  .composer-wrap > .top-actions{
    justify-content:flex-start;
    gap:6px;
  }
}


/* v0.5 portraits */
.met-avatar{
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
}
.met-avatar-img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.met-avatar-img[hidden]{display:none}
.met-avatar-fallback{
  width:100%;height:100%;display:grid;place-items:center;
}
.met-avatar-fallback[hidden]{display:none}

.character-card-main{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.character-photo-wrap{
  width:82px;height:82px;border-radius:18px;overflow:hidden;
  flex:0 0 82px;background:var(--accent);color:#fff;
}
.character-photo{
  width:100%;height:100%;object-fit:cover;display:block;
}
.character-photo[hidden]{display:none}
.character-photo-fallback{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:30px;
}
.character-photo-fallback[hidden]{display:none}
.character-card-copy{min-width:0;flex:1}

@media(max-width:640px){
  .character-card-main{gap:12px}
  .character-photo-wrap{width:68px;height:68px;flex-basis:68px;border-radius:15px}
}

.hero .lead strong{font-weight:700;color:var(--ink)}
.hero-faces{position:relative;width:min(560px,92vw);height:112px;margin:24px auto 18px}
.hero-face{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;color:var(--muted);white-space:nowrap}
.hero-face img,.hero-face-fallback{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.92);box-shadow:0 7px 20px rgba(45,43,36,.15);background:#ddd}
.hero-face img{transition:transform .2s ease,box-shadow .2s ease}
.hero-face:hover img{transform:translateY(-3px) rotate(-2deg);box-shadow:0 11px 24px rgba(45,43,36,.20)}
.hero-face.f1{left:8%;top:57%;transform:translate(-50%,-50%) rotate(-5deg)}
.hero-face.f2{left:29%;top:38%;transform:translate(-50%,-50%) rotate(3deg)}
.hero-face.f3{left:50%;top:59%;transform:translate(-50%,-50%) rotate(-2deg)}
.hero-face.f4{left:71%;top:36%;transform:translate(-50%,-50%) rotate(4deg)}
.hero-face.f5{left:92%;top:57%;transform:translate(-50%,-50%) rotate(-4deg)}
.hero-face.f1 img,.hero-face.f5 img{width:57px;height:57px}
.hero-face.f3 img{width:70px;height:70px}
.hero-face-fallback{display:grid;place-items:center;background:var(--accent);color:#fff;font-family:Georgia,"Yu Mincho",serif;font-size:22px}
@media(max-width:640px){.hero-faces{width:96vw;height:100px;margin:19px auto 14px}.hero-face img,.hero-face-fallback{width:52px;height:52px;border-width:2px}.hero-face.f1 img,.hero-face.f5 img{width:46px;height:46px}.hero-face.f3 img{width:58px;height:58px}.hero-face{font-size:8px}}

/* v0.5.4 TOP portraits via portrait.php */
.hero-face img[hidden], .hero-face-fallback[hidden]{display:none !important}
.hero-face .hero-face-fallback{box-sizing:border-box}
.hero-face.f1 .hero-face-fallback,.hero-face.f5 .hero-face-fallback{width:57px;height:57px}
.hero-face.f3 .hero-face-fallback{width:70px;height:70px}
@media(max-width:640px){
  .hero-face.f1 .hero-face-fallback,.hero-face.f5 .hero-face-fallback{width:46px;height:46px}
  .hero-face.f3 .hero-face-fallback{width:58px;height:58px}
}


/* v0.6.3 */
.version-badge{
  position:fixed;
  top:10px;
  right:12px;
  z-index:9999;
  font-size:11px;
  line-height:1;
  letter-spacing:.04em;
  color:#66685f;
  background:#fff;
  border:1px solid #d8d4c8;
  border-radius:999px;
  padding:6px 9px;
  box-shadow:0 3px 10px rgba(28,31,27,.08);
  pointer-events:none;
}

/* Native dialog drawer */
.drawer-dialog{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
  width:min(420px,92vw) !important;
  max-width:none !important;
  height:100dvh !important;
  max-height:none !important;
  padding:0 !important;
  border:0 !important;
  background:#fbfaf6 !important;
  color:var(--ink) !important;
  box-shadow:-20px 0 50px rgba(0,0,0,.14) !important;
}
.drawer-dialog:not([open]){display:none !important;}
.drawer-dialog[open]{display:block !important;}
.drawer-dialog::backdrop{background:rgba(23,24,21,.24);}
.drawer-dialog .drawer-body{
  height:calc(100dvh - 68px);
  overflow:auto;
}
.drawer-dialog .close-btn{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto !important;
  position:relative;
  z-index:10;
}
.drawer-dialog .close-btn:hover{background:var(--soft);}

@media(max-width:640px){
  .version-badge{top:8px;right:8px;font-size:10px;padding:5px 7px;}
}


/* v0.6.4 native dialog close button */
.dialog-close-form{
  margin:0;
  padding:0;
  display:block;
}
.dialog-close-form .close-btn{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto !important;
}
.dialog-close-form .close-btn:hover{
  background:var(--soft);
}