#ki-root { color:var(--ki-accent); }
#ki-root [hidden] { display:none !important; }
#ki-root .ki-rail { position:fixed; right:var(--ki-offset); bottom:calc(20% + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:18px; z-index:9990; }
#ki-root.ki-side-left .ki-rail { right:auto; left:var(--ki-offset); }
#ki-root .ki-action { box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:48px; min-height:48px; padding:4px; border:0; border-radius:0; background:transparent; color:var(--ki-icon); filter:none; cursor:pointer; text-decoration:none; }
#ki-root .ki-action svg { display:block; width:32px; height:32px; flex:none; overflow:visible; shape-rendering:geometricPrecision; transform:none; filter:none; }
#ki-root #ki-totop { opacity:.6; }
#ki-root #ki-totop:hover, #ki-root #ki-totop:focus-visible { opacity:1; }
#ki-root .ki-count { font:600 12px/1.2 system-ui,sans-serif; color:var(--ki-icon); }
#ki-root .ki-action img { width:38px; height:38px; border-radius:50%; }
#ki-root button:focus-visible, #ki-root a:focus-visible { outline:2px solid #25f4ee; outline-offset:3px; }
/* Suppress browser/theme tap frames without removing keyboard focus feedback. */
#ki-root .ki-action, #ki-root .ki-action:hover, #ki-root .ki-action:active, #ki-root .ki-action:focus {
    border:0;
    box-shadow:none;
    background:transparent;
    -webkit-tap-highlight-color:transparent;
}
#ki-root .ki-action:focus:not(:focus-visible),
#ki-root.ki-pointer-input .ki-action:focus {
    outline:none !important;
}
#ki-root button, #ki-root a { -webkit-tap-highlight-color:transparent; }
#ki-root #ki-close, #ki-root #ki-filter { border:0; box-shadow:none; text-shadow:none; }
#ki-root #ki-close:focus:not(:focus-visible), #ki-root #ki-filter:focus:not(:focus-visible) { outline:none; }
#ki-panel:focus { outline:none; }
.ki-has-totop #topcontrol { display:none !important; }
#ki-panel { box-sizing:border-box; position:fixed; inset:0 0 0 auto; margin:0; padding:0; width:min(var(--ki-width),100vw); max-width:100vw; height:100dvh; max-height:100dvh; border:0; background:var(--ki-bg); color:var(--ki-accent); box-shadow:-6px 0 30px #0002; overflow:hidden; font-family:system-ui,sans-serif; }
#ki-panel[open] { display:flex; flex-direction:column; animation:ki-in-right .22s ease-out; }
#ki-panel::backdrop { background:#0005; }
#ki-root .ki-header { position:relative; display:flex; align-items:center; justify-content:center; flex:none; min-height:54px; padding:8px 52px; box-sizing:border-box; background:var(--ki-bg); border:0; }
#ki-root .ki-heading { display:flex; align-items:center; justify-content:center; gap:5px; }
#ki-root .ki-header h2 { margin:0; color:var(--ki-accent); font:600 14px/1.4 system-ui,sans-serif; }
#ki-close { position:absolute; right:7px; top:5px; width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--ki-accent); font:32px/1 system-ui,sans-serif; cursor:pointer; }
#ki-filter { display:flex; align-items:center; justify-content:center; width:30px; height:36px; min-width:0; padding:0; border:0; background:transparent; color:var(--ki-accent); cursor:pointer; }
#ki-content { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; padding:0 0 env(safe-area-inset-bottom, 0px); }
#ki-content #wpdcom { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; width:100%; max-width:none; margin:0; padding:0; color:var(--ki-accent); background:transparent; font-family:system-ui,sans-serif; }
#ki-content #wpdcom #wpd-threads { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; margin:0; padding:6px 16px 12px; }
#ki-content #wpdcom .wpd-thread-head { display:none; border:0; padding:0 0 10px; margin:0; }
#ki-root.ki-show-filters #ki-content #wpdcom .wpd-thread-head { display:flex; }
#ki-content #wpdcom .wpd-thread-info { display:none; }
#ki-content #wpdcom .wpd-thread-filter { color:#aaa; }
#ki-content #wpdcom .wpd-thread-list { padding:0; }
#ki-content #wpdcom .wpd-comment { max-width:100%; margin:0 0 22px; padding:0; border:0; background:transparent; }
#ki-content #wpdcom .wpd-comment-wrap, #ki-content #wpdcom .wpd-comment-right { padding:0; background:transparent; border:0; }
#ki-content #wpdcom .wpd-comment-header { margin:0 0 3px; padding:0; }
#ki-content #wpdcom .wpd-user-info { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:0; min-height:20px; }
#ki-content #wpdcom .wpd-uinfo-top, #ki-content #wpdcom .wpd-uinfo-bottom { margin:0; padding:0; }
#ki-content #wpdcom .wpd-comment-wrap.ki-has-initial { position:relative; padding-left:43px; }
#ki-content #wpdcom .ki-comment-avatar { position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#444; color:#ddd; font:600 14px/1 system-ui,sans-serif; }
#ki-content #wpdcom .wpd-comment-author, #ki-content #wpdcom .wpd-comment-author a { color:#aaa; font:600 13px/1.45 system-ui,sans-serif; }
#ki-content #wpdcom .wpd-comment-text, #ki-content #wpdcom .wpd-comment-text p { color:var(--ki-accent); font:400 15px/1.5 system-ui,sans-serif; margin:0 0 5px; }
#ki-content #wpdcom .wpd-comment-text a { color:#25f4ee; }
#ki-content #wpdcom .wpd-comment-date, #ki-content #wpdcom .wpd-comment-footer, #ki-content #wpdcom .wpd-reply-button, #ki-content #wpdcom .wpd-vote-result { color:#909090; font:400 12px/1.5 system-ui,sans-serif; }
#ki-content #wpdcom .wpd-comment-footer { padding-top:5px; }
#ki-content #wpdcom .wpd-vote svg, #ki-content #wpdcom .wpd-reply-button svg { fill:#909090; }
#ki-content #wpdcom > .wpd-form-wrap { order:10; position:relative; z-index:5; flex:0 0 auto; max-height:55%; overflow:auto; margin:0; padding:10px 14px 12px; border-top:1px solid #ffffff12; background:var(--ki-bg); }
#ki-content #wpdcom .wpd-form-head { margin:0; padding:0; border:0; }
#ki-content #wpdcom .wpd-form { padding:0; margin:0; border:0; }
#ki-content #wpdcom textarea, #ki-content #wpdcom input[type=text], #ki-content #wpdcom input[type=email], #ki-content #wpdcom .ql-container { box-sizing:border-box; background:#383838; border:1px solid transparent; border-radius:22px; color:#f5f5f5; box-shadow:none; font:400 14px/1.5 system-ui,sans-serif; }
#ki-content #wpdcom textarea { height:44px; min-height:44px; padding:11px 16px; resize:none; }
#ki-content #wpdcom textarea::placeholder, #ki-content #wpdcom input::placeholder { color:#aaa; opacity:1; }
#ki-content #wpdcom input[type=text], #ki-content #wpdcom input[type=email] { height:40px; padding:8px 14px; }
#ki-content #wpdcom .wpd-field-comment .wpdiscuz-item { padding:0; margin:0; border:0; }
#ki-content #wpdcom .wpd-textarea-wrap { margin:0; padding:0; border:0; }
#ki-content #wpdcom .wpdiscuz-textarea-wrap { margin:0; padding:0; border:0; }
#ki-content #wpdcom .wpd-form-foot { margin:0; padding:0; border:0; }
#ki-root:not(.ki-compose-expanded) #ki-content #wpdcom > .wpd-form-wrap .wpd-form-foot { display:none; }
#ki-content #wpdcom .wpd-form-foot .wpdiscuz-item { margin-top:7px; }
#ki-content #wpdcom .wpd-prim-button { background:#fe2c55; color:#fff; border:0; border-radius:18px; padding:8px 16px; font:600 13px/1.4 system-ui,sans-serif; }
#ki-content #wpdcom .wpd-label, #ki-content #wpdcom .wpd-auth, #ki-content #wpdcom .wpd-auth a { color:#aaa; }
#ki-panel * { scrollbar-width:none; }
#ki-panel *::-webkit-scrollbar { width:0; height:0; }
#ki-scroll-indicator { position:absolute; right:2px; top:var(--ki-scroll-top,60px); width:2px; height:var(--ki-scroll-size,32px); border-radius:2px; background:#ffffff65; opacity:0; pointer-events:none; transition:opacity .2s; }
#ki-panel.ki-scrolling #ki-scroll-indicator { opacity:1; }
#ki-root .ki-status:not(:empty) { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); padding:12px 18px; border-radius:8px; background:#1f1f1f; color:#fff; z-index:10000; font:14px/1.5 system-ui,sans-serif; }
@keyframes ki-in-right { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes ki-in-bottom { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media(max-width:767px) {
    #ki-panel { inset:auto 0 0; width:100%; height:var(--ki-height); max-height:var(--ki-available,100dvh); border-radius:18px 18px 0 0; }
    #ki-panel[open] { animation-name:ki-in-bottom; }
    #ki-root .ki-rail { gap:14px; }
}
@media(prefers-reduced-motion:reduce) { #ki-panel[open] { animation:none; } #ki-scroll-indicator { transition:none; } }


/* Mobile writing uses the complete visible viewport above the software keyboard. */
#ki-root .ki-writing-back, #ki-root .ki-writing-title { display:none; }
@media (max-width:767px) {
  #ki-panel { bottom:var(--ki-viewport-bottom,0px); }
  #ki-root.ki-writing #ki-panel {
    top:var(--ki-viewport-top,0px); bottom:auto; margin:0;
    height:var(--ki-available,100dvh); max-height:var(--ki-available,100dvh);
    border-radius:0; animation:none;
  }
  #ki-root.ki-writing #ki-panel::backdrop { background:var(--ki-bg); }
  #ki-root.ki-writing .ki-heading { display:none; }
  #ki-root.ki-writing .ki-writing-title { display:block; font:600 14px/1.4 system-ui,sans-serif; }
  #ki-root.ki-writing .ki-writing-back {
    display:block; position:absolute; left:8px; top:6px; min-height:40px;
    padding:0 6px; background:transparent; border:0; box-shadow:none;
    color:var(--ki-accent); font:14px/1.4 system-ui,sans-serif;
  }
  #ki-root.ki-writing #ki-content { padding:0; }
  #ki-root.ki-writing #ki-content #wpdcom > :not(.wpd-form-wrap) { display:none !important; }
  #ki-root.ki-writing #ki-content #wpdcom > .wpd-form-wrap {
    flex:1 1 auto; min-height:0; max-height:none; width:100%; box-sizing:border-box;
    overflow-y:auto; overscroll-behavior:contain; border-top:0;
    padding:8px 14px max(12px,env(safe-area-inset-bottom));
  }
  #ki-root.ki-writing #ki-content #wpdcom .wpd-form-foot { display:block; }
  #ki-root.ki-writing #ki-content #wpdcom textarea { height:64px; min-height:64px; padding:8px 12px; border-radius:14px; font-size:16px; }
  #ki-root.ki-writing #ki-content #wpdcom input[type=text],
  #ki-root.ki-writing #ki-content #wpdcom input[type=email] { font-size:16px; height:40px; border-radius:14px; }
  #ki-root.ki-writing #ki-content #wpdcom .wpd-form-foot .wpdiscuz-item { margin-top:6px; }
}

/* Opaque writing backdrop also covers Safari's shifting layout viewport. */
#ki-root .ki-screen-cover { display:none; }
#ki-root #ki-close, #ki-root #ki-filter, #ki-root .ki-writing-back { color:var(--ki-panel-icon,var(--ki-accent)); }
#ki-content #wpdcom .wpd-prim-button,
#ki-content #wpdcom .wpd-prim-button:hover,
#ki-content #wpdcom .wpd-prim-button:focus {
  background:var(--ki-submit,#fe2c55) !important;
  color:var(--ki-submit-text,#fff) !important;
}
@media(max-width:767px) {
  #ki-root.ki-writing .ki-screen-cover {
    display:block; position:fixed; inset:-100lvh -100vw;
    background:var(--ki-bg); z-index:9999; touch-action:none;
  }
  #ki-root.ki-writing #ki-panel { box-shadow:0 0 0 100vmax var(--ki-bg); }
  #ki-panel { overscroll-behavior:none; }
}

html.ki-writing-page, html.ki-writing-page body { background:var(--ki-page-bg,#1f1f1f) !important; overscroll-behavior:none; }
@media(max-width:767px) {
  #ki-root.ki-writing #ki-content #wpdcom > .wpd-form-wrap { overscroll-behavior:none; }
}

/* Keep the dialog's painted surface full-height; only its form follows the keyboard. */
html.ki-writing-page { color-scheme:var(--ki-writing-scheme,dark); }
@media(max-width:767px) {
  #ki-root.ki-writing #ki-panel {
    top:0; bottom:auto; height:max(100lvh,var(--ki-layout-height,100lvh));
    max-height:none; padding-top:var(--ki-viewport-top,0px); box-shadow:none;
  }
  #ki-root.ki-writing #ki-content {
    flex:0 0 auto; height:calc(var(--ki-available,100dvh) - 54px);
    max-height:calc(var(--ki-available,100dvh) - 54px); min-height:0;
  }
}

/* Independent opaque backplate inside the modal's top layer. */
.ki-writing-hidden { visibility:hidden !important; }
@media(max-width:767px) {
  #ki-root.ki-writing #ki-panel { isolation:isolate; overflow:visible; background:transparent; }
  #ki-root.ki-writing #ki-panel > .ki-screen-cover {
    display:block; position:fixed; top:-100lvh; left:0; right:0; bottom:auto;
    width:100%; height:300lvh; min-height:calc(var(--ki-layout-height,100lvh) + 200lvh);
    background-color:var(--ki-bg); z-index:-1; pointer-events:none;
  }
  #ki-root.ki-writing #ki-panel > .ki-header,
  #ki-root.ki-writing #ki-panel > #ki-content { position:relative; z-index:1; background:var(--ki-bg); }
  #ki-root.ki-writing .ki-rail { visibility:hidden; }
}

@media(max-width:767px) {
 #ki-content #wpdcom input:not([type]),
 #ki-content #wpdcom input[type=text],
 #ki-content #wpdcom input[type=email],
 #ki-content #wpdcom input[type=url],
 #ki-content #wpdcom input[type=tel],
 #ki-content #wpdcom textarea,
 #ki-content #wpdcom [contenteditable=true] { font-size:16px !important; }
}


@media(max-width:767px) {
 /* Keep guest fields measurable throughout blur/focus, including wpDiscuz transitions. */
 #ki-root.ki-writing #ki-content #wpdcom > .wpd-form-wrap .wpd-form-foot {
   display:block !important; height:auto !important; max-height:none !important;
   opacity:1 !important; visibility:visible !important;
 }
}
