.drawing-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.drawing-overlay-content{background-color:#fff;border-radius:8px;padding:20px;max-width:80vw;max-height:80vh;width:800px;height:600px;display:flex;flex-direction:column;box-shadow:0 10px 25px rgba(0,0,0,.2);animation:fadeIn .2s ease-out;min-height:500px;position:relative}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.drawing-overlay-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;border-bottom:1px solid #eee;padding-bottom:10px}.drawing-overlay-header h3{margin:0;color:#333;font-size:18px}.drawing-overlay-close{background:none;border:none;font-size:20px;cursor:pointer;padding:5px;border-radius:4px;color:#666;transition:background-color .2s,color .2s}.drawing-overlay-close:hover{background-color:#f5f5f5;color:#333}.drawing-overlay-ketcher{flex:1;min-height:350px;max-height:calc(100% - 140px);margin-bottom:15px;border:1px solid #ddd;border-radius:4px;overflow:hidden;position:relative}.drawing-overlay-smiles-row{display:flex;align-items:center;gap:10px;margin-bottom:15px;flex-shrink:0}.drawing-overlay-smiles-label{font-weight:700;min-width:60px;color:#333}.drawing-overlay-smiles-input{flex:1;padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px;font-family:monospace}.drawing-overlay-smiles-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25)}.drawing-overlay-success-message{background-color:#d4edda;color:#155724;padding:8px 16px;border-radius:4px;border:1px solid #c3e6cb;text-align:center;font-size:14px;animation:slideDown .3s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.15);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes slideDown{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.drawing-overlay-actions{display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;margin-top:auto}.drawing-overlay-button{padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s,border-color .2s}.drawing-overlay-button.cancel{border:1px solid #ccc;background-color:#fff;color:#333}.drawing-overlay-button.cancel:hover{background-color:#f8f9fa;border-color:#adb5bd}.drawing-overlay-button.primary{border:none;background-color:#007bff;color:#fff}.drawing-overlay-button.primary:hover:not(:disabled){background-color:#0056b3}.drawing-overlay-button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.6}.draw-button{padding:4px 8px;font-size:12px;height:28px;display:flex;align-items:center;gap:4px;border:1px solid #007bff;background-color:#007bff;color:#fff;border-radius:4px;cursor:pointer;transition:background-color .2s,border-color .2s}.draw-button:hover{background-color:#0056b3;border-color:#0056b3}.draw-button svg{width:14px;height:14px}@media (max-width:900px){.drawing-overlay-content{width:95vw;height:90vh;margin:20px;padding:15px;min-height:400px}.drawing-overlay-ketcher{min-height:250px;max-height:calc(100% - 120px)}}@media (max-width:600px){.drawing-overlay-content{width:100vw;height:100vh;margin:0;border-radius:0;min-height:100vh}.drawing-overlay-ketcher{min-height:200px;max-height:calc(100% - 140px)}.drawing-overlay-smiles-row{flex-direction:column;align-items:stretch}.drawing-overlay-smiles-label{min-width:auto}.drawing-overlay-actions{flex-direction:column;margin-top:auto}.drawing-overlay-button{width:100%}}