*,*:before,*:after{box-sizing:border-box}html{height:100%}body{font-family:sans-serif;background:#f5f5f5;margin:0;padding:20px;min-height:100%;overflow-x:hidden}.clear-button{background:none;border:1px solid #ccc;padding:6px 12px;min-height:44px;border-radius:4px;cursor:pointer}.chat-screen{max-width:600px;height:100vh;height:100dvh;height:var(--keyboard-vh, 100dvh);margin:0 auto;background:#fff;box-shadow:0 1px 4px #0000001a;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));padding-inline-start:calc(16px + env(safe-area-inset-right));padding-inline-end:calc(16px + env(safe-area-inset-left));background:#ededed;border-bottom:1px solid #ddd;flex-shrink:0}.chat-back-button{background:none;border:none;padding:4px;min-width:44px;min-height:44px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center}.chat-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#ddd}.chat-header-info{display:flex;flex-direction:column;line-height:1.3}.chat-header-name{font-weight:700;font-size:15px}.chat-header-status{font-size:12px;color:#4a9b4a}.chat-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:12px;padding-inline-start:calc(12px + env(safe-area-inset-right));padding-inline-end:calc(12px + env(safe-area-inset-left));background-color:#e5ddd1;background-image:url(/chat-bg.svg);background-repeat:repeat;display:flex;flex-direction:column}.chat-bubble-row{display:flex;margin-bottom:6px}.chat-bubble-row.user{justify-content:flex-start}.chat-bubble-row.assistant{justify-content:flex-end}.chat-bubble{max-width:75%;padding:6px 10px;border-radius:10px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;box-shadow:0 1px 1px #0000001a}.chat-bubble.user{background:#dcf8c6}.chat-bubble.assistant{background:#fff}.chat-bubble-text{white-space:pre-wrap;word-break:break-word}.chat-bubble-time{font-size:11px;color:#999;margin-inline-start:auto;white-space:nowrap}.chat-bubble-error{background:#fdecea;color:#c0392b;border:1px solid #f5c6c0;cursor:pointer;font:inherit;text-align:inherit}.chat-composer{display:flex;align-items:center;gap:8px;padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));padding-inline-start:calc(10px + env(safe-area-inset-right));padding-inline-end:calc(10px + env(safe-area-inset-left));border-top:1px solid #ddd;background:#fff;flex-shrink:0}.chat-composer textarea{flex:1;min-width:0;min-height:44px;max-height:120px;padding:10px 14px;font-size:16px;font-family:inherit;line-height:1.3;border:1px solid #ddd;border-radius:20px;resize:none;overflow-y:auto}.chat-composer button{min-width:44px;min-height:44px;padding:8px 16px;border-radius:20px;border:none;background:#25d366;color:#fff;cursor:pointer;flex-shrink:0}.chat-composer button:disabled{opacity:.6;cursor:default}@media (max-width: 600px){body{padding:0}.chat-screen{margin:0;width:100%;box-shadow:none}.selection-screen{padding:20px 0}.selection-screen h1,.selection-screen .subtitle{padding:0 16px}}.selection-screen{max-width:900px;margin:0 auto;text-align:center}.selection-screen .subtitle{color:#555;margin-bottom:20px}.personality-grid{display:flex;flex-direction:column}.personality-card{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:none;padding:12px 16px;min-height:44px;cursor:pointer;text-align:start;font:inherit}.personality-card:hover{background:#f5f5f5}.personality-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#eee;flex-shrink:0}.personality-info{display:flex;flex-direction:column;min-width:0;flex:1}.personality-name{font-weight:700;font-size:15px}.personality-description{color:#666;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar{display:none}@media (min-width: 900px){body{padding:0}.app-shell{display:flex;height:100vh;height:100dvh;overflow:hidden}.sidebar{display:flex;flex-direction:column;width:320px;flex-shrink:0;background:#fff;border-inline-end:1px solid #ddd}.sidebar-header{padding:16px;font-weight:700;font-size:18px;border-bottom:1px solid #ddd;flex-shrink:0}.sidebar-list{flex:1;min-height:0;overflow-y:auto}.sidebar-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:none;border-bottom:1px solid #f0f0f0;background:none;cursor:pointer;text-align:start;font:inherit}.sidebar-item:hover{background:#f5f5f5}.sidebar-item.active{background:#ebebeb}.sidebar-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#ddd;flex-shrink:0}.sidebar-item-info{min-width:0}.sidebar-item-name{font-weight:700;font-size:14px}.sidebar-item-description{font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-main{flex:1;min-width:0;height:100%;display:flex;overflow:hidden}.app-main>.chat-screen,.app-main>.selection-screen{width:100%;max-width:none;height:100%;margin:0;box-shadow:none}.app-main>.chat-screen{min-height:0}.app-main>.selection-screen{padding:24px;overflow-y:auto;box-sizing:border-box}.personality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.personality-card{flex-direction:column;border:1px solid #ddd;border-radius:8px;padding:16px;text-align:center;box-shadow:0 1px 4px #0000001a}.personality-card:hover{background:#fff}.personality-avatar{width:64px;height:64px;margin-bottom:8px}.personality-info{display:contents}.personality-name{margin-bottom:4px}.personality-description{font-size:14px;overflow:visible;text-overflow:unset;white-space:normal}}