:host{--pindrop-avatar-size: 24px;--pindrop-text-lg: 16px;--pindrop-text-base: 13px;--pindrop-text-sm: 12px;--pindrop-text-xs: 11px;--pindrop-text-2xs: 10px;--pindrop-line-lg: 24px;--pindrop-line-md: 22px;--pindrop-line-base: 20px;--pindrop-line-xs: 16px;--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 *,.pindrop-sheet *,.pindrop-sheet-scrim *{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-mode-toggle:not(.active):hover{background:var(--pindrop-bg)}.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:var(--pindrop-text-lg);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:var(--pindrop-text-base);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:var(--pindrop-text-base);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:var(--pindrop-text-xs);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;align-items:flex-start;gap:10px;padding:4px 16px;position:relative;min-width:0}.pindrop-popover-avatar{flex-shrink:0;width:var(--pindrop-avatar-size);height:var(--pindrop-avatar-size);border-radius:9999px;background:var(--pindrop-pin-color);color:#fff;font-size:var(--pindrop-text-xs);font-weight:600;display:flex;align-items:center;justify-content:center;overflow:hidden}.pindrop-popover-name{display:flex;align-items:center;gap:6px;min-height:var(--pindrop-avatar-size);line-height:var(--pindrop-line-lg);min-width:0}.pindrop-popover-name strong{font-weight:550;font-size:var(--pindrop-text-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pindrop-time{color:var(--pindrop-text-secondary);font-size:var(--pindrop-text-xs);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{flex:1;min-width:0;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:var(--pindrop-text-base);font-family:var(--pindrop-font-family);resize:none;outline:none;line-height:var(--pindrop-line-base);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:var(--pindrop-text-sm);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:var(--pindrop-line-md);white-space:pre-wrap;word-break:break-word}.pindrop-popover-resolved-row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid var(--pindrop-border);font-size:var(--pindrop-text-sm);color:var(--pindrop-text-secondary)}.pindrop-popover-resolved-row>span:first-child{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--pindrop-avatar-size);height:var(--pindrop-avatar-size)}.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:var(--pindrop-avatar-size);height:var(--pindrop-avatar-size);border-radius:9999px;background:var(--pindrop-pin-color);color:#fff;font-size:var(--pindrop-text-xs);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:var(--pindrop-text-sm);font-family:var(--pindrop-font-family);cursor:pointer;text-align:left}.pindrop-popover-menu-item:hover{background:var(--pindrop-bg-secondary)}.pindrop-sidebar.pindrop-sidebar-sheet{inset:auto 0 0!important;width:100%!important;height:auto!important;max-height:80vh!important;border-radius:16px 16px 0 0!important;resize:none;animation:pindrop-sheet-in .25s cubic-bezier(.32,.72,0,1)}.pindrop-sidebar.pindrop-sidebar-sheet .pindrop-sidebar-resizer,.pindrop-sidebar .pindrop-sidebar-sheet-handle{display:none}.pindrop-sidebar.pindrop-sidebar-sheet .pindrop-sidebar-sheet-handle{display:flex}.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:var(--pindrop-text-xs);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:var(--pindrop-text-xs);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:var(--pindrop-text-xs);font-weight:450;cursor:pointer;font-family:var(--pindrop-font-family);line-height:var(--pindrop-line-xs);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:var(--pindrop-avatar-size);height:var(--pindrop-avatar-size);border-radius:9999px;background:var(--pindrop-pin-color);color:#fff;font-size:var(--pindrop-text-xs);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:var(--pindrop-avatar-size);line-height:var(--pindrop-line-lg);min-width:0}.pindrop-sidebar-body strong{font-weight:550;font-size:var(--pindrop-text-base);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:var(--pindrop-text-xs);color:var(--pindrop-text-secondary);line-height:var(--pindrop-line-xs);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pindrop-sidebar-meta{font-size:var(--pindrop-text-xs);color:var(--pindrop-text-secondary)}.pindrop-agent-badge{display:inline-flex;align-items:center;gap:3px;font-size:var(--pindrop-text-2xs);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:var(--pindrop-text-xs);line-height:var(--pindrop-line-xs);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:var(--pindrop-text-base)}.pindrop-name-modal h3{font-size:var(--pindrop-text-lg);font-weight:550;margin-bottom:4px}.pindrop-name-modal p{font-size:var(--pindrop-text-base);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:var(--pindrop-text-base);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:var(--pindrop-text-base);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:var(--pindrop-text-xs);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;max-width:calc(100vw - 16px);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:var(--pindrop-text-base);font-family:var(--pindrop-font-family);resize:none;outline:none;line-height:var(--pindrop-line-base);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:var(--pindrop-text-base);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)}.pindrop-sheet-scrim{position:fixed;inset:0;background:transparent;z-index:2}.pindrop-sheet-scrim.pindrop-sheet-closing{animation:pindrop-scrim-out .2s ease-in forwards}.pindrop-sheet{position:fixed;bottom:0;left:0;right:0;max-height:70vh;background:var(--pindrop-bg);border-radius:16px 16px 0 0;box-shadow:var(--pindrop-shadow);font-family:var(--pindrop-font-family);color:var(--pindrop-text);font-size:var(--pindrop-text-base);z-index:3;display:flex;flex-direction:column;overflow:hidden;animation:pindrop-sheet-in .25s cubic-bezier(.32,.72,0,1)}.pindrop-sheet.pindrop-sheet-closing{animation:pindrop-sheet-out .2s ease-in forwards}.pindrop-sheet-handle{display:flex;justify-content:center;padding:10px 0 4px;flex-shrink:0}.pindrop-sheet-handle-pill{width:36px;height:4px;border-radius:2px;background:var(--pindrop-border)}.pindrop-sheet-scroll{flex:1;overflow-y:auto}@keyframes pindrop-sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pindrop-sheet-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes pindrop-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes pindrop-scrim-out{0%{opacity:1}to{opacity:0}}@media(pointer:coarse)and (max-width:767px),(max-width:479px){:host{--pindrop-text-lg: 19px;--pindrop-text-base: 16px;--pindrop-text-sm: 15px;--pindrop-text-xs: 14px;--pindrop-text-2xs: 12px;--pindrop-line-lg: 28px;--pindrop-line-md: 26px;--pindrop-line-base: 24px;--pindrop-line-xs: 20px;--pindrop-avatar-size: 28px}}.pindrop-popover-contentWrap{display:flex;flex-direction:column;flex:1;min-width:0}