/* ======================================== ! NOTEPAD PANEL — desktop-only text editor Отдельная панель-редактор для чата: кнопка вызова — на главном экране, в top-buttons рядом с Translater (см. index.html / cf-notepad.js), меню File/Edit/Format/View/Help как в классическом Notepad, кнопка Apply переносит текст в поле ввода чата. append to index.html as its own stylesheet, load after chat-features.css ======================================== */ .notepad-btn.active { background: var(--m-yellow) !important; } /* ---------- Panel shell ---------- */ .notepad-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 92vw; background: var(--m-surface); border-left: 3px solid var(--m-dark); box-shadow: -10px 0 24px rgba(0,0,0,0.25); display: flex; flex-direction: column; z-index: 6000; transform: translateX(105%); transition: transform .25s ease; } .notepad-panel.open { transform: translateX(0); } .notepad-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--m-dark); color: var(--m-yellow); flex-shrink: 0; } .notepad-title { font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notepad-close { background: none; border: 2px solid var(--m-yellow); border-radius: 50%; width: 26px; height: 26px; min-width: 26px; color: var(--m-yellow); font-weight: 900; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; } .notepad-close:hover { background: var(--m-pink); border-color: var(--m-pink); color: #fff; } /* ---------- Menu bar ---------- */ .notepad-menubar { display: flex; gap: 2px; padding: 4px 8px; background: var(--m-surface2); border-bottom: 2px solid var(--m-dark); flex-shrink: 0; position: relative; z-index: 3; user-select: none; } .notepad-menu { position: relative; } .notepad-menu-btn { background: none; border: none; padding: 6px 11px; font-size: 12px; font-weight: 800; font-family: inherit; color: var(--m-dark); cursor: pointer; border-radius: 6px; } .notepad-menu-btn:hover, .notepad-menu.active .notepad-menu-btn { background: var(--m-yellow); } .notepad-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 2px; min-width: 200px; background: var(--m-surface); border: 2px solid var(--m-dark); border-radius: 8px; box-shadow: 4px 4px 0 var(--m-dark); padding: 4px; z-index: 20; } .notepad-menu.active .notepad-dropdown { display: block; } .notepad-dropdown button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; background: none; border: none; padding: 7px 10px; font-size: 12.5px; font-family: inherit; font-weight: 600; color: var(--m-dark); text-align: left; cursor: pointer; border-radius: 5px; white-space: nowrap; } .notepad-dropdown button:hover { background: var(--m-surface2); } .notepad-dropdown button span:not(.chk) { font-size: 10px; opacity: .5; font-weight: 700; } .notepad-dropdown .chk { width: 14px; display: inline-block; font-weight: 900; color: var(--m-teal); } .notepad-dropdown hr { border: none; border-top: 1px solid rgba(0,0,0,.12); margin: 4px 2px; } /* ---------- Find / Replace bar ---------- */ .notepad-findbar { display: flex; gap: 6px; padding: 8px 10px; background: var(--m-surface2); border-bottom: 2px solid var(--m-teal); flex-wrap: wrap; flex-shrink: 0; } .notepad-findbar input { flex: 1; min-width: 100px; border: 2px solid var(--m-dark); border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit; background: var(--m-surface); color: var(--m-dark); outline: none; } .notepad-findbar input:focus { border-color: var(--m-teal); } .notepad-findbar button { border: 2px solid var(--m-dark); background: var(--m-surface); border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; font-family: inherit; } .notepad-findbar button:hover { background: var(--m-teal); } #notepadFindClose { border-radius: 50%; width: 26px; height: 26px; padding: 0; flex: 0 0 auto; } /* ---------- Editor body ---------- */ .notepad-textarea { flex: 1; width: 100%; border: none; outline: none; resize: none; padding: 14px 16px; font-size: 14px; line-height: 1.65; font-family: 'Inter', sans-serif; color: var(--m-dark); background: var(--m-surface); white-space: pre-wrap; word-wrap: break-word; } .notepad-textarea.mono { font-family: 'Inter Tight', ui-monospace, Consolas, monospace; } .notepad-textarea.nowrap { white-space: pre; overflow-x: auto; word-wrap: normal; } .notepad-textarea::placeholder { opacity: .45; } .notepad-statusbar { display: flex; justify-content: space-between; padding: 5px 14px; font-size: 11px; font-weight: 700; color: #888; background: var(--m-surface2); border-top: 2px solid var(--m-dark); flex-shrink: 0; } /* ---------- Footer ---------- */ .notepad-footer { display: flex; gap: 10px; padding: 10px 14px; border-top: 3px solid var(--m-dark); background: var(--m-surface); flex-shrink: 0; } .notepad-btn-secondary, .notepad-btn-primary { flex: 1; border-radius: 50px; padding: 10px 16px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; font-family: inherit; border: 2px solid var(--m-dark); transition: background .15s, color .15s, transform .1s; } .notepad-btn-secondary { background: var(--m-surface); color: var(--m-dark); } .notepad-btn-secondary:hover { background: var(--m-surface2); } .notepad-btn-primary { background: var(--m-dark); color: var(--m-yellow); } .notepad-btn-primary:hover { background: var(--m-teal); color: var(--m-dark); border-color: var(--m-teal); } .notepad-btn-secondary:active, .notepad-btn-primary:active { transform: scale(.97); } .notepad-btn-primary:disabled { opacity: .6; cursor: default; transform: none; } /* ---------- Confirm / Save-As mini dialog ---------- */ .notepad-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 7000; display: flex; align-items: center; justify-content: center; animation: ctx-pop .12s ease-out; } .notepad-confirm-dialog { background: var(--m-surface); border: 3px solid var(--m-dark); border-radius: 16px; box-shadow: 6px 6px 0 var(--m-dark); padding: 18px 20px; width: 300px; max-width: 90vw; } .notepad-confirm-title { font-size: 13.5px; font-weight: 800; margin-bottom: 12px; color: var(--m-dark); line-height: 1.4; } .notepad-confirm-input { width: 100%; border: 2px solid var(--m-dark); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; margin-bottom: 12px; outline: none; } .notepad-confirm-input:focus { border-color: var(--m-teal); } .notepad-confirm-btns { display: flex; gap: 8px; flex-wrap: wrap; } .notepad-confirm-btns button { flex: 1; border: 2px solid var(--m-dark); border-radius: 8px; padding: 8px 6px; font-size: 11.5px; font-weight: 800; cursor: pointer; background: var(--m-surface); white-space: nowrap; font-family: inherit; } .notepad-confirm-btns button.primary { background: var(--m-dark); color: var(--m-yellow); } .notepad-confirm-btns button:hover { filter: brightness(0.95); } /* Editor feature is desktop-only — hide below the app's own desktop breakpoint */ @media (max-width: 1024px) { .notepad-btn, .notepad-panel, .notepad-confirm-overlay { display: none !important; } }