body{margin:0;font-family:Comic Sans MS,Chalkboard SE,Marker Felt,sans-serif}.app{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#fcd,plum,#acf)}.api-key-container,.chat-container{width:450px;max-width:90%;height:80vh;max-height:80vh;background-color:#ffffffd9;border-radius:20px;box-shadow:0 8px 25px #0003;display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3)}.chat-header{background:linear-gradient(to right,#ff9a9e,#fecfef);padding:15px 20px;border-top-left-radius:20px;border-top-right-radius:20px;text-align:center;color:#5c337a;font-weight:700;box-shadow:0 2px 5px #0000001a;display:flex;justify-content:space-between;align-items:center}.chat-header h1{margin:0;font-size:1.3em}.model-selector{display:flex;align-items:center;font-size:.9em}.model-selector label{margin-right:8px;color:#7a5a9a;font-weight:500}.model-selector select{padding:8px 30px 8px 12px;border-radius:10px;border:1px solid #e5c1e5;background-color:#fff;color:#5c337a;cursor:pointer;font-size:.95em;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%237a5a9a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 10px center;background-size:10px 10px;box-shadow:0 1px 3px #0000000d;transition:border-color .2s ease,box-shadow .2s ease}.model-selector select:focus{outline:none;border-color:plum;box-shadow:0 0 0 3px #dda0dd66}.model-selector select:hover{border-color:#d1aed1}.message-list{flex:1;padding:20px;overflow-y:auto}.message-list::-webkit-scrollbar{width:8px}.message-list::-webkit-scrollbar-track{background:#ffdff080;border-radius:10px}.message-list::-webkit-scrollbar-thumb{background-color:#e0bbe4;border-radius:10px;border:2px solid rgba(255,223,240,.5)}.message{margin-bottom:15px;padding:12px 18px;border-radius:15px;max-width:85%;line-height:1.4;box-shadow:0 2px 4px #00000014}.message p{margin:0;word-wrap:break-word}.message.user{background:linear-gradient(to right,#a0c4ff,#b6ccfe);color:#333;margin-left:auto;border-bottom-right-radius:5px}.message.bot{background:linear-gradient(to right,#fdfcdc,#fde7f0);color:#555;margin-right:auto;border-bottom-left-radius:5px}.message.bot.typing{font-style:italic;color:#888;background:#f0f0f0}.input-area{display:flex;padding:15px;background-color:#ffffffb3;border-bottom-left-radius:20px;border-bottom-right-radius:20px;border-top:1px solid rgba(255,255,255,.4)}.input-area textarea{flex:1;padding:12px 15px;border:none;border-radius:10px;background-color:#ffffffe6;color:#333;font-family:inherit;font-size:1em;resize:none;min-height:24px;max-height:100px;line-height:1.4;box-shadow:inset 0 1px 3px #0000001a}.input-area textarea:focus{outline:none;box-shadow:inset 0 1px 3px #0000001a,0 0 0 2px plum}.input-area button{margin-left:10px;padding:10px 20px;border:none;border-radius:10px;background:linear-gradient(to bottom,#ff758c,#ff7eb3);color:#fff;cursor:pointer;font-weight:700;transition:all .2s ease;box-shadow:0 2px 5px #00000026}.input-area button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #0003;filter:brightness(1.1)}.input-area button:disabled{background:#ccc;color:#888;cursor:default;opacity:.7;box-shadow:none;transform:none}.api-key-container{padding:30px;text-align:center;color:#5c337a}.api-key-container h1{color:#ff758c;margin-bottom:15px}.api-key-container p{margin-bottom:25px;line-height:1.5;font-size:.95em}.input-area.vertical{flex-direction:column;background:none;border:none;padding:0;align-items:center}.input-area.vertical input[type=password]{width:80%;padding:12px 15px;border:1px solid #e0bbe4;border-radius:10px;background-color:#fff;color:#333;font-size:1em;margin-bottom:15px;box-shadow:inset 0 1px 3px #0000001a}.input-area.vertical input[type=password]:focus{outline:none;border-color:plum;box-shadow:inset 0 1px 3px #0000001a,0 0 0 2px plum}.input-area.vertical button{width:50%;padding:12px 20px;background:linear-gradient(to bottom,#ff758c,#ff7eb3);color:#fff;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px #00000026}.input-area.vertical button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #0003;filter:brightness(1.1)}.input-area.vertical button:disabled{background:#ccc;color:#888;cursor:default;opacity:.7;box-shadow:none;transform:none}.api-key-info{margin-top:25px;font-size:.85em;color:#6a4f8a}.api-key-info a{color:#ff758c;text-decoration:none;font-weight:700}.api-key-info a:hover{text-decoration:underline}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}