:host { display: contents; }
.hb-drawer-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; }
.hb-drawer__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--hb-color-bg-mask); pointer-events: auto; transition: opacity 0.3s; }
.hb-drawer {
  position: fixed; background: var(--hb-color-bg-elevated); box-shadow: var(--hb-box-shadow-lg);
  display: flex; flex-direction: column; pointer-events: auto; transition: transform 0.3s ease;
}
.hb-drawer--rtl { top: 0; right: 0; bottom: 0; transform: translateX(100%); }
.hb-drawer--ltr { top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
.hb-drawer--ttb { left: 0; right: 0; top: 0; transform: translateY(-100%); }
.hb-drawer--btt { left: 0; right: 0; bottom: 0; transform: translateY(100%); }
.hb-drawer--visible.hb-drawer--rtl, .hb-drawer--visible.hb-drawer--ltr { transform: translateX(0); }
.hb-drawer--visible.hb-drawer--ttb, .hb-drawer--visible.hb-drawer--btt { transform: translateY(0); }
.hb-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--hb-spacing-md) var(--hb-spacing-lg); border-bottom: 1px solid var(--hb-color-border-secondary); }
.hb-drawer__title { font-size: var(--hb-font-size-lg); font-weight: 600; }
.hb-drawer__close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--hb-color-text-secondary); width: 28px; height: 28px; border-radius: var(--hb-border-radius-sm); display: flex; align-items: center; justify-content: center; }
.hb-drawer__close:hover { background: var(--hb-color-fill-tertiary); }
.hb-drawer__body { flex: 1; padding: var(--hb-spacing-lg); overflow-y: auto; }
