:root{color-scheme:dark;--bg:#101014;--panel:#19191f;--panel2:#202027;--line:#30303a;--text:#f4f1f8;--muted:#a6a2b2;--accent:#b9a0ff;--accent2:#8d6cff;--pink:#f0a6d5}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0%,#26203a 0,transparent 40%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.topbar{height:72px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,72px);background:#101014d9;position:sticky;top:0;z-index:5;backdrop-filter:blur(14px)}.brand{color:var(--text);text-decoration:none;font-size:19px;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#c4a7ff,#e6a7d4);color:#21172e}.top-actions{display:flex;align-items:center;gap:14px}.user-label{color:var(--muted);font-size:13px}.button{border:1px solid var(--line);border-radius:12px;padding:11px 16px;color:var(--text);background:var(--panel2);font-weight:650;transition:.18s}.button:hover{transform:translateY(-1px);filter:brightness(1.12)}.button-primary{background:linear-gradient(120deg,#c0a5ff,#e6a5d2);border:0;color:#21172e}.button-quiet{background:transparent}.full{width:100%;margin-top:22px}.auth-layout{max-width:1160px;min-height:calc(100vh - 125px);margin:auto;padding:70px 28px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(36px,8vw,110px)}.hero-copy h1{font-size:clamp(42px,5.4vw,68px);line-height:1.06;letter-spacing:-3px;margin:22px 0}.hero-copy h1 span{background:linear-gradient(100deg,#c2a7ff,#f2addb);background-clip:text;color:transparent}.hero-copy>p{max-width:510px;color:#b9b4c6;font-size:18px;line-height:1.7}.eyebrow{font-size:11px;letter-spacing:1.7px;color:var(--accent);font-weight:800}.pulse{display:inline-block;width:7px;height:7px;background:#b8ffce;border-radius:50%;margin-right:7px;box-shadow:0 0 12px #b8ffce}.feature-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.feature-pills span{border:1px solid #ffffff18;border-radius:999px;padding:10px 13px;color:#c9c3d5;font-size:12px;background:#ffffff05}.auth-card{border:1px solid #ffffff16;background:linear-gradient(145deg,#201e29ed,#17171def);border-radius:24px;padding:28px;box-shadow:0 24px 80px #0005}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#111116;border-radius:12px;padding:4px;margin-bottom:28px}.auth-tab{border:0;border-radius:9px;background:transparent;color:var(--muted);padding:11px;font-weight:700}.auth-tab.active{background:#30283f;color:#e7dfff}.auth-card h2{font-size:22px;margin:0 0 8px}.muted{color:var(--muted);font-size:14px;line-height:1.55}.auth-card form>p{margin:0 0 22px}.auth-card label{display:block;margin:17px 0 8px;font-size:13px;font-weight:650}.auth-card input,.search-row input{width:100%;background:#111116;border:1px solid var(--line);border-radius:11px;padding:13px 14px;color:var(--text);outline:none}.auth-card input:focus,.search-row input:focus,textarea:focus{border-color:#a58aff}.fine-print{font-size:11px;color:#858091;line-height:1.6}.app-layout{max-width:1450px;min-height:calc(100vh - 130px);margin:auto;display:grid;grid-template-columns:230px 1fr}.sidebar{border-right:1px solid #ffffff12;padding:28px 16px;display:flex;flex-direction:column;gap:8px}.side-heading{font-size:10px;letter-spacing:1.7px;color:#777285;font-weight:800;margin:8px 12px 14px}.side-link{border:0;border-radius:11px;background:transparent;color:#bcb6c9;text-align:left;padding:13px 14px;font-size:13px;font-weight:650}.side-link span{margin-right:9px}.side-link.active,.side-link:hover{background:#292333;color:#e6d9ff}.sidebar-bottom{margin-top:auto;border-top:1px solid #ffffff12;padding:20px 5px 0;display:flex;align-items:center;gap:10px}.mini-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#c0a5ff,#e6a5d2);color:#21172e;font-size:11px;font-weight:900}.sidebar-bottom strong,.sidebar-bottom small{display:block;font-size:12px}.sidebar-bottom small{color:#858091;margin-top:4px}.content{padding:42px clamp(20px,4vw,58px)}.welcome-row h1,.content>div>h1{font-size:clamp(27px,3vw,38px);letter-spacing:-1.4px;margin:12px 0 8px}.welcome-row p{margin-top:0}.search-row{position:relative;max-width:500px;margin:28px 0}.search-row input{padding-left:43px;background:#19191f}.search-icon{position:absolute;left:15px;top:7px;font-size:25px;color:#8d879c}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.character-card{border:1px solid #ffffff14;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,#201e29,#17171c);transition:.2s;display:flex;flex-direction:column;min-width:0}.character-card:hover{transform:translateY(-4px);border-color:#a58aff70}.character-art{height:140px;display:grid;place-items:center;position:relative;overflow:hidden}.character-art:before,.character-art:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}.character-art:before{width:170px;height:170px;right:-20px;top:-60px;background:#ffffff13}.character-art:after{width:100px;height:100px;left:-25px;bottom:-50px;background:#ffffff15}.art-symbol{font-size:54px;position:relative;z-index:1;text-shadow:0 8px 35px #0005}.art-violet{background:linear-gradient(135deg,#544078,#b28bc7)}.art-blue{background:linear-gradient(135deg,#24405d,#80b7c8)}.art-rose{background:linear-gradient(135deg,#6b354e,#dc91b3)}.art-green{background:linear-gradient(135deg,#234a44,#7cba9e)}.art-gold{background:linear-gradient(135deg,#684c2b,#d4b36f)}.art-night{background:linear-gradient(135deg,#292842,#6b70a8)}.character-info{padding:17px;display:flex;flex-direction:column;align-items:flex-start;flex:1}.tag{font-size:10px;letter-spacing:.7px;color:#c8b4ff;text-transform:uppercase;font-weight:800}.character-info h3{margin:8px 0 6px;font-size:17px}.character-info p{font-size:12px;line-height:1.55;color:#aaa4b8;margin:0 0 17px;flex:1}.character-info .button{width:100%;font-size:12px;padding:10px}.history-list{display:grid;gap:10px;margin-top:24px;max-width:850px}.history-item{display:flex;align-items:center;gap:14px;background:#19191f;border:1px solid #ffffff12;border-radius:14px;padding:14px}.history-item .history-meta{flex:1;min-width:0}.history-item strong{display:block;font-size:14px}.history-item small{display:block;color:var(--muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.back-button{border:0;background:transparent;color:#c6b3ff;padding:0 0 18px;font-size:13px}.chat-panel{height:min(690px,calc(100vh - 210px));min-height:470px;border:1px solid #ffffff16;background:#17171d;border-radius:18px;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;align-items:center;gap:12px;padding:17px 20px;border-bottom:1px solid #ffffff12}.character-avatar{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:27px;background:linear-gradient(135deg,#544078,#b28bc7);flex-shrink:0}.character-avatar.small{width:42px;height:42px;font-size:22px}.chat-header h2{font-size:16px;margin:0 0 3px}.chat-header p{margin:0;font-size:11px}.push-right{margin-left:auto;font-size:11px}.messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}.message-row{display:flex;align-items:flex-end;gap:9px;max-width:100%;}.message-row.user-row{align-self:flex-end;flex-direction:row-reverse}.message-row.assistant-row{align-self:flex-start;flex-direction:row}.message-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 34px;overflow:hidden;background-size:cover;background-position:center;font-size:17px;box-shadow:0 2px 8px #0003}.message-avatar.character-avatar{border-radius:50%;width:34px;height:34px;font-size:16px}.message-avatar.user-avatar{background:#393342;color:#eee7ff;border:1px solid #ffffff20}.message{max-width:min(78%,620px);padding:12px 15px;border-radius:16px;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.message.user{background:linear-gradient(120deg,#8d6cff,#ba91e7);color:#17121f;border-bottom-right-radius:5px}.message.assistant{background:#27262f;color:#eee9f6;border-bottom-left-radius:5px}.message .speaker{font-size:10px;font-weight:800;opacity:.7;display:block;margin-bottom:4px}.message-content{white-space:pre-wrap;overflow-wrap:anywhere}.message-form{display:flex;gap:10px;align-items:flex-end;padding:14px;border-top:1px solid #ffffff12}.message-form textarea{resize:none;max-height:130px;flex:1;background:#222129;color:var(--text);border:1px solid #393642;border-radius:12px;padding:13px;outline:none}.send-button{height:44px;width:44px;border:0;border-radius:12px;background:linear-gradient(120deg,#c0a5ff,#e6a5d2);color:#21172e;font-size:20px;font-weight:900}.chat-footnote{text-align:center;font-size:10px;color:#777285;margin:0;padding:0 8px 12px}.empty-state{padding:35px 20px;text-align:center;color:var(--muted);background:#19191f;border:1px dashed #393642;border-radius:14px;font-size:13px}.toast{position:fixed;top:84px;right:20px;max-width:360px;z-index:10050;padding:13px 17px;border-radius:12px;background:#30283f;border:1px solid #7865a0;color:#f2eaff;font-size:13px;box-shadow:0 12px 35px #0005;display:none}.toast.show{display:block}footer{text-align:center;padding:20px;color:#716c7d;font-size:11px}footer span{padding:0 7px;color:#b49aff}
@media(max-width:900px){.auth-layout{grid-template-columns:1fr;max-width:600px;padding-top:42px;gap:30px}.hero-copy h1{font-size:48px}.app-layout{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid #ffffff12;flex-direction:row;padding:12px 18px;align-items:center}.side-heading,.sidebar-bottom{display:none}.side-link{flex:1;text-align:center;padding:12px 8px}.content{padding:28px 18px}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-art{height:120px}}
@media(max-width:540px){.topbar{height:62px;padding:0 16px}.brand{font-size:16px}.user-label{max-width:130px;overflow:hidden;text-overflow:ellipsis}.auth-layout{padding:38px 18px}.hero-copy h1{font-size:42px;letter-spacing:-2px}.hero-copy>p{font-size:15px}.auth-card{padding:21px}.feature-pills span{font-size:10px}.character-grid{grid-template-columns:1fr 1fr;gap:10px}.character-art{height:95px}.art-symbol{font-size:42px}.character-info{padding:12px}.character-info h3{font-size:14px}.character-info p{font-size:11px}.character-info .button{font-size:11px;padding:9px 6px}.content{padding:23px 13px}.chat-panel{height:calc(100vh - 190px);min-height:420px}.chat-header{padding:12px}.chat-header .button{padding:8px;font-size:10px}.messages{padding:13px}.message{max-width:calc(100% - 43px);font-size:12px}.message-avatar,.message-avatar.character-avatar{width:30px;height:30px;flex-basis:30px;font-size:15px}.message-row{gap:7px}.sidebar{padding:9px}.side-link{font-size:11px}}


.genre-filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-12px 0 24px;color:var(--muted);font-size:12px}.genre-filter-row select{max-width:320px;width:100%;background:#19191f;border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--text);outline:none}.history-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}.history-heading h1{font-size:clamp(27px,3vw,38px);letter-spacing:-1.4px;margin:12px 0 8px}.history-heading p{margin-top:0}.button-danger{border-color:#8c4557;color:#ffb8c4;background:#3b2029;font-size:12px;padding:9px 12px}.history-item .button{flex-shrink:0}@media(max-width:540px){.history-item{flex-wrap:wrap}.history-item .history-meta{min-width:55%}.history-item .button{flex:1}.genre-filter-row select{max-width:none}.discover-tip-floating{right:12px;bottom:12px;width:calc(100vw - 24px);gap:11px;padding:12px 42px 12px 12px;border-radius:15px}.discover-tip-icon{flex-basis:42px;height:42px;font-size:23px;border-radius:13px}.discover-tip strong{font-size:12px}.discover-tip p{font-size:11px}}

/* Personalização de personagens */
.avatar-photo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;position:relative;overflow:hidden;color:transparent!important;text-shadow:none!important}
.character-art.avatar-photo{min-height:140px}
.edit-character-btn{width:100%;margin-top:8px;font-size:12px;padding:9px 10px;background:#ffffff06}

/* Editor de nome e foto do personagem */
.editor-overlay{position:fixed;inset:0;z-index:1000;background:#08070dcc;display:grid;place-items:center;padding:18px;backdrop-filter:blur(5px)}
.editor-overlay.hidden{display:none!important}
.editor-card{width:min(100%,480px);max-height:90vh;overflow:auto;background:#1b1922;border:1px solid #ffffff24;border-radius:20px;padding:24px;box-shadow:0 25px 90px #0009;color:var(--text)}
.editor-card h2{margin:0 0 20px;font-size:22px}
.editor-card>label{display:block;margin:0 0 8px;font-size:13px;font-weight:700}
.editor-card input[type=text]{width:100%;background:#111116;border:1px solid #393642;border-radius:11px;padding:13px;color:var(--text);outline:none;margin-bottom:20px}
.editor-photo-row{display:flex;gap:16px;align-items:center;padding:15px;background:#ffffff06;border:1px solid #ffffff12;border-radius:14px}
.editor-preview{width:100px;height:100px;border-radius:18px;flex-shrink:0}
.editor-photo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.file-pick-label{display:inline-flex;align-items:center;cursor:pointer}
.editor-photo-actions .fine-print{margin:0}
.editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
@media(max-width:480px){.editor-card{padding:18px}.editor-photo-row{align-items:flex-start}.editor-preview{width:76px;height:76px}.editor-actions .button{flex:1}}


/* Controle de tela cheia do chat */
.chat-screen-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;margin-left:8px;border:1px solid var(--border-color,rgba(255,255,255,.18));border-radius:12px;background:var(--card-bg,#181818);color:inherit;font-size:24px;cursor:pointer;flex-shrink:0}
body.chat-fullscreen-mode{overflow:hidden!important}
body.chat-fullscreen-mode .chat-container,body.chat-fullscreen-mode .chat-screen,body.chat-fullscreen-mode .conversation-view,body.chat-fullscreen-mode #chat-screen,body.chat-fullscreen-mode [data-chat-view]{position:fixed!important;inset:0!important;z-index:9999!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important;overflow:auto!important;background:var(--bg,#151515)}


/* Chat em tela cheia: usa a estrutura real .chat-panel deste site. */
.chat-screen-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; min-height:42px; padding:6px 10px !important;
  font-size:23px !important; flex-shrink:0; margin-left:auto;
}
.chat-panel.chat-panel-fullscreen {
  position:fixed !important; inset:0 !important; z-index:9999 !important;
  width:100vw !important; height:100vh !important; height:100dvh !important;
  max-width:none !important; max-height:none !important; min-height:0 !important;
  margin:0 !important; border-radius:0 !important; overflow:hidden !important;
  background:#17171d !important;
}
.chat-panel.chat-panel-fullscreen .messages { min-height:0; }
.chat-panel.chat-panel-fullscreen .message-form { padding-bottom:max(14px, env(safe-area-inset-bottom)); }
body.chat-fullscreen-mode { overflow:hidden !important; }
@media(max-width:540px) {
 .chat-panel.chat-panel-fullscreen .chat-header { padding-top:max(12px, env(safe-area-inset-top)); }
 .chat-panel.chat-panel-fullscreen .chat-header .button { font-size:20px !important; }
}


/* Indicador de digitação durante a espera da resposta */
.typing-indicator { display: inline-flex; align-items: center; min-height: 1.3em; color: #c9a8ff; }
.typing-dots-static { display: inline-block; letter-spacing: 3px; font-size: 1.05rem; line-height: 1; animation: typing-pulse 1s ease-in-out infinite; }
@keyframes typing-pulse { 0%,100% { opacity: .45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* Upload de foto da personalidade: funciona em telas grandes e celulares. */
.famous-create-form input[type="file"] { width: 100%; max-width: 620px; padding: 12px; border: 1px solid var(--border, #3a3a42); border-radius: 12px; background: #111114; color: #f5f5f7; box-sizing: border-box; }
.famous-photo-preview-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 8px; }
.famous-photo-preview-wrap img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; border: 1px solid #49414f; }
@media (max-width: 600px) { .famous-create-form input[type="file"] { font-size: 14px; } .famous-photo-preview-wrap img { width: 76px; height: 76px; } }

@media (max-width: 700px) { .story-start-fieldset { grid-template-columns: 1fr; } .story-start-option { min-height: 0; } .famous-create-card { padding: 16px; } }

/* Layout imersivo para configuração da história e prévia ao vivo. */
.famous-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.9fr); gap: 18px; align-items: stretch; margin-top: 18px; }
.famous-layout .famous-create-card { margin: 0; min-width: 0; }
.story-preview-card { padding: 22px; border: 1px solid var(--border-color,rgba(255,255,255,.12)); border-radius: 18px; background: linear-gradient(160deg,#19191f,#111114); min-width: 0; }
.story-preview-card h2 { margin: 0 0 6px; }
.story-preview-chat { margin-top: 18px; border: 1px solid #33333d; border-radius: 17px; overflow: hidden; background: #101014; display: flex; flex-direction: column; min-height: 440px; }
.story-preview-header { display: flex; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid #33333d; }
.story-preview-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#8b5cf6,#e5a4d7); color: white; background-size: cover; background-position: center; font-size: 1.3rem; flex: 0 0 auto; }
.story-preview-avatar.has-photo { color: transparent; }
.story-preview-header strong,.story-preview-header small { display:block; }
.story-preview-header small { color: #a9a9b8; margin-top: 4px; }
.story-preview-body { padding: 24px 16px; flex: 1; }
.story-preview-bubble { display: inline-block; max-width: 95%; padding: 14px; border-radius: 6px 16px 16px 16px; background: #25252f; line-height: 1.55; }
.story-preview-typing { margin-top: 18px; }
.story-preview-typing span { display:inline-block; padding: 10px 14px; border-radius: 14px; background:#25252f; color:#c5a6ff; letter-spacing:4px; animation:typing-pulse 1s ease-in-out infinite; }
.story-preview-input { margin: auto 12px 12px; padding: 14px; border: 1px solid #34343e; border-radius: 12px; color:#858594; display:flex; justify-content:space-between; }
.story-preview-input span { color:#d8a1ee; }
@media (max-width: 1000px) { .famous-layout { grid-template-columns: 1fr; } .story-preview-chat { min-height: 300px; } }

/* Refinamento responsivo dos cartões de início da história */
.famous-layout,
.famous-layout > *,
.famous-create-card,
.famous-create-form,
.story-start-fieldset,
.story-start-option { min-width: 0; }
.famous-create-form input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  width: 18px !important;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 3px 0 0;
  flex: 0 0 18px;
  accent-color: #b68cff;
}
.story-start-option {
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}
.story-start-option > span:last-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.story-start-option strong { line-height: 1.35; }
.story-start-option small { line-height: 1.45; }
.famous-create-form input[type="file"] { max-width: 100%; min-width: 0; }
.famous-create-form > button[type="submit"] { width: 100%; min-height: 48px; justify-self: stretch; }
@media (max-width: 1200px) {
  .famous-layout { grid-template-columns: minmax(0, 1fr); }
  .story-preview-card { order: 2; }
  .story-preview-chat { min-height: 300px; }
}
@media (min-width: 1201px) {
  .famous-layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
}
@media (max-width: 700px) {
  .famous-layout { gap: 14px; }
  .famous-create-card, .story-preview-card { padding: 16px; border-radius: 15px; }
  .story-start-fieldset { grid-template-columns: minmax(0,1fr); width: 100%; }
  .story-start-option { min-height: 72px; padding: 12px; }
  .story-option-icon { flex-basis: 34px; height: 34px; font-size: 1.15rem; }
  .story-start-fieldset legend { font-size: 1.08rem; }
  .famous-create-form input, .famous-create-form select, .famous-create-form textarea { font-size: 16px; }
  .famous-create-form input[type="file"] { font-size: 13px; padding: 9px; }
  .story-preview-chat { min-height: 280px; }
  .story-preview-header { padding: 12px; }
  .story-preview-body { padding: 16px 12px; }
}
@media (max-width: 380px) {
  .famous-create-card, .story-preview-card { padding: 12px; }
  .story-start-option { gap: 8px; padding: 10px; }
  .story-option-icon { flex-basis: 30px; height: 30px; }
}

/* Confirmação de maioridade no criador de histórias */
.adult-confirmation{display:flex;align-items:flex-start;gap:10px;margin:14px 0 8px;font-size:0.92rem;line-height:1.5;color:var(--text,#f4f1fa);cursor:pointer}
.adult-confirmation input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:#b88cff}


/* Botão circular para continuar respostas interrompidas pelo modelo */
.message-row.assistant-row { position: relative; }
.continue-text-btn {
  align-self: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0;
  display: inline-grid; place-items: center; border: 1px solid #51465f; border-radius: 50%;
  background: #25212e; color: #d6baff; font-size: 19px; line-height: 1; cursor: pointer;
  opacity: .78; transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.continue-text-btn:hover { opacity: 1; transform: rotate(35deg); background: #342941; }
.continue-text-btn:disabled { opacity: .55; cursor: wait; transform: none; }
@media(max-width:540px) { .continue-text-btn { width: 28px; height: 28px; flex-basis: 28px; font-size: 18px; } .message-row.assistant-row { gap: 6px; } }


/* Botão para copiar o texto enviado pelo usuário — adição isolada */
.copy-user-text-btn {
  align-self: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0;
  display: inline-grid; place-items: center; border: 1px solid #51465f;
  border-radius: 50%; background: #25212e; color: #d6baff; font-size: 17px;
  line-height: 1; cursor: pointer; opacity: .78;
  transition: opacity .15s ease, background .15s ease, transform .15s ease;
}
.copy-user-text-btn:hover { opacity: 1; background: #342941; transform: translateY(-1px); }
.copy-user-text-btn:focus-visible { outline: 2px solid #b9a0ff; outline-offset: 2px; }
@media(max-width:540px) { .copy-user-text-btn { width: 28px; height: 28px; flex-basis: 28px; font-size: 16px; } }


/* Selo azul decorativo ao lado do nome do personagem no cabeçalho do chat. */
#chat-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #2798f3; color: #fff; font: 800 11px/1 system-ui, sans-serif; box-shadow: 0 0 0 1px rgba(255,255,255,.12); vertical-align: middle; flex: 0 0 16px; }


/* Memória persistente por conversa */
.chat-panel{position:relative}
.character-memory-panel{padding:10px 16px;border:1px solid #514465;border-radius:14px;background:#1b1a22;flex-shrink:0}
.character-memory-panel[open]{position:absolute;z-index:40;top:76px;left:14px;right:14px;max-height:calc(100% - 155px);overflow-y:auto;padding:16px;box-shadow:0 18px 55px #000c;background:#211e2a}
.character-memory-panel summary{cursor:pointer;color:#d9c8ff;font-size:12px;font-weight:750;list-style-position:inside;padding-right:36px}
.memory-close-btn{display:none}
.character-memory-panel[open] .memory-close-btn{display:grid;place-items:center;position:absolute;right:10px;top:8px;width:30px;height:30px;border:1px solid #ffffff24;border-radius:9px;background:#ffffff0b;color:#f4eaff;font-size:23px;line-height:1}
.memory-close-btn:hover{background:#4a354f}

.memory-help{margin:8px 0;font-size:11px;line-height:1.45;color:var(--muted,#aaa)}
#character-memory-input{display:block;width:100%;min-height:66px;resize:vertical;padding:10px 12px;border:1px solid #393642;border-radius:10px;background:#121218;color:var(--text,#eee);font:inherit;font-size:12px;line-height:1.5;outline:none}
#character-memory-input:focus{border-color:#a58aff}
.memory-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.memory-actions .button{padding:7px 11px;font-size:11px}
.memory-save-status{font-size:10px;color:#9b91ac}
.regenerate-text-btn{align-self:center;flex:0 0 30px;width:30px;height:30px;padding:0;display:inline-grid;place-items:center;border:1px solid #51465f;border-radius:50%;background:#25212e;color:#d6baff;font-size:19px;line-height:1;cursor:pointer;opacity:.78;transition:opacity .15s ease,background .15s ease,transform .15s ease}
.regenerate-text-btn:hover{opacity:1;background:#342941;transform:rotate(-25deg)}
.regenerate-text-btn:disabled{opacity:.5;cursor:wait}
@media(max-width:540px){.character-memory-panel{padding:9px 12px}.memory-actions .button{padding:7px 9px}.regenerate-text-btn{width:28px;height:28px;flex-basis:28px;font-size:17px}.message-row{gap:5px}}


/* Controles de tamanho do texto do chat */
.message { font-size: var(--chat-font-size, 13px); }
.chat-font-controls { display:flex; align-items:center; gap:4px; margin-left:auto; }
.chat-font-controls .button { padding:8px 9px; font-size:12px; min-width:35px; }
.chat-font-controls .button:disabled { opacity:.4; cursor:not-allowed; }
.chat-header .push-right { margin-left:0; }
@media(max-width:540px) { .chat-font-controls { gap:2px; } .chat-font-controls .button { padding:7px 6px; min-width:31px; font-size:11px; } .chat-header { gap:7px; } }


/* Indicador animado ao lado da mensagem enviada pelo usuário */
.user-message-loading{align-self:center;flex:0 0 9px;width:9px;height:9px;margin:0 2px 2px 0;display:inline-flex;align-items:center;justify-content:center}.user-message-loading span{display:block;width:8px;height:8px;border-radius:50%;background:#c9adff;box-shadow:0 0 0 3px #c9adff20;animation:user-message-pulse 1s ease-in-out infinite}@keyframes user-message-pulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}

/* Pontinhos de digitação alinhados e estáveis */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5em;
  min-height: 1.5em;
  vertical-align: middle;
  line-height: 1;
}
.typing-dots-static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 1.2em;
  font-size: 0;
  letter-spacing: 0;
  line-height: 1;
  transform: none;
}
.typing-dots-static::before {
  content: '•••';
  display: block;
  font-size: 1.05rem;
  letter-spacing: 3px;
  line-height: 1;
  white-space: nowrap;
  animation: typing-pulse-fixed 1s ease-in-out infinite;
}
@keyframes typing-pulse-fixed {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}


/* Botão circular de reutilizar mensagem do usuário */
.user-retry-btn{align-self:center;flex:0 0 30px;width:30px;height:30px;padding:0;display:inline-grid;place-items:center;border:1px solid #51465f;border-radius:50%;background:#25212e;color:#d6baff;font-size:19px;line-height:1;cursor:pointer;opacity:.82;transition:opacity .15s ease,background .15s ease,transform .15s ease}
.user-retry-btn:hover{opacity:1;background:#342941;transform:rotate(-25deg)}
.user-retry-btn:focus-visible{outline:2px solid #b9a0ff;outline-offset:2px}
@media(max-width:540px){.user-retry-btn{width:28px;height:28px;flex-basis:28px;font-size:17px}}

/* Corrige quebra de linha dos pontos e do nome dentro do balão de digitação */
.message.assistant .speaker{overflow-wrap:normal;word-break:normal;white-space:normal;max-width:100%}
.typing-indicator{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:3.2em;min-width:3.2em;max-width:3.2em;height:1.5em;white-space:nowrap;overflow:visible;vertical-align:middle;line-height:1}
.typing-dots-static{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;width:3.2em;min-width:3.2em;height:1.2em;white-space:nowrap;overflow:visible;word-break:keep-all;overflow-wrap:normal;line-height:1}
.typing-dots-static::before{content:'•••';display:block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;font-size:1.05rem;letter-spacing:3px;line-height:1;animation:typing-pulse-fixed 1s ease-in-out infinite}


/* Botões circulares de reutilizar e copiar nas mensagens do usuário */
.message-row.user-row .user-retry-btn,
.message-row.user-row .copy-user-text-btn {
  box-sizing:border-box; flex:0 0 34px; width:34px; height:34px; min-width:34px;
  padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #494154; border-radius:50%; background:#211f29; color:#c6a9ff;
  align-self:center; line-height:1; font-size:17px; margin:0 2px;
}
.message-row.user-row .user-retry-btn:hover,
.message-row.user-row .copy-user-text-btn:hover { background:#30283f; border-color:#8d6cff; }
.typing-indicator { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; min-width:3.2em; }
.typing-dots-static { display:inline-block; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; letter-spacing:3px; line-height:1.2; }

/* Narração de roleplay e ditado por voz */
.roleplay-narration{color:#a9a6b2;font-style:italic;opacity:.84;font-weight:400}
.message.user .roleplay-narration{color:#e2d9f0;opacity:.9}
.voice-input-btn{height:44px;min-width:44px;border:1px solid #393642;border-radius:12px;background:#222129;color:var(--text);font-size:18px;display:grid;place-items:center;flex:0 0 44px}
.voice-input-btn.recording{background:#743747;border-color:#d66b86;animation:voicePulse 1s ease-in-out infinite alternate}
@keyframes voicePulse{from{box-shadow:0 0 0 0 #e86d8b44}to{box-shadow:0 0 0 6px #e86d8b12}}
@media(max-width:540px){.voice-input-btn{min-width:38px;width:38px;flex-basis:38px;height:42px}}

/* Botão * para escrever ações e pensamentos no formato de roleplay */
.asterisks-input-btn{flex:0 0 44px;width:44px;height:44px;border:1px solid #514568;border-radius:50%;background:#24212c;color:#eee5ff;font-size:27px;font-weight:700;line-height:1;display:grid;place-items:center;padding:0;touch-action:manipulation}
.asterisks-input-btn:hover,.asterisks-input-btn:focus-visible{border-color:#bd9bff;background:#30283f;outline:none}
.roleplay-narration{color:#aaa6b4;font-style:italic;opacity:.9}
@media(max-width:540px){.message-form{gap:7px;padding:10px}.asterisks-input-btn{flex-basis:40px;width:40px;height:40px;font-size:25px}.send-button{flex:0 0 44px}}


/* Login com Google */
.google-login-button { display:flex; align-items:center; justify-content:center; gap:11px; background:#fff; color:#242424; border:1px solid #dadce0; min-height:46px; }
.google-login-button:hover { background:#f7f7f7; }
.google-login-button:disabled { opacity:.65; cursor:wait; }
.google-g { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-weight:800; font-family:Arial,sans-serif; font-size:19px; color:#4285f4; }


/* FamaChat — área de autenticação profissional */
:root {
  --accent: #c6a5ff;
  --accent2: #9667ff;
  --pink: #f0a8dc;
}
body {
  background:
    radial-gradient(ellipse at 8% 20%, rgba(116, 67, 180, .19), transparent 38%),
    radial-gradient(ellipse at 92% 78%, rgba(77, 61, 159, .13), transparent 34%),
    #0c0b11;
}
.topbar {
  background: rgba(12, 11, 17, .86);
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.brand-mark {
  border-radius: 12px;
  box-shadow: 0 5px 22px rgba(185,145,255,.22);
}
.auth-layout {
  max-width: 1240px;
  min-height: calc(100vh - 130px);
  padding: 64px 34px 78px;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .82fr);
  gap: clamp(48px, 7vw, 100px);
}
.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(198,165,255,.2);
  background: rgba(198,165,255,.07);
  padding: 10px 13px;
  border-radius: 999px;
  letter-spacing: 1.45px;
}
.hero-copy h1 {
  font-size: clamp(48px, 5.2vw, 72px);
  letter-spacing: -3.5px;
  line-height: 1.02;
  margin: 27px 0 22px;
}
.hero-copy h1 span {
  background: linear-gradient(100deg, #c9aaff 5%, #f0b3e1 56%, #a8a2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-copy > p {
  max-width: 500px;
  color: #b9b4c8;
  font-size: 17px;
  line-height: 1.8;
}
.feature-pills {
  gap: 9px;
  margin-top: 30px;
}
.feature-pills span {
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  padding: 10px 12px;
  border-radius: 999px;
}
.auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.105);
  background: linear-gradient(155deg, rgba(31,27,43,.98), rgba(17,16,24,.98) 68%);
  border-radius: 26px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 28px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207,174,255,.65), transparent);
}
.auth-card-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  color: #f7f3ff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.auth-card-brand-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: #20162e;
  background: linear-gradient(135deg, #d7b7ff, #e9b2df);
}
.secure-label {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 1px;
  color: #b7a3df;
  border: 1px solid rgba(198,165,255,.18);
  border-radius: 999px;
  padding: 6px 8px;
}
.auth-tabs {
  background: #100f16;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 13px;
  margin-bottom: 27px;
}
.auth-tab {
  padding: 12px 10px;
  font-size: 13px;
  transition: background .18s, color .18s;
}
.auth-tab.active {
  background: linear-gradient(120deg, rgba(180,143,255,.24), rgba(232,163,214,.13));
  color: #f2eaff;
  box-shadow: inset 0 0 0 1px rgba(198,165,255,.11);
}
.auth-card h2 {
  font-size: 25px;
  letter-spacing: -.7px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.auth-card form > p.muted {
  margin-bottom: 24px;
}
.auth-card label {
  margin: 17px 0 8px;
  color: #e4dfed;
  font-size: 12px;
}
.auth-card input {
  min-height: 47px;
  border-radius: 12px;
  background: rgba(9,8,14,.72);
  border-color: rgba(255,255,255,.12);
  padding: 13px 14px;
  transition: border-color .18s, box-shadow .18s;
}
.auth-card input:focus {
  border-color: #b99aff;
  box-shadow: 0 0 0 3px rgba(185,154,255,.12);
}
.auth-card .button {
  min-height: 47px;
  border-radius: 12px;
  font-size: 13px;
}
.auth-card .button-primary {
  background: linear-gradient(115deg, #d0b4ff, #e9b2df);
  box-shadow: 0 8px 24px rgba(168,126,240,.16);
}
.auth-card .button-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(168,126,240,.23);
}
.auth-card .full {
  margin-top: 13px;
}
.google-login-button {
  background: #fff !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
  box-shadow: none !important;
}
.google-login-button:hover { background: #f7f7f7 !important; }
.auth-card .fine-print {
  margin-top: 18px;
  font-size: 10px;
  text-align: center;
  color: #898398;
}
footer {
  padding: 19px 20px 24px;
  color: #777184;
  letter-spacing: .1px;
}
footer span { color: #c5a4ff; }
@media (max-width: 900px) {
  .auth-layout {
    grid-template-columns: 1fr;
    max-width: 610px;
    gap: 34px;
    padding: 42px 22px 58px;
  }
  .hero-copy h1 {
    font-size: clamp(42px, 9vw, 58px);
    letter-spacing: -2.5px;
  }
  .hero-copy > p { font-size: 15px; }
  .auth-card { padding: 25px; }
}
@media (max-width: 480px) {
  .auth-layout { padding: 30px 15px 42px; gap: 27px; }
  .hero-copy h1 { font-size: 40px; }
  .feature-pills span { font-size: 10px; padding: 8px 10px; }
  .auth-card { border-radius: 21px; padding: 21px 18px; }
  .auth-card h2 { font-size: 22px; }
  .secure-label { font-size: 8px; }
}

/* Campo de senha com controle acessível para mostrar/ocultar */
.password-field{position:relative;display:flex;align-items:center;width:100%}
.auth-card .password-field input{padding-right:52px}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:9px;background:transparent;color:#aaa4b8;cursor:pointer}
.password-toggle:hover{background:#ffffff0b;color:#eee7ff}
.password-toggle:focus-visible{outline:2px solid #a58aff;outline-offset:2px}
.password-toggle .eye-icon{width:20px;height:20px;display:block}
.password-toggle:hover{transform:translateY(-50%)}


/* Correções visuais FamaChat: balões translúcidos e dimensões estáveis */
.chat-panel { min-width: 0; }
.messages { min-width: 0; align-items: stretch; }
.message-row { min-width: 0; width: 100%; }
.message-row.user-row { justify-content: flex-start; }
.message-row.assistant-row { justify-content: flex-start; }
.message {
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  max-width: min(78%, 620px);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.075);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.message.user {
  background: linear-gradient(120deg, rgba(141,108,255,.72), rgba(186,145,231,.68));
  color: #f8f3ff;
  border-color: rgba(218,197,255,.16);
}
.message.assistant {
  background: rgba(70,66,82,.34);
  color: #eee9f6;
  border-color: rgba(255,255,255,.075);
}
.message-content { display: block; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.roleplay-narration {
  color: rgba(220,214,234,.76);
  font-style: italic;
  font-weight: 400;
}
.message.user .roleplay-narration { color: rgba(250,244,255,.88); }
@media (max-width: 540px) {
  .message { max-width: calc(100% - 40px); }
  .message-row.user-row { justify-content: flex-start; }
}


/* Correção final do layout dos balões: evita balões estreitos e muito altos. */
.messages { align-items: stretch; }
.message-row { display: flex; width: 100%; min-width: 0; }
.message-row.assistant-row { justify-content: flex-start; }
.message-row.user-row { justify-content: flex-end; }
.message {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: min(78%, 620px);
  white-space: normal;
  overflow-wrap: anywhere;
}
.message .speaker { display: block; margin-bottom: 8px; }
.message .message-content { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user {
  background: linear-gradient(120deg, rgba(141,108,255,.82), rgba(186,145,231,.78));
  color: #f8f4ff;
  border: 1px solid rgba(255,255,255,.12);
}
.message.assistant {
  background: rgba(48,46,58,.72);
  color: #eee9f6;
  border: 1px solid rgba(255,255,255,.09);
}
.message .roleplay-narration {
  color: rgba(220,214,234,.76);
  font-style: italic;
  font-weight: 400;
}
.message.user .roleplay-narration { color: rgba(250,244,255,.9); }
@media (max-width: 540px) {
  .message { max-width: calc(100% - 38px); }
  .message-row.user-row { justify-content: flex-end; }
}


/* Ajuste final: mensagens do usuário ficam alinhadas à direita,
   com o avatar "Você" à esquerda do balão, sem inverter a ordem visual. */
.messages > .message-row.user-row {
  align-self: stretch;
  width: 100%;
  flex-direction: row;
  justify-content: flex-end;
}
.messages > .message-row.user-row .message {
  margin-left: 0;
  margin-right: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 16px;
}
.messages > .message-row.user-row .message-avatar {
  order: 0;
}
.messages > .message-row.user-row .message {
  order: 1;
}
@media (max-width: 540px) {
  .messages > .message-row.user-row {
    justify-content: flex-end;
  }
  .messages > .message-row.user-row .message {
    max-width: calc(100% - 40px);
  }
}


/* Avatar compacto do usuário: evita que "Você" estoure o círculo. */
.message-avatar.user-avatar {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
}
.message-avatar.user-avatar::before {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #eee7ff;
}
.message-avatar.user-avatar::after {
  content: "";
  width: 17px;
  height: 9px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px 10px 5px 5px;
  background: #eee7ff;
}

/* Histórico: foto real do personagem e ações organizadas ao lado de Continuar. */
.history-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #f4efff;
  font-size: 27px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.history-actions .button { white-space: nowrap; }
@media (max-width: 540px) {
  .history-item { align-items: center; gap: 10px; }
  .history-avatar { width: 46px; height: 46px; flex-basis: 46px; border-radius: 13px; }
  .history-actions { width: 100%; margin-left: 56px; }
  .history-actions .button { flex: 1; padding: 9px 8px; }
}


/* Botão de tela cheia e painel expandido para a estrutura real do FamaChat. */
.chat-header { flex-wrap: wrap; }
.chat-fullscreen-btn {
  flex: 0 0 42px; min-width: 42px; min-height: 42px;
  padding: 7px !important; margin-left: 0; font-size: 23px !important; line-height: 1;
}
.chat-panel.chat-panel-fullscreen {
  position: fixed !important; inset: 0 !important; z-index: 9999 !important;
  width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important; min-height: 0 !important;
  margin: 0 !important; border-radius: 0 !important; overflow: hidden !important;
  background: #17171d !important;
}
.chat-panel.chat-panel-fullscreen .messages { min-height: 0; }
.chat-panel.chat-panel-fullscreen .message-form {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}
body.chat-fullscreen-mode { overflow: hidden !important; }
@media (max-width: 540px) {
  .chat-panel.chat-panel-fullscreen .chat-header {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}


/* Correção de responsividade para celulares estreitos */
html, body { max-width: 100%; overflow-x: hidden; }
.app-layout, .content, .history-list, .history-item { min-width: 0; }
.history-item { max-width: 100%; }
.history-item .history-meta { overflow-wrap: anywhere; }
.history-actions { min-width: 0; max-width: 100%; }
.history-actions .button { min-width: 0; }
.topbar { min-width: 0; gap: 10px; }
.top-actions { min-width: 0; gap: 8px; }
.user-label { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 540px) {
  .content { padding: 28px 14px; }
  .history-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 12px;
  }
  .history-avatar { grid-column: 1; grid-row: 1; }
  .history-item .history-meta { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; }
  .history-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin: 0;
  }
  .history-actions .button {
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    padding: 10px 6px;
    font-size: 13px;
  }
  .topbar { padding: 0 14px; }
  .brand { gap: 8px; font-size: 17px; }
  .brand-mark { flex: 0 0 34px; }
}
@media (max-width: 370px) {
  .user-label { display: none; }
  .history-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Editor de personagem acessível também em telas pequenas */
.edit-character-btn{margin-top:8px;width:100%;font-size:12px;padding:9px 10px;background:#ffffff06}
.editor-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:18px;background:#08070dbd;backdrop-filter:blur(8px)}
.editor-card{width:min(100%,460px);max-height:90vh;overflow:auto;padding:22px;border:1px solid #ffffff20;border-radius:20px;background:#19181f;box-shadow:0 25px 80px #0008}
.editor-card h2{margin:0 0 18px;font-size:22px}
.editor-card>label{display:block;margin:0 0 8px;font-size:13px;font-weight:700}
.editor-card>input{width:100%;padding:12px;border:1px solid #393642;border-radius:11px;background:#111116;color:var(--text);margin-bottom:18px}
.editor-photo-row{display:flex;align-items:center;gap:14px}
.editor-preview{flex:0 0 76px;width:76px;height:76px;background:linear-gradient(135deg,#544078,#b28bc7);background-size:cover;background-position:center}
.editor-photo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.editor-photo-actions .fine-print{flex-basis:100%;margin:2px 0 0}
.editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
@media(max-width:400px){.editor-card{padding:17px}.editor-actions{flex-direction:column-reverse}.editor-actions .button{width:100%}.editor-photo-row{align-items:flex-start;flex-direction:column}}


/* Tela cheia real no celular: ocupa o viewport visível e remove margens do layout */
.chat-panel.chat-panel-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
body.chat-fullscreen-mode {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.chat-panel.chat-panel-fullscreen .chat-header {
  flex: 0 0 auto;
  padding-top: max(10px, env(safe-area-inset-top)) !important;
}
.chat-panel.chat-panel-fullscreen .messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.chat-panel.chat-panel-fullscreen .message-form {
  flex: 0 0 auto;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}
.chat-panel.chat-panel-fullscreen .chat-footnote {
  flex: 0 0 auto;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}
@media (max-width: 600px) {
  .chat-panel.chat-panel-fullscreen {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }
  .chat-panel.chat-panel-fullscreen .chat-header {
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .chat-panel.chat-panel-fullscreen .messages {
    padding: 10px !important;
  }
  .chat-panel.chat-panel-fullscreen .message-form {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* Tela cheia mobile V2: remover "Nova história" e reduzir o espaço superior */
@media (max-width: 600px) {
  .chat-panel.chat-panel-fullscreen {
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    height: 100vh !important;
    padding-top: 0 !important;
  }
  .chat-panel.chat-panel-fullscreen .chat-header {
    padding-top: max(4px, env(safe-area-inset-top)) !important;
    padding-bottom: 8px !important;
    row-gap: 6px !important;
  }
  .chat-panel.chat-panel-fullscreen #new-chat-btn {
    display: none !important;
  }
  .chat-panel.chat-panel-fullscreen .chat-header {
    grid-template-rows: auto auto !important;
  }
  .chat-panel.chat-panel-fullscreen .chat-header > .chat-font-controls {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
  }
  .chat-panel.chat-panel-fullscreen .chat-header > #chat-fullscreen-btn {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center;
  }
  .chat-panel.chat-panel-fullscreen .messages {
    padding-top: 8px !important;
  }
}
/* Evita que a regra de tela cheia deixe espaço reservado para Nova história */
.chat-panel.chat-panel-fullscreen #new-chat-btn {
  display: none !important;
}


/* Correção: manter o campo de mensagem visível na parte inferior em tela cheia */
.chat-panel.chat-panel-fullscreen {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
}
.chat-panel.chat-panel-fullscreen .messages {
  display: flex !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
}
.chat-panel.chat-panel-fullscreen #message-form,
.chat-panel.chat-panel-fullscreen .message-form {
  display: flex !important;
  position: relative !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: auto !important;
  z-index: 5 !important;
  background: #17171d !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}
.chat-panel.chat-panel-fullscreen .chat-footnote {
  display: block !important;
  flex: 0 0 auto !important;
}
@media (max-width: 600px) {
  .chat-panel.chat-panel-fullscreen .messages {
    padding-bottom: 10px !important;
  }
  .chat-panel.chat-panel-fullscreen #message-form textarea,
  .chat-panel.chat-panel-fullscreen .message-form textarea {
    min-height: 48px !important;
    max-height: 120px !important;
  }
}

/* Indicador visual de presença no avatar do personagem (somente aparência). */
.chat-avatar-status{position:relative;display:inline-flex;flex:0 0 auto;width:42px;height:42px}
.chat-avatar-status #chat-avatar{width:42px;height:42px}
.online-status-dot{position:absolute;right:-1px;top:-1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #17171d;box-shadow:0 0 0 1px rgba(34,197,94,.22);z-index:2}
@media(max-width:540px){.chat-avatar-status,.chat-avatar-status #chat-avatar{width:42px;height:42px}.online-status-dot{width:11px;height:11px}}


/* Oculta somente as imagens decorativas dos cards de personagens personalizados.
   Mantém os títulos, descrições e os botões "Começar história" e "Editar foto / nome". */
#celebrity-grid .character-art {
  display: none !important;
}


/* Oculta a lista de cards de personagens personalizados, mantendo o formulário
   para criar uma nova história e os demais recursos do FamaChat. */
#celebrity-grid {
  display: none !important;
}

/* Ações de personagem no histórico */
.history-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.history-actions [data-edit-character]{font-size:12px;padding:9px 12px}
@media(max-width:540px){.history-actions{width:100%}.history-actions .button{flex:1}}


/* Redesign da área Descobrir inspirado na referência visual */
#discover-view .discover-hero-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:28px;align-items:center;margin-bottom:24px}
#discover-view .welcome-row h1{font-size:clamp(32px,3.3vw,46px);line-height:1.12;letter-spacing:-1.7px;margin:14px 0 8px}
#discover-view .welcome-row h1 span{background:linear-gradient(100deg,#c3a2ff,#f1a2dc);-webkit-background-clip:text;background-clip:text;color:transparent}
#discover-view .welcome-row p{font-size:15px;margin:0}
.discover-tip{display:flex;align-items:center;gap:14px;min-height:88px;padding:15px 48px 15px 16px;border:1px solid #a783d655;border-radius:18px;background:linear-gradient(115deg,rgba(41,29,59,.97),rgba(23,20,31,.97));box-shadow:0 16px 48px #0008,inset 0 1px #ffffff08;backdrop-filter:blur(16px)}
.discover-tip-floating{position:fixed;right:24px;bottom:24px;z-index:30;width:min(390px,calc(100vw - 32px));min-height:0;animation:discover-tip-in .22s ease-out}
.discover-tip-copy{min-width:0}
.discover-tip-close{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #ffffff18;border-radius:9px;background:#ffffff08;color:#c9bddc;font-size:20px;line-height:1;transition:background .15s,color .15s}
.discover-tip-close:hover{background:#ffffff18;color:#fff}
@keyframes discover-tip-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.discover-tip-icon{display:grid;place-items:center;flex:0 0 64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#b58aff,#e9a1df);color:#21152d;font-size:32px;box-shadow:0 8px 28px #a777ff30}
.discover-tip strong{font-size:15px;display:block;margin-bottom:5px}
.discover-tip p{font-size:12px;color:#b7aecb;line-height:1.5;margin:0}
#discover-view .discover-tools{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(300px,.8fr);gap:26px;align-items:center;margin-bottom:22px}
#discover-view .search-row{max-width:none;margin:0;position:relative}
#discover-view .search-row input{height:52px;padding-left:48px;border-radius:15px;background:#191720;border-color:#4b3c61;font-size:14px}
#discover-view .search-icon{top:10px;left:17px;color:#b49ae8}
#discover-view .genre-filter-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin:0;color:#c5bdd5;font-size:13px}
#discover-view .genre-filter-row label{white-space:nowrap}
#discover-view .genre-filter-row select{max-width:none;height:52px;border-radius:15px;background:#191720;border-color:#4b3c61;font-size:14px}
#discover-view .character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#discover-view .character-card{border-radius:20px;border-color:#7d62a638;background:linear-gradient(155deg,#1b1924,#111116);box-shadow:0 8px 24px #0002;transition:transform .2s,border-color .2s,box-shadow .2s}
#discover-view .character-card:hover{transform:translateY(-4px);border-color:#c19affaa;box-shadow:0 12px 32px #8d6cff18}
#discover-view .character-art{height:132px;isolation:isolate}
#discover-view .character-art:before{width:200px;height:200px;right:-22px;top:-100px;background:#ffffff18;z-index:-1}
#discover-view .character-art:after{width:100px;height:100px;left:-28px;bottom:-56px;background:#ffffff15;z-index:-1}
#discover-view .art-symbol{font-size:50px;color:#fff;filter:drop-shadow(0 4px 14px #17101f80)}
#discover-view .character-info{padding:17px 18px 18px}
#discover-view .tag{font-size:10px;letter-spacing:.55px;padding:5px 9px;border-radius:999px;background:#170f2a55;border:1px solid #e3c7ff40;color:#d7c1ff}
#discover-view .character-info h3{font-size:19px;letter-spacing:-.3px;margin:10px 0 6px}
#discover-view .character-info p{font-size:13px;line-height:1.55;color:#c0bacd;margin-bottom:16px;min-height:40px}
#discover-view .character-info .button{border-radius:12px;min-height:42px;font-size:13px;padding:11px;background:linear-gradient(100deg,#b99aff,#f0a1dc);color:#20152b}
@media(max-width:1100px){#discover-view .discover-hero-row{grid-template-columns:1fr;gap:18px}.discover-tip{min-height:88px}#discover-view .discover-tools{grid-template-columns:1fr;gap:14px}#discover-view .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#discover-view .welcome-row h1{font-size:31px}#discover-view .discover-tools{gap:12px}#discover-view .genre-filter-row{grid-template-columns:1fr;gap:7px}#discover-view .character-grid{grid-template-columns:1fr 1fr;gap:10px}#discover-view .character-art{height:95px}#discover-view .art-symbol{font-size:40px}#discover-view .character-info{padding:12px}#discover-view .character-info h3{font-size:15px}#discover-view .character-info p{font-size:11px;min-height:50px}#discover-view .character-info .button{font-size:11px;padding:9px 5px}.discover-tip{padding:15px;gap:12px}.discover-tip-icon{flex-basis:48px;height:48px;font-size:25px}.discover-tip strong{font-size:13px}.discover-tip p{font-size:11px}}


/* Ilustrações dos personagens na área Descobrir */
#discover-view .character-art-illustrated{position:relative;overflow:hidden;background:#201b2d}
#discover-view .character-art-illustrated:before{content:"";position:absolute;inset:0;width:auto;height:auto;right:0;top:0;border-radius:0;filter:none;background:linear-gradient(0deg,rgba(12,10,20,.18),transparent 55%);z-index:1;pointer-events:none}
#discover-view .character-art-illustrated:after{display:none}
#discover-view .character-art-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block;z-index:0}
#discover-view .character-art-illustrated .art-symbol{display:none}

/* Ilustrações dos personagens também aparecem no histórico e no chat. */
.history-avatar { background-size: cover; background-position: center 30%; background-repeat: no-repeat; }
.chat-avatar-status .character-avatar, .message-avatar.character-avatar { background-size: cover; background-position: center 30%; background-repeat: no-repeat; }


/* Ações das mensagens: barra discreta, sem divisor pesado nem símbolos desalinhados. */
.message-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
.message-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: .68;
  transition: background .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease;
}
.message-action-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.message-action-btn:hover {
  background: #b9a0ff20;
  border-color: #b9a0ff35;
  opacity: 1;
  transform: translateY(-1px);
}
.message.user .message-action-btn:hover {
  background: #ffffff38;
  border-color: #21172f20;
}
.message-action-btn:focus-visible {
  outline: 2px solid #c6a9ff;
  outline-offset: 1px;
  opacity: 1;
}
@media(max-width:540px) {
  .message-actions { gap: 3px; margin-top: 6px; }
  .message-action-btn { flex-basis: 28px; width: 28px; height: 28px; }
  .message-action-btn svg { width: 15px; height: 15px; }
}


/* Filtro de gêneros — acabamento visual integrado ao FamaChat */
.genre-filter-row {
  gap: 14px;
  margin: -12px 0 24px;
  color: #c4bdd3;
}
.genre-filter-row label {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .15px;
}
.genre-filter-row select {
  appearance: none;
  -webkit-appearance: none;
  width: min(100%, 320px);
  min-height: 46px;
  padding: 12px 44px 12px 15px;
  border: 1px solid #514263;
  border-radius: 14px;
  color: #f4efff;
  background-color: #1b1823;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d7baff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  box-shadow: 0 5px 18px #00000018;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.genre-filter-row select:hover {
  border-color: #8f72b7;
  background-color: #211b2b;
}
.genre-filter-row select:focus-visible {
  outline: none;
  border-color: #c3a0ff;
  box-shadow: 0 0 0 3px #b99aff26, 0 8px 22px #00000020;
}
.genre-filter-row select option {
  background: #1b1823;
  color: #f4efff;
  padding: 10px;
}
.genre-filter-row select option:checked {
  background: #a987e8;
  color: #21172e;
  font-weight: 700;
}
@media (max-width: 540px) {
  .genre-filter-row {
    align-items: stretch;
    gap: 8px;
  }
  .genre-filter-row label {
    width: 100%;
  }
  .genre-filter-row select {
    width: 100%;
    max-width: none;
    min-height: 45px;
  }
}


/* Barra de busca e filtros da página Descobrir — layout inspirado no mockup */
#discover-view .discover-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, .56fr) auto;
  gap: 22px;
  align-items: end;
  margin: 24px 0 26px;
}
#discover-view .search-row {
  max-width: none;
  width: 100%;
  margin: 0;
  position: relative;
}
#discover-view .search-row input {
  width: 100%;
  height: 54px;
  padding: 0 18px 0 48px;
  border: 1px solid #514064;
  border-radius: 16px;
  background: linear-gradient(120deg, #191720, #15141b);
  color: var(--text);
  font-size: 14px;
  box-shadow: inset 0 1px 0 #ffffff05, 0 5px 20px #00000012;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#discover-view .search-row input::placeholder { color: #8f899f; }
#discover-view .search-row input:hover { border-color: #796094; }
#discover-view .search-row input:focus {
  border-color: #b99aff;
  box-shadow: 0 0 0 3px #b99aff20, 0 8px 24px #00000020;
  background: #1b1823;
}
#discover-view .search-icon {
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: #c7a5ff;
  pointer-events: none;
}
#discover-view .genre-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-width: 0;
  margin: 0;
  align-items: stretch;
  color: #c5bdd5;
}
#discover-view .genre-filter-row label {
  padding-left: 4px;
  color: #a99abb;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.8px;
}
#discover-view .genre-filter-row select {
  width: 100%;
  max-width: none;
  height: 54px;
  padding: 0 44px 0 16px;
  border: 1px solid #514064;
  border-radius: 16px;
  background-color: #191720;
  color: #f4efff;
  font-size: 14px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 #ffffff05, 0 5px 20px #00000012;
}
#discover-view .genre-filter-row select:hover {
  border-color: #8f72b7;
  background-color: #211b2b;
}
#discover-view .genre-filter-row select:focus-visible {
  outline: none;
  border-color: #c3a0ff;
  box-shadow: 0 0 0 3px #b99aff26, 0 8px 22px #00000020;
}
#discover-view .clear-discover-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  margin-bottom: 2px;
  padding: 0 18px;
  white-space: nowrap;
  border: 1px solid #4a3b5e;
  border-radius: 15px;
  background: linear-gradient(120deg, #191720, #15141b);
  color: #bda9dc;
  font-size: 13px;
  font-weight: 650;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
#discover-view .clear-discover-filters span {
  font-size: 23px;
  line-height: 1;
  color: #c7a5ff;
}
#discover-view .clear-discover-filters:hover {
  border-color: #9273b7;
  background: #211b2b;
  color: #f2eaff;
  transform: translateY(-1px);
}
#discover-view .clear-discover-filters:focus-visible {
  outline: 2px solid #c6a9ff;
  outline-offset: 2px;
}
@media (max-width: 1100px) {
  #discover-view .discover-tools {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
    gap: 14px;
  }
  #discover-view .clear-discover-filters {
    grid-column: 1 / -1;
    justify-self: end;
  }
}
@media (max-width: 540px) {
  #discover-view .discover-tools {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 20px 0 22px;
  }
  #discover-view .search-row input,
  #discover-view .genre-filter-row select {
    height: 50px;
    border-radius: 14px;
  }
  #discover-view .clear-discover-filters {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
    height: 46px;
  }
}


/* Indicador de carregamento do histórico de conversas */
.history-loading {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px 20px;
  min-height: 94px;
  max-width: 850px;
  border: 1px solid rgba(185,160,255,.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(185,160,255,.09), rgba(240,166,213,.035));
  color: var(--text);
}
.history-loading strong { display:block; font-size:14px; }
.history-loading p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.history-loading-spinner {
  width: 27px; height: 27px; flex: 0 0 27px;
  border: 3px solid rgba(185,160,255,.2);
  border-top-color: var(--accent);
  border-right-color: var(--pink);
  border-radius: 50%;
  animation: history-spin .8s linear infinite;
}
@keyframes history-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .history-loading-spinner { animation-duration: 2.5s; }
}


/* Famosos Top 1: catálogo K-pop */
.kpop-tools{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.kpop-tools .search-row{flex:1;min-width:230px;max-width:620px;margin:18px 0}
.kpop-tools .genre-filter-row{margin:0;min-width:230px}
.kpop-tools .genre-filter-row select{max-width:320px}
.kpop-grid .kpop-card{min-width:0}
.kpop-art{height:190px!important;background:linear-gradient(135deg,#33264d,#9c6da8)!important}
.kpop-art .character-art-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;z-index:2}
.kpop-photo-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#f0dfff;font-size:44px;background:linear-gradient(135deg,#352744,#a77ab7)}
.kpop-photo-placeholder span{filter:drop-shadow(0 5px 14px #0007)}
@media(max-width:900px){.kpop-art{height:160px!important}}
@media(max-width:540px){.kpop-tools{gap:6px}.kpop-tools .search-row{min-width:100%;margin:12px 0}.kpop-tools .genre-filter-row{width:100%;min-width:100%}.kpop-tools .genre-filter-row select{max-width:none}.kpop-art{height:125px!important}}



/* Modal de personalização antes de iniciar uma história */
.story-setup-overlay{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;background:rgba(7,6,13,.78);backdrop-filter:blur(9px);overflow-y:auto}
.story-setup-overlay.hidden{display:none!important}
.story-setup-card{position:relative;display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.5fr);gap:30px;width:min(100%,1040px);max-height:min(92vh,900px);overflow:auto;padding:30px;border:1px solid rgba(196,160,255,.27);border-radius:24px;background:radial-gradient(ellipse at 0 0,rgba(117,67,163,.19),transparent 48%),linear-gradient(145deg,#171321,#100f17 72%);box-shadow:0 30px 100px #0009}
.story-setup-close{position:absolute;right:17px;top:12px;width:36px;height:36px;border:0;background:transparent;color:#aaa2bb;font-size:28px;line-height:1;z-index:2}
.story-setup-profile{padding:4px 0;min-width:0;align-self:start}
.story-setup-photo-frame{height:clamp(240px,38vh,370px);overflow:hidden;border-radius:16px;border:1px solid #ffffff20;background:linear-gradient(135deg,#352444,#1b1a26);display:grid;place-items:center;margin-bottom:18px}
.story-setup-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center top}
.story-setup-placeholder{font-size:60px;color:#e1c2ff}
.story-setup-profile .tag{display:block;margin:0 0 12px}
.story-setup-profile h2{font-size:27px;letter-spacing:-.7px;margin:0 0 10px}
.story-setup-profile p{color:#aaa4b8;font-size:13px;line-height:1.65;margin:0 0 18px}
.story-setup-tags{display:flex;flex-wrap:wrap;gap:6px}
.story-setup-tags span{padding:6px 9px;border:1px solid #a98bdc40;border-radius:999px;background:#a98bdc12;color:#d8c7fa;font-size:10px}
.story-setup-main{min-width:0;padding:4px 0 0}
.story-setup-main>.eyebrow{font-size:10px;letter-spacing:1.4px;margin:0 35px 10px 0}
.story-setup-main>h2{font-size:clamp(23px,2.5vw,30px);letter-spacing:-.8px;line-height:1.15;margin:0 28px 8px 0;background:linear-gradient(100deg,#f2eaff,#c9a5ff 55%,#f1a7d9);background-clip:text;color:transparent}
.story-setup-intro{color:#aaa4b8;font-size:13px;line-height:1.55;margin:0 0 22px}
.story-setup-main input[type=text],.story-setup-main textarea{width:100%;border:1px solid #393346;border-radius:12px;background:#1b1924;color:#f4f1f8;padding:12px 14px;outline:none;resize:vertical}
.story-setup-main input[type=text]:focus,.story-setup-main textarea:focus{border-color:#c48dff;box-shadow:0 0 0 3px #b68cff16}
.story-setup-label{display:flex;align-items:center;gap:9px;margin:17px 0 9px;font-size:13px;font-weight:750}
.story-setup-label>span,.story-choice-fieldset legend>span{color:#d0a6ff;font-size:17px}
.story-choice-fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}
.story-choice-fieldset legend{font-size:13px;font-weight:750;margin-bottom:10px;padding:0}
.story-choice-fieldset legend>span{margin-right:7px}
.story-choice-grid{display:grid;gap:8px}
.story-relationship-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.story-opening-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.story-choice{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:70px;padding:10px 7px;border:1px solid #393346;border-radius:12px;background:linear-gradient(135deg,#ffffff08,#ffffff03);text-align:center;cursor:pointer;transition:border-color .15s,background .15s;min-width:0}
.story-choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.story-choice:has(input:checked){border-color:#e1a0e4;background:linear-gradient(135deg,#b78bff1f,#ed9bdc16);box-shadow:inset 0 0 0 1px #d9a0ef50}
.story-choice:focus-within{outline:2px solid #c5a0ff;outline-offset:2px}
.story-choice .choice-icon{font-size:19px;color:#e6a0df;line-height:1}
.story-choice strong{font-size:11px;line-height:1.3;font-weight:700}
.story-setup-footnote{font-size:10px;color:#898397;line-height:1.5;margin:10px 0 15px}
.story-setup-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:13px;border-top:1px solid #ffffff12}
.story-setup-actions .button{min-height:44px}
.story-setup-actions .button-primary{flex:1;max-width:340px}
body.story-setup-open{overflow:hidden}
@media(max-width:760px){
 .story-setup-overlay{padding:12px;align-items:start}
 .story-setup-card{grid-template-columns:1fr;gap:18px;padding:20px;max-height:none;margin:auto}
 .story-setup-profile{display:grid;grid-template-columns:92px 1fr;column-gap:14px;align-items:start;padding:0 28px 0 0}
 .story-setup-photo-frame{grid-row:1/5;width:92px;height:112px;margin:0;border-radius:12px}
 .story-setup-profile .tag{margin:2px 0 6px;font-size:9px}
 .story-setup-profile h2{font-size:20px;margin:0 0 5px}
 .story-setup-profile p{font-size:11px;line-height:1.4;margin:0 0 7px}
 .story-setup-tags{grid-column:2;gap:4px}
 .story-setup-tags span{font-size:9px;padding:4px 6px}
 .story-setup-main>.eyebrow{font-size:9px}
 .story-setup-main>h2{font-size:24px}
 .story-setup-intro{margin-bottom:12px}
 .story-choice{min-height:64px;padding:8px 5px}
 .story-opening-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .story-opening-grid .story-choice{min-height:58px;flex-direction:row;justify-content:flex-start;text-align:left;padding:10px}
 .story-opening-grid .choice-icon{font-size:18px}
 .story-setup-actions{position:sticky;bottom:-20px;background:#121019;padding:12px 0 0}
}
@media(max-width:420px){
 .story-setup-card{padding:16px}
 .story-relationship-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .story-choice strong{font-size:10px}
 .story-setup-actions{gap:7px}
 .story-setup-actions .button{padding:10px;font-size:11px}
}


/* Campo de mensagem mais alto para oferecer mais espaço de digitação. */
.chat-panel .message-form textarea {
  min-height: 64px !important;
  max-height: 150px !important;
  padding: 16px 13px !important;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .chat-panel .message-form textarea {
    min-height: 60px !important;
    max-height: 140px !important;
  }
}


/* Campo de mensagem expansível: após cerca de 5 linhas, permite abrir uma área grande. */
.message-form { align-items: flex-end; }
.message-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.chat-panel .message-form .message-input-wrap textarea {
  display: block; width: 100%; min-height: 54px !important; max-height: none !important;
  height: 54px; padding: 15px 48px 15px 13px !important; line-height: 1.5;
  resize: none; overflow-y: hidden; transition: height .16s ease, border-radius .16s ease;
}
.expand-message-input {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px;
  display: grid; place-items: center; border: 1px solid #ffffff20; border-radius: 9px;
  color: #e9dcff; background: #3a3346; font-size: 21px; line-height: 1;
}
.expand-message-input:hover { background: #514365; }
.chat-panel .message-form .message-input-wrap textarea.message-input-expanded {
  height: min(48vh, 520px) !important; min-height: min(48vh, 300px) !important;
  max-height: 65vh !important; overflow-y: auto !important; padding-bottom: 48px !important;
  border-color: #a58aff; box-shadow: 0 0 0 1px #a58aff30;
}
@media(max-width:600px) {
  .chat-panel .message-form .message-input-wrap textarea.message-input-expanded {
    height: 48vh !important; min-height: 240px !important; max-height: 60vh !important;
  }
}


/* No celular, expandir a escrita abre uma área quase em tela cheia, ocupando a altura disponível. */
@media (max-width: 600px) {
  .chat-panel .message-form.message-form-expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    background: #17171d !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
  }
  .chat-panel .message-form.message-form-expanded .asterisks-input-btn,
  .chat-panel .message-form.message-form-expanded .send-button {
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
  }
  .chat-panel .message-form.message-form-expanded .message-input-wrap {
    position: absolute !important;
    inset: max(12px, env(safe-area-inset-top)) 12px max(68px, calc(env(safe-area-inset-bottom) + 68px)) 12px !important;
    width: auto !important;
    height: auto !important;
  }
  .chat-panel .message-form.message-form-expanded .message-input-wrap textarea,
  .chat-panel .message-form .message-input-wrap textarea.message-input-expanded {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px 48px 52px 14px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    background: #222129 !important;
    box-shadow: 0 0 0 1px #a58aff30 !important;
  }
  .chat-panel .message-form.message-form-expanded .expand-message-input {
    position: fixed !important;
    right: 22px !important;
    bottom: calc(max(68px, env(safe-area-inset-bottom) + 68px) + 8px) !important;
    z-index: 10060 !important;
  }
}


/* Correção: o editor expandido precisa aparecer acima do chat em tela cheia.
   O overflow:hidden do painel recortava o formulário fixo quando o chat já estava expandido. */
@media (max-width: 600px) {
  body.chat-fullscreen-mode .chat-panel.chat-panel-fullscreen:has(.message-form.message-form-expanded) {
    overflow: visible !important;
  }
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100050 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: #17171d !important;
  }
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .message-input-wrap {
    position: absolute !important;
    inset: max(12px, env(safe-area-inset-top)) 12px max(68px, calc(env(safe-area-inset-bottom) + 68px)) 12px !important;
    width: auto !important;
    height: auto !important;
  }
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .message-input-wrap textarea {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .expand-message-input {
    position: fixed !important;
    right: 22px !important;
    bottom: calc(max(68px, env(safe-area-inset-bottom) + 68px) + 8px) !important;
    z-index: 100060 !important;
  }
}


/* iPhone/Safari: preencher a área visível real quando o teclado está aberto, inclusive no chat fullscreen. */
@media (max-width: 600px) {
  .chat-panel .message-form.message-form-expanded,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--chat-visual-height, 100dvh) !important;
    max-height: var(--chat-visual-height, 100dvh) !important;
    min-height: 0 !important;
    display: flex !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    z-index: 100500 !important;
  }
  .chat-panel .message-form.message-form-expanded .message-input-wrap,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .message-input-wrap {
    position: absolute !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(68px, env(safe-area-inset-bottom) + 68px) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .chat-panel .message-form.message-form-expanded .message-input-wrap textarea,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .message-input-wrap textarea {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  .chat-panel .message-form.message-form-expanded .expand-message-input,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .expand-message-input {
    position: fixed !important;
    right: 22px !important;
    bottom: calc(max(68px, env(safe-area-inset-bottom) + 68px) + 8px) !important;
    z-index: 100600 !important;
  }
}


/* iPhone Safari: o editor expandido ocupa a área visual acima do teclado, inclusive no chat fullscreen. */
@media (max-width: 600px) {
  .chat-panel .message-form.message-form-expanded,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded {
    position: fixed !important;
    top: var(--chat-visual-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--chat-visual-height, 100dvh) !important;
    max-height: var(--chat-visual-height, 100dvh) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    z-index: 100500 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .chat-panel .message-form.message-form-expanded .message-input-wrap,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .message-input-wrap {
    position: fixed !important;
    top: calc(var(--chat-visual-top, 0px) + 12px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    height: calc(var(--chat-visual-height, 100dvh) - 96px) !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  .chat-panel .message-form.message-form-expanded .message-input-wrap textarea,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .message-input-wrap textarea {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    padding: 16px 48px 52px 14px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    background: #222129 !important;
    border-color: #a58aff !important;
  }
  .chat-panel .message-form.message-form-expanded .asterisks-input-btn,
  .chat-panel .message-form.message-form-expanded .send-button,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .asterisks-input-btn,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .send-button {
    position: fixed !important;
    bottom: calc(100vh - var(--chat-visual-top, 0px) - var(--chat-visual-height, 100dvh) + 12px) !important;
    z-index: 100510 !important;
  }
  .chat-panel .message-form.message-form-expanded .asterisks-input-btn,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .asterisks-input-btn { left: 12px !important; }
  .chat-panel .message-form.message-form-expanded .send-button,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .send-button { right: 12px !important; }
  .chat-panel .message-form.message-form-expanded .expand-message-input,
  .chat-panel.chat-panel-fullscreen .message-form.message-form-expanded .expand-message-input {
    position: fixed !important;
    right: 22px !important;
    bottom: calc(100vh - var(--chat-visual-top, 0px) - var(--chat-visual-height, 100dvh) + 66px) !important;
    z-index: 100520 !important;
  }
}


/* Correção definitiva: no iPhone, o editor expandido é temporariamente movido
   para o body para não ser recortado pelo overflow:hidden do chat em tela cheia. */
@media (max-width: 600px) {
  body > form#message-form.message-form-expanded {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--chat-visual-top, 0px) !important;
    bottom: auto !important;
    width: 100vw !important;
    height: var(--chat-visual-height, 100dvh) !important;
    max-height: var(--chat-visual-height, 100dvh) !important;
    z-index: 100500 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: #17171d !important;
  }
  body > form#message-form.message-form-expanded .message-input-wrap {
    position: absolute !important;
    inset: max(12px, env(safe-area-inset-top)) 12px max(68px, calc(env(safe-area-inset-bottom) + 68px)) 12px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  body > form#message-form.message-form-expanded .message-input-wrap textarea,
  body > form#message-form.message-form-expanded textarea#message-input {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px 48px 52px 14px !important;
    border-radius: 16px !important;
    overflow-y: auto !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    box-sizing: border-box !important;
    background: #222129 !important;
    border: 1px solid #a58aff !important;
    box-shadow: 0 0 0 1px #a58aff30 !important;
  }
  body > form#message-form.message-form-expanded .asterisks-input-btn,
  body > form#message-form.message-form-expanded .send-button {
    position: relative !important;
    z-index: 2 !important;
    align-self: flex-end !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }
  body > form#message-form.message-form-expanded .expand-message-input {
    position: fixed !important;
    top: auto !important;
    right: 22px !important;
    bottom: calc(max(68px, env(safe-area-inset-bottom) + 68px) + 8px) !important;
    z-index: 100600 !important;
  }
}


/* Aviso de lançamento futuro nas lojas de aplicativos */
.app-coming-soon{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.app-coming-soon-label{font-size:10px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:#a9a1b8}
.app-store-badges{display:flex;flex-wrap:wrap;gap:10px}
.app-store-badge{display:flex;align-items:center;gap:10px;min-width:158px;padding:9px 13px;border:1px solid #ffffff24;border-radius:12px;background:linear-gradient(145deg,#1d1b25,#141419);color:#f4f1f8;box-shadow:0 5px 18px #0002}
.store-icon{width:27px;height:27px;flex:0 0 27px}
.app-store-badge span{display:flex;flex-direction:column;gap:2px}
.app-store-badge small{font-size:8px;line-height:1.2;letter-spacing:1px;color:#aaa4b8}
.app-store-badge strong{font-size:13px;line-height:1.2;font-weight:750}
@media(max-width:540px){.app-coming-soon{margin-top:23px}.app-store-badges{gap:8px}.app-store-badge{min-width:0;padding:9px 11px}.app-store-badge strong{font-size:12px}}


/* Selos das lojas: cores de marca e animações suaves */
.app-coming-soon-label{color:#c6b2ff;text-shadow:0 0 16px #b99aff35}
.app-store-badges{gap:12px;perspective:700px}
.app-store-badge{position:relative;isolation:isolate;overflow:hidden;min-height:58px;min-width:176px;padding:11px 15px;border:1px solid #ffffff28;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;background:#17151f;animation:storeBadgeFloat 4.8s ease-in-out infinite}
.app-store-badge:nth-child(2){animation-delay:-2.4s}
.app-store-badge::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.20;pointer-events:none;transition:opacity .25s ease}
.app-store-badge:nth-child(1)::before{background:linear-gradient(115deg,#4285f4 0%,#34a853 35%,#fbbc04 65%,#ea4335 100%)}
.app-store-badge:nth-child(2)::before{background:linear-gradient(115deg,#8b5cf6 0%,#ec4899 52%,#60a5fa 100%)}
.app-store-badge:nth-child(1){border-color:#34a85365;box-shadow:0 0 0 1px #4285f415,0 6px 22px #34a85316}
.app-store-badge:nth-child(2){border-color:#c084fc70;box-shadow:0 0 0 1px #ec489915,0 6px 22px #a855f718}
.app-store-badge:nth-child(1) .store-icon{filter:drop-shadow(0 0 5px #4285f455)}
.app-store-badge:nth-child(2) .store-icon{color:#fff;filter:drop-shadow(0 0 7px #ec489955)}
.app-store-badge small{color:#d0c9dd}
.app-store-badge strong{font-size:14px;letter-spacing:-.2px}
.app-store-badge:hover{transform:translateY(-4px) scale(1.025);border-color:#f0a6d5;box-shadow:0 9px 28px #b9a0ff30}
.app-store-badge:hover::before{opacity:.34}
.app-store-badge:focus-visible{outline:2px solid #c5a6ff;outline-offset:3px}
@keyframes storeBadgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.app-store-badge{animation:none;transition:none}.app-store-badge:hover{transform:none}}
@media(max-width:540px){.app-store-badges{gap:9px}.app-store-badge{min-height:56px;min-width:0;padding:10px 12px}.app-store-badge strong{font-size:12px}.store-icon{width:25px;height:25px;flex-basis:25px}}


/* Mobile: move the app-store badges below the login card, at the end of the landing content.
   Desktop keeps the original placement beside the login card. */
@media (max-width: 900px) {
  #auth-screen.auth-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #auth-screen .hero-copy { display: contents !important; }
  #auth-screen .hero-copy > .eyebrow,
  #auth-screen .hero-copy > h1,
  #auth-screen .hero-copy > p,
  #auth-screen .hero-copy > .feature-pills { order: 1; }
  #auth-screen .auth-card { order: 2; width: 100%; }
  #auth-screen .app-coming-soon { order: 3; width: 100%; margin-top: 0; padding-top: 4px; }
  #auth-screen .app-store-badges { width: 100%; }
}

/* Logo oficial FamaChat — imagem de alta resolução, sem recorte */
.brand-logo-image{width:40px;height:36px;object-fit:contain;object-position:center;border-radius:0;flex:0 0 40px;display:block;image-rendering:auto;transform:translateZ(0)}
.brand-wordmark{display:inline-block;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.auth-card-brand-logo{width:44px;height:40px;object-fit:contain;object-position:center;border-radius:0;flex:0 0 44px;display:block;image-rendering:auto;transform:translateZ(0)}
@media(max-width:540px){.brand-logo-image{width:32px;height:30px;flex-basis:32px}.auth-card-brand-logo{width:38px;height:36px;flex-basis:38px}}


/* FIX: em telas pequenas, o seletor de layout não pode sobrepor a classe .hidden.
   Depois do login, toda a tela de autenticação (incluindo os selos das lojas) some. */
@media (max-width: 900px) {
  #auth-screen.auth-layout.hidden {
    display: none !important;
  }
}


/* FamaChat mobile refresh: navegação mais visível e controles confortáveis. */
@media (max-width: 540px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 9px;
    overflow: visible;
    background: linear-gradient(180deg, rgba(35, 25, 49, .96), rgba(16, 16, 20, .98));
    border-bottom: 1px solid rgba(185,160,255,.20);
  }
  .sidebar .side-heading,
  .sidebar .sidebar-bottom { display: none !important; }
  .sidebar .side-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 3px;
    border: 1px solid rgba(185,160,255,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
    color: #d4cbe6;
    text-align: center;
    font-size: clamp(10px, 2.7vw, 11px);
    line-height: 1.2;
    font-weight: 750;
    overflow-wrap: anywhere;
  }
  .sidebar .side-link span {
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 1;
    color: #c5a6ff;
  }
  .sidebar .side-link.active,
  .sidebar .side-link:hover {
    color: #fff;
    border-color: rgba(222,174,255,.72);
    background: linear-gradient(125deg, #7952e8, #b46be4 68%, #e58acb);
    box-shadow: 0 5px 18px rgba(141,108,255,.22), inset 0 1px rgba(255,255,255,.22);
  }
  .sidebar .side-link.active span,
  .sidebar .side-link:hover span { color: #fff; }
  .content { padding: 24px 12px 30px; }
  .welcome-row h1,
  .content > div > h1 { font-size: clamp(25px, 7vw, 31px); line-height: 1.13; letter-spacing: -1px; }
  .welcome-row p { font-size: 13px; }
  .search-row { margin: 20px 0; max-width: none; }
  .search-row input { min-height: 46px; font-size: 13px; border-radius: 13px; }
  .genre-filter-row { margin: 0 0 10px; gap: 8px; }
  .genre-filter-row select { min-height: 46px; border-radius: 13px; font-size: 13px; }
  .clear-discover-filters { min-height: 44px; border-radius: 13px; }
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .character-card { border-radius: 16px; }
  .character-art { height: clamp(92px, 27vw, 125px); }
  .character-info { padding: 11px; }
  .character-info h3 { font-size: 13px; line-height: 1.3; }
  .character-info p { font-size: 11px; line-height: 1.45; margin-bottom: 12px; }
  .character-info .button { min-height: 38px; font-size: 10px; padding: 8px 5px; border-radius: 10px; }
}


/* Correcao da navegacao mobile: botoes compactos e destaque ativo discreto. */
@media (max-width: 540px) {
  #app-screen .sidebar {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 8px 9px !important; gap: 5px !important;
    align-items: stretch !important; justify-content: space-between !important;
    overflow: visible !important;
  }
  #app-screen .sidebar .side-link {
    flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important;
    height: 58px !important; min-height: 58px !important; max-height: 58px !important;
    margin: 0 !important; padding: 6px 2px !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; gap: 4px !important;
    border: 1px solid rgba(185,160,255,.18) !important; border-radius: 11px !important;
    background: rgba(255,255,255,.025) !important; color: #d4cbe6 !important;
    font-size: 10px !important; line-height: 1.15 !important; text-align: center !important;
    white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important;
    transform: none !important; box-shadow: none !important;
  }
  #app-screen .sidebar .side-link span {
    display: block !important; margin: 0 !important; font-size: 14px !important; line-height: 1 !important;
  }
  #app-screen .sidebar .side-link.active {
    background: rgba(141,108,255,.17) !important;
    border-color: #a88aff !important; color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(185,160,255,.12) !important;
  }
  #app-screen .sidebar .side-link.active span { color: #d7c5ff !important; }
}


/* Busca automática de personalidades públicas */
.celebrity-finder-card,.celebrity-finder-note{margin:24px 0;padding:24px;border:1px solid #ffffff16;border-radius:18px;background:linear-gradient(145deg,#201e29,#17171c)}
.celebrity-finder-form{display:grid;gap:12px;max-width:850px}
.celebrity-finder-form>label{font-size:13px;font-weight:750}
.celebrity-finder-search{display:flex;gap:10px;align-items:stretch}
.celebrity-finder-search input{min-width:0;flex:1;background:#111116;border:1px solid var(--line);border-radius:11px;padding:13px 14px;color:var(--text);outline:none}
.celebrity-finder-search .button{white-space:nowrap}
.finder-adult-confirmation{display:flex!important;align-items:flex-start;gap:10px;margin-top:4px!important;color:var(--muted);font-size:12px!important}
.finder-adult-confirmation input{margin-top:3px;flex:0 0 auto}
.celebrity-finder-status{margin-top:18px;padding:14px;border-radius:12px;background:#292333;color:#e8dcff;font-size:13px;line-height:1.6}
.celebrity-finder-note{background:#ffffff04;color:var(--muted);font-size:13px;line-height:1.7}
.celebrity-finder-note strong{color:var(--text)}
.celebrity-finder-note p{margin-bottom:0}
@media(max-width:540px){.celebrity-finder-card,.celebrity-finder-note{padding:17px}.celebrity-finder-search{flex-direction:column}.celebrity-finder-search .button{width:100%}}

\n/* Fotos de personalidades no histórico e em todos os avatares do chat. */
.history-avatar,
#chat-avatar,
.message-avatar.character-avatar {
  background-size: cover !important;
  background-position: center 30% !important;
  background-repeat: no-repeat !important;
}
.history-avatar.avatar-photo,
#chat-avatar.avatar-photo {
  color: transparent !important;
  text-shadow: none !important;
}


/* Descobrir: vitrine de personalidades em destaque; escopo restrito à seção. */
#discover-view .featured-famous-art { min-height: 140px; }
#discover-view .featured-photo-placeholder {
  position:absolute;inset:0;display:grid;place-items:center;
  color:#f1dcff;font-size:48px;
  background:radial-gradient(circle at 30% 25%,#ffffff22,transparent 40%),linear-gradient(135deg,#352545,#171720);
}
#discover-view .featured-famous-image { z-index:1; }
#discover-view .featured-famous-image.hidden { display:none!important; }
#discover-view .featured-photo-placeholder.hidden { display:none!important; }
#discover-view .featured-famous-card .character-info p { min-height:3.2em; }

\n/* Cards de famosos em destaque: fotos uniformes e alinhamento consistente. */
#discover-view .character-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
#discover-view .featured-famous-card {
  height: 100%;
  min-width: 0;
}
#discover-view .featured-famous-art {
  height: 180px;
  min-height: 180px;
  flex: 0 0 180px;
  overflow: hidden;
  background: #211c2d;
}
#discover-view .featured-famous-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
#discover-view .featured-famous-card .character-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#discover-view .featured-famous-card .character-info p {
  flex: 1 1 auto;
  min-height: 4.8em;
}
@media (max-width: 540px) {
  #discover-view .featured-famous-art {
    height: 145px;
    min-height: 145px;
    flex-basis: 145px;
  }
}


/* Campo adicional: personalidade desejada para a versão fictícia do artista */
.story-setup-field-help {
  margin: -3px 0 14px;
  color: var(--muted, #a6a2b2);
  font-size: 11px;
  line-height: 1.5;
}
#story-artist-personality {
  width: 100%;
  resize: vertical;
}


/* Ajuste mobile do cabeçalho do chat: controles em cima, perfil abaixo. */
@media (max-width: 540px) {
  .chat-panel .chat-header {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto 42px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 7px !important;
    row-gap: 12px !important;
  }
  .chat-panel .chat-header > .chat-avatar-status {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .chat-panel .chat-header > div:nth-child(2) {
    grid-column: 2 / 5 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }
  .chat-panel .chat-header > .chat-font-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin-left: 0 !important;
  }
  .chat-panel .chat-header > #new-chat-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    white-space: nowrap !important;
  }
  .chat-panel .chat-header > #chat-fullscreen-btn {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .chat-panel .chat-header #chat-name {
    overflow-wrap: anywhere;
  }

  /* Mantém a mesma ordem quando o chat está em tela cheia. */
  .chat-panel.chat-panel-fullscreen .chat-header > .chat-font-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  .chat-panel.chat-panel-fullscreen .chat-header > #chat-fullscreen-btn {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }
}


/* Chat inicia em tela cheia no celular e usa seta de voltar no cabeçalho. */
.chat-back-btn {
  display: none;
}
@media (max-width: 540px) {
  .chat-panel .chat-header {
    grid-template-columns: 36px minmax(0, 1fr) auto auto !important;
  }
  .chat-panel .chat-header > .chat-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0 !important;
    font-size: 22px !important;
    margin: 0 !important;
  }
  .chat-panel .chat-header > .chat-avatar-status {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .chat-panel .chat-header > div:nth-child(2) {
    grid-column: 2 / 5 !important;
    grid-row: 2 !important;
  }
  .chat-panel .chat-header > .chat-font-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .chat-panel .chat-header > #new-chat-btn {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
  .chat-panel.chat-panel-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .chat-panel.chat-panel-fullscreen .chat-header {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }
  .chat-panel.chat-panel-fullscreen .message-form {
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}

/* Memória abre sobre as mensagens, sem empurrar o chat; pode fechar sem salvar. */
@media(max-width:540px){
  .character-memory-panel[open]{top:66px;left:8px;right:8px;max-height:calc(100% - 135px);padding:14px}
  .character-memory-panel[open] #character-memory-input{min-height:80px}
}


/* Confirmação sempre visível no celular, acima do chat em tela cheia. */
.toast { z-index: 10050 !important; }
@media (max-width: 540px) { .toast { top: max(72px, calc(env(safe-area-inset-top) + 12px)); right: 12px; left: 12px; width: auto; max-width: none; } }


/* Resultados de famosos encontrados ao pesquisar na lista principal */
.celebrity-live-results{margin:24px 0 8px;display:grid;gap:16px}
.celebrity-live-results.hidden{display:none!important}
.celebrity-live-heading h2{font-size:clamp(19px,2.2vw,25px);margin:8px 0}
.celebrity-live-heading p{margin:0 0 4px}
.celebrity-live-card{max-width:560px}
.celebrity-live-art{height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.celebrity-live-art img{width:100%;height:100%;object-fit:cover}
.celebrity-live-card .character-info p{max-height:150px;overflow:auto}
.celebrity-live-source{display:inline-block;margin-top:12px;color:#c7b5ff;font-size:12px;text-decoration:none}
.celebrity-live-source:hover{text-decoration:underline}
.celebrity-live-status{display:flex;align-items:center;gap:10px;color:#c9b9f7;background:#19171f;border:1px solid #383044;border-radius:14px;padding:16px;font-size:13px}
.live-search-spinner{width:17px;height:17px;border:2px solid #55476f;border-top-color:#d8b6ff;border-radius:50%;animation:celebrity-spin .8s linear infinite;flex-shrink:0}
@keyframes celebrity-spin{to{transform:rotate(360deg)}}
@media(max-width:540px){.celebrity-live-card{max-width:none}.celebrity-live-art{height:150px}.celebrity-live-card .character-info{padding:14px}.celebrity-live-card .character-info h3{font-size:17px}.celebrity-live-card .character-info p{font-size:12px}}

/* Busca na internet somente após confirmação do usuário */
.search-row{display:flex;align-items:center;gap:10px;max-width:700px}
.search-row input{min-width:0;flex:1}
.discover-web-search{flex:0 0 auto;min-width:112px}
.discover-web-search:disabled{opacity:.7;cursor:wait}
@media(max-width:540px){
  .search-row{gap:7px}
  .discover-web-search{min-width:88px;padding:12px 10px;font-size:12px}
}


/* Cadastro: confirmação de senha e recuperação de acesso */
.confirm-password-group { margin-top: 15px; }
.confirm-password-group label { display: block; margin: 17px 0 8px; font-size: 13px; font-weight: 650; }
.forgot-password-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.forgot-password-btn { border: 0; padding: 4px 0; background: transparent; color: #c6b3ff; font-size: 12px; font-weight: 650; text-decoration: none; }
.forgot-password-btn:hover { color: #f0a6d5; text-decoration: underline; }
.forgot-password-btn:disabled { opacity: .65; cursor: wait; }

/* Avisos de autenticação mais claros e alinhados ao visual do FamaChat. */
.toast.error {
  background: linear-gradient(145deg, #301b24, #21171e);
  border: 1px solid #d85c78;
  color: #ffe8ed;
  box-shadow: 0 14px 38px #0008, 0 0 0 1px #d85c7818;
}
.toast.error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 9px;
  border: 1px solid #ff8da4;
  border-radius: 50%;
  color: #ff9db0;
  font-size: 12px;
  font-weight: 800;
  vertical-align: -2px;
}

/* Tela de redefinição de senha */
#auth-tabs.hidden { display: none !important; }
#email-label.hidden, #email.hidden { display: none !important; }


/* Correção definitiva das fotos em "Minhas conversas". */
#history-list .history-avatar {
  width: 54px;
  height: 54px;
  min-width: 54px;
  flex: 0 0 54px;
  padding: 0;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
}
#history-list .history-avatar-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  border-radius: inherit;
}
@media (max-width: 540px) {
  #history-list .history-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    flex-basis: 46px;
    border-radius: 13px;
  }
}


/* Google button: mesmo tamanho externo de Entrar */
.auth-card #google-login-btn.google-login-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 47px !important;
  height: 47px !important;
  margin-top: 13px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.auth-card #google-login-btn.google-login-container:hover {
  background: transparent !important;
  filter: none !important;
  transform: none !important;
}
.auth-card #google-login-btn.google-login-container > div,
.auth-card #google-login-btn.google-login-container iframe {
  display: block !important;
  max-width: 100% !important;
}


/* Google button: largura total, sem cortar o botão oficial */
.auth-card #google-login-btn.google-login-container {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 47px !important;
  min-height: 47px !important;
  margin-top: 13px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.auth-card #google-login-btn.google-login-container > div {
  width: 100% !important;
  max-width: 100% !important;
}
.auth-card #google-login-btn.google-login-container iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}
.auth-card #google-login-btn.google-login-container:hover {
  background: transparent !important;
  filter: none !important;
  transform: none !important;
}

/* Botão Google: cantos arredondados iguais ao botão Entrar */
.auth-card #google-login-btn.google-login-container {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.auth-card #google-login-btn.google-login-container iframe {
  border-radius: 12px !important;
}

/* Botão Google: arredondamento igual ao botão Entrar, sem mudar dimensões */
.auth-card #google-login-btn.google-login-container {
  border-radius: 12px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px) !important;
}
.auth-card #google-login-btn.google-login-container > div {
  border-radius: 12px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 12px) !important;
}
.auth-card #google-login-btn.google-login-container iframe {
  border-radius: 12px !important;
}


/* Google button: stable position after refresh */
.auth-card #google-login-btn.google-login-container {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 47px !important;
  min-height: 47px !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
.auth-card #google-login-btn.google-login-container > div {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}
.auth-card #google-login-btn.google-login-container iframe {
  display: block !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 12px !important;
}

/* Botão nativo do Google — ajuste restrito ao botão de login */
.google-login-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 46px;
  background: #fff;
  color: #242424;
  border: 1px solid #dadce0;
  border-radius: 12px;
  margin-top: 12px;
}
.google-login-button:hover {
  background: #f7f7f7;
}
.google-login-button:disabled {
  opacity: .65;
  cursor: wait;
}
.google-login-button .google-g {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 800;
  font-family: Arial, sans-serif;
  font-size: 19px;
  color: #4285f4;
}


/* Botão oficial do Google Identity Services com aparência próxima ao botão original do FamaChat. */
.auth-card #google-login-btn.google-login-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 47px !important;
  height: 47px !important;
  margin-top: 13px !important;
  padding: 0 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
.auth-card #google-login-btn.google-login-container:hover {
  background: #f7f7f7 !important;
  border-color: #c8cbd0 !important;
}
.auth-card #google-login-btn.google-login-container > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.auth-card #google-login-btn.google-login-container iframe {
  display: block !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 12px !important;
}
.auth-card #google-login-btn.google-login-container.google-login-loading {
  opacity: .65;
}

/* Garantir que o espaço do botão Google permaneça visível durante a inicialização. */
.auth-card #google-login-btn.google-login-container:not(.google-login-ready) {
  visibility: visible !important;
  min-height: 47px !important;
}


/* Ajuste final: botão oficial do Google centralizado sem uma moldura externa duplicada. */
.auth-card #google-login-btn.google-login-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 47px !important;
  min-height: 47px !important;
  padding: 0 !important;
  margin-top: 13px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.auth-card #google-login-btn.google-login-container > div {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.auth-card #google-login-btn.google-login-container iframe {
  display: block !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border: 0 !important;
}


/* Ajuste final: manter a mesma aparência antes e durante o hover. */
.auth-card #google-login-btn.google-login-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 47px !important;
  min-height: 47px !important;
  padding: 0 !important;
  margin: 13px 0 0 !important;
  box-sizing: border-box !important;
  background: #f7f7f7 !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: none !important;
}
.auth-card #google-login-btn.google-login-container:hover {
  background: #f7f7f7 !important;
  border: 0 !important;
  filter: none !important;
  transform: none !important;
}
.auth-card #google-login-btn.google-login-container > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.auth-card #google-login-btn.google-login-container iframe {
  display: block !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 12px !important;
}


/* Configuração do perfil FamaChat */
:root{--user-accent:#b9a0ff;--user-accent-end:#e6a5d2}
.button-primary,.send-button{background:linear-gradient(120deg,var(--user-accent),var(--user-accent-end))}
.mini-avatar,.profile-avatar-preview{background-color:var(--user-accent);background-image:linear-gradient(135deg,var(--user-accent),var(--user-accent-end))}
.profile-mini-avatar,.profile-avatar-preview{background-size:cover;background-position:center;background-repeat:no-repeat}
.profile-mini-avatar.has-profile-image,.profile-avatar-preview.has-profile-image{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent!important}
.sidebar-profile-text{min-width:0;flex:1}
.sidebar-profile-text strong{max-width:142px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-settings-view{max-width:1000px;margin:0 auto}
.profile-settings-heading{margin-bottom:25px}
.profile-settings-heading h1 span{color:var(--user-accent)}
.profile-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.profile-settings-card{min-width:0;padding:23px;border:1px solid #ffffff15;border-radius:18px;background:linear-gradient(150deg,#201e29,#17171c);box-shadow:0 16px 42px #00000012}
.profile-section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}
.profile-section-title h2{margin:0 0 7px;font-size:18px;letter-spacing:-.3px}
.profile-section-title p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.profile-photo-editor{display:flex;gap:16px;align-items:center;padding:15px;margin-bottom:22px;border:1px solid #ffffff12;border-radius:15px;background:#ffffff04}
.profile-avatar-preview{width:100px;height:100px;flex:0 0 100px;display:grid;place-items:center;border-radius:50%;color:#21172e;font-size:24px;font-weight:850;overflow:hidden;border:2px solid #ffffff22}
.profile-photo-buttons{display:flex;align-items:flex-start;gap:7px;flex-direction:column;min-width:0}
.profile-photo-buttons .button{padding:8px 11px;font-size:12px}
.profile-photo-buttons .fine-print{margin:2px 0 0}
.profile-field-label{display:block;margin:16px 0 8px;font-size:13px;font-weight:700;color:#e8e3f0}
.profile-field-label span{color:var(--muted);font-weight:400}
.profile-settings-card input[type="text"],.profile-settings-card input[type="email"],.profile-settings-card input[type="password"],.profile-settings-card input[type="date"],.profile-settings-card textarea{display:block;width:100%;max-width:100%;min-height:42px;background:#111116;border:1px solid #393642;border-radius:11px;padding:12px 13px;color:var(--text);outline:none;font:inherit;font-size:13px;resize:vertical}
.profile-settings-card input[type="date"]{color-scheme:dark;cursor:pointer}
.profile-settings-card input:focus,.profile-settings-card textarea:focus{border-color:var(--user-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--user-accent) 13%,transparent)}
.profile-settings-card input[readonly]{color:#a6a2b2;background:#15141a;cursor:not-allowed}
.profile-character-count{text-align:right;margin:6px 0 0;color:#817b8f;font-size:11px}
.profile-accent-fieldset{border:0;padding:0;margin:0 0 28px;min-width:0}
.profile-accent-fieldset legend{font-size:13px;font-weight:750;margin-bottom:13px}
.profile-accent-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.accent-choice{display:flex;min-width:0;align-items:center;flex-direction:column;gap:8px;padding:12px 5px;border:1px solid #ffffff16;border-radius:12px;background:#ffffff04;color:#c9c3d5;font-size:11px;cursor:pointer;transition:.15s}
.accent-choice:has(input:checked){border-color:var(--user-accent);background:#ffffff0a;color:#fff;box-shadow:0 0 0 1px var(--user-accent) inset}
.accent-choice input{position:absolute;opacity:0;pointer-events:none}
.accent-choice input:focus-visible + .accent-swatch{outline:2px solid #fff;outline-offset:3px}
.accent-swatch{width:27px;height:27px;border-radius:50%;display:block;border:2px solid #ffffff65;box-shadow:0 2px 12px #0004}
.accent-violet{background:linear-gradient(135deg,#b9a0ff,#e6a5d2)}.accent-blue{background:linear-gradient(135deg,#8cbcff,#63d7e5)}.accent-pink{background:linear-gradient(135deg,#f0a6d5,#ff8fb8)}.accent-green{background:linear-gradient(135deg,#8ce2b0,#6fcbb0)}
.profile-font-size-control{padding:17px 15px;border:1px solid #ffffff12;border-radius:13px;background:#ffffff04}
.profile-font-size-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.profile-font-size-label label{font-size:12px;font-weight:700}
.profile-font-size-label output{font-size:12px;font-weight:800;color:var(--user-accent)}
#profile-font-size{width:100%;accent-color:var(--user-accent);cursor:pointer}
.profile-range-ends{display:flex;justify-content:space-between;color:#817b8f;font-size:10px;margin-top:5px}
.profile-settings-card .fine-print{font-size:11px;line-height:1.55;color:#8d879c}
.profile-form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}
.profile-form-actions .button{font-size:12px}
.profile-security-card{margin-top:18px}
.profile-security-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#ffffff0a;color:var(--user-accent);font-size:21px}
.profile-security-card h3{font-size:15px;margin:0 0 6px}
.profile-security-description{font-size:12px;margin:0}
.profile-password-divider{height:1px;background:#ffffff12;margin:23px 0}
.profile-password-form{max-width:620px}
.profile-password-form .profile-password-field{position:relative;display:flex;align-items:center;width:100%}
.profile-password-form .profile-password-field input{padding-right:52px}
.profile-password-form .profile-password-field .password-toggle{right:7px;z-index:1}
.profile-password-form .profile-password-field .password-toggle .eye-icon{width:20px;height:20px}

.profile-security-actions{justify-content:flex-start}
@media(max-width:900px){.profile-settings-grid{grid-template-columns:1fr}.profile-settings-card{padding:20px}.profile-security-card{margin-top:18px}.sidebar{flex-wrap:wrap;justify-content:stretch}.side-link{flex:1 1 calc(50% - 8px)}}
@media(max-width:540px){.profile-settings-heading{margin-bottom:20px}.profile-settings-card{padding:16px;border-radius:15px}.profile-photo-editor{gap:12px;padding:12px}.profile-avatar-preview{width:76px;height:76px;flex-basis:76px;font-size:20px}.profile-photo-buttons .button{padding:8px 9px}.profile-accent-options{gap:6px}.accent-choice{padding:10px 3px;font-size:10px}.profile-form-actions{justify-content:stretch}.profile-form-actions .button{flex:1}.profile-security-actions .button{flex:1 1 100%}.sidebar .side-link{flex:1 1 calc(50% - 8px);padding:10px 5px;font-size:11px}}


/* Foto do usuário no cabeçalho e nas mensagens do chat. */
.user-header-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  color: #21172e;
  background: linear-gradient(135deg, var(--user-accent, #c0a5ff), var(--user-accent-end, #e6a5d2));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}
.user-header-avatar.has-profile-image {
  color: transparent !important;
  background-position: center;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.message-avatar.user-avatar.has-profile-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: 1px solid #ffffff25;
  color: transparent !important;
}
.message-avatar.user-avatar.has-profile-image::before,
.message-avatar.user-avatar.has-profile-image::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 540px) {
  .user-header-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .top-actions { gap: 7px; }
}


/* Correção definitiva do alinhamento das mensagens: usuário à direita, personagem à esquerda. */
#messages.messages {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
#messages.messages > .message-row {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  align-items: flex-end !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
#messages.messages > .message-row.assistant-row {
  justify-content: flex-start !important;
  flex-direction: row !important;
}
#messages.messages > .message-row.user-row {
  justify-content: flex-end !important;
  flex-direction: row !important;
}
#messages.messages > .message-row > .message-avatar {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
}
#messages.messages > .message-row > .message {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(78%, 620px) !important;
  box-sizing: border-box !important;
}
@media (max-width: 540px) {
  #messages.messages > .message-row { gap: 7px !important; }
  #messages.messages > .message-row > .message-avatar {
    flex-basis: 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
  }
  #messages.messages > .message-row > .message {
    max-width: calc(100% - 55px) !important;
  }
  #messages.messages > .message-row.assistant-row { justify-content: flex-start !important; }
  #messages.messages > .message-row.user-row { justify-content: flex-end !important; }
}

/* Alinhamento estável no celular: o tamanho do texto não muda o lado do balão. */
@media (max-width: 600px) {
  #messages.messages {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #messages.messages > .message-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 7px !important;
    box-sizing: border-box !important;
  }

  #messages.messages > .message-row.assistant-row {
    justify-content: flex-start !important;
    align-self: stretch !important;
  }

  #messages.messages > .message-row.user-row {
    justify-content: flex-end !important;
    align-self: stretch !important;
  }

  #messages.messages > .message-row > .message-avatar {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
  }

  #messages.messages > .message-row > .message {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 76% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #messages.messages > .message-row.assistant-row > .message {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #messages.messages > .message-row.user-row > .message-avatar {
    order: 0 !important;
  }

  #messages.messages > .message-row.user-row > .message {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Gatilhos narrativos no topo do chat */
.story-triggers-panel {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0;
  border-bottom: 1px solid #ffffff12;
  background: linear-gradient(110deg, #19151f, #17171d);
}
.story-triggers-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 43px;
  padding: 9px 16px;
  cursor: pointer;
  list-style: none;
  color: #e9dfff;
  user-select: none;
}
.story-triggers-summary::-webkit-details-marker { display: none; }
.story-triggers-summary::marker { content: ""; }
.story-triggers-heading { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.story-triggers-bolt { color: var(--user-accent, #c0a5ff); font-size: 18px; }
.story-triggers-subtitle { color: var(--muted); font-size: 11px; min-width: 0; }
.story-triggers-chevron { margin-left: auto; color: #b9a0ff; font-size: 18px; line-height: 1; transition: transform .18s ease; }
.story-triggers-panel[open] .story-triggers-chevron { transform: rotate(180deg); }
.story-triggers-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 12px;
}
.story-trigger-btn {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 76px;
  padding: 11px 10px;
  border: 1px solid #ffffff14;
  border-radius: 13px;
  background: linear-gradient(145deg, #201e29, #17171d);
  color: var(--text);
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.story-trigger-btn:hover { border-color: color-mix(in srgb, var(--user-accent, #b9a0ff) 55%, transparent); background: #292333; transform: translateY(-1px); }
.story-trigger-btn:focus-visible { outline: 2px solid var(--user-accent, #b9a0ff); outline-offset: 2px; }
.story-trigger-btn:active { transform: translateY(0); }
.story-trigger-featured { border-color: color-mix(in srgb, var(--user-accent, #b9a0ff) 68%, transparent); background: linear-gradient(145deg, #32233d, #211b2b); }
.story-trigger-icon { display: grid; place-items: center; flex: 0 0 22px; width: 22px; min-height: 24px; color: var(--user-accent, #c5aaff); font-size: 19px; font-weight: 800; line-height: 1.1; }
.story-trigger-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.story-trigger-copy strong { font-size: 11px; font-weight: 800; line-height: 1.3; }
.story-trigger-copy small { color: #a6a2b2; font-size: 10px; line-height: 1.35; }
@media (max-width: 1100px) {
  .story-triggers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .story-triggers-summary { gap: 8px; min-height: 42px; padding: 8px 11px; }
  .story-triggers-heading { font-size: 12px; }
  .story-triggers-subtitle { font-size: 10px; }
  .story-triggers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 9px 10px; }
  .story-trigger-btn { min-height: 64px; padding: 9px 8px; gap: 7px; border-radius: 11px; }
  .story-trigger-icon { flex-basis: 19px; width: 19px; font-size: 17px; }
  .story-trigger-copy strong { font-size: 10px; }
  .story-trigger-copy small { font-size: 9px; }
}
@media (max-width: 380px) {
  .story-triggers-subtitle { display: none; }
  .story-trigger-btn { padding: 8px 7px; }
}



/* Gatilhos da história recolhidos junto ao campo de mensagem. */
.chat-panel .message-form { position: relative; }
.chat-panel .story-triggers-panel {
  position: static !important;
  z-index: 80;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.chat-panel .story-triggers-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid #514366;
  border-radius: 12px;
  background: #24202d;
  color: #e9ddff;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}
.chat-panel .story-triggers-summary::-webkit-details-marker { display: none; }
.chat-panel .story-triggers-summary::marker { content: ""; }
.chat-panel .story-triggers-summary:hover,
.chat-panel .story-triggers-panel[open] > .story-triggers-summary {
  border-color: var(--user-accent, #b9a0ff);
  background: #30263d;
}
.chat-panel .story-triggers-bolt { font-size: 17px; line-height: 1; color: var(--user-accent, #c5aaff); }
.chat-panel .story-triggers-chevron { margin: 0 0 0 2px; font-size: 13px; line-height: 1; transition: transform .18s ease; }
.chat-panel .story-triggers-panel[open] .story-triggers-chevron { transform: rotate(180deg); }
.chat-panel .story-triggers-grid {
  position: absolute;
  left: 10px;
  bottom: calc(100% + 8px);
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(690px, calc(100vw - 70px));
  max-height: min(360px, 55vh);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #554568;
  border-radius: 16px;
  background: linear-gradient(145deg, #201b2a, #151419 86%);
  box-shadow: 0 16px 48px #0009, 0 0 0 1px #ffffff08 inset;
}
.chat-panel .story-trigger-btn { min-height: 64px; padding: 10px; }
.chat-panel .story-trigger-copy strong { font-size: 11px; }
.chat-panel .story-trigger-copy small { font-size: 10px; }
@media (max-width: 700px) {
  .chat-panel .story-triggers-summary {
    min-height: 42px;
    padding: 0 9px;
    gap: 4px;
    font-size: 11px;
    border-radius: 11px;
  }
  .chat-panel .story-triggers-chevron { display: none; }
  .chat-panel .story-triggers-grid {
    left: 8px;
    bottom: calc(100% + 7px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(450px, calc(100vw - 32px));
    max-height: min(50vh, 330px);
    gap: 7px;
    padding: 9px;
    border-radius: 14px;
  }
  .chat-panel .story-trigger-btn { min-height: 58px; padding: 8px 7px; gap: 6px; }
  .chat-panel .story-trigger-icon { flex-basis: 18px; width: 18px; font-size: 16px; }
  .chat-panel .story-trigger-copy strong { font-size: 10px; }
  .chat-panel .story-trigger-copy small { font-size: 9px; }
}
@media (max-width: 430px) {
  .chat-panel .message-form { gap: 6px; }
  .chat-panel .story-triggers-summary { padding: 0 7px; font-size: 10px; }
  .chat-panel .story-triggers-bolt { font-size: 15px; }
  .chat-panel .story-triggers-grid { left: 6px; width: calc(100vw - 28px); }
}


/* FamaChat Option 4 — chips de gatilhos em uma faixa rolável acima do campo de mensagem. */
.chat-panel .story-trigger-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 12px 0;
  position: relative;
  background: #17171d;
}
.chat-panel .story-trigger-chips {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.chat-panel .story-trigger-chips::-webkit-scrollbar { display: none; }
.chat-panel .story-trigger-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid #3a3445;
  border-radius: 999px;
  background: #201e29;
  color: #dcd5e9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.chat-panel .story-trigger-chip:hover {
  background: #2c2538;
  border-color: color-mix(in srgb, var(--user-accent, #b9a0ff) 65%, transparent);
  transform: translateY(-1px);
}
.chat-panel .story-trigger-chip:focus-visible {
  outline: 2px solid var(--user-accent, #b9a0ff);
  outline-offset: 2px;
}
.chat-panel .story-trigger-chip:active { transform: translateY(0); }
.chat-panel .story-trigger-chip.story-trigger-featured {
  border-color: color-mix(in srgb, var(--user-accent, #b9a0ff) 70%, transparent);
  background: linear-gradient(120deg, #32233d, #24202e);
  color: #f0e5ff;
}
.chat-panel .story-trigger-chip-icon {
  display: inline-grid;
  place-items: center;
  width: 15px;
  flex: 0 0 15px;
  color: var(--user-accent, #c5aaff);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.chat-panel .story-trigger-scroll {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 30px;
  margin: 0 0 6px;
  padding: 0;
  border: 1px solid #4b405c;
  border-radius: 9px;
  background: #24202d;
  color: var(--user-accent, #c5aaff);
  font-size: 23px;
  line-height: 1;
}
.chat-panel .story-trigger-scroll:hover { border-color: var(--user-accent, #b9a0ff); }
@media (max-width: 700px) {
  .chat-panel .story-trigger-strip { gap: 4px; padding: 7px 8px 0; }
  .chat-panel .story-trigger-chips { gap: 6px; padding-bottom: 7px; }
  .chat-panel .story-trigger-chip { min-height: 33px; padding: 0 9px; gap: 5px; font-size: 10px; }
  .chat-panel .story-trigger-chip-icon { width: 13px; flex-basis: 13px; font-size: 12px; }
  .chat-panel .story-trigger-scroll { flex-basis: 25px; width: 25px; height: 28px; font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-panel .story-trigger-chips { scroll-behavior: auto; }
  .chat-panel .story-trigger-chip { transition: none; }
}


/* Modo Jogo: catálogo de personagens originais e escolhas ramificadas. */
.game-mode-view{min-width:0}
.game-mode-heading{margin:0 0 26px;max-width:860px}
.game-mode-eyebrow{display:flex;align-items:center;gap:9px;color:#c2a4ff;font-weight:850;font-size:11px;letter-spacing:1.5px}
.game-mode-eyebrow span{font-size:21px;filter:drop-shadow(0 0 9px #a477ff88)}
.game-mode-heading h1{font-size:clamp(30px,3.6vw,45px);letter-spacing:-1.6px;margin:13px 0 8px;line-height:1.1}
.game-mode-heading h1 span{background:linear-gradient(100deg,#c3a5ff,#f0a6d5);background-clip:text;-webkit-background-clip:text;color:transparent}
.game-mode-heading p{max-width:720px;margin:0;color:#b9b4c6}
.game-mode-toolbar{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(170px,.8fr) auto;align-items:end;gap:12px;margin:22px 0 16px}
.game-mode-search{height:47px;display:flex;align-items:center;gap:10px;min-width:0;padding:0 14px;border:1px solid #4a3b5e;background:#19171f;border-radius:13px;color:#b9a0ff}
.game-mode-search>span{font-size:22px;line-height:1}
.game-mode-search input{min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}
.game-mode-search input::placeholder{color:#898397}
.game-category-control{display:flex;flex-direction:column;gap:6px;min-width:0}
.game-category-control>span{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#a99fc0}
.game-category-control select{width:100%;height:47px;padding:0 13px;border:1px solid #4a3b5e;border-radius:13px;background:#19171f;color:var(--text);outline:none;font-size:13px}
.game-clear-filters{height:47px;white-space:nowrap;color:#c9b7f7}
.game-mode-intro{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:11px 14px;border:1px solid #a47ce72b;background:linear-gradient(100deg,#9b6cfb12,#e7a1d50b);border-radius:12px;color:#b8afcb}
.game-mode-intro>span{color:#c5a5ff;font-size:18px;flex-shrink:0}
.game-mode-intro p{margin:0;font-size:12px;line-height:1.5}
.game-character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;align-items:stretch}
.game-character-card{min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(155deg,#211e2b,#141419);box-shadow:0 10px 30px #0002;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.game-character-card:hover{transform:translateY(-3px);border-color:#b49aff88;box-shadow:0 16px 35px #0004,0 0 0 1px #b49aff0b}
.game-character-art{height:180px;position:relative;overflow:hidden;background:#211a35}
.game-character-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 32%;transition:transform .35s ease}
.game-character-card:hover .game-character-art img{transform:scale(1.035)}
.game-character-art:after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(transparent,#15131be8);pointer-events:none}
.game-character-art-label{position:absolute;left:12px;bottom:11px;z-index:1;padding:5px 8px;border:1px solid #ffffff30;border-radius:99px;background:#11101ad9;color:#eadfff;font-size:9px;font-weight:850;letter-spacing:.7px}
.game-character-art-symbol{position:absolute;right:13px;top:12px;z-index:1;width:34px;height:34px;display:grid;place-items:center;border:1px solid #ffffff36;border-radius:11px;background:#171420a8;color:#f1dfff;font-size:18px;backdrop-filter:blur(8px)}
.game-character-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:15px 16px 16px;min-width:0}
.game-character-tag{color:#cbb2ff;font-size:9px;font-weight:850;letter-spacing:.7px;text-transform:uppercase}
.game-character-info h3{font-size:18px;letter-spacing:-.3px;margin:8px 0 7px}
.game-character-info p{color:#b8b1c7;font-size:12px;line-height:1.58;margin:0 0 16px;flex:1}
.game-character-meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:14px;color:#938aa7;font-size:10px}
.game-character-meta span:first-child{color:#c1b1e7}
.game-start-button{width:100%;display:flex;justify-content:center;align-items:center;gap:9px;padding:11px 13px;border-radius:11px;font-size:12px}
.game-start-button:disabled{opacity:.65;cursor:wait;transform:none}

/* Escolhas do Modo Jogo aparecem como três cards acima dos gatilhos. */
.game-choice-panel{flex-shrink:0;margin:0 12px 10px;padding:12px;border:1px solid #a977ff8a;border-radius:16px;background:linear-gradient(135deg,#251d36ed,#17151fed);box-shadow:0 0 22px #8f5bff14}
.game-choice-panel.hidden{display:none!important}
.game-choice-heading{display:flex;align-items:center;gap:10px;margin:0 0 11px}
.game-choice-heading-icon{flex:0 0 34px;height:34px;display:grid;place-items:center;border:1px solid #b58aff52;border-radius:11px;background:#ad7aff1b;color:#e0c0ff;font-size:22px}
.game-choice-heading h3{font-size:14px;margin:0 0 3px;color:#eadfff}
.game-choice-heading p{font-size:11px;line-height:1.4;color:#a9a0bd;margin:0}
.game-choice-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.game-choice-card{display:grid;grid-template-columns:27px minmax(0,1fr);align-content:start;align-items:start;gap:9px;min-width:0;min-height:95px;padding:11px 10px;border:1px solid #ffffff16;border-radius:12px;background:#ffffff05;color:var(--text);text-align:left;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.game-choice-card:hover,.game-choice-card:focus-visible{outline:0;border-color:#c09bff;background:#a77aff14;transform:translateY(-1px)}
.game-choice-number{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#c4a3ff,#eb9fda);color:#20152b;font-size:12px;font-weight:900}
.game-choice-copy{min-width:0;display:flex;flex-direction:column;gap:6px}
.game-choice-copy strong{font-size:12px;line-height:1.35;color:#eee6ff;overflow-wrap:anywhere}
.game-choice-copy small{font-size:11px;line-height:1.45;color:#aaa2ba;overflow-wrap:anywhere}
.game-choice-use{grid-column:2;color:#c6a6ff;font-size:10px;font-weight:750;margin-top:3px}
.game-choice-help{margin:9px 1px 0;color:#857c99;font-size:10px;line-height:1.4}

@media(max-width:1100px){.game-character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-mode-toolbar{grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr)}.game-clear-filters{grid-column:1/-1;justify-self:start;height:39px}.game-character-art{height:190px}}
@media(max-width:900px){.sidebar{overflow-x:auto;scrollbar-width:none}.sidebar::-webkit-scrollbar{display:none}.side-link{flex:0 0 auto;white-space:nowrap}.game-mode-toolbar{grid-template-columns:minmax(0,1fr) minmax(140px,.7fr)}.game-clear-filters{grid-column:auto;justify-self:stretch}.game-character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.game-mode-heading{margin-bottom:20px}.game-mode-heading h1{font-size:31px}.game-mode-toolbar{grid-template-columns:1fr 1fr;gap:9px}.game-mode-search{grid-column:1/-1}.game-category-control select{font-size:12px}.game-clear-filters{height:43px;font-size:11px;padding:8px}.game-mode-intro{align-items:flex-start;padding:10px 11px}.game-mode-intro p{font-size:11px}.game-character-grid{grid-template-columns:1fr;gap:13px}.game-character-card{display:grid;grid-template-columns:126px minmax(0,1fr);min-height:188px}.game-character-art{height:100%;min-height:188px}.game-character-art img{position:absolute;inset:0;height:100%;object-position:48% center}.game-character-art:after{inset:0;background:linear-gradient(90deg,transparent 46%,#15131b85)}.game-character-art-label{left:7px;right:7px;bottom:7px;font-size:7px;letter-spacing:.25px;padding:4px 5px;text-align:center}.game-character-art-symbol{right:7px;top:7px;width:27px;height:27px;font-size:14px}.game-character-info{padding:12px;justify-content:flex-start}.game-character-info h3{font-size:16px;margin:6px 0}.game-character-info p{font-size:11px;line-height:1.45;margin-bottom:9px}.game-character-meta{font-size:9px;gap:4px 7px;margin-bottom:9px}.game-start-button{padding:9px;font-size:11px}.game-choice-panel{margin:0 7px 8px;padding:10px}.game-choice-heading h3{font-size:13px}.game-choice-heading p{font-size:10px}.game-choice-options{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 6px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.game-choice-options::-webkit-scrollbar{height:4px}.game-choice-card{flex:0 0 82%;min-height:96px;scroll-snap-align:start;padding:10px}.game-choice-copy strong{font-size:12px}.game-choice-copy small{font-size:10px}.game-choice-help{font-size:9px}}

/* Modo Jogo: retratos originais com enquadramento próprio por personagem. */
.game-character-grid { gap: 19px; }
.game-character-card {
  border-color: #ffffff1c;
  background: linear-gradient(155deg, #211d2c, #141419 78%);
  box-shadow: 0 12px 32px #0003;
}
.game-character-art {
  height: 218px;
  background: radial-gradient(ellipse at 70% 25%, #695191, #201b30 75%);
  isolation: isolate;
}
.game-character-art img {
  object-position: var(--game-art-position, 50% 35%);
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.015);
}
.game-character-card:hover .game-character-art img { transform: scale(1.065); }
.game-character-art:after {
  inset: 18% 0 0;
  background: linear-gradient(180deg, #11101a00 24%, #11101a35 62%, #15131bf2 100%);
}
.game-character-art-label {
  left: 13px;
  bottom: 12px;
  padding: 6px 9px;
  border-color: #ffffff3a;
  background: #11101adc;
  backdrop-filter: blur(8px);
}
.game-character-art-symbol {
  width: 38px;
  height: 38px;
  border-color: #ffffff50;
  box-shadow: 0 5px 18px #0005;
}
.game-character-tag {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 3px 8px;
  border: 1px solid #c7a8ff30;
  border-radius: 999px;
  background: #a477ff0d;
  letter-spacing: .9px;
}
.game-character-info h3 { margin-top: 9px; }
.game-start-button:focus-visible {
  outline: 2px solid #e0caff;
  outline-offset: 3px;
}
@media(max-width:1100px) {
  .game-character-art { height: 228px; }
}
@media(max-width:600px) {
  .game-character-art { height: 100%; min-height: 196px; }
  .game-character-art img {
    object-position: var(--game-art-position-mobile, var(--game-art-position, 50% 50%));
  }
  .game-character-card:hover .game-character-art img { transform: scale(1.025); }
}
@media(prefers-reduced-motion:reduce) {
  .game-character-art img,
  .game-character-card:hover .game-character-art img { transition: none; transform: none; }
}

/* Seleção de servidor da IA por navegador, roteada pelo Cloudflare Worker. */
.ai-provider-card { margin-top: 18px; }
.profile-settings-card .ai-provider-select,
.profile-settings-card .ai-model-input {
  display: block; width: 100%; min-height: 44px; padding: 12px 13px;
  color: var(--text); background: #111116; border: 1px solid var(--line);
  border-radius: 11px; outline: none;
}
.profile-settings-card .ai-provider-select:focus,
.profile-settings-card .ai-model-input:focus {
  border-color: var(--user-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--user-accent, var(--accent)) 13%, transparent);
}
.ai-provider-note {
  margin: 12px 0; padding: 12px 14px; border: 1px solid #ffffff12;
  border-radius: 12px; background: #ffffff04; color: var(--muted);
  font-size: 12px; line-height: 1.6;
}
.ai-model-wrap { margin-top: 14px; }
.ai-provider-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ai-provider-actions button { font-size: 12px; }
.ai-provider-status { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.ai-provider-status.success { color: #8ce2b0; }
.ai-provider-status.error { color: #ff9da8; }
@media (max-width: 540px) {
  .ai-provider-actions { align-items: stretch; }
  .ai-provider-actions .button { flex: 1 1 100%; }
}

/* Modo Jogo: botão flutuante e painel de escolhas sobre a conversa.
   Esta regra altera apenas a apresentação das opções narrativas. */
.chat-panel { position: relative; }
.game-choice-toggle {
  position: absolute;
  z-index: 28;
  right: 14px;
  top: auto;
  bottom: 106px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f0e5ff;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 8px 18px #0008);
  transition: opacity .18s ease, transform .18s ease;
}
.game-choice-toggle.hidden { display: none !important; }
.game-choice-toggle.is-dragging { cursor: grabbing; transition: none; z-index: 40; }
.game-choice-toggle.is-dragging .game-choice-toggle-icon { transform: scale(1.04); }
.game-choice-toggle:hover { transform: translateY(-2px); }
.game-choice-toggle:focus-visible { outline: 2px solid #ead7ff; outline-offset: 5px; border-radius: 16px; }
@keyframes game-choice-toggle-pulse {
  0%, 100% {
    box-shadow: 0 0 0 5px #9b66ff12, 0 0 22px #a56cff42, inset 0 0 18px #c28aff12;
  }
  50% {
    box-shadow: 0 0 0 9px #9b66ff0a, 0 0 36px #b77aff95, inset 0 0 22px #c28aff24;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .game-choice-toggle:not(.is-open):not(.is-dragging) .game-choice-toggle-icon {
    animation: game-choice-toggle-pulse 2s ease-in-out infinite;
  }
}
.game-choice-toggle-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #bd8cff;
  border-radius: 50%;
  background: linear-gradient(145deg, #33234b, #191420);
  color: #e8caff;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 0 0 5px #9b66ff12, 0 0 28px #a56cff55, inset 0 0 18px #c28aff12;
}
.game-choice-toggle-label {
  padding: 7px 10px;
  border: 1px solid #76599a;
  border-radius: 9px;
  background: #17131fef;
  color: #f0e5ff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 5px 18px #0005;
}
.game-choice-toggle:hover .game-choice-toggle-icon,
.game-choice-toggle.is-open .game-choice-toggle-icon {
  border-color: #dfbaff;
  box-shadow: 0 0 0 5px #9b66ff20, 0 0 34px #b77aff80, inset 0 0 20px #c28aff1b;
}
.game-choice-panel {
  position: absolute;
  z-index: 32;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: block;
  width: min(380px, calc(100% - 28px));
  max-height: calc(100% - 132px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 14px;
  border: 1px solid #a977ffb8;
  border-radius: 18px;
  background: linear-gradient(145deg, #20182ded, #15131df7 82%);
  box-shadow: 0 22px 70px #0009, 0 0 32px #9a60ff24;
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
  scrollbar-color: #765493 #1a1522;
}
.game-choice-panel.hidden { display: none !important; }
.game-choice-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  padding-right: 26px;
}
.game-choice-heading-icon {
  flex: 0 0 38px;
  height: 38px;
  border: 1px solid #b58aff62;
  border-radius: 12px;
  background: #ad7aff1b;
  color: #e0c0ff;
  font-size: 23px;
}
.game-choice-heading h3 { font-size: 14px; margin: 0 0 4px; color: #eadfff; }
.game-choice-heading p { font-size: 11px; line-height: 1.4; color: #a9a0bd; margin: 0; }
.game-choice-close {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #a9a0bd;
  font-size: 23px;
  line-height: 1;
}
.game-choice-close:hover { border-color: #ffffff20; background: #ffffff0b; color: #fff; }
.game-choice-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.game-choice-card {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 14px;
  align-items: start;
  gap: 10px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid #ffffff18;
  border-radius: 13px;
  background: linear-gradient(130deg, #ffffff08, #ffffff03);
  color: var(--text);
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.game-choice-card:hover, .game-choice-card:focus-visible {
  outline: 0;
  border-color: #c09bff;
  background: #a77aff18;
  transform: translateY(-1px);
}
.game-choice-number { width: 29px; height: 29px; font-size: 12px; }
.game-choice-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.game-choice-copy strong { font-size: 12px; line-height: 1.4; color: #eee6ff; overflow-wrap: anywhere; }
.game-choice-copy small { font-size: 11px; line-height: 1.5; color: #b5acc7; overflow-wrap: anywhere; }
.game-choice-use { grid-column: auto; align-self: center; color: #c6a6ff; font-size: 16px; font-weight: 750; margin: 0; }
.game-choice-help { margin: 11px 2px 1px; color: #958ba8; font-size: 10px; line-height: 1.45; }
@media (max-width: 600px) {
  .game-choice-toggle { right: 9px; bottom: 135px; }
  .game-choice-toggle-icon { width: 51px; height: 51px; font-size: 27px; }
  .game-choice-toggle-label { font-size: 10px; padding: 6px 8px; }
  .game-choice-panel {
    right: 8px;
    width: min(360px, calc(100% - 16px));
    max-height: calc(100% - 115px);
    padding: 12px;
    border-radius: 16px;
  }
  .game-choice-card { grid-template-columns: 27px minmax(0, 1fr) 12px; gap: 8px; padding: 10px; min-height: 80px; }
  .game-choice-number { width: 27px; height: 27px; }
  .game-choice-copy strong { font-size: 11px; }
  .game-choice-copy small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-choice-toggle, .game-choice-toggle-icon, .game-choice-card { transition: none; }
  .game-choice-toggle-icon { animation: none !important; }
}



/* Ajuste pontual: evitar corte do rótulo e rolagem horizontal no painel flutuante. */
.game-choice-panel { overflow-x: hidden; overflow-y: auto; }
.game-choice-options { width: 100%; min-width: 0; overflow-x: hidden; }
.game-choice-card { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; grid-template-columns: 29px minmax(0, 1fr) 18px; }
.game-choice-copy { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.game-choice-use { width: 18px; min-width: 18px; max-width: 18px; display: grid; place-items: center; overflow: hidden; white-space: nowrap; font-size: 18px; line-height: 1; }
@media (max-width: 600px) { .game-choice-card { grid-template-columns: 27px minmax(0, 1fr) 18px; } }


/* Modo Jogo: painel persistente da aventura (missão, inventário, diário e vínculos). */
.game-adventure-toggle {
  position: absolute;
  z-index: 29;
  right: 142px;
  bottom: 119px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #8d70bd;
  border-radius: 15px;
  background: linear-gradient(145deg, #2b203c, #17131f);
  color: #ddc4ff;
  font-size: 22px;
  box-shadow: 0 5px 18px #0007, inset 0 0 14px #a77aff12;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.game-adventure-toggle.hidden { display: none !important; }
.game-adventure-toggle:hover, .game-adventure-toggle.is-open { border-color: #d2adff; background: #322446; transform: translateY(-1px); }
.game-adventure-panel {
  position: absolute;
  z-index: 35;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: min(420px, calc(100% - 28px));
  max-height: calc(100% - 132px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #a977ffb8;
  border-radius: 18px;
  background: linear-gradient(145deg, #21192fee, #15131dfb 82%);
  box-shadow: 0 22px 70px #0009, 0 0 32px #9a60ff24;
  backdrop-filter: blur(18px);
}
.game-adventure-panel.hidden { display: none !important; }
.game-adventure-heading { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid #ffffff12; flex: 0 0 auto; }
.game-adventure-heading-icon { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border: 1px solid #b58aff62; border-radius: 12px; background: #ad7aff1b; color: #e0c0ff; font-size: 22px; }
.game-adventure-heading h3 { margin: 0 0 4px; color: #eadfff; font-size: 14px; }
.game-adventure-heading p { margin: 0; color: #a9a0bd; font-size: 11px; line-height: 1.4; }
.game-adventure-close { margin-left: auto; align-self: flex-start; flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #bcb1cf; font-size: 22px; }
.game-adventure-close:hover { border-color: #ffffff20; background: #ffffff0b; color: #fff; }
.game-adventure-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 10px 12px; flex: 0 0 auto; }
.game-adventure-tabs button { min-width: 0; padding: 8px 4px; border: 1px solid #ffffff12; border-radius: 9px; background: #ffffff05; color: #bcb3cd; font-size: 10px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-adventure-tabs button.active, .game-adventure-tabs button[aria-selected="true"] { border-color: #9e78d2; background: #8d60c926; color: #f0e3ff; }
.game-adventure-content { min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 0 13px 12px; scrollbar-width: thin; scrollbar-color: #765493 #1a1522; }
.game-adventure-mission-card { padding: 13px; border: 1px solid #ffffff17; border-radius: 13px; background: linear-gradient(135deg, #a77aff14, #ffffff03); }
.game-adventure-kicker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; color: #bdb0d5; font-size: 9px; font-weight: 850; letter-spacing: .8px; }
.game-adventure-status { padding: 4px 7px; border-radius: 999px; background: #8ce2b018; color: #98e6b6; letter-spacing: 0; font-size: 9px; }
.game-adventure-status.completed { background: #8ce2b01c; color: #9ff0bc; }
.game-adventure-status.paused { background: #d6b86e18; color: #e9cc81; }
.game-adventure-status.failed { background: #ff7e8a18; color: #ffadb5; }
.game-adventure-mission-card h4 { margin: 12px 0 7px; color: #f0e7ff; font-size: 14px; line-height: 1.4; }
.game-adventure-mission-card p { margin: 0; color: #c0b7d0; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.game-adventure-next-step { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; padding: 12px; border: 1px solid #ffffff12; border-radius: 12px; background: #ffffff04; }
.game-adventure-next-step > span { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #b48aff1c; color: #d9bcff; }
.game-adventure-next-step strong { display: block; margin: 1px 0 5px; color: #e7d9ff; font-size: 11px; }
.game-adventure-next-step p { margin: 0; color: #b8aec9; font-size: 11px; line-height: 1.5; }
.game-adventure-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.game-adventure-stats div { display: flex; flex-direction: column; gap: 4px; padding: 9px 7px; border: 1px solid #ffffff10; border-radius: 10px; background: #ffffff04; text-align: center; }
.game-adventure-stats strong { color: #e7d5ff; font-size: 16px; }
.game-adventure-stats span { color: #9f96b2; font-size: 10px; }
.game-adventure-section-title { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; color: #e8ddfa; }
.game-adventure-section-title h4 { margin: 0; font-size: 12px; }
.game-adventure-section-title span { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: #b48aff22; color: #d9bcff; text-align: center; font-size: 10px; }
.game-adventure-section-spaced { margin-top: 18px; }
.game-adventure-entry { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; padding: 10px; border: 1px solid #ffffff13; border-radius: 11px; background: #ffffff04; }
.game-adventure-entry-icon { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #9e73d51a; color: #d9bcff; }
.game-adventure-entry-copy { min-width: 0; flex: 1; }
.game-adventure-entry-copy strong { display: block; color: #eee5ff; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.game-adventure-entry-copy p { margin: 5px 0 0; color: #b0a7c1; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.game-adventure-entry-copy small { display: inline-block; margin-top: 5px; color: #9d8cbb; font-size: 9px; }
.game-adventure-muted-state { color: #dfb6aa !important; }
.game-adventure-empty { padding: 22px 12px; border: 1px dashed #ffffff1b; border-radius: 12px; text-align: center; }
.game-adventure-empty strong { color: #e6d8fb; font-size: 12px; }
.game-adventure-empty p { margin: 7px 0 0; color: #a9a0bd; font-size: 10px; line-height: 1.5; }
.game-adventure-diary { border-left: 1px solid #755796; margin: 5px 0 0 7px; padding-left: 13px; }
.game-adventure-diary-entry { position: relative; padding: 0 0 15px; }
.game-adventure-diary-entry:last-child { padding-bottom: 2px; }
.game-adventure-diary-dot { position: absolute; left: -18px; top: 3px; width: 9px; height: 9px; border: 2px solid #21192f; border-radius: 50%; background: #bf9bff; box-shadow: 0 0 0 1px #a77aff7a; }
.game-adventure-diary-entry small { color: #a595c0; font-size: 9px; }
.game-adventure-diary-entry p { margin: 4px 0 0; color: #c4bbd3; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.game-adventure-relationship { padding: 11px; margin-top: 8px; border: 1px solid #ffffff13; border-radius: 12px; background: #ffffff04; }
.game-adventure-relationship-top { display: flex; align-items: center; gap: 9px; }
.game-adventure-relationship-top .game-adventure-entry-copy { flex: 1; }
.game-adventure-relationship-top b { color: #d8c0ff; font-size: 11px; }
.game-adventure-relationship-top .game-adventure-entry-copy p { margin-top: 3px; }
.game-adventure-trust-track { height: 5px; margin-top: 10px; border-radius: 999px; background: #ffffff12; overflow: hidden; }
.game-adventure-trust-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8c6cdb, #e6a5d2); }
.game-adventure-relationship-notes { margin: 8px 0 0; color: #a9a0bd; font-size: 10px; line-height: 1.5; }
.game-adventure-footnote { margin: 0; padding: 0 14px 12px; color: #827993; font-size: 9px; line-height: 1.5; flex: 0 0 auto; }
@media (max-width: 600px) {
  .game-adventure-toggle { right: 150px; bottom: 151px; width: 41px; height: 41px; border-radius: 13px; font-size: 20px; }
  .game-adventure-panel { right: 8px; width: min(370px, calc(100% - 16px)); max-height: calc(100% - 118px); border-radius: 16px; }
  .game-adventure-heading { padding: 12px; }
  .game-adventure-heading-icon { flex-basis: 34px; height: 34px; }
  .game-adventure-tabs { padding: 8px; gap: 4px; }
  .game-adventure-tabs button { font-size: 9px; padding: 8px 2px; }
  .game-adventure-content { padding: 0 9px 10px; }
  .game-adventure-footnote { padding: 0 10px 10px; }
}


/* Modo Jogo: controles RPG em um dock único e responsivo para desktop e celular. */
.chat-panel .game-floating-dock {
  position: absolute;
  z-index: 34;
  right: 14px;
  bottom: 134px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 20px);
  pointer-events: none;
}
.chat-panel .game-floating-dock > button { pointer-events: auto; flex-shrink: 0; }
.chat-panel .game-floating-dock.is-dragging { transition: none; }
.chat-panel .game-choice-toggle {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  margin: 0;
  flex-shrink: 0;
}
.chat-panel .game-adventure-toggle {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  align-self: flex-end;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
}
.chat-panel .game-choice-toggle.is-dragging { cursor: grabbing; }
.chat-panel .game-floating-dock.is-dragging .game-choice-toggle-label { pointer-events: none; }
@media (min-width: 601px) {
  .chat-panel .game-floating-dock { right: 14px; bottom: 136px; gap: 10px; }
  .chat-panel .game-adventure-panel,
  .chat-panel .game-choice-panel { right: 14px; max-width: calc(100% - 28px); }
}
@media (max-width: 600px) {
  .chat-panel .game-floating-dock { right: 8px; bottom: 128px; gap: 7px; max-width: calc(100% - 16px); }
  .chat-panel .game-choice-toggle { gap: 5px; }
  .chat-panel .game-choice-toggle-icon { width: 49px; height: 49px; font-size: 26px; }
  .chat-panel .game-choice-toggle-label { padding: 5px 7px; font-size: 9px; }
  .chat-panel .game-adventure-toggle { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; font-size: 19px; }
  .chat-panel .game-adventure-panel { right: 8px; width: min(370px, calc(100% - 16px)); max-height: calc(100% - 118px); }
  .chat-panel .game-choice-panel { right: 8px; width: min(360px, calc(100% - 16px)); max-height: calc(100% - 118px); }
}

/* Controles RPG empilhados: o mesmo arranjo visual no PC e no celular. */
.chat-panel .game-floating-dock {
  position: absolute;
  z-index: 34;
  right: 14px;
  bottom: 134px;
  left: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  width: max-content;
  max-width: calc(100% - 20px);
  pointer-events: none;
  transition: none;
}
.chat-panel .game-floating-dock > button { pointer-events: auto; flex-shrink: 0; }
.chat-panel .game-floating-dock.is-dragging { transition: none; }
.chat-panel .game-floating-dock .game-choice-toggle,
.chat-panel .game-floating-dock .game-adventure-toggle {
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: max-content;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f0e5ff;
  line-height: 1.2;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.chat-panel .game-floating-dock .game-choice-toggle-icon,
.chat-panel .game-floating-dock .game-adventure-toggle-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid #bd8cff;
  border-radius: 50%;
  background: linear-gradient(145deg, #33234b, #191420);
  color: #e8caff;
  font-size: 27px;
  line-height: 1;
  box-shadow: 0 0 0 5px #9b66ff12, 0 0 25px #a56cff50, inset 0 0 18px #c28aff12;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.chat-panel .game-floating-dock .game-adventure-toggle-icon {
  width: 43px;
  height: 43px;
  flex-basis: 43px;
  border-radius: 15px;
  font-size: 21px;
}
.chat-panel .game-choice-toggle-label,
.chat-panel .game-adventure-toggle-label {
  display: block;
  max-width: 150px;
  padding: 6px 9px;
  border: 1px solid #76599a;
  border-radius: 9px;
  background: #17131fef;
  color: #f0e5ff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 5px 18px #0005;
}
.chat-panel .game-adventure-toggle-label { font-size: 9px; padding: 5px 7px; }
.chat-panel .game-choice-toggle:hover .game-choice-toggle-icon,
.chat-panel .game-choice-toggle.is-open .game-choice-toggle-icon,
.chat-panel .game-adventure-toggle:hover .game-adventure-toggle-icon,
.chat-panel .game-adventure-toggle.is-open .game-adventure-toggle-icon {
  border-color: #dfbaff;
  box-shadow: 0 0 0 5px #9b66ff20, 0 0 34px #b77aff80, inset 0 0 20px #c28aff1b;
}
.chat-panel .game-floating-dock .game-choice-toggle.is-dragging { cursor: grabbing; }
.chat-panel .game-floating-dock .game-choice-toggle.hidden,
.chat-panel .game-floating-dock .game-adventure-toggle.hidden { display: none !important; }
@media (min-width: 601px) {
  .chat-panel .game-floating-dock { right: 14px; bottom: 134px; gap: 9px; }
  .chat-panel .game-choice-panel,
  .chat-panel .game-adventure-panel { right: 14px; max-width: calc(100% - 28px); }
}
@media (max-width: 600px) {
  .chat-panel .game-floating-dock { right: 8px; bottom: 128px; gap: 7px; max-width: calc(100% - 16px); }
  .chat-panel .game-floating-dock .game-choice-toggle-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 25px; }
  .chat-panel .game-floating-dock .game-adventure-toggle-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 19px; border-radius: 13px; }
  .chat-panel .game-floating-dock .game-choice-toggle-label { font-size: 9px; padding: 5px 7px; }
  .chat-panel .game-floating-dock .game-adventure-toggle-label { font-size: 8px; padding: 5px 6px; }
  .chat-panel .game-choice-panel { right: 8px; width: min(360px, calc(100% - 16px)); max-height: calc(100% - 118px); }
  .chat-panel .game-adventure-panel { right: 8px; width: min(370px, calc(100% - 16px)); max-height: calc(100% - 118px); }
}


/* Carteira de moedas e checkout InfinitePay */
.wallet-header-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 12px;border:1px solid #6d5b93;border-radius:999px;background:linear-gradient(135deg,#2a2238,#201a2b);color:#f1e8ff;font-weight:800;font-size:13px;flex-shrink:0;box-shadow:0 0 18px #8d6cff20}
.wallet-header-pill span:first-child{font-size:16px}
.wallet-header-pill:hover{border-color:#b9a0ff;transform:translateY(-1px)}
.wallet-view{max-width:1000px;margin:0 auto}
.wallet-heading h1{font-size:clamp(28px,3vw,40px);letter-spacing:-1.2px;margin:12px 0 8px}
.wallet-heading h1 span{background:linear-gradient(100deg,#c2a7ff,#f2addb);background-clip:text;color:transparent}
.wallet-balance-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 0 32px;padding:clamp(20px,4vw,30px);border:1px solid #7860a8;border-radius:22px;background:radial-gradient(ellipse at 92% 15%,#5a3c883b,transparent 40%),linear-gradient(135deg,#211b2e,#17171e);box-shadow:0 18px 50px #0002}
.wallet-balance-main{display:flex;align-items:center;gap:17px;min-width:0}
.wallet-balance-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#ffffff0a;border:1px solid #ffffff16;font-size:29px;flex-shrink:0}
.wallet-balance-main p{margin:0 0 7px;color:var(--muted);font-size:13px}
.wallet-balance-number{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.wallet-balance-number strong{font-size:clamp(30px,4vw,42px);line-height:1;color:#e8c66e;letter-spacing:-1px}
.wallet-balance-number span{color:#c7bbd9;font-size:13px}
.wallet-cost-note{margin:0;color:#a9a1b8;font-size:12px;line-height:1.5;max-width:330px;text-align:right}
.wallet-section{margin:0 0 34px}
.wallet-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.wallet-section-heading h2{font-size:20px;margin:0 0 5px}
.wallet-section-heading p{margin:0}
.wallet-payment-mark{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:#f0a6d518;color:#e9b4df;border:1px solid #f0a6d533;font-size:11px;font-weight:800}
.wallet-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.wallet-package-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:22px 18px 18px;border:1px solid #ffffff17;border-radius:18px;background:linear-gradient(155deg,#201e29,#17171d);overflow:hidden}
.wallet-package-card.featured{border-color:#9470db;box-shadow:0 0 0 1px #9470db26,0 12px 30px #0002}
.wallet-package-card h3{margin:0 0 13px;font-size:17px}
.wallet-package-coins{font-size:24px;font-weight:850;color:#e7c66e;letter-spacing:-.6px}
.wallet-package-coins span{font-size:21px}
.wallet-package-card p{color:var(--muted);font-size:12px;line-height:1.5;min-height:38px;margin:8px 0 18px}
.wallet-package-price{font-size:23px;margin:0 0 17px;color:#f4f1f8}
.wallet-buy-button{width:100%;margin-top:auto;padding:11px 9px;font-size:12px}
.wallet-buy-button:disabled{opacity:.6;cursor:wait;transform:none}
.wallet-package-badge{position:absolute;top:0;right:0;padding:6px 9px;border-radius:0 0 0 12px;background:linear-gradient(120deg,#c0a5ff,#e6a5d2);color:#21172e;font-size:10px;font-weight:900}
.wallet-payment-note{margin:13px 0 0;color:#8b8599;font-size:11px;line-height:1.6}
.wallet-transactions{display:grid;gap:8px}
.wallet-transaction-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;border:1px solid #ffffff12;border-radius:13px;background:#19191f}
.wallet-transaction-meta{display:grid;gap:5px;min-width:0}
.wallet-transaction-meta strong{font-size:13px;overflow-wrap:anywhere}
.wallet-transaction-meta small{font-size:11px;color:#8e879d}
.wallet-delta{flex-shrink:0;font-size:12px;white-space:nowrap}
.wallet-delta.positive{color:#8ce2b0}
.wallet-delta.negative{color:#f0a6d5}
.wallet-empty-state,.wallet-loading{padding:22px;text-align:center;color:var(--muted);background:#19191f;border:1px dashed #393642;border-radius:13px;font-size:12px}
.wallet-back-button{margin:0 0 30px}
@media(max-width:760px){.wallet-packages{grid-template-columns:1fr}.wallet-package-card{padding:19px}.wallet-package-card p{min-height:0}.wallet-balance-card{align-items:flex-start;flex-direction:column}.wallet-cost-note{text-align:left;max-width:none}.wallet-header-pill{padding:7px 9px;min-height:34px;font-size:12px}.wallet-header-pill span:first-child{font-size:14px}.wallet-transaction-row{align-items:flex-start}.wallet-transaction-meta strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.wallet-header-pill:hover{transform:none}}


/* Cartão de saldo esgotado dentro do histórico do chat, alinhado ao visual do FamaChat. */
.wallet-empty-chat-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(100%, 620px);
  max-width: 100%;
  align-self: flex-start;
  margin: 2px 0 6px;
  padding: 0 4px;
  box-sizing: border-box;
  animation: wallet-empty-card-in .22s ease-out both;
}
.wallet-empty-chat-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #ffffff1c;
  background: linear-gradient(145deg, #30283e, #24202e);
  box-shadow: 0 4px 16px #0003;
  font-size: 22px;
}
.wallet-empty-chat-card {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 552px;
  padding: 17px 18px 14px;
  border: 1px solid #5a4778;
  border-radius: 16px;
  background: linear-gradient(145deg, #252033 0%, #1d1a27 68%, #241b30 100%);
  box-shadow: 0 12px 30px #0002, inset 0 1px #ffffff08;
}
.wallet-empty-chat-card h3 {
  margin: 0 0 5px;
  color: #f8f3ff;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -.2px;
}
.wallet-empty-chat-card p {
  margin: 0 0 15px;
  color: #d1c9e1;
  font-size: 13px;
  line-height: 1.55;
}
.wallet-empty-buy-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 47px;
  padding: 12px 16px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(105deg, #c0a1ff, #eca4d7);
  color: #21172e;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 5px 17px #b68cff20;
  transition: filter .18s ease, transform .18s ease;
}
.wallet-empty-buy-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.wallet-empty-packages-button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px 3px;
  border: 0;
  background: transparent;
  color: #c5a5ff;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
}
.wallet-empty-packages-button:hover { color: #e5d5ff; text-decoration: underline; }
.message-form-wallet-empty .message-input-wrap { opacity: .72; }
#message-input:disabled { cursor: not-allowed; }
#message-form .send-button:disabled,
#insert-asterisks-btn:disabled,
[data-story-trigger]:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.55);
  transform: none;
}
@keyframes wallet-empty-card-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 540px) {
  .wallet-empty-chat-row { gap: 8px; padding: 0; }
  .wallet-empty-chat-avatar { flex-basis: 31px; width: 31px; height: 31px; font-size: 17px; }
  .wallet-empty-chat-card { padding: 14px 13px 12px; border-radius: 14px; }
  .wallet-empty-chat-card h3 { font-size: 14px; }
  .wallet-empty-chat-card p { font-size: 12px; }
  .wallet-empty-buy-button { min-height: 44px; }
}


/* Correção mobile: a carteira precisa rolar mesmo após sair do chat fullscreen. */
html:has(#wallet-view:not(.hidden)),
body:has(#wallet-view:not(.hidden)) {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}
#wallet-view { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); }
@media (max-width: 760px) {
  #wallet-view { overflow: visible !important; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* Icone vetorial de moedas: renderiza de forma consistente em PCs, celulares e navegadores sem fonte de emoji. */
.fc-coin-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-0.14em;}
.wallet-header-pill .fc-coin-icon{width:16px;height:16px;vertical-align:middle;}
.wallet-balance-icon .fc-coin-icon{width:30px;height:30px;vertical-align:middle;}
.wallet-package-coins .fc-coin-icon{width:1em;height:1em;vertical-align:-0.12em;}
.wallet-empty-chat-avatar .fc-coin-icon{width:24px;height:24px;vertical-align:middle;}
.wallet-empty-buy-button .fc-coin-icon{width:14px;height:14px;margin-right:4px;vertical-align:-0.15em;}


/* Campo de código de recuperação: espaçamento mais claro e responsivo. */
#reset-code-group {
  margin: 16px 0 18px;
  padding: 14px;
  border: 1px solid #3c344d;
  border-radius: 14px;
  background: linear-gradient(145deg, #1b1923, #15141b);
}
#reset-code-group label {
  display: block;
  margin: 0 0 9px;
  color: #e5daf9;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}
.auth-card #reset-code {
  display: block;
  width: 100%;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #40384f;
  border-radius: 11px;
  background: #0f0e14;
  color: #f7f1ff;
  text-align: center;
  letter-spacing: .2em;
  font-size: 19px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 2px #0003;
}
.auth-card #reset-code::placeholder {
  color: #858091;
  opacity: 1;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.auth-card #reset-code:focus {
  border-color: #b9a0ff;
  outline: none;
  box-shadow: 0 0 0 3px #b9a0ff25;
}
#reset-code-group .fine-print {
  margin: 9px 2px 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 540px) {
  #reset-code-group { margin: 14px 0 16px; padding: 12px; }
  .auth-card #reset-code { height: 50px; padding: 11px 10px; font-size: 18px; letter-spacing: .17em; }
  .auth-card #reset-code::placeholder { font-size: 12px; letter-spacing: 0; }
  #reset-code-group .fine-print { font-size: 10px; }
}


/* Cadastro por código de confirmação de e-mail */
.signup-code-back { display:block; margin:12px auto 0; border:0; background:transparent; color:#c7a9ff; font-size:12px; font-weight:700; padding:8px 10px; }
.signup-code-back:hover { color:#f0a6d5; text-decoration:underline; }
.signup-code-back:focus-visible { outline:2px solid #b9a0ff; outline-offset:3px; border-radius:8px; }


/* FamaChat — login mobile inspirado no Modelo 3. Regras isoladas para celular; desktop preservado. */
.mobile-auth-hero { display: none; }
@media (max-width: 600px) {
  #auth-screen.auth-layout {
    width: 100%;
    max-width: 520px;
    min-height: calc(100svh - 62px);
    padding: 12px 16px 28px;
    gap: 15px;
    align-items: stretch;
    background:
      radial-gradient(ellipse at 78% 8%, rgba(106, 48, 171, .17), transparent 45%),
      radial-gradient(ellipse at 14% 34%, rgba(69, 36, 112, .13), transparent 48%);
  }
  #auth-screen .hero-copy { display: contents !important; }
  #auth-screen .hero-copy > .eyebrow,
  #auth-screen .hero-copy > h1,
  #auth-screen .hero-copy > p,
  #auth-screen .hero-copy > .feature-pills,
  #auth-screen .hero-copy > .app-coming-soon { display: none !important; }
  #auth-screen .mobile-auth-hero {
    display: block;
    order: 1;
    width: 100%;
    min-width: 0;
    position: relative;
    padding: 0 2px 2px;
    overflow: hidden;
  }
  #auth-screen .mobile-auth-visual {
    width: 100%;
    height: clamp(152px, 44vw, 205px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -2px auto 2px;
    position: relative;
    isolation: isolate;
  }
  #auth-screen .mobile-auth-visual::before {
    content: "";
    position: absolute;
    inset: 15% 2% 0;
    z-index: -1;
    background: radial-gradient(ellipse at 68% 52%, rgba(149, 70, 224, .22), transparent 58%);
    filter: blur(17px);
  }
  #auth-screen .mobile-auth-visual svg {
    display: block;
    width: min(100%, 420px);
    height: 100%;
    overflow: visible;
  }
  #auth-screen .mobile-auth-hero h2 {
    margin: 0 0 9px;
    color: #f6f0fc;
    font-size: clamp(30px, 8.4vw, 38px);
    line-height: 1.07;
    letter-spacing: -1.45px;
    font-weight: 850;
  }
  #auth-screen .mobile-auth-hero h2 span {
    background: linear-gradient(100deg, #c7a5ff 0%, #f0a8dc 58%, #a8a1ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  #auth-screen .mobile-auth-hero > p {
    margin: 0;
    max-width: 390px;
    color: #bdb5cc;
    font-size: 14px;
    line-height: 1.55;
  }
  #auth-screen .mobile-auth-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
  }
  #auth-screen .mobile-auth-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(210, 185, 255, .17);
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(255,255,255,.035);
    color: #d1c4e9;
    font-size: 10px;
    white-space: nowrap;
  }
  #auth-screen .auth-card {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 20px 17px 18px;
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(31,27,43,.98), rgba(15,14,22,.99) 72%);
    box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
  }
  #auth-screen .auth-card-brand { display: none !important; }
  #auth-screen .auth-tabs { margin: 0 0 19px; }
  #auth-screen .auth-tab { min-height: 42px; padding: 10px 8px; }
  #auth-screen .auth-card h2 { font-size: 21px; line-height: 1.23; margin-bottom: 6px; }
  #auth-screen .auth-card form > p.muted { margin: 0 0 17px; font-size: 13px; }
  #auth-screen .auth-card label { margin: 14px 0 7px; font-size: 12px; }
  #auth-screen .auth-card input { min-height: 46px; padding: 11px 12px; font-size: 14px; }
  #auth-screen .auth-card .full { margin-top: 13px; min-height: 47px; }
  #auth-screen .auth-card .fine-print { margin-top: 13px; line-height: 1.5; }
  #auth-screen .forgot-password-row { margin-top: 9px; }
  #auth-screen .google-login-container { margin-top: 11px; }
  #auth-screen .app-coming-soon { display: none !important; }
  #auth-screen .mobile-auth-hero + .eyebrow,
  #auth-screen .mobile-auth-hero + h1,
  #auth-screen .mobile-auth-hero + p,
  #auth-screen .mobile-auth-hero + .feature-pills { display: none !important; }
}
@media (max-width: 380px) {
  #auth-screen.auth-layout { padding-left: 12px; padding-right: 12px; }
  #auth-screen .mobile-auth-visual { height: 150px; }
  #auth-screen .mobile-auth-hero h2 { font-size: 30px; }
  #auth-screen .mobile-auth-pills { gap: 6px; }
  #auth-screen .mobile-auth-pills span { font-size: 9px; padding: 6px 8px; }
  #auth-screen .auth-card { padding: 18px 14px 16px; }
}


/* Refinamento mobile Modelo 3: reduz rolagem inicial sem alterar o desktop. */
@media (max-width: 600px) {
  #auth-screen.auth-layout {
    padding-top: 8px;
    padding-bottom: 20px;
    gap: 10px;
  }
  #auth-screen .mobile-auth-hero {
    padding-bottom: 0;
  }
  #auth-screen .mobile-auth-visual {
    height: clamp(112px, 35vw, 160px);
    margin: -1px auto 0;
  }
  #auth-screen .mobile-auth-hero h2 {
    font-size: clamp(27px, 7.6vw, 33px);
    line-height: 1.04;
    letter-spacing: -1.05px;
    margin-bottom: 6px;
  }
  #auth-screen .mobile-auth-hero > p {
    font-size: 13px;
    line-height: 1.42;
  }
  #auth-screen .mobile-auth-pills {
    gap: 6px;
    margin-top: 10px;
  }
  #auth-screen .mobile-auth-pills span {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 9px;
  }
  #auth-screen .auth-card {
    padding: 16px 14px 14px;
    border-radius: 19px;
  }
  #auth-screen .auth-tabs {
    margin-bottom: 14px;
  }
  #auth-screen .auth-tab {
    min-height: 38px;
    padding: 8px 7px;
  }
  #auth-screen .auth-card h2 {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 5px;
  }
  #auth-screen .auth-card form > p.muted {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.45;
  }
  #auth-screen .auth-card label {
    margin: 11px 0 6px;
    font-size: 11px;
  }
  #auth-screen .auth-card input {
    min-height: 42px;
    padding: 10px 11px;
    font-size: 13px;
  }
  #auth-screen .auth-card .full {
    margin-top: 10px;
    min-height: 43px;
  }
  #auth-screen .forgot-password-row {
    margin-top: 6px;
  }
  #auth-screen .google-login-container {
    margin-top: 8px;
  }
  #auth-screen .auth-card .fine-print {
    margin-top: 9px;
    font-size: 10px;
    line-height: 1.4;
  }
}
@media (max-width: 380px) {
  #auth-screen.auth-layout {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 16px;
  }
  #auth-screen .mobile-auth-visual {
    height: 116px;
  }
  #auth-screen .mobile-auth-hero h2 {
    font-size: 27px;
  }
  #auth-screen .mobile-auth-pills span {
    min-height: 26px;
    padding: 5px 8px;
    font-size: 8.5px;
  }
  #auth-screen .auth-card {
    padding: 14px 12px 12px;
  }
}


/* Correção do editor de personagens: conter a prévia e evitar sobreposição dos controles. */
#character-editor {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
}
#character-editor .editor-card {
  width: min(100%, 460px);
  max-height: min(90vh, 760px);
  max-height: min(90dvh, 760px);
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
}
#character-editor .editor-photo-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
}
#character-editor .editor-preview {
  width: 88px;
  height: 88px;
  min-width: 0;
  min-height: 0;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 15px;
  overflow: hidden;
  background: linear-gradient(135deg, #544078, #b28bc7);
  background-size: cover;
  background-position: center;
}
#character-editor .editor-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
#character-editor .editor-photo-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
#character-editor .editor-photo-actions > .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 9px 7px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-size: 12px;
}
#character-editor .editor-photo-actions .fine-print {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}
#character-editor .editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
#character-editor .editor-actions .button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 480px) {
  #character-editor { padding: 12px; }
  #character-editor .editor-card { padding: 16px; border-radius: 17px; }
  #character-editor .editor-card h2 { font-size: 20px; margin-bottom: 16px; }
  #character-editor .editor-photo-row { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; padding: 10px; }
  #character-editor .editor-preview { width: 68px; height: 68px; border-radius: 13px; }
  #character-editor .editor-photo-actions { gap: 7px; }
  #character-editor .editor-photo-actions > .button { padding: 8px 5px; font-size: 11px; }
  #character-editor .editor-actions { gap: 8px; margin-top: 18px; }
  #character-editor .editor-actions .button { flex: 1 1 120px; padding: 10px 8px; }
}
@media (max-width: 350px) {
  #character-editor .editor-photo-row { grid-template-columns: 1fr; }
  #character-editor .editor-preview { width: 76px; height: 76px; }
  #character-editor .editor-photo-actions > .button { font-size: 12px; }
}


/* Cabeçalho da conta — organização Modelo 3:
   moedas primeiro, separador, foto e nome do usuário, ação Sair. */
.topbar .top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  min-width: 0;
}

.topbar .wallet-header-pill {
  min-height: 42px;
  min-width: 82px;
  padding: 8px 15px;
  gap: 9px;
  border: 1px solid #7655ad;
  border-radius: 999px;
  background: linear-gradient(135deg, #251d33 0%, #1b1823 100%);
  color: #f5efff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1px;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 3px 14px #8d6cff12;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.topbar .wallet-header-pill:hover {
  border-color: #b99bff;
  background: linear-gradient(135deg, #302342 0%, #211a2c 100%);
  box-shadow: 0 0 18px #8d6cff25;
  transform: translateY(-1px);
}

.topbar .wallet-header-pill .fc-coin-icon {
  width: 16px;
  height: 16px;
}

.topbar .user-header-divider {
  display: block;
  flex: 0 0 1px;
  width: 1px;
  height: 28px;
  margin: 0 2px;
  background: linear-gradient(to bottom, transparent, #51485f 18%, #51485f 82%, transparent);
}

.topbar .user-header-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid #7655ad;
  box-shadow: 0 0 0 2px #7655ad20;
}

.topbar .user-label {
  display: inline-block;
  max-width: min(180px, 18vw);
  overflow: hidden;
  color: #c5bfce;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar .top-actions #logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid #393541;
  border-radius: 12px;
  background: #111015;
  color: #f4f1f8;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.topbar .top-actions #logout-btn:hover {
  border-color: #8d6cff;
  background: #1b1723;
  transform: translateY(-1px);
}

@media (max-width: 540px) {
  .topbar .top-actions {
    gap: 7px;
  }

  .topbar .wallet-header-pill {
    min-width: 70px;
    min-height: 36px;
    padding: 7px 10px;
    gap: 6px;
    font-size: 12px;
  }

  .topbar .wallet-header-pill .fc-coin-icon {
    width: 15px;
    height: 15px;
  }

  .topbar .user-header-divider {
    height: 24px;
    margin: 0 1px;
  }

  .topbar .user-header-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .topbar .user-label {
    max-width: 22vw;
    font-size: 12px;
  }

  .topbar .top-actions #logout-btn {
    min-width: 54px;
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 12px;
  }
}

@media (max-width: 370px) {
  .topbar .user-label {
    display: none;
  }

  .topbar .top-actions {
    gap: 6px;
  }
}


/* Resultado compacto da busca de personalidades — organização Modelo 2 */
.celebrity-live-results{margin:18px 0 8px;gap:10px}
.celebrity-live-card{
  width:100%;max-width:980px;min-width:0;
  display:grid;grid-template-columns:82px minmax(0,1fr) 172px;
  align-items:center;gap:16px;padding:13px 15px;
  border:1px solid #ffffff18;border-radius:17px;
  background:linear-gradient(110deg,#1c1a25 0%,#17171e 100%);
}
.celebrity-live-card:hover{transform:none;border-color:#9b7ce866}
.celebrity-live-art{
  width:82px;height:82px;min-height:82px;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:50%;border:2px solid #925fe5;
  background-position:center;background-size:cover;
}
.celebrity-live-art::before,.celebrity-live-art::after{display:none}
.celebrity-live-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.celebrity-live-info{
  min-width:0;padding:2px 0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:0;
}
.celebrity-live-label{font-size:9px;letter-spacing:1.1px;color:#77e3b7;margin-bottom:5px}
.celebrity-live-info h3{font-size:17px;line-height:1.25;margin:0 0 5px;overflow-wrap:anywhere}
.celebrity-live-info p{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;max-height:3.1em;
  font-size:12px;line-height:1.55;color:#aaa4b8;margin:0;
}
.celebrity-live-actions{
  min-width:0;display:flex;flex-direction:column;align-items:stretch;
  justify-content:center;gap:10px;padding-left:15px;
  border-left:1px solid #ffffff16;
}
.celebrity-live-actions .button{
  width:100%;padding:11px 10px;border-radius:11px;
  font-size:12px;white-space:nowrap;
}
.celebrity-live-source{display:block;margin:0;text-align:center;color:#c7b5ff;font-size:11px;text-decoration:none;white-space:nowrap}
.celebrity-live-source:hover{text-decoration:underline}
@media(max-width:760px){
  .celebrity-live-card{grid-template-columns:68px minmax(0,1fr);gap:12px;padding:12px}
  .celebrity-live-art{width:68px;height:68px;min-height:68px}
  .celebrity-live-actions{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-end;padding:10px 0 0;border-left:0;border-top:1px solid #ffffff12}
  .celebrity-live-actions .button{width:auto;min-width:150px}
  .celebrity-live-source{margin-right:auto}
}
@media(max-width:420px){
  .celebrity-live-card{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:10px}
  .celebrity-live-art{width:58px;height:58px;min-height:58px}
  .celebrity-live-info h3{font-size:15px}
  .celebrity-live-info p{font-size:11px;-webkit-line-clamp:2}
  .celebrity-live-actions{gap:8px}
  .celebrity-live-actions .button{min-width:0;flex:1;padding:10px 8px;font-size:11px}
  .celebrity-live-source{font-size:10px}
}


/* Evita o zoom automático do Safari/iPhone ao tocar na busca de famosos.
   O Safari amplia inputs com fonte menor que 16px; manter 16px não altera
   o tamanho visual do campo, apenas impede a ampliação da página. */
@media (max-width: 900px) {
  #discover-view .search-row input[type="search"] {
    font-size: 16px !important;
  }
}


/* Data de nascimento no cadastro */
.birth-date-help { margin: 8px 0 0; }
#birth-date { color-scheme: dark; }


/* Data de nascimento editável nas configurações da conta */
#profile-birth-date { color-scheme: dark; }


/* Seletor de famosos/participantes no chat */
.group-participants-open { white-space: nowrap; }
.group-participant-overlay {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
  padding: 18px; background: rgba(5,4,10,.78); backdrop-filter: blur(7px);
}
.group-participant-overlay.hidden { display: none !important; }
.group-participant-card {
  width: min(100%,620px); max-height: min(88vh,820px); overflow: auto;
  border: 1px solid rgba(185,160,255,.58); border-radius: 22px; padding: 24px;
  color: var(--text); background: radial-gradient(ellipse at 15% 0%,rgba(114,72,156,.22),transparent 48%),#1b1924;
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
}
.group-participant-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.group-participant-heading-icon {
  width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center;
  border-radius: 14px; background: linear-gradient(135deg,#694a91,#342642);
  border: 1px solid rgba(196,167,255,.28); color: #eadfff; font-size: 23px;
}
.group-participant-heading-copy { min-width: 0; flex: 1; }
.group-participant-heading h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.4px; }
.group-participant-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.group-participant-close {
  flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: #ddd5ee; font-size: 25px; line-height: 1;
}
.group-participant-close:hover { background: #ffffff12; }
.group-participant-search-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 7px 5px 13px;
  border: 1px solid #8065a9; border-radius: 13px; background: #121117;
}
.group-participant-search-row > span { color: #bda7ec; font-size: 23px; }
.group-participant-search-row input {
  min-width: 0; flex: 1; border: 0; outline: 0; background: transparent;
  padding: 10px 2px; color: var(--text); font-size: 13px;
}
.group-participant-search-row .button { padding: 8px 13px; font-size: 12px; }
.group-participant-search-status { min-height: 17px; margin: 8px 2px 12px; color: #a9a2b5; font-size: 11px; }
.group-participant-results { display: grid; gap: 8px; max-height: 290px; overflow: auto; padding-right: 3px; }
.group-participant-result {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  min-height: 72px; padding: 9px 13px; border-radius: 14px;
  border: 1px solid #393344; background: linear-gradient(110deg,#201d2a,#191720);
  color: var(--text); transition: border-color .16s,background .16s;
}
.group-participant-result:hover { border-color: #9073c1; background: #292333; }
.group-participant-result.selected { border-color: #b18aff; background: linear-gradient(110deg,#3b2c51,#292234); }
.group-participant-result:disabled { opacity: .62; cursor: progress; }
.group-participant-result-avatar {
  width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center;
  overflow: hidden; border-radius: 50%; border: 1px solid #ffffff28;
  background: linear-gradient(135deg,#614a7a,#35283f); color: #f3eaff; font-size: 18px; font-weight: 800;
}
.group-participant-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.group-participant-result-initial.hidden { display: none; }
.group-participant-result-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.group-participant-result-copy strong { font-size: 14px; }
.group-participant-result-copy small { color: #a8a0b7; font-size: 10px; }
.group-participant-result-check {
  width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center;
  border: 1px solid #75618f; border-radius: 50%; color: #d9c8ff; font-weight: 800;
}
.group-participant-result.selected .group-participant-result-check { border-color: #c3a0ff; background: #aa81ed; color: #21172e; }
.group-participant-selected-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid #ffffff1c; }
.group-participant-selected-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; font-size: 12px; }
.group-participant-selected-heading span { color: #b9a0ff; font-variant-numeric: tabular-nums; }
.group-participant-selected { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.group-participant-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 4px 6px 4px 5px;
  border: 1px solid #8062a8; border-radius: 999px; background: #332641; color: #eee4ff; font-size: 12px;
}
.group-participant-chip img,.group-participant-chip-initial {
  width: 25px; height: 25px; flex: 0 0 25px; object-fit: cover; display: grid;
  place-items: center; border-radius: 50%; background: #70528e; color: #fff; font-weight: 800;
}
.group-participant-chip button {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent;
  color: #e4d5ff; font-size: 16px; line-height: 1;
}
.group-participant-chip button:hover { background: #ffffff18; }
.group-participant-empty,.group-participant-empty-results { padding: 12px; color: #9992a7; font-size: 12px; }
.group-participant-empty-results { border: 1px dashed #51455f; border-radius: 12px; text-align: center; }
.group-participant-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 19px; }
.group-participant-actions .button { min-width: 126px; }
.group-participant-actions .button-primary { min-width: 205px; }
.group-participant-note { margin: 12px 0 0; color: #8d879a; font-size: 10px; line-height: 1.5; text-align: center; }
body.group-participant-modal-open { overflow: hidden; }
.group-speaker-row .message { min-width: 150px; }
.group-participant-avatar { position: relative; background: linear-gradient(135deg,#514064,#302637); color: #fff; }
.group-participant-avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.group-participant-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 15px; font-weight: 800; color: #fff; }
.group-participant-avatar-fallback.hidden { display: none !important; }
@media(max-width:700px) {
  .chat-header { flex-wrap: wrap; }
  .group-participants-open { padding: 8px 10px; font-size: 11px; }
  .group-participant-card { padding: 17px; max-height: 92vh; border-radius: 18px; }
  .group-participant-heading h2 { font-size: 18px; }
  .group-participant-heading p { font-size: 11px; }
  .group-participant-result { min-height: 64px; padding: 8px; }
  .group-participant-result-avatar { width: 45px; height: 45px; flex-basis: 45px; }
  .group-participant-actions { flex-direction: column-reverse; }
  .group-participant-actions .button,.group-participant-actions .button-primary { width: 100%; }
}


/* Seletor de famosos/participantes no chat */
.group-participants-open { white-space: nowrap; }
.group-participant-overlay { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:18px; background:rgba(5,4,10,.78); backdrop-filter:blur(7px); }
.group-participant-overlay.hidden { display:none !important; }
.group-participant-card { width:min(100%,620px); max-height:min(88vh,820px); overflow:auto; border:1px solid rgba(185,160,255,.58); border-radius:22px; padding:24px; color:var(--text); background:radial-gradient(ellipse at 15% 0%,rgba(114,72,156,.22),transparent 48%),#1b1924; box-shadow:0 28px 90px rgba(0,0,0,.62); }
.group-participant-heading { display:flex; align-items:center; gap:13px; margin-bottom:20px; }
.group-participant-heading-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#694a91,#342642); border:1px solid rgba(196,167,255,.28); color:#eadfff; font-size:23px; }
.group-participant-heading-copy { min-width:0; flex:1; }
.group-participant-heading h2 { margin:0 0 4px; font-size:21px; letter-spacing:-.4px; }
.group-participant-heading p { margin:0; color:var(--muted); font-size:12px; }
.group-participant-close { flex:0 0 36px; width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:#ddd5ee; font-size:25px; line-height:1; }
.group-participant-close:hover { background:#ffffff12; }
.group-participant-search-row { display:flex; align-items:center; gap:10px; padding:5px 7px 5px 13px; border:1px solid #8065a9; border-radius:13px; background:#121117; }
.group-participant-search-row>span { color:#bda7ec; font-size:23px; }
.group-participant-search-row input { min-width:0; flex:1; border:0; outline:0; background:transparent; padding:10px 2px; color:var(--text); font-size:13px; }
.group-participant-search-row .button { padding:8px 13px; font-size:12px; }
.group-participant-search-status { min-height:17px; margin:8px 2px 12px; color:#a9a2b5; font-size:11px; }
.group-participant-results { display:grid; gap:8px; max-height:290px; overflow:auto; padding-right:3px; }
.group-participant-result { width:100%; display:flex; align-items:center; gap:12px; text-align:left; min-height:72px; padding:9px 13px; border-radius:14px; border:1px solid #393344; background:linear-gradient(110deg,#201d2a,#191720); color:var(--text); transition:border-color .16s,background .16s; }
.group-participant-result:hover { border-color:#9073c1; background:#292333; }
.group-participant-result.selected { border-color:#b18aff; background:linear-gradient(110deg,#3b2c51,#292234); }
.group-participant-result:disabled { opacity:.62; cursor:progress; }
.group-participant-result-avatar { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; overflow:hidden; border-radius:50%; border:1px solid #ffffff28; background:linear-gradient(135deg,#614a7a,#35283f); color:#f3eaff; font-size:18px; font-weight:800; }
.group-participant-result-avatar img { width:100%; height:100%; object-fit:cover; }
.group-participant-result-initial.hidden { display:none; }
.group-participant-result-copy { min-width:0; flex:1; display:grid; gap:4px; }
.group-participant-result-copy strong { font-size:14px; }
.group-participant-result-copy small { color:#a8a0b7; font-size:10px; }
.group-participant-result-check { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border:1px solid #75618f; border-radius:50%; color:#d9c8ff; font-weight:800; }
.group-participant-result.selected .group-participant-result-check { border-color:#c3a0ff; background:#aa81ed; color:#21172e; }
.group-participant-selected-section { margin-top:18px; padding-top:16px; border-top:1px solid #ffffff1c; }
.group-participant-selected-heading { display:flex; justify-content:space-between; gap:12px; margin-bottom:11px; font-size:12px; }
.group-participant-selected-heading span { color:#b9a0ff; font-variant-numeric:tabular-nums; }
.group-participant-selected { display:flex; flex-wrap:wrap; gap:8px; min-height:30px; }
.group-participant-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:4px 6px 4px 5px; border:1px solid #8062a8; border-radius:999px; background:#332641; color:#eee4ff; font-size:12px; }
.group-participant-chip img,.group-participant-chip-initial { width:25px; height:25px; flex:0 0 25px; object-fit:cover; display:grid; place-items:center; border-radius:50%; background:#70528e; color:#fff; font-weight:800; }
.group-participant-chip button { width:22px; height:22px; border:0; border-radius:50%; background:transparent; color:#e4d5ff; font-size:16px; line-height:1; }
.group-participant-chip button:hover { background:#ffffff18; }
.group-participant-empty,.group-participant-empty-results { padding:12px; color:#9992a7; font-size:12px; }
.group-participant-empty-results { border:1px dashed #51455f; border-radius:12px; text-align:center; }
.group-participant-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:19px; }
.group-participant-actions .button { min-width:126px; }
.group-participant-actions .button-primary { min-width:205px; }
.group-participant-note { margin:12px 0 0; color:#8d879a; font-size:10px; line-height:1.5; text-align:center; }
body.group-participant-modal-open { overflow:hidden; }
.group-speaker-row .message { min-width:150px; }
.group-participant-avatar { position:relative; background:linear-gradient(135deg,#514064,#302637); color:#fff; }
.group-participant-avatar-image { width:100%; height:100%; display:block; object-fit:cover; }
.group-participant-avatar-fallback { display:grid; place-items:center; width:100%; height:100%; font-size:15px; font-weight:800; color:#fff; }
.group-participant-avatar-fallback.hidden { display:none !important; }
@media(max-width:700px) {
 .chat-header { flex-wrap:wrap; }
 .group-participants-open { padding:8px 10px; font-size:11px; }
 .group-participant-card { padding:17px; max-height:92vh; border-radius:18px; }
 .group-participant-heading h2 { font-size:18px; }
 .group-participant-heading p { font-size:11px; }
 .group-participant-result { min-height:64px; padding:8px; }
 .group-participant-result-avatar { width:45px; height:45px; flex-basis:45px; }
 .group-participant-actions { flex-direction:column-reverse; }
 .group-participant-actions .button,.group-participant-actions .button-primary { width:100%; }
}