.app{padding-bottom:190px}
.pen-launcher{position:fixed;right:max(16px,calc((100vw - 640px)/2 + 16px));bottom:calc(90px + env(safe-area-inset-bottom));z-index:12;display:flex;align-items:center;gap:8px;border:2px solid #203d55;border-radius:25px;background:#fff3b9;padding:5px 15px 5px 5px;box-shadow:3px 4px 0 #203d552b;min-height:54px;font-weight:800;font-size:12px;transition:transform .15s}
.pen-launcher:hover{transform:translateY(-3px)}.pen-launcher img{width:49px;height:49px;object-fit:contain}.pen-launcher span{line-height:1.3;text-align:left}.pen-launcher small{display:block;font-weight:500;font-size:10px}
#penelopeDialog{padding:0;width:min(440px,calc(100vw - 24px));max-width:440px;height:min(710px,calc(var(--pen-viewport,100dvh) - 28px));max-height:calc(var(--pen-viewport,100dvh) - 28px);border:2px solid #203d55;border-radius:28px;background:#fffdf7;color:#203d55;overflow:hidden;box-shadow:0 18px 80px #203d5540}
#penelopeDialog[open]{display:flex;flex-direction:column}#penelopeDialog::backdrop{background:#203d5570;backdrop-filter:blur(3px)}
.pen-header{display:flex;align-items:center;gap:12px;padding:14px 15px;background:linear-gradient(120deg,#f9c2d8,#e2d0ff 60%,#bce9ff);border-bottom:2px solid #203d551a;flex:none}.pen-header img{width:68px;height:68px;object-fit:contain}.pen-header h2{font:500 25px Fredoka,sans-serif;margin:0}.pen-header p{font-size:11px;margin:4px 0}.pen-close{align-self:flex-start;margin-left:auto;background:#fff9;border:0;border-radius:50%;font-size:24px;width:36px;height:36px;line-height:1}
.pen-mode{padding:8px 16px;background:#fff1bd;display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;font-size:10px}.pen-mode button{font-size:10px;background:none;border:0;text-decoration:underline;padding:7px;color:#203d55}
.pen-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px;background:radial-gradient(circle at 10% 0%,#fbe6ee 0,transparent 45%),radial-gradient(circle at 100% 90%,#e5f3ff 0,transparent 45%),#fffdf7;scroll-behavior:smooth}
.pen-message{margin:0 18px 16px 0;max-width:96%;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.pen-message>.pen-speaker{display:block;font-size:10px;font-weight:800;margin:0 0 5px 7px;letter-spacing:.4px}.pen-bubble{padding:13px 15px;border:1px solid #203d551a;border-radius:4px 18px 18px 18px;background:white;box-shadow:0 3px 0 #203d5507;white-space:pre-line}.pen-message[data-speaker="You"]{margin-left:28px;margin-right:0}.pen-message[data-speaker="You"] .pen-bubble{background:#e0d4ff;border-radius:18px 4px 18px 18px}.pen-message[data-speaker="You"] .pen-speaker{text-align:right;margin-right:6px}
.pen-actions,.pen-topics{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.pen-actions button,.pen-topics button,.pen-source{font-size:11px;line-height:1.4;border:1px solid #203d5530;border-radius:12px;background:#eff7ff;color:#203d55;padding:9px 11px;min-height:36px;text-decoration:none}.pen-actions button{background:#fff0ab;font-weight:700}.pen-source{display:inline-block;background:white;margin-top:10px;text-decoration:underline}.pen-topics button:hover,.pen-actions button:hover{background:#bce9ff}
.pen-form{border-top:1px solid #203d5520;background:#fffdf7;padding:12px 13px 8px;flex:none}.pen-compose{display:flex;gap:8px;align-items:flex-end}.pen-compose textarea{min-width:0;flex:1;height:48px;max-height:100px;resize:none;border:1px solid #203d5533;border-radius:15px;padding:12px;font:inherit;font-size:16px;background:white;color:#203d55}.pen-send{flex:none;width:46px;height:46px;border:0;border-radius:15px;background:#203d55;color:#fff3b9;display:grid;place-items:center}.pen-send svg{width:24px;height:24px}.pen-form>p{font-size:9px;line-height:1.5;margin:7px 1px 1px;color:#617481}.pen-form>p button{border:0;background:none;font:inherit;color:inherit;padding:0;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.pen-launcher{transition:none}.pen-log{scroll-behavior:auto}}
@media(max-width:380px){#penelopeDialog{width:calc(100vw - 12px);border-radius:22px}.pen-header{padding:10px}.pen-header img{width:55px;height:55px}.pen-log{padding:14px 11px}.pen-launcher{right:12px}}