.floating-bar {
          position: fixed;
          bottom: 1.5rem;
          left: 12px;
          right: 12px;
          width: auto;
          z-index: 50;
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 0.375rem;
          border-radius: 9999px;
          box-shadow: 0 4px 16px rgba(0,0,0,0.12);
          border: 1px solid hsl(var(--border) / 0.6);
          background: hsl(var(--background));
          box-sizing: border-box;
          padding-bottom: max(0.375rem, env(safe-area-inset-bottom, 0.375rem));
        }
        @media (min-width: 768px) {
          .floating-bar {
            left: auto;
            right: 1.5rem;
            width: auto;
            display: inline-flex;
          }
        }
        .floating-bar-btn {
          flex: 1 1 0;
          min-width: 0;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          padding: 0.4375rem 0.625rem;
          border-radius: 9999px;
          font-size: 0.8125rem;
          white-space: nowrap;
          text-decoration: none;
          transition: opacity 0.15s, color 0.15s, border-color 0.15s;
          cursor: pointer;
        }
        @media (min-width: 768px) {
          .floating-bar-btn {
            flex: 0 0 auto;
          }
        }
        .floating-bar-btn-secondary {
          border: 1px solid hsl(var(--border));
          color: hsl(var(--foreground) / 0.7);
          font-weight: 500;
          background: transparent;
        }
        .floating-bar-btn-secondary:hover {
          color: hsl(var(--primary));
          border-color: hsl(var(--primary) / 0.4);
        }
        .floating-bar-btn-primary {
          background: hsl(var(--primary));
          color: hsl(var(--primary-foreground));
          font-weight: 600;
          border: none;
        }
        .floating-bar-btn-primary:hover {
          opacity: 0.9;
        }