.model-auth{color:#f7eeee;background:#21121b;border:1px solid #75535d;border-radius:24px;padding:34px;width:min(440px,calc(100vw - 32px));max-height:90vh;overflow:auto;box-shadow:0 30px 100px #0009}.model-auth::backdrop{background:#11070dbb;backdrop-filter:blur(6px)}.model-auth h2{font-size:30px;line-height:1.15;margin:15px 0}.model-auth p{line-height:1.6}.model-auth label{display:block;margin:16px 0;font-size:14px}.model-auth input:not([type=checkbox]){display:block;width:100%;box-sizing:border-box;margin-top:8px;background:#140d12;border:1px solid #75535d;border-radius:10px;color:#fff;padding:12px;font:inherit}.model-auth .model-adult{display:flex;gap:10px;align-items:center}.model-auth .model-adult[hidden]{display:none}.model-auth button{cursor:pointer}.model-close{float:right;background:none;border:0;color:#fff;font-size:25px}.model-tabs{display:flex;gap:10px}.model-tabs button,.model-account{background:transparent;border:1px solid #75535d;color:inherit;padding:9px 12px;border-radius:30px}.model-tabs [aria-pressed=true]{background:#e7b6c4;color:#21121b}.model-auth-submit{border:0;width:100%;justify-content:center}.model-auth-error,#model-chat-status{color:#edbfcc;font-size:14px;line-height:1.5}.model-auth button:disabled{opacity:.6;cursor:wait}#model-chat-status:empty{display:none}.model-account{font-size:12px;max-width:65%;overflow-wrap:anywhere}

/* Active conversation only: leave the copied home page and its media intact. */
#chat[hidden]{display:none!important}
body:has(#chat:not([hidden])){overflow:hidden}
#chat:not([hidden]){
  position:fixed;z-index:12;top:106px;bottom:16px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;width:min(900px,calc(100% - 32px));max-width:none;
  min-height:0;height:calc(100vh - 122px);height:calc(100dvh - 122px);margin:0;
  padding:18px 22px max(16px,env(safe-area-inset-bottom));overflow:hidden;
  border:1px solid #805267;border-radius:24px;background:#190f17;
  box-shadow:0 24px 90px #0009;color:var(--ink,#f6ece7);
}
#chat:not([hidden]) .chat-top{
  flex:0 0 auto;display:grid;grid-template-columns:minmax(80px,1fr) auto minmax(120px,250px);
  align-items:center;gap:10px;margin:0;padding-bottom:12px;border-bottom:1px solid #ffffff12;
  font-size:12px;
}
#chat:not([hidden]) .chat-top>a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chat:not([hidden]) .chat-top button{min-height:36px;padding:7px 12px;white-space:nowrap}
#chat:not([hidden]) .chat-top .model-account{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:11px}
#chat:not([hidden]) .chat-person{
  flex:0 0 auto;display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:12px;
  align-items:center;text-align:left;margin:14px 0 10px;
}
#chat:not([hidden]) #chat-avatar{grid-row:1 / 3;align-self:center}
#chat:not([hidden]) .chat-person .avatar-photo{width:48px;height:48px;margin:0;object-position:center 18%}
#chat:not([hidden]) .chat-person h2{grid-column:2;font-size:23px;line-height:1.2;margin:0 0 3px}
#chat:not([hidden]) .chat-person p{
  grid-column:2;margin:0;font-size:11px;line-height:1.45;color:#bea8b4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#chat:not([hidden]) #chat-tone-bar{
  flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 10px;
}
#chat:not([hidden]) .chat-tone-label{margin-right:3px;font-size:11px;color:#c6abb9}
#chat:not([hidden]) #chat-tone-bar button{
  min-height:31px;padding:5px 13px;border:1px solid #805267;border-radius:20px;
  background:#251820;color:#ead2de;font-size:11px;line-height:1.3;
}
#chat:not([hidden]) #chat-tone-bar button[aria-pressed=true]{background:#e7b6c4;border-color:#e7b6c4;color:#28121e}
#chat:not([hidden]) #messages{
  flex:1 1 auto;min-height:0;max-height:none;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-gutter:stable;padding:12px 5px 12px 0;
  border-top:1px solid #ffffff0d;border-bottom:1px solid #ffffff0d;
}
#chat:not([hidden]) #messages .message{
  display:flex;align-items:flex-start;justify-content:flex-start;gap:9px;
  width:100%;max-width:none;margin:14px 0;padding:0;border:0;border-radius:0;
  background:none;white-space:normal;color:#ead5df;font-size:14px;
}
#chat:not([hidden]) #messages .message.user{justify-content:flex-end;margin-left:0}
#chat:not([hidden]) .chat-message-avatar{
  flex:0 0 34px;width:34px;height:34px;margin-top:18px;object-fit:cover;object-position:center 18%;
  border:1px solid #a7778e;border-radius:50%;
}
#chat:not([hidden]) .chat-message-content{min-width:0;max-width:min(82%,650px)}
#chat:not([hidden]) .message.user .chat-message-content{display:flex;flex-direction:column;align-items:flex-end}
#chat:not([hidden]) .chat-message-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 3px 5px;color:#b49aa8;font-size:10px;line-height:1.4}
#chat:not([hidden]) .message.user .chat-message-meta{justify-content:flex-end}
#chat:not([hidden]) .chat-message-meta time{color:#967f8d;font-size:10px}
#chat:not([hidden]) .chat-message-bubble{
  max-width:100%;padding:12px 15px;border:1px solid #8d5d752b;border-radius:16px 16px 16px 4px;
  background:#2b1b26;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;
}
#chat:not([hidden]) .message.user .chat-message-bubble{border-radius:16px 16px 4px 16px;background:#603148;color:#fff1ee;border-color:#a3638266}
/* Keep plain text messages readable while the chat scripts initialize. */
#chat:not([hidden]) #messages .message:not(:has(.chat-message-content)){display:block;width:auto;max-width:82%;padding:12px 15px;border:1px solid #8d5d752b;border-radius:16px;background:#2b1b26;white-space:pre-wrap}
#chat:not([hidden]) #messages .message.user:not(:has(.chat-message-content)){margin-left:auto;background:#603148;color:#fff1ee}
#chat:not([hidden]) #chat-starters{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:7px;max-height:82px;overflow:auto;margin:10px 0 0;padding:0 0 2px}
#chat:not([hidden]) #chat-starters:empty{display:none}
#chat:not([hidden]) #chat-starters button{max-width:100%;padding:7px 12px;line-height:1.35;font-size:11px;text-align:left}
#chat:not([hidden]) #model-chat-status{flex:0 0 auto;max-height:3.2em;overflow:auto;margin:8px 2px;font-size:12px;line-height:1.5}
#chat:not([hidden]) #model-chat-status:empty{display:none}
#chat:not([hidden]) #composer{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;min-height:58px;margin:10px 0 0;
  padding:6px 7px 6px 14px;border:1px solid #a36c88;border-radius:19px;background:#251820;
}
#chat:not([hidden]) #composer input,#chat:not([hidden]) #composer textarea{
  flex:1;min-width:0;min-height:43px;max-height:112px;margin:0;padding:10px 0;border:0;outline:0;
  background:transparent;color:#fff1ee;font:inherit;font-size:14px;line-height:1.5;resize:none;
}
#chat:not([hidden]) #composer input::placeholder,#chat:not([hidden]) #composer textarea::placeholder{color:#b396a7}
#chat:not([hidden]) #composer button{flex:0 0 43px;display:grid;place-items:center;width:43px;height:43px;margin:0;padding:0;border-radius:13px;background:#e5c5a5;color:#29131f}
#chat:not([hidden]) button:disabled,#chat:not([hidden]) #composer input:disabled{cursor:wait;opacity:.6}
@media(max-width:760px){
  #chat:not([hidden]){top:88px;bottom:8px;width:calc(100% - 16px);height:calc(100vh - 96px);height:calc(100dvh - 96px);padding:12px 12px max(12px,env(safe-area-inset-bottom));border-radius:18px}
  #chat:not([hidden]) .chat-top{grid-template-columns:minmax(80px,1fr) auto;gap:7px 8px;padding-bottom:9px;font-size:11px}
  #chat:not([hidden]) .chat-top .model-account{grid-column:1 / -1;justify-self:stretch;min-height:30px;padding:4px 10px;text-align:left}
  #chat:not([hidden]) .chat-top button{min-height:33px;padding:6px 10px;font-size:11px}
  #chat:not([hidden]) .chat-person{grid-template-columns:42px minmax(0,1fr);gap:0 10px;margin:11px 0 9px}
  #chat:not([hidden]) .chat-person .avatar-photo{width:40px;height:40px}
  #chat:not([hidden]) .chat-person h2{font-size:20px}
  #chat:not([hidden]) .chat-person p{font-size:10px}
  #chat:not([hidden]) .chat-message-content{max-width:87%}
  #chat:not([hidden]) .chat-message-avatar{flex-basis:28px;width:28px;height:28px}
  #chat:not([hidden]) #messages .message{gap:7px;font-size:13px}
  #chat:not([hidden]) .chat-message-bubble{padding:10px 12px}
  #chat:not([hidden]) #chat-starters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:64px;padding-bottom:3px}
  #chat:not([hidden]) #chat-starters button{flex:0 0 auto;max-width:90%;font-size:10px}
  #chat:not([hidden]) #composer{margin-top:8px;min-height:54px;padding:5px 6px 5px 12px;border-radius:17px}
  #chat:not([hidden]) #composer button{width:41px;height:41px;flex-basis:41px}
}
@media(max-height:650px){
  #chat:not([hidden]) .chat-person{grid-template-columns:36px minmax(0,1fr);margin:7px 0}
  #chat:not([hidden]) .chat-person .avatar-photo{width:34px;height:34px}
  #chat:not([hidden]) .chat-person h2{font-size:18px;margin:0}
  #chat:not([hidden]) .chat-person p{display:none}
  #chat:not([hidden]) #chat-avatar{grid-row:1}
  #chat:not([hidden]) #chat-tone-bar{margin-bottom:6px}
  #chat:not([hidden]) #chat-starters{max-height:43px;margin-top:6px}
  #chat:not([hidden]) #model-chat-status{max-height:1.5em;margin:5px 2px}
}
/* Keep the composer reachable in landscape and when the keyboard reduces the viewport. */
@media(max-height:520px){
  #chat:not([hidden]){padding:8px 12px max(8px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
  #chat:not([hidden]) .chat-top{grid-template-columns:minmax(48px,1fr) auto minmax(0,1fr);gap:6px;padding-bottom:5px}
  #chat:not([hidden]) .chat-top button{min-height:28px;padding:4px 8px;font-size:10px}
  #chat:not([hidden]) .chat-top .model-account{grid-column:auto;min-height:28px;padding:4px 6px;white-space:nowrap;font-size:10px}
  #chat:not([hidden]) .chat-person{grid-template-columns:30px minmax(0,1fr);margin:6px 0}
  #chat:not([hidden]) .chat-person .avatar-photo{width:28px;height:28px}
  #chat:not([hidden]) .chat-person h2{font-size:17px}
  #chat:not([hidden]) #chat-tone-bar{gap:6px;margin-bottom:5px}
  #chat:not([hidden]) #chat-tone-bar button{min-height:27px;padding:4px 11px;font-size:10px}
  #chat:not([hidden]) #messages{min-height:48px;padding:4px 2px 4px 0}
  #chat:not([hidden]) #chat-starters{display:none}
  #chat:not([hidden]) #model-chat-status{max-height:1.5em;margin:4px 2px;font-size:11px}
  #chat:not([hidden]) #composer{position:sticky;bottom:0;z-index:2;min-height:46px;margin-top:6px;padding:4px 6px 4px 12px;box-shadow:0 -5px 12px #190f17}
  #chat:not([hidden]) #composer input,#chat:not([hidden]) #composer textarea{min-height:34px;padding:6px 0;font-size:13px}
  #chat:not([hidden]) #composer button{flex-basis:35px;width:35px;height:35px}
}
@media(max-height:360px){
  #chat:not([hidden]) .chat-person{display:none}
  #chat:not([hidden]) #model-chat-status{font-size:10px;margin:3px 2px}
}
@media(max-height:320px){
  #chat:not([hidden]) #chat-tone-bar{display:none}
}