#outline-panel {
  position: absolute; top: 0; bottom: 0;
  margin-top: var(--panel-top-gap); margin-bottom: var(--panel-bot-gap);
  width: var(--outline-w);
  background: var(--panel-bg); color: var(--panel-text-color);
  z-index: 20; display: flex; flex-direction: column; overflow: hidden;
  padding: 0 8px;
  box-shadow: var(--panel-shadow);
  cursor: grab;
  touch-action: pan-y;
  border-left: 0px solid var(--panel-peek-color);
  border-right: 0px solid var(--panel-peek-color);
  transition:
    left              var(--lay-dur) var(--lay-ease),
    width             var(--lay-dur) var(--lay-ease),
    margin-top        var(--lay-dur) var(--lay-ease),
    margin-bottom     var(--lay-dur) var(--lay-ease),
    border-radius     var(--lay-dur) var(--lay-ease),
    border-color        var(--lay-dur) var(--lay-ease),
    border-left-width  var(--lay-dur) var(--lay-ease),
    border-right-width var(--lay-dur) var(--lay-ease),
    box-shadow         var(--lay-dur) var(--lay-ease),
    transform          var(--lay-dur) var(--lay-ease);
}
#outline-panel:active { cursor: grabbing; }
#outline-header { cursor: default; }
#outline-items-list, #outline-footer { cursor: grab; }
#outline-items-list:active, #outline-footer:active { cursor: grabbing; }
#outline-header {
  padding: 12px 6px; border-bottom: 1px solid #ddd; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
}
#outline-title-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: #222; font-size: 15px; font-weight: 600; font-family: inherit;
}
#outline-title-input::placeholder { color: #bbb; }
.outline-close-x {
  flex-shrink: 0; width: 20px; height: 20px; padding: 0;
  border: none; background: transparent; color: #999;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.outline-close-x:hover { background: #fdeaea; color: #cc3333; }
#outline-items-list { flex: 1; overflow-y: auto; padding: 6px 0; }
#outline-footer {
  flex-shrink: 0; border-top: 1px solid #ddd; padding: 8px;
}

#outline-selector { position: relative; }
#outline-switcher-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; font-size: 12px; color: #444;
  background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;
}
#outline-switcher-trigger:hover { background: #f7f7f7; }
#outline-switcher-trigger .ows-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#outline-switcher-trigger .ows-caret { flex-shrink: 0; margin-left: 6px; color: #999; font-size: 10px; }
#outline-switcher-panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px);
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.14);
  max-height: 240px; overflow-y: auto;
  display: none; z-index: 50;
}
#outline-switcher-panel.open { display: block; }
.ows-item {
  padding: 8px 10px; font-size: 12px; color: #444; cursor: pointer;
  border-bottom: 1px solid #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ows-item:hover { background: #f5f7fb; }
.ows-item.active { background: #eaf2ff; color: #1a3f7a; font-weight: 600; }
.ows-add {
  padding: 8px 10px; font-size: 12px; color: #4a9eff; font-weight: 600; cursor: pointer;
}
.ows-add:hover { background: #f0f6ff; }

.outline-item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 4px; margin: 0 5px;
  background: #fff; border: 1px solid #ececec;
  cursor: default; user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.outline-item:hover { background: #f6f8fb; border-color: #d8dde5; }
.outline-item.oi-dragging  { opacity: 0.4; }
.outline-item.linked-highlight { background: #fff6ea; border-color: #ff9800; }
.oi-drag-handle {
  flex-shrink: 0; width: 14px; padding-top: 2px; color: #bbb;
  font-size: 12px; cursor: pointer; line-height: 1;
}
.oi-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 4px;
  background: #e05c5c; color: #fff; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.oi-badge.oi-free { background: #aaa; }
.oi-text {
  flex: 1; font-size: 12px; color: #444; line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; word-break: break-all;
  cursor: text;
}
.oi-linked .oi-text { color: #2962b8; }
.outline-empty {
  padding: 20px 14px; color: #bbb; font-size: 12px; font-style: italic; text-align: center;
}
.outline-add-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 4px; margin: 0 5px;
  border: 1px dashed #cfd3da;
  color: #8a93a3; font-size: 12px; cursor: pointer; user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.outline-add-item:hover { background: #f6f8fb; border-color: #aab; color: #5a6373; }
.oi-add-badge {
  flex-shrink: 0; width: 20px; height: 20px;
  border: 1px dashed #bbb; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1; color: #99a;
}
.outline-add-item:hover .oi-add-badge { border-color: #8a93a3; color: #5a6373; }
.oi-add-text { flex: 1; }