.my-magic-input{display:flex;flex-direction:row;gap:10px;width:100%}.input-area{background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:8px;color:var(--text-color);font-size:1em;min-height:100px;outline:none;padding:10px;resize:vertical;width:100%}.input-area:focus{border-color:var(--accent-color)}.keyboard{background-color:var(--keyboard-bg);border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:10px}.keyboard-row,.tabs{gap:8px}.tabs{display:flex;margin-bottom:8px}.tab{background-color:var(--tab-bg);border-radius:6px;color:var(--tab-color);cursor:pointer;padding:8px 16px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tab.active{background-color:var(--tab-active-bg);color:var(--tab-active-color)}.emoji-grid{gap:8px;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));padding:8px}.magic-input-field{align-items:center;background-color:#fff;border:.125rem solid #f4a460;color:#333;cursor:text!important;display:flex;height:3.125rem;overflow:hidden;padding:.5rem;text-overflow:ellipsis;white-space:nowrap;width:100%}.magic-input-field:focus-visible{outline:0}.magic-input-field .placeholder{color:#999}.magic-input-field .input-text{color:#333;cursor:text!important;font-family:Noto Color Emoji,Segoe UI Emoji,sans-serif}.my-magic-input .cross{cursor:pointer;left:-35px;position:relative}.virtual-keyboard-container{background-color:#fff;border-top:1px solid #ccc;bottom:0;box-shadow:0 -2px 10px #0000001a;color:#333;left:0;position:fixed;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:1000}.keyboard-close-container{background-color:#e0e0e0;border-bottom:1px solid #ccc;display:flex;justify-content:flex-end}.keyboard-close{color:#333;cursor:pointer;font-size:.7rem;padding:.2rem .5rem}.keyboard-layout{padding:.5rem}.keyboard-row{display:flex;justify-content:center;margin-bottom:.5rem;position:relative}.keyboard-row:last-child{margin-bottom:0}.keyboard-row[data-position=start] .key{justify-content:start}.keyboard-row[data-position=center] .key{justify-content:center}.keyboard-row[data-position=end] :not(.shift-key):not(.backspace-key):not(.enter-key).key{justify-content:end}.key:last-child{margin-right:0}.key:active{background-color:#e0e0e0;transform:translateY(1px)}.special-key{background-color:#e8e8e8;font-size:1.2rem;width:3.5rem}.shift-key{align-items:center;display:flex;position:relative}.shift-key:before{color:#333;content:"⇧";display:block;font-size:1.2rem}.shift-active{background-color:#d0d0ff;border-color:#8080ff}.shift-active:before{color:#333;content:"⇫"}.shift-locked{background-color:#a0a0ff;border-color:#6060ff}.shift-locked:before{color:#000;content:"↥";font-weight:700}.space-key{background-color:#f0f0f0;color:#333;font-size:.9rem;width:10rem}.enter-key{background-color:#4caf50;color:#fff;font-size:.9rem;width:4rem}.enter-arrow{font-size:1.5rem}.backspace-key{background-color:#f44336;color:#fff;font-size:.9rem;width:3.5rem}.backspace-icon{font-size:.75rem}.emoji-key{background-color:#f8f8f8;font-size:1.2rem}.hidden{pointer-events:none;visibility:hidden}.emoji-panel{align-items:center;background-color:#f8f8f8;color:#333;display:flex;flex-direction:column;height:15rem;max-width:100%;overflow-x:hidden;overflow-y:auto}.emoji-panel-header{align-items:center;background-color:#e8e8e8;border-bottom:1px solid #ccc;flex-direction:row;width:100%}.emoji-categories,.emoji-panel-header{display:flex;flex-wrap:nowrap;justify-content:center;padding:.25rem}.emoji-categories{-webkit-overflow-scrolling:touch;max-width:calc(100% - 70px);order:1;overflow-x:auto}.emoji-category{align-items:center;background-color:#f0f0f0;border:1px solid #ddd;border-radius:.25rem;box-shadow:0 1px 2px #0000001a;color:#333;cursor:pointer;display:flex;flex-shrink:0;font-size:1.2rem;height:2.5rem;justify-content:center;margin:0 .1rem;min-width:2.5rem;padding:.1rem}.emoji-category.active{background-color:#e0e0e0;border-color:#aaa;box-shadow:inset 0 1px 3px #0000001a;color:#000}.keyboard-toggle-btn{align-items:center;background-color:#4caf50;border-radius:.25rem;box-shadow:0 1px 3px #0003;color:#fff;cursor:pointer;display:flex;font-weight:700;height:2.5rem;justify-content:center;margin-right:.25rem;order:-1;padding:.25rem .5rem;transition:background-color .2s,transform .1s}.emoji-panel-header .keyboard-toggle-btn{order:-1}.keyboard-toggle-btn:hover{background-color:#45a049}.keyboard-toggle-btn:active{box-shadow:0 0 1px #0003;transform:translateY(1px)}.emoji-grid{background-color:#f8f8f8;display:grid;gap:.25rem;grid-template-columns:repeat(12,2.5rem);justify-content:center;max-width:100%;overflow-x:auto;padding:.5rem}.emoji-item{align-items:center;background-color:#fff;border-radius:.25rem;box-shadow:0 1px 2px #0000001a;color:inherit;cursor:pointer;display:flex;font-size:1.2rem;height:2.5rem;justify-content:center;transition:background-color .2s;width:2.5rem}.emoji-item:hover{background-color:#f0f0f0}.emoji{color:inherit;font-family:Noto Color Emoji,Segoe UI Emoji,Apple Color Emoji,sans-serif}@media(min-width:769px){.key{font-size:1.2rem}}@media(max-width:768px){.key{font-size:.9rem}.emoji-item{font-size:1rem;height:2rem;width:2rem}.emoji-category{font-size:1.1rem;height:2rem;min-width:2rem;padding:.1rem}.special-key{width:3rem}.shift-key{width:6.5rem}.enter-arrow{font-size:1.3rem;left:.15rem;top:.4rem}.shift-active:before,.shift-key:before,.shift-locked:before{font-size:1.1rem}.space-key{margin-inline:10px;width:20rem}.emoji-grid{grid-template-columns:repeat(10,2rem)}.keyboard-toggle-btn{font-size:.9rem;height:2rem;padding:.2rem .4rem}}@media(max-width:480px){.key{font-size:.8rem;margin-right:.15rem}.emoji-item{font-size:.9rem;height:1.8rem;width:1.8rem}.emoji-category{font-size:1rem;height:1.8rem;margin:0 .05rem;min-width:1.8rem;padding:.1rem}.special-key{width:2.5rem}.space-key{width:6rem}.enter-key{width:3rem}.enter-arrow{font-size:1.1rem;left:.1rem;top:.3rem}.shift-active:before,.shift-key:before,.shift-locked:before{font-size:1rem}.emoji-grid{grid-template-columns:repeat(8,1.8rem)}.keyboard-toggle-btn{font-size:.8rem;height:1.8rem;padding:.15rem .3rem}}.small-screen-enter{display:none}@media(max-width:360px){.key{font-size:.75rem}.emoji-item{font-size:.8rem;height:1.6rem;width:1.6rem}.emoji-category{font-size:.9rem;height:1.6rem;margin:0 .05rem;min-width:1.6rem;padding:.05rem}.special-key{width:2.2rem}.space-key{margin-left:0;width:8rem}.shift-active:before,.shift-key:before,.shift-locked:before{font-size:.9rem}.small-screen-enter{background-color:#4caf50;color:#fff;display:flex;height:1.6rem;width:2.5rem}#keyboard-space-bar{display:flex;flex-wrap:wrap;justify-content:center}.emoji-grid{grid-template-columns:repeat(6,1.6rem)}.keyboard-toggle-btn{font-size:.75rem;height:1.6rem;padding:.1rem .25rem}.keyboard-row{flex-wrap:wrap;justify-content:center}}.placeholder{background-color:#ffffff4d;color:#999;cursor:text!important;display:inline-block;position:relative;width:100%}.keyboard-active{border-color:#2196f3!important;box-shadow:0 0 5px #2196f380;cursor:text!important}.caret{animation:blink 1s infinite;background-color:#000;display:inline-block;height:1.2em;margin:0 -1px;position:relative;vertical-align:middle;width:2px}.placeholder .caret{left:0;position:absolute;top:50%;transform:translateY(-50%)}.special-keys-layer{animation:popIn .2s ease-out;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);background-color:#fffffff2;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #0000004d;display:flex;padding:var(--keys-layer-padding);position:fixed;transform-origin:bottom center;z-index:9999}@keyframes popIn{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.special-option-key{align-items:center;animation:fadeIn .3s ease-out forwards;animation-delay:calc(var(--index, 0)*.05s);background-color:#f8f8f8;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 4px #0000001a;color:#000;cursor:pointer;display:flex;font-size:1.1rem;height:40px;justify-content:center;margin:0 4px;min-width:40px;opacity:0;transition:all .2s ease}.special-option-key.active{background-color:#e0e0e0;border-color:#2196f3;box-shadow:0 2px 4px #0000001a;color:#000;transform:scale(1.1)}.special-option-key:hover,:not(.enter-key).hovered{background-color:#e0e0e0}.enter-key.hovered,.special-option-key:hover,:not(.enter-key).hovered{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.virtual-keyboard-container{min-width:340px}