/* =========================================================================== FileKey — visual layer reproduced verbatim from filekey v1 (source.txt). Layout, chat, hamburger menu, drop zone, icons, colors, spacing are v1 as-is (except the hamburger icon — v1's staggered 3 lines now whirl a half-turn into an X). Inter is self-hosted (web/fonts/inter.woff2) so the PWA runs fully offline. =========================================================================== */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/inter.woff2') format('woff2'); } html{background-color:#fff;color:#000;height:100vh;box-sizing: border-box;font-family:'Inter', system-ui;color-scheme:light;} body{margin:0;} *, *:before, *:after {box-sizing: inherit;} #drag_window{width:100%;height:100vh;position:fixed;top:0;left:0;display:none;z-index: 110000001;} #file_drag_zone{position:fixed;background-color:#c0f0ff33;width:80%;height:88vh;margin:8vh 10% 4vh;display:none;} #main_window{display:flex;margin:0;flex-direction:row;} #main_container{width:100%;display:flex;background-color:#fff;height:100vh;flex-grow:1;padding:15vh 25% 0;flex-direction: column;} /* Small default bottom pad; the upload page's fixed drop bar gets its real clearance from showDropBar() (measured). 22vh here would over-inflate the no-drop-bar pages (setup/confirm/receive) and make the chat auto-scroll clip the top on load. */ #main_inner{display:flex;flex-direction: column;flex-direction: column;flex-grow:1;padding-bottom:6vh;} .std_msg{border-radius:10px;margin:0;color:#000;width:100%;} .std_status{margin:0;color:#00000080;font-variant-numeric:tabular-nums;} .std_uploaded, .std_download{border:1px solid #0000001a;padding:16px;border-radius:10px;margin:0;color:#000;display: flex;flex-direction: row;overflow:hidden;} /* Every chat row carries ONE uniform vertical margin here; per-type margins below are zeroed. Flex columns don't collapse margins, so this is the single source of inter-message spacing. */ .std_outer, .std_dl_outer, .std_upload_outer, .std_status_outer{display:flex;width:50%;margin:22px 0 22px 50px;} .std_upload_outer{justify-content:flex-end;align-self:flex-end} .std_uploaded{background-color: #f4f4f4;border:none;max-width:100%;} .std_outer{line-height:145%} .std_inner_flex{display:flex;align-items: center;max-width:100%;} .std_msg_inner, .std_status_inner{position:relative;display:flex;width:100%} .pub_key_textarea{width:100%;resize:none;outline:none;border: 1px solid #0000001a;border-radius: 10px;margin:10px 0;padding:16px;overflow:hidden;line-height:1.5;font-size:16px;color:#0d0d0d;font-family: 'Inter';word-break:break-all;} .pub_key_textarea:focus{outline:none;} .pub_key_actions{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-bottom:15px;} .msg_actions{display:flex;align-items:center;gap:24px;margin-top:10px;} /* choice row inside a chat-message bubble (duplicate-filekey heads-up, share) */ .update_notes{margin:8px 0 0 0;padding-left:18px;} /* changelog bullets in the "new version available" notice */ .update_notes li{margin:3px 0;line-height:1.45;} .confirm_pub_key, .edit_pub_key, .copy_button{cursor:pointer;color: #1377F9;font-weight: 500;display:flex;align-items:center;line-height:1;} .cancel_pub_key{cursor:pointer;color:#00000080;font-weight:500;line-height:1;display:flex;align-items:center;} .edit_pub_key{display:none;} .pub_key_textarea_cont{width:50%;} .flex_item{} .set_right{align-self: flex-end;} #chiz_container, #logo_container{height:10vh;display:flex;align-items:center;justify-content:center;position:fixed;width:25%;flex-direction: column;} #logo_container{} #chiz_container{right:0;} /* Wide screens: frame the header to the content column — align the logo with the drop zone's left edge and the menu with its right edge, instead of letting them drift to the viewport edges. */ @media screen and (min-width:1081px){ #logo_container{left:25%;width:auto;z-index:1006;} #chiz_container{right:25%;width:auto;z-index:1006;} /* Opaque band across the top (same idea as the mobile header's white bar) so scrolled content passes cleanly under the header, never over the logo or menu. */ body::before{content:"";position:fixed;top:0;left:0;width:100%;height:10vh;background:#fff;z-index:1005;pointer-events:none;} } #chiz_hidden_click_container{display:none;position:fixed;top:0;height:100vh;z-index:1000;} #chiz_hidden_click_container{width:100vw;right:0;} #logo_bar{display:flex;cursor:pointer;} #logo_txt{color:#000;font-size:26px;font-family:'Inter', system-ui;margin-left:8px;} #outer_drop_container{position:fixed;bottom:0;left:0;width:100%;background-color:#fff;display:flex;justify-content:center;z-index:900;} #drop_container{ background-color:#eaf2fe; display: none; flex-direction: row; align-items: center; gap: 16px; position:relative; width:50%; padding:16px 20px; border-radius:14px; margin:1.5vh 0 5vh; color:#000; } .dc_txt_container{display: flex;flex-direction: column;justify-content: center;flex-grow:1;} .dc_txt_container .file_title{font-weight:600;} .dc_buttons{display:flex;align-items:center;gap:10px;flex-shrink:0;} .dc_btn{font-family:'Inter';font-size:15px;font-weight:600;line-height:1;padding:11px 18px;border-radius:10px;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:background .18s ease,transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s ease;} .dc_btn_primary{background:#1377F9;color:#fff;} .dc_btn_primary:hover{background:#0e63d6;} .dc_btn_ghost{background:#fff;color:#0d0d0d;border-color:#0000001f;font-weight:500;} .dc_btn_ghost:hover{background:#f4f4f4;} #file_input{display:none;} .icon_container{display: flex;align-items: center;width: 50px;height:50px;background-color:#fff;padding:10px;border-radius:10px;font-size:12px;margin-right:10px;justify-content: center;} .some_background{background-color:#f2f0ed;} .dc_icon_container{display:flex;align-items:center;flex-shrink:0;} .icon_container, .action_icon_container{flex-shrink:0} .action_icon_container{margin-left:15px;cursor:pointer;} .special_action{transform: rotate(270deg);display:none;} .std_file_container{flex-direction: column;display: flex;justify-content: center;white-space: normal;padding:0 8px;overflow:hidden;min-width:0;} .file_title{display:block;font-weight:600;word-wrap:break-word;line-height:1;} .file_title.fname{display:flex;min-width:0;} .fname_head{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fname_tail{white-space:nowrap;flex-shrink:0;} .file_sub_title{display:block;} .file_status{display:block;opacity:0.5;margin:4px 0 8px 0;} .download_icon_container{display:flex;align-items:center;gap:18px;line-height:1;} .dl_action{display:inline-flex;align-items:center;color:#1377F9;cursor:pointer;font-weight:500} .slight_vert_padding{padding:1px 0;} .bolded_text{font-weight:700;} .std_dp, .failed_dp, .warning_dp, .ok_dp{position:absolute;left:-48px;top:-5px;border-radius:20px;padding:7px 8.5px; border-radius:70px;line-height:0;} .std_dp{border:1px #1377F921 solid;} .failed_dp{border:1px #F9131321 solid;} .warning_dp{border:1px #e99a3221 solid;} .filekey_icon, .failed_filekey_icon, .warning_filekey_icon{height:16px;width:13px;} .filekey_icon{fill:#1377F9} .failed_filekey_icon{fill:#F91313;} .warning_filekey_icon{fill:#e99a32;} .filekey_logo_icon{fill:#1377F9;width:22px;height:27px} .file_icon{fill:#1377F9;width:25px;height:30px} .plus_icon{width:28px;height:27px;fill:#1377F9;} .import_icon{width:28px;height:28px;fill:none;stroke:#c8c8ce;stroke-width:1.8;} .dl_icon{width:19px;height:19px;fill:currentColor;margin-right:4px;} .confirm_icon, .edit_icon, .copy_icon{width:18px;height:19px;fill:currentColor;margin-right:4px;} .confirm_icon{padding:2px;} .copy_icon{padding:1px;} .edit_icon{padding:0;} .save_icon{width:18px;height:19px;fill:currentColor;margin-right:4px;padding:2px;} /* Leading icons inside chat-action rows (actionRow). Stroke icons (trash, close) carry their own stroke=currentColor; add .act_fill for fill-based icons (plus) so they inherit the action color. */ .act_icon{width:17px;height:17px;margin-right:5px;flex-shrink:0;} .act_icon.act_fill{fill:currentColor;} #chiz_icon_container{cursor:pointer;opacity:0.6;z-index:10001;margin:15px 0;position:relative;width:28px;height:18px;color:#000;transition:transform .5s cubic-bezier(.45,0,.25,1);transform-origin:18px 7px;} #chiz_icon_container:hover{opacity:1;} /* FileKey menu icon: v1's staggered 3-line mark; on open it whirls a half-turn as the lines fold into an X. Bars are flush-right (mirroring the flush-left logo) and tapering; the X forms at the optical center (18px,7px). */ .chiz_bar{position:absolute;right:0;height:2px;border-radius:2px;background:currentColor;transition:all .5s cubic-bezier(.45,0,.25,1);transform-origin:center;} .chiz_bar_top{width:20px;top:0;} .chiz_bar_mid{width:14px;top:6px;} .chiz_bar_bot{width:9px;top:12px;} #chiz_icon_container.is-open{transform:rotate(180deg);} #chiz_icon_container.is-open .chiz_bar_top{top:6px;transform:rotate(45deg);} #chiz_icon_container.is-open .chiz_bar_mid{opacity:0;width:0;} #chiz_icon_container.is-open .chiz_bar_bot{top:6px;width:20px;transform:rotate(-45deg);} @media (prefers-reduced-motion: reduce){#chiz_icon_container,.chiz_bar,.slider_knob{transition:none;}} /* Your FileKey control: a sliders icon + dropdown to the left of the hamburger; appears only after auth */ #acct_control{display:none;position:absolute;right:calc(100% + 18px);top:0;height:10vh;flex-direction:column;align-items:flex-end;justify-content:center;} body.fk-authed #acct_control{display:flex;} #acct_icon_container{cursor:pointer;opacity:0.6;z-index:10001;color:#000;line-height:0;margin:15px 0;position:relative;top:-2px;} #acct_icon_container:hover{opacity:1;} #acct_icon_container svg{width:22px;height:22px;display:block;} /* hollow knobs: bg-filled ring over a continuous rail; they slide (swap) when the menu opens. Driven by transform, NOT the cy geometry attribute: WebKit/Safari animates transform on SVG but ignores CSS transitions on cy/cx/r, so cy-based motion silently no-ops there (the hamburger works because its bars are HTML divs). knob1 sits at cy=9, knob2 at cy=15; on open they swap (±6 units). */ .slider_knob{fill:#fff;transition:transform .35s cubic-bezier(.4,0,.2,1);} #acct_icon_container.is-open .knob1{transform:translateY(6px);} #acct_icon_container.is-open .knob2{transform:translateY(-6px);} #acct_menu_container{position:relative;display:none;z-index:1010;} #acct_menu_inner{display:flex;flex-direction:column;border-radius:10px;border:#0000001A 1px solid;background-color:#fff;padding:14px 0 6px;position:absolute;right:-12px;white-space:nowrap;min-width:220px;box-shadow:2px 10px 10px #00000011;} /* "signed in as" identity header: identicon + 8-char fingerprint of the public key */ #acct_identity{display:flex;align-items:center;gap:10px;padding:2px 18px 13px;margin-bottom:6px;border-bottom:1px solid #0000000d;} #acct_identity .id_icon{width:30px;height:30px;border-radius:8px;overflow:hidden;flex-shrink:0;line-height:0;} #acct_identity .id_name{font-size:14px;font-weight:600;color:#0d0d0d;line-height:1.35;} #acct_identity .id_fp{font-size:12px;color:#00000073;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;} #chiz_menu_container{position:relative;display:none;z-index:1010;} #chiz_menu_inner{border-radius:10px;border:#0000001A 1px solid;background-color:#fff;padding:16px 0 6px 0px;position:absolute;right:-12px;white-space:nowrap;min-width:210px;box-shadow:2px 10px 10px #00000011} #chiz_list{display:flex;flex-direction:column;} .chiz_heading{color:#1377f9;font-family:system-ui;font-size:11px;padding:11px 16px;font-weight:600;margin:0;} .top_menu_heading{padding-top:0;} /* each menu's first section hugs the card top */ #chiz_list > .chiz_heading:first-of-type{padding-top:0;} .chiz_item{color:#374151;font-size:15px;font-weight:420;line-height:1.25;margin:0;padding:10px 24px;cursor:pointer;text-decoration:none;} .chiz_item:hover{color:#000000;background-color:#77777722;} .theme_row{display:flex;align-items:center;padding:2px 11px 6px;} .theme_opt{cursor:pointer;color:#374151;font-size:15px;font-weight:420;line-height:1;padding:8px 13px;border-radius:8px;} .theme_opt:hover{color:#000;} .theme_opt.active{color:#1377F9;} .theme_sep{color:#00000040;user-select:none;} .theme_opt:focus-visible{outline:2px solid #1377F9;outline-offset:2px;} .plain_menu_link{text-decoration:none;color:#374151;display:flex;} .plain_menu_label{flex-grow:1;} .outbound_link{width:14px;height:14px;fill:none;stroke:#00000070;stroke-width:1;} .ext_icon{width:.8em;height:.8em;fill:none;stroke:currentColor;stroke-width:1.8;vertical-align:-.09em;margin-left:3px;stroke-linecap:round;stroke-linejoin:round;} /* All in-app clickables are plain blue text — no underline (blue = tappable). External links keep the ↗ icon. */ .msg_clickable, .msg_link{color:#1377F9;cursor:pointer;font-weight: 450;} /* Smooth hover for inline actions; icons follow via currentColor (matches filekey v1). */ .msg_clickable, .msg_link, .dl_action, .copy_button, .confirm_pub_key, .edit_pub_key, .cancel_pub_key, .nickname_btn, .nickname_skip, .contacts_add, .contact_act, #copy_pub{transition:color .12s ease;} .dl_action svg{fill:currentColor;} .msg_clickable:hover, .msg_link:hover, .dl_action:hover, .copy_button:hover, .confirm_pub_key:hover, .edit_pub_key:hover, .nickname_btn:hover, .contacts_add:hover, .contact_act:hover, #copy_pub:hover{color:#4d9bff;} .cancel_pub_key:hover, .nickname_skip:hover{color:#0d0d0d;} .borderless{border:none;} .msg_menu_heading{margin:0;font-size:17px;font-weight:600} .msg_number_heading{margin:15px 0 0 0;font-size:16px;font-weight:600} .no_class_yet{font-size:15px;margin-bottom:10px} .msg_no_margin_cont{margin:0;} .msg_line_break{} .msg_bp_msg{margin-left:40px} .msg_bullet_point{position:absolute;left:15px;font-size:20px;} .msg_link{text-decoration:none;} .msg_spacer{height:20px;} #drop_container, .chiz_item{cursor:pointer;} #chiz_icon_container, #logo_container, .chiz_item{user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;} .no_select{user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;} .word_broken{word-break:break-all;} .nobreak{white-space:nowrap;} #copy_pub{cursor:pointer;color:#1377F9} #version_container{display:flex;justify-content:center;padding:8px 0 2px 0;} #version_number_ele{font-size:11px;cursor:pointer;color:#9ca3af;font-weight:250;} /* ---- contacts (local address book): picker chips, nickname row, manager ---- */ .contacts_picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:50%;margin:4px 0 0;} .contacts_picker_label,.contacts_picker_empty{font-size:13px;color:#00000080;width:100%;margin:0;line-height:1.4;} .contact_chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;background:#f4f4f4;border:1px solid #0000001a;border-radius:999px;padding:5px 13px 5px 5px;cursor:pointer;font-size:14px;color:#0d0d0d;line-height:1;} .contact_chip:hover{background:#1377f91a;border-color:#1377f955;} .contact_chip_label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .contact_avatar{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:#1377f91a;color:#1377F9;font-size:12px;font-weight:600;line-height:1;} .nickname_row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:flex-end;width:50%;margin:10px 0 15px;} .nickname_input{flex:1 1 180px;min-width:0;border:1px solid #0000001a;border-radius:10px;padding:12px 14px;font-size:16px;font-family:'Inter';color:#0d0d0d;background:#fff;outline:none;} .nickname_input:focus{border-color:#1377f955;} .nickname_btn{cursor:pointer;color:#1377F9;font-weight:500;line-height:1;} .nickname_skip{cursor:pointer;color:#00000080;font-weight:500;line-height:1;} .contacts_manager{margin-top:6px;} .contacts_empty{font-size:14px;color:#00000080;margin:12px 0 0;line-height:1.5;} .contacts_list{display:flex;flex-direction:column;border:1px solid #0000001a;border-radius:10px;overflow:hidden;margin-top:12px;} .contact_row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #0000001a;} .contact_row:last-child{border-bottom:none;} .contact_main{display:flex;flex-direction:column;gap:3px;flex-grow:1;min-width:0;} .contact_main .nickname_input{flex:none;width:100%;} .contact_name{font-weight:600;font-size:15px;color:#0d0d0d;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .contact_key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#00000080;word-break:break-all;line-height:1.4;} .contact_acts{display:flex;gap:14px;flex-shrink:0;align-items:center;} .contact_act{cursor:pointer;color:#1377F9;font-weight:500;font-size:14px;line-height:1;} .contact_act.delete_act{color:#00000080;} .contact_act.delete_act:hover{color:#F91313;} .contacts_footer{display:flex;align-items:center;gap:18px;margin-top:14px;} .contacts_add{cursor:pointer;color:#1377F9;font-weight:500;font-size:14px;line-height:1;} .contacts_clear_link{cursor:pointer;color:#00000080;font-weight:500;font-size:14px;line-height:1;} .contacts_clear_link:hover{color:#F91313;} .add_contact_form{display:flex;flex-direction:column;gap:10px;margin-top:12px;} .add_contact_form .pub_key_textarea{margin:0;} .add_contact_form .nickname_input{width:100%;flex:none;} .add_contact_form .pub_key_actions{margin-bottom:0;} @media screen and (max-width:1080px){ #main_window{flex-direction:column;} #main_container{padding:15vh 5vw;width:100%;} #logo_container{width: auto;padding-left:5vw;} #drop_container{width:80%;margin-top:.5vh} .std_outer, .std_dl_outer, .std_status_outer, .std_upload_outer{width:calc(100% - 70px)} #logo_container{align-items:baseline;width:100vw;background-color:#fff;z-index:1100} #chiz_container{z-index:1101;width:auto;right:5vw;} .pub_key_textarea_cont, .contacts_picker, .nickname_row{width:85%} } /* phone: compact — hide the decorative icon, center the title, full-width buttons below */ @media (max-width: 720px){ #drop_container{flex-wrap:wrap;gap:10px;padding:16px;width:90%;} #drop_container .dc_icon_container{display:none;} .dc_txt_container{flex-basis:100%;text-align:center;} .dc_txt_container .file_title{font-size:clamp(12px,3.6vw,15px);} .dc_buttons{flex-basis:100%;gap:10px;} .dc_btn{flex:1;} } .topbar_ns_container{position:fixed;width:100%;left:0;z-index:2139002000} .std_notification_bar{position:relative;display:flex;align-items: center;padding:20px 40px} .std_notification_msg{font-size:20px;font-weight:500;flex-grow:1;line-height:20px;} .std_notfication_close{right:10px;cursor:pointer;} .std_close_container{} .std_close_icon{right:10px;cursor:pointer;z-index:2100000004;fill:#fff;width:15px;height:15px;margin-left:10px;} .std_icon_container{margin-right:10px;font-size:0} .std_icon{fill:#fff;width:24px;height:24px;} @media(orientation: portrait) and (max-width: 800px) { .std_notification_msg{font-size:16px;} .std_notification_bar{flex-direction: row;align-items:center;padding:20px 15px} .std_notfication_close{position:unset;margin:0 0 0 auto;padding:0 5px} } /* =========================================================================== Dark mode — opt-in via the menu toggle (default light). COLOR ONLY: this block re-colors existing elements for dark; it changes no layout, size, or spacing. The light rules above are untouched. A small var set (also used by inline styles set in app.ts) flips per theme; the rest are scoped overrides. =========================================================================== */ :root{ --fk-fill:#f4f4f4; --fk-surface:#fff; --fk-ink-soft:#0d0d0d; --fk-muted-2:#00000099; --fk-faint:#0000003a; --fk-link:#1377F9; --fk-error:#F91313; } html[data-theme="dark"]{ --fk-fill:#1f1f23; --fk-surface:#161618; --fk-ink-soft:#f2f2f5; --fk-muted-2:#ffffff80; --fk-faint:#ffffff3a; --fk-link:#4d9bff; --fk-error:#ff5a52; background:#0c0c0e; color:#f2f2f5; color-scheme:dark; } html[data-theme="dark"] #main_container, html[data-theme="dark"] #outer_drop_container, html[data-theme="dark"] #logo_container, html[data-theme="dark"] body::before{background:#0c0c0e;} html[data-theme="dark"] #logo_txt, html[data-theme="dark"] .std_msg, html[data-theme="dark"] .file_title, html[data-theme="dark"] .contact_name{color:#f2f2f5;} html[data-theme="dark"] #chiz_icon_container, html[data-theme="dark"] #acct_icon_container{color:#f2f2f5;} html[data-theme="dark"] #acct_identity{border-color:#ffffff14;} html[data-theme="dark"] #acct_identity .id_name{color:#f2f2f5;} html[data-theme="dark"] #acct_identity .id_fp{color:#ffffff66;} html[data-theme="dark"] .slider_knob{fill:#0c0c0e;} html[data-theme="dark"] .std_status, html[data-theme="dark"] .cancel_pub_key, html[data-theme="dark"] .nickname_skip, html[data-theme="dark"] .contacts_clear_link, html[data-theme="dark"] .contacts_picker_label, html[data-theme="dark"] .contacts_picker_empty, html[data-theme="dark"] .contacts_empty, html[data-theme="dark"] .contact_key, html[data-theme="dark"] .contact_act.delete_act{color:#ffffff66;} html[data-theme="dark"] .contacts_clear_link:hover, html[data-theme="dark"] .contact_act.delete_act:hover{color:#ff5a52;} html[data-theme="dark"] .std_uploaded{background:#1f1f23;color:#f2f2f5;} html[data-theme="dark"] .std_download{background:#161618;border-color:#ffffff1f;color:#f2f2f5;} html[data-theme="dark"] .icon_container, html[data-theme="dark"] .some_background{background:#26262a;} html[data-theme="dark"] .std_dp{border-color:#1377F955;} html[data-theme="dark"] .dl_action, html[data-theme="dark"] .msg_clickable, html[data-theme="dark"] .msg_link, html[data-theme="dark"] .confirm_pub_key, html[data-theme="dark"] #copy_pub, html[data-theme="dark"] .contact_act, html[data-theme="dark"] .contacts_add, html[data-theme="dark"] .nickname_btn{color:#4d9bff;} /* Dark-mode hover lift: the base dark link color (#4d9bff) equals the light-mode hover color, so without this the in-app clickables (Confirm, Copy, etc.) show no hover change. */ html[data-theme="dark"] .msg_clickable:hover, html[data-theme="dark"] .msg_link:hover, html[data-theme="dark"] .dl_action:hover, html[data-theme="dark"] .copy_button:hover, html[data-theme="dark"] .confirm_pub_key:hover, html[data-theme="dark"] .edit_pub_key:hover, html[data-theme="dark"] .nickname_btn:hover, html[data-theme="dark"] .contacts_add:hover, html[data-theme="dark"] .contact_act:hover, html[data-theme="dark"] #copy_pub:hover{color:#80b8ff;} html[data-theme="dark"] .pub_key_textarea, html[data-theme="dark"] .nickname_input{background:#161618;color:#f2f2f5;border-color:#ffffff1f;} html[data-theme="dark"] .contact_chip{background:#1f1f23;border-color:#ffffff1f;color:#f2f2f5;} html[data-theme="dark"] .contact_chip:hover{background:#1377f933;border-color:#1377f988;} html[data-theme="dark"] .contact_avatar{background:#1377f933;color:#4d9bff;} html[data-theme="dark"] .contacts_list, html[data-theme="dark"] .contact_row{border-color:#ffffff1f;} html[data-theme="dark"] #drop_container{background:#16263f;color:#f2f2f5;} html[data-theme="dark"] .dc_btn_ghost{background:#1f1f23;color:#f2f2f5;border-color:#ffffff2b;} html[data-theme="dark"] .dc_btn_ghost:hover{background:#26262a;} html[data-theme="dark"] .chiz_item, html[data-theme="dark"] .plain_menu_link{color:#c9ced6;} html[data-theme="dark"] .chiz_item:hover{color:#fff;background:#ffffff14;} html[data-theme="dark"] #chiz_menu_inner, html[data-theme="dark"] #acct_menu_inner{background:#161618;border-color:#ffffff1f;box-shadow:2px 10px 10px #00000055;} html[data-theme="dark"] .chiz_heading{color:#4d9bff;} html[data-theme="dark"] .theme_opt{color:#c9ced6;} html[data-theme="dark"] .theme_opt:hover{color:#fff;} html[data-theme="dark"] .theme_opt.active{color:#4d9bff;} html[data-theme="dark"] .theme_sep{color:#ffffff40;} html[data-theme="dark"] .theme_opt:focus-visible{outline-color:#4d9bff;} html[data-theme="dark"] .outbound_link{stroke:#ffffff70;} html[data-theme="dark"] .import_icon{stroke:#6a6a70;} html[data-theme="dark"] #version_number_ele{color:#6a6a70;} html[data-theme="dark"] .failed_filekey_icon{fill:#ff5a52;} html[data-theme="dark"] .warning_filekey_icon{fill:#f0b86a;} html[data-theme="dark"] .failed_dp{border-color:#ff5a5255;} html[data-theme="dark"] .warning_dp{border-color:#f0b86a55;} html[data-theme="dark"] .ok_dp{border-color:#58c98a55;} /* ---- FileKey Drop additions ---- */ /* Product badge pill next to the wordmark (same pattern as the site's "Blog" pill). */ #logo_bar{align-items:center;} .badge{margin-left:10px;font-size:11px;font-weight:600;color:#1377F9;background:rgba(19,119,249,0.10);padding:3px 9px;border-radius:999px;letter-spacing:.02em;line-height:1.6;} html[data-theme="dark"] .badge{color:#4d9bff;background:rgba(77,155,255,0.14);} /* Single-line email/label prompt inputs reuse the recipient-textarea look. */ .fk_input{width:100%;outline:none;border:1px solid #0000001a;border-radius:10px;margin:10px 0;padding:14px 16px;line-height:1.4;font-size:16px;color:#0d0d0d;font-family:'Inter';background:#fff;} .fk_input:focus{border-color:#1377f955;} .fk_input_err{color:#F91313;font-size:13px;line-height:1.4;margin:0 0 6px 2px;} html[data-theme="dark"] .fk_input_err{color:#ff5a52;} html[data-theme="dark"] .fk_input{background:#161618;color:#f2f2f5;border-color:#ffffff1f;} /* Browser autofill (notably the email field) forces its own light background + dark text via the UA stylesheet. Paint over it with an inset box-shadow so autofilled inputs keep their theme colors instead of flashing white. */ .fk_input:-webkit-autofill,.fk_input:-webkit-autofill:hover,.fk_input:-webkit-autofill:focus{-webkit-text-fill-color:#0d0d0d;-webkit-box-shadow:0 0 0 1000px #fff inset;caret-color:#0d0d0d;transition:background-color 9999s ease-in-out 0s;} html[data-theme="dark"] .fk_input:-webkit-autofill,html[data-theme="dark"] .fk_input:-webkit-autofill:hover,html[data-theme="dark"] .fk_input:-webkit-autofill:focus{-webkit-text-fill-color:#f2f2f5;-webkit-box-shadow:0 0 0 1000px #161618 inset;caret-color:#f2f2f5;} .ok_dp{border:1px #1f9d5721 solid;} .ok_filekey_icon{fill:#1f9d57;height:16px;width:13px;} /* Option 5: the setup input sits left (under the question) while you fill it; on Confirm each answer becomes its own right-aligned sent bubble (no avatar). */ .fk_setup_cont{align-self:flex-start;margin-left:50px;} @media screen and (max-width:1080px){.fk_setup_cont{width:calc(100% - 70px);}} .sent_msg{background:#f4f4f4;border-radius:10px;padding:12px 16px;color:#0d0d0d;max-width:100%;word-break:break-word;line-height:1.4;margin:0;} html[data-theme="dark"] .sent_msg{background:#1f1f23;color:#f2f2f5;} html[data-theme="dark"] .ok_filekey_icon{fill:#58c98a;}