:host{--pindrop-pin-color: #0d99ff;--pindrop-pin-resolved: #b3b3b3;--pindrop-bg: #ffffff;--pindrop-bg-secondary: #f5f5f5;--pindrop-text: rgba(0, 0, 0, .9);--pindrop-text-secondary: rgba(0, 0, 0, .5);--pindrop-text-tertiary: rgba(0, 0, 0, .3);--pindrop-border: #e6e6e6;--pindrop-font-family: "Inter", system-ui, -apple-system, sans-serif;--pindrop-radius: 13px;--pindrop-radius-small: 2px;--pindrop-shadow: 0 0 .5px rgba(0, 0, 0, .12), 0 10px 16px rgba(0, 0, 0, .12), 0 2px 5px rgba(0, 0, 0, .15);--pindrop-shadow-pin: 0 0 .5px rgba(0, 0, 0, .18), 0 3px 8px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .1)}:host([data-pindrop-theme="dark"]){--pindrop-bg: #2c2c2c;--pindrop-bg-secondary: #383838;--pindrop-text: rgba(255, 255, 255, .9);--pindrop-text-secondary: rgba(255, 255, 255, .5);--pindrop-text-tertiary: rgba(255, 255, 255, .3);--pindrop-border: #444444;--pindrop-shadow: 0 0 .5px rgba(0, 0, 0, .3), 0 10px 16px rgba(0, 0, 0, .35), 0 2px 5px rgba(0, 0, 0, .3);--pindrop-shadow-pin: 0 0 .5px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .2)}.pindrop-toolbar *,.pindrop-popover *,.pindrop-sidebar *,.pindrop-name-overlay *,.pindrop-new-comment-box *,.pindrop-new-pin *{box-sizing:border-box;margin:0;padding:0}.pindrop-toolbar{position:fixed;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;background:var(--pindrop-bg);border:1px solid var(--pindrop-border);border-radius:24px;padding:4px;box-shadow:var(--pindrop-shadow);font-family:var(--pindrop-font-family);z-index:1;cursor:grab}.pindrop-toolbar:active{cursor:grabbing}.pindrop-mode-group{display:flex;position:relative;border-radius:16px;border:1px solid var(--pindrop-border);background:var(--pindrop-bg-secondary);padding:2px}.pindrop-mode-slider{position:absolute;top:2px;left:2px;width:calc(33.333% - 2px);height:calc(100% - 4px);background:var(--pindrop-pin-color);border-radius:14px;transition:transform .2s ease;pointer-events:none}.pindrop-mode-slider.pos-1{transform:translate(100%)}.pindrop-mode-slider.pos-2{transform:translate(200%)}.pindrop-mode-toggle{padding:5px 10px;border:none;background:transparent;color:var(--pindrop-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s;position:relative;z-index:1;border-radius:14px}.pindrop-mode-toggle.active{color:#fff}.pindrop-toolbar.snapping{transition:top .2s ease,bottom .2s ease,left .2s ease,right .2s ease,transform .2s ease}.pindrop-toolbar-divider{width:1px;height:20px;background:var(--pindrop-border)}.pindrop-toolbar-btn{width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:var(--pindrop-text-secondary);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.pindrop-toolbar-btn:hover{background:var(--pindrop-bg-secondary)}.pindrop-toolbar-menu{position:absolute;bottom:calc(100% + 8px);left:0;top:auto;background:var(--pindrop-bg);border-radius:var(--pindrop-radius);box-shadow:var(--pindrop-shadow);padding:4px;min-width:140px;z-index:1}.pindrop-toolbar-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;border-radius:8px;background:transparent;color:var(--pindrop-text);font-size:13px;font-family:var(--pindrop-font-family);cursor:pointer;white-space:nowrap;transition:background .15s}.pindrop-toolbar-menu-item:hover{background:var(--pindrop-bg-secondary)}.pindrop-toolbar-menu.menu-top{bottom:auto;top:calc(100% + 8px)}.pindrop-popover{position:fixed;width:360px;max-height:400px;overflow-y:auto;background:var(--pindrop-bg);border-radius:var(--pindrop-radius);box-shadow:var(--pindrop-shadow);font-family:var(--pindrop-font-family);color:var(--pindrop-text);font-size:13px;z-index:2}.pindrop-popover-titlebar{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 8px 0 16px;border-bottom:1px solid var(--pindrop-border);font-size:11px;font-weight:550;letter-spacing:.05px}.pindrop-popover-titlebar-actions{display:flex;align-items:center;gap:4px}.pindrop-popover-titlebar-btn{width:24px;height:24px;border:none;border-radius:4px;background:transparent;color:var(--pindrop-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.pindrop-popover-titlebar-btn:hover{background:var(--pindrop-bg-secondary)}.pindrop-popover-threads{display:flex;flex-direction:column;gap:8px;padding:8px 0 12px}.pindrop-popover-row{display:flex;flex-direction:column;padding:4px 16px 4px 48px;position:relative}.pindrop-popover-avatar{position:absolute;left:16px;top:3px;width:24px;height:24px;border-radius:9999px;background:var(--pindrop-pin-color);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;overflow:hidden}.pindrop-popover-name{display:flex;align-items:center;gap:6px;line-height:22px;min-width:0}.pindrop-popover-name strong{font-weight:550;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pindrop-time{color:var(--pindrop-text-secondary);font-size:11px;flex-shrink:0;white-space:nowrap}.pindrop-row-actions{display:none;margin-left:auto;gap:2px}.pindrop-popover-row:hover .pindrop-row-actions{display:flex}.pindrop-row-action-btn{width:20px;height:20px;border:none;border-radius:4px;background:transparent;color:var(--pindrop-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.pindrop-row-action-btn:hover{background:var(--pindrop-bg-secondary);color:var(--pindrop-text)}.pindrop-edit-container{border-radius:8px;background:var(--pindrop-bg-secondary);display:flex;flex-direction:column}.pindrop-edit-container:focus-within{box-shadow:0 0 0 1px var(--pindrop-pin-color)}.pindrop-edit-textarea{width:100%;min-height:40px;max-height:200px;padding:6px 8px 0;border:none;border-radius:8px 8px 0 0;background:transparent;color:var(--pindrop-text);font-size:13px;font-family:var(--pindrop-font-family);resize:none;outline:none;line-height:20px;overflow:hidden}.pindrop-edit-actions{display:flex;justify-content:flex-end;gap:6px;padding:4px 6px 6px}.pindrop-edit-save,.pindrop-edit-cancel{border:none;border-radius:6px;font-size:12px;font-family:var(--pindrop-font-family);font-weight:550;cursor:pointer;padding:4px 12px}.pindrop-edit-save{background:var(--pindrop-pin-color);color:#fff}.pindrop-edit-save:disabled{opacity:.4;cursor:default}.pindrop-edit-cancel{background:transparent;color:var(--pindrop-text-secondary)}.pindrop-edit-cancel:hover{color:var(--pindrop-text);background:var(--pindrop-bg-secondary)}.pindrop-popover-body{line-height:22px;white-space:pre-wrap;word-break:break-word}.pindrop-popover-resolved-row{display:flex;align-items:center;gap:6px;padding:8px 16px;border-top:1px solid var(--pindrop-border);font-size:12px;color:var(--pindrop-text-secondary)}.pindrop-popover-resolved-row svg{flex-shrink:0}.pindrop-popover-reply-area{display:flex;align-items:flex-start;gap:8px;padding:8px 16px;border-top:1px solid var(--pindrop-border)}.pindrop-popover-reply-area .pindrop-popover-avatar-small{margin-top:2px}.pindrop-popover-avatar-small{flex-shrink:0;width:24px;height:24px;border-radius:9999px;background:var(--pindrop-pin-color);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;font-family:var(--pindrop-font-family)}.pindrop-popover-reply-area .pindrop-input-wrap{flex:1}.pindrop-popover-reply-area .pindrop-input-wrap textarea{max-height:120px}.pindrop-popover-menu{position:absolute;background:var(--pindrop-bg);border:1px solid var(--pindrop-border);border-radius:8px;box-shadow:var(--pindrop-shadow);padding:3px;z-index:10;white-space:nowrap}.pindrop-popover-menu-item{display:block;width:100%;padding:5px 10px;border:none;border-radius:5px;background:transparent;color:var(--pindrop-text);font-size:12px;font-family:var(--pindrop-font-family);cursor:pointer;text-align:left}.pindrop-popover-menu-item:hover{background:var(--pindrop-bg-secondary)}.pindrop-sidebar{position:fixed;top:0;width:240px;height:100vh;background:var(--pindrop-bg);border-radius:var(--pindrop-radius);box-shadow:var(--pindrop-shadow);font-family:var(--pindrop-font-family);color:var(--pindrop-text);font-size:11px;z-index:2;display:flex;flex-direction:column;overflow:hidden}.pindrop-sidebar-right{right:8px;top:8px;height:calc(100vh - 16px)}.pindrop-sidebar-left{left:8px;top:8px;height:calc(100vh - 16px)}.pindrop-sidebar-resizer{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;z-index:10;background:transparent;transition:background .1s}.pindrop-sidebar-resizer:hover,.pindrop-sidebar-resizer.dragging{background:var(--pindrop-pin-color);opacity:.3}.pindrop-sidebar-right .pindrop-sidebar-resizer{left:0}.pindrop-sidebar-left .pindrop-sidebar-resizer{right:0}.pindrop-sidebar-header{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 8px 0 16px;flex-shrink:0}.pindrop-sidebar-title{font-size:11px;font-weight:450;color:var(--pindrop-text)}.pindrop-sidebar-icon-btn{width:24px;height:24px;border:none;border-radius:4px;background:transparent;color:var(--pindrop-text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .1s}.pindrop-sidebar-icon-btn:hover{background:var(--pindrop-bg-secondary)}.pindrop-sidebar-filter-bar{display:flex;position:relative;margin:4px 8px 0;border-radius:14px;border:1px solid var(--pindrop-border);background:var(--pindrop-bg-secondary);padding:2px;flex-shrink:0}.pindrop-sidebar-filter-slider{position:absolute;top:2px;left:2px;width:calc(33.333% - 2px);height:calc(100% - 4px);background:var(--pindrop-pin-color);border-radius:12px;transition:transform .2s ease;z-index:0}.pindrop-sidebar-filter-slider.pos-1{transform:translate(100%)}.pindrop-sidebar-filter-slider.pos-2{transform:translate(200%)}.pindrop-sidebar-filter-btn{flex:1;padding:4px 0;border:none;border-radius:12px;background:transparent;color:var(--pindrop-text-secondary);font-size:11px;font-weight:450;cursor:pointer;font-family:var(--pindrop-font-family);line-height:16px;letter-spacing:.055px;text-align:center;position:relative;z-index:1;transition:color .15s}.pindrop-sidebar-filter-btn.active{color:#fff}.pindrop-sidebar-list{flex:1;overflow-y:auto;padding:4px 0}.pindrop-sidebar-row{padding:4px 8px;cursor:pointer}.pindrop-sidebar-row-content{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:5px;transition:background .1s}.pindrop-sidebar-row:hover .pindrop-sidebar-row-content{background:var(--pindrop-bg-secondary)}.pindrop-sidebar-row-content.selected{background:#e5f4ff}:host([data-pindrop-theme="dark"]) .pindrop-sidebar-row-content.selected{background:#0d99ff26}.pindrop-sidebar-row-content.resolved{opacity:.5}.pindrop-sidebar-num{flex-shrink:0;width:24px;height:24px;border-radius:9999px;background:var(--pindrop-pin-color);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}.pindrop-sidebar-row-content.read .pindrop-sidebar-num,.pindrop-sidebar-row-content.resolved .pindrop-sidebar-num{background:var(--pindrop-text-secondary)}.pindrop-sidebar-body{flex:1;min-width:0}.pindrop-sidebar-name-row{display:flex;align-items:center;gap:6px;min-height:24px;line-height:24px;min-width:0}.pindrop-sidebar-body strong{font-weight:550;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pindrop-sidebar-name-row .pindrop-time{white-space:nowrap}.pindrop-sidebar-body p{margin:2px 0;font-size:11px;color:var(--pindrop-text-secondary);line-height:16px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pindrop-sidebar-meta{font-size:11px;color:var(--pindrop-text-secondary)}.pindrop-agent-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:550;line-height:1.4;padding:2px 6px;border-radius:99px;background:#0d99ff1f;color:var(--pindrop-pin-color);vertical-align:middle;letter-spacing:.02em;align-self:center}.pindrop-sidebar-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 24px;text-align:center}.pindrop-sidebar-empty-icon{color:var(--pindrop-text-secondary)}.pindrop-sidebar-empty-text{font-size:11px;line-height:16px;color:var(--pindrop-text-secondary);letter-spacing:.055px}.pindrop-name-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0006;display:flex;align-items:center;justify-content:center;z-index:3}.pindrop-name-modal{background:var(--pindrop-bg);border-radius:var(--pindrop-radius);width:360px;box-shadow:var(--pindrop-shadow);font-family:var(--pindrop-font-family);color:var(--pindrop-text);font-size:13px}.pindrop-name-modal h3{font-size:16px;font-weight:550;margin-bottom:4px}.pindrop-name-modal p{font-size:13px;color:var(--pindrop-text-secondary);margin-bottom:12px}.pindrop-name-input{width:100%;height:32px;padding:0 8px;border:none;border-radius:8px;background:var(--pindrop-bg-secondary);color:var(--pindrop-text);font-size:13px;font-family:var(--pindrop-font-family);margin-bottom:12px;outline:none;min-height:28px}.pindrop-name-input::placeholder{color:var(--pindrop-text-tertiary)}.pindrop-name-input:focus{box-shadow:0 0 0 1px var(--pindrop-pin-color)}.pindrop-name-submit{width:100%;height:32px;padding:0 8px;border:none;border-radius:8px;background:var(--pindrop-pin-color);color:#fff;font-size:13px;font-weight:550;cursor:pointer;font-family:var(--pindrop-font-family)}.pindrop-name-submit:hover:not(:disabled){opacity:.9}.pindrop-name-submit:disabled{opacity:.5;cursor:not-allowed}.pindrop-btn-destructive{background:transparent;color:#e53e3e;border:1px solid #e53e3e}.pindrop-btn-destructive:hover{background:#e53e3e;color:#fff;opacity:1}.pindrop-confirm-header{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 8px 0 16px;border-bottom:1px solid var(--pindrop-border)}.pindrop-confirm-header h3{font-size:11px;font-weight:550;letter-spacing:.05px;margin:0}.pindrop-confirm-body{padding:12px 16px 16px}.pindrop-new-pin{position:fixed;width:36px;height:36px;transform:translate(-3px,-32px);filter:drop-shadow(0 1px 3px rgba(0,0,0,.12)) drop-shadow(0 3px 8px rgba(0,0,0,.08));pointer-events:none;animation:pindrop-pin-drop .2s ease-out;z-index:2}.pindrop-new-comment-box{position:fixed;box-sizing:border-box;width:280px;background:var(--pindrop-bg);border-radius:var(--pindrop-radius);box-shadow:var(--pindrop-shadow);padding:12px;pointer-events:auto;animation:pindrop-box-in .15s ease-out;z-index:2}.pindrop-input-wrap{position:relative;min-height:28px;border-radius:8px;background:var(--pindrop-bg-secondary)}.pindrop-input-wrap:focus-within{box-shadow:0 0 0 1px var(--pindrop-pin-color)}.pindrop-input-wrap.has-content{min-height:56px}.pindrop-input-wrap textarea{display:block;width:100%;min-height:28px;max-height:200px;padding:4px 32px 4px 8px;border:none;border-radius:8px;background:transparent;color:var(--pindrop-text);font-size:13px;font-family:var(--pindrop-font-family);resize:none;outline:none;line-height:20px;overflow:hidden}.pindrop-input-wrap.has-content textarea{padding-right:8px;padding-bottom:28px}.pindrop-input-wrap textarea::placeholder{color:var(--pindrop-text-tertiary)}.pindrop-input-wrap .pindrop-send-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:50%;background:var(--pindrop-pin-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s;padding:0}.pindrop-input-wrap.has-content .pindrop-send-btn{top:auto;bottom:4px;transform:none}.pindrop-input-wrap .pindrop-send-btn:disabled{background:var(--pindrop-border);color:var(--pindrop-text-tertiary);cursor:default}.pindrop-new-comment-box.pindrop-saving{animation:pindrop-box-out .25s ease-out forwards}.pindrop-new-pin.pindrop-saving{animation:pindrop-pin-fade .25s ease-out forwards}@keyframes pindrop-pin-drop{0%{transform:translate(-3px,-32px) scale(0);opacity:0}to{transform:translate(-3px,-32px) scale(1);opacity:1}}@keyframes pindrop-box-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes pindrop-box-out{to{opacity:0;transform:scale(.95)}}@keyframes pindrop-pin-fade{to{opacity:0}}.pindrop-comment-input{width:100%;padding:0 8px;border:none;border-radius:var(--pindrop-radius);background:var(--pindrop-bg-secondary);color:var(--pindrop-text);font-size:13px;font-family:var(--pindrop-font-family);outline:none;height:40px}.pindrop-comment-input::placeholder{color:var(--pindrop-text-tertiary)}.pindrop-comment-input:focus{box-shadow:0 0 0 1px var(--pindrop-pin-color)}