.cc-quick-navigation { position: fixed; z-index: 990; right: 6px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); font: 14px/1.4 Arial, "Microsoft YaHei", sans-serif; letter-spacing: 0; color: #26352e; }
.cc-quick-navigation * { box-sizing: border-box; }
.cc-quick-actions { display: flex; flex-direction: column; gap: 5px; }
.cc-quick-button { position: relative; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid #dce6df; border-radius: 50%; background: #fff; color: #39764e; box-shadow: 0 2px 6px #142d191f; cursor: pointer; touch-action: manipulation; }
.cc-quick-button.directory { background: #f2a52b; border-color: #e29a23; color: #fff; }
.cc-quick-button.history { background: #eff7ff; color: #2378b6; }
.cc-quick-button.live { background: #eef9f2; color: #218952; }
.cc-quick-button.top { background: #24965c; border-color: #24965c; color: #fff; }
.cc-quick-button.fold { height: 28px; flex-basis: 28px; border-radius: 6px; color: #7b847f; }
.cc-quick-button.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e9be6b; }
.cc-quick-tooltip { display: none; position: absolute; right: calc(100% + 8px); padding: 5px 8px; white-space: nowrap; border-radius: 4px; background: #283b30; color: white; font-size: 12px; pointer-events: none; }
@media (hover: hover) { .cc-quick-button:hover .cc-quick-tooltip { display: block; } }
.cc-quick-navigation button:focus-visible, .cc-directory-search:focus-visible { outline: 2px solid #267fb0; outline-offset: 2px; }
.cc-material-directory { position: absolute; right: 49px; bottom: 0; display: flex; flex-direction: column; width: 236px; max-width: calc(100vw - 70px); height: 430px; max-height: calc(100vh - 158px - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 158px - env(safe-area-inset-bottom, 0px)); border: 1px solid #d8e2da; border-radius: 8px; background: #fff; box-shadow: 0 6px 24px #18352326; overflow: hidden; }
.cc-material-directory header { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 8px 7px 12px; border-bottom: 1px solid #e8eeea; }
.cc-material-directory strong { font-size: 15px; font-weight: 600; }
.cc-directory-count { color: #89948c; font-size: 12px; }
.cc-material-directory .close { margin-left: auto; width: 28px; height: 28px; flex-basis: 28px; border: 0; border-radius: 4px; box-shadow: none; }
.cc-directory-search { display: block; width: calc(100% - 20px); min-height: 34px; margin: 9px 10px; padding: 6px 9px; flex: 0 0 34px; font: inherit; font-size: 16px; border: 1px solid #dce5df; border-radius: 4px; background: #f8faf9; color: #26352e; }
.cc-directory-list { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; padding: 0 0 6px; }
.cc-directory-list button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 8px 12px; border: 0; border-radius: 0; border-left: 3px solid transparent; text-align: left; background: white; color: #35463c; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.cc-directory-list button.active { border-left-color: #28864e; background: #eef8f1; color: #237844; }
.cc-directory-list button:hover { background: #f3f7f4; }
.cc-directory-index { flex: 0 0 22px; color: #87958a; font-size: 12px; font-variant-numeric: tabular-nums; }
.cc-directory-empty { margin: 24px 10px; text-align: center; color: #839188; font-size: 13px; }
@media (max-height: 460px) { .cc-quick-actions { gap: 3px; } .cc-quick-button { height: 32px; flex-basis: 32px; } .cc-quick-navigation { bottom: 65px; } .cc-material-directory { max-height: calc(100dvh - 120px); } }